@import url('variables.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================================
   RESET & BASE STYLES
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    min-height: 100vh;
    transition: var(--transition-colors);
    background-color: #ffffff !important;
}

/* ============================================================================
   TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

p {
    margin-bottom: var(--space-3);
    line-height: var(--line-height-relaxed);
}

a {
    color: var(--color-primary);
    text-decoration: none !important;
    transition: var(--transition-colors);
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* Font Weight Utilities */
.fw-light {
    font-weight: var(--font-weight-light);
}

.fw-normal {
    font-weight: var(--font-weight-normal);
}

.fw-medium {
    font-weight: var(--font-weight-medium);
}

.fw-semibold {
    font-weight: var(--font-weight-semibold);
}

.fw-bold {
    font-weight: var(--font-weight-bold);
}

.fw-extrabold {
    font-weight: var(--font-weight-extrabold);
}

/* Legacy support */
.fw-400 {
    font-weight: var(--font-weight-normal);
}

.fw-500 {
    font-weight: var(--font-weight-medium);
}

.fw-600 {
    font-weight: var(--font-weight-semibold);
}

.fw-700 {
    font-weight: var(--font-weight-bold);
}

/* ============================================================================
   LAYOUT COMPONENTS
   ========================================================================== */

.my-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    padding: 0 var(--space-4);
    margin: 0 auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ============================================================================
   HEADER SECTION
   ========================================================================== */

.header-sec {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    backdrop-filter: blur(8px);
    transition: var(--transition-all);
}

.header-sec .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-logo {
    height: 40px;
    width: auto;
    transition: var(--transition-transform);

    cursor: pointer;

}

.main-logo:hover {
    transform: scale(1.05);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.notification-bell,
.profile-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-all);
    cursor: pointer;
}

.notification-bell:hover,
.profile-icon:hover {
    background: var(--color-surface-hover);
    transform: translateY(-1px);
}

/* ============================================================================
   TOP HEADER SECTION
   ========================================================================== */

.top-head-sec {
    padding: var(--space-3) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-image: url('../../assets/images/Graphic01.jpg');
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
}

.top-head-sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.09) 0%, transparent 50%);
    pointer-events: none;
}

[data-bs-theme="dark"] .top-head-sec::before,
[data-bs-theme="midnight"] .top-head-sec::before,
[data-bs-theme="carbon"] .top-head-sec::before,
[data-bs-theme="cyber-glow"] .top-head-sec::before,
[data-bs-theme="solarized-dark"] .top-head-sec::before {
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
}

.top-app-description {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    color: initial;
}

.top-app-txt {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .top-app-description {
        max-width: 95%;
        padding: 0 10px;
    }

    .top-app-txt {
        max-width: 95%;
        padding: 0 10px;
    }
}

[data-bs-theme="dark"] .top-app-description,
[data-bs-theme="midnight"] .top-app-description,
[data-bs-theme="carbon"] .top-app-description,
[data-bs-theme="cyber-glow"] .top-app-description,
[data-bs-theme="solarized-dark"] .top-app-description {
    color: var(--color-primary);
}

[data-bs-theme="dark"] .top-app-txt,
[data-bs-theme="midnight"] .top-app-txt,
[data-bs-theme="carbon"] .top-app-txt,
[data-bs-theme="cyber-glow"] .top-app-txt,
[data-bs-theme="solarized-dark"] .top-app-txt {
    color: var(--color-primary);
}

.top-icon {
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-transform);
}

.top-icon:hover {
    transform: rotate(5deg) scale(1.05);
}

.top-app-txt {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

[data-bs-theme="dark"] .top-app-txt,
[data-bs-theme="midnight"] .top-app-txt,
[data-bs-theme="carbon"] .top-app-txt,
[data-bs-theme="cyber-glow"] .top-app-txt,
[data-bs-theme="solarized-dark"] .top-app-txt {
    color: var(--color-primary);
}

/* ============================================================================
   NAVIGATION TABS
   ========================================================================== */

.cust-tab-con {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cust-tab-con::-webkit-scrollbar {
    display: none;
}

#cust-tab {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    padding: 0;
    margin: var(--space-6) 0 0;
    border: none;
    background: transparent;
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    padding: var(--space-2);
    border: 1px solid var(--nav-pills-link-active-bg) !important;
}

#cust-tab .nav-link.active {
    color: var(--color-primary-50) !important;
    background: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

#cust-tab .nav-link {
    color: var(--color-text-primary);
    border: none;
    border-radius: var(--radius-full);
    padding: 10px 30px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-all);
    white-space: nowrap;
    position: relative;
    text-decoration: none !important;
}

#cust-tab .nav-link:hover {
    background: var(--color-surface-hover);
    transform: translateY(-1px);
}

#cust-tab .nav-link.active {

    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    #cust-tab .nav-link {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-xs);
    }

    .top-app-txt {
        font-size: var(--font-size-2xl);
        max-width: 95%;
        padding: 0 10px;
    }

    .top-app-description {
        max-width: 95%;
        padding: 0 10px;
    }

    .top-icon {
        width: 60px;
        height: 60px;
    }
}

/* ============================================================================
   CARD COMPONENTS
   ========================================================================== */

.sec-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.sec-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--color-border-focus);
}

.sec-item-2 {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-all);
}

.sec-item-2:hover {
    box-shadow: var(--shadow-md);
}

.sec-item-2-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.sec-item-2-body {
    padding: var(--space-6);
}

.sec-box-shadow {
    box-shadow: var(--shadow-md);
}

/* ============================================================================
   FORM ELEMENTS
   ========================================================================== */

.form-control,
.form-select,
.com-input,
.cust-int,
.signin-int {
    font-size: var(--font-size-base);
    padding: var(--space-3) var(--space-4);
    transition: var(--transition-all);
    box-shadow: var(--shadow-xs);
}

.form-control:focus,
.form-select:focus,
.com-input:focus,
.cust-int:focus,
.signin-int:focus {
    outline: none;
    border-color: var(--color-border-focus);
}

.form-control:hover,
.form-select:hover,
.com-input:hover,
.cust-int:hover,
.signin-int:hover {
    border-color: var(--color-border-focus);
}

/* Special input styles */
.com-input {
    height: 50px;
    border-radius: var(--radius-full);
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    flex: 1;
}

.search-con {
    position: relative;
    margin-bottom: var(--space-5);
}

.search-con input[type="text"] {
    height: 60px;
    font-size: var(--font-size-lg);
    border-radius: var(--radius-xl);
    padding: var(--space-4) 60px var(--space-4) var(--space-5);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}

.search-icon {
    position: absolute;
    top: 50%;
    right: var(--space-4);
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0.6;
}

/* ============================================================================
   BUTTON COMPONENTS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-all);
    user-select: none;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.2);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    background: var(--color-surface);
    color: var(--color-text-tertiary);
    border-color: var(--color-border) !important;
    border: 1px solid var(--color-border) !important;
}

/* Primary Button */
.btn-primary,
.btn-post,
.btn-signin,
.btn-invite,
.btn-chat {
    background: var(--color-primary);
    color: var(--color-primary-50);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-post:hover,
.btn-signin:hover,
.btn-invite:hover,
.btn-chat:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--color-primary-hover);
}

/* Secondary Button */
.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-secondary-hover);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--color-secondary);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.btn-danger:hover {
    background: var(--color-secondary-hover);
    color: var(--color-danger-600);
}

/* Special Buttons */
.btn-post,
.btn-signin,
.btn-invite,
.btn-chat {
    height: 50px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.btn-unlock {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    border: none;
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-medium);
    margin: var(--space-3) var(--space-5) var(--space-5);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition-all);
    box-shadow: var(--shadow-sm);
}

.btn-unlock:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--color-primary), 0.3);
}

/* Button sizes */
.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
}

.btn-sm:hover {
    color: var(--color-primary-hover) !important;
}

/* ============================================================================
   POST CREATOR & EDITOR
   ========================================================================== */

.post-creator {

    margin-bottom: var(--space-5);

    transition: var(--transition-all);
}

.post-creator.expanded {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.post-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.fake-input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-3) var(--space-4);
    cursor: text;
    display: flex;
    align-items: center;
    transition: var(--transition-all);
    font-size: var(--font-size-base);
}

.fake-input:hover {
    border-color: var(--color-border-focus);
}

.real-editor {
    display: none;
    width: 100%;
    min-height: 120px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    font-size: var(--font-size-base);
    font-family: inherit;
    outline: none;
    background: var(--color-background);
    transition: var(--transition-all);
    resize: vertical;
}

.real-editor:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.1);
}

.post-creator.expanded .fake-input {
    display: none;
}

.post-creator.expanded .real-editor {
    padding: 0;
    display: block;
}

.post-title-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: transparent;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-focus) !important;
    transition: var(--transition-colors);
}

.post-title-input::placeholder {
    color: var(--color-text);
}

.post-title-input:focus {
    border-bottom-color: var(--color-border-focus);
}

.toolbar {
    display: none;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-4);
    justify-content: flex-end;
    gap: var(--space-3);
}

.post-creator.expanded .toolbar {
    display: flex;
}

.post-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* ============================================================================
   POST ITEMS
   ========================================================================== */

.post-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-all);
}

.post-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.post-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.post-author {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.post-time {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.post-content {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.post-stats {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3);
}

.post-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: var(--transition-all);
}

.post-stat:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
}

/* ============================================================================
   MEMBER COMPONENTS
   ========================================================================== */

.user-image {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    transition: var(--transition-transform);
}

.user-image:hover {
    transform: scale(1.05);
}

.name-sec {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
}

.user-email {
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin-top: var(--space-1);
    word-break: break-word;
}

.user-count {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    height: 50px;
}

.user-count img {
    width: 50px;
    height: 50px;
    margin-left: -var(--space-4);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-background);
    transition: var(--transition-transform);
}

.user-count img:first-child {
    margin-left: 0;
}

.user-count img:hover {
    transform: scale(1.1) translateY(-2px);
    z-index: 10;
    position: relative;
}

@media (max-width: 768px) {
    .user-count {
        justify-content: flex-start;
    }

    .user-count img {
        margin-right: 8px;
    }

    .sec-item .btn-post {
        width: 100%;
        justify-content: center;
    }

    .sec-item>.d-flex.flex-column.flex-md-row {
        gap: 1rem;
    }

}

@media (max-width: 768px) {
    .name-sec {
        flex-direction: column;
        align-items: flex-start;
    }

    .name-sec>.ms-auto {
        margin-left: 0 !important;
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .name-sec>.ms-auto span,
    .name-sec>.ms-auto a,
    .name-sec>.ms-auto button {
        flex: 1 1 auto;
    }

}

/* ============================================================================
   MESSAGING COMPONENTS
   ========================================================================== */

.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-6);
}

.card-body {
    padding: var(--space-6);
}

.card-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-6);
}

.symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.symbol-circle {
    border-radius: var(--radius-full);
}

.symbol-35px {
    width: 35px;
    height: 35px;
}

/* ============================================================================
   COMMENT SYSTEM
   ========================================================================== */

.comments-section {
    display: none;
    transition: var(--transition-all);
}

.comments-section.show {
    display: block;
}

.comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
}

.comments-count {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.comment-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    transition: var(--transition-colors);
}

.comment-item.reply {
    padding-left: var(--space-16);
    border-bottom: 1px solid var(--color-border-light);
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}

.comment-author {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.comment-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
    line-height: var(--line-height-relaxed);
    word-break: break-word;
}

.comment-actions {
    display: flex;
    gap: var(--space-4);
    font-size: var(--font-size-xs);
}

.comment-action {
    color: var(--color-text-tertiary);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-colors);
}

.comment-action:hover {
    color: var(--color-primary);
}

.comment-input-section {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    align-items: center;
}

.comment-input {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    outline: none;
    transition: var(--transition-all);
    min-height: 36px;
    color: var(--color-text-primary);
}

.comment-input:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.1);
}

.comment-submit {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-all);
    min-width: 70px;
}

.comment-submit:hover:not(:disabled) {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.comment-submit:disabled {
    background: var(--color-text-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ============================================================================
   DROPDOWN MENUS
   ========================================================================== */

.dropdown-menu {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2);
    animation: dropdownSlide 0.2s ease-out;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: var(--transition-colors);
    font-size: var(--font-size-sm);
}

.dropdown-item:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.dropdown-item.text-danger {
    color: var(--color-danger-500);
}

.dropdown-item.text-danger:hover {
    background: var(--color-danger-50);
    color: var(--color-danger-600);
}

/* ============================================================================
   MODAL COMPONENTS
   ========================================================================== */
.modal-footer {
    padding: var(--space-6);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* ============================================================================
   SIGNIN/SIGNUP FORMS
   ========================================================================== */

.signin-sec {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface) 100%);
    padding: var(--space-20) 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signin-sec-con {
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin: 0 auto;
    max-width: 400px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
}

.signin-logo {
    width: 200px;
    max-width: 100%;
    display: block;
    margin: 0 auto var(--space-5);
}

.signin-label {
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.text-head {
    font-weight: var(--font-weight-semibold);
}

/* ============================================================================
   LOADING STATES
   ========================================================================== */

.loading-skeleton {
    animation: pulse 1.5s ease-in-out infinite;
    padding: var(--space-4) var(--space-5);
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    flex-shrink: 0;
}

.skeleton-content {
    flex: 1;
}

.skeleton-line {
    height: 12px;
    background: var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.skeleton-line.short {
    width: 30%;
}

.skeleton-line.medium {
    width: 60%;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 10px;
    }

    .sec-item-2 {
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 16px;
    }

    .show-replies-btn,
    .hide-replies-btn {
        margin-left: 0;
    }

    .comment-input-section {
        padding: 12px 16px;
    }

    .comment-input-section.reply-input {
        margin: 8px 16px;
    }

    .comments-header {
        padding: 12px 16px;
    }

    .comment-submit {
        padding: 8px 12px;
        min-width: 60px;
    }

    .comment-input {
        font-size: 0.9rem;
    }
}

/* Comment Item Layout */
.comment-item {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.comment-item.reply {
    border: 0px solid var(--color-border);
    padding: 5px 0px 10px 20px;
    border-bottom: 1px solid var(--color-border);
}

/* Avatar */
.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}

/* Content */
.comment-content {
    flex: 1;
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.comment-author {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}

.comment-time {
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Text */
.comment-text {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Actions */
.comment-actions {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
}

.comment-action {
    color: var(--color-muted);
    cursor: pointer;
    font-weight: 500;
    transition: color 0.2s ease;
}

.comment-action:hover {
    color: var(--color-primary);
}

/* Show/Hide Replies Button */
.show-replies-btn,
.hide-replies-btn {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    background: none;
    border: none;
}

.show-replies-btn:hover,
.hide-replies-btn:hover {
    text-decoration: underline;
}

/* Reply Input */
.comment-input-section.reply-input {
    margin-top: 8px;
    background: #f8fafc;
    border-radius: 8px;
}

/* Hide loader by default */
.comments-loader {
    display: none;
    padding: 12px;
    text-align: center;
}

/* Show loader when comments-section has .loading */
.comments-section.loading .comments-loader {
    display: block;
}

.loader {
    width: 24px;
    height: 24px;
    border: 3px solid #ddd;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.hidden {
    display: none !important;
}

.posts-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.posts-loader .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.signin-sec {
    background: url("../images/Graphic02.jpg") !important;
    background-size: cover !important;
    background-position: bottom !important;
    padding: 40px 0px !important;
}

.signin-logo {
    width: 250px !important;
    max-width: 100% !important;
    display: table !important;
    margin: 0px auto !important;
    margin-bottom: 20px !important;
}

.signin-sec-con {
    background: #fff !important;
    border-radius: 25px !important;
    padding: 30px !important;
    margin: 0px auto !important;
    max-width: 100% !important;
    outline: 2px solid #d6ddfa !important;
}

.login-sec {
    background: var(--color-bg) !important;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-left {
    width: 50%;
    background: #072942;
    background-size: cover;
    padding: 20px;
    text-align: center;
}

.login-right {
    width: 50%;
    padding: 40px 30px;
    background: white;
    border: 1px solid #8dd6e2;
    border-radius: 0px 15px 15px 0px;
}

.login-main {
    border-radius: 16px;
    overflow: hidden;
    background: #113d00;
}

.left-img {
    width: 120px;
    max-width: 100%;
}

.input-icon {
    position: absolute;
    top: 23px;
    right: 17px;
    width: 25px;
}

.input-icon-1 {
    position: absolute;
    top: 16px;
    right: 17px;
    width: 25px;
}

.text-small {
    font-size: 0.9rem;
}

.login-input {
    padding: 15px 48px 15px 15px;
    background: #f6feff;
    border-radius: 9px;
    border: 1px solid #93d3dc;
    color: rgb(29, 29, 29);
    font-size: 1.3rem;
}

.form-control:focus {
    /* border: 1px solid rgb(201, 201, 201); */
    background: white;
    color: rgb(0, 0, 0) !important;
    box-shadow: none !important;
}

::placeholder {
    color: #4c4040 !important;
    opacity: 1;
    /* Firefox */
}

::-ms-input-placeholder {
    /* Edge 12-18 */
    color: #4c4040 !important;
}

.btn-login {
    color: #ffffff;
    border: 0px solid;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 15px;
    background: rgb(48 170 191);
    border-radius: 8px;
}

.btn-login:hover {
    background: rgb(37, 132, 148);
    color: #ffffff;
}

.bg-login {
    background-image: url("../images/bg-1.jpg");
    background-size: cover;
    background-position: top center;
    background-color: #e8fcfe;
}

@media (max-width:992px) {
    .login-left {
        width: 100% !important;
        display: none !important;
    }

    .login-right {
        border-radius: 15px;
        width: 100% !important;
        padding: 20px;
    }
}

.rem-chk {
    position: relative;
    top: 2px;
    border-color: #30aabf;
    padding: 8px;
}

.fw-600 {
    font-weight: 600;
}

.login-heading {
    font-size: 30px;
    color: #000000 !important;
    font-weight: 500;
    margin: 20px;
}

.login-heading-top {
    font-size: 22px;
    color: #fc620e !important;
    font-weight: 500;
    margin: 20px;
}

.login-main a {
    color: #37a1f5;
    text-decoration: underline;
    font-weight: 500;
    font-size: 1.1rem;
}

.for-txt {
    color: #ffffff;
    font-weight: 400;
}

label.fss-15 {
    color: #696969;
    font-size: 1.1rem;
}

.ffs {
    font-size: 1.1rem;
}

.form-check-input:checked {
    background-color: #30aabf !important;
    border-color: #30aabf !important;
}

.form-check-input:focus {
    border-color: #30aabf !important;
    outline: 0;
    box-shadow: none !important;
}

@media (max-width:767px) {
    .login-heading {
        font-size: 22px;
    }

    .login-heading-top {
        font-size: 20px;
    }

    .btn-login {
        font-size: 1.1rem !important;
    }

    .login-input {
        font-size: 1.1rem !important;
    }

    label.fss-15 {
        font-size: 0.9rem !important;
    }

    .login-main a {
        font-size: 0.9rem !important;
    }

    .ffs {
        font-size: 0.9rem !important;
    }

    .rem-chk {
        padding: 7px !important;
    }

    #cust-tab .nav-link {
        font-size: 1.1rem !important;
    }

    .nav-pills .nav-link {
        font-size: 1.1rem;
    }

    a.fs-5 {
        font-size: 0.9rem !important;
    }
}

a.fs-5 {
    font-size: var(--font-size-base) !important;
}

.logo-img {
    width: 250px;
    max-width: 100%;
}

.signin-label {
    color: rgb(78 78 78) !important;
    margin-bottom: 5px !important;
    font-size: 19px !important;
    font-weight: 500 !important;
}

@media (max-width: 767px) {
    .signin-label {
        font-size: 1.1rem !important;
    }

    .btn-signin,
    .signin-int {
        font-size: 1.1rem !important;
    }
}

.btn-signin {
    background: #00aea4 !important;
    color: var(--color-primary-50);
    margin-top: 25px !important;
    font-size: 1.2rem !important;
}

.btn-signin:hover {
    background: var(--color-primary-hover) !important;
    color: var(--color-primary-50);
}

.text-head {
    font-weight: 600 !important;
}

.signin-int {
    font-size: 1.02rem !important;
    height: 50px !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
}

.cust-chk-int {
    background-color: #f6feff !important;
    border: 1px solid #9ad7e1 !important;
    cursor: pointer !important;
    width: 20px !important;
    height: 19px !important;
    margin-right: 7px !important;
    position: relative !important;
    top: -3px !important;
}

.cust-chk-int:focus {
    box-shadow: none !important;
}

.cust-chk-int:checked {
    background-color: #00aea4 !important;
    border-color: #00aea4 !important;
}

.tekfooter {
    width: 220px !important;
    max-width: 100% !important;
    margin-top: 10px !important;
}

.mail-icon {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 24px !important;
}

.pass-icon {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 25px !important;
}

.expanded-section {
    display: none;
}

.post-creator.expanded .expanded-section {
    display: block;
}

.post-user-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}

.mention {
    color: #1877f2;
    font-weight: 600;
}

.mention-dropdown {
    position: absolute;
    background: var(--color-bg);
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.mention-item {
    padding: 5px 10px;
    cursor: pointer;
}

.mention-item:hover {
    background: #f0f0f0;
}

/* Link preview */
.link-preview {
    display: flex;
    gap: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    margin-top: 8px;
}

.link-preview img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.link-preview .title {
    font-weight: 600;
}

.link-preview .desc {
    font-size: 13px;
    color: #666;
}

.link-preview .url {
    font-size: 12px;
    color: #999;
}

.post-title-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    background: transparent;
    padding: 4px 0;
}

.post-title-input::placeholder {
    color: #94a3b8;
}

.post-title-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.post-title-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.post-title-input:focus {
    outline: none;
    border-bottom: 1px solid var(--color-primary);
}

.title-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #6b7280;
}

.error-msg {
    color: var(--color-danger-text);
    font-size: 13px;
    font-weight: 500;
}

.user-count {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    height: 50px;
}

.user-count img {
    margin-left: -20px;
    border-radius: 50%;
    border: 2px solid var(--color-bg);
}

.user-count img:first-child {
    margin-left: 0;
}

.user-email {
    font-size: 1rem;
    color: gray;
    position: relative;
    top: -5px;
    word-break: break-word;
}

.status-sec {
    border: 1px solid #c4c4c4a3;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 1.1rem;
}

.member-sec {
    font-size: 1.3rem;
    background: #f3f4f6;
    display: table;
    padding: 10px 15px;
    border-radius: 10px;
    height: 50px;
}

.imp-pos {
    position: relative;
    top: -2px;
}

@media (max-width:767px) {
    .member-sec {
        font-size: 1.1rem !important;
    }

    .sec-item-member-body {
        padding: 20px 20px 20px 20px !important;
    }

    .para-con {
        font-size: 1.1rem !important;
    }
}

button.btn.btn-invite {
    background: var(--color-primary);

    border-radius: 8px;
    padding: 0px 20px;
    font-size: 1.3rem;
    height: 50px;
}

button.btn.btn-invite:hover {
    background: var(--color-primary-hover);
}

.btn-lock {
    padding: 10px 30px;
    border-radius: var(--radius-full);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: none;
    outline: none;
}

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

.para-con {
    font-size: 1.2rem;
    font-weight: 500;
}

@media (max-width:767px) {
    .btn-lock {
        font-size: 1.1rem !important;
    }

    .btn-chat {
        font-size: 1.1rem !important;
    }

    button.btn.btn-invite {
        font-size: 1.1rem;
    }
}

.sec-item-member-body {
    padding: 20px 20px 20px 80px;
}



.btn-chat:hover {
    background: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

.fw-700 {
    font-weight: 700 !important;
}

.search-con {
    position: relative;
    margin-bottom: 20px;
}



.search-con input[type="text"] {
    height: 60px;
    font-size: 1.3rem;
    border-radius: 15px;
    box-shadow: 0px 0.1rem 14px 0rem rgb(100 100 100 / 7%) !important;
    padding: 10px 50px 10px 20px;
    border: 1px solid #eaeaea;
}

.sec-box-shadow {
    box-shadow: 0px 0.3rem 13px 0rem rgb(116 116 116 / 7%) !important;
}

.tab-detail {
    width: 100%;
    justify-content: start !important;
    align-items: start;

    border-radius: var(--radius-lg);
    display: flex;
    gap: 0px;
    overflow: hidden;
    background: var(--color-surface);
}

.tab-detail .nav-link {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
    padding: 20px;
    color: var(--color-text);
    border-radius: 0px;
    font-size: 1.3rem;
}

.tab-detail .nav-link.active {
    background: transparent;

    font-weight: 500;
}

.sec-info-member-body {
    padding: 20px;
}

.sec-title {
    font-weight: 600;
}

.form-row {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-row label {
    width: 170px;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.cust-int {
    font-size: 1.05rem !important;
    height: 50px;

}

@media (max-width:767px) {
    .form-row label {
        font-size: 1.1rem;
    }

    .cust-int {
        font-size: 1.1rem;
    }
}

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
}

.parent .select {
    display: none;
}

.parent .a {
    padding-left: 0px;
    background: var(--color-bg);
    margin-bottom: 0;
}

.parent .a img,
.parent .btn-select img {
    width: 30px;
}

.parent .a li {
    list-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

.parent .a li:hover {
    background-color: #F4F3F3;
}

.parent .a li img {
    margin-left: 10px;
}

.parent .a li span,
.parent .btn-select li span {
    margin-left: 15px;
}

/* item list */
.parent .b {
    display: none;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 5px;
}

.parent .open {
    display: block !important;
}

.parent .btn-select {
    width: 100%;
    max-width: 100%;
    height: 50px;
    border-radius: 5px;
    background-color: var(--color-bg);
    border: 1px solid #ccc;
    padding: .375rem .75rem;
    font-size: 1.3rem;
}

@media (max-width:767px) {
    .parent .btn-select {
        font-size: 1.1rem !important;
    }

    .form-row {
        margin-bottom: 15px;
        display: flex;
        gap: 0px;
        align-items: start;
        flex-direction: column;
    }
}

.parent .btn-select li {
    list-style: none;
    float: left;
    padding-bottom: 0px;
}

.parent .btn-select:hover li {
    margin-left: 0px;
}

.parent .btn-select:hover {
    background-color: #F4F3F3;
    border: 1px solid transparent;
    box-shadow: inset 0 0px 0px 1px #ccc;
}

.parent .btn-select:focus {
    outline: none;
}

.parent .lang-select {
    position: relative;
    width: 100%;
}

.parent .b {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-width: 350px;
    background: var(--color-bg);
    z-index: 1000;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 5px;
}

.drop-arrow {
    position: absolute;
    right: 0px;
    z-index: 9;
    right: 15px;
    width: 12px;
    top: 20px;
    opacity: 0.8;
}

.img-set {
    position: relative;
    top: -2px;
    margin-right: 5px;
}

.leaderboard-container {
    max-width: 800px;
    margin: 0 auto;
}

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-bg);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.user-profile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    color: var(--color-text);
    margin-bottom: 30px;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--color-bg);
    margin-bottom: 15px;
}

.user-level {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 8px 20px;
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
}

.progress-info {
    margin-top: 15px;
    font-size: 1rem;
    opacity: 0.9;
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.level-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
}

.level-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.level-number {
    background: var(--color-primary);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0px 10px;
}

.level-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
    text-align: left;
}

.member-count {
    color: #666;
    font-size: 0.9rem;
}

.locked-level {
    opacity: 0.6;
    position: relative;
}

.leaderboard-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.leaderboard-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text);
}

.time-filter {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 25px;
    padding: 8px 20px;
    font-size: 1rem;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s ease;
    border-color: var(--color-primary);
}

.time-filter:hover {
    background: var(--color-surface-hover);
    color: white;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.leaderboard-item:hover {
    background: var(--color-surface);
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
}

.rank-badge {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: 15px;
}

.rank-1 {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #b8860b;
}

.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #e5e5e5);
    color: #666;
}

.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #daa520);
    color: white;
}

.rank-other {
    background: var(--color-primary);
    color: var(--color-primary-300);
}

.user-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.user-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 12px;
}

.user-name {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text);
}

.points-badge {
    background: var(--color-primary);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1rem;
}

.points-change {
    font-size: 0.9rem;
    margin-left: 10px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-weight: 500;
}

.points-up {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.points-down {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

@media (max-width: 767px) {
    #cust-tab .nav-link {
        font-size: 1.1rem !important;
    }

    .user-profile-card {
        padding: 20px;
    }

    .profile-avatar {
        width: 80px;
        height: 80px;
    }

    .level-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .leaderboard-title {
        font-size: 1.2rem;
    }

    .user-name {
        font-size: 1rem;
    }

    .points-badge {
        font-size: 0.9rem;
        padding: 6px 12px;
    }
}

.cust-tab-con {
    overflow-x: auto;
    width: 100%;
    display: inline-flex;
    justify-content: space-evenly;
}

.btn-drop {
    border-radius: var(--radius-full);
    padding: 5px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-drop:hover {
    background: rgb(237, 237, 237);
}

.text-user {
    color: var(--color-text);
}

/* Additional styles for header layout */
.header-sec .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-bell {
    font-size: 1.2rem;
    cursor: pointer;
}

.profile-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}



.top-50 {
    top: 50%;
}

.translate-middle-y {
    transform: translateY(-50%) !important;
}

.svg-icon {
    line-height: 1;
}

.svg-icon.svg-icon-2 svg {
    height: 1rem !important;
    width: 1rem !important;
}

@media (min-width: 992px) {
    .svg-icon.svg-icon-lg-1 svg {
        height: 1.25rem !important;
        width: 1.25rem !important;
    }
}

.separator.separator-dashed {
    border-bottom-style: dashed;
    border-bottom-color: #e4e6ef;
}

.separator {
    height: 0;
    border-bottom: 1px solid #eff2f5;
}

.symbol {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    border-radius: .475rem;
}

.symbol.symbol-circle,
.symbol.symbol-circle .symbol-label,
.symbol.symbol-circle>img {
    border-radius: 50%;
}

.symbol.symbol-35px>img {
    width: 35px;
    height: 35px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Post menu container and button */
.post-menu-container {
    position: relative;
}

.post-menu-btn {
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.post-menu-btn:hover {
    background: #f1f5f9;
    color: var(--color-text);
}

.post-menu-btn i {
    font-size: 16px;
}

/* Dropdown styles - Enhanced Version */
.post-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    min-width: 180px;
    padding: 8px;
    animation: dropdownFade 0.15s ease-out;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.post-menu-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
    color: var(--color-text);
}


.dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--color-muted);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item[data-action="pin"] i {
    color: #3b82f6;
}

.dropdown-item[data-action="pin"]:hover {
    background: #eff6ff;
    color: #3b82f6;
}

.dropdown-item[data-action="report"]:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

/* Pin indicator styles */
.pin-indicator {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

.pin-indicator i {
    font-size: 14px;
    color: #3b82f6 !important;
}

/* Success/Error messages */
.message {
    padding: 12px 16px;
    margin: 8px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    animation: slideIn 0.3s ease-out;
}

.success-message {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.error-message {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .post-menu-dropdown {
        right: -10px;
        min-width: 140px;
    }

    .dropdown-item {
        padding: 10px 12px;
        font-size: 13px;
    }

    .header-actions {
        gap: 8px;
    }

    .post-menu-btn {
        width: 28px;
        height: 28px;
        padding: 6px;
    }
}

.dropdown-item {
    color: var(--color-text-dark);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--nav-pills-link-active-bg) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-surface) !important;

}

.view-count {
    color: var(--nav-pills-link-active-bg) !important;
    text-decoration: none;
}

.btn-unlock {
    padding: 10px 30px;
    background: #f2f7fa;
    border-radius: 50px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
}

.btn-unlock:hover {
    background: #d1d6d8;
}

.cust-img {
    border-radius: 8px;
}

.cust-tab-con {
    overflow-x: auto;
    width: 100%;
    display: inline-flex;
    justify-content: space-evenly;
}

.fr-wrapper .fr-placeholder {
    color: var(--color-text) !important;

}

.nav-pills .nav-link {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    /* padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x) !important; */
}

.category-item {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    position: relative;
}

.category-item:hover {
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);
}

.category-title {
    font-size: 1rem;
    font-weight: 500;
    color: #2c3e50;
    margin: 0;
}

.category-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.category-item:hover .category-actions {
    opacity: 1;
}

.btn-edit,
.btn-delete {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.btn-edit {
    background: #3498db;
    color: white;
}

.btn-edit:hover {
    background: #2980b9;
    transform: scale(1.05);
}

.btn-delete {
    background: #e74c3c;
    color: white;
}

.btn-delete:hover {
    background: #c0392b;
    transform: scale(1.05);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    color: #6c757d;
}

.empty-state h5 {
    margin-bottom: 16px;
    color: #495057;
}

/* Start Event Page calendar */

/* Search input - full width in row 1 */
.events-search {
    position: relative;
    width: 100%;
}

.events-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    font-size: 1rem;
    pointer-events: none;
    z-index: 10;
}

.events-search input {
    padding-left: 2.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    height: 42px;
}

.events-search input:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
}

/* Date navigation - row 2 left */
.events-date-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: nowrap;
}

.events-date-nav .btn {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: var(--radius-lg);
    transition: var(--transition-all);
    font-size: var(--font-size-lg);
    padding: 0;
}

.events-date-nav .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Jump date picker styling */
#jumpDatePicker {
    height: 44px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    cursor: pointer;
    background: var(--color-surface);
    flex-shrink: 0;
    max-width: 180px;
    width: 180px;
    font-size: var(--font-size-sm);
    transition: var(--transition-all);
    padding: 0 var(--space-3);
}

#jumpDatePicker:hover {
    border-color: var(--color-border-hover, var(--color-gray-400));
}

#jumpDatePicker:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
    background: #fff;
}

/* View select */
.events-view-select {
    height: 44px;
    border-radius: var(--radius-lg);
    border-color: var(--color-border);
    padding: 0 var(--space-4);
    width: auto;
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-all);
    background: var(--color-surface);
    cursor: pointer;
}

.events-view-select:hover {
    border-color: var(--color-border-hover, var(--color-gray-400));
    box-shadow: var(--shadow-sm);
}

.events-view-select:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
}

/* Create Event button */
.btn-primary[data-bs-target="#addEventToCalendarModal"],
.btn-secondary[disabled][title*="permission"] {
    height: 44px;
    padding: 0 var(--space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-all);
}

.btn-primary[data-bs-target="#addEventToCalendarModal"]:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Filter button */
#calendarFilterDropdown {
    height: 44px;
    padding: 0 var(--space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-all);
}

#calendarFilterDropdown:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Calendar minimal styling */
.fullcalendar-minimal {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-all);
}

.fullcalendar-minimal:hover {
    box-shadow: var(--shadow-sm);
}

/* Show calendar title inside calendar */
.fc .fc-toolbar {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.fc .fc-toolbar-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.025em;
}

/* Update title when calendar view changes */
[data-fc-title] {
    display: none !important;
}

/* Calendar table cells */
.fc .fc-daygrid-day {
    border-color: var(--color-border-light);
    transition: var(--transition-colors);
}

.fc .fc-daygrid-day:hover {
    background: var(--color-surface-hover, var(--color-gray-50));
}

.fc .fc-col-header-cell {
    background: var(--color-background, transparent);
    border-color: var(--color-border);
    padding: var(--space-3) var(--space-2);
}

.fc .fc-col-header-cell-cushion {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Day numbers - clean and simple */
.fc .fc-daygrid-day-number {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    padding: var(--space-2);
    transition: var(--transition-colors);
}

/* Today highlight - subtle */
.fc .fc-day-today {
    background: var(--color-primary-50, #eff6ff) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    background: var(--color-primary-500);
    color: white;
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-sm);
}

/* Events - clean pills */
.fc .fc-event {
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
    margin: var(--space-1) 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-all);
    cursor: pointer;
}

.fc .fc-event:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Other month days */
.fc .fc-daygrid-day.fc-day-other {
    background: transparent;
    opacity: 0.5;
}

.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-normal);
}

/* Borders */
.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--color-border-light);
}

/* More link */
.fc .fc-daygrid-more-link {
    color: var(--color-primary-500);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: var(--transition-colors);
}

.fc .fc-daygrid-more-link:hover {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
}

/* Responsive */
@media (max-width: 767px) {
    .events-search input {
        height: 42px;
        font-size: var(--font-size-sm);
    }

    .events-date-nav {
        gap: var(--space-1);
    }

    .events-date-nav .btn {
        min-width: 40px;
        height: 40px;
        padding: 0;
        font-size: var(--font-size-base);
    }

    #jumpDatePicker {
        width: auto;
        max-width: 140px;
        height: 40px;
        font-size: var(--font-size-xs);
        padding: 0 var(--space-2);
    }

    .events-view-select,
    .btn-primary[data-bs-target="#addEventToCalendarModal"],
    #calendarFilterDropdown {
        height: 40px;
        font-size: var(--font-size-xs);
        padding: 0 var(--space-3);
    }

    .fullcalendar-minimal {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }

    .fc .fc-toolbar {
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
    }

    .fc .fc-toolbar-title {
        font-size: var(--font-size-xl);
    }

    .fc .fc-daygrid-day-number {
        font-size: var(--font-size-xs);
        padding: var(--space-1);
    }

    .fc .fc-day-today .fc-daygrid-day-number {
        width: 28px;
        height: 28px;
    }
}

/* End Event Page calendar */

/* ============================================================================
   Event Details Page
   ========================================================================== */

/* Event Header Card */
.event-header-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-all);
}

.event-header-card:hover {
    box-shadow: var(--shadow-md);
}

.event-cover-image {
    height: 300px;
    overflow: hidden;
    background: var(--color-gray-100);
}

.event-cover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.event-header-card .card-body {
    padding: var(--space-6);
}

.event-header-card .card-title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
}

.event-header-card .text-primary {
    color: var(--color-primary-500) !important;
}

/* Registration Panel */
.registration-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: var(--space-4);
}

.registration-panel .card-body {
    padding: var(--space-6);
}

.price-display {
    color: var(--color-primary-600);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

.price-free {
    color: var(--color-success-600);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

/* Attendee Progress */
.attendee-progress {
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.attendee-progress .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

/* Event Creator Card */
.event-creator-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.event-creator-card .card-body {
    padding: var(--space-4);
}

.creator-avatar {
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border);
    object-fit: cover;
}

/* Attendees Card */
.attendees-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-all);
}

.attendees-card:hover {
    box-shadow: var(--shadow-md);
}

.attendees-card .card-body {
    padding: var(--space-6);
}

/* Responsive */
@media (max-width: 991px) {
    .registration-panel {
        position: static;
        margin-top: var(--space-4);
    }

    .event-cover-image {
        height: 200px;
    }
}

@media (max-width: 767px) {

    .event-header-card .card-body,
    .registration-panel .card-body,
    .attendees-card .card-body {
        padding: var(--space-4);
    }

    .price-display,
    .price-free {
        font-size: var(--font-size-2xl);
    }

    .event-cover-image {
        height: 180px;
    }
}

/* End Event Details Page */

/* Start Community Detail */
.card-body label {
    color: var(--color-text-primary);
}

.ts-control {
    color: var(--color-text-primary);
}

/* End Community Detail */

.table th label,
th,
td {
    color: var(--color-text-primary) !important;
}

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

/* Mobile responsive */
@media (max-width: 768px) {
    .category-item {
        padding: 12px 16px;
    }

    .category-actions {
        opacity: 1;
    }

    .btn-edit,
    .btn-delete {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* Form validation states */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-danger-500);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
    background-image: none !important;
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--color-success-500);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1);
    background-image: none !important;
}


/* Add these styles to your datatable theme CSS */

.status-filter {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    transition: var(--transition-all);
}

.status-filter:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px var(--color-primary-100);
    outline: none;
}

.status-filter option {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    padding: var(--space-2);
}

/* Status Badge Colors */
.status-badge.bg-warning {
    background-color: var(--color-warning-500) !important;
    color: var(--color-warning-50);
}

.status-badge.bg-success {
    background-color: var(--color-success-500) !important;
    color: var(--color-success-50);
}

.status-badge.bg-secondary {
    background-color: var(--color-gray-500) !important;
    color: var(--color-gray-50);
}

.status-badge.bg-info {
    background-color: var(--color-info-500) !important;
    color: var(--color-info-50);
}


.editable-level-label {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
}

.editable-level-label:hover {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.level-label-input {
    font-weight: 600;
    font-size: 0.9rem;
}

.level-label-container {
    position: relative;
}

.editable-level-label .fas.fa-edit {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.editable-level-label:hover .fas.fa-edit {
    opacity: 1;
}

/* ==========================================================
   Pusher Real-time Messaging Settings
   ========================================================== */

#pusherForm {
    max-width: 700px;
}

#pusherForm .form-label {
    font-weight: 600;
    color: var(--color-text-primary);
}

#pusherForm .form-control,
#pusherForm .form-select {
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    transition: var(--transition-all);
}

#pusherForm .form-control:focus,
#pusherForm .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.15rem var(--color-primary-light);
}

#pusherForm .form-text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

#pusherForm .form-check-input {
    width: 2.5em;
    height: 1.3em;
    cursor: pointer;
}

#pusherForm .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

#pusherForm .form-check-label {
    color: var(--color-text-primary);
}

#pusherForm .card.bg-light {
    background-color: var(--color-surface-hover) !important;
    border-radius: var(--radius-lg);
}

#pusherForm #connectionStatus.badge {
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-2);
}

#pusherForm #testConnectionBtn {
    transition: var(--transition-all);
}

#pusherForm #testConnectionBtn:hover {
    background-color: var(--color-primary);
    color: #fff;
}

#pusherForm .btn-chat:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

#pusherForm .btn-outline-secondary {
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

#pusherForm .btn-outline-secondary:hover {
    background-color: var(--color-surface-hover);
}

/* Responsive */
@media (max-width: 768px) {
    #pusherForm {
        max-width: 100%;
    }

    #pusherForm .d-flex.flex-wrap {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================================
   MEMBER MANAGEMENT STYLES
   ========================================================================== */

/* Member Card Design */
.member-card {
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    position: relative;
    overflow: hidden;
}

.member-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Member Header */
.member-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.member-avatar {
    position: relative;
    flex-shrink: 0;
}

.avatar-img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    border: 3px solid var(--color-border-light);
    object-fit: cover;
    transition: var(--transition-all);
}

.member-card:hover .avatar-img {
    border-color: var(--color-primary-300);
}

.status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: 2px solid var(--color-surface);
}

.status-indicator.active {
    background-color: var(--color-success-500);
    color: white;
}

.status-indicator.banned {
    background-color: var(--color-danger-500);
    color: white;
}

/* Member Info */
.member-info {
    flex: 1;
    min-width: 0;
}

.member-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
}

.member-name {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.member-name a {
    color: inherit;
    transition: var(--transition-colors);
}

.member-name a:hover {
    color: var(--color-primary);
}

.status-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.status-badge.active {
    background-color: var(--color-success-100);
    color: var(--color-success-700);
}

.status-badge.banned {
    background-color: var(--color-danger-100);
    color: var(--color-danger-700);
}

.member-email {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    word-break: break-word;
}

.member-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-item i {
    font-size: var(--font-size-xs);
    opacity: 0.7;
}

/* Member Actions Wrapper */
.member-actions-wrapper {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

/* Member Actions */
.member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-start;
    align-items: center;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: var(--space-2);
    border: 1px solid;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: transparent;
    white-space: nowrap;
    min-height: 36px;
    min-width: 36px;
    overflow: hidden;
    position: relative;
    color: var(--color-text-primary);
}

.action-btn:hover {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--color-background);
    background-color: var(--color-primary);
}

.action-btn i {
    font-size: var(--font-size-base);
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn span {
    font-size: var(--font-size-sm);
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.action-btn:hover span {
    max-width: 100px;
    opacity: 1;
    margin-left: var(--space-1);
}
.member-banned .avatar-img {
    filter: grayscale(50%);
    opacity: 0.7;
}

/* Status filter */
.status-filter {
    min-width: 140px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    transition: var(--transition-all);
}

.status-filter:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 2px var(--color-primary-100);
    outline: none;
}

.status-filter option {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    padding: var(--space-2);
}

/* Modal enhancements */
.modal-content {
    border-radius: var(--radius-lg);
}

.modal-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-4) var(--space-5);
}

.modal-title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.modal-body {
    padding: var(--space-5);
}

/* Form controls in modals */
.modal .form-control,
.modal .form-select {
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
}

.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--color-border-focus);
}

.modal .form-floating>label {
    color: var(--color-text-secondary);
}

.modal .form-floating>.form-control:focus~label,
.modal .form-floating>.form-control:not(:placeholder-shown)~label {
    color: var(--color-primary);
}

/* Alert styles in modals */
.modal .alert {
    border-radius: var(--radius-md);
    border: 1px solid;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.modal .alert-warning {
    background-color: var(--color-warning-50);
    border-color: var(--color-warning-200);
    color: var(--color-warning-800);
}

.modal .alert-info {
    background-color: var(--color-info-50);
    border-color: var(--color-info-200);
    color: var(--color-info-800);
}

/* Ban reason container */
#customReasonContainer {
    animation: slideDown 0.3s ease-out;
}

#currentBanInfo {
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

#currentBanInfo h6 {
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
}

#currentBanInfo p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
}

/* Search form enhancements */
.search-con {
    position: relative;
    flex-grow: 1;
}

.search-con .form-control {
    padding-right: var(--space-12);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.search-con .search-icon {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .member-card {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .member-header {
        gap: var(--space-3);
    }

    .avatar-img {
        width: 56px;
        height: 56px;
    }

    .status-indicator {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }

    .member-name {
        font-size: var(--font-size-base);
    }

    .member-actions {
        gap: var(--space-1);
        justify-content: flex-end;
        align-items: center;
    }

    .action-btn {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
        justify-content: center;
        min-height: 32px;
    }

    .action-btn span {
        display: none;
    }

    .action-btn i {
        font-size: var(--font-size-sm);
    }

    .status-filter {
        min-width: 100px;
        font-size: var(--font-size-sm);
    }

    .modal-body {
        padding: var(--space-4);
    }

    .modal-header,
    .modal-footer {
        padding: var(--space-3) var(--space-4);
    }
}

@media (max-width: 576px) {
    .member-card {
        padding: var(--space-3);
    }

    .member-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-2);
    }

    .member-info {
        width: 100%;
    }

    .member-name-row {
        justify-content: center;
        flex-direction: column;
        gap: var(--space-1);
    }

    .member-meta {
        justify-content: center;
        gap: var(--space-2);
    }

    .member-actions {
        justify-content: flex-end;
        gap: var(--space-1);
        flex-wrap: wrap;
    }

    .action-btn {
        min-width: 44px;
        justify-content: center;
    }

    .search-con .form-control {
        font-size: var(--font-size-sm);
    }

    .status-badge {
        font-size: 10px;
        padding: 2px var(--space-1);
    }
}

/* Animation keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        max-height: 200px;
        transform: translateY(0);
    }
}

/* Loading states */
.btn.loading {
    position: relative;
    color: transparent !important;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    color: inherit;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Tooltip enhancements for banned members */
[data-bs-toggle="tooltip"] {
    cursor: help;
}

/* Success/Error toast positioning */
.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 9999;
}

/* ============================================================================
   MEMBER MANAGEMENT ENHANCEMENTS
   ========================================================================== */

/* Enhanced hover effects */
.member-card.hover-effect {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary-300);
}

/* Smooth transitions for status changes */
.member-card.status-changing {
    transition: all 0.5s ease;
    opacity: 0.8;
}

.member-card.status-changing .member-actions {
    pointer-events: none;
}

/* Search input enhancements */
.search-con input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

/* Status filter enhancements */
.status-filter:hover {
    border-color: var(--color-primary-300);
}

/* Loading overlay for member cards */
.member-card.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--radius-xl);
}

.member-card.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-primary-200);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 11;
}

/* Fade in animation for modals */
.modal.fade-in .modal-dialog {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Screen reader only content */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .member-card {
        border-width: 2px;
    }

    .status-badge {
        border: 1px solid currentColor;
    }

    .action-btn {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .member-card,
    .action-btn,
    .modal.fade-in .modal-dialog {
        transition: none;
        animation: none;
    }

    .member-card:hover {
        transform: none;
    }
}

/* Print styles */
@media print {

    .member-actions,
    .status-filter,
    .search-con button {
        display: none;
    }

    .member-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .member-card.loading::before {
        background: rgba(0, 0, 0, 0.8);
    }
}

/* Toast notification positioning */
.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 9999;
    max-width: 350px;
}

.toast {
    margin-bottom: var(--space-2);
}

/* Enhanced button states */
.action-btn:active {
    transform: translateY(1px);
}

.action-btn.loading {
    position: relative;
    color: transparent !important;
}

.action-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    color: inherit;
}

/* Member card grid improvements */
@media (min-width: 1200px) {
    .member-cards-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: var(--space-4);
    }


}

/* Smooth page transitions */
.page-transition {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-transition.loaded {
    opacity: 1;
}

/* Enhanced form validation styles */
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--color-danger-500);
    box-shadow: 0 0 0 2px var(--color-danger-100);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--color-success-500);
    box-shadow: 0 0 0 2px var(--color-success-100);
}

/* ============================================================================
   ENHANCED SEARCH AND FILTER STYLES
   ========================================================================== */

/* Search Filter Container */
.search-filter-container {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.search-filter-form {
    margin: 0;
}

/* Search Input Group */
.search-input-group {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.search-input {
    height: 48px;
    padding: var(--space-3) var(--space-12) var(--space-3) var(--space-12) !important;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    transition: var(--transition-all);
    box-shadow: var(--shadow-xs);
}

.search-input:focus {
    border-color: var(--color-primary);
}

.search-input-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-lg);
    pointer-events: none;
    z-index: 2;
}

.search-clear-btn {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-full);
    transition: var(--transition-all);
    z-index: 2;
}

.search-clear-btn:hover {
    color: var(--color-danger-500);
    background: var(--color-danger-50);
}

.search-loading {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Filter Dropdown */
.filter-dropdown-wrapper {
    position: relative;
    min-width: 160px;
}

.filter-select {
    height: 48px;
    padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition-all);
    appearance: none;
    box-shadow: var(--shadow-xs);
}

.filter-select:focus {
    border-color: var(--color-primary);
}

/* Search Actions */
.search-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.search-reset-btn {
    height: 48px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.search-submit-btn {
    height: 48px;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* Active Filters */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-primary-200);
}

.filter-tag-remove {
    background: none;
    border: none;
    color: var(--color-primary-600);
    cursor: pointer;
    padding: 0;
    margin-left: var(--space-1);
    border-radius: var(--radius-full);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-all);
}

.filter-tag-remove:hover {
    background: var(--color-primary-100);
    color: var(--color-primary-800);
}

/* Responsive Design */
@media (max-width: 768px) {
    .search-input-group {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-wrapper {
        min-width: auto;
    }

    .filter-dropdown-wrapper {
        min-width: auto;
    }

    .search-actions {
        justify-content: stretch;
    }

    .search-reset-btn,
    .search-submit-btn {
        flex: 1;
    }
}

/* ============================================================================
   ENHANCED NO MEMBERS PAGE STYLES
   ========================================================================== */

.no-members-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: var(--space-8) var(--space-4);
}

.no-members-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-10) var(--space-8);
    text-align: center;
    max-width: 600px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.no-members-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
}

/* Illustrations */
.no-members-illustration {
    margin-bottom: var(--space-8);
    position: relative;
}

.no-results-icon,
.empty-community-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.no-results-icon i,
.empty-community-icon i {
    font-size: 48px;
    color: var(--color-primary);
    z-index: 2;
}

/* Search Animation */
.search-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 3px solid var(--color-primary-200);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-full);
    animation: searchSpin 2s linear infinite;
}

@keyframes searchSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Community Dots Animation */
.community-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.community-dots span {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    animation: communityPulse 1.5s ease-in-out infinite;
}

.community-dots span:nth-child(2) {
    animation-delay: 0.3s;
}

.community-dots span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes communityPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Content */
.no-members-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.no-members-message {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
}

/* Search Suggestions */
.search-suggestions {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
    text-align: left;
}

.suggestions-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}

.suggestions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggestions-list li {
    padding: var(--space-1) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    position: relative;
    padding-left: var(--space-4);
}

.suggestions-list li::before {
    content: '•';
    color: var(--color-primary);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Getting Started Tips */
.getting-started-tips {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-4);
    text-align: left;
}

.getting-started-tips h5 {
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    text-align: center;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.tip-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: var(--transition-all);
}

.tip-item:hover {
    border-color: var(--color-primary-200);
    box-shadow: var(--shadow-sm);
}

.tip-item i {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.tip-item span {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* Actions */
.no-members-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-6);
}

.no-members-actions .btn {
    min-width: 140px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .no-members-card {
        padding: var(--space-6) var(--space-4);
        margin: var(--space-4);
    }

    .no-results-icon,
    .empty-community-icon {
        width: 80px;
        height: 80px;
    }

    .no-results-icon i,
    .empty-community-icon i {
        font-size: 32px;
    }

    .no-members-title {
        font-size: var(--font-size-xl);
    }

    .tips-grid {
        grid-template-columns: 1fr;
    }

    .no-members-actions {
        flex-direction: column;
    }

    .no-members-actions .btn {
        width: 100%;
    }
}

/* =====
=======================================================================
   SEARCH SUGGESTIONS DROPDOWN
   ========================================================================== */

.search-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    margin-top: var(--space-1);
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.suggestions-list {
    padding: var(--space-2);
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
    color: var(--color-text-primary);
}

.suggestion-item:hover,
.suggestion-item.active {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
}

.suggestion-item i {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    width: 16px;
    text-align: center;
}

.suggestion-item:hover i,
.suggestion-item.active i {
    color: var(--color-primary);
}

.suggestion-item span {
    font-size: var(--font-size-sm);
    flex: 1;
}

/* ============================================================================
   ANIMATION CLASSES
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

.hover-enhanced {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-xl) !important;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   LOADING STATES
   ========================================================================== */

.search-loading .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.125em;
}

/* Enhanced button loading states */
.btn.loading {
    position: relative;
    color: transparent !important;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border: 0.125em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ============================================================================
   ENHANCED FOCUS STYLES
   ========================================================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {

    .search-input,
    .filter-select {
        border-width: 2px;
    }

    .filter-tag {
        border-width: 2px;
    }

    .no-members-card {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .search-animation,
    .community-dots span,
    .fade-in-up,
    .hover-enhanced {
        animation: none !important;
        transition: none !important;
    }

    .member-card:hover,
    .hover-enhanced {
        transform: none !important;
    }
}

/* 
============================================================================
   ENHANCED ROLE MODAL STYLES
   ========================================================================== */

/* Modal Container */
.role-modal-content {
    border: none;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
}

/* Modal Header */
.role-modal-header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-600));
    color: white;
    padding: var(--space-6);
    border-bottom: none;
}

.role-modal-title-section {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.role-modal-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.role-modal-header .modal-title {
    color: white;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-sm);
    margin: 0;
    margin-top: var(--space-1);
}

.role-modal-header .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.role-modal-header .btn-close:hover {
    opacity: 1;
}

/* Modal Body */
.role-modal-body {
    padding: var(--space-8);
    background: var(--color-background);
}

/* Member Info Section */
.member-info-section {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-8);
}

.member-avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    color: var(--color-primary);
    font-size: 40px;
}

.current-role-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Section Titles */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-lg);
}

.section-description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
    margin-top: calc(var(--space-4) * -1);
}

/* Role Selection */
.role-selection-section {
    margin-bottom: var(--space-8);
}

.role-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.role-option {
    position: relative;
}

.role-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-card {
    display: block;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    cursor: pointer;
    transition: var(--transition-all);
    height: 100%;
}

.role-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.role-radio:checked+.role-card {
    border-color: var(--color-primary);
    background: var(--color-primary-50);
    box-shadow: var(--shadow-lg);
}

.role-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.role-card-header i {
    font-size: 24px;
    color: var(--color-primary);
}

.role-card-header h6 {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.role-description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
}

.role-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.feature-tag {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.role-radio:checked+.role-card .feature-tag {
    background: var(--color-primary-200);
    color: var(--color-primary-800);
}

/* Permissions Section */
.permissions-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-top: var(--space-6);
}

.permissions-header {
    margin-bottom: var(--space-6);
}

.permissions-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.bulk-actions {
    display: flex;
    gap: var(--space-2);
}

/* Enhanced Permissions Table */
.permissions-table-container {
    background: var(--color-background);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.permissions-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.permissions-table thead {
    background: var(--color-gray-50);
}

.permissions-table th {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.module-header {
    text-align: left;
    min-width: 200px;
}

.header-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    float: right;
    font-size: var(--font-size-sm);
}

.permission-header {
    text-align: center;
    width: 120px;
}

.permission-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.permission-column i {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.permission-column span {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.permissions-table tbody tr {
    transition: var(--transition-colors);
}

.permissions-table tbody tr:hover {
    background: var(--color-primary-25);
}

.permissions-table tbody td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
    text-align: center;
}

.permissions-table tbody td:first-child {
    text-align: left;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* Custom Checkboxes */
.permissions-table .form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.permissions-table .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.permissions-table .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.2);
}

/* Permissions Summary */
.permissions-summary {
    margin-top: var(--space-6);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.summary-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary-700);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.summary-content {
    color: var(--color-primary-600);
    font-size: var(--font-size-sm);
}

/* Modal Footer */
.role-modal-footer {
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-border);
    padding: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.footer-info i {
    color: var(--color-warning-500);
}

.footer-actions {
    display: flex;
    gap: var(--space-3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .role-modal-header {
        padding: var(--space-4);
    }

    .role-modal-title-section {
        gap: var(--space-3);
    }

    .role-modal-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .role-modal-header .modal-title {
        font-size: var(--font-size-xl);
    }

    .role-modal-body {
        padding: var(--space-4);
    }

    .member-info-section {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .member-avatar-placeholder {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }

    .role-options {
        grid-template-columns: 1fr;
    }

    .permissions-table-container {
        overflow-x: auto;
    }

    .permissions-table {
        min-width: 600px;
    }

    .role-modal-footer {
        flex-direction: column;
        gap: var(--space-4);
        align-items: stretch;
    }

    .footer-actions {
        justify-content: stretch;
    }

    .footer-actions .btn {
        flex: 1;
    }
}

/* Animation for permissions section */
.permissions-section {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state for save button */
#saveRoleBtn.loading {
    position: relative;
    color: transparent !important;
}

#saveRoleBtn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

/* =======
=====================================================================
   ENHANCED PERMISSIONS TABLE STYLING
   ========================================================================== */

.permission-row {
    transition: all 0.2s ease;
}

.permission-row:hover {
    background: var(--color-primary-25) !important;
}

.module-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) !important;
}

.module-info {
    display: flex;
    align-items: center;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.module-info i {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

.module-name {
    font-size: var(--font-size-sm);
}

.row-checkbox {
    display: flex;
    align-items: center;
}

.permission-cell {
    text-align: center !important;
    vertical-align: middle !important;
}

.permission-cell.disabled {
    color: var(--color-text-tertiary);
    background: var(--color-gray-25);
}

.permission-checkbox-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Enhanced checkbox styling */
.permissions-table .form-check-input {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: var(--transition-all);
    cursor: pointer;
}

.permissions-table .form-check-input:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.1);
}

.permissions-table .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.permissions-table .form-check-input:indeterminate {
    background-color: var(--color-warning-500);
    border-color: var(--color-warning-500);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.permissions-table .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.2);
    outline: none;
}

/* Module summary styling */
.module-summary {
    display: inline-block;
    margin-right: var(--space-4);
    margin-bottom: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary-100);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

/* Loading states */
.permission-row.loading {
    opacity: 0.6;
    pointer-events: none;
}

.permission-row.loading .form-check-input {
    opacity: 0.5;
}

/* Success/error states for rows */
.permission-row.success {
    background: var(--color-success-50) !important;
    border-left: 3px solid var(--color-success-500);
}

.permission-row.error {
    background: var(--color-danger-50) !important;
    border-left: 3px solid var(--color-danger-500);
}

/* Animations */
@keyframes permissionUpdate {
    0% {
        background: var(--color-primary-100);
    }

    100% {
        background: transparent;
    }
}

.permission-row.updated {
    animation: permissionUpdate 1s ease-out;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {

    .permission-row,
    .permissions-table .form-check-input {
        transition: none !important;
    }

    .permission-row.updated {
        animation: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .permissions-table .form-check-input {
        border-width: 3px;
    }

    .permission-row:hover {
        background: var(--color-primary-200) !important;
    }
}

/* Focus management for keyboard navigation */
.permissions-table .form-check-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Tooltip styles for permission descriptions */
.permission-tooltip {
    position: relative;
    cursor: help;
}

.permission-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-gray-900);
    color: white;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.permission-tooltip:hover::after {
    opacity: 1;
}

/*
 ============================================================================
   PROFILE IMAGE PREVIEW COMPONENT
   ========================================================================== */

.profile-image-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.profile-image-container {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
}

/* Image Preview */
.profile-image-preview {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
}

.image-preview-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-all);
    border: 3px solid var(--color-border);
}

.image-preview-wrapper:hover {
    border-color: var(--color-primary);
    transform: scale(1.02);
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-all);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-all);
}

.image-preview-wrapper:hover .image-overlay {
    opacity: 1;
}

.overlay-content {
    text-align: center;
    color: white;
}

.overlay-content i {
    font-size: 24px;
    margin-bottom: var(--space-1);
    display: block;
}

.overlay-content span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Image Info */
.image-info {
    flex: 1;
}

.image-title {
    margin: 0 0 var(--space-1) 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.image-details {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* Action Buttons */
.image-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.image-actions .btn {
    min-width: 120px;
    font-size: var(--font-size-sm);
}

/* Upload Guidelines */
.upload-guidelines {
    padding: var(--space-3);
    background: var(--color-background);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}

/* Drag & Drop Zone */
.drag-drop-zone {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--color-primary), 0.1);
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.drag-drop-content {
    text-align: center;
    color: var(--color-primary);
}

.drag-drop-content i {
    font-size: 48px;
    margin-bottom: var(--space-2);
    display: block;
}

.drag-drop-content h6 {
    margin: 0 0 var(--space-1) 0;
    font-weight: var(--font-weight-semibold);
}

.drag-drop-content p {
    margin: 0;
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

/* Image States */
.image-preview-wrapper.has-image .preview-image {
    opacity: 1;
}

.image-preview-wrapper.no-image .preview-image {
    opacity: 0.3;
}

.image-preview-wrapper.loading {
    pointer-events: none;
}

.image-preview-wrapper.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid var(--color-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
    z-index: 5;
}

/* Error States */
.image-preview-wrapper.error {
    border-color: var(--color-danger);
}

.image-preview-wrapper.error .image-overlay {
    background: rgba(var(--color-danger), 0.8);
}

.upload-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-danger-50);
    border: 1px solid var(--color-danger-200);
    border-radius: var(--radius-md);
}

.upload-error i {
    margin-right: var(--space-1);
}

/* Success States */
.image-preview-wrapper.success {
    border-color: var(--color-success);
}

.upload-success {
    color: var(--color-success);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-success-50);
    border: 1px solid var(--color-success-200);
    border-radius: var(--radius-md);
}

.upload-success i {
    margin-right: var(--space-1);
}

/* Image Size Indicator */
.image-size-indicator {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Responsive Design */
@media (max-width: 768px) {
    .profile-image-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
    }

    .profile-image-preview {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .image-preview-wrapper {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

    .image-actions {
        flex-direction: row;
        justify-content: center;
    }

    .image-actions .btn {
        min-width: auto;
        flex: 1;
    }
}

/* Animation for image changes */
@keyframes imageChange {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.preview-image.changing {
    animation: imageChange 0.3s ease-out;
}

/* Accessibility improvements */
.image-preview-wrapper:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.image-preview-wrapper[aria-describedby] {
    cursor: pointer;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .image-preview-wrapper {
        border-width: 4px;
    }

    .image-overlay {
        background: rgba(0, 0, 0, 0.9);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .image-preview-wrapper,
    .preview-image,
    .image-overlay {
        transition: none !important;
    }

    .image-preview-wrapper:hover {
        transform: none !important;
    }

    .preview-image.changing {
        animation: none !important;
    }
}

/* ============================================================================
   USER COUNT AVATARS STYLING
   ========================================================================== */

.user-count-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-all);
}

.user-count-avatar:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-200);
}

.user-count {
    position: relative;
}

.user-count .user-count-avatar:not(:first-child) {
    margin-left: -10px;
}

/* Ensure avatars stack properly */
.user-count .user-count-avatar:nth-child(1) {
    z-index: 5;
}

.user-count .user-count-avatar:nth-child(2) {
    z-index: 4;
}

.user-count .user-count-avatar:nth-child(3) {
    z-index: 3;
}

.user-count .user-count-avatar:nth-child(4) {
    z-index: 2;
}

.user-count .user-count-avatar:nth-child(5) {
    z-index: 1;
}

/* Avatar loading state */
.avatar-img.loading {
    opacity: 0.6;
    filter: blur(1px);
}

/* Avatar error state */
.avatar-img.error {
    border-color: var(--color-danger-200);
    opacity: 0.8;
}

/* Enhanced member avatar styling */
.member-avatar .avatar-img {
    transition: var(--transition-all);
}

.member-card:hover .member-avatar .avatar-img {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* ======
======================================================================
   NAVIGATION AND CHAT AVATAR ENHANCEMENTS
   ========================================================================== */

/* Navigation Profile Avatar */
.nav-profile-avatar {
    transition: var(--transition-all);
    border: 2px solid var(--color-border) !important;
}

.nav-profile-avatar:hover {
    transform: scale(1.05);
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.1);
}

/* Chat Profile Avatar */
.chat-profile-avatar {
    transition: var(--transition-all);
    border: 2px solid var(--color-border);
}

.chat-profile-avatar:hover {
    transform: scale(1.05);
    border-color: var(--color-primary);
}

/* Chat List Avatars */
.chat-item .avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--color-surface);
    transition: var(--transition-all);
}

.chat-item:hover .avatar {
    border-color: var(--color-primary-200);
    transform: scale(1.05);
}

/* Chat Message Avatars */
.message-item .avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 1px solid var(--color-border);
    transition: var(--transition-all);
}

.message-item .avatar:hover {
    transform: scale(1.1);
    border-color: var(--color-primary);
}

/* Avatar Loading States */
.avatar.loading {
    opacity: 0.6;
    filter: blur(1px);
}

.avatar.error {
    border-color: var(--color-danger-200);
    opacity: 0.8;
}

/* Avatar Placeholder Animation */
@keyframes avatarPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.avatar-placeholder {
    background: var(--color-gray-200);
    animation: avatarPulse 1.5s ease-in-out infinite;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-background);
    color: var(--color-primary-700);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-primary-200);
}

.filter-tag-remove {
    background: var(--color-text-tertiary);
    border: none;
    color: var(--color-primary-50);
    cursor: pointer;
    padding: 0;
    margin-left: var(--space-1);
    border-radius: var(--radius-full);
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-all);
}

.filter-tag-remove:hover {
    background: var(--color-danger-50);
    color: var(--color-danger-500);
}

/* Responsive Avatar Sizes */
@media (max-width: 768px) {
    .nav-profile-avatar {
        width: 35px !important;
        height: 35px !important;
    }

    .chat-profile-avatar {
        width: 35px !important;
        height: 35px !important;
    }

    .chat-item .avatar {
        width: 45px;
        height: 45px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .nav-profile-avatar,
    .chat-profile-avatar,
    .chat-item .avatar,
    .message-item .avatar {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .nav-profile-avatar,
    .chat-profile-avatar,
    .chat-item .avatar,
    .message-item .avatar {
        transition: none !important;
    }

    .nav-profile-avatar:hover,
    .chat-profile-avatar:hover,
    .chat-item:hover .avatar,
    .message-item .avatar:hover {
        transform: none !important;
    }
}

/* ====
========================================================================
   BANNED PAGE STYLES
   ========================================================================== */

.banned-page-container {
    background: linear-gradient(135deg, var(--color-danger-50) 0%, var(--color-danger-100) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.banned-container {
    max-width: 600px;
    width: 100%;
}

.banned-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-8);
    text-align: center;
    border: 1px solid var(--color-danger-200);
}

.banned-icon {
    width: 80px;
    height: 80px;
    background: var(--color-danger-500);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    color: white;
    font-size: 2rem;
    animation: banIconPulse 2s ease-in-out infinite;
}

@keyframes banIconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.banned-title {
    color: var(--color-danger-600);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-2xl);
}

.banned-message {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-base);
}

.ban-details {
    background: var(--color-danger-50);
    border: 1px solid var(--color-danger-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-4) 0;
    text-align: left;
}

.ban-details h6 {
    color: var(--color-danger-700);
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ban-details p {
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.ban-details p:last-child {
    margin-bottom: 0;
}

.ban-details strong {
    color: var(--color-danger-600);
    font-weight: var(--font-weight-semibold);
}

.contact-info {
    background: var(--color-info-50);
    border: 1px solid var(--color-info-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
    text-align: left;
}

.contact-info h6 {
    color: var(--color-info-700);
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.contact-info p {
    color: var(--color-text-secondary);
    margin-bottom: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* Responsive Design */
@media (max-width: 768px) {
    .banned-page-container {
        padding: var(--space-3);
    }

    .banned-card {
        padding: var(--space-6);
    }

    .banned-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .banned-title {
        font-size: var(--font-size-xl);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .banned-card {
        border-width: 2px;
    }

    .ban-details,
    .contact-info {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .banned-icon {
        animation: none !important;
    }
}


/* ========== SWEETALERT THEME (Universal) ========== */

.swal2-popup {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    transition: var(--transition-all);
    padding: var(--space-6) var(--space-8);
    font-size: var(--font-size-base);
}

.swal2-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.swal2-html-container {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.swal2-actions {
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* ========== BUTTONS ========== */

.swal2-confirm {
    background-color: var(--color-primary-500);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-5);
    transition: var(--transition-colors);
    border: none;
}

.swal2-confirm:hover {
    background-color: var(--color-primary-600);
}

.swal2-cancel {
    background-color: var(--color-gray-200);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-5);
    transition: var(--transition-colors);
    border: none;
}

.swal2-cancel:hover {
    background-color: var(--color-gray-300);
}

/* ========== ICONS ========== */

.swal2-icon {
    border-width: 2px !important;
    margin-bottom: var(--space-4) !important;
}

.swal2-icon.swal2-success {
    border-color: var(--color-success-500) !important;
    color: var(--color-success-600) !important;
}

.swal2-icon.swal2-error {
    border-color: var(--color-danger-500) !important;
    color: var(--color-danger-600) !important;
}

.swal2-icon.swal2-warning {
    border-color: var(--color-warning-500) !important;
    color: var(--color-warning-600) !important;
}

.swal2-icon.swal2-info {
    border-color: var(--color-info-500) !important;
    color: var(--color-info-600) !important;
}

/* ========== TOASTERS ========== */

.swal2-toast {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.swal2-toast .swal2-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin: 0;
}

.swal2-toast .swal2-html-container {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.swal2-toast.swal2-success {
    border-left: 4px solid var(--color-success-500);
}

.swal2-toast.swal2-error {
    border-left: 4px solid var(--color-danger-500);
}

.swal2-toast.swal2-warning {
    border-left: 4px solid var(--color-warning-500);
}

.swal2-toast.swal2-info {
    border-left: 4px solid var(--color-info-500);
}

/* ========== CONFIRM DIALOG ========== */

.swal2-popup.confirm-alert {
    border-top: 4px solid var(--color-primary-500);
    background-color: var(--color-surface);
    animation: confirmSlideIn 0.3s ease;
}

@keyframes confirmSlideIn {
    0% {
        transform: translateY(-10%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Subtle blur + glow for premium feel */
[data-bs-theme="cyber-glow"] .swal2-popup {
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px var(--color-primary-600);
}

[data-bs-theme="carbon"] .swal2-popup {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
}

[data-bs-theme="aurora"] .swal2-popup {
    background: linear-gradient(135deg,
            var(--color-primary-50),
            var(--color-primary-200));
}

/* Start edit profile page */
.edit-profile-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

button.toggle-password:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border-focus);
}

/* end edit profile page */

/* start installation page */
/* requirements */
.list-group-item {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.list-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.list-group-item .h6 {
    margin-left: 20px;
    font-size: 1rem;
    font-weight: 600;
}

.list-group-item .btn-sm {
    background: var(--color-primary);
    color: var(--color-text) !important;
    border-color: var(--color-primary);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
    margin-right: 20px;
}

/* thank you Page */
.thank-checkmark-icon {
    width: 56px;
    height: 56px;
    background-color: #198754;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.thank-checkmark-icon::before {
    content: "✓";
    position: absolute;
    font-size: 25px;
    color: white;
}

.signin-int-textarea {
    font-size: 1.3rem !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
}

.current-role-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-primary);
    color: var(--color-primary-50);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

/* Start Stepper UI */
.stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin: 40px auto 30px;
    font-family: Arial, sans-serif;
}

.step-wrapper {
    display: flex;
    align-items: center;
}

.step {
    background-color: white;
    border: 2px solid #0d6efd;
    color: #000;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-weight: bold;
    position: relative;
}

.step.active {
    background-color: #0d6efd;
    color: white;
}

.step.completed {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

.step.completed::before {
    content: "✓";
    position: absolute;
    font-size: 16px;
    color: white;
}

.connector {
    height: 2px;
    width: 80px;
    background-color: #e2e6ea;
    z-index: 0;
    margin: 0 8px;
}

.connector.completed {
    background-color: #198754;
}

/* End Stepper UI */

.btn-check:checked+.btn {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary);
    color: var(--color-surface);
}

.tab-content-bg-color {
    background-color: var(--color-background) !important;
}

.btn-login {
    background: var(--color-primary) !important;
    color: var(--color-primary-50);
    border: none;
    transition: 0.3s ease;
}

.btn-login:hover {
    background: var(--color-primary-hover);
    color: var(--color-text);
}

.popover-body {
    background-color: var(--color-background) !important;
    color: var(--color-text-primary) !important;
}

.tom-select-custom .item {
    margin-left: 10px;
    margin-right: 20px;
}

.fr-element p {
    color: var(--color-tertiary) !important;
}

.fc-daygrid-day-number {
    color: var(--color-text-primary) !important;
    font-weight: 500;
}

.postusername {
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
}

/* Start time display style */
.time-txt {
    font-size: 0.875rem;
    cursor: default;
    transition: color 0.2s ease;
}

.time-txt:hover {
    color: var(--color-text-primary);
}

.tooltip {
    font-size: 0.90rem;
}

.tooltip .tooltip-inner {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.login-wrapper {
    display: flex;
    flex: 1;
    min-height: 100vh;
}

.login-aside {
    flex: 1;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-color));
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 40px;
    text-align: center;
}

.login-aside img {
    max-width: 200px;
    margin-bottom: 30px;
}

.permissions-table thead {
    background: var(--color-surface);

}

.login-aside h2 {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 10px;
}

.login-aside p {
    font-size: 1.05rem;
    opacity: 0.9;
}

.login-form-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 40px;
    background-color: #f8f9fa;
}

.login-card {
    background: #fff;
    border-radius: 15px;
    padding: 40px 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    animation: fadeIn 0.8s ease;
}

.login-card h3 {
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

.btn-login {
    background-color: var(--color-surface) !important;
    color: var(--color-text);
    border: none;
    transition: 0.3s ease;
}

.btn-login:hover {
    background-color: var(--brand-dark);
    color: #fff;
}

.login-forgot-password {
    color: #677788;
    font-size: 1rem;
}

.login-forgot-password:hover {
    color: var(--color-surface-hover);
}

.btn-outline-secondary {
    border: 1px solid #ccc;
    color: #555;
    transition: 0.3s ease;
    background: #fff;
}

.btn-outline-secondary:hover {
    background-color: #e9ecef;
    color: #000;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 992px) {
    .login-wrapper {
        flex-direction: column;
    }

    .login-aside {
        height: 250px;
        padding: 30px 20px;
    }
}

.top-app-description {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    width: 850px;
    max-width: 100%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin: 0px auto;
}

.profile-username {
    color: var(--color-text-primary);
}

.post-content .table-responsive, .post-content .table-responsive p {
    color: var(--color-text-primary) !important;
}

.option {
    background: var(--color-surface) !important;
}

/* ============================================================================
   CLEAN PAYMENT PAGES STYLING
   ========================================================================== */

/* Payment Result Cards */
.payment-result-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: var(--transition-all);
    animation: fadeInUp 0.5s ease-out;
}

/* Modal Footer */
.role-modal-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-result-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Payment Icons */
.payment-icon {
    transition: var(--transition-all);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.payment-icon.text-success {
    animation: gentlePulse 2s ease-in-out infinite;
}

.payment-icon.text-danger {
    animation: gentleShake 0.6s ease-in-out;
}

@keyframes gentlePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

@keyframes gentleShake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-2deg);
    }

    75% {
        transform: rotate(2deg);
    }
}

/* Enhanced Buttons */
.payment-btn {
    transition: var(--transition-all);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-5);
}

.payment-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-primary.payment-btn:hover {
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3);
}

.btn-outline-primary.payment-btn:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
}

.btn-outline-secondary.payment-btn:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-primary-300);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .payment-btn {
        width: 100%;
        margin-bottom: var(--space-2);
    }

    .payment-btn:last-child {
        margin-bottom: 0;
    }
}

/* Contact Admin Link Styling */
.contact-admin-link {
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-all);
}

.contact-admin-link:hover {
    text-decoration: underline;
    color: var(--color-primary-hover) !important;
}

/* =
===========================================================================
   COVER PHOTO EDIT FUNCTIONALITY
   ========================================================================== */

.cover-photo-drop-zone {
    position: relative;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

.cover-photo-drop-zone:hover {
    border-color: #007bff;
    background-color: #f0f8ff;
}

.cover-photo-drop-zone.drag-over {
    border-color: #007bff;
    background-color: #e3f2fd;
    transform: scale(1.02);
}

.cover-photo-drop-zone input[type="file"] {
    border: none;
    background: transparent;
    padding: 10px;
}

.cover-photo-drop-zone::before {
    content: "📷 Drag & drop an image here or click to browse";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #6c757d;
    font-size: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cover-photo-drop-zone:hover::before,
.cover-photo-drop-zone.drag-over::before {
    opacity: 1;
}

#currentCoverPhotoPreview {
    position: relative;
}

#currentCoverPhotoPreview img {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

#currentCoverPhotoPreview img:hover {
    transform: scale(1.05);
}

.new-photo-indicator {
    animation: fadeInUp 0.5s ease;
}

.remove-photo-btn {
    transition: all 0.3s ease;
}

.remove-photo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cover-photo-drop-zone {
        padding: 15px;
    }

    .cover-photo-drop-zone::before {
        font-size: 12px;
    }

    #currentCoverPhotoPreview img {
        max-width: 150px;
        max-height: 100px;
    }
}



/* Responsive Layout */
@media (max-width: 768px) {
    .post-creator {
        margin: 0 calc(-1 * var(--space-4));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .post-creator-header,
    .post-creator-body,
    .post-creator-footer {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .post-creator-form-row {
        flex-direction: column;
        gap: var(--space-3);
    }

    .post-creator-category-group {
        min-width: auto;
    }

    .post-creator-actions {
        flex-direction: column;
        width: 100%;
        gap: var(--space-2);
    }

    .post-creator-actions .action-btn {
        width: 100%;
        justify-content: center;
    }

    .post-creator-footer {
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
    }

    .post-creator-meta {
        justify-content: center;
        order: -1;
    }

    .link-preview a {
        flex-direction: column;
        text-align: center;
    }

    .link-preview img {
        width: 100%;
        height: 120px;
        align-self: center;
    }
}

@media (max-width: 480px) {
    .post-creator-header {
        padding: var(--space-3);
    }

    .post-creator-body {
        padding: 0 var(--space-3) var(--space-3);
    }

    .post-creator-footer {
        padding: var(--space-3);
    }

    .post-creator-avatar {
        width: 32px;
        height: 32px;
    }

    .post-creator-fake-input {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
    }
}

/* Enhanced Button Interactions */
.action-btn {
    position: relative;
    overflow: hidden;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.action-btn:hover::before {
    left: 100%;
}

/* Form Control Focus Animations */
.form-control-enhanced {
    position: relative;
}

.form-control-enhanced::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--color-primary-500);
    transition: var(--transition-spring);
    transform: translateX(-50%);
}

.form-control-enhanced:focus::after {
    width: 100%;
}

/* Tom Select Enhanced Interactions */
.ts-control {
    position: relative;
    overflow: hidden;
}

.ts-control::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(var(--color-primary-500), 0.1) 50%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.ts-control:hover::before {
    opacity: 1;
}

/* Link Preview Hover Effects */
.link-preview {
    position: relative;
    overflow: hidden;
}

.link-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--color-primary-500), 0.1), transparent);
    transition: left 0.6s ease;
}

.link-preview:hover::before {
    left: 100%;
}

.link-preview:hover .title {
    color: var(--color-primary-600);
    transition: color var(--transition-base);
}

/* Avatar Hover Effects */
.post-creator-avatar {
    position: relative;
    overflow: hidden;
}

.post-creator-avatar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--color-primary-500), 0.2);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.post-creator-avatar:hover::after {
    opacity: 1;
}

/* Fake Input Pulse Effect */
.post-creator-fake-input {
    position: relative;
}

.post-creator-fake-input::before {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--space-4);
    width: 4px;
    height: 4px;
    background-color: var(--color-primary-500);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(-50%);
    animation: pulse 2s infinite;
}

.post-creator-fake-input:hover::before {
    opacity: 0.6;
}

/* Category Option Hover Enhancement */
.category-option {
    transition: var(--transition-all);
}

.category-option:hover .category-option-icon {
    transform: scale(1.1);
    transition: transform var(--transition-spring);
}

.category-option:hover .category-option-text {
    color: var(--color-primary-600);
    transition: color var(--transition-base);
}

/* Form Field Icon Animations */
.form-field-icon {
    transition: var(--transition-spring);
}

.form-field-icon.success {
    animation: bounceIn 0.5s ease-out;
}

.form-field-icon.error {
    animation: shake 0.5s ease-in-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.3);
    }

    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* Loading Button Pulse */
.action-btn.btn-loading {
    animation: loadingPulse 1.5s infinite;
}

@keyframes loadingPulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

/* Post Creator Expand Hover Preview */
.post-creator:not(.expanded):hover .post-creator-fake-input {
    transform: scale(1.02);
    box-shadow: var(--shadow-sm);
}

/* Tooltip Enhancement */
.tooltip {
    font-size: var(--font-size-sm);
}

.tooltip-inner {
    background-color: var(--color-gray-800);
    color: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    box-shadow: var(--shadow-lg);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--color-gray-800);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--color-gray-800);
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--color-gray-800);
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--color-gray-800);
}

/* Focus Ring Enhancement */
.action-btn:focus-visible,
.form-control-enhanced:focus-visible,
.ts-control:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}

/* Ripple Effect for Buttons */
.action-btn {
    position: relative;
    overflow: hidden;
}

.action-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.action-btn:active::after {
    width: 200px;
    height: 200px;
}

/* Dark Theme Adjustments for Interactions */
[data-bs-theme="midnight"],
[data-bs-theme="carbon"],
[data-bs-theme="cyber-glow"],
[data-bs-theme="solarized-dark"] {
    .action-btn::before {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    }

    .tooltip-inner {
        background-color: var(--color-gray-100);
        color: var(--color-gray-900);
    }

    .tooltip.bs-tooltip-top .tooltip-arrow::before {
        border-top-color: var(--color-gray-100);
    }

    .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
        border-bottom-color: var(--color-gray-100);
    }

    .tooltip.bs-tooltip-start .tooltip-arrow::before {
        border-left-color: var(--color-gray-100);
    }

    .tooltip.bs-tooltip-end .tooltip-arrow::before {
        border-right-color: var(--color-gray-100);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .action-btn::before,
    .link-preview::before,
    .ts-control::before,
    .form-control-enhanced::after {
        transition: none;
        animation: none;
    }

    .action-btn.btn-loading {
        animation: none;
    }

    .form-field-icon.success,
    .form-field-icon.error {
        animation: none;
    }
}

/* ===========================================================================
   TOM SELECT CUSTOM STYLING - POST CREATOR
   ========================================================================== */

.ts-wrapper {
    width: 100%;
    position: relative;
    z-index: 100;
}

.ts-control {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    background: var(--color-surface) !important;
    font-size: var(--font-size-base) !important;
    color: var(--color-text-primary) !important;
    transition: var(--transition-all) !important;
    min-height: var(--form-control-height) !important;
}

.ts-control:hover {
    border-color: var(--color-border-focus) !important;
}

.ts-control.focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(48, 170, 191, 0.1) !important;
}

.ts-control input {
    font-size: var(--font-size-base) !important;
    color: var(--color-text-primary) !important;
}

.ts-control input::placeholder {
    color: var(--color-text-tertiary) !important;
}

.ts-dropdown {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: var(--space-1) !important;
    background: var(--color-surface) !important;
    z-index: 10000 !important;
}

.ts-dropdown-content {
    max-height: 250px !important;
    overflow-y: auto !important;
}

.tom-option {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: var(--transition-colors);
}

.tom-option:hover,
.ts-dropdown .option.active {
    background-color: var(--color-surface-hover) !important;
}

.ts-dropdown .option.selected {
    background-color: var(--color-primary-50) !important;
    color: var(--color-primary) !important;
}

.tom-option-text {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

.tom-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tom-item-text {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

.ts-wrapper.single .ts-control::after {
    border-color: var(--color-text-secondary) transparent transparent !important;
    border-width: 6px 6px 0 !important;
    margin-top: -3px !important;
}

.ts-wrapper.single.input-active .ts-control::after {
    border-color: transparent transparent var(--color-text-secondary) !important;
    border-width: 0 6px 6px !important;
    margin-top: -3px !important;
}

.ts-dropdown .optgroup-header {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    padding: var(--space-2) var(--space-4);
    background: var(--color-background);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ts-wrapper.single .ts-control .item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.ts-dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.ts-dropdown-content::-webkit-scrollbar-track {
    background: var(--color-surface-hover);
    border-radius: var(--radius-sm);
}

.ts-dropdown-content::-webkit-scrollbar-thumb {
    background: var(--color-border-focus);
    border-radius: var(--radius-sm);
}

.ts-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* ==



/* Pin Icon States */
.post-pin-ribbon.pinned {
    background: var(--color-primary-500);
    color: white;
    box-shadow: var(--shadow-md);
}

.post-pin-ribbon.loading {
    background: var(--color-gray-200);
    color: var(--color-gray-400);
    cursor: not-allowed;
}

/* Hover Effects */
.post-pin-ribbon.pinned:hover:not(.loading) {
    background: var(--color-primary-600);
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.post-pin-ribbon.unpinned:hover:not(.loading) {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    border-color: var(--color-primary-200);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

/* Focus States for Accessibility */
.post-pin-ribbon:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.post-pin-ribbon:focus:not(:focus-visible) {
    outline: none;
}

/* Icon Styling */
.post-pin-ribbon i {
    font-size: 12px;
    transition: var(--transition-transform);
}

.post-pin-ribbon.pinned i {
    transform: rotate(45deg);
}

.post-pin-ribbon.unpinned i {
    transform: rotate(0deg);
}

/* Loading State Animation */
.post-pin-ribbon.loading i {
    animation: pinSpin 1s linear infinite;
}

@keyframes pinSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Hide ribbon text - we only show icon now */
.post-pin-ribbon .ribbon-text {
    display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .post-pin-ribbon {
        width: 20px;
        height: 20px;
        margin-left: var(--space-1);
    }

    .post-pin-ribbon i {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .post-pin-ribbon {
        width: 18px;
        height: 18px;
        margin-left: var(--space-1);
    }

    .post-pin-ribbon i {
        font-size: 10px;
    }
}

/* Theme-specific Enhancements */
[data-bs-theme="midnight"] .post-pin-ribbon.unpinned {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

[data-bs-theme="midnight"] .post-pin-ribbon.unpinned:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-primary-400);
}

[data-bs-theme="carbon"] .post-pin-ribbon.unpinned {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

[data-bs-theme="carbon"] .post-pin-ribbon.unpinned:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="cyber-glow"] .post-pin-ribbon.pinned {
    background: var(--color-primary-500);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

[data-bs-theme="cyber-glow"] .post-pin-ribbon.pinned:hover {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .post-pin-ribbon {
        border-width: 2px;
    }

    .post-pin-ribbon.pinned {
        background: var(--color-primary-600);
        border-color: var(--color-primary-800);
    }

    .post-pin-ribbon.unpinned {
        background: var(--color-background);
        border-color: var(--color-text-primary);
        color: var(--color-text-primary);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .post-pin-ribbon {
        transition: none;
    }

    .post-pin-ribbon:hover {
        transform: none;
    }

    .post-pin-ribbon i {
        transition: none;
        transform: none !important;
    }

    .post-pin-ribbon.loading i {
        animation: none;
    }
}

/* Print Styles */
@media print {
    .post-pin-ribbon {
        display: none;
    }
}

/* =======
=====================================================================
   POST PIN ICON COMPONENT
   ========================================================================== */

.post-pin-ribbon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: var(--space-2);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-all);
    user-select: none;
    border: 1px solid transparent;
}

/* Pin Icon States */
.post-pin-ribbon.pinned {
    background: var(--color-primary-500);
    color: white;
    box-shadow: var(--shadow-md);
}

.post-pin-ribbon.loading {
    background: var(--color-gray-200);
    color: var(--color-gray-400);
    cursor: not-allowed;
}

/* Hover Effects */
.post-pin-ribbon.pinned:hover:not(.loading) {
    background: var(--color-primary-600);
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.post-pin-ribbon.unpinned:hover:not(.loading) {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    border-color: var(--color-primary-200);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

/* Focus States for Accessibility */
.post-pin-ribbon:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.post-pin-ribbon:focus:not(:focus-visible) {
    outline: none;
}

/* Icon Styling */
.post-pin-ribbon i {
    font-size: 12px;
    transition: var(--transition-transform);
}

.post-pin-ribbon.pinned i {
    transform: rotate(45deg);
}

.post-pin-ribbon.unpinned i {
    transform: rotate(0deg);
}

/* Loading State Animation */
.post-pin-ribbon.loading i {
    animation: pinSpin 1s linear infinite;
}

@keyframes pinSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .post-pin-ribbon {
        width: 20px;
        height: 20px;
        margin-left: var(--space-1);
    }

    .post-pin-ribbon i {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .post-pin-ribbon {
        width: 18px;
        height: 18px;
        margin-left: var(--space-1);
    }

    .post-pin-ribbon i {
        font-size: 10px;
    }
}

/* Theme-specific Enhancements */
[data-bs-theme="midnight"] .post-pin-ribbon.unpinned {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

[data-bs-theme="midnight"] .post-pin-ribbon.unpinned:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-primary-400);
}

[data-bs-theme="carbon"] .post-pin-ribbon.unpinned {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

[data-bs-theme="carbon"] .post-pin-ribbon.unpinned:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="cyber-glow"] .post-pin-ribbon.pinned {
    background: var(--color-primary-500);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

[data-bs-theme="cyber-glow"] .post-pin-ribbon.pinned:hover {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .post-pin-ribbon {
        border-width: 2px;
    }

    .post-pin-ribbon.pinned {
        background: var(--color-primary-600);
        border-color: var(--color-primary-800);
    }

    .post-pin-ribbon.unpinned {
        background: var(--color-background);
        border-color: var(--color-text-primary);
        color: var(--color-text-primary);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .post-pin-ribbon {
        transition: none;
    }

    .post-pin-ribbon:hover {
        transform: none;
    }

    .post-pin-ribbon i {
        transition: none;
        transform: none !important;
    }

    .post-pin-ribbon.loading i {
        animation: none;
    }
}

/* Print Styles */
@media print {
    .post-pin-ribbon {
        display: none;
    }
}

/*
 ============================================================================
   POST PIN BOOKMARK COMPONENT
   ========================================================================== */

.post-pin-ribbon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: var(--space-2);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-all);
    user-select: none;
    border: 1px solid transparent;
}

/* Bookmark Icon States */
.post-pin-ribbon.pinned {
    background: var(--color-primary-500);
    color: white;
    box-shadow: var(--shadow-md);
}

.post-pin-ribbon.loading {
    background: var(--color-gray-200);
    color: var(--color-gray-400);
    cursor: not-allowed;
}

/* Hover Effects */
.post-pin-ribbon.pinned:hover:not(.loading) {
    background: var(--color-primary-600);
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.post-pin-ribbon.unpinned:hover:not(.loading) {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    border-color: var(--color-primary-200);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

/* Focus States for Accessibility */
.post-pin-ribbon:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.post-pin-ribbon:focus:not(:focus-visible) {
    outline: none;
}

/* Icon Styling */
.post-pin-ribbon i {
    font-size: 16px;
    transition: var(--transition-transform);
}

.post-pin-ribbon.pinned i {
    transform: rotate(45deg);
}

.post-pin-ribbon.unpinned i {
    transform: rotate(0deg);
}

/* Loading State Animation */
.post-pin-ribbon.loading i {
    animation: bookmarkPulse 1.5s ease-in-out infinite;
}

@keyframes bookmarkPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .post-pin-ribbon {
        width: 20px;
        height: 20px;
        margin-left: var(--space-1);
    }

    .post-pin-ribbon i {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .post-pin-ribbon {
        width: 18px;
        height: 18px;
        margin-left: var(--space-1);
    }

    .post-pin-ribbon i {
        font-size: 10px;
    }
}

/* Theme-specific Enhancements */
[data-bs-theme="midnight"] .post-pin-ribbon.unpinned {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

[data-bs-theme="midnight"] .post-pin-ribbon.unpinned:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-primary-400);
}

[data-bs-theme="carbon"] .post-pin-ribbon.unpinned {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

[data-bs-theme="carbon"] .post-pin-ribbon.unpinned:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="cyber-glow"] .post-pin-ribbon.pinned {
    background: var(--color-primary-500);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

[data-bs-theme="cyber-glow"] .post-pin-ribbon.pinned:hover {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .post-pin-ribbon {
        border-width: 2px;
    }

    .post-pin-ribbon.pinned {
        background: var(--color-primary-600);
        border-color: var(--color-primary-800);
    }

    .post-pin-ribbon.unpinned {
        background: var(--color-background);
        border-color: var(--color-text-primary);
        color: var(--color-text-primary);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .post-pin-ribbon {
        transition: none;
    }

    .post-pin-ribbon:hover {
        transform: none;
    }

    .post-pin-ribbon i {
        transition: none;
        transform: none !important;
    }

    .post-pin-ribbon.loading i {
        animation: none;
    }
}

/* Print Styles */
@media print {
    .post-pin-ribbon {
        display: none;
    }
}

/* ============================================================================
   POST PIN ICON COMPONENT
   ========================================================================== */

.post-pin-ribbon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: var(--space-2);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-all);
    user-select: none;
    border: 1px solid transparent;
}

/* Pin Icon States */
.post-pin-ribbon.pinned {
    background: var(--color-primary-500);
    color: white;
    box-shadow: var(--shadow-md);
}

.post-pin-ribbon.unpinned {
    color: var(--color-text-primary);
}

.post-pin-ribbon.loading {
    background: var(--color-gray-200);
    color: var(--color-gray-400);
    cursor: not-allowed;
}

/* Hover Effects */
.post-pin-ribbon.pinned:hover:not(.loading) {
    background: var(--color-primary-600);
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.post-pin-ribbon.unpinned:hover:not(.loading) {
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    border-color: var(--color-primary-200);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

/* Focus States for Accessibility */
.post-pin-ribbon:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.post-pin-ribbon:focus:not(:focus-visible) {
    outline: none;
}

/* Icon Styling */
.post-pin-ribbon i {
    font-size: 16px;
    transition: var(--transition-transform);
}

.post-pin-ribbon.pinned i {
    transform: rotate(45deg);
}

.post-pin-ribbon.unpinned i {
    transform: rotate(0deg);
}

/* Loading State Animation */
.post-pin-ribbon.loading i {
    animation: pinSpin 1s linear infinite;
}

@keyframes pinSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .post-pin-ribbon {
        width: 28px;
        height: 28px;
        margin-left: var(--space-1);
    }

    .post-pin-ribbon i {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .post-pin-ribbon {
        width: 24px;
        height: 24px;
        margin-left: var(--space-1);
    }

    .post-pin-ribbon i {
        font-size: 12px;
    }
}

/* Theme-specific Enhancements */
[data-bs-theme="midnight"] .post-pin-ribbon.unpinned {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

[data-bs-theme="midnight"] .post-pin-ribbon.unpinned:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-primary-400);
}

[data-bs-theme="carbon"] .post-pin-ribbon.unpinned {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

[data-bs-theme="carbon"] .post-pin-ribbon.unpinned:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="cyber-glow"] .post-pin-ribbon.pinned {
    background: var(--color-primary-500);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

[data-bs-theme="cyber-glow"] .post-pin-ribbon.pinned:hover {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .post-pin-ribbon {
        border-width: 2px;
    }

    .post-pin-ribbon.pinned {
        background: var(--color-primary-600);
        border-color: var(--color-primary-800);
    }

    .post-pin-ribbon.unpinned {
        background: var(--color-background);
        border-color: var(--color-text-primary);
        color: var(--color-text-primary);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .post-pin-ribbon {
        transition: none;
    }

    .post-pin-ribbon:hover {
        transform: none;
    }

    .post-pin-ribbon i {
        transition: none;
        transform: none !important;
    }

    .post-pin-ribbon.loading i {
        animation: none;
    }
}

/* Print Styles */
@media print {
    .post-pin-ribbon {
        display: none;
    }
}

/* =
===========================================================================
   CATEGORY DROPDOWN FIX
   ========================================================================== */

#postCategory.form-select {
    text-align: left !important;
    text-align-last: left !important;
    padding-left: var(--space-3);
}

#postCategory.form-select option {
    text-align: left;
    padding-left: var(--space-2);
}

/* Fix for any other category dropdowns */
.category-dropdown,
.form-select.category-select {
    text-align: left !important;
    text-align-last: left !important;
}

.category-dropdown option,
.form-select.category-select option {
    text-align: left;
}

/* En
hanced category dropdown alignment */
#postCategory.btn.form-select {
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
}

/* Override Bootstrap button centering for select elements */
select.btn {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Ensure dropdown arrow stays on the right */
.form-select {
    background-position: right var(--space-3) center !important;
}

/* ============================================================================
   POST STATS BUTTONS (sec-item-2-opt) - OUTLINED WITH FILL HOVER
   ========================================================================== */

/* Outlined buttons with primary border */
.sec-item-2-opt {
    border-radius: var(--radius-full) !important;
    background: transparent !important;
    border: 1px solid var(--color-primary-500) !important;
    color: var(--color-primary-500) !important;
    transition: var(--transition-all);
    text-decoration: none;
}

/* Fix icon sizes to be consistent */
.sec-item-2-opt i {
    font-size: 14px !important;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fill the pill on hover */
.sec-item-2-opt:hover {
    background: var(--color-primary-500) !important;
    color: white !important;
    border-color: var(--color-primary-500) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

/* Liked state - filled with primary color */
.sec-item-2-opt.liked {
    background: var(--color-primary-500) !important;
    color: white !important;
    border-color: var(--color-primary-500) !important;
}

.sec-item-2-opt.liked:hover {
    background: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .sec-item-2-opt i {
        font-size: 12px !important;
        width: 12px;
        height: 12px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .sec-item-2-opt:hover {
        transform: none;
    }
}

/* Fix v
iew count text color */
.sec-item-2-opt .view-count,
.sec-item-2-opt .like-count,
.sec-item-2-opt .comment-count {
    color: inherit !important;
}

/* Ensure text inherits button color properly */
.sec-item-2-opt span {
    color: inherit !important;
}

/* ============================================================================
   CATEGORY DROPDOWN TEXT ALIGNMENT - COMPREHENSIVE FIX
   ========================================================================== */

/* Force left alignment on category dropdown */
#postCategory,
#postCategory.btn,
#postCategory.form-select,
#postCategory.btn.form-select {
    text-align: left !important;
    text-align-last: left !important;
    justify-content: flex-start !important;
    padding-left: var(--space-3) !important;
}

.btn-login {
    background: var(--color-primary) !important;
    color: var(--color-primary-50);
    border: none;
    transition: 0.3s ease;
}

.btn-login:hover {
    background: var(--color-primary-hover);
    color: var(--color-text);
}

/* Override any Bootstrap centering */
.post-category-wrapper select,
.post-category-wrapper .form-select,
.post-category-wrapper .btn {
    text-align: left !important;
    text-align-last: left !important;
    justify-content: flex-start !important;
}

/* Force left alignment on all dropdown options */
#postCategory option,
.form-select option,
select.btn option {
    text-align: left !important;
    direction: ltr !important;
    text-align-last: left !important;
}

/* Ensure proper text direction */
select[multiple] option {
    text-align: left !important;
}

/* Override any inherited centering from button classes */
.btn.form-select {
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
}

/* ============================================================================
   POST STATS BUTTONS (sec-item-2-opt) - FIXED
   ========================================================================== */

.sec-item-2-opt {
    border: 1px solid rgb(222, 222, 222);
    background: white;
    border-radius: 50px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 1.1rem;
    padding: 5px 20px;
    color: var(--nav-pills-link-active-bg) !important;
}

/* Icon sizing consistency */
.sec-item-2-opt i {
    font-size: 14px !important;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fill the pill on hover */
.sec-item-2-opt:hover {
    background: var(--color-primary-500) !important;
    color: white !important;
    border-color: var(--color-primary-500) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

/* Liked state - filled with primary color */
.sec-item-2-opt.liked {
    background: var(--color-primary-500) !important;
    color: white !important;
    border-color: var(--color-primary-500) !important;
}

.sec-item-2-opt.liked:hover {
    background: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
}

/* Count text styling */
.sec-item-2-opt .view-count,
.sec-item-2-opt .like-count,
.sec-item-2-opt .comment-count {
    color: inherit !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Ensure text inherits button color properly */
.sec-item-2-opt span {
    color: inherit !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .sec-item-2-opt {
        padding: var(--space-1) var(--space-2);
        min-height: 28px;
    }

    .sec-item-2-opt i {
        font-size: 12px !important;
        width: 12px;
        height: 12px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .sec-item-2-opt:hover {
        transform: none;
    }
}

/* =
===========================================================================
   NOTIFICATION BUTTON TOOLTIP FIX
   ========================================================================== */

/* Fix for notification button with both tooltip and dropdown */
#notificationButton {
    position: relative;
}

/* Ensure tooltip appears above dropdown */
#notificationButton .tooltip {
    z-index: 1080 !important;
}

/* Hide tooltip when dropdown is open */
#notificationButton[aria-expanded="true"]+.tooltip {
    display: none !important;
}

/* ==
==========================================================================
   POST CREATOR BUTTON LOADING STATES
   ========================================================================== */

/* Enhanced loading state for post creator buttons */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: buttonSpin 1s linear infinite;
}

/* Primary button loading state */
.btn-primary.btn-loading::after {
    border-top-color: var(--color-primary);
    border-right-color: rgba(255, 255, 255, 0.3);
}

/* Transparent button loading state */
.btn-transparent.btn-loading::after {
    border-top-color: var(--color-primary-500);
    border-right-color: rgba(var(--color-primary-500), 0.3);
}

@keyframes buttonSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Loader container styling */
.loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-spinner {
    animation: spin 2s linear infinite;
}

.loader-circle {
    stroke: var(--color-primary-500) !important;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading state opacity */
.loading {
    pointer-events: none;
    opacity: 0.7;
}

.contact-admin-link:hover {
    text-decoration: underline;
    color: var(--color-primary-hover) !important;
}

.btn-model-payment {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.drop-show {
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-toggle="tooltip"] {
    cursor: pointer !important;
}

.category-tabs li a {
    padding: 10px 21px !important;
    border: 1px solid var(--color-border) !important;
    color: black !important;
}

.category-tabs li a:hover {
    background-color: var(--nav-pills-link-active-bg) !important;
    color: var(--color-surface) !important;
    box-shadow: var(--shadow-sm) !important;
}

.nav-pills .nav-item {
    margin: .25rem .25rem 0px .25rem !important;
}

.post-content h5 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 500;
}

.post-content h1 {
    font-size: 1.5rem;
}

.post-content p {
    font-size: 1.2rem;
}

.post-content ul {
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.post-content ul li {
    margin-bottom: 10px;
}

.post-content h2 {
    font-size: 1.4rem;
}

@media (max-width:767px) {
    .post-content h5 {
        font-size: 1.1rem !important;
    }

    .post-content h1 {
        font-size: 1.3rem !important;
    }

    .post-content p {
        font-size: 1.1rem !important;
    }

    .post-content ul {
        font-size: 1.1rem !important;
    }

    .post-content h2 {
        font-size: 1.2rem !important;
    }
}

.form-control {
    font-size: 1.2rem !important;
    height: 50px;
    padding: 10px 15px;
}

.sec-info-member-body {
    padding: 0px 20px;
}

.role-nav {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.1;
}