/* =========================
   Root Variables - GigaLinked Modern Design System
   ========================= */
:root {
    /* Core Brand Colors */
    --app-nav-top-bg: #1c1f37;
    --ui-block-bg: #1c1e2f;
    --ui-block-bg-elevated: #252840;
    --ui-block-bg-hover: #2a2d45;
    --brand-info: #ffffff;
    --gray-darker: #ffffff;
    --ui-block-bg-form: #1c1f37;
    --gray-lighter-4: #ffffff00;
    --icheck-border-color: #686974;

    --brand-primary: #bebec8;
    --gray-base: #dae0ed;
    --brand-primary-gradient-v: linear-gradient(0deg, #181a31 0%, #2f3147 100%);
    --brand-primary-lighter-3: #686974;
    --brand-info-lighter-3: #b93535;
    
    /* Accent Colors */
    --gl-accent-primary: #0195f4;
    --gl-accent-secondary: #5865F2;
    --gl-accent-success: #10b981;
    --gl-accent-warning: #f59e0b;
    --gl-accent-danger: #ef4444;
    --gl-accent-purple: #8b5cf6;
    --gl-accent-cyan: #06b6d4;

    /* Input/Form Colors */
    --input-bg: #141627;
    --input-color: #cfcfcf;
    --input-border: 1px solid #111111;
    --input-border-color: #2a2d45;
    --input-focus-border: #0195f4;
    --brand-primary-lighter-2: #0195f4;

    --brand-secondary-gradient-start: #141627;
    --brand-secondary-gradient-end: #0d0e18;
    --brand-primary-lighter-4: #1c1f36;

    --input-hover-bg: #141627;
    --input-focus-bg: #141627;
    --select-option-bg: #141627;
    --gray-faded: #191b30;

    /* Modern Design System - Spacing */
    --gl-space-xs: 4px;
    --gl-space-sm: 8px;
    --gl-space-md: 16px;
    --gl-space-lg: 24px;
    --gl-space-xl: 32px;
    --gl-space-2xl: 48px;
    
    /* Modern Design System - Border Radius */
    --gl-radius-sm: 6px;
    --gl-radius-md: 10px;
    --gl-radius-lg: 16px;
    --gl-radius-xl: 24px;
    --gl-radius-full: 9999px;
    
    /* Modern Design System - Shadows */
    --gl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --gl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --gl-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    --gl-shadow-glow: 0 0 20px rgba(1, 149, 244, 0.15);
    
    /* Modern Design System - Typography */
    --gl-text-xs: 11px;
    --gl-text-sm: 13px;
    --gl-text-base: 14px;
    --gl-text-md: 16px;
    --gl-text-lg: 18px;
    --gl-text-xl: 20px;
    --gl-text-2xl: 24px;
    --gl-text-3xl: 30px;
    
    /* Modern Design System - Transitions */
    --gl-transition-fast: 0.15s ease;
    --gl-transition-base: 0.25s ease;
    --gl-transition-slow: 0.4s ease;

    /* Christmas effects */
    --snowflake-color: #FFFFFF;
    --present-color: #FFD700;
    --modal-bg-color: #252a43;
    --modal-overlay-bg-color: rgba(0,0,0,0.7);
    --discount-code-color: #ffcc00;
    --copy-button-bg-color: #28a745;
    --close-button-bg-color: #dc3545;
    --copy-notification-bg-color: #252a43;
    --explosion-gradient: radial-gradient(circle, #ffcc00 20%, rgba(255, 204, 0, 0) 70%);
    --modal-text-color: #fff;
}

/* =========================
   Modern Card System
   ========================= */
.gl-card {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--gl-shadow-md);
    overflow: hidden;
    transition: transform var(--gl-transition-base), box-shadow var(--gl-transition-base);
}

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

.gl-card-header {
    padding: var(--gl-space-md) var(--gl-space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.gl-card-footer {
    padding: var(--gl-space-md) var(--gl-space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
}

/* =========================
   Modern Button System
   ========================= */
.btn {
    border-radius: var(--gl-radius-md);
    font-weight: 500;
    transition: all var(--gl-transition-fast);
    border: none;
    padding: 10px 20px;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, var(--gl-accent-primary) 0%, #0077cc 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(1, 149, 244, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%);
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.4);
    color: #ffffff;
}

.btn-secondary {
    background: var(--ui-block-bg-elevated);
    color: var(--brand-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    background: var(--ui-block-bg-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-success {
    background: linear-gradient(135deg, var(--gl-accent-success) 0%, #059669 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, var(--gl-accent-danger) 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-warning {
    background: linear-gradient(135deg, var(--gl-accent-warning) 0%, #d97706 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--brand-primary);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--gl-accent-primary);
    color: var(--gl-accent-primary);
}

.btn-sm {
    padding: 6px 14px;
    font-size: var(--gl-text-sm);
}

.btn-lg {
    padding: 14px 28px;
    font-size: var(--gl-text-md);
}

/* =========================
   Modern Status Badges
   ========================= */
.status,
.badge,
.label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: var(--gl-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--gl-radius-full);
    background: rgba(255, 255, 255, 0.1);
}

.status-active, .badge-success, .label-success,
.status-paid {
    background: rgba(16, 185, 129, 0.15);
    color: var(--gl-accent-success);
}

.status-pending, .badge-warning, .label-warning,
.status-unpaid {
    background: rgba(245, 158, 11, 0.15);
    color: var(--gl-accent-warning);
}

/* Suspended status - bright red to distinguish from Pending (orange/yellow) */
/* Target suspended status badges in services/products lists */
.list-group-item-status .label-danger[title*="Suspended"],
.status-badge-wrapper .label-danger[title*="Suspended"],
.label.label-danger[title*="Suspended" i],
.label-danger[title*="Suspended" i],
.status-suspended,
.label.label-suspended,
.badge.badge-suspended {
    background: rgba(220, 53, 69, 0.35) !important; /* Bright red with higher opacity */
    color: #ff6b7a !important; /* Bright red/pink text for visibility */
    border: 1px solid rgba(220, 53, 69, 0.6) !important; /* Red border for emphasis */
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4) !important; /* Subtle red glow */
}

/* Ensure suspended is clearly different from pending - override any warning styles */
.list-group-item-status .label-danger,
.status-badge-wrapper .label-danger {
    /* Only apply if it's not pending - this ensures suspended uses red */
}

/* Additional specificity for services table */
.clientareaproducts .label-danger[title*="Suspended"],
.panel-active-services .label-danger[title*="Suspended"] {
    background: rgba(220, 53, 69, 0.35) !important;
    color: #ff6b7a !important;
    border: 1px solid rgba(220, 53, 69, 0.6) !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4) !important;
}

.status-overdue, .badge-danger, .label-danger,
.status-cancelled, .status-terminated {
    background: rgba(239, 68, 68, 0.15);
    color: var(--gl-accent-danger);
}

.status-answered, .badge-info, .label-info,
.status-open {
    background: rgba(1, 149, 244, 0.15);
    color: var(--gl-accent-primary);
}

.status-closed, .badge-default, .label-default {
    background: rgba(255, 255, 255, 0.08);
    color: var(--brand-primary);
}

/* =========================
   Modern Panel System
   ========================= */
.panel {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--gl-shadow-md);
    overflow: hidden;
    margin-bottom: var(--gl-space-lg);
}

.panel-default > .panel-heading {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
    background-color: #29293d !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-md) var(--gl-space-lg);
}

.panel-heading .panel-title {
    font-size: var(--gl-text-md);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--gl-space-sm);
}

.panel-heading .panel-title i {
    opacity: 0.7;
}

.panel-body {
    padding: var(--gl-space-lg);
}

.panel-footer {
    padding: var(--gl-space-md) var(--gl-space-lg);
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom-right-radius: var(--gl-radius-lg);
    border-bottom-left-radius: var(--gl-radius-lg);
}

/* =========================
   Modern Table System
   ========================= */
.table {
    width: 100%;
    margin-bottom: var(--gl-space-lg);
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--brand-primary);
    font-weight: 600;
    font-size: var(--gl-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--gl-space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.table tbody tr {
    transition: background var(--gl-transition-fast);
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.table tbody td {
    padding: var(--gl-space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
    color: var(--brand-primary);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table-container {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.table-top {
    padding: var(--gl-space-md) var(--gl-space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gl-space-md);
}

/* =========================
   Modern Form Controls
   ========================= */
.form-control {
    background: var(--input-bg);
    border: 1px solid var(--input-border-color);
    border-radius: var(--gl-radius-md);
    color: var(--input-color);
    padding: 12px 16px;
    font-size: var(--gl-text-base);
    transition: all var(--gl-transition-fast);
    height: auto;
}

.form-control:focus {
    border-color: var(--gl-accent-primary);
    box-shadow: 0 0 0 3px rgba(1, 149, 244, 0.15);
    outline: none;
    background: var(--input-bg);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.input-group {
    border-radius: var(--gl-radius-md);
    overflow: hidden;
}

.input-group-addon {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--input-border-color);
    border-right: none;
    padding: 12px 16px;
    color: var(--brand-primary);
    font-size: var(--gl-text-sm);
}

/* Textarea improvements */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Select styling */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23bebec8' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* =========================
   Modern List Groups
   ========================= */
.list-group {
    background: transparent;
    border-radius: var(--gl-radius-md);
    overflow: hidden;
}

.list-group-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: var(--gl-space-md) var(--gl-space-lg);
    color: var(--brand-primary);
    transition: all var(--gl-transition-fast);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.list-group-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.list-group-item.active {
    background: rgba(1, 149, 244, 0.1);
    border-left: 3px solid var(--gl-accent-primary);
}

/* =========================
   Modern Tiles/Stats Cards
   ========================= */
.tile {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-lg);
    text-align: center;
    transition: all var(--gl-transition-base);
    position: relative;
    overflow: hidden;
}

.tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gl-accent-primary), var(--gl-accent-purple));
    opacity: 0;
    transition: opacity var(--gl-transition-base);
}

.tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--gl-shadow-lg);
    border-color: rgba(1, 149, 244, 0.2);
}

.tile:hover::before {
    opacity: 1;
}

.tile-stat {
    font-size: var(--gl-text-3xl);
    font-weight: 700;
    color: #ffffff !important;
  line-height: 1;
    margin-bottom: var(--gl-space-sm);
}

.tile-title {
    font-size: var(--gl-text-sm);
    color: var(--brand-primary);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tile-icon-absolute {
    position: absolute;
    top: var(--gl-space-md);
    right: var(--gl-space-md);
    opacity: 0.15;
    font-size: 48px;
}

.tiles {
    margin-bottom: var(--gl-space-xl);
}

.tiles .row {
    display: flex;
    gap: var(--gl-space-md);
    flex-wrap: wrap;
}

.tiles .col-md-3,
.tiles .col-md-4 {
    flex: 1;
    min-width: 200px;
}

/* =========================
   Dashboard Panel Fixes
   ========================= */
/* Fix white backgrounds in dashboard panels */
.panel-default > .panel-body {
    background-color: var(--ui-block-bg) !important;
    color: var(--text-color) !important;
}

/* Fix Recent News panel styling - ensure no white backgrounds */
.panel[menuitemname="Recent News"] {
    background-color: var(--ui-block-bg) !important;
}

.panel[menuitemname="Recent News"] .panel-body,
.panel[menuitemname="Recent News"] .no-data,
.panel[menuitemname="Recent News"] .list-group {
    background-color: var(--ui-block-bg) !important;
    color: var(--text-color) !important;
}

.panel[menuitemname="Recent News"] .panel-body:hover,
.panel[menuitemname="Recent News"] .list-group-item:hover {
    background-color: var(--panel-hover-bg) !important;
}

.panel[menuitemname="Recent News"] .list-group-item {
    background-color: transparent !important;
    color: var(--text-color) !important;
    border-color: var(--panel-border-divider-color) !important;
}

/* Fix Linked Social Media / Linked Accounts styling */
#tableLinkedAccounts,
.social-signin-btns,
.providerPreLinking {
    background-color: var(--ui-block-bg) !important;
}

.providerLinkingFeedback {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

/* Fix Link Social Media / Discord Account Linking panel styling */
.panel[menuitemname*="Social"],
.panel[menuitemname*="Link Social"],
.panel[menuitemname*="Linked Social"],
.panel:has([class*="social"]),
.panel[menuitemname="Discord Account Linking"] {
    background-color: var(--ui-block-bg) !important;
}

.panel[menuitemname*="Social"] .panel-body,
.panel[menuitemname*="Link Social"] .panel-body,
.panel[menuitemname*="Linked Social"] .panel-body,
.panel:has([class*="social"]) .panel-body,
.panel[menuitemname="Discord Account Linking"] .panel-body {
    background-color: var(--ui-block-bg) !important;
    color: var(--text-color) !important;
    padding: var(--gl-space-lg) !important;
}

.panel[menuitemname*="Social"] .panel-body *,
.panel[menuitemname*="Link Social"] .panel-body *,
.panel[menuitemname*="Linked Social"] .panel-body *,
.panel:has([class*="social"]) .panel-body *,
.panel[menuitemname="Discord Account Linking"] .panel-body * {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

.panel[menuitemname*="Social"] .panel-body button,
.panel[menuitemname*="Link Social"] .panel-body button,
.panel[menuitemname*="Linked Social"] .panel-body button,
.panel:has([class*="social"]) .panel-body button {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-color) !important;
}

/* =========================
   Modern Discord Linking Panel
   ========================= */
.discord-linking-modern {
    width: 100%;
}

.discord-card-linked,
.discord-card-unlinked {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--gl-radius-lg);
    padding: var(--gl-space-lg);
    transition: all var(--gl-transition-base);
}

.discord-card-linked:hover,
.discord-card-unlinked:hover {
    border-color: rgba(1, 149, 244, 0.3);
    box-shadow: 0 4px 16px rgba(1, 149, 244, 0.1);
    transform: translateY(-2px);
}

.discord-card-content {
    display: flex;
    align-items: center;
    gap: var(--gl-space-md);
    width: 100%;
}

.discord-icon-wrapper {
    flex-shrink: 0;
    width: 64px; /* Enlarged from 48px */
    height: 64px; /* Enlarged from 48px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #5865F2 0%, #7289da 100%);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

.discord-icon {
    font-size: 32px; /* Enlarged from 24px */
    color: #ffffff;
}

.discord-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.discord-platform-label {
    font-size: var(--gl-text-base);
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.discord-username-display {
    font-size: var(--gl-text-sm);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discord-status-text {
    font-size: var(--gl-text-sm);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    margin: 0;
}

.discord-action-wrapper {
    flex-shrink: 0;
    margin-left: auto; /* Push button to far right */
}

.btn-discord-relink,
.btn-discord-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0077cc 100%) !important;
    color: #ffffff !important;
    border: none;
    border-radius: var(--gl-radius-md);
    font-size: var(--gl-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--gl-transition-base);
    box-shadow: 0 2px 8px rgba(1, 149, 244, 0.25);
    cursor: pointer;
}

.btn-discord-relink:hover,
.btn-discord-link:hover {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%) !important;
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.35);
    transform: translateY(-1px);
    color: #ffffff !important;
    text-decoration: none;
}

.btn-discord-relink i,
.btn-discord-link i {
    font-size: 14px;
}

/* Unlinked state - slightly different styling */
.discord-card-unlinked {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}

.discord-card-unlinked .discord-icon-wrapper {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.6) 0%, rgba(114, 137, 218, 0.6) 100%);
    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.2);
}

.discord-card-unlinked .btn-discord-link {
    background: linear-gradient(135deg, rgba(1, 149, 244, 0.8) 0%, rgba(0, 119, 204, 0.8) 100%) !important;
}

.discord-card-unlinked .btn-discord-link:hover {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0077cc 100%) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .discord-card-content {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .discord-icon-wrapper {
        margin: 0 auto;
    }
    
    .discord-action-wrapper {
        margin-top: var(--gl-space-sm);
        margin-left: 0;
    }
    
    .btn-discord-relink,
    .btn-discord-link {
        width: 100%;
        justify-content: center;
    }
}

/* Override any white background classes or inline styles */
.panel-body [style*="background"]:not([style*="transparent"]):not([style*="rgba"]),
.panel-body [class*="bg-white"],
.panel-body [class*="bg-light"],
.panel-body .alert {
    background-color: var(--ui-block-bg) !important;
}

/* Fix Recent News panel white background on hover and default */
.panel[menuitemname="Recent News"] {
    background-color: var(--ui-block-bg) !important;
}

.panel[menuitemname="Recent News"] .panel-heading {
    background-color: var(--panel-default-heading-bg) !important;
    color: var(--text-heading-color) !important;
}

.panel[menuitemname="Recent News"] .panel-body {
    background-color: var(--ui-block-bg) !important;
    color: var(--text-color) !important;
}

/* Override any content that might have white backgrounds */
.panel[menuitemname="Recent News"] .panel-body > *,
.panel[menuitemname="Recent News"] .panel-body > div,
.panel[menuitemname="Recent News"] .panel-body > a {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

.panel[menuitemname="Recent News"] a,
.panel[menuitemname="Recent News"] .list-group-item {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

.panel[menuitemname="Recent News"] a:hover,
.panel[menuitemname="Recent News"] .list-group-item:hover {
    background-color: var(--panel-hover-bg) !important;
    color: var(--text-color) !important;
}

/* Fix any news items that might render with white backgrounds */
.panel[menuitemname="Recent News"] .news-box,
.panel[menuitemname="Recent News"] .news-body,
.panel[menuitemname="Recent News"] .news-item {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

.panel[menuitemname="Recent News"] .news-box:hover {
    background-color: var(--panel-hover-bg) !important;
}

/* Fix Contacts panel white input background */
.panel[menuitemname="Contacts"] .form-control,
.panel[menuitemname="Contacts"] input[type="text"],
.panel[menuitemname="Contacts"] input[type="search"] {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border-color: var(--input-border) !important;
}

.panel[menuitemname="Contacts"] .form-control::placeholder {
    color: var(--gray) !important;
}

/* Ensure panel body text is visible - override any white backgrounds */
.panel-body {
    background-color: var(--ui-block-bg) !important;
    color: var(--text-color) !important;
}

.panel-body * {
    color: inherit !important;
}

.panel-body .text-light,
.panel-body .text-muted,
.panel-body .text-muted * {
    color: var(--text-color) !important;
    opacity: 0.8;
}

/* Force dark backgrounds on all panels */
.panel-default .panel-body,
.panel-default .list-group,
.panel-default .list-group-item {
    background-color: var(--ui-block-bg) !important;
    color: var(--text-color) !important;
}

.panel-default .list-group-item:hover {
    background-color: var(--panel-hover-bg) !important;
}

/* Fix no-data sections */
.no-data {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

.no-data .text-light {
    color: var(--text-color) !important;
    opacity: 0.7;
}

/* Discord Profile Card Styles */
.discord-profile-card {
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.discord-profile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(88, 101, 242, 0.4);
}

.discord-profile-card .discord-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
    flex-shrink: 0;
}

.discord-profile-card .discord-info {
    flex: 1;
    color: #ffffff;
}

.discord-profile-card .discord-username {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #ffffff;
}

.discord-profile-card .discord-status {
    font-size: 14px;
    opacity: 0.9;
    color: #ffffff;
    margin: 0;
}

.discord-profile-card-unlinked {
    background: var(--ui-block-bg);
    border: 2px dashed var(--panel-border-divider-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: var(--text-color);
}

.discord-profile-card-unlinked .default-avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 15px;
    border-radius: 50%;
    object-fit: cover;
}

.discord-profile-card-unlinked .default-text {
    color: var(--text-color);
    opacity: 0.7;
    margin: 0;
}

/* =========================
   Modern Profile Card (Client Details Sidebar)
   ========================= */
.panel-sidebar[menuitemname="Client Details"],
.panel[menuitemname="Client Details"] {
    background: linear-gradient(135deg, var(--ui-block-bg) 0%, #252840 100%) !important;
    border-radius: var(--gl-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden;
}

.panel-sidebar[menuitemname="Client Details"] .panel-heading,
.panel[menuitemname="Client Details"] .panel-heading {
    display: none; /* Hide default heading for cleaner look */
}

.panel-sidebar[menuitemname="Client Details"] .panel-body,
.panel[menuitemname="Client Details"] .panel-body {
    background: transparent !important;
    padding: var(--gl-space-lg) !important;
    text-align: center;
}

/* Modern Profile Avatar */
.client-avatar {
    position: relative;
    margin-bottom: var(--gl-space-md);
    display: inline-block;
}

.client-avatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(1, 149, 244, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all var(--gl-transition-base);
}

.client-avatar:hover img {
    border-color: var(--gl-accent-primary);
    box-shadow: 0 4px 24px rgba(1, 149, 244, 0.3);
}

.client-avatar-sm img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Client Info Styling */
.panel-sidebar[menuitemname="Client Details"] .panel-body strong,
.panel[menuitemname="Client Details"] .panel-body strong {
    display: block;
    font-size: var(--gl-text-lg) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: var(--gl-space-xs);
}

.panel-sidebar[menuitemname="Client Details"] .panel-body,
.panel[menuitemname="Client Details"] .panel-body {
    font-size: var(--gl-text-sm);
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.6;
}

/* Discord Link Display */
.discord-link-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gl-space-xs);
    background: rgba(88, 101, 242, 0.2);
    color: #5865F2;
    padding: 4px 12px;
    border-radius: var(--gl-radius-full);
    font-size: var(--gl-text-xs);
    font-weight: 500;
    margin-top: var(--gl-space-sm);
}

.discord-link-badge i {
    font-size: 14px;
}

/* Profile Footer Buttons */
.panel-sidebar[menuitemname="Client Details"] .panel-footer,
.panel[menuitemname="Client Details"] .panel-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: var(--gl-space-md) !important;
    display: flex;
    gap: var(--gl-space-sm);
}

.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn,
.panel[menuitemname="Client Details"] .panel-footer .btn {
    flex: 1;
    padding: 10px 16px;
    font-size: var(--gl-text-sm);
}

/* =========================
   Modern Sidebar Panels - Comprehensive Fix
   ========================= */
.panel-sidebar,
.panel[class*="panel-sidebar"] {
    background: var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: var(--gl-space-lg);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Panel Headings - All Sidebar Menus */
.panel-sidebar .panel-heading,
.panel[menuitemname="Billing"] .panel-heading,
.panel[menuitemname="Overview"] .panel-heading,
.panel[menuitemname="Actions"] .panel-heading,
.panel[menuitemname="Service Details Overview"] .panel-heading,
.panel[menuitemname="Service Details Actions"] .panel-heading,
.panel[menuitemname="My Services Actions"] .panel-heading {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 20px !important;
    margin: 0 !important;
}

/* Panel Title - Uppercase, Bold, White */
.panel-sidebar .panel-title,
.panel[menuitemname="Billing"] .panel-title,
.panel[menuitemname="Overview"] .panel-title,
.panel[menuitemname="Actions"] .panel-title,
.panel[menuitemname="Service Details Overview"] .panel-title,
.panel[menuitemname="Service Details Actions"] .panel-title,
.panel[menuitemname="My Services Actions"] .panel-title {
    font-size: var(--gl-text-sm) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-sidebar .panel-title i,
.panel[menuitemname="Billing"] .panel-title i,
.panel[menuitemname="Overview"] .panel-title i,
.panel[menuitemname="Actions"] .panel-title i {
    opacity: 0.8;
    font-size: 14px;
}

/* List Group - Background */
.panel-sidebar .list-group,
.panel[menuitemname="Billing"] .list-group,
.panel[menuitemname="Overview"] .list-group,
.panel[menuitemname="Actions"] .list-group,
.panel[menuitemname="Service Details Overview"] .list-group,
.panel[menuitemname="Service Details Actions"] .list-group,
.panel[menuitemname="My Services Actions"] .list-group {
    background: var(--ui-block-bg) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* List Group Items - Menu Links */
.panel-sidebar .list-group-item,
.panel[menuitemname="Billing"] .list-group-item,
.panel[menuitemname="Overview"] .list-group-item,
.panel[menuitemname="Actions"] .list-group-item,
.panel[menuitemname="Service Details Overview"] .list-group-item,
.panel[menuitemname="Service Details Actions"] .list-group-item,
.panel[menuitemname="My Services Actions"] .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 12px 20px !important;
    color: #ffffff !important;
    font-size: var(--gl-text-base) !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    text-decoration: none !important;
}

.panel-sidebar .list-group-item:last-child,
.panel[menuitemname="Billing"] .list-group-item:last-child,
.panel[menuitemname="Overview"] .list-group-item:last-child,
.panel[menuitemname="Actions"] .list-group-item:last-child {
    border-bottom: none !important;
}

/* List Group Item Icons - Positioned on the Right */
.panel-sidebar .list-group-item i,
.panel[menuitemname="Billing"] .list-group-item i,
.panel[menuitemname="Overview"] .list-group-item i,
.panel[menuitemname="Actions"] .list-group-item i,
.panel[menuitemname="Service Details Overview"] .list-group-item i,
.panel[menuitemname="Service Details Actions"] .list-group-item i {
    margin-right: 0 !important;
    margin-left: 12px !important;
    opacity: 0.7 !important;
    width: 18px !important;
    text-align: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    order: 2 !important; /* Move icon to the right */
}

/* Text content should be on the left */
.panel-sidebar .list-group-item > *:not(i):not(.badge),
.panel[menuitemname="Billing"] .list-group-item > *:not(i):not(.badge),
.panel[menuitemname="Overview"] .list-group-item > *:not(i):not(.badge),
.panel[menuitemname="Actions"] .list-group-item > *:not(i):not(.badge) {
    order: 1 !important; /* Keep text on the left */
    flex: 1 !important; /* Allow text to take available space */
}

.panel-sidebar .list-group-item .badge,
.panel[menuitemname="Billing"] .list-group-item .badge,
.panel[menuitemname="Overview"] .list-group-item .badge,
.panel[menuitemname="Actions"] .list-group-item .badge {
    order: 3 !important; /* Badge after icon */
    margin-left: 8px !important;
}

/* Hover State */
.panel-sidebar .list-group-item:hover,
.panel[menuitemname="Billing"] .list-group-item:hover,
.panel[menuitemname="Overview"] .list-group-item:hover,
.panel[menuitemname="Actions"] .list-group-item:hover,
.panel[menuitemname="Service Details Overview"] .list-group-item:hover,
.panel[menuitemname="Service Details Actions"] .list-group-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    padding-left: 17px !important; /* Reduced padding since border is on left */
    padding-right: 24px !important; /* Increase right padding on hover */
    border-left: 3px solid var(--brand-primary) !important;
}

.panel-sidebar .list-group-item:hover i,
.panel[menuitemname="Billing"] .list-group-item:hover i,
.panel[menuitemname="Overview"] .list-group-item:hover i,
.panel[menuitemname="Actions"] .list-group-item:hover i {
    opacity: 1 !important;
    color: var(--brand-primary) !important;
}

/* Active State */
.panel-sidebar .list-group-item.active,
.panel[menuitemname="Billing"] .list-group-item.active,
.panel[menuitemname="Overview"] .list-group-item.active,
.panel[menuitemname="Actions"] .list-group-item.active,
.panel[menuitemname="Service Details Overview"] .list-group-item.active,
.panel[menuitemname="Service Details Actions"] .list-group-item.active {
    background: rgba(1, 149, 244, 0.12) !important;
    border-left: 3px solid var(--brand-primary) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    padding-left: 17px !important;
    padding-right: 20px !important;
}

.panel-sidebar .list-group-item.active i,
.panel[menuitemname="Billing"] .list-group-item.active i,
.panel[menuitemname="Overview"] .list-group-item.active i,
.panel[menuitemname="Actions"] .list-group-item.active i {
    opacity: 1 !important;
    color: var(--brand-primary) !important;
}

/* Disabled State */
.panel-sidebar .list-group-item.disabled,
.panel[menuitemname="Billing"] .list-group-item.disabled,
.panel[menuitemname="Overview"] .list-group-item.disabled,
.panel[menuitemname="Actions"] .list-group-item.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Panel Body */
.panel-sidebar .panel-body,
.panel[menuitemname="Billing"] .panel-body,
.panel[menuitemname="Overview"] .panel-body,
.panel[menuitemname="Actions"] .panel-body {
    background: transparent !important;
    padding: 0 !important;
}

/* Ensure all text in sidebars is white */
.panel-sidebar,
.panel-sidebar *,
.panel[menuitemname="Billing"],
.panel[menuitemname="Billing"] *,
.panel[menuitemname="Overview"],
.panel[menuitemname="Overview"] *,
.panel[menuitemname="Actions"],
.panel[menuitemname="Actions"] * {
    color: #ffffff !important;
}

/* Override any brand-primary colors in sidebar items to white */
.panel-sidebar .list-group-item,
.panel[menuitemname="Billing"] .list-group-item,
.panel[menuitemname="Overview"] .list-group-item,
.panel[menuitemname="Actions"] .list-group-item {
    color: #ffffff !important;
}

/* =========================
   Pending Status Info Icon & Tooltip
   ========================= */
.status-badge-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.6);
    cursor: help;
    transition: all 0.2s ease;
    font-size: 14px;
}

.status-info-icon:hover {
    color: var(--brand-primary);
    transform: scale(1.1);
}

.status-info-icon i {
    font-size: 14px;
}

/* Tooltip styling for pending status */
.status-info-icon[data-toggle="tooltip"] {
    position: relative;
}

/* Bootstrap tooltip override for better visibility */
.tooltip {
    z-index: 9999;
}

.tooltip-inner {
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    max-width: 250px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Pending service label (no management button) */
.pending-deployment-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    width: 100%;
}

.pending-service-label-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pending-service-label {
    font-size: var(--gl-text-sm);
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    display: inline-block;
}

/* Question mark icon next to Pending Deployment text (and attention box) */
.pending-service-label-wrapper .status-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.5);
    cursor: help;
    transition: all 0.2s ease;
    font-size: 14px;
    vertical-align: middle;
}

.pending-service-label-wrapper .status-info-icon:hover {
    color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

.pending-service-label-wrapper .status-info-icon i {
    font-size: 14px;
}

/* Attention Needed box when Discord is not linked */
.attention-needed-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    cursor: pointer; /* Make it feel clickable */
}

.attention-needed-title {
    font-size: var(--gl-text-sm);
    font-weight: 600;
    color: #ffc107;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.attention-needed-subtitle {
    font-size: var(--gl-text-sm);
    color: rgba(255, 255, 255, 0.7);
}

/* Loading animation for pending deployment */
.pending-deployment-loader {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.pending-loader-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(139, 139, 212, 0.5) 35%,
        rgba(139, 139, 212, 0.8) 50%,
        rgba(139, 139, 212, 0.5) 65%,
        rgba(255, 255, 255, 0.1) 75%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-size: 200% 100%;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    animation: pending-deployment-gradient 2s linear infinite;
    box-shadow: 0 0 8px rgba(139, 139, 212, 0.3);
}

@keyframes pending-deployment-gradient {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* Ensure pending services are clickable and styled like active services */
.list-group-item[menuitemname^="service-pending-"] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.list-group-item[menuitemname^="service-pending-"]:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.list-group-item[menuitemname^="service-pending-"] .list-group-item-content {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.list-group-item[menuitemname^="service-pending-"] .list-group-item-name {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.list-group-item[menuitemname^="service-pending-"] .list-group-item-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.list-group-item[menuitemname^="service-pending-"] .list-group-item-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Additional fixes for secondary sidebar panels */
.panel[class*="sidebar"],
.panel[menuitemname*="Billing"],
.panel[menuitemname*="Overview"],
.panel[menuitemname*="Actions"],
.panel[menuitemname*="Service"],
.panel[menuitemname*="Details"] {
    background: var(--ui-block-bg) !important;
}

.panel[menuitemname*="Billing"] .panel-heading,
.panel[menuitemname*="Overview"] .panel-heading,
.panel[menuitemname*="Actions"] .panel-heading {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 20px !important;
}

.panel[menuitemname*="Billing"] .panel-title,
.panel[menuitemname*="Overview"] .panel-title,
.panel[menuitemname*="Actions"] .panel-title {
    font-size: var(--gl-text-sm) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
}

.panel[menuitemname*="Billing"] .list-group-item,
.panel[menuitemname*="Overview"] .list-group-item,
.panel[menuitemname*="Actions"] .list-group-item {
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.panel[menuitemname*="Billing"] .list-group-item:hover,
.panel[menuitemname*="Overview"] .list-group-item:hover,
.panel[menuitemname*="Actions"] .list-group-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-left: 3px solid var(--brand-primary) !important;
    padding-left: 17px !important;
    padding-right: 24px !important;
}

/* Fix icon alignment in all sidebar items - Icons on the right */
.panel-sidebar .list-group-item i.ls,
.panel-sidebar .list-group-item i.fa,
.panel-sidebar .list-group-item i.fas,
.panel-sidebar .list-group-item i.fab {
    display: inline-block;
    vertical-align: middle;
    order: 2 !important;
    margin-left: 12px !important;
    margin-right: 0 !important;
}

/* Ensure text wraps properly and icons stay on right */
.panel-sidebar .list-group-item {
    flex-wrap: nowrap !important;
}

.panel-sidebar .list-group-item > span:not(.badge),
.panel-sidebar .list-group-item > div {
    flex: 1 !important;
    order: 1 !important;
    text-align: left !important;
}

/* Ensure icons are visible and properly colored */
.panel-sidebar .list-group-item i,
.panel[menuitemname="Billing"] .list-group-item i,
.panel[menuitemname="Overview"] .list-group-item i,
.panel[menuitemname="Actions"] .list-group-item i {
    color: rgba(255, 255, 255, 0.7) !important;
}

.panel-sidebar .list-group-item.active i,
.panel-sidebar .list-group-item:hover i,
.panel[menuitemname="Billing"] .list-group-item.active i,
.panel[menuitemname="Billing"] .list-group-item:hover i,
.panel[menuitemname="Overview"] .list-group-item.active i,
.panel[menuitemname="Overview"] .list-group-item:hover i,
.panel[menuitemname="Actions"] .list-group-item.active i,
.panel[menuitemname="Actions"] .list-group-item:hover i {
    color: var(--brand-primary) !important;
}


/* =========================
   Support Tickets Modern Styling
   ========================= */
/* =========================
   Ticket List Page - Comprehensive Styling
   ========================= */
/* Ticket List Table Container */
.supportticketslist .table-container {
    background: transparent !important;
}

.supportticketslist .table-top {
    background: transparent !important;
    padding: var(--gl-space-md) 0 !important;
    margin-bottom: var(--gl-space-md) !important;
}

.supportticketslist .table-top label {
    color: #ffffff !important;
    font-weight: 500 !important;
    margin-right: var(--gl-space-md) !important;
}

/* Ticket List Improvements */
#tableTicketsList tbody tr,
.table-list tbody tr {
    cursor: pointer;
    transition: all var(--gl-transition-fast);
    background: transparent !important;
}

#tableTicketsList tbody tr:hover,
.table-list tbody tr:hover {
    background: rgba(1, 149, 244, 0.08) !important;
}

#tableTicketsList tbody td,
.table-list tbody td {
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#tableTicketsList thead th,
.table-list thead th {
    color: #ffffff !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    padding: 12px 16px !important;
}

/* Ticket ID Badge */
#tableTicketsList .text-primary,
.table-list .text-primary {
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
    font-size: var(--gl-text-base) !important;
}

/* Ticket Subject */
#tableTicketsList .small,
.table-list .small {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: var(--gl-text-sm) !important;
    display: block;
    margin-top: 4px;
}

/* Ticket status badges in list */
#tableTicketsList .status,
.table-list .status {
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: var(--gl-radius-full) !important;
}

/* Manage button in ticket list */
#tableTicketsList .btn-manage,
.table-list .btn-manage {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: var(--gl-radius-md) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

#tableTicketsList .btn-manage:hover,
.table-list .btn-manage:hover {
    background: #02a6ff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(1, 149, 244, 0.3) !important;
}

/* Dropdown filter for ticket status */
.supportticketslist .dropdown-toggle {
    background: var(--input-bg) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) !important;
}

.supportticketslist .dropdown-menu {
    background: #16182b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.supportticketslist .dropdown-menu li a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 8px 16px !important;
}

.supportticketslist .dropdown-menu li a:hover {
    background: rgba(1, 149, 244, 0.1) !important;
    color: #ffffff !important;
}

/* =========================
   View Ticket Page - Comprehensive Styling
   ========================= */
/* Ticket Reply Container */
.ticket-reply {
    background: var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: var(--gl-space-lg) !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.ticket-reply-top {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    padding: var(--gl-space-md) var(--gl-space-lg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex;
    align-items: center;
    gap: var(--gl-space-md);
}

.ticket-reply-message {
    padding: var(--gl-space-lg) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.7 !important;
    background: transparent !important;
}

/* User info in ticket replies */
.ticket-reply .user {
    flex: 1;
}

.ticket-reply .user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticket-reply .user-info .name {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: var(--gl-text-base) !important;
}

.ticket-reply .user-info .type {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: var(--gl-text-xs) !important;
}

.ticket-reply .user-info .type_name {
    text-transform: capitalize;
}

.ticket-reply .date {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: var(--gl-text-xs) !important;
    margin-top: var(--gl-space-xs);
}

/* Staff reply styling */
.ticket-reply.staff {
    border-left: 3px solid var(--brand-primary) !important;
}

.ticket-reply.staff .ticket-reply-top {
    background: linear-gradient(180deg, rgba(1, 149, 244, 0.08) 0%, rgba(1, 149, 244, 0.03) 100%) !important;
}

/* Client reply styling */
.ticket-reply:not(.staff) {
    border-left: 3px solid var(--gl-accent-success) !important;
}

/* Avatar in ticket replies */
.ticket-reply .client-avatar {
    flex-shrink: 0;
}

.ticket-reply .client-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Ticket reply attachments */
.ticket-reply-attachments {
    padding: var(--gl-space-md) var(--gl-space-lg) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.ticket-reply-attachments strong {
    color: #ffffff !important;
    font-size: var(--gl-text-sm) !important;
    display: block;
    margin-bottom: var(--gl-space-sm);
}

.ticket-reply-attachments ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ticket-reply-attachments li {
    margin-bottom: var(--gl-space-xs);
}

.ticket-reply-attachments a {
    color: var(--brand-primary) !important;
    display: flex;
    align-items: center;
    gap: var(--gl-space-sm);
    padding: 8px 12px;
    background: rgba(1, 149, 244, 0.1);
    border-radius: var(--gl-radius-sm);
    transition: all 0.2s ease;
}

.ticket-reply-attachments a:hover {
    background: rgba(1, 149, 244, 0.2);
    color: #02a6ff !important;
}

/* Rating stars */
.ticket-reply .rating {
    display: flex;
    gap: 4px;
    margin-top: var(--gl-space-md);
}

.ticket-reply .rating .star {
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.3);
    font-size: 20px;
    transition: all 0.2s ease;
}

.ticket-reply .rating .star:hover,
.ticket-reply .rating .star.active {
    color: #ffc107;
}

/* Markdown content styling */
.markdown-content {
    color: rgba(255, 255, 255, 0.9) !important;
}

.markdown-content p {
    margin-bottom: var(--gl-space-sm);
    color: rgba(255, 255, 255, 0.9) !important;
}

.markdown-content code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: #ff6b7a;
}

.markdown-content pre {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--gl-space-md);
    border-radius: var(--gl-radius-md);
    overflow-x: auto;
}

.markdown-content blockquote {
    border-left: 3px solid var(--brand-primary);
    padding-left: var(--gl-space-md);
    margin-left: 0;
    color: rgba(255, 255, 255, 0.7);
}

/* Ticket reply form panel */
.panel-ticket-reply .panel-heading {
    cursor: pointer;
    user-select: none;
}

.panel-ticket-reply .panel-heading:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
}

.panel-ticket-reply .collapse-icon {
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease;
}

.panel-ticket-reply.collapsed .collapse-icon i {
    transform: rotate(-90deg);
}

/* Fix alerts on ticket pages */
.supportticketsubmit-steptwo .alert,
.supportticketsubmit-stepone .alert,
.viewticket .alert {
    background: var(--ui-block-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--gl-radius-md) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: var(--gl-space-md) var(--gl-space-lg) !important;
    margin-bottom: var(--gl-space-lg) !important;
}

.alert-info,
.alert-lagom.alert-info {
    border-left: 3px solid var(--brand-primary) !important;
    background: rgba(1, 149, 244, 0.1) !important;
}

.alert-primary {
    border-left: 3px solid var(--brand-primary) !important;
}

.alert-danger,
.alert-error {
    border-left: 3px solid var(--gl-accent-danger) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

.alert-success {
    border-left: 3px solid var(--gl-accent-success) !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

.alert-warning {
    border-left: 3px solid var(--gl-accent-warning) !important;
    background: rgba(245, 158, 11, 0.1) !important;
}

/* Fix "no data" message on ticket pages */
.supportticketsubmit-stepone .message-no-data,
.supportticketslist .message-no-data {
    background: transparent !important;
    padding: var(--gl-space-xl) var(--gl-space-lg) !important;
    text-align: center;
}

.message-no-data .message-title {
    color: #ffffff !important;
    font-size: var(--gl-text-lg) !important;
    font-weight: 600 !important;
    margin-top: var(--gl-space-md) !important;
}

.message-no-data .message-action .btn {
    margin-top: var(--gl-space-lg) !important;
}

/* Fix captcha on ticket forms */
.login-captcha {
    background: var(--ui-block-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--gl-radius-md) !important;
    padding: var(--gl-space-md) !important;
    margin-bottom: var(--gl-space-lg) !important;
}

/* Fix knowledge base suggestions */
#autoAnswerSuggestions {
    background: var(--ui-block-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--gl-radius-lg) !important;
    padding: var(--gl-space-lg) !important;
    margin-top: var(--gl-space-lg) !important;
}

/* Ensure all ticket page containers have proper backgrounds */
.supportticketsubmit-stepone,
.supportticketsubmit-steptwo,
.supportticketsubmit-customfields,
.viewticket,
.supportticketslist {
    background: transparent !important;
}

/* Fix any remaining white backgrounds */
.supportticketsubmit-stepone *,
.supportticketsubmit-steptwo *,
.supportticketsubmit-customfields *,
.viewticket * {
    background-color: inherit !important;
}

.supportticketsubmit-stepone .panel,
.supportticketsubmit-steptwo .panel,
.supportticketsubmit-customfields .panel,
.viewticket .panel {
    background: var(--ui-block-bg) !important;
}

/* =========================
   Submit Ticket Form - Comprehensive Fixes
   ========================= */
/* Fix all sections and panels on ticket pages */
.supportticketsubmit-stepone .section,
.supportticketsubmit-steptwo .section,
.supportticketsubmit-customfields .section,
.viewticket .section {
    background: transparent !important;
    margin-bottom: var(--gl-space-lg);
}

.supportticketsubmit-stepone .section-body,
.supportticketsubmit-steptwo .section-body,
.supportticketsubmit-customfields .section-body {
    background: transparent !important;
    padding: var(--gl-space-md) 0;
}

/* Fix panel styling for ticket forms */
.panel-form,
.panel-ticket-reply {
    background: var(--ui-block-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--gl-radius-lg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: var(--gl-space-lg);
}

.panel-form .panel-body,
.panel-ticket-reply .panel-body {
    background: transparent !important;
    padding: var(--gl-space-lg) !important;
    color: var(--text-color) !important;
}

.panel-form .panel-heading,
.panel-ticket-reply .panel-heading {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 20px !important;
}

.panel-form .panel-title,
.panel-ticket-reply .panel-title {
    color: #ffffff !important;
    font-size: var(--gl-text-base) !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Fix form groups and inputs */
.supportticketsubmit-stepone .form-group,
.supportticketsubmit-steptwo .form-group,
.supportticketsubmit-customfields .form-group,
.panel-form .form-group,
.ticket-reply .form-group {
    margin-bottom: var(--gl-space-lg) !important;
}

.supportticketsubmit-stepone label,
.supportticketsubmit-steptwo label,
.supportticketsubmit-customfields label,
.panel-form label,
.ticket-reply label,
.form-group label {
    color: #ffffff !important;
    font-weight: 500 !important;
    margin-bottom: var(--gl-space-sm) !important;
    font-size: var(--gl-text-sm) !important;
}

/* Fix form controls (inputs, selects, textareas) */
.supportticketsubmit-stepone .form-control,
.supportticketsubmit-steptwo .form-control,
.supportticketsubmit-customfields .form-control,
.panel-form .form-control,
.ticket-reply .form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) !important;
    padding: 10px 14px !important;
    font-size: var(--gl-text-base) !important;
}

.supportticketsubmit-stepone .form-control:focus,
.supportticketsubmit-steptwo .form-control:focus,
.supportticketsubmit-customfields .form-control:focus,
.panel-form .form-control:focus,
.ticket-reply .form-control:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(1, 149, 244, 0.1) !important;
    outline: none !important;
}

.supportticketsubmit-stepone .form-control:disabled,
.supportticketsubmit-steptwo .form-control:disabled,
.panel-form .form-control:disabled {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed !important;
}

/* Fix textarea styling */
.supportticketsubmit-steptwo textarea.form-control,
.panel-form textarea.form-control,
.ticket-reply textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

/* Fix select dropdowns */
.supportticketsubmit-steptwo select.form-control,
.panel-form select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
    appearance: none !important;
}

/* =========================
   Submit Ticket Step One - Department Selection
   ========================= */
/* Fix section and section-body */
.submitticket .section,
body.submitticket .section,
.submitticket-stepone .section {
    background: transparent !important;
    margin-bottom: var(--gl-space-xl) !important;
}

.submitticket .section-body,
body.submitticket .section-body,
.submitticket-stepone .section-body {
    background: transparent !important;
    padding: var(--gl-space-md) 0 !important;
}

/* Fix section title */
.submitticket .section-title,
body.submitticket .section-title {
    color: #ffffff !important;
    font-size: var(--gl-text-xl) !important;
    font-weight: 600 !important;
    margin-bottom: var(--gl-space-lg) !important;
}

/* Fix list group container */
.submitticket .section-body .list-group,
body.submitticket .section-body .list-group,
.submitticket-stepone .list-group,
.supportticketsubmit-stepone .list-group {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix list group items - VERY SPECIFIC SELECTORS */
.submitticket .list-group-item.has-icon,
body.submitticket .list-group-item.has-icon,
.submitticket-stepone .list-group-item.has-icon,
.supportticketsubmit-stepone .list-group-item,
.supportticketsubmit-stepone .list-group-item.has-icon,
.section-body .list-group-item.has-icon {
    background: var(--ui-block-bg) !important;
    background-color: var(--ui-block-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--gl-radius-md) !important;
    margin-bottom: 12px !important;
    padding: 16px 20px !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.submitticket .list-group-item.has-icon:hover,
body.submitticket .list-group-item.has-icon:hover,
.submitticket-stepone .list-group-item.has-icon:hover,
.supportticketsubmit-stepone .list-group-item:hover,
.supportticketsubmit-stepone .list-group-item.has-icon:hover,
.section-body .list-group-item.has-icon:hover {
    background: rgba(1, 149, 244, 0.1) !important;
    background-color: rgba(1, 149, 244, 0.1) !important;
    border-color: rgba(1, 149, 244, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.2) !important;
    text-decoration: none !important;
    color: #ffffff !important;
}

/* Fix list group item icon */
.submitticket .list-group-item-icon,
body.submitticket .list-group-item-icon,
.supportticketsubmit-stepone .list-group-item-icon,
.list-group-item.has-icon .list-group-item-icon {
    color: var(--brand-primary) !important;
    font-size: 24px !important;
    width: 24px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix list group item body */
.submitticket .list-group-item-body,
body.submitticket .list-group-item-body,
.supportticketsubmit-stepone .list-group-item-body,
.list-group-item.has-icon .list-group-item-body {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Fix list group item heading */
.submitticket .list-group-item-heading,
body.submitticket .list-group-item-heading,
.supportticketsubmit-stepone .list-group-item-heading,
.list-group-item.has-icon .list-group-item-heading {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    margin-bottom: 6px !important;
    line-height: 1.4 !important;
}

/* Fix list group item text */
.submitticket .list-group-item-text,
body.submitticket .list-group-item-text,
.supportticketsubmit-stepone .list-group-item-text,
.list-group-item.has-icon .list-group-item-text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Fix labels inside list group items */
.submitticket .list-group-item .label,
.supportticketsubmit-stepone .list-group-item .label {
    margin-left: 8px !important;
}

/* =========================
   File Input / Attachment Styling - Complete Fix
   ========================= */
/* File input container - remove form-control styling and fix layout */
.file-input.form-control {
    background: var(--input-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 46px !important;
    height: auto !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}

/* Hide the default file input but make it cover the entire area */
.file-input input[type="file"],
.file-input.form-control input[type="file"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 2 !important;
}

/* File input button - properly styled on the left */
.file-input-button,
.file-input .file-input-button {
    background: var(--brand-primary) !important;
    background-color: var(--brand-primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: var(--gl-radius-md) 0 0 var(--gl-radius-md) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
    position: relative !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 120px !important;
    height: 100% !important;
}

.file-input-button:hover,
.file-input .file-input-button:hover {
    background: #02a6ff !important;
    background-color: #02a6ff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* File input text - displays file name or "no file selected" */
.file-input-text,
.file-input .file-input-text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    padding: 0 14px !important;
    flex: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 1 !important;
    position: relative !important;
    line-height: 46px !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
}

.file-input-text.text-light {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* When file is selected, update text color */
.file-input.has-file .file-input-text {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
}

/* Add More button styling */
.add-extra-attachement,
.btn-primary-faded.add-extra-attachement {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0077cc 100%) !important;
    background-color: var(--brand-primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: var(--gl-radius-md) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

.add-extra-attachement:hover,
.btn-primary-faded.add-extra-attachement:hover {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%) !important;
    background-color: #02a6ff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.3) !important;
    color: #ffffff !important;
}

.add-extra-attachement i,
.btn-primary-faded.add-extra-attachement i {
    font-size: 14px !important;
}

/* File uploads container for additional file inputs */
#fileUploadsContainer {
    margin-top: 12px !important;
}

#fileUploadsContainer .file-input {
    margin-bottom: 12px !important;
}

/* Ticket attachments message text */
.ticket-attachments-message {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    margin-top: 12px !important;
    line-height: 1.5 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .file-input.form-control {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px !important;
    }
    
    .file-input-button {
        border-radius: var(--gl-radius-md) !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    
    .file-input-text {
        text-align: center !important;
        padding: 8px 0 !important;
        line-height: 1.5 !important;
        min-height: auto !important;
    }
    
    .mob-m-t-2x {
        margin-top: 16px !important;
    }
}

/* Fix ticket attachments message */
.ticket-attachments-message {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: var(--gl-text-xs) !important;
    margin-top: var(--gl-space-sm) !important;
}

/* Fix form actions (buttons) */
.form-actions {
    margin-top: var(--gl-space-xl) !important;
    padding-top: var(--gl-space-lg) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex;
    gap: var(--gl-space-md);
}

.form-actions .btn {
    padding: 12px 24px !important;
    font-size: var(--gl-text-base) !important;
    font-weight: 600 !important;
    border-radius: var(--gl-radius-md) !important;
}

/* Fix section headers */
.section-header {
    margin-bottom: var(--gl-space-lg) !important;
}

.section-title {
    color: #ffffff !important;
    font-size: var(--gl-text-xl) !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Fix checkboxes and custom fields */
.checkbox label,
.radio label {
    color: #ffffff !important;
    font-weight: 400 !important;
}

.form-checkbox,
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-primary);
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

/* Fix help blocks */
.help-block {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: var(--gl-text-xs) !important;
    margin-top: var(--gl-space-xs) !important;
}

/* Fix custom fields panel */
.panel-form .input-group {
    display: flex;
    align-items: stretch;
}

.panel-form .input-group-addon {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 14px !important;
    border-radius: var(--gl-radius-md) 0 0 var(--gl-radius-md) !important;
}

.panel-form .input-group .form-control {
    border-left: none !important;
    border-radius: 0 var(--gl-radius-md) var(--gl-radius-md) 0 !important;
}

.panel-form .input-group .form-control:focus {
    border-left: 1px solid var(--brand-primary) !important;
}

/* Submit Ticket Form - Legacy class support */
.ticket-submit-form .form-group {
    margin-bottom: var(--gl-space-lg);
}

.ticket-submit-form label {
    font-weight: 500;
    margin-bottom: var(--gl-space-sm);
    color: #ffffff !important;
}

/* =========================
   Invoices Modern Styling
   ========================= */
/* Invoice List */
#tableInvoicesList tbody tr[data-url],
.invoice-row {
    cursor: pointer;
}

/* Invoice Status Pills */
.invoice-status-paid,
.status-paid {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--gl-accent-success) !important;
}

.invoice-status-unpaid,
.status-unpaid {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--gl-accent-warning) !important;
}

.invoice-status-overdue {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--gl-accent-danger) !important;
}

/* View Invoice Page */
.invoice-header {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    padding: var(--gl-space-xl);
    margin-bottom: var(--gl-space-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.invoice-amount {
    font-size: var(--gl-text-3xl);
    font-weight: 700;
    color: #ffffff;
}

.invoice-due-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--gl-text-sm);
}

/* =========================
   Affiliate Area Modern Styling
   ========================= */
/* Affiliate Stats Tiles */
.affiliates-stats .tile {
    position: relative;
}

.affiliates-stats .tile-stat {
    font-size: var(--gl-text-2xl);
}

/* Referral Link Box */
.search-box {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-lg);
    margin-bottom: var(--gl-space-lg);
}

.search-box .input-group {
    display: flex;
    align-items: stretch;
}

.search-box .input-group-addon {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--input-border-color);
    border-right: none;
    border-radius: var(--gl-radius-md) 0 0 var(--gl-radius-md);
    padding: 12px 20px;
    font-weight: 500;
    white-space: nowrap;
}

.search-box .form-control {
    border-radius: 0;
    flex: 1;
}

/* Copy Button for Referral Link */
.affiliate-copy-btn {
    background: var(--gl-accent-primary);
    color: #ffffff;
    border: none;
    border-radius: 0 var(--gl-radius-md) var(--gl-radius-md) 0;
    padding: 12px 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--gl-transition-fast);
    display: flex;
    align-items: center;
    gap: var(--gl-space-sm);
}

.affiliate-copy-btn:hover {
    background: #02a6ff;
}

.affiliate-copy-btn.copied {
    background: var(--gl-accent-success);
}

/* Affiliate Referrals Table */
#tableAffiliatesList {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    overflow: hidden;
}

/* =========================
   Section Headers
   ========================= */
.section {
    margin-bottom: var(--gl-space-xl);
}

.section-header {
    margin-bottom: var(--gl-space-lg);
}

.section-title {
    font-size: var(--gl-text-xl);
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.section-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--gl-text-sm);
    margin-top: var(--gl-space-xs);
}

/* =========================
   Empty States / No Data
   ========================= */
.message-no-data,
.no-data {
    text-align: center;
    padding: var(--gl-space-2xl) var(--gl-space-lg);
    color: rgba(255, 255, 255, 0.6);
}

.message-no-data .message-image,
.no-data .no-data-icon {
    margin-bottom: var(--gl-space-lg);
    opacity: 0.4;
}

.message-no-data .message-image svg,
.no-data .no-data-icon svg {
    width: 80px;
    height: 80px;
}

.message-no-data .message-title,
.no-data .text-light {
    font-size: var(--gl-text-md);
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: var(--gl-space-md);
}

.message-no-data .message-action,
.no-data a {
    margin-top: var(--gl-space-md);
}

/* =========================
   Alerts Modern Styling
   ========================= */
.alert {
    border-radius: var(--gl-radius-md);
    border: none;
    padding: var(--gl-space-md) var(--gl-space-lg);
    display: flex;
    align-items: center;
    gap: var(--gl-space-md);
}

.alert-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--gl-accent-success);
    border-left: 3px solid var(--gl-accent-success);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--gl-accent-warning);
    border-left: 3px solid var(--gl-accent-warning);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--gl-accent-danger);
    border-left: 3px solid var(--gl-accent-danger);
}

.alert-info {
    background: rgba(1, 149, 244, 0.15);
    color: var(--gl-accent-primary);
    border-left: 3px solid var(--gl-accent-primary);
}

/* =========================
   Checkboxes & Radios
   ========================= */
.checkbox-styled.checked, 
.icheckbox_square-blue.checked, 
.iradio_square-blue.checked, 
.radio-styled.checked {
    border-color: var(--gl-accent-primary) !important;
    background: var(--gl-accent-primary) !important;
}

/* =========================
   Dropdown Menus
   ========================= */
.dropdown-menu {
    background: var(--ui-block-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gl-radius-md);
    box-shadow: var(--gl-shadow-lg);
    padding: var(--gl-space-sm) 0;
}

.dropdown-menu li a,
.dropdown-menu .dropdown-item {
    padding: 10px var(--gl-space-md);
    color: var(--brand-primary);
    transition: all var(--gl-transition-fast);
}

.dropdown-menu li a:hover,
.dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

/* =========================
   Announcements/News
   ========================= */
.announcement-item,
.news-item {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-lg);
    margin-bottom: var(--gl-space-md);
    transition: all var(--gl-transition-base);
}

.announcement-item:hover,
.news-item:hover {
    border-color: rgba(1, 149, 244, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--gl-shadow-lg);
}

.announcement-title,
.news-title {
    font-size: var(--gl-text-lg);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: var(--gl-space-sm);
}

.announcement-date,
.news-date {
    font-size: var(--gl-text-xs);
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =========================
   Knowledgebase
   ========================= */
.kb-category {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-lg);
    transition: all var(--gl-transition-base);
}

.kb-category:hover {
    border-color: rgba(1, 149, 244, 0.2);
}

.kb-category-title {
    font-size: var(--gl-text-md);
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: var(--gl-space-sm);
}

.kb-article-list {
    margin-top: var(--gl-space-md);
}

.kb-article-item {
    padding: var(--gl-space-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

/* =========================
   Downloads
   ========================= */
.download-item {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-md);
    display: flex;
    align-items: center;
    gap: var(--gl-space-md);
    transition: all var(--gl-transition-fast);
}

.download-item:hover {
    background: var(--ui-block-bg-hover);
}

.download-icon {
    width: 48px;
    height: 48px;
    background: rgba(1, 149, 244, 0.15);
    border-radius: var(--gl-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gl-accent-primary);
    font-size: 20px;
}

/* =========================
   Banner/Search Inputs
   ========================= */
.banner-secondary .form-control,
.banner-secondary .input-group,
.search-box-secondary .form-control,
.search-box-secondary .input-group {
    background: #383b51 !important;
    color: var(--secondary-block-input-color);
    border-color: #27293c !important;
}

/* =========================
   User Profile Pages
   ========================= */
/* My Details / Account Details */
.profile-section {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-xl);
    margin-bottom: var(--gl-space-lg);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: var(--gl-space-lg);
    margin-bottom: var(--gl-space-xl);
    padding-bottom: var(--gl-space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-avatar-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid rgba(1, 149, 244, 0.3);
    object-fit: cover;
}

.profile-info h2 {
    font-size: var(--gl-text-2xl);
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 var(--gl-space-xs) 0;
}

.profile-info .email {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--gl-text-sm);
}

/* Form Sections */
.form-section {
    margin-bottom: var(--gl-space-xl);
}

.form-section-title {
    font-size: var(--gl-text-md);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: var(--gl-space-md);
    padding-bottom: var(--gl-space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================
   Security Settings
   ========================= */
.security-item {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-lg);
    margin-bottom: var(--gl-space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.security-item-info {
    flex: 1;
}

.security-item-title {
    font-weight: 600;
    color: #ffffff;
    margin-bottom: var(--gl-space-xs);
}

.security-item-desc {
    font-size: var(--gl-text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.security-item-status {
    display: flex;
    align-items: center;
    gap: var(--gl-space-sm);
}

.security-enabled {
    color: var(--gl-accent-success);
}

.security-disabled {
    color: rgba(255, 255, 255, 0.4);
}

/* =========================
   Quotes
   ========================= */
.quote-item {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-lg);
    margin-bottom: var(--gl-space-md);
    transition: all var(--gl-transition-fast);
}

.quote-item:hover {
    border-color: rgba(1, 149, 244, 0.2);
}

/* =========================
   Products/Services Page
   ========================= */
.service-item {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: all var(--gl-transition-base);
    margin-bottom: var(--gl-space-md);
}

.service-item:hover {
    border-color: rgba(1, 149, 244, 0.2);
    box-shadow: var(--gl-shadow-lg);
}

.service-header {
    padding: var(--gl-space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-name {
    font-size: var(--gl-text-md);
    font-weight: 600;
    color: #ffffff;
}

.service-body {
    padding: var(--gl-space-lg);
}

.service-detail {
    display: flex;
    justify-content: space-between;
    padding: var(--gl-space-sm) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.service-detail:last-child {
    border-bottom: none;
}

.service-detail-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--gl-text-sm);
}

.service-detail-value {
    color: #ffffff;
    font-weight: 500;
}

/* =========================
   Modals
   ========================= */
.modal-content {
    background: var(--ui-block-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gl-radius-lg);
    box-shadow: var(--gl-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-lg);
}

.modal-title {
    color: #ffffff;
    font-weight: 600;
}

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

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-md) var(--gl-space-lg);
    background: rgba(0, 0, 0, 0.15);
}

/* =========================
   Pagination
   ========================= */
.pagination {
    display: flex;
    gap: var(--gl-space-xs);
    justify-content: center;
    margin-top: var(--gl-space-lg);
}

.pagination li a,
.pagination li span {
    background: var(--ui-block-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gl-radius-sm);
    padding: 8px 14px;
    color: var(--brand-primary);
    transition: all var(--gl-transition-fast);
}

.pagination li a:hover {
    background: var(--ui-block-bg-hover);
    border-color: var(--gl-accent-primary);
    color: var(--gl-accent-primary);
}

.pagination li.active a,
.pagination li.active span {
    background: var(--gl-accent-primary);
    border-color: var(--gl-accent-primary);
    color: #ffffff;
}

/* =========================
   Breadcrumbs
   ========================= */
.breadcrumb {
    background: transparent;
    padding: var(--gl-space-md) 0;
    margin-bottom: var(--gl-space-lg);
}

.breadcrumb li {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--gl-text-sm);
}

.breadcrumb li a {
    color: var(--gl-accent-primary);
}

.breadcrumb li a:hover {
    color: #02a6ff;
}

.breadcrumb > li + li:before {
    color: rgba(255, 255, 255, 0.3);
}

/* =========================
   Tooltips
   ========================= */
.tooltip-inner {
    background: var(--ui-block-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gl-radius-sm);
    padding: 8px 12px;
    font-size: var(--gl-text-sm);
    box-shadow: var(--gl-shadow-md);
}

/* =========================
   Loading States
   ========================= */
.loader,
.spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gl-space-xl);
}

.loading-overlay {
    background: rgba(28, 30, 47, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* =========================
   Search Results
   ========================= */
.search-result-item {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--gl-space-md);
    margin-bottom: var(--gl-space-sm);
    transition: all var(--gl-transition-fast);
}

.search-result-item:hover {
    background: var(--ui-block-bg-hover);
}

/* =========================
   Flash Messages
   ========================= */
.flash-message {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-md);
    padding: var(--gl-space-md) var(--gl-space-lg);
    margin-bottom: var(--gl-space-lg);
    display: flex;
    align-items: center;
    gap: var(--gl-space-md);
    border-left: 3px solid var(--gl-accent-primary);
}

/* =========================
   Navbar & Top Navigation
   ========================= */
.navbar,
.top-nav {
    background-color: var(--app-nav-top-bg);
}

/* Adjust any text or icon colors in the top navigation */
.navbar a,
.top-nav a {
    color: var(--brand-info); /* Ensure the text is white */
}

/* =========================
   Blocks
   ========================= */
.ui-block {
    background-color: var(--ui-block-bg);
}

/* =========================
   Form Controls
   ========================= */
.form-control,
input[type=password]:not(.form-control),
input[type=text]:not(.form-control),
select:not(.form-control) {
    display: block;
    width: 100%;
    height: var(--ui-height-base);
    padding: var(--ui-padding-base-v) var(--ui-padding-base-h);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);

    color: var(--input-color);           /* Updated text color */
    background-color: var(--input-bg);   /* Updated background color */
    background-clip: padding-box;
    border: var(--input-border);         /* Updated border */
    border-radius: var(--input-border-radius);

    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base);
}

/* Example use of the brand-info color */
.brand-info {
    color: var(--brand-info);
}

/* =========================
   Dropdown Search Boxes
   ========================= */
.dropdown-language-search,
.dropdown-menu-search {
    width: 250px;
    max-height: 290px;
    padding: 0;
    overflow: hidden;
    background-color: var(--ui-block-bg-form); /* Dark background color for dropdown */
}

.has-scroll.dropdown-menu {
    background: #202237 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* =========================
   Christmas Effects
   ========================= */

/* General Styles */
.christmas-effect {
    pointer-events: none;
    user-select: none;
    position: absolute;
}

/* Snowflake container */
.snowflake-container {
    position: fixed;
    top: -50px; /* Start above the viewport */
    left: 0;
    width: 100%;
    overflow: visible;
    z-index: 9998; /* Keep snowflakes above most elements */
}

/* Snowflake style */
.snowflake {
    color: var(--snowflake-color);
    font-family: Arial, sans-serif;
    position: absolute;
    top: 0;
}

/* Present icon style */
.present-icon {
    font-size: 50px;              /* Adjust size as needed */
    color: var(--present-color);  /* Gold color for the present */
    cursor: pointer;              /* Make the cursor a pointer when hovering over the present */
    pointer-events: auto;         /* Enable clicking on the present */
    position: absolute;           /* Ensure the present moves correctly */
    z-index: 10001;               /* Ensure present is above trail and other elements */
}

/* Pop-up Modal Styles */
#discount-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 10000; /* Above other elements */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay-bg-color); /* Dark background with opacity */
    animation: fadeIn 0.5s;
}

#discount-modal-content {
    background-color: var(--modal-bg-color); /* Updated color */
    border-radius: 10px;
    margin: 10% auto; /* Centered */
    padding: 30px;
    width: 80%;
    max-width: 400px; /* Max width */
    text-align: center;
    position: relative;
    color: var(--modal-text-color); /* Text color */
    animation: popUp 0.5s ease-out; /* Pop-up animation */
}

#discount-modal-content h2 {
    margin-bottom: 20px;
}

#discount-modal-content p {
    font-size: 18px;
}

#discount-modal-content .code {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
    color: var(--discount-code-color);
}

#discount-modal-content button {
    margin: 10px;
    padding: 12px 25px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
}

#discount-modal-content .copy-button {
    background-color: var(--copy-button-bg-color);
    color: var(--modal-text-color);
    position: relative; /* For positioning explosion effect */
    overflow: hidden;   /* Hide overflow of explosion */
}

#discount-modal-content .close-button {
    background-color: var(--close-button-bg-color);
    color: var(--modal-text-color);
}

/* Copy Notification */
.copy-notification {
    margin-top: 10px;
    background-color: var(--copy-notification-bg-color);
    color: var(--modal-text-color);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Explosion Effect */
.explosion {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--explosion-gradient);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;
    animation: explode 0.6s ease-out;
    z-index: 10002; /* Ensure explosion is above present */
}

@keyframes explode {
    0%   { width: 0;   height: 0;   opacity: 1; }
    100% { width: 300px; height: 300px; opacity: 0; }
}

/* Snow Trail Effect */
.present-trail {
    position: absolute;
    font-size: 14px;
    opacity: 1;
    pointer-events: none;
    animation: trail-fade 1s linear forwards;
    z-index: 10000; /* Ensure trail is above images but below present */
}

@keyframes trail-fade {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes popUp {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* Snowflakes falling */
@keyframes fall {
    0%   { transform: translateY(0);     opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0.5; }
}

/* Snowflakes swinging */
@keyframes sway {
    0%   { transform: translateX(0);     }
    50%  { transform: translateX(50px);  }
    100% { transform: translateX(0);     }
}

/* Prevent horizontal scrollbar due to animations */
body, html {
    overflow-x: hidden;
}

/* =========================
   Background Image Overlay for Client Area
   ========================= */
/* Add subtle blended background image to client area pages */
body.lagom .main-body,
body.lagom .app-main {
    position: relative;
}

body.lagom .main-body::before,
body.lagom .app-main::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://gigalinked.com/assets/images/wallpapers/GL-Wallpaper.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.25; /* Increased opacity for better visibility while maintaining blend */
    z-index: 0;
    pointer-events: none; /* Don't interfere with interactions */
}

/* Ensure content is above the background */
body.lagom .main-body > *,
body.lagom .app-main > * {
    position: relative;
    z-index: 1;
}

/* Ensure panels and cards have proper backgrounds with slight transparency for blend */
body.lagom .panel,
body.lagom .ui-block,
body.lagom .card {
    background-color: rgba(28, 30, 47, 0.98) !important; /* Slight transparency to allow subtle background show through */
    backdrop-filter: blur(1px);
}

/* Additional CSS to ensure all dashboard elements have dark backgrounds */
.client-home-panels .panel-body,
.client-home-panels .panel-body > div,
.client-home-panels .panel-body > *:not(input):not(select):not(textarea):not(button) {
    background-color: transparent !important;
}

.client-home-panels .panel-body input,
.client-home-panels .panel-body select,
.client-home-panels .panel-body textarea {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
}

/* Comprehensive fix for any white backgrounds - catch all */
.panel-body [style*="background"]:not([style*="transparent"]):not([style*="rgba"]):not([style*="gradient"]),
.panel-body [style*="background-color: white"],
.panel-body [style*="background-color:#fff"],
.panel-body [style*="background-color:#ffffff"],
.panel-body [style*="background: white"],
.panel-body [style*="background:#fff"],
.panel-body [style*="background:#ffffff"],
.panel-body .bg-white,
.panel-body [class*="bg-white"] {
    background-color: transparent !important;
}

/* Force dark backgrounds on all panel content */
.panel-default .panel-body,
.panel-default .panel-body > * {
    background-color: var(--ui-block-bg) !important;
}

/* =========================
   Blocky Background Effect for Active Products/Services & Recent Support Tickets
   ========================= */
/* Apply the same blocky color background effect from Contacts/Shortcuts sidebar to these panels */
/* The blocky effect comes from .panel-sidebar .list-group which uses --panel-sidebar-list-group-bg */
/* Note: --panel-sidebar-list-group-bg equals var(--ui-block-bg) which is #1c1e2f */
.panel[menuitemname="Active Products/Services"] .panel-body,
.panel[menuitemname="Recent Support Tickets"] .panel-body {
    background-color: var(--panel-sidebar-list-group-bg, var(--ui-block-bg)) !important;
    /* Match the exact blocky background color from sidebar list groups */
    /* This creates the same textured/blocky appearance as Contacts/Shortcuts */
    /* Using !important to override the general .panel-default .panel-body rule above */
}

/* Ensure the no-data sections are transparent to show the panel-body background */
.panel[menuitemname="Active Products/Services"] .no-data,
.panel[menuitemname="Recent Support Tickets"] .no-data {
    background-color: transparent !important;
}

/* Ensure all content within these panels maintains transparent background */
.panel[menuitemname="Active Products/Services"] .panel-body > *,
.panel[menuitemname="Recent Support Tickets"] .panel-body > *,
.panel[menuitemname="Active Products/Services"] .list-group,
.panel[menuitemname="Recent Support Tickets"] .list-group {
    background-color: transparent !important;
}

/* Keep list items transparent but ensure hover states work */
.panel[menuitemname="Active Products/Services"] .list-group-item,
.panel[menuitemname="Recent Support Tickets"] .list-group-item {
    background-color: transparent !important;
    border-color: transparent !important;
}

.panel[menuitemname="Active Products/Services"] .list-group-item:hover,
.panel[menuitemname="Recent Support Tickets"] .list-group-item:hover {
    background-color: var(--panel-hover-bg) !important;
}

/* =========================
   Remove White Borders (#dee2e6) from Dashboard Panels
   ========================= */
/* Remove white/light gray borders from Active Products/Services panel */
.panel[menuitemname="Active Products/Services"],
.panel[menuitemname="Active Products/Services"] * {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.panel[menuitemname="Active Products/Services"] .panel-body,
.panel[menuitemname="Active Products/Services"] .list-group,
.panel[menuitemname="Active Products/Services"] .list-group-item {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.panel[menuitemname="Active Products/Services"] .list-group-item:last-child {
    border-bottom: none !important;
}

/* Remove white/light gray borders from Recent Support Tickets panel */
.panel[menuitemname="Recent Support Tickets"],
.panel[menuitemname="Recent Support Tickets"] * {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.panel[menuitemname="Recent Support Tickets"] .panel-body,
.panel[menuitemname="Recent Support Tickets"] .list-group,
.panel[menuitemname="Recent Support Tickets"] .list-group-item {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.panel[menuitemname="Recent Support Tickets"] .list-group-item:last-child {
    border-bottom: none !important;
}

/* Remove white/light gray borders from Social Link Media panel */
.panel[menuitemname*="Social"],
.panel[menuitemname*="Link Social"],
.panel[menuitemname*="Linked Social"],
.panel[menuitemname*="Social"] *,
.panel[menuitemname*="Link Social"] *,
.panel[menuitemname*="Linked Social"] * {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.panel[menuitemname*="Social"] .panel-body,
.panel[menuitemname*="Link Social"] .panel-body,
.panel[menuitemname*="Linked Social"] .panel-body {
    border: none !important;
}

/* Force override any #dee2e6 borders */
[style*="#dee2e6"],
[style*="dee2e6"],
[style*="border-color: #dee2e6"],
[style*="border: 1px solid #dee2e6"] {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Remove white borders (#dee2e6) from dashboard panels - COMPREHENSIVE OVERRIDE */
.panel[menuitemname="Active Products/Services"],
.panel[menuitemname="Recent Support Tickets"],
.panel[menuitemname*="Social"],
.panel[menuitemname*="Link Social"],
.panel[menuitemname*="Linked Social"] {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.panel[menuitemname="Active Products/Services"] .panel-body,
.panel[menuitemname="Recent Support Tickets"] .panel-body,
.panel[menuitemname*="Social"] .panel-body,
.panel[menuitemname*="Link Social"] .panel-body,
.panel[menuitemname*="Linked Social"] .panel-body {
    border: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
}

.panel[menuitemname="Active Products/Services"] .list-group,
.panel[menuitemname="Recent Support Tickets"] .list-group,
.panel[menuitemname*="Social"] .list-group,
.panel[menuitemname*="Link Social"] .list-group,
.panel[menuitemname*="Linked Social"] .list-group {
    border: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
}

.panel[menuitemname="Active Products/Services"] .list-group-item,
.panel[menuitemname="Recent Support Tickets"] .list-group-item,
.panel[menuitemname*="Social"] .list-group-item,
.panel[menuitemname*="Link Social"] .list-group-item,
.panel[menuitemname*="Linked Social"] .list-group-item {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-color: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

.panel[menuitemname="Active Products/Services"] .list-group-item:last-child,
.panel[menuitemname="Recent Support Tickets"] .list-group-item:last-child,
.panel[menuitemname*="Social"] .list-group-item:last-child,
.panel[menuitemname*="Link Social"] .list-group-item:last-child,
.panel[menuitemname*="Linked Social"] .list-group-item:last-child {
    border-bottom: none !important;
    border: none !important;
}

.panel-default .panel-body input[type="text"],
.panel-default .panel-body input[type="search"],
.panel-default .panel-body .form-control {
    background-color: var(--input-bg) !important;
}

/* =========================
   FINAL OVERRIDE - Remove ALL white borders (#dee2e6) from Dashboard Panels
   ========================= */
/* Target ALL elements within these panels to remove white borders */
.panel[menuitemname="Active Products/Services"] *,
.panel[menuitemname="Recent Support Tickets"] *,
.panel[menuitemname*="Social"] *,
.panel[menuitemname*="Link Social"] *,
.panel[menuitemname*="Linked Social"] * {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Remove borders from panel containers themselves */
.panel[menuitemname="Active Products/Services"],
.panel[menuitemname="Recent Support Tickets"],
.panel[menuitemname*="Social"],
.panel[menuitemname*="Link Social"],
.panel[menuitemname*="Linked Social"] {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Remove ALL borders from panel bodies and list groups */
.panel[menuitemname="Active Products/Services"] .panel-body,
.panel[menuitemname="Recent Support Tickets"] .panel-body,
.panel[menuitemname*="Social"] .panel-body,
.panel[menuitemname*="Link Social"] .panel-body,
.panel[menuitemname*="Linked Social"] .panel-body,
.panel[menuitemname="Active Products/Services"] .list-group,
.panel[menuitemname="Recent Support Tickets"] .list-group,
.panel[menuitemname*="Social"] .list-group,
.panel[menuitemname*="Link Social"] .list-group,
.panel[menuitemname*="Linked Social"] .list-group {
    border: none !important;
    border-width: 0 !important;
}

/* Only keep subtle bottom borders on list items for separation */
.panel[menuitemname="Active Products/Services"] .list-group-item,
.panel[menuitemname="Recent Support Tickets"] .list-group-item,
.panel[menuitemname*="Social"] .list-group-item,
.panel[menuitemname*="Link Social"] .list-group-item,
.panel[menuitemname*="Linked Social"] .list-group-item {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* =========================
   Dropdown (General)
   ========================= */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--zindex-dropdown);
    float: left;
    min-width: var(--dropdown-min-width);
    padding: var(--nav-divider-margin-y) 0;
    margin: 0;
    list-style: none;
    font-size: var(--font-size-base);
    text-align: left;

    background: #16182b !important;
    border: var(--dropdown-border);
    border-radius: var(--dropdown-border-radius);
    box-shadow: var(--dropdown-box-shadow);
    background-clip: padding-box;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    transition: var(--show-animation);
}

/* =========================
   FINAL COMPREHENSIVE FIXES
   ========================= */

/* Fix ALL white backgrounds across the site */
.panel,
.panel-default,
.panel-body,
.panel-sidebar,
.list-group,
.list-group-item,
.table-container,
.section,
.ui-block,
.card {
    background-color: var(--ui-block-bg) !important;
}

/* Ensure transparent inner elements */
.panel-body > *:not(input):not(select):not(textarea):not(button):not(.btn),
.list-group-item > *,
.no-data,
.no-data * {
    background-color: transparent !important;
}

/* Fix hover states */
.list-group-item:hover,
.table tbody tr:hover,
.tile:hover {
    background-color: var(--ui-block-bg-hover) !important;
}

/* Text color fixes */
.panel-body,
.panel-body *,
.list-group-item,
.text-muted,
.text-light,
.small,
td,
th {
    color: var(--brand-primary) !important;
}

/* Headings should be white */
h1, h2, h3, h4, h5, h6,
.panel-title,
.section-title,
strong {
    color: #ffffff !important;
}

/* Link colors */
a:not(.btn) {
    color: var(--gl-accent-primary);
    transition: color var(--gl-transition-fast);
}

a:not(.btn):hover {
    color: #02a6ff;
}

/* Form inputs background fix */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select,
.form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border-color: var(--input-border-color) !important;
}

/* Button text colors */
.btn {
    color: #ffffff !important;
}

.btn-outline,
.btn-default,
.btn-secondary {
    color: var(--brand-primary) !important;
}

.btn-outline:hover,
.btn-default:hover,
.btn-secondary:hover {
    color: #ffffff !important;
}

/* Status colors - ensure visibility */
.status,
.badge,
.label {
    font-weight: 600 !important;
}

/* Fix affiliate referral box */
.affiliate-referral-box {
    background: var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg);
    padding: var(--gl-space-lg);
}

.affiliate-referral-box .input-group {
    display: flex;
    flex-wrap: nowrap;
}

.affiliate-referral-box .form-control {
    border-radius: 0 !important;
}

.affiliate-referral-box .input-group-addon {
    border-radius: var(--gl-radius-md) 0 0 var(--gl-radius-md) !important;
}

/* Profile card modern styling */
.profile-card-modern {
    text-align: center;
    margin-bottom: var(--gl-space-md);
}

/* =========================
   View Ticket Page - Ticket Information & CC Recipients
   ========================= */
/* Ticket Information Panel */
.panel-ticket-information,
.panel[menuitemname="Ticket Information"] {
    background: var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: var(--gl-space-lg) !important;
}

.panel-ticket-information .panel-heading,
.panel[menuitemname="Ticket Information"] .panel-heading {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 20px !important;
}

.panel-ticket-information .panel-title,
.panel[menuitemname="Ticket Information"] .panel-title {
    color: #ffffff !important;
    font-size: var(--gl-text-sm) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
}

.panel-ticket-information .panel-body,
.panel[menuitemname="Ticket Information"] .panel-body {
    background: transparent !important;
    padding: 0 !important;
}

/* =========================
   Ticket Information - Two-Column Table Layout with Icons
   ========================= */
.panel-ticket-information .list-group-item,
.panel[menuitemname="Ticket Information"] .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 10px 16px !important;
    display: grid !important;
    grid-template-columns: 20px 1fr 1.2fr !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 40px !important;
    position: relative !important;
}

.panel-ticket-information .list-group-item:last-child,
.panel[menuitemname="Ticket Information"] .list-group-item:last-child {
    border-bottom: none !important;
}

/* Remove question mark tooltips completely */
.panel-ticket-information .list-group-item::after,
.panel[menuitemname="Ticket Information"] .list-group-item::after {
    display: none !important;
    content: none !important;
}

/* Icon on far left (::before) */
.panel-ticket-information .list-group-item::before,
.panel[menuitemname="Ticket Information"] .list-group-item::before {
    grid-column: 1 !important;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 14px;
    color: var(--brand-primary);
    opacity: 0.85;
    flex-shrink: 0;
}

/* Requestor - User icon */
.panel-ticket-information .list-group-item[menuitemname*="Requestor"]::before,
.panel[menuitemname="Ticket Information"] .list-group-item[menuitemname*="Requestor"]::before {
    content: '\f007'; /* fa-user */
}

/* Department - Building icon */
.panel-ticket-information .list-group-item[menuitemname*="Department"]::before,
.panel[menuitemname="Ticket Information"] .list-group-item[menuitemname*="Department"]::before {
    content: '\f1ad'; /* fa-building */
}

/* Submitted/Date Opened - Calendar icon */
.panel-ticket-information .list-group-item[menuitemname*="Submitted"]::before,
.panel[menuitemname="Ticket Information"] .list-group-item[menuitemname*="Submitted"]::before,
.panel-ticket-information .list-group-item[menuitemname*="Created"]::before,
.panel-ticket-information .list-group-item[menuitemname*="Date Opened"]::before {
    content: '\f073'; /* fa-calendar */
}

/* Last Updated - Clock icon */
.panel-ticket-information .list-group-item[menuitemname*="Updated"]::before,
.panel-ticket-information .list-group-item[menuitemname*="Last"]::before,
.panel[menuitemname="Ticket Information"] .list-group-item[menuitemname*="Updated"]::before {
    content: '\f017'; /* fa-clock */
}

/* Priority - Flag icon */
.panel-ticket-information .list-group-item[menuitemname*="Priority"]::before,
.panel[menuitemname="Ticket Information"] .list-group-item[menuitemname*="Priority"]::before {
    content: '\f024'; /* fa-flag */
}

/* Status/Ticket Status - Check circle icon for Open, times circle for Closed */
.panel-ticket-information .list-group-item[menuitemname*="Status"]::before,
.panel[menuitemname="Ticket Information"] .list-group-item[menuitemname*="Status"]::before {
    content: '\f058'; /* fa-check-circle */
}

/* Subject - Tag icon */
.panel-ticket-information .list-group-item[menuitemname*="Subject"]::before,
.panel[menuitemname="Ticket Information"] .list-group-item[menuitemname*="Subject"]::before {
    content: '\f02b'; /* fa-tag */
}

/* Label column (left, column 2) - uppercase labels - SMALLER FONT */
.panel-ticket-information .list-group-item .ticket-label,
.panel[menuitemname="Ticket Information"] .list-group-item .ticket-label {
    grid-column: 2 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
}

/* Value column (right, column 3) - LARGER FONT */
.panel-ticket-information .list-group-item .ticket-value,
.panel[menuitemname="Ticket Information"] .list-group-item .ticket-value {
    grid-column: 3 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    word-wrap: break-word !important;
    display: block !important;
    line-height: 1.5 !important;
}

/* Status value styling - capitalize properly */
.panel-ticket-information .list-group-item[menuitemname*="Status"] .ticket-value,
.panel[menuitemname="Ticket Information"] .list-group-item[menuitemname*="Status"] .ticket-value {
    text-transform: capitalize !important;
    font-weight: 500 !important;
}

/* Value column fallback - any direct children that aren't labels, badges, etc */
.panel-ticket-information .list-group-item > *:not(.ticket-label):not(.pull-right):not(.badge):not(.label):not(.status):not(i):not(.ticket-value),
.panel[menuitemname="Ticket Information"] .list-group-item > *:not(.ticket-label):not(.pull-right):not(.badge):not(.label):not(.status):not(i):not(.ticket-value) {
    grid-column: 3 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    word-wrap: break-word !important;
}

/* Hide redundant labels and badges */
.panel-ticket-information .list-group-item .pull-right,
.panel[menuitemname="Ticket Information"] .list-group-item .pull-right,
.panel-ticket-information .list-group-item .badge,
.panel[menuitemname="Ticket Information"] .list-group-item .badge {
    display: none !important;
}

/* Status badge styling - inline within ticket-value */
.panel-ticket-information .list-group-item .ticket-value .status,
.panel[menuitemname="Ticket Information"] .list-group-item .ticket-value .status,
.panel-ticket-information .list-group-item .status,
.panel[menuitemname="Ticket Information"] .list-group-item .status {
    display: inline-flex !important;
    background: rgba(1, 149, 244, 0.2) !important;
    color: var(--brand-primary) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    width: fit-content !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

/* Existing icons in items - style them and position in column 1 */
.panel-ticket-information .list-group-item i,
.panel[menuitemname="Ticket Information"] .list-group-item i {
    grid-column: 1 !important;
    color: var(--brand-primary) !important;
    opacity: 0.85 !important;
    width: 18px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide ::before if item already has an icon */
.panel-ticket-information .list-group-item:has(> i:first-child)::before,
.panel[menuitemname="Ticket Information"] .list-group-item:has(> i:first-child)::before {
    display: none !important;
}

/* Label styling moved to main Ticket Information section above */

/* Ticket Information Footer (Reply/Close buttons) */
.panel-ticket-information .panel-footer,
.panel[menuitemname="Ticket Information"] .panel-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 20px !important;
    display: flex !important;
    gap: 10px !important;
}

.panel-ticket-information .panel-footer .btn,
.panel[menuitemname="Ticket Information"] .panel-footer .btn {
    flex: 1 !important;
    padding: 10px 16px !important;
    font-size: var(--gl-text-sm) !important;
    font-weight: 500 !important;
    border-radius: var(--gl-radius-md) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Reply button - Custom color #163656 - AGGRESSIVE OVERRIDE */
.panel-ticket-information .panel-footer .btn:first-child,
.panel-ticket-information .panel-footer .btn-primary,
.panel-ticket-information .panel-footer a.btn:first-child,
.panel[menuitemname="Ticket Information"] .panel-footer .btn:first-child,
.panel[menuitemname="Ticket Information"] .panel-footer .btn-primary,
.panel[menuitemname="Ticket Information"] .panel-footer a.btn:first-child {
    background: #163656 !important;
    background-color: #163656 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-color: #163656 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.panel-ticket-information .panel-footer .btn:first-child:hover,
.panel-ticket-information .panel-footer .btn:first-child:focus,
.panel-ticket-information .panel-footer .btn:first-child:active,
.panel-ticket-information .panel-footer .btn-primary:hover,
.panel-ticket-information .panel-footer .btn-primary:focus,
.panel-ticket-information .panel-footer .btn-primary:active,
.panel-ticket-information .panel-footer a.btn:first-child:hover,
.panel[menuitemname="Ticket Information"] .panel-footer .btn:first-child:hover,
.panel[menuitemname="Ticket Information"] .panel-footer .btn:first-child:focus,
.panel[menuitemname="Ticket Information"] .panel-footer .btn:first-child:active,
.panel[menuitemname="Ticket Information"] .panel-footer .btn-primary:hover,
.panel[menuitemname="Ticket Information"] .panel-footer .btn-primary:focus,
.panel[menuitemname="Ticket Information"] .panel-footer .btn-primary:active,
.panel[menuitemname="Ticket Information"] .panel-footer a.btn:first-child:hover {
    background: #1e4a7a !important;
    background-color: #1e4a7a !important;
    background-image: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(22, 54, 86, 0.4) !important;
    color: #ffffff !important;
    border: none !important;
    border-color: #1e4a7a !important;
}

/* Close button - Clean secondary style, no red glows */
.panel-ticket-information .panel-footer .btn-default,
.panel-ticket-information .panel-footer .btn-danger,
.panel-ticket-information .panel-footer .btn[href*="close"],
.panel-ticket-information .panel-footer .btn[value*="Close"],
.panel[menuitemname="Ticket Information"] .panel-footer .btn-default,
.panel[menuitemname="Ticket Information"] .panel-footer .btn-danger,
.panel[menuitemname="Ticket Information"] .panel-footer .btn[href*="close"],
.panel[menuitemname="Ticket Information"] .panel-footer .btn[value*="Close"] {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.panel-ticket-information .panel-footer .btn-default:hover,
.panel-ticket-information .panel-footer .btn-danger:hover,
.panel-ticket-information .panel-footer .btn[href*="close"]:hover,
.panel-ticket-information .panel-footer .btn[value*="Close"]:hover,
.panel[menuitemname="Ticket Information"] .panel-footer .btn-default:hover,
.panel[menuitemname="Ticket Information"] .panel-footer .btn-danger:hover,
.panel[menuitemname="Ticket Information"] .panel-footer .btn[href*="close"]:hover,
.panel[menuitemname="Ticket Information"] .panel-footer .btn[value*="Close"]:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* CC Recipients Panel */
.panel-ticket-cc,
.panel[menuitemname="CC Recipients"] {
    background: var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: var(--gl-space-lg) !important;
}

.panel-ticket-cc .panel-heading,
.panel[menuitemname="CC Recipients"] .panel-heading {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 20px !important;
}

.panel-ticket-cc .panel-title,
.panel[menuitemname="CC Recipients"] .panel-title {
    color: #ffffff !important;
    font-size: var(--gl-text-sm) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
}

.panel-ticket-cc .panel-body,
.panel[menuitemname="CC Recipients"] .panel-body {
    background: transparent !important;
    padding: 16px 20px !important;
}

/* CC Recipients Form Input */
.panel-ticket-cc .form-group,
.panel[menuitemname="CC Recipients"] .form-group {
    margin-bottom: 0 !important;
}

.panel-ticket-cc .input-group,
.panel[menuitemname="CC Recipients"] .input-group {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
}

.panel-ticket-cc .form-control,
.panel[menuitemname="CC Recipients"] .form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) !important;
    padding: 10px 14px !important;
    font-size: var(--gl-text-sm) !important;
    flex: 1 !important;
}

.panel-ticket-cc .form-control:focus,
.panel[menuitemname="CC Recipients"] .form-control:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(1, 149, 244, 0.1) !important;
    outline: none !important;
}

.panel-ticket-cc .form-control::placeholder,
.panel[menuitemname="CC Recipients"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* CC Recipients Add Button */
.panel-ticket-cc .btn,
.panel-ticket-cc .input-group-btn .btn,
.panel[menuitemname="CC Recipients"] .btn,
.panel[menuitemname="CC Recipients"] .input-group-btn .btn {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0077cc 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: var(--gl-radius-md) !important;
    font-weight: 500 !important;
    font-size: var(--gl-text-sm) !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.panel-ticket-cc .btn:hover,
.panel-ticket-cc .input-group-btn .btn:hover,
.panel[menuitemname="CC Recipients"] .btn:hover,
.panel[menuitemname="CC Recipients"] .input-group-btn .btn:hover {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.3) !important;
}

.panel-ticket-cc .btn i,
.panel[menuitemname="CC Recipients"] .btn i {
    margin-right: 6px;
    font-size: 14px;
}

/* Fix view ticket page (legacy) */
.ticket-info,
.panel-info {
    background: var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: var(--gl-space-lg) !important;
    margin-bottom: var(--gl-space-lg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.panel-info .panel-heading {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 20px !important;
}

.panel-info .panel-title {
    color: #ffffff !important;
    font-size: var(--gl-text-base) !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.panel-info .panel-body {
    background: transparent !important;
    padding: var(--gl-space-lg) !important;
    color: var(--text-color) !important;
}

.panel-info .panel-body b {
    color: #ffffff !important;
    font-weight: 600 !important;
    display: block;
    margin-bottom: 4px;
    font-size: var(--gl-text-sm) !important;
}

.panel-info .panel-body > div {
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: var(--gl-space-md);
}

/* Fix invoice view */
.invoice-container {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
}

/* Fix data tables */
.dataTables_wrapper {
    background: transparent !important;
}

.dataTables_info,
.dataTables_length,
.dataTables_filter {
    color: var(--brand-primary) !important;
}

.dataTables_filter input {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border-color) !important;
    border-radius: var(--gl-radius-md) !important;
    color: var(--input-color) !important;
    padding: 8px 12px !important;
}

/* Fix domain search */
.domain-search-results {
    background: var(--ui-block-bg);
}

/* Fix cart/order pages */
.order-summary,
.cart-body,
.checkout-form {
    background: var(--ui-block-bg) !important;
}

/* Navbar account dropdown avatar */
.navbar .account-dropdown img,
.navbar .user-avatar img {
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Fix client area page headers */
.page-header {
    margin-bottom: var(--gl-space-xl);
    padding-bottom: var(--gl-space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.page-header h1 {
    font-size: var(--gl-text-2xl);
    margin: 0;
}

/* Fix tab navigation */
.nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--gl-space-lg);
}

.nav-tabs > li > a {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--brand-primary);
    padding: var(--gl-space-md) var(--gl-space-lg);
    transition: all var(--gl-transition-fast);
}

.nav-tabs > li > a:hover {
    background: transparent;
    border-color: rgba(1, 149, 244, 0.3);
    color: #ffffff;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--gl-accent-primary);
    color: #ffffff;
}

/* Fix well elements */
.well {
    background: var(--ui-block-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--gl-radius-md);
    padding: var(--gl-space-lg);
}

/* Fix iCheck boxes */
.iCheck-helper {
    background: transparent !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .tiles .row {
        flex-direction: column;
    }
    
    .tiles .col-md-3,
    .tiles .col-md-4 {
        min-width: 100%;
        margin-bottom: var(--gl-space-md);
    }
    
    .affiliate-referral-box .input-group {
        flex-wrap: wrap;
    }
    
    .affiliate-referral-box .input-group-addon,
    .affiliate-referral-box .form-control,
    .affiliate-referral-box .affiliate-copy-btn {
        border-radius: var(--gl-radius-md) !important;
        margin-bottom: var(--gl-space-sm);
        width: 100%;
    }
    
    .panel-sidebar {
        margin-bottom: var(--gl-space-md);
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus states for accessibility */
*:focus {
    outline: 2px solid rgba(1, 149, 244, 0.5);
    outline-offset: 2px;
}

button:focus,
.btn:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 149, 244, 0.2);
}

/* Print styles */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
    
    .panel,
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* =========================
   FIX: Container Edges & Rounded Corners
   ========================= */
/* Fix Contacts and Shortcuts panels - clean rounded edges */
.panel-sidebar[menuitemname="Contacts"],
.panel-sidebar[menuitemname="Shortcuts"],
.panel[menuitemname="Contacts"],
.panel[menuitemname="Shortcuts"] {
    border-radius: var(--gl-radius-lg) !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.panel-sidebar[menuitemname="Contacts"] .list-group,
.panel-sidebar[menuitemname="Shortcuts"] .list-group,
.panel[menuitemname="Contacts"] .list-group,
.panel[menuitemname="Shortcuts"] .list-group {
    border-radius: 0 0 var(--gl-radius-lg) var(--gl-radius-lg);
}

/* Apply consistent rounded corners to all panels */
.panel,
.panel-default,
.panel-sidebar,
.ui-block {
    border-radius: var(--gl-radius-lg) !important;
    overflow: hidden;
}

/* =========================
   FIX: Pixel-Block Background Effect
   ========================= */
/* This creates the blocky textured background effect */
/* Using a subtle noise/texture pattern via CSS gradient */
.pixel-block-bg,
.panel-sidebar[menuitemname="Contacts"] .list-group,
.panel-sidebar[menuitemname="Shortcuts"] .list-group,
.panel[menuitemname="Contacts"] .list-group,
.panel[menuitemname="Shortcuts"] .list-group,
.panel[menuitemname="Active Products/Services"] .panel-body,
.panel[menuitemname="Recent Support Tickets"] .panel-body,
.panel[menuitemname="Recent News"] .panel-body {
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        var(--ui-block-bg) !important;
    background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px;
}

/* Alternative: Apply to main dashboard panels */
.client-home-panels .panel .panel-body,
.client-home-panels .panel .list-group {
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.015) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.015) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.015) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.015) 25%, transparent 25%),
        var(--ui-block-bg) !important;
    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
}

/* =========================
   FIX: Larger Profile Avatar
   ========================= */
/* Enlarge the avatar in the profile card */
.panel-sidebar[menuitemname="Client Details"] .client-avatar img,
.panel[menuitemname="Client Details"] .client-avatar img,
.profile-card-modern .client-avatar img {
    width: 110px !important;
    height: 110px !important;
    border-radius: 50%;
    border: 4px solid rgba(1, 149, 244, 0.4);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    transition: all var(--gl-transition-base);
}

.panel-sidebar[menuitemname="Client Details"] .client-avatar:hover img,
.panel[menuitemname="Client Details"] .client-avatar:hover img,
.profile-card-modern .client-avatar:hover img {
    border-color: var(--gl-accent-primary);
    box-shadow: 0 8px 28px rgba(1, 149, 244, 0.35);
    transform: scale(1.02);
}

/* Center the avatar properly */
.panel-sidebar[menuitemname="Client Details"] .client-avatar,
.panel[menuitemname="Client Details"] .client-avatar,
.profile-card-modern .client-avatar {
    display: block;
    margin: 0 auto var(--gl-space-md) auto;
    text-align: center;
}

/* =========================
   FIX: Address Formatting
   ========================= */
/* Make address display properly stacked */
.panel-sidebar[menuitemname="Client Details"] .panel-body address,
.panel[menuitemname="Client Details"] .panel-body address,
.client-details-address {
    display: block;
    font-style: normal;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-top: var(--gl-space-sm);
    text-align: center;
}

.panel-sidebar[menuitemname="Client Details"] .panel-body address br,
.panel[menuitemname="Client Details"] .panel-body address br {
    content: '';
    display: block;
    margin-bottom: 2px;
}

/* Format the address lines properly */
.panel-sidebar[menuitemname="Client Details"] .panel-body,
.panel[menuitemname="Client Details"] .panel-body {
    text-align: center;
    line-height: 1.8;
}

/* Client name styling */
.panel-sidebar[menuitemname="Client Details"] .panel-body strong,
.panel[menuitemname="Client Details"] .panel-body strong,
.panel-sidebar[menuitemname="Client Details"] .panel-body b,
.panel[menuitemname="Client Details"] .panel-body b {
    display: block;
    font-size: var(--gl-text-lg) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: var(--gl-space-xs);
}

/* =========================
   FIX: Affiliates Page Styling
   ========================= */
/* Your Referrals section */
.section[data-section="referrals"],
.section-body .table-container {
    border-radius: var(--gl-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Your Unique URLs / Referral Link section redesign */
.affiliate-referral-box,
.search-box {
    background: var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: var(--gl-space-xl) !important;
    margin-bottom: var(--gl-space-lg);
}

.affiliate-referral-box .input-group,
.search-box .input-group {
    background: transparent !important;
    border-radius: var(--gl-radius-md);
    overflow: hidden;
}

.affiliate-referral-box .input-group-addon,
.search-box .input-group-addon {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    color: var(--brand-primary) !important;
    font-weight: 600;
    padding: 14px 20px !important;
    white-space: nowrap;
}

.affiliate-referral-box .form-control,
.search-box .form-control {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border-color) !important;
    border-left: none !important;
    padding: 14px 16px !important;
    font-family: monospace;
    font-size: var(--gl-text-sm);
}

/* Affiliate copy button styling */
.affiliate-copy-btn {
    background: linear-gradient(135deg, var(--gl-accent-primary) 0%, #0077cc 100%) !important;
    border: none !important;
    border-radius: 0 var(--gl-radius-md) var(--gl-radius-md) 0 !important;
    color: #fff !important;
    padding: 14px 24px !important;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--gl-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.affiliate-copy-btn:hover {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%) !important;
    transform: translateY(-1px);
}

.affiliate-copy-btn.copied {
    background: linear-gradient(135deg, var(--gl-accent-success) 0%, #059669 100%) !important;
}

/* Affiliate stats tiles - Remove gray backgrounds from container */
.tiles.swiper-container,
.tiles .swiper-wrapper,
.row.swiper-wrapper,
.section .tiles.swiper-container,
.section .tiles .swiper-wrapper,
.section .row.swiper-wrapper,
.section .swiper-container,
.affiliates-page .tiles,
.affiliates-page .swiper-wrapper,
.affiliates-page .swiper-container {
    background: transparent !important;
    background-color: transparent !important;
}

/* Affiliate stats tiles - Remove gray backgrounds */
.affiliates-stats .tile,
[class*="affiliate"] .tile,
.section[class*="affiliate"] .tile,
.affiliates-page .tile {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Stats tiles should match dashboard style - transparent with blocky background */
.section .tiles .tile {
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        var(--ui-block-bg) !important;
    background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px;
    border-radius: var(--gl-radius-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure swiper slides are transparent */
.swiper-wrapper,
.swiper-slide {
    background: transparent !important;
}

/* =========================
   Modern Affiliate Referral Link Card
   ========================= */
.affiliate-referral-link-modern {
    margin-bottom: var(--gl-space-xl);
}

.referral-link-card {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.referral-link-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 20px;
}

.referral-link-title {
    font-size: var(--gl-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0;
}

.referral-link-content {
    padding: 20px;
}

.referral-link-input-row {
    display: flex;
    gap: 0;
    align-items: stretch;
    width: 100%;
    margin-bottom: 16px;
}

.referral-link-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) 0 0 var(--gl-radius-md) !important;
    border-right: none !important;
    padding: 14px 18px !important;
    color: #ffffff !important;
    font-size: var(--gl-text-base) !important;
    font-family: monospace;
    width: 100%;
    min-width: 0; /* Allow flexbox to shrink */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-link-input:focus {
    outline: none;
    border-color: var(--brand-primary) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.btn-referral-copy {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0077cc 100%) !important;
    border: 1px solid var(--brand-primary) !important;
    border-radius: 0 var(--gl-radius-md) var(--gl-radius-md) 0 !important;
    padding: 14px 24px !important;
    color: #ffffff !important;
    font-weight: 500;
    font-size: var(--gl-text-base);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    min-width: 100px;
    justify-content: center;
}

.btn-referral-copy:hover {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.3);
}

.btn-referral-copy.copied {
    background: linear-gradient(135deg, var(--gl-accent-success) 0%, #059669 100%) !important;
    border-color: var(--gl-accent-success) !important;
}

.btn-referral-copy i {
    font-size: 14px;
}

.referral-notification-toggle {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
    background: var(--brand-primary);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--gl-text-sm);
}

/* =========================
   Modern Referrals Section
   ========================= */
.referrals-section-modern {
    background: var(--ui-block-bg);
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.referrals-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.referrals-title {
    font-size: var(--gl-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0;
}

.referrals-search-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) !important;
    padding: 8px 14px !important;
    color: #ffffff !important;
    min-width: 200px;
}

.referrals-content {
    padding: 20px;
}

.referrals-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.015) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.015) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.015) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.015) 25%, transparent 25%),
        transparent !important;
    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
    border-radius: var(--gl-radius-lg);
}

.referrals-empty-icon {
    margin-bottom: 20px;
    opacity: 0.5;
}

.referrals-empty-icon svg {
    width: 64px;
    height: 64px;
    fill: rgba(255, 255, 255, 0.3);
}

.referrals-empty-title {
    font-size: var(--gl-text-lg);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.referrals-empty-text {
    font-size: var(--gl-text-sm);
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* =========================
   Modernize Affiliate Sidebar Buttons
   ========================= */
.panel-add-funds .btn-primary-faded,
.panel-summary .btn-primary-faded {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0077cc 100%) !important;
    border: 1px solid var(--brand-primary) !important;
    color: #ffffff !important;
    font-weight: 500;
    border-radius: var(--gl-radius-md) !important;
    padding: 12px 20px !important;
    transition: all 0.2s ease;
    box-shadow: none !important;
}

.panel-add-funds .btn-primary-faded:hover:not(:disabled),
.panel-summary .btn-primary-faded:hover:not(:disabled) {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.3) !important;
}

.panel-add-funds .btn-primary-faded:disabled,
.panel-summary .btn-primary-faded:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.panel-add-funds .btn-primary-faded i,
.panel-summary .btn-primary-faded i {
    margin-right: 8px;
}

/* Affiliate table action buttons */
#tableAffiliatesList .btn,
.referrals-content .btn {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0077cc 100%) !important;
    border: 1px solid var(--brand-primary) !important;
    color: #ffffff !important;
    font-weight: 500;
    border-radius: var(--gl-radius-md) !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease;
}

#tableAffiliatesList .btn:hover,
.referrals-content .btn:hover {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.3) !important;
}

/* =========================
   Discord Link Badge Styling
   ========================= */
.discord-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(88, 101, 242, 0.2) !important;
    color: #7289da !important;
    padding: 6px 14px;
    border-radius: var(--gl-radius-full);
    font-size: var(--gl-text-sm);
    font-weight: 500;
    margin-top: var(--gl-space-sm);
}

.discord-link-badge i,
.discord-link-badge .fab {
    font-size: 14px;
}

/* =========================
   Order New Service Button Override
   ========================= */
/* This CSS cannot change URLs - that needs to be done in templates */
/* But we can style the button better */
.no-data a.btn,
.message-no-data .message-action a.btn,
a[href*="cart.php"].btn {
    background: linear-gradient(135deg, var(--gl-accent-primary) 0%, #0077cc 100%);
    border: none;
    padding: 12px 24px;
    font-weight: 500;
    border-radius: var(--gl-radius-md);
}

/* =========================
   FIX: Navbar Account Dropdown - Remove Duplicate Icons
   ========================= */
/* When logged in and showing avatar, hide any generic user icons */
.navbar li[menuitename="Account"] > a > i,
.navbar .nav-item[menuitemname="Account"] > a > i.fa-user,
.navbar .nav-item[menuitemname="Account"] > a > i.fas.fa-user,
.navbar .nav-item[menuitemname="Account"] > a > i.ls-user,
.navbar [menuitemname="Account"] > a > i:first-child {
    display: none !important;
}

/* Ensure the avatar is the only image-type element shown */
.navbar [menuitemname="Account"] .client-avatar {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.navbar [menuitemname="Account"] .client-avatar-sm img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

/* Navbar account styling */
.navbar [menuitemname="Account"] > a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar [menuitemname="Account"] .active-client {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.navbar [menuitemname="Account"] .active-client .item-text {
    font-weight: 500;
    color: #ffffff;
}

.navbar [menuitemname="Account"] .active-client span:last-child {
    font-size: var(--gl-text-xs);
    opacity: 0.7;
}

/* =========================
   UPDATES - December 2024
   ========================= */

/* =========================
   1. Enlarge Navbar Logo
   ========================= */
.navbar-brand img,
.navbar .logo img,
.navbar-header .logo img,
.navbar-header img,
header .logo img {
    max-height: 50px !important;
    height: 50px !important;
    width: auto !important;
    object-fit: contain;
}

/* Ensure navbar brand container is properly sized */
.navbar-brand,
.navbar .logo,
.navbar-header .logo {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

/* =========================
   2. Fix Navbar Profile Picture Alignment
   ========================= */
/* Vertically center the profile avatar with username */
.navbar [menuitemname="Account"] > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 8px 15px !important;
}

.navbar [menuitemname="Account"] .client-avatar,
.navbar [menuitemname="Account"] .client-avatar-sm {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    flex-shrink: 0;
}

.navbar [menuitemname="Account"] .client-avatar img,
.navbar [menuitemname="Account"] .client-avatar-sm img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    vertical-align: middle !important;
}

.navbar [menuitemname="Account"] .active-client {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
}

/* =========================
   3. Remove Duplicate Dropdown Arrow (Blue One)
   ========================= */
/* Hide the blue/primary colored caret - keep only the standard one */
.navbar [menuitemname="Account"] > a .ls-caret,
.navbar [menuitemname="Account"] > a b.ls-caret {
    color: rgba(255, 255, 255, 0.6) !important;
    background: none !important;
}

/* If there are two carets, hide the first one */
.navbar [menuitemname="Account"] > a > .ls-caret:first-of-type {
    display: none !important;
}

/* Ensure only one caret shows */
.navbar .dropdown-toggle .ls-caret {
    margin-left: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Remove any blue/accent colored dropdown indicators */
.navbar [menuitemname="Account"] .dropdown-toggle::after,
.navbar .account-dropdown .dropdown-toggle::after {
    display: none !important;
}

/* =========================
   Navbar Dedicated Nodes Icon
   ========================= */
.navbar-dedicated-nodes-icon {
    width: 32px !important;
    height: 32px !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
    display: inline-block !important;
    object-fit: contain;
}

.navbar .item-text img.navbar-dedicated-nodes-icon,
.navbar a img.navbar-dedicated-nodes-icon {
    vertical-align: middle;
}

/* =========================
   4. Dashboard Widget/Tile Improvements
   ========================= */
/* Keep existing hover animation - just improve styling */

/* Tile container */
.tiles .tile {
    position: relative;
    /* Background is set per section - allow override for affiliate page */
    border-radius: var(--gl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px 20px;
    min-height: 130px;
    overflow: hidden;
}

/* Tile statistic number - make it sharp and prominent */
.tile .tile-stat {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.1;
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
}

/* Tile title text - cleaner and balanced */
.tile .tile-title {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
}

/* Tile icons - CENTER-MIDDLE BACKGROUND with grey faded effect */
.tile {
    position: relative;
}

.tile .tile-icon-absolute {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 0;
    pointer-events: none;
}

.tile .tile-icon-absolute i,
.tile .tile-icon-absolute .ls {
    font-size: 5rem !important; /* Large size for background effect */
    color: #8b8bd4 !important; /* Purple/lavender background color */
    opacity: 1 !important;
    display: block;
    transition: all 0.3s ease;
}

/* Ensure text content appears above the background icon */
.tile .tile-stat,
.tile .tile-title {
    position: relative;
    z-index: 1;
}

/* Subtle hover effect - slightly lighter on hover */
.tile:hover .tile-icon-absolute i,
.tile:hover .tile-icon-absolute .ls {
    color: #9b9be4 !important; /* Slightly lighter purple on hover */
}

/* Unpaid invoices danger color */
.tile .tile-stat.text-danger {
    color: #dc3545 !important;
}

/* =========================
   5. Profile Card Button Fixes
   ========================= */
/* Remove green glow from buttons */
.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn,
.panel[menuitemname="Client Details"] .panel-footer .btn {
    box-shadow: none !important;
    text-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.2s ease;
}

/* Style the Edit button (was Update) */
.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn-primary,
.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn-success,
.panel[menuitemname="Client Details"] .panel-footer .btn-primary,
.panel[menuitemname="Client Details"] .panel-footer .btn-success {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0077cc 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 20px;
    font-weight: 500;
    border-radius: var(--gl-radius-md);
}

.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn-primary:hover,
.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn-success:hover,
.panel[menuitemname="Client Details"] .panel-footer .btn-primary:hover,
.panel[menuitemname="Client Details"] .panel-footer .btn-success:hover {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.3) !important;
}

/* Style the Logout button */
.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn-outline,
.panel[menuitemname="Client Details"] .panel-footer .btn-outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 10px 20px;
    font-weight: 500;
    border-radius: var(--gl-radius-md);
}

.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn-outline:hover,
.panel[menuitemname="Client Details"] .panel-footer .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* Button container layout - SIDE BY SIDE (horizontal) */
.panel-sidebar[menuitemname="Client Details"] .panel-footer,
.panel[menuitemname="Client Details"] .panel-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px;
    padding: 16px !important;
}

.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn,
.panel[menuitemname="Client Details"] .panel-footer .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Edit button icon - show pencil icon */
.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn-success i,
.panel-sidebar[menuitemname="Client Details"] .panel-footer .btn-primary i,
.panel[menuitemname="Client Details"] .panel-footer .btn-success i,
.panel[menuitemname="Client Details"] .panel-footer .btn-primary i {
    display: inline-block !important;
    margin-right: 6px;
    font-size: 14px;
}

/* =========================
   Product Services UI Improvements
   ========================= */

/* 1. Product Group Icon Styling */
.product-name-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.product-group-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.product-group-icon:hover {
    opacity: 1;
}

/* 2. Manage Button - Fixed Position and Styling */
.list-group-item-content {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    width: 100%;
}

.list-group-item-name {
    flex: 1;
    min-width: 0; /* Allow text to truncate */
}

.list-group-item-status {
    flex-shrink: 0;
    white-space: nowrap;
}

.list-group-item-actions {
    flex-shrink: 0;
    margin-left: auto; /* Push to far right */
    white-space: nowrap;
}

/* Style the Manage button */
.btn-manage-fixed,
.btn-manage {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0077cc 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 500;
    border-radius: var(--gl-radius-md);
    padding: 8px 16px;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 90px;
}

.btn-manage-fixed:hover,
.btn-manage:hover {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.3) !important;
    color: #ffffff !important;
}

/* Ensure Manage button is always aligned right in table view */
.table .cell-action {
    text-align: right !important;
    white-space: nowrap;
}

.table .btn-manage {
    margin-left: auto;
}

/* For list view - ensure proper alignment */
.list-group-item {
    display: flex;
    align-items: center;
}

/* 3. Table View - Product Icon Styling */
.table td .product-name-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    vertical-align: middle;
}

.table td .product-group-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 4. Redesigned Social Media Linking - Modern Card Layout */
.linked-accounts-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.social-link-card {
    background: var(--ui-block-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gl-radius-lg);
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 16px;
}

.social-link-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.social-link-card.unlinked {
    opacity: 0.7;
    border-style: dashed;
}

.social-platform-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    font-size: 24px;
}

.social-platform-icon.discord {
    background: linear-gradient(135deg, #5865F2 0%, #7289da 100%);
    color: #ffffff;
}

.social-platform-icon.google {
    background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
    color: #ffffff;
}

.social-platform-icon.facebook {
    background: linear-gradient(135deg, #1877F2 0%, #42A5F5 100%);
    color: #ffffff;
}

.social-link-info {
    flex: 1;
    min-width: 0;
}

.social-platform-name {
    font-size: var(--gl-text-base);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

.social-link-status {
    font-size: var(--gl-text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.social-link-action {
    flex-shrink: 0;
}

.btn-social-link,
.btn-social-relink {
    padding: 8px 16px;
    border-radius: var(--gl-radius-md);
    font-size: var(--gl-text-sm);
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-social-link {
    background: linear-gradient(135deg, #5865F2 0%, #7289da 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-social-link:hover {
    background: linear-gradient(135deg, #7289da 0%, #5865F2 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
    color: #ffffff !important;
}

.btn-social-relink {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0077cc 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: var(--gl-radius-md) !important;
    font-size: var(--gl-text-sm) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all var(--gl-transition-base) !important;
    box-shadow: 0 2px 8px rgba(1, 149, 244, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-social-relink:hover {
    background: linear-gradient(135deg, #02a6ff 0%, #0088dd 100%) !important;
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-social-relink i {
    font-size: 14px !important;
    color: #ffffff !important;
}

/* Hide old table-based linked accounts display */
#tableLinkedAccounts {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .linked-accounts-modern {
        grid-template-columns: 1fr;
    }
    
    .social-link-card {
        flex-direction: column;
        text-align: center;
    }
    
    .social-link-action {
        width: 100%;
    }
    
    .btn-social-link,
    .btn-social-relink {
        width: 100%;
    }
}

/* =========================
   Product Details Page Icon Styling
   ========================= */

/* Product detail page - large icon in the product-image area */
.product-details .product-image .product-detail-group-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Product detail page - icon next to product name */
.product-details .product-name.product-name-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.product-details .product-group-icon-inline {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Configure Product Page - Product Group Icon */
.product-config-info .product-config-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.product-config-group-icon {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    opacity: 0.9 !important;
    transition: opacity 0.2s ease !important;
    vertical-align: middle !important;
}

.product-config-group-icon:hover {
    opacity: 1 !important;
}

/* Cart Summary - Product Group Icon */
.cart-item-title-with-icon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.cart-group-icon {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    opacity: 0.9 !important;
    vertical-align: middle !important;
}

/* Order Summary - Product Group Icon */
.main-item-with-icon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.order-summary-group-icon {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    opacity: 0.9 !important;
    vertical-align: middle !important;
}

/* =========================
   Configure Product Page - Blocky Background for Billing Cycle & Config Options
   ========================= */
/* Apply the same blocky/pixel background effect from dashboard to configuration sections */
/* Apply the blocky pattern to section-body containers that use --ui-block-bg */
/* FORCE BLOCKY BACKGROUND - Override any other styles */
.configureproduct .section-body,
.configureproduct #sectionCycles .section-body,
.configureproduct .section .section-body {
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        var(--ui-block-bg) !important;
    background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px !important;
    background-color: var(--ui-block-bg) !important;
    background-image: 
        linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg) !important;
    padding: 20px !important;
    margin-top: 12px !important;
}

/* Also apply to panel-check-group containers - ENSURE BLOCKY BACKGROUND */
.configureproduct #sectionCycles .panel-check-group,
.configureproduct .section .panel-check-group,
.configureproduct .panel-check-group,
.configureproduct .section-body .panel-check-group {
    background: 
        linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        var(--ui-block-bg) !important;
    background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px !important;
    background-color: var(--ui-block-bg) !important;
    background-image: 
        linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255,255,255,0.02) 25%, transparent 25%),
        var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg) !important;
    padding: 16px !important;
    margin: 0 !important;
    position: relative !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Ensure individual panel-check items maintain transparent background to show the blocky effect */
.configureproduct #sectionCycles .panel-check,
.configureproduct .section .panel-check,
.configureproduct .panel-check {
    background: transparent !important;
}

/* Apply to any section containers for consistency */
.configureproduct #sectionCycles,
.configureproduct .section {
    background: transparent !important;
}

/* =========================
   Configure Product - Enhanced Section Title Styling
   ========================= */
/* Modern, prominent section titles */
.configureproduct .section-header {
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   FORCE Section Title Styling - ABSOLUTE MAXIMUM SPECIFICITY
   Target ALL possible selectors for configure product page
   ============================================ */
.configureproduct .section-title,
.configureproduct .section-header .section-title,
.configureproduct .section .section-header .section-title,
.configureproduct h2.section-title,
body .configureproduct .section-title,
body .configureproduct .section-header h2.section-title,
body.page-configureproduct .section-title,
body.page-configureproduct .section-header .section-title,
body.page-configureproduct .section .section-header .section-title,
body.page-configureproduct h2.section-title,
#frmConfigureProduct .section-title,
#frmConfigureProduct .section-header .section-title,
#frmConfigureProduct .section .section-header .section-title,
#frmConfigureProduct h2.section-title,
body.page-order .section-title,
body.page-order #frmConfigureProduct .section-title,
body.page-order #frmConfigureProduct .section-header .section-title,
body.page-order #frmConfigureProduct .section .section-header h2.section-title,
body.page-order form#frmConfigureProduct .section-title,
body.page-order form#frmConfigureProduct .section-header .section-title,
body.page-order form#frmConfigureProduct .section .section-header h2.section-title,
body.page-order .main-content .section-title,
body.page-order .main-content .section-header .section-title,
body.page-order .main-content .section .section-header h2.section-title,
form#frmConfigureProduct .section-title,
form#frmConfigureProduct .section-header .section-title,
form#frmConfigureProduct .section .section-header h2.section-title {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-transform: uppercase !important;
    position: relative !important;
    display: inline-block !important;
}

/* ============================================
   FORCE Blue Gradient Bar - ABSOLUTE MAXIMUM SPECIFICITY
   Target ALL possible selectors for configure product page
   ============================================ */
.configureproduct .section-title::before,
.configureproduct .section-header .section-title::before,
.configureproduct .section .section-header .section-title::before,
.configureproduct h2.section-title::before,
body .configureproduct .section-title::before,
body .configureproduct .section-header h2.section-title::before,
body.page-configureproduct .section-title::before,
body.page-configureproduct .section-header .section-title::before,
body.page-configureproduct .section .section-header .section-title::before,
body.page-configureproduct h2.section-title::before,
#frmConfigureProduct .section-title::before,
#frmConfigureProduct .section-header .section-title::before,
#frmConfigureProduct .section .section-header .section-title::before,
#frmConfigureProduct h2.section-title::before,
body.page-order .section-title::before,
body.page-order #frmConfigureProduct .section-title::before,
body.page-order #frmConfigureProduct .section-header .section-title::before,
body.page-order #frmConfigureProduct .section .section-header h2.section-title::before,
body.page-order form#frmConfigureProduct .section-title::before,
body.page-order form#frmConfigureProduct .section-header .section-title::before,
body.page-order form#frmConfigureProduct .section .section-header h2.section-title::before,
body.page-order .main-content .section-title::before,
body.page-order .main-content .section-header .section-title::before,
body.page-order .main-content .section .section-header h2.section-title::before,
form#frmConfigureProduct .section-title::before,
form#frmConfigureProduct .section-header .section-title::before,
form#frmConfigureProduct .section .section-header h2.section-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 24px !important;
    background: linear-gradient(180deg, var(--brand-primary) 0%, rgba(1, 149, 244, 0.6) 100%) !important;
    border-radius: 2px !important;
    z-index: 1 !important;
}

.configureproduct .section-desc {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
}

/* Ensure section-body has proper spacing and the blocky background shows */
.configureproduct .section {
    margin-bottom: 32px !important;
}

.configureproduct .section:last-child {
    margin-bottom: 0 !important;
}

/* =========================
   Location Options - Flag Icons & Connectivity Checking
   ========================= */
/* Flag icons for location options */
.location-flag {
    font-size: 20px;
    margin-right: 8px;
    vertical-align: middle;
    display: inline-block;
}

/* Connectivity badges */
.connectivity-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
}

.connectivity-badge.connectivity-loading {
    color: var(--brand-primary);
}

.connectivity-badge.connectivity-loading i {
    font-size: 10px;
}

.connectivity-badge.connectivity-result {
    background: rgba(1, 149, 244, 0.15);
    color: var(--brand-primary);
    border: 1px solid rgba(1, 149, 244, 0.3);
}

.connectivity-badge.connectivity-best {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2) 0%, rgba(46, 204, 113, 0.1) 100%);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
    font-weight: 700;
    padding: 3px 8px;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(46, 204, 113, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(46, 204, 113, 0.6);
    }
}

/* Recommended Location Badge - Above the card */
.location-option-wrapper {
    position: relative;
    margin-top: 32px;
    margin-bottom: 12px;
}

.connectivity-recommended-badge {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.25) 0%, rgba(46, 204, 113, 0.15) 100%);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.5);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
    animation: pulse-glow-subtle 2s ease-in-out infinite;
}

@keyframes pulse-glow-subtle {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
    }
    50% {
        box-shadow: 0 4px 12px rgba(46, 204, 113, 0.5);
    }
}

.connectivity-recommended-badge.hidden {
    display: none;
}

/* Best connectivity highlight */
.location-option.best-connectivity {
    border-color: rgba(46, 204, 113, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.2) !important;
}

.location-option.best-connectivity .check-title {
    color: rgba(255, 255, 255, 1) !important;
}

/* Location option styling */
.location-option .check-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Ensure product image container is properly sized */
.product-details .product-image {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide the default SVG icon when we have a custom icon */
.product-details .product-image:has(.product-detail-group-icon) svg {
    display: none !important;
}

/* Fallback for browsers without :has() support */
.product-details .product-image .product-detail-group-icon {
    position: relative;
    z-index: 1;
}

/* Hide siblings (SVG) when custom icon is present */
.product-details .product-image .product-detail-group-icon ~ svg {
    display: none !important;
}

/* =========================
   International Phone Input (intlTelInput) Styling
   Account Details - Phone Number Field
   ========================= */

/* Container for the phone input */
.iti {
    width: 100%;
    position: relative;
}

/* Phone input field styling - match other form controls */
.iti input[type="tel"],
.iti input.form-control,
.iti input[type="tel"].form-control,
.iti .form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) !important;
    padding: 12px 16px !important;
    padding-left: 60px !important; /* Space for flag dropdown */
    font-size: var(--gl-text-base) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
}

/* Fix for when separate dial code is enabled */
.iti--separate-dial-code .iti__selected-flag {
    border-radius: var(--gl-radius-md) 0 0 var(--gl-radius-md) !important;
}

.iti--separate-dial-code input[type="tel"] {
    padding-left: 12px !important;
    border-left: none !important;
    border-radius: 0 var(--gl-radius-md) var(--gl-radius-md) 0 !important;
}

.iti--separate-dial-code input[type="tel"]:focus {
    border-left: 1px solid var(--brand-primary) !important;
}

.iti input[type="tel"]:focus,
.iti input.form-control:focus {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(1, 149, 244, 0.15) !important;
    outline: none !important;
}

/* Selected flag button - matches dropdown styling */
.iti__selected-flag {
    background-color: var(--input-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: none !important;
    border-radius: var(--gl-radius-md) 0 0 var(--gl-radius-md) !important;
    padding: 0 8px 0 12px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: all var(--gl-transition-fast) !important;
}

.iti__selected-flag:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.iti__selected-flag:focus {
    outline: none !important;
}

/* Flag container */
.iti__flag-container {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
}

/* Flag icon styling */
.iti__flag {
    width: 20px;
    height: 15px;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: 0 0;
}

/* Dial code styling */
.iti__selected-dial-code {
    color: var(--input-color) !important;
    font-size: var(--gl-text-base) !important;
    margin-left: 6px !important;
    font-weight: 500 !important;
}

/* Country dropdown list - match other dropdown menus - FORCE dark background */
.iti__country-list {
    background: #16182b !important;
    background-color: #16182b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 0 !important;
    margin-top: 4px !important;
    z-index: 9999 !important;
    position: absolute !important;
    width: 100% !important;
    min-width: 280px !important;
}

/* Force dark background on dropdown container and all children */
.iti__country-list,
.iti__country-list * {
    background-color: #16182b !important;
}

.iti__country-list ul,
.iti__country-list ol {
    background: #16182b !important;
    background-color: #16182b !important;
}

/* Individual country option - FORCE dark background, override ALL white backgrounds */
.iti__country {
    padding: 10px 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    transition: all var(--gl-transition-fast) !important;
    background-color: #16182b !important;
    background: #16182b !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force dark background on ALL states - override any white backgrounds */
.iti__country,
.iti__country:not(:hover),
.iti__country:not(.iti__highlight),
.iti__country:not(.iti__active) {
    background-color: #16182b !important;
    background: #16182b !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.iti__country:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.iti__country.iti__highlight,
.iti__country.iti__active {
    background-color: rgba(1, 149, 244, 0.15) !important;
    background: rgba(1, 149, 244, 0.15) !important;
    color: #ffffff !important;
}

/* Ensure selected country has different styling */
.iti__country.iti__highlight:hover {
    background-color: rgba(1, 149, 244, 0.2) !important;
    background: rgba(1, 149, 244, 0.2) !important;
}

/* Override any white backgrounds that might be coming from library defaults */
.iti__country-list li,
.iti__country-list .iti__country,
.iti__country-list > li,
.iti__country-list > div {
    background-color: #16182b !important;
    background: #16182b !important;
}

.iti__country-list li:not(.iti__highlight):not(:hover),
.iti__country-list .iti__country:not(.iti__highlight):not(:hover) {
    background-color: #16182b !important;
    background: #16182b !important;
}

/* Country name and dial code in dropdown */
.iti__country-name,
.iti__dial-code {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: var(--gl-text-base) !important;
}

.iti__country:hover .iti__country-name,
.iti__country:hover .iti__dial-code {
    color: #ffffff !important;
}

.iti__dial-code {
    margin-left: auto !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 500 !important;
}

.iti__country:hover .iti__dial-code {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Flag in dropdown */
.iti__country .iti__flag {
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

/* Search box in dropdown */
.iti__search-box {
    background-color: var(--input-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) !important;
    color: var(--input-color) !important;
    padding: 10px 14px !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
    font-size: var(--gl-text-base) !important;
}

.iti__search-box:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(1, 149, 244, 0.15) !important;
    outline: none !important;
}

.iti__search-box::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Dropup styling (when dropdown opens upward) */
.iti--allow-dropdown.iti--dropup .iti__country-list {
    margin-bottom: 4px !important;
    margin-top: 0 !important;
}

/* Divider in dropdown */
.iti__divider {
    padding-bottom: 5px !important;
    margin-bottom: 5px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Preferred countries divider */
.iti__preferred .iti__divider {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 8px !important;
}

/* Arrow icon on selected flag */
.iti__arrow {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 4px solid rgba(255, 255, 255, 0.7) !important;
    margin-left: 6px !important;
    margin-top: -2px !important;
    width: 0 !important;
    height: 0 !important;
}

.iti__selected-flag:hover .iti__arrow {
    border-top-color: #ffffff !important;
}

/* Placeholder/example text styling */
.iti input[type="tel"]::placeholder,
.iti input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    opacity: 1 !important;
}

/* Fix for when placeholder is shown but user types */
.iti input[type="tel"]:not(:placeholder-shown),
.iti input.form-control:not(:placeholder-shown) {
    color: var(--input-color) !important;
}

/* Hide default placeholder when intlTelInput takes over */
.iti input[type="tel"].iti__tel-input::placeholder {
    color: transparent !important;
}

/* Error state */
.iti--error input[type="tel"],
.iti--error input.form-control {
    border-color: rgba(220, 53, 69, 0.5) !important;
}

.iti--error .iti__selected-flag {
    border-color: rgba(220, 53, 69, 0.5) !important;
}

/* Account Details page specific styling */
.clientareadetails .iti,
.clientareadetails .form-group .iti {
    width: 100%;
}

.clientareadetails .iti input[type="tel"] {
    width: 100% !important;
}

/* Ensure proper alignment with other form fields */
.clientareadetails .form-group .iti {
    display: block;
}

/* Fix for read-only state */
.iti input[type="tel"][readonly],
.iti input.form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed !important;
}

.iti input[type="tel"][readonly] + .iti__selected-flag,
.iti input.form-control[readonly] + .iti__selected-flag {
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* Scrollbar styling for country list */
.iti__country-list::-webkit-scrollbar {
    width: 8px;
}

.iti__country-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.iti__country-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* =========================
   AGGRESSIVE OVERRIDES - Force dark theme for phone dropdown
   Override any inline styles or default CSS
   ========================= */

/* Override ALL possible white backgrounds - use maximum specificity */
.iti__country-list,
.iti__country-list[style*="background"],
.iti__country-list[style*="background-color"],
.iti__country-list li,
.iti__country-list li[style*="background"],
.iti__country-list li[style*="background-color"],
.iti__country-list .iti__country,
.iti__country-list .iti__country[style*="background"],
.iti__country-list .iti__country[style*="background-color"],
div.iti__country-list li.iti__country,
div.iti__country-list li.iti__country[style*="background"],
div.iti__country-list li.iti__country[style*="background-color"] {
    background-color: #16182b !important;
    background: #16182b !important;
}

/* Force dark background on every single country item */
.iti__country-list .iti__country,
.iti__country-list > li,
.iti__country-list ul li,
.iti__country-list ul > li,
.iti__country-list div.iti__country {
    background-color: #16182b !important;
    background: #16182b !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Override white backgrounds specifically */
.iti__country-list .iti__country[style*="white"],
.iti__country-list li[style*="white"],
.iti__country-list .iti__country[style*="White"],
.iti__country-list li[style*="White"] {
    background-color: #16182b !important;
    background: #16182b !important;
}

/* Hover state - slightly lighter */
.iti__country-list .iti__country:hover,
.iti__country-list li:hover,
.iti__country-list > li:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Highlighted/Active state */
.iti__country-list .iti__country.iti__highlight,
.iti__country-list .iti__country.iti__active,
.iti__country-list li.iti__highlight,
.iti__country-list li.iti__active {
    background-color: rgba(1, 149, 244, 0.15) !important;
    background: rgba(1, 149, 244, 0.15) !important;
    color: #ffffff !important;
}

/* Country text colors */
.iti__country-list .iti__country-name,
.iti__country-list .iti__country-name *,
.iti__country-list .iti__dial-code,
.iti__country-list .iti__dial-code * {
    color: rgba(255, 255, 255, 0.9) !important;
}

.iti__country-list .iti__country:hover .iti__country-name,
.iti__country-list .iti__country:hover .iti__dial-code {
    color: #ffffff !important;
}

/* Ensure dropdown container itself is dark */
.iti__country-list,
.iti__country-list ul,
.iti__country-list ol,
.iti__country-list div {
    background-color: #16182b !important;
    background: #16182b !important;
}

/* Fix for phone input field - ensure proper styling */
.clientareadetails .iti input[type="tel"],
.clientareadetails .form-group .iti input[type="tel"],
.clientareadetails .iti input.form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-left: 60px !important;
}

/* Fix placeholder text */
.clientareadetails .iti input[type="tel"]::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    opacity: 1 !important;
}

/* Hide example text when typing */
.clientareadetails .iti input[type="tel"]:focus::placeholder,
.clientareadetails .iti input[type="tel"]:not(:placeholder-shown)::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* =========================
   User Management Page Styling
   Complete modern dark theme overhaul
   ========================= */

/* User Management Section Header */
.account-user-management .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.account-user-management .section-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

/* Invite User Button */
.account-user-management .invite-users-btn {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: var(--gl-radius-md);
    transition: all var(--gl-transition-fast);
}

.account-user-management .invite-users-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.3);
}

/* User List Panel */
.account-user-management .panel-users {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.account-user-management .panel-users .panel-body {
    background: var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg);
    padding: 20px;
}

/* User List */
.account-user-management .user-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-user-management .user-list-item {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gl-radius-md);
    transition: all var(--gl-transition-fast);
}

.account-user-management .user-list-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(4px);
}

.account-user-management .user-list-item:last-child {
    margin-bottom: 0;
}

/* User Avatar */
.account-user-management .user-list-item-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.account-user-management .user-list-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* User Info */
.account-user-management .user-list-item-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-user-management .user-list-item-info {
    flex: 1;
}

.account-user-management .user-list-item-name {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-user-management .user-list-item-name i {
    font-size: 14px;
}

.account-user-management .user-list-item-email {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.account-user-management .user-list-item-date {
    text-align: right;
    margin-right: 20px;
}

.account-user-management .user-list-item-date .text-small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.account-user-management .user-list-item-date > div {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

/* User Actions */
.account-user-management .user-list-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-user-management .user-list-item-actions .label {
    padding: 6px 12px;
    border-radius: var(--gl-radius-md);
    font-size: 12px;
    font-weight: 600;
}

.account-user-management .user-list-item-actions .label-info {
    background: rgba(1, 149, 244, 0.2);
    color: #0195f4;
    border: 1px solid rgba(1, 149, 244, 0.3);
}

.account-user-management .user-list-item-actions .btn-sm {
    padding: 8px 12px;
    border-radius: var(--gl-radius-md);
    transition: all var(--gl-transition-fast);
}

.account-user-management .user-list-item-actions .btn-sm:hover {
    transform: translateY(-2px);
}

.account-user-management .user-list-item-actions .btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Pending Invites Section */
.account-user-management .user-list-invites .user-list-item {
    background: rgba(255, 193, 7, 0.05);
    border-color: rgba(255, 193, 7, 0.2);
}

.account-user-management .user-list-invites .user-list-item:hover {
    background: rgba(255, 193, 7, 0.08);
    border-color: rgba(255, 193, 7, 0.3);
}

/* Modals - Complete Overhaul */
.account-user-management .modal-content {
    background: var(--ui-block-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gl-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.account-user-management .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-user-management .modal-header .close {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
    text-shadow: none;
    font-size: 24px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--gl-transition-fast);
}

.account-user-management .modal-header .close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.account-user-management .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.account-user-management .modal-body {
    padding: 24px;
    color: rgba(255, 255, 255, 0.9);
}

.account-user-management .modal-body .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 20px;
}

.account-user-management .modal-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Form Controls in Modal */
.account-user-management .modal-body .form-group {
    margin-bottom: 20px;
}

.account-user-management .modal-body .control-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    display: block;
}

.account-user-management .modal-body .form-control {
    background: var(--input-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gl-radius-md);
    color: var(--input-color);
    padding: 12px 16px;
    font-size: 14px;
    transition: all var(--gl-transition-fast);
}

.account-user-management .modal-body .form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(1, 149, 244, 0.15);
    outline: none;
}

.account-user-management .modal-body .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Radio Buttons and Checkboxes */
.account-user-management .modal-body .radio,
.account-user-management .modal-body .checkbox {
    margin-bottom: 12px;
}

.account-user-management .modal-body .radio label,
.account-user-management .modal-body .checkbox label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.account-user-management .modal-body .checkbox label strong {
    color: #ffffff;
    font-weight: 600;
}

.account-user-management .modal-body .checkbox label .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 400;
}

/* Permissions Selector */
.account-user-management .permissions-selector {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gl-radius-md);
}

.account-user-management .permissions-selector.hidden {
    display: none !important;
}

/* Modal Buttons */
.account-user-management .modal-footer .btn {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: var(--gl-radius-md);
    transition: all var(--gl-transition-fast);
    border: none;
}

.account-user-management .modal-footer .btn-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0056b3 100%);
    color: #ffffff;
}

.account-user-management .modal-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.3);
}

.account-user-management .modal-footer .btn-default {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.account-user-management .modal-footer .btn-default:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* Info Text */
.account-user-management .text-small {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 16px;
}

/* Modal Backdrop - Enhanced */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px);
}

.modal-backdrop.show {
    opacity: 1 !important;
}

/* General Modal Styling for User Management Page - Target by ID */
#inviteNewUser .modal-content,
#modalRemoveUser .modal-content,
#modalCancelInvite .modal-content {
    background: var(--ui-block-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--gl-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

#inviteNewUser .modal-header,
#modalRemoveUser .modal-header,
#modalCancelInvite .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px;
}

#inviteNewUser .modal-body,
#modalRemoveUser .modal-body,
#modalCancelInvite .modal-body {
    padding: 24px;
    color: rgba(255, 255, 255, 0.9);
}

#inviteNewUser .modal-footer,
#modalRemoveUser .modal-footer,
#modalCancelInvite .modal-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 24px;
}

#inviteNewUser .modal-title,
#modalRemoveUser .modal-title,
#modalCancelInvite .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

#inviteNewUser .close,
#modalRemoveUser .close,
#modalCancelInvite .close {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1;
    text-shadow: none;
    font-size: 24px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--gl-transition-fast);
}

#inviteNewUser .close:hover,
#modalRemoveUser .close:hover,
#modalCancelInvite .close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .account-user-management .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .account-user-management .invite-users-btn {
        width: 100%;
    }
    
    .account-user-management .user-list-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .account-user-management .user-list-item-body {
        flex-direction: column;
        width: 100%;
        margin-top: 12px;
    }
    
    .account-user-management .user-list-item-date {
        margin-right: 0;
        margin-top: 12px;
        text-align: left;
    }
    
    .account-user-management .user-list-item-actions {
        margin-top: 12px;
        width: 100%;
        justify-content: flex-start;
    }
}

/* =========================
   Account Details Page - Complete Modern Overhaul
   ========================= */

/* Wrapper for Account Details Page */
.account-details-page {
    width: 100%;
}

/* Section Headers - Enhanced Styling (matching configure product page) */
.account-details-page .section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.account-details-page .section-header::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, rgba(1, 149, 244, 0.5) 100%);
}

.account-details-page .section-title {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding-left: 20px !important;
    text-transform: uppercase !important;
    position: relative !important;
    display: inline-block !important;
}

.account-details-page .section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, var(--brand-primary) 0%, rgba(1, 149, 244, 0.6) 100%);
    border-radius: 2px;
}

/* Section Body - Blocky Background Effect */
.account-details-page .section-body {
    background: transparent !important;
}

.account-details-page .panel-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.account-details-page .panel-form .panel-body {
    background: var(--ui-block-bg) !important;
    border-radius: var(--gl-radius-lg);
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

/* Form Groups */
.account-details-page .form-group {
    margin-bottom: 24px;
}

.account-details-page .form-group:last-child {
    margin-bottom: 0;
}

/* Form Labels */
.account-details-page .control-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form Controls */
.account-details-page .form-control {
    background: var(--input-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) !important;
    color: var(--input-color) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: all var(--gl-transition-fast) !important;
    height: auto !important;
    min-height: 44px !important;
}

.account-details-page .form-control:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(1, 149, 244, 0.15) !important;
    outline: none !important;
    background: var(--input-bg) !important;
}

.account-details-page .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.account-details-page .form-control:disabled,
.account-details-page .form-control[readonly] {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed !important;
}

/* Select Dropdowns */
.account-details-page select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
    appearance: none !important;
    cursor: pointer !important;
}

.account-details-page select.form-control:disabled {
    cursor: not-allowed !important;
}

/* Country Dropdown */
.account-details-page select[name="country"],
.account-details-page select#country {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
    appearance: none !important;
}

/* Checkboxes and Radio Buttons */
.account-details-page .checkbox,
.account-details-page .radio {
    margin-bottom: 16px;
}

.account-details-page .checkbox label,
.account-details-page .radio label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.account-details-page .checkbox input[type="checkbox"],
.account-details-page .radio input[type="radio"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

/* Help Blocks */
.account-details-page .help-block {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
    font-style: italic;
}

/* Input Groups */
.account-details-page .input-group {
    display: flex;
    align-items: stretch;
    border-radius: var(--gl-radius-md);
    overflow: hidden;
}

.account-details-page .input-group-addon {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 12px 16px !important;
    border-radius: var(--gl-radius-md) 0 0 var(--gl-radius-md) !important;
    display: flex;
    align-items: center;
}

.account-details-page .input-group .form-control {
    border-left: none !important;
    border-radius: 0 var(--gl-radius-md) var(--gl-radius-md) 0 !important;
}

.account-details-page .input-group .form-control:focus {
    border-left: 1px solid var(--brand-primary) !important;
}

/* Form Actions - Buttons */
.account-details-page .form-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 16px;
    justify-content: flex-start;
}

.account-details-page .form-actions .btn {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--gl-radius-md);
    transition: all var(--gl-transition-fast);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.account-details-page .form-actions .btn-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, #0056b3 100%);
    color: #ffffff;
}

.account-details-page .form-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 149, 244, 0.3);
}

.account-details-page .form-actions .btn-primary i {
    font-size: 14px;
}

.account-details-page .form-actions .btn-default {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.account-details-page .form-actions .btn-default:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.account-details-page .form-actions .btn-default i {
    font-size: 14px;
}

/* Email Preferences Section */
.account-details-page .panel-switch {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--gl-radius-md) !important;
    padding: 16px 20px !important;
}

.account-details-page .switch-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-right: 12px;
}

/* Marketing Email Opt-in Section */
.account-details-page .panel-switch .panel-body {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Custom Fields Styling */
.account-details-page .customfield-input {
    width: 100%;
}

/* Row Layout Improvements */
.account-details-page .row {
    margin-left: -12px;
    margin-right: -12px;
}

.account-details-page .row > [class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .account-details-page .section-title {
        font-size: 20px;
    }
    
    .account-details-page .panel-form .panel-body {
        padding: 20px;
    }
    
    .account-details-page .form-actions {
        flex-direction: column;
    }
    
    .account-details-page .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .account-details-page .row > [class*="col-"] {
        margin-bottom: 16px;
    }
}

/* Enhanced Section Spacing */
.account-details-page .section {
    margin-bottom: 40px;
}

.account-details-page .section:last-of-type {
    margin-bottom: 0;
}