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

/* ========================================== */
/* Authentication Page Fixes                  */
/* ========================================== */

/* Fix scrollbar and make background image visible */
.authentication-background {
    overflow: hidden;
    min-height: 100vh;
    height: 100vh;
    /* Use the phone image directly as background with color overlay */
    background: 
        linear-gradient(rgba(var(--primary-rgb), 0.75), rgba(var(--primary-rgb), 0.75)),
        url('/assets/images/media/backgrounds/1.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Hide the broken ::before pseudo-element */
.authentication-background:before {
    display: none !important;
}

/* Ensure container fills viewport without causing scroll */
.authentication-background .container {
    height: 100%;
    overflow: auto;
    position: relative;
    z-index: 1;
}

/* ========================================== */

/* Crazytel Dashboard Custom Styles */

/* Custom Tooltips for CrazyAI Dashboard */
.crazyai-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.crazyai-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #999;
    font-size: 11px;
    font-weight: bold;
    margin-left: 6px;
    transition: all 0.2s ease;
}

.crazyai-tooltip-icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.crazyai-tooltip-content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #444;
    font-size: 13px;
    text-transform: none !important;
    line-height: 1.6;
    width: 320px;
    max-width: 90vw;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    font-weight: 400;
    letter-spacing: normal;
}

.crazyai-tooltip-wrapper:hover .crazyai-tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* Arrow for tooltip */
.crazyai-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #444;
}

.crazyai-tooltip-content::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
    margin-top: -1px;
}

/* Tooltip arrow when positioned below the element */
.crazyai-tooltip-content.tooltip-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #444;
}

.crazyai-tooltip-content.tooltip-below::before {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1a1a1a;
    margin-top: 0;
    margin-bottom: -1px;
}

/* Dark theme support */
[data-theme-mode="dark"] .crazyai-tooltip-content {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #444;
}

[data-theme-mode="dark"] .crazyai-tooltip-icon {
    background-color: rgba(255, 255, 255, 0.1);
    color: #999;
}

[data-theme-mode="dark"] .crazyai-tooltip-icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Tooltip positioning variations for different contexts */
.crazyai-tooltip-content.tooltip-right {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.crazyai-tooltip-content.tooltip-left {
    left: 0;
    right: auto;
    transform: translateX(0);
}

/* Highlighted text in tooltips */
.crazyai-tooltip-content strong {
    color: #ef4444;
    font-weight: 600;
}

/* Tooltip color accents */
.crazyai-tooltip-content .tooltip-highlight {
    color: #3b82f6;
    font-weight: 500;
}

.crazyai-tooltip-content .tooltip-success {
    color: #22c55e;
    font-weight: 500;
}

.crazyai-tooltip-content .tooltip-warning {
    color: #f59e0b;
    font-weight: 500;
}

.crazyai-tooltip-content .tooltip-info {
    color: #06b6d4;
    font-weight: 500;
}

/* Tooltip icon styling */
.crazyai-tooltip-content .tooltip-icon {
    font-style: normal;
    margin-right: 4px;
    font-size: 14px;
}

/* Tooltip code/value styling */
.crazyai-tooltip-content code {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'Courier New', Courier, monospace;
}

/* CRITICAL FIX: Tooltips inside modals - use position:fixed to escape all clipping contexts */
.modal .crazyai-tooltip-content,
#crazyai-cdr-detail-modal .crazyai-tooltip-content,
#crazyai-stats-modal .crazyai-tooltip-content {
    z-index: 999999 !important;
}

/* Ensure tooltip wrapper has relative positioning */
.modal .crazyai-tooltip-wrapper,
#crazyai-cdr-detail-modal .crazyai-tooltip-wrapper,
#crazyai-stats-modal .crazyai-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

/* CDR Modal specific: Allow overflow for tooltip visibility */
#crazyai-cdr-detail-modal .card-header,
#crazyai-cdr-detail-modal .crazyai-quickinfo-card,
#crazyai-cdr-detail-modal .crazyai-quickinfo-content,
#crazyai-stats-modal .card-header,
#crazyai-stats-modal .crazyai-quickinfo-card {
    overflow: visible !important;
}

/* Card body needs visible overflow for tooltips */
#crazyai-cdr-detail-modal .card,
#crazyai-cdr-detail-modal .card-body,
#crazyai-stats-modal .card,
#crazyai-stats-modal .card-body {
    overflow: visible !important;
}

/* Tab panes need visible overflow */
#crazyai-cdr-detail-modal .tab-pane,
#crazyai-stats-modal .tab-pane {
    overflow: visible !important;
}

/* Row/col overflow */
#crazyai-cdr-detail-modal .row,
#crazyai-cdr-detail-modal [class*="col-"],
#crazyai-stats-modal .row,
#crazyai-stats-modal [class*="col-"] {
    overflow: visible !important;
}

/* Specific fix for small labels and mini stats */
#crazyai-cdr-detail-modal small,
#crazyai-cdr-detail-modal .fs-10,
#crazyai-cdr-detail-modal .fs-11,
#crazyai-stats-modal small,
#crazyai-stats-modal .fs-10,
#crazyai-stats-modal .fs-11 {
    overflow: visible !important;
}

/* Mini stat cards */
.crazyai-mini-stat,
.crazyai-card-compact {
    overflow: visible !important;
}

/* Fast Tooltip Animation for Header Home Button */
.crazytel-fast-tooltip {
    --bs-tooltip-delay-show: 0ms !important;
    --bs-tooltip-delay-hide: 0ms !important;
}

/* Override Bootstrap tooltip timing globally for faster response */
.tooltip {
    --bs-tooltip-delay-show: 0ms !important;
    --bs-tooltip-delay-hide: 0ms !important;
}

/* Specific fast tooltip for header elements */
.header-link[title] {
    --bs-tooltip-delay-show: 0ms !important;
    --bs-tooltip-delay-hide: 0ms !important;
}

/* Force fast tooltips on all Bootstrap tooltip elements */
.tooltip-inner,
[data-bs-toggle="tooltip"],
[title]:not([title=""]),
.btn[title],
.nav-link[title],
.side-menu__item[title] {
    --bs-tooltip-delay-show: 0ms !important;
    --bs-tooltip-delay-hide: 0ms !important;
}

/* Global Bootstrap tooltip configuration override */
:root {
    --bs-tooltip-delay-show: 0ms !important;
    --bs-tooltip-delay-hide: 0ms !important;
}

/* Force immediate tooltip display - override all Bootstrap delays */
.tooltip {
    --bs-tooltip-delay-show: 0ms !important;
    --bs-tooltip-delay-hide: 0ms !important;
}

/* Remove any CSS transitions that might cause delays */
.tooltip,
.tooltip.fade {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
}

/* Ensure tooltips show immediately on hover */
.tooltip.show {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Force immediate visibility for all tooltip states */
.tooltip.bs-tooltip-top,
.tooltip.bs-tooltip-bottom,
.tooltip.bs-tooltip-start,
.tooltip.bs-tooltip-end {
    opacity: 1 !important;
    transition: none !important;
}

.crazytel-dashboard-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
    background: #1a1a1a;
    border: 1px solid #333;
}

[data-theme-mode="dark"] .crazytel-dashboard-card {
    background: #1a1a1a;
    border: 1px solid #333;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.crazytel-dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="dark"] .crazytel-dashboard-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.crazytel-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
}

.crazytel-balance-icon {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.crazytel-sip-icon {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.crazytel-pbx-icon {
    background: linear-gradient(135deg, #6f42c1, #5a2d91);
}

.crazytel-sim-icon {
    background: linear-gradient(135deg, #fd7e14, #e55a00);
}

.crazytel-nbn-icon {
    background: linear-gradient(135deg, #17a2b8, #138496);
}

.crazytel-numbers-icon {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.crazytel-card-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
}

[data-theme-mode="dark"] .crazytel-card-label {
    color: #cccccc;
}

.crazytel-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.crazytel-card-value.updating {
    opacity: 0.7;
    transform: scale(0.98);
}

[data-theme-mode="dark"] .crazytel-card-value {
    color: #ffffff;
}

.crazytel-card-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.crazytel-trend-positive {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.crazytel-trend-negative {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.crazytel-trend-neutral {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

[data-theme-mode="dark"] .crazytel-trend-positive {
    background: rgba(40, 167, 69, 0.2);
    color: #4caf50;
}

[data-theme-mode="dark"] .crazytel-trend-negative {
    background: rgba(220, 53, 69, 0.2);
    color: #f44336;
}

[data-theme-mode="dark"] .crazytel-trend-neutral {
    background: rgba(108, 117, 125, 0.2);
    color: #9e9e9e;
}

/* =========================================================
   CrazyAI Dashboard - Premium Dark Luxury Design
   ========================================================= */
.crazyai-dashboard {
    padding: 0.75rem;
}

/* Stat Cards - Glassmorphism with Gradient Borders */
.crazyai-dashboard-card {
    position: relative;
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Animated gradient border effect */
.crazyai-dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.5), rgba(14, 165, 232, 0.5), rgba(185, 28, 28, 0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.crazyai-dashboard-card:hover::before {
    opacity: 1;
    animation: crazyai-gradient-rotate 3s linear infinite;
}

@keyframes crazyai-gradient-rotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.crazyai-dashboard-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 40px rgba(185, 28, 28, 0.2), 0 0 20px rgba(14, 165, 232, 0.15);
}

[data-theme-mode="dark"] .crazyai-dashboard-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(42, 42, 42, 0.8) 100%);
    border: 1px solid rgba(185, 28, 28, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

[data-theme-mode="dark"] .crazyai-dashboard-card:hover {
    box-shadow: 0 12px 40px rgba(185, 28, 28, 0.25), 0 0 30px rgba(14, 165, 232, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(185, 28, 28, 0.4);
}

/* Labels with subtle glow */
.crazyai-dashboard-label {
    font-size: 0.80rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6c757d;
    opacity: 0.9;
}

[data-theme-mode="dark"] .crazyai-dashboard-label {
    color: #e0e0e0;
    text-shadow: 0 0 10px rgba(185, 28, 28, 0.3);
}

/* Values with enhanced typography */
.crazyai-dashboard-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 0.25rem;
    color: #0f172a;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme-mode="dark"] .crazyai-dashboard-value {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.1));
}

/* Subtext styling */
.crazyai-dashboard-subtext {
    font-size: 0.78rem;
    color: #6c757d;
    font-weight: 500;
}

[data-theme-mode="dark"] .crazyai-dashboard-subtext {
    color: #b0b0b0;
}

/* Icons with pulsing animation and enhanced gradients */
.crazyai-dashboard-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    border: 0;
    flex: 0 0 auto;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    animation: crazyai-icon-pulse 3s ease-in-out infinite;
}

@keyframes crazyai-icon-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    }
}

[data-theme-mode="dark"] .crazyai-dashboard-icon {
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.crazyai-icon-calls {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #0ea5e9 100%);
}

.crazyai-icon-week {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 50%, #a855f7 100%);
}

.crazyai-icon-unanswered {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #14b8a6 100%);
}

.crazyai-icon-notifications {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #fb923c 100%);
}

.crazyai-icon-calls i,
.crazyai-icon-week i,
.crazyai-icon-unanswered i,
.crazyai-icon-notifications i {
    color: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Chart containers with enhanced styling */
.crazyai-dashboard-chart {
    width: 100%;
    height: 320px;
}

/* Chart card headers */
[data-theme-mode="dark"] .crazyai-dashboard-card .card-header {
    background: rgba(42, 42, 42, 0.5);
    border-bottom: 1px solid rgba(185, 28, 28, 0.2);
}

[data-theme-mode="dark"] .crazyai-dashboard-card .card-header .fw-semibold {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 0 0 10px rgba(185, 28, 28, 0.3);
}

[data-theme-mode="dark"] .crazyai-dashboard .btn-close {
    filter: invert(1);
}

@media (max-width: 576px) {
    .crazyai-dashboard {
        padding: 0.5rem;
    }

    .crazyai-dashboard-chart {
        height: 260px;
    }

    .crazyai-dashboard-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .crazyai-dashboard-value {
        font-size: 1.75rem;
    }
}

/* CrazyAI New Dashboard Styles (v2) */
.crazyai-gradient-card {
    background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
    transition: all 0.3s ease;
    min-width: 0;
}

[data-theme-mode="dark"] .crazyai-gradient-card {
    background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
}

.crazyai-gradient-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2);
}

.crazyai-progress-ring {
    transform: rotate(-90deg);
}

.crazyai-progress-ring-circle {
    transition: stroke-dashoffset 0.5s ease;
}

.crazyai-stat-number {
    font-variant-numeric: tabular-nums;
}

.crazyai-refresh-spin {
    animation: crazyaiSpin 1s linear infinite;
}

@keyframes crazyaiSpin {
    100% {
        transform: rotate(360deg);
    }
}

/* CrazyAI Empty State */
#crazyai-empty-state {
    border: 2px dashed #dee2e6;
    background: #f8f9fa;
}

[data-theme-mode="dark"] #crazyai-empty-state {
    border: 2px dashed #444;
    background: #0d0d0d;
}

#crazyai-empty-state h4 {
    color: #495057;
    font-weight: 600;
}

[data-theme-mode="dark"] #crazyai-empty-state h4 {
    color: #ffffff;
}

#crazyai-empty-state .text-muted {
    color: #6c757d !important;
}

[data-theme-mode="dark"] #crazyai-empty-state .text-muted {
    color: #999999 !important;
}

#crazyai-empty-state .ri-robot-line {
    animation: crazyaiEmptyPulse 2s ease-in-out infinite;
}

@keyframes crazyaiEmptyPulse {

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

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Switch Management Dashboard */
.switch-manage-page {
    padding-bottom: 2rem;
}

.switch-manage-shell-card {
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

[data-theme-mode="dark"] .switch-manage-shell-card {
    background-color: #1a1a1a;
    border-color: #333;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.65);
}

.switch-manage-shell-card .card-header {
    background: transparent;
}

.switch-manage-loading .spinner-border {
    width: 2.75rem;
    height: 2.75rem;
}

.switch-manage-table th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: #6b7280;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme-mode="dark"] .switch-manage-table th {
    color: #cbd5f5;
    border-color: rgba(255, 255, 255, 0.08);
}

.switch-manage-table td {
    vertical-align: middle;
}

.switch-manage-table code {
    background: transparent;
    color: #111827;
    font-weight: 600;
}

[data-theme-mode="dark"] .switch-manage-table code {
    color: #e2e8f0;
}

.switch-manage-description {
    max-width: 280px;
}

.switch-manage-status-badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 30px;
}

.switch-manage-pagination-controls .btn {
    min-width: 110px;
}

.switch-manage-empty-state i {
    opacity: 0.75;
}

.switch-manage-alert {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
}

.switch-manage-alert.alert-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.switch-manage-alert.alert-success {
    background-color: #198754;
    border-color: #198754;
}

.switch-manage-alert .btn-close {
    filter: invert(1);
}

[data-theme-mode="dark"] .switch-manage-alert {
    background-color: #1e90ff;
    border-color: #1e90ff;
    color: #fff;
}

[data-theme-mode="dark"] .switch-manage-alert.alert-danger {
    background-color: #ff4d6d;
    border-color: #ff4d6d;
}

[data-theme-mode="dark"] .switch-manage-alert.alert-success {
    background-color: #2bb673;
    border-color: #2bb673;
}

[data-theme-mode="dark"] .switch-manage-alert .btn-close {
    filter: invert(1);
}

.switch-manage-modal {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
}

.switch-manage-modal .modal-header {
    border-bottom: 1px solid #f1f5f9;
}

.switch-manage-modal .modal-footer {
    border-top: 1px solid #f1f5f9;
}

[data-theme-mode="dark"] .switch-manage-modal {
    background-color: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .switch-manage-modal .modal-header,
[data-theme-mode="dark"] .switch-manage-modal .modal-footer {
    border-color: #262626;
}

[data-theme-mode="dark"] .switch-manage-modal .form-control,
[data-theme-mode="dark"] .switch-manage-modal .form-select,
[data-theme-mode="dark"] .switch-manage-modal textarea {
    background-color: #111111;
    border-color: #333333;
    color: #f8fafc;
}

[data-theme-mode="dark"] .switch-manage-modal .form-control::placeholder,
[data-theme-mode="dark"] .switch-manage-modal textarea::placeholder {
    color: #666666;
}

[data-theme-mode="dark"] .switch-manage-modal .btn-close {
    filter: invert(1);
}

.switch-manage-action-btn {
    text-decoration: none;
    font-weight: 600;
}

.switch-manage-pagination-controls .btn.disabled,
.switch-manage-pagination-controls .btn:disabled {
    opacity: 0.6;
}

[data-theme-mode="dark"] .switch-manage-pagination-controls .btn {
    border-color: #333;
    color: #e2e8f0;
}

.crazytel-card-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.crazytel-status-active {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.crazytel-status-inactive {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

[data-theme-mode="dark"] .crazytel-status-active {
    background: rgba(40, 167, 69, 0.2);
    color: #4caf50;
}

[data-theme-mode="dark"] .crazytel-status-inactive {
    background: rgba(220, 53, 69, 0.2);
    color: #f44336;
}

.crazytel-card-usage {
    display: flex;
    align-items: center;
    justify-content: center;
}

.crazytel-progress-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(#6f42c1 0deg 324deg, rgba(111, 66, 193, 0.2) 324deg 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.crazytel-progress-ring::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1a1a1a;
}

[data-theme-mode="light"] .crazytel-progress-ring::before {
    background: #ffffff;
}

.crazytel-progress-ring span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6f42c1;
    position: relative;
    z-index: 1;
}

.crazytel-card-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 8px;
}

[data-theme-mode="dark"] .crazytel-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.crazytel-card-footer small {
    font-size: 0.75rem;
    color: #6c757d;
}

[data-theme-mode="dark"] .crazytel-card-footer small {
    color: #999999;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .crazytel-dashboard-card {
        margin-bottom: 1rem;
    }

    .crazytel-card-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .crazytel-card-value {
        font-size: 1.5rem;
    }
}

/* Animation for refresh button */
@keyframes crazytel-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.crazytel-refreshing .ri-refresh-line {
    animation: crazytel-spin 1s linear infinite;
}

/* Recharge button styles */
.crazytel-recharge-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.crazytel-recharge-btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 6px 12px;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    border: none;
    background: #007bff;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.crazytel-recharge-btn:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}

.crazytel-recharge-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

[data-theme-mode="dark"] .crazytel-recharge-btn {
    background: #0d6efd;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
}

[data-theme-mode="dark"] .crazytel-recharge-btn:hover {
    background: #0b5ed7;
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.4);
}

/* Spinning animation for loading state */
.crazytel-spin {
    animation: crazytel-spin 1s linear infinite;
}

/* Auto Top-up Alert Styles */
.crazytel-auto-topup-alert {
    margin-bottom: 1.5rem;
    border-radius: 8px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

[data-theme-mode="dark"] .crazytel-auto-topup-alert {
    background-color: #1a1a1a;
    border: 1px solid #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

.crazytel-auto-topup-alert .crazytel-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

[data-theme-mode="dark"] .crazytel-auto-topup-alert .crazytel-alert-icon {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.crazytel-auto-topup-alert h6 {
    color: #212529;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

[data-theme-mode="dark"] .crazytel-auto-topup-alert h6 {
    color: #ffffff;
}

.crazytel-auto-topup-alert .crazytel-alert-text {
    color: #6c757d;
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 0;
}

[data-theme-mode="dark"] .crazytel-auto-topup-alert .crazytel-alert-text {
    color: #cccccc;
}

.crazytel-setup-topup-btn {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.crazytel-setup-topup-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
    text-decoration: none;
    transform: translateY(-1px);
}

[data-theme-mode="dark"] .crazytel-setup-topup-btn {
    background-color: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .crazytel-setup-topup-btn:hover {
    background-color: #222222;
    border-color: #444;
    color: #ffffff;
}

/* Auto Top-up Alert - Polished Modern Overrides */
.crazytel-auto-topup-alert {
    position: relative;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.06), rgba(255, 193, 7, 0.03));
    border: 1px solid rgba(255, 193, 7, 0.25);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.crazytel-auto-topup-alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ffc107, #fd7e14);
    opacity: 0.9;
}

[data-theme-mode="dark"] .crazytel-auto-topup-alert {
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.04));
    border-color: rgba(255, 193, 7, 0.3);
}

.crazytel-auto-topup-alert .crazytel-alert-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.18), rgba(253, 126, 20, 0.18));
    color: #ffc107;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.18);
    border: 1px solid rgba(255, 193, 7, 0.25);
}

[data-theme-mode="dark"] .crazytel-auto-topup-alert .crazytel-alert-icon {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25), rgba(253, 126, 20, 0.22));
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.25);
    border-color: rgba(255, 193, 7, 0.35);
}

.crazytel-auto-topup-alert h6 {
    margin-bottom: 0.25rem;
    letter-spacing: 0.1px;
}

.crazytel-auto-topup-alert .crazytel-alert-text {
    display: block;
}

/* CTA button refinement inside alert */
.crazytel-auto-topup-alert .crazytel-setup-topup-btn {
    background: linear-gradient(135deg, #111111, #1a1a1a);
    border: 1px solid #333;
    color: #ffffff;
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.crazytel-auto-topup-alert .crazytel-setup-topup-btn:hover {
    background: #222222;
    border-color: #444;
    transform: translateY(-2px);
}

/* Light theme CTA fallback */
[data-theme-mode="light"] .crazytel-auto-topup-alert .crazytel-setup-topup-btn {
    background: #212529;
    border-color: #343a40;
    color: #ffffff;
}

/* Responsive layout tweaks for the alert */
@media (max-width: 576px) {
    #crazytel-auto-topup-alert .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .crazytel-auto-topup-alert .crazytel-alert-actions {
        width: 100%;
    }
}

/* Toast notification styles */
.crazytel-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #1a1a1a;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.crazytel-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.crazytel-toast-success {
    border-color: #28a745;
    background: linear-gradient(135deg, #1a1a1a, #1e3a1e);
}

.crazytel-toast-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.crazytel-toast-success i {
    color: #28a745;
}

/* Product Cards Styles */
.crazytel-section-title {
    color: #212529;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

[data-theme-mode="dark"] .crazytel-section-title {
    color: #ffffff;
}

.crazytel-product-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
    background: #ffffff;
    border: 1px solid #e9ecef;
    overflow: hidden;
}

[data-theme-mode="dark"] .crazytel-product-card {
    background: #1a1a1a;
    border: 1px solid #333;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.crazytel-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="dark"] .crazytel-product-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.crazytel-product-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #ffffff;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.crazytel-product-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    opacity: 0.1;
    border-radius: inherit;
}

.crazytel-product-nbn-icon {
    background: transparent;
    border: 2px solid #e9ecef;
}

[data-theme-mode="dark"] .crazytel-product-nbn-icon {
    background: transparent;
    border: 2px solid #333;
}

.crazytel-nbn-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    transition: all 0.3s ease;
}

.crazytel-product-nbn:hover .crazytel-nbn-logo {
    transform: scale(1.05);
}

.crazytel-product-mobile-icon {
    background: transparent;
    border: 2px solid #e9ecef;
}

[data-theme-mode="dark"] .crazytel-product-mobile-icon {
    background: transparent;
    border: 2px solid #333;
}

.crazytel-mobile-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    transition: all 0.3s ease;
}

.crazytel-product-mobile:hover .crazytel-mobile-logo {
    transform: scale(1.05);
}

.crazytel-product-sip-icon {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.crazytel-product-pbx-icon {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.crazytel-product-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
}

[data-theme-mode="dark"] .crazytel-product-title {
    color: #ffffff;
}

.crazytel-product-description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6c757d;
    margin-bottom: 1rem;
}

[data-theme-mode="dark"] .crazytel-product-description {
    color: #cccccc;
}

.crazytel-product-stats {
    background: rgba(248, 249, 250, 0.8);
    border-radius: 12px;
    padding: 1rem;
    margin: 0 -0.5rem;
}

[data-theme-mode="dark"] .crazytel-product-stats {
    background: rgba(13, 13, 13, 0.8);
}

.crazytel-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
}

[data-theme-mode="dark"] .crazytel-stat-value {
    color: #ffffff;
}

.crazytel-stat-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
    margin-top: 2px;
}

[data-theme-mode="dark"] .crazytel-stat-label {
    color: #999999;
}

.crazytel-product-btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 16px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: 2px solid #007bff;
    color: #007bff;
    background: transparent;
}

.crazytel-product-btn:hover {
    background: #007bff;
    color: #ffffff;
    transform: translateY(-1px);
}

[data-theme-mode="dark"] .crazytel-product-btn {
    border-color: #0d6efd;
    color: #0d6efd;
}

[data-theme-mode="dark"] .crazytel-product-btn:hover {
    background: #0d6efd;
    color: #ffffff;
}

/* Product card specific hover effects */

.crazytel-product-sip:hover .crazytel-product-sip-icon {
    transform: scale(1.1);
}

.crazytel-product-pbx:hover .crazytel-product-pbx-icon {
    transform: scale(1.1);
}

/* Responsive adjustments for product cards */
@media (max-width: 768px) {
    .crazytel-product-card {
        margin-bottom: 1rem;
    }

    .crazytel-product-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .crazytel-product-title {
        font-size: 1.125rem;
    }

    .crazytel-product-description {
        font-size: 0.8rem;
    }

    .crazytel-product-stats {
        padding: 0.75rem;
    }

    .crazytel-stat-value {
        font-size: 1rem;
    }

    .crazytel-nbn-logo,
    .crazytel-mobile-logo {
        padding: 6px;
    }
}

/* Sidebar Text Brightness Fix */
/* Override dull sidebar text colors to make them brighter and more readable */
[data-theme-mode="dark"] .app-sidebar .side-menu__item {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__label {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme-mode="dark"] .app-sidebar .slide__category {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
}

/* Ensure icons are also bright */
[data-theme-mode="dark"] .app-sidebar .side-menu__icon {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Active state should be even brighter */
[data-theme-mode="dark"] .app-sidebar .side-menu__item.active {
    color: #ffffff !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item.active .side-menu__label {
    color: #ffffff !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item.active .side-menu__icon {
    color: #ffffff !important;
}

/* Hover states */
[data-theme-mode="dark"] .app-sidebar .side-menu__item:hover {
    color: #ffffff !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item:hover .side-menu__label {
    color: #ffffff !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item:hover .side-menu__icon {
    color: #ffffff !important;
}

/* Red question mark on hover for sidebar menu items */
.app-sidebar .side-menu__item {
    position: relative;
}

.app-sidebar .side-menu__item:hover::after {
    content: "?";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
    font-weight: bold;
    font-size: 16px;
    z-index: 10;
    pointer-events: none;
}

/* Also apply to dark theme */
[data-theme-mode="dark"] .app-sidebar .side-menu__item:hover::after {
    content: "?";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
    font-weight: bold;
    font-size: 16px;
    z-index: 10;
    pointer-events: none;
}

/* Reduce indentation for nested call history items - Force override */
.app-sidebar .slide-menu.child2 .side-menu__item,
.app-sidebar .slide-menu.child2 .slide .side-menu__item,
.app-sidebar .slide-menu.child2 li .side-menu__item {
    padding-left: 0.5rem !important;
    /* Force minimal left padding */
    margin-left: 0 !important;
    /* Remove any left margin */
}

.app-sidebar .slide-menu.child2,
.app-sidebar ul.slide-menu.child2 {
    padding-left: 0 !important;
    /* Remove container padding */
    margin-left: 0.5rem !important;
    /* Minimal container margin */
}

/* Target all nested submenu items more broadly */
.app-sidebar .slide-menu .slide-menu .side-menu__item {
    padding-left: 0.5rem !important;
    margin-left: 0 !important;
}

/* SIM Card Dashboard Styles */
.crazytel-sim-dashboard-card {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.crazytel-sim-dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.crazytel-sim-status-active {
    color: #28a745 !important;
}

.crazytel-sim-status-inactive {
    color: #dc3545 !important;
}

.crazytel-sim-status-pending {
    color: #ffc107 !important;
}

.crazytel-data-usage-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.crazytel-data-usage-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #20c997);
    transition: width 0.3s ease;
}

.crazytel-data-usage-fill.warning {
    background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.crazytel-data-usage-fill.danger {
    background: linear-gradient(90deg, #dc3545, #e74c3c);
}

/* Dark theme adjustments for SIM dashboard */
[data-theme-mode="dark"] .crazytel-sim-dashboard-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme-mode="dark"] .crazytel-data-usage-bar {
    background: rgba(255, 255, 255, 0.15);
}

/* SIM Card Action Cards */
.crazytel-action-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
    background: #ffffff;
    border: 1px solid #e9ecef;
    overflow: hidden;
}

[data-theme-mode="dark"] .crazytel-action-card {
    background: #1a1a1a;
    border: 1px solid #333;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.crazytel-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="dark"] .crazytel-action-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.crazytel-action-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.crazytel-action-card:hover .crazytel-action-icon {
    transform: scale(1.1);
}

.crazytel-action-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
}

[data-theme-mode="dark"] .crazytel-action-title {
    color: #ffffff;
}

.crazytel-action-description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6c757d;
    margin-bottom: 1rem;
}

[data-theme-mode="dark"] .crazytel-action-description {
    color: #cccccc;
}

.crazytel-action-btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 16px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: none;
}

.crazytel-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments for SIM dashboard */
@media (max-width: 768px) {
    .crazytel-sim-dashboard-card {
        margin-bottom: 1rem;
    }

    .crazytel-action-card {
        margin-bottom: 1rem;
    }

    .crazytel-action-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .crazytel-action-title {
        font-size: 1.125rem;
    }

    .crazytel-action-description {
        font-size: 0.8rem;
    }
}

/* SIM Cards Sidebar Icon Colors */
/* Specific colors for sidebar icons in the simcards section */

/* Category header styling for simcards */
.crazytel-sidebar-category-header {
    color: #fd7e14 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

[data-theme-mode="dark"] .crazytel-sidebar-category-header {
    color: #fd7e14 !important;
}

/* Main Dashboard Icon - Home */
.app-sidebar .side-menu__item[href*="main/index.php"] .side-menu__icon,
.app-sidebar .side-menu__item[href="../main/index.php"] .side-menu__icon {
    color: #28a745 !important;
}

/* SIM Card Dashboard Icon */
.app-sidebar .side-menu__item[href="index.php"] .side-menu__icon {
    color: #dc3545 !important;
}

/* Active state for ALL sidebar menu items - prominent highlighting */
.app-sidebar .side-menu__item.active {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-left: 3px solid #dc3545 !important;
    font-weight: 600 !important;
}

.app-sidebar .side-menu__item.active .side-menu__icon {
    color: #dc3545 !important;
    filter: brightness(1.4) drop-shadow(0 0 10px #dc3545) !important;
    transform: scale(1.1) !important;
}

.app-sidebar .side-menu__item.active .side-menu__label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Dark theme active state for ALL sidebar menu items */
[data-theme-mode="dark"] .app-sidebar .side-menu__item.active {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-left: 3px solid #dc3545 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item.active .side-menu__icon {
    color: #dc3545 !important;
    filter: brightness(1.5) drop-shadow(0 0 12px #dc3545) !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item.active .side-menu__label {
    color: #ffffff !important;
}

/* Manage SIM Cards Icon */
.app-sidebar .side-menu__item[href="manage.php"] .side-menu__icon {
    color: #007bff !important;
}

/* Activate New SIM Card Icon */
.app-sidebar .side-menu__item[href="activate.php"] .side-menu__icon {
    color: #28a745 !important;
}

/* Order New SIM Card Icon */
.app-sidebar .side-menu__item[href="order.php"] .side-menu__icon {
    color: #17a2b8 !important;
}

/* Porting Status Icon */
.app-sidebar .side-menu__item[href="porting-status.php"] .side-menu__icon {
    color: #6f42c1 !important;
}

/* Shipping Status Icon */
.app-sidebar .side-menu__item[href="shipping-status.php"] .side-menu__icon {
    color: #ffc107 !important;
}

/* Data Usage Reports Icon */
.app-sidebar .side-menu__item[href="data-usage.php"] .side-menu__icon {
    color: #20c997 !important;
}

/* Mobile SIM Card Plans Icon */
.app-sidebar .side-menu__item[href="mobile-plans.php"] .side-menu__icon {
    color: #e83e8c !important;
}

/* Data SIM Card Plans Icon */
.app-sidebar .side-menu__item[href="data-plans.php"] .side-menu__icon {
    color: #6610f2 !important;
}

/* Important Facts Icon */
.app-sidebar .side-menu__item[href="important-facts.php"] .side-menu__icon {
    color: #fd7e14 !important;
}

/* International Rates Icon */
.app-sidebar .side-menu__item[href="international-rates.php"] .side-menu__icon {
    color: #20c997 !important;
}

/* Network Coverage Icon */
.app-sidebar .side-menu__item[href="network-coverage.php"] .side-menu__icon {
    color: #007bff !important;
}

/* Audit Log Icon */
.app-sidebar .side-menu__item[href="audit-log.php"] .side-menu__icon {
    color: #6c757d !important;
}

/* Hover effects for colored icons */
.app-sidebar .side-menu__item:hover .side-menu__icon {
    filter: brightness(1.2) !important;
    transform: scale(1.1) !important;
    transition: all 0.3s ease !important;
}

/* Active state for colored icons */
.app-sidebar .side-menu__item.active .side-menu__icon {
    filter: brightness(1.3) drop-shadow(0 0 8px currentColor) !important;
    transform: scale(1.05) !important;
}

/* Dark theme adjustments - maintain the same colors */
[data-theme-mode="dark"] .app-sidebar .side-menu__item[href*="main/index.php"] .side-menu__icon,
[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="../main/index.php"] .side-menu__icon {
    color: #28a745 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="index.php"] .side-menu__icon {
    color: #fd7e14 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="manage.php"] .side-menu__icon {
    color: #007bff !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="activate.php"] .side-menu__icon {
    color: #28a745 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="order.php"] .side-menu__icon {
    color: #17a2b8 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="porting-status.php"] .side-menu__icon {
    color: #6f42c1 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="shipping-status.php"] .side-menu__icon {
    color: #ffc107 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="data-usage.php"] .side-menu__icon {
    color: #20c997 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="mobile-plans.php"] .side-menu__icon {
    color: #e83e8c !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="data-plans.php"] .side-menu__icon {
    color: #6610f2 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="important-facts.php"] .side-menu__icon {
    color: #fd7e14 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="international-rates.php"] .side-menu__icon {
    color: #20c997 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="network-coverage.php"] .side-menu__icon {
    color: #007bff !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href="audit-log.php"] .side-menu__icon {
    color: #6c757d !important;
}

/* SIM Card Management Styles */
.simcard-management-container {
    padding: 1rem;
}

.simcard-individual-card {
    background: var(--bs-card-bg, #fff);
    border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0, 0, 0, 0.125));
    border-radius: var(--bs-card-border-radius, 0.5rem);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.simcard-individual-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.simcard-card-header {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 1rem 1.25rem;
    border-bottom: none;
}

.simcard-card-body {
    padding: 1.5rem;
}

.simcard-status-badge {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.simcard-badge-success {
    background-color: #28a745;
    color: white;
}

.simcard-badge-warning {
    background-color: #ffc107;
    color: #212529;
}

.simcard-badge-info {
    background-color: #17a2b8;
    color: white;
}

.simcard-badge-danger {
    background-color: #dc3545;
    color: white;
}

.simcard-badge-secondary {
    background-color: #6c757d;
    color: white;
}

.simcard-info-row {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.simcard-info-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.simcard-info-label {
    font-weight: 600;
    color: #495057;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.simcard-info-value {
    font-size: 1rem;
    color: #212529;
}

.simcard-data-usage-bar {
    background: #e9ecef;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.simcard-data-usage-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.simcard-usage-critical {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.simcard-usage-high {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
}

.simcard-usage-medium {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.simcard-loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: simcard-loading-shimmer 1.5s infinite;
    border-radius: 0.375rem;
    height: 1.5rem;
    margin-bottom: 0.5rem;
}

@keyframes simcard-loading-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.simcard-no-results {
    text-align: center;
    padding: 3rem 2rem;
    color: #6c757d;
}

.simcard-actions {
    border-top: 1px solid #e9ecef;
    padding-top: 1rem;
    margin-top: 1.5rem;
}

.simcard-filter-controls {
    background: var(--bs-card-bg, #fff);
    border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0, 0, 0, 0.125));
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* Animation for new cards appearing */
.simcard-card-fade-in {
    animation: simcard-fadeInUp 0.6s ease-out;
}

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

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

/* Dark theme support for SIM card management */
[data-theme-mode="dark"] .simcard-individual-card {
    background: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-individual-card:hover {
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .simcard-card-body {
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-info-row {
    border-bottom-color: #333;
}

[data-theme-mode="dark"] .simcard-info-label {
    color: #cccccc;
}

[data-theme-mode="dark"] .simcard-info-value {
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-filter-controls {
    background: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-data-usage-bar {
    background: #333;
}

[data-theme-mode="dark"] .simcard-no-results {
    color: #cccccc;
}

[data-theme-mode="dark"] .simcard-actions {
    border-top-color: #333;
}

[data-theme-mode="dark"] .simcard-loading-skeleton {
    background: linear-gradient(90deg, #2d2d2d 25%, #404040 50%, #2d2d2d 75%);
    background-size: 200% 100%;
}

/* Modern SIM Service Cards - Inter Font Design */
.simcard-service-card {
    position: relative;
    background: linear-gradient(145deg, #111111, #1a1a1a);
    border: 1px solid #222;
    border-radius: 20px;
    padding: 2rem 2rem 1.5rem 2rem;
    /* Reduced bottom padding to ensure buttons fit */
    overflow: visible;
    /* Changed from hidden to visible to prevent button clipping */
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Uniform card dimensions moved to separate rule above for better organization */
}


.simcard-service-card:hover {
    transform: translateY(-8px);
    border-color: #333;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

[data-theme-mode="dark"] .simcard-service-card {
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
}


[data-theme-mode="dark"] .simcard-service-card:hover {
    box-shadow:
        0 20px 60px rgba(220, 53, 69, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(220, 53, 69, 0.2);
}

/* SIM Service Card Header */
.simcard-card-header {
    border-bottom: none;
}

.simcard-service-icon {
    position: relative;
}

.simcard-service-icon i {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    padding: 16px;
    border-radius: 16px;
    font-size: 1.5rem;
    box-shadow:
        0 8px 20px rgba(220, 53, 69, 0.3),
        0 2px 8px rgba(220, 53, 69, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
}

.simcard-service-icon i::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.simcard-service-card:hover .simcard-service-icon i::before {
    left: 100%;
}

.simcard-service-card:hover .simcard-service-icon i {
    transform: rotate(5deg) scale(1.1);
    box-shadow:
        0 12px 28px rgba(220, 53, 69, 0.4),
        0 4px 12px rgba(220, 53, 69, 0.3);
}

[data-theme-mode="dark"] .simcard-service-icon i {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    box-shadow:
        0 8px 20px rgba(220, 53, 69, 0.4),
        0 2px 8px rgba(220, 53, 69, 0.3);
}

/* Modern Status Badges with Glow Effects */
.simcard-status-badge {
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.simcard-status-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.simcard-service-card:hover .simcard-status-badge::before {
    left: 100%;
}

.badge-success-solid {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.badge-success-solid:hover {
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.6);
    transform: translateY(-1px);
}

.badge-warning-solid {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%) !important;
    color: #000000 !important;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

.badge-warning-solid:hover {
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.6);
    transform: translateY(-1px);
}

.badge-info-solid {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.4);
}

.badge-info-solid:hover {
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.6);
    transform: translateY(-1px);
}

.badge-danger-solid {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

.badge-danger-solid:hover {
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.6);
    transform: translateY(-1px);
}

.badge-secondary-solid {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
}

.badge-secondary-solid:hover {
    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.6);
    transform: translateY(-1px);
}

/* Modern Service Number Display */
.simcard-service-number {
    margin-bottom: 1.5rem;
}

.simcard-service-number h5 {
    font-weight: 700;
    background: linear-gradient(135deg, #212529 0%, #495057 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
    letter-spacing: -0.5px;
    line-height: 1.2;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.simcard-service-number p {
    color: #6c757d;
    font-size: 0.8rem;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

[data-theme-mode="dark"] .simcard-service-number h5 {
    background: linear-gradient(135deg, #ffffff 0%, #e9ecef 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme-mode="dark"] .simcard-service-number p {
    color: #adb5bd;
}

/* Modern Plan Information */
.simcard-plan-info {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(200, 35, 51, 0.05) 100%);
    border: 1px solid rgba(220, 53, 69, 0.1);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.simcard-plan-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #dc3545 0%, #c82333 100%);
    opacity: 0.6;
}

.simcard-plan-info .d-flex {
    align-items: center;
    margin-bottom: 0.75rem;
}

.simcard-plan-info .d-flex:last-child {
    margin-bottom: 0;
}

.simcard-plan-info .text-muted {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.simcard-plan-info .fw-medium {
    font-weight: 600;
    color: #495057;
}

.simcard-plan-info .fw-bold {
    font-weight: 700;
    font-size: 1.1rem;
}

.simcard-plan-info .text-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme-mode="dark"] .simcard-plan-info {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(200, 35, 51, 0.1) 100%);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

[data-theme-mode="dark"] .simcard-plan-info .fw-medium {
    color: #e9ecef;
}

[data-theme-mode="dark"] .simcard-plan-info .text-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Modern Data Usage Progress Bar */
.simcard-data-usage {
    margin-bottom: 1.5rem;
}

.simcard-usage-progress {
    height: 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.simcard-usage-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
}

.simcard-usage-progress .progress-bar {
    border-radius: 20px;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.simcard-usage-progress .progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.simcard-usage-progress .bg-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.simcard-usage-progress .bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%) !important;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
}

.simcard-usage-progress .bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%) !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.simcard-usage-progress .bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%) !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.simcard-usage-progress .bg-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

[data-theme-mode="dark"] .simcard-usage-progress {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Service Details */
.simcard-service-details {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

[data-theme-mode="dark"] .simcard-service-details {
    background: #0d0d0d;
    border: 1px solid #333;
    color: #cccccc;
}

/* Modern Card Actions */
.simcard-card-actions {
    border-top: 1px solid rgba(220, 53, 69, 0.1);
    background: linear-gradient(135deg, rgba(248, 249, 250, 0.5) 0%, rgba(233, 236, 239, 0.3) 100%);
    margin: 0 -1.5rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
    border-radius: 0 0 16px 16px;
}

.simcard-card-actions .btn {
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.5rem 1rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.simcard-card-actions .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.simcard-card-actions .btn:hover::before {
    left: 100%;
}

.simcard-card-actions .btn-outline-primary {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.simcard-card-actions .btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
}

.simcard-card-actions .btn-outline-warning {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    border: none;
    color: #212529;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.simcard-card-actions .btn-outline-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    color: #212529;
}

.simcard-card-actions .btn-outline-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.simcard-card-actions .btn-outline-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
    color: white;
}

[data-theme-mode="dark"] .simcard-card-actions {
    border-top: 1px solid rgba(220, 53, 69, 0.2);
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(13, 13, 13, 0.6) 100%);
}

/* Additional Modern Enhancements */
.simcard-service-card .card-body {
    padding: 1.5rem !important;
}

/* Enhance text readability and modern typography */
.simcard-service-card .text-muted.small {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.8;
}

/* Modern focus states for accessibility */
.simcard-service-card:focus-within {
    outline: none;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 0 0 3px rgba(220, 53, 69, 0.3);
}

[data-theme-mode="dark"] .simcard-service-card:focus-within {
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(220, 53, 69, 0.5);
}

/* Smooth entrance animation for new cards */
.simcard-service-card {
    animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Enhanced service details styling */
.simcard-service-details {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.8rem;
}

.simcard-service-details .row {
    margin: 0;
}

.simcard-service-details .col-6 {
    padding: 0.25rem 0;
}

/* Modern Card Layout Styles */
.simcard-modern-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    align-items: start;
    /* Changed from stretch to start to prevent unwanted stretching */
}

/* Ensure uniform card dimensions */
.simcard-service-card {
    min-height: 480px;
    /* Increased minimum height to prevent content cutoff */
    height: auto;
    /* Allow cards to grow if needed */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Distribute content evenly */
    box-sizing: border-box;
    /* Include padding in height calculation */
}

.simcard-modern-card-header {
    position: relative;
    /* Enable absolute positioning for icons */
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    /* Don't shrink header */
    min-height: 60px;
    /* Ensure consistent header height */
    padding-right: 160px;
    /* Add padding to prevent text overlap with floating icons */
}

/* Left section of card header - let it take natural space */
.simcard-modern-card-header>div:first-child {
    /* Remove all constraints - let text flow naturally */
}

/* Right section of card header - float to top right */
.simcard-modern-card-header>div:last-child {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
}

/* Plan information section */
.simcard-modern-plan-info {
    flex-shrink: 0;
    /* Don't shrink plan info */
    margin-bottom: 1.5rem;
    min-height: 100px;
    /* Ensure consistent plan info section height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Consistent pricing layout */
.simcard-modern-pricing {
    display: flex;
    align-items: baseline;
    margin: 0.75rem 0;
}

.simcard-modern-plan-name {
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
    margin-bottom: 0.5rem;
    min-height: 1.5rem;
    /* Ensure consistent height even with different text lengths */
}

.simcard-modern-period {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Data usage section with flexible height */
.simcard-modern-usage-section {
    flex: 1;
    /* Take available space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2rem;
    /* Increased margin to provide more space before buttons */
    min-height: 80px;
    /* Minimum height for consistency */
}

/* Actions section fixed at bottom */
.simcard-modern-actions {
    flex-shrink: 0;
    /* Keep at bottom */
    margin-top: auto;
    /* Push to bottom */
    /* Height and alignment properties from earlier button fix */
    z-index: 10;
    /* Ensure buttons appear above other content */
    position: relative;
    /* Ensure proper positioning */
    padding-top: 0.5rem;
    /* Add some spacing above buttons */
}

.simcard-modern-phone-number {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-top: 0.5rem;
    /* Move the name down slightly */
    margin-bottom: 0.25rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
    white-space: nowrap;
    /* Force phone number to stay on one line */
}

.simcard-modern-service-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    white-space: nowrap;
}

.simcard-modern-status-badge {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    padding: 0.5rem 1rem;
    /* Back to original comfortable padding */
    border-radius: 50px;
    font-size: 0.75rem;
    /* Back to original size */
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Back to original gap */
    white-space: nowrap;
    /* Keep this to prevent text wrapping */
    flex-shrink: 0;
    /* Don't shrink the badge */
}

.simcard-modern-status-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.simcard-modern-plan-info {
    margin-bottom: 2rem;
}

.simcard-modern-plan-name {
    color: #3b82f6;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.simcard-modern-pricing {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.simcard-modern-price {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
}

.simcard-modern-currency {
    font-size: 1.5rem;
    color: #666;
    font-weight: 400;
}

.simcard-modern-period {
    color: #666;
    font-size: 0.9rem;
    font-weight: 400;
}

.simcard-modern-usage-section {
    margin-bottom: 2rem;
}

.simcard-modern-usage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.simcard-modern-usage-label {
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

.simcard-modern-usage-percentage {
    color: #ffffff;
    font-weight: 600;
}

.simcard-modern-usage-bar-container {
    background: #1a1a1a;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.simcard-modern-usage-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #ef4444);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}

.simcard-modern-usage-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #555;
}

.simcard-modern-actions {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    height: 56px;
    /* Fixed height to ensure consistency */
}

.simcard-modern-btn-primary {
    flex: 1;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    padding: 0 1.5rem;
    /* Remove vertical padding to use container height */
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    height: 100%;
    /* Use full container height */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: 56px;
    /* Fallback for older browsers */
    opacity: 1;
    /* Ensure button is fully visible */
    z-index: 20;
    /* Make sure button appears above other elements */
}

.simcard-modern-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.simcard-modern-btn-secondary {
    width: 56px;
    /* Match height for perfect square */
    height: 100%;
    /* Use full container height */
    min-height: 56px;
    /* Fallback for older browsers */
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    /* Prevent shrinking */
    opacity: 1;
    /* Ensure button is fully visible */
    z-index: 20;
    /* Make sure button appears above other elements */
}

.simcard-modern-btn-secondary:hover {
    background: #222;
    color: #999;
    transform: translateY(-2px);
}

/* Cross-browser compatibility and fallbacks */
.simcard-modern-actions {
    /* IE11 and Edge fallbacks */
    -ms-flex-align: stretch;
    /* WebKit prefixes for older Safari versions */
    -webkit-align-items: stretch;
}

.simcard-modern-btn-primary {
    /* IE11 and Edge fallbacks */
    -ms-flex: 1;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    /* WebKit prefixes */
    -webkit-align-items: center;
    -webkit-justify-content: center;
    /* Ensure proper box-sizing */
    box-sizing: border-box;
}

.simcard-modern-btn-secondary {
    /* IE11 and Edge fallbacks */
    -ms-flex-negative: 0;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    /* WebKit prefixes */
    -webkit-align-items: center;
    -webkit-justify-content: center;
    /* Ensure proper box-sizing */
    box-sizing: border-box;
}

/* Dark theme button styles */
[data-theme-mode="dark"] .simcard-modern-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-modern-btn-primary:hover {
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

[data-theme-mode="dark"] .simcard-modern-btn-secondary {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #cccccc;
}

[data-theme-mode="dark"] .simcard-modern-btn-secondary:hover {
    background: #333333;
    color: #ffffff;
    border-color: #555;
}

/* Empty State Button Styling */
.simcard-no-results .btn,
#simcard-empty-state .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    min-width: 120px;
}

.simcard-no-results .btn i,
#simcard-empty-state .btn i {
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* General SIM Card Management Button Improvements */
.simcard-management-container .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.simcard-management-container .btn i {
    flex-shrink: 0;
}

.simcard-management-container .btn i.me-1 {
    margin-right: 0.5rem !important;
}

/* Error State Button Styling */
.simcard-error-state .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 120px;
}

/* Status badge variants */
.simcard-modern-status-badge.status-suspended {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.simcard-modern-status-badge.status-suspended .simcard-modern-status-dot {
    background: #fbbf24;
}

.simcard-modern-status-badge.status-cancelled {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.simcard-modern-status-badge.status-cancelled .simcard-modern-status-dot {
    background: #ef4444;
}

.simcard-modern-status-badge.status-new {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.simcard-modern-status-badge.status-new .simcard-modern-status-dot {
    background: #3b82f6;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .simcard-service-card {
        margin-bottom: 1.5rem;
        padding: 1.5rem;
    }

    .simcard-modern-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .simcard-modern-phone-number {
        font-size: 1.25rem;
    }

    .simcard-modern-price {
        font-size: 2.5rem;
    }

    .simcard-service-card .card-body {
        padding: 1.25rem !important;
    }

    .simcard-service-icon i {
        width: 48px;
        height: 48px;
        padding: 12px;
        font-size: 1.25rem;
    }

    /* Mobile card height adjustments */
    .simcard-service-card {
        min-height: 420px;
        /* Increased minimum height for mobile to ensure button visibility */
        height: auto;
        /* Allow cards to grow if needed on mobile */
    }

    /* Mobile button alignment improvements */
    .simcard-modern-actions {
        height: 52px;
        /* Slightly smaller on mobile */
        gap: 0.75rem;
        /* Reduce gap on smaller screens */
    }

    .simcard-modern-btn-primary {
        padding: 0 1rem;
        /* Reduce padding on mobile */
        font-size: 0.85rem;
        /* Slightly smaller font */
        min-height: 52px;
        /* Match container height */
    }

    .simcard-modern-btn-secondary {
        width: 52px;
        /* Match container height for perfect square */
        min-height: 52px;
        /* Match container height */
        font-size: 1.1rem;
        /* Slightly smaller icon */
    }

    /* Mobile header adjustments */
    .simcard-modern-card-header {
        min-height: 50px;
        /* Smaller on mobile */
        padding-right: 140px;
        /* Less padding on mobile */
    }

    .simcard-modern-phone-number {
        font-size: 1.25rem;
        /* Smaller font on mobile */
    }

    .simcard-modern-status-badge {
        font-size: 0.7rem;
        /* Slightly smaller on mobile */
        padding: 0.4rem 0.8rem;
        /* Slightly more compact padding */
    }
}

/* Filter Controls */
.simcard-filter-controls {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.simcard-filter-controls:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

[data-theme-mode="dark"] .simcard-filter-controls {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme-mode="dark"] .simcard-filter-controls:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Enhanced Search Container */
.simcard-search-container {
    position: relative;
    display: inline-block;
}

.simcard-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #007bff;
    font-size: 14px;
    z-index: 2;
    pointer-events: none;
}

.simcard-search-input {
    transition: all 0.3s ease;
}

.simcard-search-input:focus {
    border-color: #0056b3 !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important;
    transform: translateY(-1px);
}

/* Enhanced Select Dropdowns */
.simcard-filter-controls .form-select {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
    min-width: 140px;
}

.simcard-filter-controls .form-select:hover {
    border-color: #007bff;
    transform: translateY(-1px);
}

.simcard-filter-controls .form-select:focus {
    border-color: #0056b3;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
    transform: translateY(-1px);
}

[data-theme-mode="dark"] .simcard-filter-controls .form-select {
    background-color: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-filter-controls .form-select:hover {
    border-color: #007bff;
}

[data-theme-mode="dark"] .simcard-filter-controls .form-select:focus {
    border-color: #0056b3;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Modern Loading Skeleton */
.simcard-skeleton-card {
    pointer-events: none;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border: none;
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
}


.skeleton-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: simcard-shimmer 2s infinite;
    border-radius: 8px;
}

[data-theme-mode="dark"] .simcard-skeleton-card {
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme-mode="dark"] .skeleton-shimmer {
    background: linear-gradient(90deg, #2d2d2d 25%, #404040 50%, #2d2d2d 75%);
    background-size: 200% 100%;
}

@keyframes simcard-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.simcard-skeleton-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.simcard-skeleton-badge {
    width: 90px;
    height: 28px;
    border-radius: 20px;
}

.simcard-skeleton-title {
    height: 28px;
    width: 75%;
    border-radius: 8px;
}

.simcard-skeleton-subtitle {
    height: 16px;
    width: 55%;
    border-radius: 6px;
}

.simcard-skeleton-line {
    height: 16px;
    width: 100%;
    border-radius: 6px;
}

.simcard-skeleton-progress {
    height: 12px;
    width: 100%;
    border-radius: 20px;
}

.simcard-skeleton-text {
    height: 14px;
    width: 45%;
    border-radius: 6px;
}

.simcard-skeleton-button {
    height: 40px;
    width: 100%;
    border-radius: 12px;
}

/* Empty State */
.simcard-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.simcard-no-results i {
    color: #adb5bd;
    margin-bottom: 1rem;
}

[data-theme-mode="dark"] .simcard-no-results {
    color: #cccccc;
}

[data-theme-mode="dark"] .simcard-no-results i {
    color: #666;
}

/* Error State */
.simcard-error-state {
    padding: 3rem 1rem;
}

/* Management Container */
.simcard-management-container {
    padding: 1rem 0;
}

/* Responsive design for SIM card management */
@media (max-width: 768px) {
    .simcard-management-container {
        padding: 0.5rem;
    }

    .simcard-service-card {
        margin-bottom: 1rem;
    }

    .simcard-filter-controls {
        padding: 1rem;
    }

    .simcard-card-actions .btn {
        font-size: 0.8rem;
        padding: 0.375rem 0.5rem;
    }

    .simcard-plan-info,
    .simcard-service-details {
        padding: 0.5rem;
    }
}

@media (max-width: 576px) {
    .simcard-card-actions .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }

    .simcard-card-actions .btn {
        width: 100%;
    }
}

/* Network Status Styles */

/* Network Status Header Indicator */
.network-status-dropdown .header-link {
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.network-status-dropdown .header-link:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

[data-theme-mode="dark"] .network-status-dropdown .header-link:hover {
    background: rgba(255, 255, 255, 0.05);
}

.network-status-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Network Status Icon */
.network-status-icon {
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.network-status-icon.status-success {
    color: #28a745 !important;
    text-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
}

.network-status-icon.status-warning {
    color: #ffc107 !important;
    text-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
}

.network-status-icon.status-error {
    color: #fd7e14 !important;
    text-shadow: 0 2px 8px rgba(253, 126, 20, 0.4);
}

.network-status-icon.status-critical {
    color: #dc3545 !important;
    text-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    animation: critical-pulse 2s infinite;
}

@keyframes critical-pulse {

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

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.network-status-icon.status-info {
    color: #17a2b8 !important;
    text-shadow: 0 2px 8px rgba(23, 162, 184, 0.4);
}

.network-status-icon.status-loading {
    color: #6c757d !important;
    animation: loading-pulse 2s infinite;
}

@keyframes loading-pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Status Dots for Modal */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6c757d;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
}

.status-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    opacity: 0.3;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

.status-dot.status-success {
    background: #28a745;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
}

.status-dot.status-warning {
    background: #ffc107;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
}

.status-dot.status-error {
    background: #fd7e14;
    box-shadow: 0 2px 8px rgba(253, 126, 20, 0.4);
}

.status-dot.status-critical {
    background: #dc3545;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    animation: critical-blink 2s infinite;
}

@keyframes critical-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.status-dot.status-info {
    background: #17a2b8;
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.4);
}

.status-dot.status-loading {
    background: linear-gradient(45deg, #6c757d, #adb5bd);
    animation: loading-spin 1s linear infinite;
}

@keyframes loading-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Large status dots for modal */
.status-dot-large {
    width: 16px;
    height: 16px;
}

.network-status-indicator-large {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Network Status Text */
.network-status-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

/* Network Status Modal Styles - Modern Dark Theme */
.network-status-modal-content {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: #000000;
    height: 100vh;
    width: 100vw;
    overflow-y: auto;
    color: #ffffff;
}

[data-theme-mode="dark"] .network-status-modal-content {
    background: #000000;
    border: none;
}

/* Modern Modal Header */
.network-status-modal-header {
    background: #000000;
    color: #ffffff;
    padding: 1rem 2rem;
    position: relative;
    min-height: 80px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #374151;
}

.network-status-modal-header::before {
    display: none;
}

[data-theme-mode="dark"] .network-status-modal-header {
    background: #000000;
    border-bottom: 1px solid #374151;
    color: #ffffff;
}

.network-header-icon-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ef4444, #000000);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.network-header-icon {
    width: 24px;
    height: 24px;
    color: white;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
}

.network-header-icon-wrapper::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background-color: #ef4444;
    border-radius: 50%;
    border: 2px solid #ffffff;
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {

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

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

[data-theme-mode="dark"] .network-header-icon-wrapper {
    background: linear-gradient(135deg, #ef4444, #000000);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Status Overview Section - Glass Morphism */
.network-status-overview-section {
    background: #000000;
    padding: 1.5rem 0;
}

[data-theme-mode="dark"] .network-status-overview-section {
    background: #000000;
}

.network-status-overview-card {
    background: rgba(17, 24, 39, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid #374151;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 0 2rem;
}

[data-theme-mode="dark"] .network-status-overview-card {
    background: rgba(17, 24, 39, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid #374151;
}

.network-overview-icon-wrapper {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #4ade80, #10b981);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.network-overview-icon {
    font-size: 2rem;
    color: #ffffff;
}

.network-overview-icon.status-success {
    color: #ffffff;
}

.network-overview-icon.status-warning {
    color: #ffffff;
}

.network-overview-icon.status-error,
.network-overview-icon.status-danger {
    color: #ffffff;
}

.network-overview-icon.status-info {
    color: #ffffff;
}

.network-overview-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #86efac;
    margin-bottom: 0.25rem;
}

[data-theme-mode="dark"] .network-overview-title {
    color: #86efac;
}

.network-overview-message {
    font-size: 0.9rem;
    line-height: 1.3;
    color: #d1d5db;
}

.network-overview-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}

.network-overview-stat-card {
    text-align: center;
    background: transparent;
    border: none;
    padding: 0;
}

[data-theme-mode="dark"] .network-overview-stat-card {
    background: transparent;
    border: none;
}

.network-overview-stat-number {
    font-size: 1.875rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.network-overview-stat-label {
    font-size: 0.75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.stat-success .network-overview-stat-number {
    color: #86efac;
}

.stat-warning .network-overview-stat-number {
    color: #fcd34d;
}

.stat-danger .network-overview-stat-number {
    color: #fca5a5;
}

/* Network Locations Section */
.network-locations-section {
    background: #000000;
    flex: 1;
    padding: 1rem 2rem;
}

[data-theme-mode="dark"] .network-locations-section {
    background: #000000;
}

.network-section-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1rem !important;
}

[data-theme-mode="dark"] .network-section-header {
    border-bottom: none;
}

.network-section-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #111827;
    border: 1px solid #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.9rem;
}

[data-theme-mode="dark"] .network-section-icon-wrapper {
    background: #111827;
    border: 1px solid #4b5563;
}

.network-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

[data-theme-mode="dark"] .network-section-title {
    color: #ffffff;
}

.network-status-close-btn {
    background-color: #ef4444 !important;
    background-image: none !important;
    border: 2px solid #dc2626 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
    width: 36px !important;
    height: 36px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    filter: none !important;
}

.network-status-close-btn::before {
    content: '×' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

.network-status-close-btn:hover {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    transform: scale(1.05) !important;
}

[data-theme-mode="dark"] .network-status-close-btn {
    background-color: #ef4444 !important;
    background-image: none !important;
    border: 2px solid #dc2626 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
}

[data-theme-mode="dark"] .network-status-close-btn:hover {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
}

/* Old styles removed - using modern dark theme styles defined above */

/* Network Status Overview */
.network-status-overview {
    border-bottom: 1px solid #e9ecef;
}

[data-theme-mode="dark"] .network-status-overview {
    border-bottom: 1px solid #333;
}

.network-status-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
}

[data-theme-mode="dark"] .network-status-title {
    color: #ffffff;
}

/* Network Stats */
.network-status-stats {
    border-radius: 12px;
    background: rgba(248, 249, 250, 0.8);
    padding: 1rem;
}

[data-theme-mode="dark"] .network-status-stats {
    background: #0d0d0d;
    border: 1px solid #333;
}

.network-stat-item {
    text-align: center;
}

.network-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.network-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

[data-theme-mode="dark"] .network-stat-label {
    color: #cccccc;
}

/* Location Details */
.network-status-details h6 {
    color: #495057;
    font-weight: 700;
    margin-bottom: 1rem;
}

[data-theme-mode="dark"] .network-status-details h6 {
    color: #ffffff;
}

.network-location-item {
    background: #ffffff;
    border: 1px solid #e9ecef !important;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.network-location-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #28a745;
    transition: all 0.3s ease;
}

.network-location-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

[data-theme-mode="dark"] .network-location-item {
    background: #0d0d0d;
    border: 1px solid #333 !important;
}

[data-theme-mode="dark"] .network-location-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.network-location-name {
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}

[data-theme-mode="dark"] .network-location-name {
    color: #ffffff;
}

/* Network Status Badges */
.network-status-badge {
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    position: relative;
    overflow: hidden;
}

.network-status-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.network-location-item:hover .network-status-badge::before {
    left: 100%;
}

.badge-success {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.badge-warning {
    background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.badge-danger {
    background: linear-gradient(135deg, #dc3545, #e83e8c) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

/* Update border color based on status */
.network-location-item[data-status="up"]::before {
    background: #28a745;
}

.network-location-item[data-status="degraded"]::before {
    background: #ffc107;
}

.network-location-item[data-status="down"]::before {
    background: #dc3545;
}

/* Loading States */
.network-status-loading {
    padding: 2rem;
    text-align: center;
}

.network-status-loading .spinner-border {
    color: #007bff;
}

/* Button Styles */
.network-status-modal-footer .btn {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.network-status-modal-footer .btn-outline-secondary {
    background: transparent;
    border: 2px solid #6c757d;
    color: #6c757d;
}

.network-status-modal-footer .btn-outline-secondary:hover {
    background: #6c757d;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.network-status-modal-footer .btn-secondary {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.network-status-modal-footer .btn-secondary:hover {
    background: linear-gradient(135deg, #495057, #343a40);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(108, 117, 125, 0.4);
}

[data-theme-mode="dark"] .network-status-modal-footer .btn-outline-secondary {
    border-color: #cccccc;
    color: #cccccc;
}

[data-theme-mode="dark"] .network-status-modal-footer .btn-outline-secondary:hover {
    background: #cccccc;
    color: #1a1a1a;
}

/* Responsive Design */
@media (max-width: 768px) {
    .network-status-text {
        display: none !important;
    }

    .network-status-modal-content {
        margin: 0.5rem;
        border-radius: 12px;
    }

    .network-status-modal-header {
        padding: 1rem;
    }

    .network-status-overview {
        padding: 1rem !important;
    }

    .network-status-details {
        padding: 1rem !important;
    }

    .network-location-item {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .network-stat-number {
        font-size: 1.25rem;
    }

    .network-status-title {
        font-size: 1.25rem;
    }

    .network-location-name {
        font-size: 1rem;
    }

    .network-status-modal-footer {
        padding: 1rem;
    }

    .network-status-modal-footer .d-flex {
        flex-direction: column;
        gap: 1rem;
    }

    .network-status-modal-footer .btn {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .network-status-stats .row {
        text-align: center;
    }

    .network-location-item .row {
        flex-direction: column;
        text-align: center;
    }

    .network-location-item .col-md-3,
    .network-location-item .col-md-6 {
        margin-bottom: 0.5rem;
    }
}

/* Animation Classes */
.network-fade-in {
    animation: network-fadeIn 0.5s ease-out;
}

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

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

.network-slide-in {
    animation: network-slideIn 0.6s ease-out;
}

@keyframes network-slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

/* Accessibility Improvements */
.network-status-dropdown .header-link:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.network-status-modal .btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

[data-theme-mode="dark"] .network-status-modal .btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.4);
}

/* Status specific styling */
.status-all-operational {
    color: #28a745;
}

.status-performance-issues {
    color: #ffc107;
}

.status-partial-outage {
    color: #fd7e14;
}

.status-major-outage {
    color: #dc3545;
}

.status-no-data,
.status-unknown {
    color: #6c757d;
}

/* HTMX Loading Indicators */
.network-status-loading .htmx-indicator {
    display: inline-block;
}

.network-status-loading.htmx-request .htmx-indicator {
    display: inline-block;
}

.network-status-loading.htmx-request {
    opacity: 0.7;
}

/* Network Status Header Integration */
.header-content-right .network-status-dropdown {
    margin-right: 1rem;
}

.network-status-dropdown .d-flex {
    align-items: center;
    gap: 0.5rem;
}

/* Network Status Square Cards */
.network-cards-container {
    min-height: 200px;
}

.network-location-card {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 12px;
    padding: 1rem;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(20px);
    position: relative;
}

.network-location-card:hover {
    transform: scale(1.05);
    border-color: rgba(6, 182, 212, 0.4);
}

[data-theme-mode="dark"] .network-location-card {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(6, 182, 212, 0.2);
    color: #ffffff;
}

[data-theme-mode="dark"] .network-location-card:hover {
    transform: scale(1.05);
    border-color: rgba(6, 182, 212, 0.4);
}

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

.network-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.network-status-dot {
    width: 12px;
    height: 12px;
    background-color: #4ade80;
    border-radius: 50%;
    animation: statusPulse 2s infinite;
}

.network-status-dot.status-up {
    background-color: #4ade80;
}

.network-status-dot.status-degraded {
    background-color: #fcd34d;
}

.network-status-dot.status-down {
    background-color: #fca5a5;
}

.network-status-badge-card {
    background: rgba(34, 197, 94, 0.3);
    color: #ffffff;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid rgba(34, 197, 94, 0.5);
    font-weight: 600;
}

.network-status-badge-card.badge-success {
    background: rgba(34, 197, 94, 0.3);
    border: 1px solid rgba(34, 197, 94, 0.5);
}

.network-status-badge-card.badge-warning {
    background: rgba(245, 158, 11, 0.3);
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.network-status-badge-card.badge-danger {
    background: rgba(239, 68, 68, 0.3);
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.network-card-body {
    flex-grow: 1;
    margin-bottom: 0.75rem;
}

.network-card-title {
    font-weight: 600;
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1.25;
    margin-bottom: 0.75rem;
    transition: color 0.2s;
}

.network-location-card:hover .network-card-title {
    color: #67e8f9;
}

[data-theme-mode="dark"] .network-card-title {
    color: #ffffff;
}

.network-card-subtitle {
    display: none;
    /* Hide subtitle to match example */
}

.network-progress-bar {
    height: 4px;
    background-color: #1f2937;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.network-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #06b6d4);
    width: 100%;
    transition: width 0.3s ease;
}

.network-card-footer {
    margin-top: auto;
    border-top: none;
    padding-top: 0;
    display: none;
    /* Hide footer to match clean example design */
}

[data-theme-mode="dark"] .network-card-footer {
    border-top: none;
    display: none;
}

.network-card-time {
    display: none;
}

.network-card-error {
    display: none;
}

/* Remove status-specific border styling to match clean design */

/* Grid title styling */
.network-status-grid-title {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

[data-theme-mode="dark"] .network-status-grid-title {
    color: #ffffff;
}

/* Modern Footer Styles */
.network-status-modal-footer {
    background: #000000;
    border-top: 1px solid #374151;
    padding: 1rem 2rem;
    margin-top: auto;
}

[data-theme-mode="dark"] .network-status-modal-footer {
    background: #000000;
    border-top: 1px solid #374151;
}

.network-footer-info {
    color: #9ca3af;
    font-size: 0.75rem;
}

.network-footer-actions .btn {
    background-color: #ef4444 !important;
    border: 2px solid #dc2626 !important;
    color: #ffffff !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 6px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.network-footer-actions .btn:hover {
    background-color: #dc2626 !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Full Screen Modal Body - Modern Dark */
.network-status-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 160px);
    background: #000000;
}

[data-theme-mode="dark"] .network-status-modal-body {
    background: #000000;
    color: #ffffff;
}

/* Network Locations Section - Full Screen */
.network-locations-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.network-cards-container {
    flex: 1;
}

.network-refresh-btn {
    background-color: #111827;
    border: 1px solid #4b5563;
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s;
    font-weight: 500;
}

.network-refresh-btn:hover {
    background-color: #1f2937;
    transform: none;
    box-shadow: none;
}

/* Modern Responsive Grid System */
.network-cards-container .row {
    display: grid;
    gap: 1rem;
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (min-width: 768px) {
    .network-cards-container .row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .network-cards-container .row {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) {
    .network-cards-container .row {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1600px) {
    .network-cards-container .row {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 2000px) {
    .network-cards-container .row {
        grid-template-columns: repeat(8, 1fr);
    }
}

.network-cards-container .row>div {
    padding: 0;
}

/* Responsive design for cards */
@media (min-width: 2000px) {
    .network-location-card {
        min-height: 115px;
        padding: 0.875rem;
    }

    .network-cards-container {
        padding: 0 2rem;
    }

    .network-section-header {
        padding: 0 2rem 0.75rem;
    }

    .network-status-overview-card {
        margin: 0 2rem;
    }
}

@media (min-width: 1600px) {
    .network-location-card {
        min-height: 120px;
        padding: 0.875rem;
    }

    .network-cards-container {
        padding: 0 2rem;
    }

    .network-section-header {
        padding: 0 2rem 0.75rem;
    }

    .network-status-overview-card {
        margin: 0 2rem;
    }
}

@media (max-width: 1599px) and (min-width: 1400px) {
    .network-location-card {
        min-height: 115px;
        padding: 0.875rem;
    }
}

@media (max-width: 1399px) {
    .network-location-card {
        min-height: 115px;
        padding: 0.875rem;
    }
}

@media (max-width: 992px) {
    .network-location-card {
        min-height: 170px;
        padding: 1rem;
    }

    .network-card-title {
        font-size: 1rem;
    }

    .network-status-modal-header {
        padding: 1.5rem;
    }

    .network-header-icon-wrapper {
        width: 50px;
        height: 50px;
    }

    .network-header-icon {
        font-size: 1.5rem;
    }

    .network-overview-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .network-location-card {
        min-height: 160px;
        padding: 1rem;
    }

    .network-status-indicator-card {
        width: 35px;
        height: 35px;
    }

    .network-status-icon-card {
        font-size: 1.1rem;
        padding: 0.4rem;
    }

    .network-card-title {
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .network-card-subtitle {
        font-size: 0.8rem;
        line-height: 1.2;
    }

    .network-card-time,
    .network-card-error {
        font-size: 0.7rem;
    }

    .network-status-modal-header {
        padding: 1rem 2rem;
        min-height: 100px;
    }

    .network-header-icon-wrapper {
        width: 50px;
        height: 50px;
    }

    .network-header-icon {
        font-size: 1.5rem;
    }

    .network-overview-title {
        font-size: 1.25rem;
    }

    .network-overview-message {
        font-size: 1rem;
    }

    .network-section-title {
        font-size: 1.25rem;
    }

    .network-status-modal-footer {
        padding: 1rem 2rem;
    }

    .network-cards-container {
        padding: 0 1rem;
    }

    .network-section-header {
        padding: 0 1rem 1rem;
    }

    .network-status-overview-card {
        margin: 0 1rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .network-status-modal-header {
        padding: 1rem;
        min-height: 80px;
    }

    .network-status-modal-footer {
        padding: 1rem;
    }

    .network-cards-container,
    .network-section-header,
    .network-status-overview-card {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .network-section-header .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
}

/* SIM Card Order Form Styles */
.simcard-order-container {
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.simcard-order-card {
    background: var(--bs-card-bg, #fff);
    border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0, 0, 0, 0.125));
    border-radius: var(--bs-card-border-radius, 0.375rem);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.simcard-form-section {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: #f8f9fa;
}

.simcard-form-section h5 {
    color: #495057;
    margin-bottom: 1rem;
    font-weight: 600;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
}

.simcard-order-summary {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
}

.simcard-postage-option {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.simcard-postage-option:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.simcard-postage-option.selected {
    border-color: #007bff;
    background-color: #e3f2fd;
}

.simcard-address-section {
    display: none;
    animation: fadeIn 0.3s ease;
}

.simcard-address-section.show {
    display: block;
}

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

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

.simcard-progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.simcard-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    color: #6c757d;
    flex: 1;
}

.simcard-progress-step .progress-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    border: 2px solid #dee2e6;
    color: #6c757d;
    font-size: 18px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.simcard-progress-step.active .progress-icon {
    background: #007bff;
    border-color: #007bff;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.simcard-progress-step.completed .progress-icon {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

.simcard-progress-step .progress-label {
    font-size: 12px;
    text-align: center;
    font-weight: 500;
    color: #6c757d;
}

.simcard-progress-step.active .progress-label {
    color: #007bff;
    font-weight: 600;
}

.simcard-info-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.simcard-info-section h4 {
    color: #007bff;
    margin-bottom: 1rem;
    font-weight: 600;
}

.simcard-info-section .info-highlight {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 0.375rem 0.375rem 0;
}

.simcard-steps-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.simcard-steps-list li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 2rem;
}

.simcard-steps-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
    font-size: 1.1rem;
}

.simcard-error-message {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    display: none;
}

.simcard-success-message {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    display: none;
}

/* Dark theme support for SIM card order form */
[data-theme-mode="dark"] .simcard-order-card {
    background: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-order-container {
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-form-section {
    background: #0d0d0d;
    border-color: #333;
}

[data-theme-mode="dark"] .simcard-form-section h5 {
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-order-summary {
    background: #1a2332;
    border-color: #2196f3;
}

[data-theme-mode="dark"] .simcard-postage-option {
    background: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-postage-option:hover {
    border-color: #007bff;
    background-color: #1a1a1a;
}

[data-theme-mode="dark"] .simcard-postage-option.selected {
    background-color: #1a2332;
}

[data-theme-mode="dark"] .form-control {
    background: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .form-control:focus {
    background: #111111;
    border-color: #007bff;
    color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

[data-theme-mode="dark"] .form-control::placeholder {
    color: #666666;
}

[data-theme-mode="dark"] .form-select {
    background: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .form-select:focus {
    background: #111111;
    border-color: #007bff;
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-error-message {
    background: #2d1b1f;
    border-color: #842029;
    color: #ea868f;
}

[data-theme-mode="dark"] .simcard-success-message {
    background: #0f2419;
    border-color: #0a3622;
    color: #75b798;
}

[data-theme-mode="dark"] .simcard-info-section {
    background: #0d0d0d;
    border-color: #333;
}

[data-theme-mode="dark"] .simcard-info-section h4 {
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-info-section .info-highlight {
    background: #1a2332;
    border-color: #2196f3;
}

[data-theme-mode="dark"] .simcard-steps-list li::before {
    color: #75b798;
}

[data-theme-mode="dark"] .simcard-progress-steps {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] .simcard-progress-step {
    color: #cccccc;
}

[data-theme-mode="dark"] .simcard-progress-step .progress-icon {
    background: #333;
    border-color: #555;
    color: #cccccc;
}

[data-theme-mode="dark"] .simcard-progress-step.active .progress-icon {
    background: #007bff;
    border-color: #007bff;
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-progress-step.completed .progress-icon {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

[data-theme-mode="dark"] .simcard-progress-step .progress-label {
    color: #cccccc;
}

[data-theme-mode="dark"] .simcard-progress-step.active .progress-label {
    color: #007bff;
}

/* Responsive design for SIM card order form */
@media (max-width: 768px) {
    .simcard-order-container {
        padding: 0.5rem;
    }

    .simcard-form-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .simcard-progress-steps {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .simcard-progress-step {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
        justify-content: flex-start;
    }

    .simcard-progress-step .progress-icon {
        margin-bottom: 0;
        width: 45px;
        height: 45px;
        font-size: 16px;
        flex-shrink: 0;
    }

    .simcard-progress-step .progress-label {
        font-size: 14px;
        align-self: center;
    }
}

/* ============================================
   Port Updates Admin Page Styles
   ============================================ */

/* Main container */
.port-updates-page-container {
    padding: 1rem;
}

/* Table action buttons */
.port-updates-action-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    margin-right: 0.25rem;
}

/* Copy button for ticket numbers */
.port-updates-copy-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid #dee2e6;
    background: transparent;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.port-updates-copy-btn:hover {
    background: #f8f9fa;
    border-color: #0d6efd;
}

[data-theme-mode="dark"] .port-updates-copy-btn {
    border-color: #4a5568;
    color: #a0aec0;
}

[data-theme-mode="dark"] .port-updates-copy-btn:hover {
    background: #2d3748;
    border-color: #0d6efd;
    color: #ffffff;
}

/* Phone number display in table */
.port-updates-phone-display {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Subject truncation */
.port-updates-subject {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badges - specific colors */
.port-updates-badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.25rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* Loading skeleton for initial load */
.port-updates-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: port-updates-skeleton-loading 1.5s infinite;
    border-radius: 0.25rem;
    height: 1rem;
    margin: 0.25rem 0;
}

[data-theme-mode="dark"] .port-updates-skeleton {
    background: linear-gradient(90deg, #2d3748 25%, #1a202c 50%, #2d3748 75%);
    background-size: 200% 100%;
}

@keyframes port-updates-skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Details view formatting */
.port-updates-detail-row {
    display: flex;
    margin-bottom: 1rem;
    gap: 1rem;
}

.port-updates-detail-label {
    font-weight: 600;
    min-width: 150px;
    color: #6c757d;
}

[data-theme-mode="dark"] .port-updates-detail-label {
    color: #a0aec0;
}

.port-updates-detail-value {
    flex: 1;
    word-break: break-word;
}

/* Filter panel styling */
.port-updates-filter-panel {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

[data-theme-mode="dark"] .port-updates-filter-panel {
    background: #1a1a1a;
    border: 1px solid #333;
}

/* Quick search highlight */
.port-updates-highlight {
    background-color: #fff3cd;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

[data-theme-mode="dark"] .port-updates-highlight {
    background-color: #856404;
    color: #ffffff;
}

/* Responsive table handling */
@media (max-width: 992px) {
    .port-updates-subject {
        max-width: 150px;
    }

    .port-updates-action-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    #port-updates-table {
        font-size: 0.875rem;
    }

    #port-updates-table th,
    #port-updates-table td {
        padding: 0.5rem;
    }

    .port-updates-subject {
        max-width: 100px;
    }

    .port-updates-phone-display {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {

    /* Stack table cells on very small screens */
    #port-updates-table thead {
        display: none;
    }

    #port-updates-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.75rem;
    }

    [data-theme-mode="dark"] #port-updates-table tr {
        border-color: #333;
    }

    #port-updates-table td {
        display: block;
        text-align: left;
        padding: 0.5rem 0;
        border: none;
    }

    #port-updates-table td::before {
        content: attr(data-label);
        font-weight: 600;
        display: inline-block;
        margin-right: 0.5rem;
        color: #6c757d;
    }

    [data-theme-mode="dark"] #port-updates-table td::before {
        color: #a0aec0;
    }

    .port-updates-subject {
        max-width: 100%;
        white-space: normal;
    }
}

/* Pagination controls (if needed in future) */
.port-updates-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.port-updates-pagination-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #dee2e6;
    background: #ffffff;
    color: #0d6efd;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.port-updates-pagination-btn:hover {
    background: #0d6efd;
    color: #ffffff;
}

.port-updates-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-theme-mode="dark"] .port-updates-pagination-btn {
    border-color: #4a5568;
    background: #2d3748;
    color: #ffffff;
}

[data-theme-mode="dark"] .port-updates-pagination-btn:hover {
    background: #0d6efd;
}

/* Smooth transitions */
.port-updates-fade-in {
    animation: port-updates-fadeIn 0.3s ease-in;
}

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

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

/* Empty state enhancements */
.port-updates-empty-icon {
    font-size: 4rem;
    color: #dee2e6;
    margin-bottom: 1rem;
}

[data-theme-mode="dark"] .port-updates-empty-icon {
    color: #4a5568;
}

.port-updates-empty-text {
    color: #6c757d;
    font-size: 1.1rem;
}

[data-theme-mode="dark"] .port-updates-empty-text {
    color: #a0aec0;
}

/* Print styles */
@media print {

    .port-updates-search-container,
    .port-updates-filter-panel,
    .port-updates-action-btn {
        display: none;
    }

    #port-updates-table {
        border-collapse: collapse;
    }

    #port-updates-table th,
    #port-updates-table td {
        border: 1px solid #000;
        padding: 0.5rem;
    }
}

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

/* Focus styles for keyboard navigation */
.port-updates-action-btn:focus,
.port-updates-search-input:focus,
.port-updates-pagination-btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Success feedback animation */
@keyframes port-updates-success {

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

    50% {
        transform: scale(1.05);
    }
}

.port-updates-success-pulse {
    animation: port-updates-success 0.5s ease;
}

/* ========================================
   Email Logs Page Styles
   ======================================== */

/* Email Logs Container */
.email-logs-container {
    padding: 0;
}

/* Quick Search - larger input field */
.email-logs-container .form-control-lg.email-logs-input {
    font-size: 1.125rem;
}

/* Statistics Cards */
.email-logs-stats-card {
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-card-border-color, rgba(0, 0, 0, 0.125));
    border-radius: 0.375rem;
}

[data-theme-mode="dark"] .email-logs-stats-card {
    background: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

.email-logs-stat-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

[data-theme-mode="dark"] .email-logs-stat-card {
    background: #0d0d0d;
    border-color: #1a1a1a;
}

.email-logs-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme-mode="dark"] .email-logs-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: #333;
}

.email-logs-stat-card .stat-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.email-logs-stat-card .stat-content {
    flex: 1;
    min-width: 0;
}

.email-logs-stat-card .stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme-mode="dark"] .email-logs-stat-card .stat-label {
    color: #999999;
}

.email-logs-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}

.email-logs-stat-card .stat-content small {
    font-size: 0.7rem;
    display: block;
    margin-top: 0.125rem;
}

/* Filter Card */
.email-logs-filter-card {
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-card-border-color, rgba(0, 0, 0, 0.125));
    border-radius: 0.375rem;
}

[data-theme-mode="dark"] .email-logs-filter-card {
    background: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

/* Form Inputs - Dark Theme */
.email-logs-input,
.email-logs-select {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}

[data-theme-mode="dark"] .email-logs-input,
[data-theme-mode="dark"] .email-logs-select {
    background-color: #111111;
    color: #ffffff;
    border: 1px solid #333;
}

[data-theme-mode="dark"] .email-logs-input:focus,
[data-theme-mode="dark"] .email-logs-select:focus {
    background-color: #111111;
    color: #ffffff;
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

[data-theme-mode="dark"] .email-logs-input::placeholder {
    color: #666666;
}

/* Table Card */
.email-logs-table-card {
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-card-border-color, rgba(0, 0, 0, 0.125));
    border-radius: 0.375rem;
}

[data-theme-mode="dark"] .email-logs-table-card {
    background: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

/* Table Styles */
.email-logs-table {
    margin-bottom: 0;
}

.email-logs-table thead th {
    background-color: rgba(0, 0, 0, 0.02);
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

[data-theme-mode="dark"] .email-logs-table thead th {
    background-color: #0d0d0d;
    border-bottom-color: #333;
    color: #ffffff;
}

.email-logs-table tbody tr {
    transition: background-color 0.2s ease;
}

.email-logs-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme-mode="dark"] .email-logs-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.email-logs-table tbody td {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}

[data-theme-mode="dark"] .email-logs-table tbody td {
    border-bottom-color: #333;
    color: #ffffff;
}

/* Modal - Dark Theme */
.email-logs-modal .modal-content {
    background: #ffffff;
    color: #000000;
}

[data-theme-mode="dark"] .email-logs-modal .modal-content {
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid #333;
}

[data-theme-mode="dark"] .email-logs-modal .modal-header {
    border-bottom-color: #333;
}

[data-theme-mode="dark"] .email-logs-modal .modal-footer {
    border-top-color: #333;
}

[data-theme-mode="dark"] .email-logs-modal .btn-close {
    filter: invert(1);
}

[data-theme-mode="dark"] .email-logs-modal .bg-light {
    background-color: #0d0d0d !important;
}

[data-theme-mode="dark"] .email-logs-modal .bg-dark {
    background-color: #1a1a1a !important;
}

[data-theme-mode="dark"] .email-logs-modal code {
    background-color: #0d0d0d;
    color: #5cd97d;
}

[data-theme-mode="dark"] .email-logs-modal pre {
    background-color: #0d0d0d !important;
}

[data-theme-mode="dark"] .email-logs-modal .email-logs-raw-data {
    background-color: #0d0d0d !important;
    color: #5cd97d !important;
    border-color: #333 !important;
}

[data-theme-mode="dark"] .email-logs-modal .border-bottom {
    border-bottom-color: #333 !important;
}

/* Badge Colors - Solid for Dark Theme */
[data-theme-mode="dark"] .badge.bg-success {
    background-color: #28a745 !important;
}

[data-theme-mode="dark"] .badge.bg-danger {
    background-color: #dc3545 !important;
}

[data-theme-mode="dark"] .badge.bg-info {
    background-color: #17a2b8 !important;
}

[data-theme-mode="dark"] .badge.bg-primary {
    background-color: #007bff !important;
}

[data-theme-mode="dark"] .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000000;
}

[data-theme-mode="dark"] .badge.bg-secondary {
    background-color: #6c757d !important;
}

[data-theme-mode="dark"] .badge.bg-dark {
    background-color: #343a40 !important;
}

/* Transparent Badge Variants for Dark Theme */
[data-theme-mode="dark"] .badge.bg-success-transparent {
    background-color: rgba(40, 167, 69, 0.2) !important;
    color: #28a745;
}

[data-theme-mode="dark"] .badge.bg-danger-transparent {
    background-color: rgba(220, 53, 69, 0.2) !important;
    color: #dc3545;
}

[data-theme-mode="dark"] .badge.bg-info-transparent {
    background-color: rgba(23, 162, 184, 0.2) !important;
    color: #17a2b8;
}

[data-theme-mode="dark"] .badge.bg-primary-transparent {
    background-color: rgba(0, 123, 255, 0.2) !important;
    color: #007bff;
}

[data-theme-mode="dark"] .badge.bg-warning-transparent {
    background-color: rgba(255, 193, 7, 0.2) !important;
    color: #ffc107;
}

[data-theme-mode="dark"] .badge.bg-purple-transparent {
    background-color: rgba(111, 66, 193, 0.2) !important;
    color: #6f42c1;
}

/* Text Colors for Dark Theme */
[data-theme-mode="dark"] .text-purple {
    color: #9f7aea !important;
}

/* Stat Icon Backgrounds */
.bg-primary-transparent {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

.bg-success-transparent {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.bg-danger-transparent {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.bg-info-transparent {
    background-color: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
}

.bg-purple-transparent {
    background-color: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

[data-theme-mode="dark"] .bg-primary-transparent {
    background-color: rgba(0, 123, 255, 0.2);
    color: #4da3ff;
}

[data-theme-mode="dark"] .bg-success-transparent {
    background-color: rgba(40, 167, 69, 0.2);
    color: #5cd97d;
}

[data-theme-mode="dark"] .bg-danger-transparent {
    background-color: rgba(220, 53, 69, 0.2);
    color: #f56c7d;
}

[data-theme-mode="dark"] .bg-info-transparent {
    background-color: rgba(23, 162, 184, 0.2);
    color: #4dd4e8;
}

[data-theme-mode="dark"] .bg-purple-transparent {
    background-color: rgba(111, 66, 193, 0.2);
    color: #9f7aea;
}

/* Responsive Grid for Stats Cards */
@media (max-width: 991px) {
    .email-logs-stat-card {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .email-logs-stat-card {
        padding: 0.625rem 0.875rem;
        gap: 0.625rem;
    }

    .email-logs-stat-card .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }

    .email-logs-stat-card .stat-label {
        font-size: 0.6875rem;
    }

    .email-logs-stat-card .stat-value {
        font-size: 1.25rem;
    }

    .email-logs-stat-card .stat-content small {
        font-size: 0.625rem;
    }
}

/* Table Responsive Wrapper */
@media (max-width: 767px) {
    .email-logs-table {
        font-size: 0.875rem;
    }

    .email-logs-table th,
    .email-logs-table td {
        padding: 0.5rem;
    }
}

/* Empty State */
#empty-state {
    padding: 3rem 1rem;
}

#empty-state i {
    font-size: 3rem;
    color: #6c757d;
}

[data-theme-mode="dark"] #empty-state i {
    color: #999999;
}

/* Loading Spinner for Buttons */
#refresh-logs-btn.loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

/* ===================================================================
   FreeSWITCH Network Monitoring Styles
   =================================================================== */

/* Network Monitoring Container */
.network-monitoring-container {
    padding: 1rem;
}

/* Summary Cards */
.network-monitoring-summary-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.network-monitoring-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.network-monitoring-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.network-monitoring-summary-icon i {
    color: #ffffff;
}

/* Server Cards */
.network-monitoring-server-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.network-monitoring-server-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #28a745;
    transition: background 0.3s ease;
}

.network-monitoring-server-card.server-offline::before {
    background: #dc3545;
}

.network-monitoring-server-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.network-monitoring-server-name {
    color: #ffffff;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.network-monitoring-status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Copy Button for IP Address */
.network-monitoring-copy-btn {
    border: none;
    background: transparent;
    color: #999999;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    vertical-align: middle;
}

.network-monitoring-copy-btn:hover {
    color: #007bff;
    background: transparent;
    text-decoration: none;
}

.network-monitoring-copy-btn:focus {
    outline: none;
    box-shadow: none;
}

.network-monitoring-copy-btn i {
    font-size: 0.75rem;
}

/* Server Metrics */
.network-monitoring-metric {
    padding: 0.5rem;
    background: #111111;
    border-radius: 0.375rem;
    border: 1px solid #333;
}

.network-monitoring-metric small {
    font-size: 0.7rem;
    color: #999999;
    margin-bottom: 0.25rem;
}

.network-monitoring-metric span {
    color: #ffffff;
    font-size: 0.875rem;
}

.network-monitoring-metric.metric-warning {
    border-color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
}

.network-monitoring-metric.metric-warning span {
    color: #ffc107;
}

/* Loading State */
.network-monitoring-loading {
    opacity: 0.6;
}

/* Stale Data Indicator - Flashing Red Animation */
@keyframes network-monitoring-stale-pulse {

    0%,
    100% {
        border-color: #dc3545;
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    50% {
        border-color: #ff4d5a;
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
    }
}

.network-monitoring-server-card.network-monitoring-stale-data {
    animation: network-monitoring-stale-pulse 2s ease-in-out infinite;
    border-color: #dc3545 !important;
}

.network-monitoring-server-card.network-monitoring-stale-data::before {
    background: #dc3545 !important;
    width: 6px;
}

.network-monitoring-stale-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    animation: network-monitoring-badge-pulse 2s ease-in-out infinite;
}

@keyframes network-monitoring-badge-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Dark Theme Support */
[data-theme-mode="dark"] .network-monitoring-container {
    color: #ffffff;
}

[data-theme-mode="dark"] .network-monitoring-summary-card {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] .network-monitoring-server-card {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] .network-monitoring-metric {
    background: #111111;
    border-color: #333;
}

[data-theme-mode="dark"] .network-monitoring-metric small {
    color: #999999;
}

[data-theme-mode="dark"] .network-monitoring-metric span {
    color: #ffffff;
}

[data-theme-mode="dark"] .network-monitoring-server-name {
    color: #ffffff;
}

[data-theme-mode="dark"] .network-monitoring-server-card.network-monitoring-stale-data {
    border-color: #dc3545 !important;
}

[data-theme-mode="dark"] .network-monitoring-stale-badge {
    background-color: #dc3545;
    color: #ffffff;
}

[data-theme-mode="dark"] .network-monitoring-copy-btn {
    color: #999999;
}

[data-theme-mode="dark"] .network-monitoring-copy-btn:hover {
    color: #007bff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .network-monitoring-container {
        padding: 0.75rem;
    }

    .network-monitoring-server-card .card-body {
        padding: 0.75rem;
    }

    .network-monitoring-summary-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .network-monitoring-server-name {
        font-size: 0.875rem;
    }

    .network-monitoring-metric {
        padding: 0.375rem;
    }

    .network-monitoring-metric small {
        font-size: 0.65rem;
    }

    .network-monitoring-metric span {
        font-size: 0.8rem;
    }
}

/* Refresh Button Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.network-monitoring-refresh-spinning {
    animation: spin 1s linear infinite;
}

/* ================================================================
   Port Requests Pages & Modal Styling
   ================================================================ */

/* Port Requests Container */
.port-requests-container {
    padding: 0.75rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Search Wrapper */
.port-search-wrapper {
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

[data-theme-mode="dark"] .port-search-wrapper {
    background: #1a1a1a;
    border-color: #333;
}

.port-search-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.port-search-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: #ffffff;
    color: #000000;
}

[data-theme-mode="dark"] .port-search-input {
    background: #0d0d0d;
    color: #fff;
    border-color: #444;
}

.port-search-input:focus {
    outline: none;
    border-color: var(--bs-primary, #6c63ff);
    box-shadow: 0 0 0 0.2rem rgba(108, 99, 255, 0.15);
}

.port-search-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Status Filter Chips */
.port-status-filter {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.port-filter-chip {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    transition: all 0.2s;
}

.port-filter-chip:hover {
    border-color: var(--bs-primary, #6c63ff);
    background: rgba(108, 99, 255, 0.05);
}

.port-filter-chip.active {
    background: var(--bs-primary, #6c63ff);
    border-color: var(--bs-primary, #6c63ff);
    color: #fff;
}

[data-theme-mode="dark"] .port-filter-chip {
    background: #0d0d0d;
    border-color: #444;
    color: #ccc;
}

[data-theme-mode="dark"] .port-filter-chip:hover {
    background: #1a1a1a;
    border-color: #6c63ff;
}

[data-theme-mode="dark"] .port-filter-chip.active {
    background: #6c63ff;
    color: #fff;
}

/* Port Table Card */
.port-table-card {
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
}

[data-theme-mode="dark"] .port-table-card {
    background: #1a1a1a;
    border-color: #333;
}

.port-table-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-theme-mode="dark"] .port-table-header {
    border-color: #333;
}

.port-table-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.port-table-count {
    font-size: 0.8125rem;
    color: var(--bs-secondary, #6c757d);
}

/* Port Requests Table */
#port-requests-table {
    width: 100%;
    margin: 0;
    font-size: 0.8125rem;
    table-layout: auto;
}

#port-requests-table thead {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

[data-theme-mode="dark"] #port-requests-table thead {
    background: #0d0d0d;
}

#port-requests-table th {
    padding: 0.625rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--bs-secondary, #6c757d);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

#port-requests-table td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

[data-theme-mode="dark"] #port-requests-table th,
[data-theme-mode="dark"] #port-requests-table td {
    border-color: #333;
    color: #ffffff;
}

#port-requests-table tbody tr {
    transition: background-color 0.15s;
}

#port-requests-table.table-hover tbody tr:hover {
    background: #f8f9fa !important;
}

[data-theme-mode="dark"] #port-requests-table.table-hover tbody tr:hover {
    background: #2a2a2a !important;
}

/* Port Action Button */
.port-action-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Loading Overlay */
.port-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.port-loading-overlay.show {
    display: flex;
}

[data-theme-mode="dark"] .port-loading-overlay {
    background: rgba(26, 26, 26, 0.95);
}

/* Empty State */
.port-empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.port-empty-icon {
    font-size: 3rem;
    color: var(--bs-secondary, #6c757d);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.port-empty-text {
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
}

/* Pagination */
.port-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

[data-theme-mode="dark"] .port-pagination {
    border-color: #333;
}

.port-pagination-info {
    font-size: 0.8125rem;
    color: var(--bs-secondary, #6c757d);
}

.port-pagination-controls {
    display: flex;
    gap: 0.25rem;
}

.port-page-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #000);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s;
    min-width: 2rem;
    text-align: center;
}

.port-page-btn:hover:not(:disabled) {
    background: var(--bs-primary, #6c63ff);
    color: #fff;
    border-color: var(--bs-primary, #6c63ff);
}

.port-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.port-page-btn.active {
    background: var(--bs-primary, #6c63ff);
    color: #fff;
    border-color: var(--bs-primary, #6c63ff);
}

[data-theme-mode="dark"] .port-page-btn {
    background: #0d0d0d;
    border-color: #444;
    color: #fff;
}

[data-theme-mode="dark"] .port-page-btn:hover:not(:disabled) {
    background: #6c63ff;
    border-color: #6c63ff;
}

[data-theme-mode="dark"] .port-page-btn.active {
    background: #6c63ff;
    border-color: #6c63ff;
}

/* Cutover Date Highlighting for Pending Completions */
.port-cutover-urgent {
    color: #dc3545;
    font-weight: 600;
}

.port-cutover-normal {
    color: #28a745;
}

.port-cutover-urgent-bg {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

[data-theme-mode="dark"] .port-cutover-urgent {
    color: #f87171;
}

[data-theme-mode="dark"] .port-cutover-normal {
    color: #4ade80;
}

[data-theme-mode="dark"] .port-cutover-urgent-bg {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

/* Port Request Modal - Reusing existing port-details styles */
#port-request-modal .modal-content {
    border-radius: 0.5rem;
}

#port-request-modal .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-card-bg, #fff);
}

[data-theme-mode="dark"] #port-request-modal .modal-header {
    background: #1a1a1a;
    border-color: #333;
    color: #fff;
}

#port-request-modal .modal-body {
    padding: 1.25rem;
    background: var(--bs-card-bg, #fff);
}

[data-theme-mode="dark"] #port-request-modal .modal-body {
    background: #1a1a1a;
    color: #fff;
}

#port-request-modal .modal-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-card-bg, #fff);
}

[data-theme-mode="dark"] #port-request-modal .modal-footer {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] #port-request-modal .btn-close {
    filter: invert(1);
}

#port-request-modal .modal-content {
    background: var(--bs-card-bg, #fff);
}

[data-theme-mode="dark"] #port-request-modal .modal-content {
    background: #1a1a1a;
    border-color: #333;
}

/* Responsive Design for Port Requests Pages */
@media (max-width: 768px) {
    .port-search-bar {
        flex-direction: column;
    }

    .port-search-btn {
        width: 100%;
    }

    #port-requests-table {
        font-size: 0.75rem;
    }

    #port-requests-table th,
    #port-requests-table td {
        padding: 0.5rem;
    }
}

/* Status Badges Styling (shared across all port pages) */
.port-status-badge.status-pending {
    background: rgba(255, 193, 7, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.port-status-badge.status-approved {
    background: rgba(13, 202, 240, 0.15);
    color: #0dcaf0;
    border: 1px solid rgba(13, 202, 240, 0.3);
}

.port-status-badge.status-sent_to_carrier {
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.3);
}

.port-status-badge.status-completed {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.port-status-badge.status-rejected {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.port-status-badge.status-cancelled {
    background: rgba(108, 117, 125, 0.15);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

[data-theme-mode="dark"] .port-status-badge.status-pending {
    background: rgba(255, 193, 7, 0.2);
    color: #fbbf24;
}

[data-theme-mode="dark"] .port-status-badge.status-approved {
    background: rgba(13, 202, 240, 0.2);
    color: #22d3ee;
}

[data-theme-mode="dark"] .port-status-badge.status-sent_to_carrier {
    background: rgba(13, 110, 253, 0.2);
    color: #3b82f6;
}

[data-theme-mode="dark"] .port-status-badge.status-completed {
    background: rgba(40, 167, 69, 0.2);
    color: #4ade80;
}

[data-theme-mode="dark"] .port-status-badge.status-rejected {
    background: rgba(220, 53, 69, 0.2);
    color: #f87171;
}

[data-theme-mode="dark"] .port-status-badge.status-cancelled {
    background: rgba(108, 117, 125, 0.2);
    color: #9ca3af;
}

/* PPV Status Badges - Based on actual database values */
.ppv-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ppv-status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* PPV Approved - Green (validation approved) */
.ppv-status-badge.ppv-approved {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

/* No PPV Needed - Cyan (validation not required) */
.ppv-status-badge.ppv-not-needed {
    background: rgba(13, 202, 240, 0.15);
    color: #0dcaf0;
    border: 1px solid rgba(13, 202, 240, 0.3);
}

/* PPV Declined - Red (validation declined/failed) */
.ppv-status-badge.ppv-declined {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* PPV Needed - Yellow/Warning (validation required but not completed) */
.ppv-status-badge.ppv-needed {
    background: rgba(255, 193, 7, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* PPV Sent - Blue/Info (validation request sent) */
.ppv-status-badge.ppv-sent {
    background: rgba(0, 123, 255, 0.15);
    color: #007bff;
    border: 1px solid rgba(0, 123, 255, 0.3);
}

/* Not Set - Gray (no status) */
.ppv-status-badge.ppv-not-set {
    background: rgba(108, 117, 125, 0.15);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

/* Unknown - Purple (unknown/other status) */
.ppv-status-badge.ppv-unknown {
    background: rgba(108, 99, 255, 0.15);
    color: #6c63ff;
    border: 1px solid rgba(108, 99, 255, 0.3);
}

/* Dark Theme Styles */
[data-theme-mode="dark"] .ppv-status-badge.ppv-approved {
    background: rgba(40, 167, 69, 0.2);
    color: #4ade80;
}

[data-theme-mode="dark"] .ppv-status-badge.ppv-not-needed {
    background: rgba(13, 202, 240, 0.2);
    color: #22d3ee;
}

[data-theme-mode="dark"] .ppv-status-badge.ppv-declined {
    background: rgba(220, 53, 69, 0.2);
    color: #f87171;
}

[data-theme-mode="dark"] .ppv-status-badge.ppv-needed {
    background: rgba(255, 193, 7, 0.2);
    color: #fbbf24;
}

[data-theme-mode="dark"] .ppv-status-badge.ppv-sent {
    background: rgba(0, 123, 255, 0.2);
    color: #60a5fa;
}

[data-theme-mode="dark"] .ppv-status-badge.ppv-not-set {
    background: rgba(108, 117, 125, 0.2);
    color: #9ca3af;
}

[data-theme-mode="dark"] .ppv-status-badge.ppv-unknown {
    background: rgba(108, 99, 255, 0.2);
    color: #8b7fff;
}

/* ============================================
   PORTING DASHBOARD STYLES
   ============================================ */

/* Filter Controls Container */
.porting-dashboard-filter-container {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

[data-theme-mode="dark"] .porting-dashboard-filter-container {
    background: #1a1a1a;
    border-color: #333;
}

/* Quick Time Filter Buttons */
.porting-dashboard-quick-filter {
    display: inline-flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.porting-dashboard-quick-filter .btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.porting-dashboard-quick-filter .btn.active {
    background: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
}

[data-theme-mode="dark"] .porting-dashboard-quick-filter .btn {
    background: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .porting-dashboard-quick-filter .btn:hover {
    background: #2a2a2a;
}

/* Filter Dropdowns */
.porting-dashboard-filter-select {
    background: #111111;
    border: 1px solid #333;
    color: #ffffff;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

[data-theme-mode="dark"] .porting-dashboard-filter-select {
    background: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .porting-dashboard-filter-select:focus {
    background: #111111;
    border-color: #007bff;
    color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

[data-theme-mode="dark"] .porting-dashboard-filter-select option {
    background: #111111;
    color: #ffffff;
}

/* Date Range Picker Container */
.porting-dashboard-daterange-container {
    display: none;
}

.porting-dashboard-daterange-container.active {
    display: block;
}

/* Collapsible Filter Section */
.porting-dashboard-filter-container .collapse {
    transition: height 0.3s ease;
}

.porting-dashboard-filter-container .card-header {
    user-select: none;
}

.porting-dashboard-filter-container .card-header:hover {
    background: #2a2a2a !important;
}

[data-theme-mode="dark"] .porting-dashboard-filter-container .card-header:hover {
    background: #2a2a2a !important;
}

/* Chart Containers */
.porting-dashboard-chart-container {
    min-height: 300px;
    background: transparent;
    position: relative;
}

.porting-dashboard-chart-container .chart-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Stats Cards (reuse existing styles, add specific overrides) */
.porting-dashboard-stat-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

[data-theme-mode="dark"] .porting-dashboard-stat-card {
    background: #1a1a1a;
    border-color: #333;
}

.porting-dashboard-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.porting-dashboard-stat-label {
    font-size: 0.875rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Combined Totals Summary Card */
.porting-dashboard-combined-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 1rem;
}

[data-theme-mode="dark"] .porting-dashboard-combined-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-color: #333;
}

.porting-dashboard-combined-metric {
    padding: 0.5rem 0;
    border-bottom: 1px solid #333;
}

.porting-dashboard-combined-metric:last-child {
    border-bottom: none;
}

.porting-dashboard-combined-metric-label {
    font-size: 0.75rem;
    color: #9ca3af;
    display: block;
    margin-bottom: 0.25rem;
}

.porting-dashboard-combined-metric-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
}

/* Loading States */
.porting-dashboard-loading {
    animation: porting-dashboard-shimmer 1.5s infinite;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    color: transparent !important;
    min-width: 60px;
    height: 1.2em;
    display: inline-block;
}

@keyframes porting-dashboard-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Refresh Button Animation */
.porting-dashboard-refresh-spinning {
    animation: porting-dashboard-spin 1s linear infinite;
}

@keyframes porting-dashboard-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Filter Active State */
.porting-dashboard-filter-active {
    position: relative;
}

.porting-dashboard-filter-active::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #007bff;
    border-radius: 50%;
    border: 2px solid #1a1a1a;
}

/* Chart Title Styling */
.porting-dashboard-chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.porting-dashboard-chart-subtitle {
    font-size: 0.875rem;
    color: #9ca3af;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .porting-dashboard-filter-container {
        padding: 0.75rem;
    }

    .porting-dashboard-quick-filter {
        flex-direction: column;
        width: 100%;
    }

    .porting-dashboard-quick-filter .btn {
        width: 100%;
    }

    .porting-dashboard-stat-value {
        font-size: 1.5rem;
    }

    .porting-dashboard-chart-container {
        min-height: 250px;
    }
}

/* ============================================
   CGRT PAGES CONSOLIDATED STYLES
   ============================================ */

/* CGRT Dashboard Specific Styles */
.cgrt-dashboard-loading .crazytel-card-value {
    opacity: 0.7;
    transform: scale(0.98);
    transition: all 0.3s ease;
}

.cgrt-refresh-spinning {
    animation: spin 1s linear infinite;
}

#recent-customers-table tbody tr {
    transition: background-color 0.2s ease;
}

#recent-customers-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme-mode="dark"] #recent-customers-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

#weekly-trends-chart,
#monthly-comparison-chart {
    min-height: 250px;
    background: transparent;
}

#monthly-comparison-chart {
    min-height: 120px;
}

.cgrt-loading-row td {
    padding: 1rem !important;
}

.cgrt-loading-row .crazytel-loading-placeholder {
    animation: cgrt-loading-shimmer 1.5s infinite;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    height: 16px;
}

@keyframes cgrt-loading-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Add Manual Payment Form Styles */
.add-payment-container {
    padding: 1rem;
}

.add-payment-card {
    background: var(--bs-card-bg, #fff);
    border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0, 0, 0, 0.125));
    border-radius: var(--bs-card-border-radius, 0.375rem);
}

[data-theme-mode="dark"] .add-payment-card {
    background: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .add-payment-container {
    color: #ffffff;
}

[data-theme-mode="dark"] .add-payment-card .form-label {
    color: #ffffff;
}

[data-theme-mode="dark"] .add-payment-card .form-control,
[data-theme-mode="dark"] .add-payment-card .form-select {
    background: #111111;
    color: #ffffff;
    border-color: #333;
}

[data-theme-mode="dark"] .add-payment-card .form-control::placeholder {
    color: #666666;
}

[data-theme-mode="dark"] .add-payment-card .form-control:focus,
[data-theme-mode="dark"] .add-payment-card .form-select:focus {
    background: #111111;
    color: #ffffff;
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

.char-counter {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

[data-theme-mode="dark"] .char-counter {
    color: #999;
}

.char-counter.warning {
    color: #ffc107;
}

.char-counter.danger {
    color: #dc3545;
}

.form-section-header {
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.form-section-header:first-of-type {
    margin-top: 0;
}

.input-group-icon {
    border-right: none;
}

.input-group .form-control {
    border-left: none;
}

.payment-alert {
    margin-bottom: 1rem;
}

.submit-spinner {
    display: none;
    margin-left: 0.5rem;
}

.info-box {
    background: #e7f3ff;
    border-left: 4px solid #007bff;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
}

[data-theme-mode="dark"] .info-box {
    background: #0d1b2a;
    border-left-color: #007bff;
    color: #cccccc;
}

[data-theme-mode="dark"] .flatpickr-calendar {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] .flatpickr-day {
    color: #ffffff;
}

[data-theme-mode="dark"] .flatpickr-day:hover {
    background: #333;
}

[data-theme-mode="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #111111;
    color: #ffffff;
}

[data-theme-mode="dark"] .toastify {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme-mode="dark"] .toastify-close {
    opacity: 0.8;
}

[data-theme-mode="dark"] .toastify-close:hover {
    opacity: 1;
}

/* Add Ported Number Page Styles */
.number-input-section {
    transition: opacity 0.3s ease;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-info-transparent {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-danger-transparent {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.btn-group .btn-check:checked+.btn {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

[data-theme-mode="dark"] .alert-info {
    background-color: #1a1a1a;
    border-color: #17a2b8;
    color: #5dccdc;
}

[data-theme-mode="dark"] .alert-info h6.alert-heading {
    color: #5dccdc !important;
}

[data-theme-mode="dark"] .alert-success {
    background-color: #155724;
    border-color: #1e7e34;
    color: #d4edda;
}

[data-theme-mode="dark"] .alert-danger {
    background-color: #721c24;
    border-color: #a94442;
    color: #f8d7da;
}

[data-theme-mode="dark"] .alert-info-transparent {
    background-color: #0c5460;
    border-color: #117a8b;
    color: #d1ecf1;
}

[data-theme-mode="dark"] .alert-danger-transparent {
    background-color: #721c24;
    border-color: #a94442;
    color: #f8d7da;
}

[data-theme-mode="dark"] .badge.bg-danger-transparent {
    background-color: #721c24 !important;
    border: 1px solid #a94442;
    color: #f8d7da;
}

[data-theme-mode="dark"] .btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
}

[data-theme-mode="dark"] .btn-outline-primary:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-check:checked+.btn-outline-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
}

[data-theme-mode="dark"] option:disabled {
    color: #666666;
}

/* ==========================================
   PORT UPDATES PAGE STYLES
   ========================================== */

/* Port Updates Page - Clean & Compact Design */
.port-updates-container {
    padding: 0.75rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* Compact Search Bar */
.port-search-wrapper {
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

[data-theme-mode="dark"] .port-search-wrapper {
    background: #1a1a1a;
    border-color: #333;
}

.port-search-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.port-search-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

[data-theme-mode="dark"] .port-search-input {
    background: #0d0d0d;
    color: #fff;
    border-color: #444;
}

.port-search-input:focus {
    outline: none;
    border-color: var(--bs-primary, #6c63ff);
    box-shadow: 0 0 0 0.2rem rgba(108, 99, 255, 0.15);
}

.port-search-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Status Filter */
.port-status-filter {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.port-filter-chip {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    transition: all 0.2s;
}

.port-filter-chip:hover {
    border-color: var(--bs-primary, #6c63ff);
    background: rgba(108, 99, 255, 0.05);
}

.port-filter-chip.active {
    background: var(--bs-primary, #6c63ff);
    border-color: var(--bs-primary, #6c63ff);
    color: #fff;
}

[data-theme-mode="dark"] .port-filter-chip {
    background: #0d0d0d;
    border-color: #444;
    color: #ccc;
}

[data-theme-mode="dark"] .port-filter-chip:hover {
    background: #1a1a1a;
    border-color: #6c63ff;
}

[data-theme-mode="dark"] .port-filter-chip.active {
    background: #6c63ff;
    color: #fff;
}

/* Filter Option Checkbox */
.port-filter-option {
    display: flex;
    align-items: center;
    padding-left: 0.25rem;
}

.port-filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: help;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    user-select: none;
}

.port-filter-checkbox {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: #6c63ff;
}

.port-filter-label-text {
    line-height: 1.2;
}

[data-theme-mode="dark"] .port-filter-label {
    color: #ccc;
}

[data-theme-mode="dark"] .port-filter-checkbox {
    accent-color: #8c83ff;
}

/* Compact Table */
.port-table-card {
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
}

[data-theme-mode="dark"] .port-table-card {
    background: #1a1a1a;
    border-color: #333;
}

.port-table-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-theme-mode="dark"] .port-table-header {
    border-color: #333;
}

.port-table-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.port-table-count {
    font-size: 0.8125rem;
    color: var(--bs-secondary, #6c757d);
}

#port-updates-table {
    width: 100%;
    margin: 0;
    font-size: 0.8125rem;
    table-layout: auto;
    white-space: nowrap;
}

/* Subject column - allow wrapping for long subjects */
#port-updates-table th:nth-child(6),
#port-updates-table td:nth-child(6) {
    white-space: normal;
    word-break: break-word;
    max-width: 350px;
}

/* Category column - keep compact */
#port-updates-table th:nth-child(4),
#port-updates-table td:nth-child(4) {
    max-width: 180px;
    white-space: nowrap;
}

#port-updates-table thead {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

[data-theme-mode="dark"] #port-updates-table thead {
    background: #0d0d0d;
}

#port-updates-table th {
    padding: 0.625rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--bs-secondary, #6c757d);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

#port-updates-table td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

[data-theme-mode="dark"] #port-updates-table th,
[data-theme-mode="dark"] #port-updates-table td {
    border-color: #333;
}

#port-updates-table tbody tr {
    transition: background-color 0.15s;
}

#port-updates-table tbody tr:hover {
    background: rgba(108, 99, 255, 0.03);
}

[data-theme-mode="dark"] #port-updates-table tbody tr:hover {
    background: rgba(108, 99, 255, 0.1);
}

/* Compact Status Badges */
.port-status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.port-status-new {
    background: #d1e7dd;
    color: #0f5132;
}

.port-status-open {
    background: #d1ecf1;
    color: #0c5460;
}

.port-status-in_progress {
    background: #cfe2ff;
    color: #084298;
}

.port-status-completed {
    background: #e2e3e5;
    color: #41464b;
}

.port-status-archived {
    background: #f8f9fa;
    color: #6c757d;
}

.port-status-ai_completed {
    background: #e7d4ff;
    color: #5a1f8f;
}

[data-theme-mode="dark"] .port-status-new {
    background: #0a3622;
    color: #a3cfbb;
}

[data-theme-mode="dark"] .port-status-open {
    background: #055160;
    color: #9eeaf9;
}

[data-theme-mode="dark"] .port-status-in_progress {
    background: #052c65;
    color: #9ec5fe;
}

[data-theme-mode="dark"] .port-status-completed {
    background: #2b2f32;
    color: #ced4da;
}

[data-theme-mode="dark"] .port-status-archived {
    background: #1a1a1a;
    color: #999;
}

[data-theme-mode="dark"] .port-status-ai_completed {
    background: #3d1a5f;
    color: #d4b3ff;
}

/* Ticket Category Badge - Modern Pill Design with Color Coding */
.port-category-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
    border: 1px solid;
}

/* Category Colors - Completion/Success categories (Green) */
.port-category-badge.category-completion {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border-color: rgba(40, 167, 69, 0.3);
}

[data-theme-mode="dark"] .port-category-badge.category-completion {
    background: rgba(40, 167, 69, 0.2);
    color: #4ade80;
}

/* Category Colors - Cutover/Booking categories (Blue) */
.port-category-badge.category-cutover {
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.3);
}

[data-theme-mode="dark"] .port-category-badge.category-cutover {
    background: rgba(13, 110, 253, 0.2);
    color: #3b82f6;
}

/* Category Colors - Rejection/Issue categories (Red) */
.port-category-badge.category-rejection {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.3);
}

[data-theme-mode="dark"] .port-category-badge.category-rejection {
    background: rgba(220, 53, 69, 0.2);
    color: #f87171;
}

/* Category Colors - Update/Progress categories (Cyan) */
.port-category-badge.category-update {
    background: rgba(13, 202, 240, 0.15);
    color: #0dcaf0;
    border-color: rgba(13, 202, 240, 0.3);
}

[data-theme-mode="dark"] .port-category-badge.category-update {
    background: rgba(13, 202, 240, 0.2);
    color: #22d3ee;
}

/* Category Colors - Request/Query categories (Orange) */
.port-category-badge.category-request {
    background: rgba(253, 126, 20, 0.15);
    color: #fd7e14;
    border-color: rgba(253, 126, 20, 0.3);
}

[data-theme-mode="dark"] .port-category-badge.category-request {
    background: rgba(253, 126, 20, 0.2);
    color: #fb923c;
}

/* Category Colors - Confirmation categories (Purple) */
.port-category-badge.category-confirmation {
    background: rgba(108, 99, 255, 0.15);
    color: #6c63ff;
    border-color: rgba(108, 99, 255, 0.3);
}

[data-theme-mode="dark"] .port-category-badge.category-confirmation {
    background: rgba(108, 99, 255, 0.2);
    color: #8c83ff;
}

/* Category Colors - Default/Other categories (Gray) */
.port-category-badge.category-default {
    background: rgba(108, 117, 125, 0.15);
    color: #6c757d;
    border-color: rgba(108, 117, 125, 0.3);
}

[data-theme-mode="dark"] .port-category-badge.category-default {
    background: rgba(108, 117, 125, 0.2);
    color: #9ca3af;
}

/* Compact Phone Display */
.port-phone-item {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--bs-body-color);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

[data-theme-mode="dark"] .port-phone-item {
    color: #ffffff;
}

.port-phone-copy-btn {
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    background: transparent;
    border: none;
    color: var(--bs-primary, #6c63ff);
    cursor: pointer;
}

.port-phone-item:hover .port-phone-copy-btn,
.port-phone-copy-btn:focus,
.port-phone-copy-btn:hover {
    opacity: 1;
}

[data-theme-mode="dark"] .port-phone-copy-btn {
    color: #6c63ff;
}

.port-phone-copy-btn:hover {
    color: var(--bs-primary, #5a52d5);
}

/* Compact Account Code Display */
.port-account-item {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--bs-body-color);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: flex-end;
}

[data-theme-mode="dark"] .port-account-item {
    color: #ffffff;
}

/* Right-align Account Code column for neater appearance with varying lengths */
#port-updates-table thead tr th:nth-child(4),
#port-updates-table tbody tr td:nth-child(4) {
    text-align: right;
}

.port-account-copy-btn {
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    background: transparent;
    border: none;
    color: var(--bs-primary, #6c63ff);
    cursor: pointer;
}

.port-account-item:hover .port-account-copy-btn,
.port-account-copy-btn:focus,
.port-account-copy-btn:hover {
    opacity: 1;
}

[data-theme-mode="dark"] .port-account-copy-btn {
    color: #6c63ff;
}

.port-account-copy-btn:hover {
    color: var(--bs-primary, #5a52d5);
}

/* Phone Number Group - Multiple Numbers */
.port-phone-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.port-phone-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    color: #fff;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.port-phone-more-btn:hover {
    background: linear-gradient(135deg, #5a52d5 0%, #4a42c5 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(108, 99, 255, 0.3);
}

.port-phone-more-btn i {
    font-size: 0.875rem;
}

[data-theme-mode="dark"] .port-phone-more-btn {
    background: linear-gradient(135deg, #7c73ff 0%, #6a62e5 100%);
}

[data-theme-mode="dark"] .port-phone-more-btn:hover {
    background: linear-gradient(135deg, #8c83ff 0%, #7a72f5 100%);
    box-shadow: 0 2px 8px rgba(124, 115, 255, 0.4);
}

/* Phone Numbers Modal */
.port-phones-modal-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.port-modal-phone-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.port-modal-phone-item:hover {
    background: var(--bs-secondary-bg, #e9ecef);
    border-color: var(--bs-primary, #6c63ff);
}

[data-theme-mode="dark"] .port-modal-phone-item {
    background: #0d0d0d;
    border-color: #333;
}

[data-theme-mode="dark"] .port-modal-phone-item:hover {
    background: #1a1a1a;
    border-color: #6c63ff;
}

.port-modal-phone-number {
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: 'Courier New', monospace;
    color: var(--bs-body-color);
}

[data-theme-mode="dark"] .port-modal-phone-number {
    color: #fff;
}

/* Modal Dark Theme Support */
[data-theme-mode="dark"] #port-phones-modal .modal-content {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] #port-phones-modal .modal-header {
    background: #1a1a1a;
    border-color: #333;
    color: #fff;
}

[data-theme-mode="dark"] #port-phones-modal .modal-body {
    background: #1a1a1a;
    color: #fff;
}

[data-theme-mode="dark"] #port-phones-modal .modal-footer {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] #port-phones-modal .btn-close {
    filter: invert(1);
}

/* Clickable Subject Link */
.port-subject-link {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
}

.port-subject-link:hover {
    color: var(--bs-primary, #6c63ff);
    text-decoration: underline;
}

[data-theme-mode="dark"] .port-subject-link:hover {
    color: #8c83ff;
}

/* Pagination */
.port-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

[data-theme-mode="dark"] .port-pagination {
    border-color: #333;
}

.port-pagination-info {
    font-size: 0.8125rem;
    color: var(--bs-secondary, #6c757d);
}

.port-pagination-controls {
    display: flex;
    gap: 0.25rem;
}

.port-page-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #000);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s;
    min-width: 2rem;
    text-align: center;
}

.port-page-btn:hover:not(:disabled) {
    background: var(--bs-primary, #6c63ff);
    color: #fff;
    border-color: var(--bs-primary, #6c63ff);
}

.port-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.port-page-btn.active {
    background: var(--bs-primary, #6c63ff);
    color: #fff;
    border-color: var(--bs-primary, #6c63ff);
}

[data-theme-mode="dark"] .port-page-btn {
    background: #0d0d0d;
    border-color: #444;
    color: #fff;
}

[data-theme-mode="dark"] .port-page-btn:hover:not(:disabled) {
    background: #6c63ff;
    border-color: #6c63ff;
}

[data-theme-mode="dark"] .port-page-btn.active {
    background: #6c63ff;
    border-color: #6c63ff;
}

/* Compact Action Buttons */
.port-action-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    margin-right: 0.25rem;
}

/* Loading State */
.port-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.port-loading-overlay.show {
    display: flex;
}

[data-theme-mode="dark"] .port-loading-overlay {
    background: rgba(26, 26, 26, 0.95);
}

/* Empty State */
.port-empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.port-empty-icon {
    font-size: 3rem;
    color: var(--bs-secondary, #6c757d);
    opacity: 0.3;
    margin-bottom: 1rem;
}

.port-empty-text {
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
}

/* Modal Styles - Scoped to Port Updates modals only */
#port-status-modal .modal-content,
#port-phones-modal .modal-content,
#port-update-details-modal .modal-content {
    border-radius: 0.5rem;
}

#port-status-modal .modal-header,
#port-phones-modal .modal-header,
#port-update-details-modal .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

[data-theme-mode="dark"] #port-status-modal .modal-header,
[data-theme-mode="dark"] #port-phones-modal .modal-header,
[data-theme-mode="dark"] #port-update-details-modal .modal-header {
    background: #1a1a1a;
    border-color: #333;
}

#port-status-modal .modal-body,
#port-phones-modal .modal-body,
#port-update-details-modal .modal-body {
    padding: 1.25rem;
}

[data-theme-mode="dark"] #port-status-modal .modal-body,
[data-theme-mode="dark"] #port-phones-modal .modal-body,
[data-theme-mode="dark"] #port-update-details-modal .modal-body {
    background: #1a1a1a;
    color: #fff;
}

#port-status-modal .modal-footer,
#port-phones-modal .modal-footer,
#port-update-details-modal .modal-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

[data-theme-mode="dark"] #port-status-modal .modal-footer,
[data-theme-mode="dark"] #port-phones-modal .modal-footer,
[data-theme-mode="dark"] #port-update-details-modal .modal-footer {
    background: #1a1a1a;
    border-color: #333;
}

/* Status Transition */
.port-status-transition {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

[data-theme-mode="dark"] .port-status-transition {
    background: #0d0d0d;
}

/* Status Controls in Details Modal */
.port-details-status-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

#port-details-status {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #000);
    border: 1px solid var(--bs-border-color, #dee2e6);
}

[data-theme-mode="dark"] #port-details-status {
    background: #111111;
    color: #fff;
    border-color: #444;
}

[data-theme-mode="dark"] #port-details-status:focus {
    background: #1a1a1a;
    border-color: #6c63ff;
    box-shadow: 0 0 0 0.2rem rgba(108, 99, 255, 0.25);
}

/* Email Body Display */
.port-email-body-wrapper {
    position: relative;
}

.port-email-view-toggle {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.25rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

[data-theme-mode="dark"] .port-email-view-toggle {
    background: #0d0d0d;
    border-color: #333;
}

.port-email-toggle-btn {
    flex: 1;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.port-email-toggle-btn:hover {
    background: rgba(108, 99, 255, 0.1);
}

.port-email-toggle-btn.active {
    background: var(--bs-primary, #6c63ff);
    color: #fff;
}

[data-theme-mode="dark"] .port-email-toggle-btn {
    color: #ccc;
}

[data-theme-mode="dark"] .port-email-toggle-btn.active {
    color: #fff;
}

.port-email-body {
    background: #ffffff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    max-height: 500px;
    overflow: hidden;
    position: relative;
}

[data-theme-mode="dark"] .port-email-body {
    background: #ffffff;
    border-color: #333;
}

.port-email-iframe {
    width: 100%;
    min-height: 300px;
    max-height: 500px;
    border: none;
    display: block;
    background: #ffffff;
}

.port-email-plaintext {
    padding: 1.25rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 500px;
    overflow-y: auto;
    line-height: 1.8;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color);
}

[data-theme-mode="dark"] .port-email-plaintext {
    background: #0d0d0d;
    border: 1px solid #333;
    color: #fff;
}

/* Better link styling in email body */
.port-email-plaintext a,
.port-email-body a {
    color: #6c63ff;
    text-decoration: none;
    word-break: break-all;
}

.port-email-plaintext a:hover,
.port-email-body a:hover {
    text-decoration: underline;
    color: #5a52d5;
}

/* Bulk Actions Bar */
.port-bulk-actions {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideDown 0.2s ease-out;
}

.port-bulk-actions.show {
    display: flex;
}

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

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

.port-bulk-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
}

.port-bulk-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-weight: 600;
}

.port-bulk-controls {
    display: flex;
    gap: 0.5rem;
}

.port-bulk-btn {
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.port-bulk-btn-complete {
    background: #28a745;
    color: #ffffff;
}

.port-bulk-btn-complete:hover {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.port-bulk-btn-archive {
    background: #6c757d;
    color: #ffffff;
}

.port-bulk-btn-archive:hover {
    background: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.port-bulk-btn-clear {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.port-bulk-btn-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* Checkbox Styling */
.port-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: #6c63ff;
}

.port-checkbox:hover {
    transform: scale(1.1);
}

#port-updates-table thead .port-checkbox {
    accent-color: #6c63ff;
}

[data-theme-mode="dark"] .port-checkbox {
    accent-color: #8c83ff;
}

/* Checkbox column styling */
#port-updates-table th:first-child,
#port-updates-table td:first-child {
    width: 40px;
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Row selection highlight */
#port-updates-table tbody tr.selected {
    background: rgba(108, 99, 255, 0.1);
}

[data-theme-mode="dark"] #port-updates-table tbody tr.selected {
    background: rgba(108, 99, 255, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .port-search-bar {
        flex-direction: column;
    }

    .port-search-btn {
        width: 100%;
    }

    #port-updates-table {
        font-size: 0.75rem;
    }

    #port-updates-table th,
    #port-updates-table td {
        padding: 0.5rem;
    }

    .port-bulk-actions {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .port-bulk-info {
        justify-content: center;
    }

    .port-bulk-controls {
        flex-direction: column;
    }

    .port-bulk-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   FRAUD LOG SPECIFIC STYLES
   ======================================== */

/* Blocked Status Badges */
.fraud-log-blocked-badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fraud-log-blocked-badge.blocked {
    background: #dc3545;
    color: #ffffff;
}

.fraud-log-blocked-badge.allowed {
    background: #28a745;
    color: #ffffff;
}

[data-theme-mode="dark"] .fraud-log-blocked-badge.blocked {
    background: #dc3545;
    color: #ffffff;
}

[data-theme-mode="dark"] .fraud-log-blocked-badge.allowed {
    background: #28a745;
    color: #ffffff;
}

/* Whitelisted Badge */
.fraud-log-whitelist-badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.25rem;
    font-weight: 600;
    background: #17a2b8;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme-mode="dark"] .fraud-log-whitelist-badge {
    background: #17a2b8;
    color: #ffffff;
}

/* Review Decision Badges */
.fraud-log-review-badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.25rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1.5px solid;
}

.fraud-log-review-badge.approved {
    background: rgba(40, 167, 69, 0.1);
    border-color: #28a745;
    color: #28a745;
}

.fraud-log-review-badge.rejected {
    background: rgba(220, 53, 69, 0.1);
    border-color: #dc3545;
    color: #dc3545;
}

.fraud-log-review-badge.pending {
    background: rgba(255, 152, 0, 0.1);
    border-color: #ff9800;
    color: #ff9800;
}

[data-theme-mode="dark"] .fraud-log-review-badge.approved {
    background: rgba(40, 167, 69, 0.2);
    border-color: #4caf50;
    color: #4caf50;
}

[data-theme-mode="dark"] .fraud-log-review-badge.rejected {
    background: rgba(220, 53, 69, 0.2);
    border-color: #f44336;
    color: #f44336;
}

[data-theme-mode="dark"] .fraud-log-review-badge.pending {
    background: rgba(255, 152, 0, 0.2);
    border-color: #ffa726;
    color: #ffa726;
}

/* IP Address Display */
.fraud-log-ip-display {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[data-theme-mode="dark"] .fraud-log-ip-display {
    color: #e0e0e0;
}

/* Advanced Filter Panel */
.fraud-log-advanced-panel {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

[data-theme-mode="dark"] .fraud-log-advanced-panel {
    background: #1a1a1a;
    border-color: #333;
}

/* Triggered By Text */
.fraud-log-triggered-by {
    font-size: 0.75rem;
    color: #6c757d;
    font-style: italic;
}

[data-theme-mode="dark"] .fraud-log-triggered-by {
    color: #999999;
}

/* Mobile Actions Page - SIM Details Display */
.mobile-actions-sim-value {
    color: #2c3e50;
}

[data-theme-mode="dark"] .mobile-actions-sim-value {
    color: #e0e0e0;
}

/* ==================== Account Management Sidebar Styles ==================== */

.account-sidebar-nav {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem 0;
    position: sticky;
    top: 1rem;
}

[data-theme-mode="dark"] .account-sidebar-nav {
    background: #1a1a1a;
    border-color: #333;
}

.account-sidebar-header {
    padding: 0 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.75rem;
}

[data-theme-mode="dark"] .account-sidebar-header {
    border-bottom-color: #0056cc;
}

.account-sidebar-header h6 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #000000;
    margin: 0;
    letter-spacing: 0.3px;
}

[data-theme-mode="dark"] .account-sidebar-header h6 {
    color: #ffffff;
}

.account-nav {
    display: flex;
    flex-direction: column;
}

.account-nav-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    color: #495057;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    position: relative;
}

.account-nav-item:hover {
    background: #f8f9fa;
    color: #007bff;
    border-left-color: #0056cc;
    padding-left: calc(1.5rem - 3px + 3px);
}

.account-nav-item.active {
    background: #e7f1ff;
    color: #007bff;
    border-left-color: #007bff;
    font-weight: 600;
}

[data-theme-mode="dark"] .account-nav-item {
    color: #cccccc;
}

[data-theme-mode="dark"] .account-nav-item:hover {
    background: #2a2a2a;
    color: #4da6ff;
    border-left-color: #4da6ff;
}

[data-theme-mode="dark"] .account-nav-item.active {
    background: #1a3a52;
    color: #4da6ff;
    border-left-color: #4da6ff;
}

.account-nav-item i {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.account-nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Account Content Card Styles */
.account-content-card {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.2s ease;
}

.account-content-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

[data-theme-mode="dark"] .account-content-card {
    background: #1a1a1a;
    border-color: #333;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
}

[data-theme-mode="dark"] .account-content-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

.account-content-card .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1.25rem 1.5rem;
}

[data-theme-mode="dark"] .account-content-card .card-header {
    background: #0d0d0d;
    border-bottom-color: #333;
}

.account-content-card .card-body {
    padding: 1.5rem;
}

[data-theme-mode="dark"] .account-content-card .card-body {
    color: #ffffff;
}

.account-content-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #000000;
}

[data-theme-mode="dark"] .account-content-card .card-title {
    color: #ffffff;
}

.account-content-card .text-muted {
    color: #6c757d;
}

[data-theme-mode="dark"] .account-content-card .text-muted {
    color: #999999;
}

/* Responsive Design for Sidebar */
@media (max-width: 768px) {
    .account-sidebar-nav {
        position: relative;
        top: 0;
        margin-bottom: 1.5rem;
    }

    .account-nav {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding: 0 1.5rem;
    }

    .account-nav-item {
        padding: 0.625rem 1rem;
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .account-nav-item:hover {
        border-left: none;
        border-bottom-color: #0056cc;
    }

    .account-nav-item.active {
        border-left: none;
        border-bottom-color: #007bff;
    }
}

/* Small mobile devices */
@media (max-width: 576px) {
    .account-sidebar-header {
        padding: 0 1rem;
        margin-bottom: 0.75rem;
    }

    .account-nav {
        padding: 0 1rem;
    }

    .account-nav-item {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .account-nav-item i {
        width: 18px;
    }
}

/* ============================================================================
   MAKE / MANAGE PAYMENTS SECTION STYLES
   ============================================================================ */

/* Payment tabs styling */
#paymentTabs .nav-link {
    color: #495057;
    font-weight: 500;
    border-color: transparent;
    transition: all 0.2s ease;
}

#paymentTabs .nav-link:hover {
    color: #007bff;
    border-color: transparent;
    background: #f8f9fa;
}

#paymentTabs .nav-link.active {
    color: #007bff;
    border-bottom: 2px solid #007bff;
    font-weight: 600;
    background: transparent;
}

[data-theme-mode="dark"] #paymentTabs .nav-link {
    color: #cccccc;
    border-color: #333;
}

[data-theme-mode="dark"] #paymentTabs .nav-link:hover {
    color: #4da6ff;
    background: #2a2a2a;
    border-color: #333;
}

[data-theme-mode="dark"] #paymentTabs .nav-link.active {
    color: #4da6ff;
    border-bottom-color: #4da6ff;
    background: transparent;
}

/* Quick amount buttons */
.quick-amount {
    min-width: 60px;
    transition: all 0.2s ease;
}

.quick-amount:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

.quick-amount.active {
    background-color: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
}

[data-theme-mode="dark"] .quick-amount {
    color: #cccccc;
    border-color: #333;
    background: #111111;
}

[data-theme-mode="dark"] .quick-amount:hover {
    color: #4da6ff;
    border-color: #4da6ff;
    background: #2a2a2a;
    box-shadow: 0 4px 8px rgba(77, 166, 255, 0.2);
}

[data-theme-mode="dark"] .quick-amount.active {
    background-color: #4da6ff !important;
    color: #000000 !important;
    border-color: #4da6ff !important;
}

/* Payment form elements dark theme support */
[data-theme-mode="dark"] .account-content-card .form-control,
[data-theme-mode="dark"] .account-content-card .form-select {
    background-color: #111111;
    color: #ffffff;
    border-color: #333;
}

[data-theme-mode="dark"] .account-content-card .form-control:focus,
[data-theme-mode="dark"] .account-content-card .form-select:focus {
    background-color: #111111;
    color: #ffffff;
    border-color: #4da6ff;
    box-shadow: 0 0 0 0.25rem rgba(77, 166, 255, 0.25);
}

[data-theme-mode="dark"] .account-content-card .form-control:disabled,
[data-theme-mode="dark"] .account-content-card .form-select:disabled {
    background-color: #0d0d0d;
    color: #666666;
    border-color: #333;
}

[data-theme-mode="dark"] .account-content-card .form-control::placeholder {
    color: #666666;
}

[data-theme-mode="dark"] .account-content-card .input-group-text {
    background-color: #0d0d0d;
    color: #cccccc;
    border-color: #333;
}

[data-theme-mode="dark"] .account-content-card .form-check-input {
    background-color: #111111;
    border-color: #333;
}

[data-theme-mode="dark"] .account-content-card .form-check-input:checked {
    background-color: #4da6ff;
    border-color: #4da6ff;
}

[data-theme-mode="dark"] .account-content-card .form-check-label {
    color: #ffffff;
}

/* Tab content animations */
.tab-pane {
    animation: fadeIn 0.3s ease-in-out;
}

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

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

/* Alert styling in dark theme for payments section */
[data-theme-mode="dark"] .account-content-card .alert-info {
    background-color: #1a3a52;
    border-color: #2a5a82;
    color: #4da6ff;
}

[data-theme-mode="dark"] .account-content-card .alert-warning {
    background-color: #4a3a1a;
    border-color: #7a5a2a;
    color: #ffc107;
}

/* Bank deposit details card */
.border-primary {
    border-color: #007bff !important;
}

[data-theme-mode="dark"] .border-primary {
    border-color: #4da6ff !important;
}

.bg-primary-transparent {
    background-color: rgba(0, 123, 255, 0.1);
}

[data-theme-mode="dark"] .bg-primary-transparent {
    background-color: rgba(77, 166, 255, 0.15);
}

.text-primary {
    color: #007bff !important;
}

[data-theme-mode="dark"] .text-primary {
    color: #4da6ff !important;
}

/* Bank deposit card specific styling */
.card.border-primary .card-header {
    border-bottom: 1px solid #007bff;
}

[data-theme-mode="dark"] .card.border-primary .card-header {
    border-bottom-color: #4da6ff;
    background-color: rgba(77, 166, 255, 0.1);
}

[data-theme-mode="dark"] .card.border-primary .card-body {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* Copy button styling */
.btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
}

.btn-outline-primary:hover {
    background-color: #007bff;
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-outline-primary {
    color: #4da6ff;
    border-color: #4da6ff;
}

[data-theme-mode="dark"] .btn-outline-primary:hover {
    background-color: #4da6ff;
    color: #000000;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-success {
    background-color: #3dd865;
    border-color: #3dd865;
    color: #000000;
}

/* Font monospace for account numbers */
.font-monospace {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.05em;
}

/* PayPal tab specific styling */
.ri-paypal-line {
    color: #003087;
}

[data-theme-mode="dark"] .ri-paypal-line {
    color: #009cde;
}

/* PayPal benefits card */
.card.bg-light {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef;
}

[data-theme-mode="dark"] .card.bg-light {
    background-color: #0d0d0d !important;
    border-color: #333;
}

[data-theme-mode="dark"] .card.bg-light .card-body {
    color: #ffffff;
}

[data-theme-mode="dark"] .card.bg-light h6 {
    color: #ffffff;
}

[data-theme-mode="dark"] .card.bg-light .text-muted {
    color: #999999 !important;
}

/* Large PayPal icon */
.fs-48 {
    font-size: 48px;
}

/* Alert success styling in dark theme */
[data-theme-mode="dark"] .account-content-card .alert-success {
    background-color: #1a4a2a;
    border-color: #2a6a3a;
    color: #3dd865;
}

/* Responsive payment form */
@media (max-width: 768px) {

    .quick-amount,
    .quick-amount-paypal {
        min-width: 50px;
        font-size: 0.85rem;
        padding: 0.375rem 0.75rem;
    }

    #paymentTabs .nav-link {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    /* Bank deposit responsive */
    .card.border-primary .card-body .row.g-4 {
        row-gap: 1.5rem !important;
    }

    /* PayPal icon size on mobile */
    .fs-48 {
        font-size: 36px;
    }
}

/* Extra small mobile devices */
@media (max-width: 576px) {
    #paymentTabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #paymentTabs .nav-item {
        flex-shrink: 0;
    }

    #paymentTabs .nav-link {
        font-size: 0.8rem;
        padding: 0.5rem;
        white-space: nowrap;
    }

    #paymentTabs .nav-link i {
        margin-right: 0.25rem !important;
    }
}

/* ============================================================================
   PAYMENT HISTORY SECTION STYLES
   ============================================================================ */

/* Payment history summary cards */
.payment-history-summary-card {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.payment-history-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

[data-theme-mode="dark"] .payment-history-summary-card {
    background: #0d0d0d;
    border-color: #333;
}

[data-theme-mode="dark"] .payment-history-summary-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

[data-theme-mode="dark"] .payment-history-summary-card .card-body {
    color: #ffffff;
}

[data-theme-mode="dark"] .payment-history-summary-card h4 {
    color: #ffffff;
}

/* Summary card icons */
.payment-history-summary-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 24px;
}

.bg-primary-subtle {
    background-color: rgba(0, 123, 255, 0.1);
}

.bg-success-subtle {
    background-color: rgba(40, 167, 69, 0.1);
}

.bg-info-subtle {
    background-color: rgba(23, 162, 184, 0.1);
}

[data-theme-mode="dark"] .bg-primary-subtle {
    background-color: rgba(77, 166, 255, 0.15);
}

[data-theme-mode="dark"] .bg-success-subtle {
    background-color: rgba(61, 216, 101, 0.15);
}

[data-theme-mode="dark"] .bg-info-subtle {
    background-color: rgba(23, 162, 184, 0.15);
}

/* Payment history table */
.payment-history-table {
    margin-bottom: 0;
}

.payment-history-table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
    padding: 1rem 0.75rem;
}

[data-theme-mode="dark"] .payment-history-table thead th {
    background-color: #0d0d0d;
    border-bottom-color: #333;
    color: #cccccc;
}

.payment-history-table tbody td {
    padding: 1rem 0.75rem;
    vertical-align: middle;
    color: #495057;
}

[data-theme-mode="dark"] .payment-history-table tbody td {
    color: #cccccc;
    border-color: #333;
}

.payment-history-table tbody tr:hover {
    background-color: #f8f9fa;
}

[data-theme-mode="dark"] .payment-history-table tbody tr:hover {
    background-color: #1a1a1a;
}

/* Status badges */
.badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}

.badge i {
    font-size: 0.875rem;
}

/* Action buttons in table */
.payment-history-table .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Empty state styling */
#payment-history-empty-state .fs-48 {
    font-size: 48px;
}

/* Pagination styling */
.pagination-sm .page-link {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

[data-theme-mode="dark"] .pagination-sm .page-link {
    background-color: #1a1a1a;
    border-color: #333;
    color: #cccccc;
}

[data-theme-mode="dark"] .pagination-sm .page-item.active .page-link {
    background-color: #4da6ff;
    border-color: #4da6ff;
    color: #000000;
}

[data-theme-mode="dark"] .pagination-sm .page-link:hover {
    background-color: #2a2a2a;
    border-color: #444;
    color: #ffffff;
}

[data-theme-mode="dark"] .pagination-sm .page-item.disabled .page-link {
    background-color: #0d0d0d;
    border-color: #333;
    color: #666666;
}

/* Filter section styling */
[data-theme-mode="dark"] .account-content-card .form-select-sm,
[data-theme-mode="dark"] .account-content-card .form-select {
    background-color: #111111;
    color: #ffffff;
    border-color: #333;
}

[data-theme-mode="dark"] .account-content-card .form-select-sm:focus,
[data-theme-mode="dark"] .account-content-card .form-select:focus {
    background-color: #111111;
    color: #ffffff;
    border-color: #4da6ff;
    box-shadow: 0 0 0 0.25rem rgba(77, 166, 255, 0.25);
}

/* Text colors in dark theme */
[data-theme-mode="dark"] .text-success {
    color: #3dd865 !important;
}

[data-theme-mode="dark"] .text-info {
    color: #17a2b8 !important;
}

/* Responsive payment history */
@media (max-width: 992px) {
    .payment-history-summary-card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .payment-history-table {
        font-size: 0.875rem;
    }

    .payment-history-table thead th,
    .payment-history-table tbody td {
        padding: 0.75rem 0.5rem;
    }

    .payment-history-summary-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .payment-history-summary-card h4 {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .payment-history-table {
        font-size: 0.8rem;
    }

    .payment-history-table .btn-sm {
        padding: 0.125rem 0.25rem;
        font-size: 0.75rem;
    }

    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ============================================================================
   CLOSE ACCOUNT SECTION STYLES
   ============================================================================ */

/* Danger menu item styling */
.account-nav-item-danger {
    color: #dc3545 !important;
    border-top: 1px solid #dee2e6;
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.account-nav-item-danger:hover {
    background: #f8d7da !important;
    color: #dc3545 !important;
    border-left-color: #dc3545 !important;
}

.account-nav-item-danger.active {
    background: #f8d7da !important;
    color: #dc3545 !important;
    border-left-color: #dc3545 !important;
}

[data-theme-mode="dark"] .account-nav-item-danger {
    color: #f87171 !important;
    border-top-color: #333;
}

[data-theme-mode="dark"] .account-nav-item-danger:hover {
    background: #4a1a1a !important;
    color: #f87171 !important;
    border-left-color: #f87171 !important;
}

[data-theme-mode="dark"] .account-nav-item-danger.active {
    background: #4a1a1a !important;
    color: #f87171 !important;
    border-left-color: #f87171 !important;
}

/* Close account card header */
.close-account-card .card-header {
    border-bottom: 2px solid #dc3545;
}

[data-theme-mode="dark"] .close-account-card .card-header {
    border-bottom-color: #f87171;
}

/* Danger and warning subtle backgrounds */
.bg-danger-subtle {
    background-color: rgba(220, 53, 69, 0.1);
    border-bottom: 1px solid rgba(220, 53, 69, 0.2);
}

.bg-warning-subtle {
    background-color: rgba(255, 193, 7, 0.1);
    border-bottom: 1px solid rgba(255, 193, 7, 0.2);
}

.bg-success-subtle {
    background-color: rgba(40, 167, 69, 0.1);
    border-bottom: 1px solid rgba(40, 167, 69, 0.2);
}

[data-theme-mode="dark"] .bg-danger-subtle {
    background-color: rgba(248, 113, 113, 0.15);
    border-bottom-color: rgba(248, 113, 113, 0.2);
}

[data-theme-mode="dark"] .bg-warning-subtle {
    background-color: rgba(255, 193, 7, 0.15);
    border-bottom-color: rgba(255, 193, 7, 0.2);
}

[data-theme-mode="dark"] .bg-success-subtle {
    background-color: rgba(61, 216, 101, 0.15);
    border-bottom-color: rgba(61, 216, 101, 0.2);
}

/* Text colors for warnings */
.text-danger {
    color: #dc3545 !important;
}

.text-warning {
    color: #ffc107 !important;
}

[data-theme-mode="dark"] .text-danger {
    color: #f87171 !important;
}

[data-theme-mode="dark"] .text-warning {
    color: #ffc107 !important;
}

/* Large font size for icons */
.fs-20 {
    font-size: 20px;
}

.fs-24 {
    font-size: 24px;
}

/* Danger card border */
.card.border-danger {
    border-color: #dc3545 !important;
    border-width: 2px;
}

[data-theme-mode="dark"] .card.border-danger {
    border-color: #f87171 !important;
}

/* Danger button styling */
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

.btn-danger:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
    color: #ffffff;
}

.btn-danger:disabled {
    background-color: #dc3545;
    border-color: #dc3545;
    opacity: 0.5;
    cursor: not-allowed;
}

[data-theme-mode="dark"] .btn-danger {
    background-color: #f87171;
    border-color: #f87171;
    color: #000000;
}

[data-theme-mode="dark"] .btn-danger:hover {
    background-color: #ef4444;
    border-color: #ef4444;
    color: #000000;
}

[data-theme-mode="dark"] .btn-danger:disabled {
    background-color: #f87171;
    border-color: #f87171;
    opacity: 0.5;
}

/* Danger card header */
.card-header.bg-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

[data-theme-mode="dark"] .card-header.bg-danger {
    background-color: #f87171 !important;
    border-color: #f87171 !important;
}

[data-theme-mode="dark"] .card-header.bg-danger h6 {
    color: #000000 !important;
}

/* Close account form checkboxes */
.close-account-card .form-check {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
}

[data-theme-mode="dark"] .close-account-card .form-check {
    background-color: #0d0d0d;
    border-color: #333;
}

.close-account-card .form-check-input:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

[data-theme-mode="dark"] .close-account-card .form-check-input:checked {
    background-color: #f87171;
    border-color: #f87171;
}

/* Confirmation text input styling */
#confirmation-text {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
    text-transform: uppercase;
}

#confirmation-text::placeholder {
    text-transform: none;
    font-weight: normal;
}

/* Spinning loader animation */
.ri-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Alternative options buttons */
.close-account-card .btn-outline-primary,
.close-account-card .btn-outline-secondary,
.close-account-card .btn-outline-info {
    transition: all 0.2s ease;
}

.close-account-card .btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

.close-account-card .btn-outline-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
}

.close-account-card .btn-outline-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.2);
}

/* Responsive close account section */
@media (max-width: 768px) {
    .close-account-card .fs-24 {
        font-size: 20px;
    }

    .close-account-card .fs-20 {
        font-size: 18px;
    }

    .close-account-card .card-body .row.g-3>div {
        margin-bottom: 1rem;
    }
}

/* ============================================================================
   PLANS & SUBSCRIPTIONS SECTION STYLES
   ============================================================================ */

/* Plan cards */
.plan-card {
    transition: all 0.2s ease;
}

.plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme-mode="dark"] .plan-card {
    background-color: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] .plan-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.plan-card.border-success {
    border-color: #28a745 !important;
    border-width: 2px;
}

[data-theme-mode="dark"] .plan-card.border-success {
    border-color: #3dd865 !important;
}

/* Available plan cards */
.available-plan-card {
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
}

.available-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: #007bff;
}

[data-theme-mode="dark"] .available-plan-card {
    background-color: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] .available-plan-card:hover {
    border-color: #4da6ff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.plan-popular {
    border-color: #007bff !important;
    border-width: 2px;
}

[data-theme-mode="dark"] .plan-popular {
    border-color: #4da6ff !important;
}

/* Popular badge */
.plan-popular-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    z-index: 1;
}

.plan-popular-badge .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme-mode="dark"] .plan-popular-badge .badge {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Plan features list */
.plan-features ul li {
    font-size: 0.875rem;
}

.plan-details p {
    font-size: 0.9rem;
}

/* Usage progress bars */
.progress {
    background-color: #e9ecef;
    border-radius: 0.375rem;
    overflow: hidden;
}

[data-theme-mode="dark"] .progress {
    background-color: #333;
}

.progress-bar {
    transition: width 0.6s ease;
}

/* Plan action buttons */
.plan-card .btn-sm {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Billing information card */
[data-theme-mode="dark"] .account-content-card .card {
    background-color: #0d0d0d;
    border-color: #333;
}

[data-theme-mode="dark"] .account-content-card .card-header {
    background-color: #111111;
    border-bottom-color: #333;
    color: #ffffff;
}

/* Text colors */
[data-theme-mode="dark"] .text-primary {
    color: #4da6ff !important;
}

[data-theme-mode="dark"] .text-success {
    color: #3dd865 !important;
}

[data-theme-mode="dark"] .text-warning {
    color: #ffc107 !important;
}

/* Badge styling */
.badge.bg-success {
    background-color: #28a745 !important;
}

.badge.bg-info {
    background-color: #17a2b8 !important;
}

.badge.bg-primary {
    background-color: #007bff !important;
}

[data-theme-mode="dark"] .badge.bg-success {
    background-color: #3dd865 !important;
    color: #000000;
}

[data-theme-mode="dark"] .badge.bg-info {
    background-color: #17a2b8 !important;
    color: #ffffff;
}

[data-theme-mode="dark"] .badge.bg-primary {
    background-color: #4da6ff !important;
    color: #000000;
}

/* Responsive plans section */
@media (max-width: 992px) {
    .available-plan-card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .plan-card .row.g-4>div {
        margin-bottom: 1rem;
    }

    .plan-card .d-flex.gap-2 {
        flex-direction: column;
    }

    .plan-card .btn-sm {
        width: 100%;
    }

    .available-plan-card {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 576px) {
    .plan-card .card-body {
        padding: 1rem;
    }

    .plan-details p,
    .plan-features ul li {
        font-size: 0.8rem;
    }
}

/* ============================================================================
   CALL DETAIL RECORDS (CDR) SECTION STYLES
   ============================================================================ */

/* CDR statistics cards */
.cdr-stat-card {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.cdr-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

[data-theme-mode="dark"] .cdr-stat-card {
    background-color: #0d0d0d;
    border-color: #333;
}

[data-theme-mode="dark"] .cdr-stat-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

[data-theme-mode="dark"] .cdr-stat-card .card-body {
    color: #ffffff;
}

[data-theme-mode="dark"] .cdr-stat-card h4 {
    color: #ffffff;
}

/* CDR stat icons */
.cdr-stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 24px;
}

/* CDR table styling */
.cdr-table {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.cdr-table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    padding: 1rem 0.75rem;
    white-space: nowrap;
}

[data-theme-mode="dark"] .cdr-table thead th {
    background-color: #0d0d0d;
    border-bottom-color: #333;
    color: #cccccc;
}

.cdr-table tbody td {
    padding: 1rem 0.75rem;
    vertical-align: middle;
    color: #495057;
}

[data-theme-mode="dark"] .cdr-table tbody td {
    color: #cccccc;
    border-color: #333;
}

.cdr-table tbody tr:hover {
    background-color: #f8f9fa;
}

[data-theme-mode="dark"] .cdr-table tbody tr:hover {
    background-color: #1a1a1a;
}

/* Direction indicators */
.text-success {
    color: #28a745 !important;
}

.text-primary {
    color: #007bff !important;
}

[data-theme-mode="dark"] .text-success {
    color: #3dd865 !important;
}

[data-theme-mode="dark"] .text-primary {
    color: #4da6ff !important;
}

/* CDR action buttons */
.cdr-table .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Empty state */
#cdr-empty-state .fs-48 {
    font-size: 48px;
}

/* Filter card styling */
[data-theme-mode="dark"] .card.bg-light {
    background-color: #0d0d0d !important;
    border-color: #333;
}

[data-theme-mode="dark"] .card.bg-light .card-header {
    background-color: #111111 !important;
    border-bottom-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .card.bg-light .card-body {
    color: #ffffff;
}

/* Responsive CDR section */
@media (max-width: 992px) {
    .cdr-stat-card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .cdr-table {
        font-size: 0.8rem;
    }

    .cdr-table thead th,
    .cdr-table tbody td {
        padding: 0.75rem 0.5rem;
    }

    .cdr-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .cdr-stat-card h4 {
        font-size: 1.25rem;
    }

    /* Hide some columns on mobile */
    .cdr-table thead th:nth-child(9),
    .cdr-table tbody td:nth-child(9) {
        display: none;
    }
}

@media (max-width: 576px) {
    .cdr-table {
        font-size: 0.75rem;
    }

    .cdr-table thead th,
    .cdr-table tbody td {
        padding: 0.5rem 0.25rem;
    }

    .cdr-table .btn-sm {
        padding: 0.125rem 0.25rem;
        font-size: 0.75rem;
    }

    /* Hide location column on small screens */
    .cdr-table thead th:nth-child(9),
    .cdr-table tbody td:nth-child(9) {
        display: none;
    }

    /* Stack table cells vertically on very small screens */
    .cdr-table thead th,
    .cdr-table tbody td {
        display: block;
        width: 100%;
        text-align: left;
        border: none;
        padding: 0.5rem 0;
    }

    .cdr-table thead {
        display: none;
    }

    .cdr-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.75rem;
    }

    [data-theme-mode="dark"] .cdr-table tbody tr {
        border-color: #333;
    }

    .cdr-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        display: inline-block;
        width: 120px;
        color: #6c757d;
    }

    [data-theme-mode="dark"] .cdr-table tbody td::before {
        color: #999999;
    }
}

/* ============================================================================
   CRAZYAI CDR DETAIL MODAL STYLES
   ============================================================================ */

/* CDR Detail Modal Table */
.crazyai-cdr-detail-table {
    font-size: 0.875rem;
}

.crazyai-cdr-detail-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.crazyai-cdr-detail-table tr:last-child td {
    border-bottom: none;
}

[data-theme-mode="dark"] .crazyai-cdr-detail-table td.text-muted {
    color: #888888 !important;
}

/* CDR Timeline Styles */
.crazyai-cdr-timeline {
    position: relative;
    padding-left: 30px;
}

.crazyai-cdr-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #3b82f6 0%, #333 100%);
}

.crazyai-cdr-timeline-item {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.crazyai-cdr-timeline-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.crazyai-cdr-timeline-marker {
    position: absolute;
    left: -30px;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.crazyai-cdr-timeline-marker i {
    font-size: 10px;
}

.crazyai-cdr-timeline-content {
    padding-left: 10px;
}

.crazyai-cdr-timeline-content pre {
    font-size: 0.7rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 0.5rem;
    color: #aaa;
}

/* CDR Transcript Styles */
.crazyai-cdr-transcript {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.crazyai-cdr-transcript-msg {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    max-width: 85%;
}

.crazyai-cdr-transcript-msg.customer {
    background-color: rgba(16, 185, 129, 0.1);
    border-left: 3px solid #10b981;
    align-self: flex-start;
}

.crazyai-cdr-transcript-msg.ai {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3b82f6;
    align-self: flex-end;
}

.crazyai-cdr-transcript-header {
    margin-bottom: 0.5rem;
}

.crazyai-cdr-transcript-text {
    color: #cccccc;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* CDR Audio Player */
.crazyai-cdr-audio-player {
    border-radius: 0.5rem;
    background-color: #222;
}

.crazyai-cdr-audio-player::-webkit-media-controls-panel {
    background-color: #222;
}

/* CDR Nav Tabs Custom Styling (Modal) */
#cdr-detail-tabs .nav-link {
    color: #888;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    background-color: transparent;
    transition: all 0.2s ease;
}

#cdr-detail-tabs .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

#cdr-detail-tabs .nav-link.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background-color: transparent;
}

#cdr-detail-tabs .nav-link i {
    font-size: 0.9rem;
}

/* Responsive CDR Modal Tabs */
@media (max-width: 992px) {
    #cdr-detail-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    #cdr-detail-tabs::-webkit-scrollbar {
        display: none;
    }
    
    #cdr-detail-tabs .nav-link {
        white-space: nowrap;
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .crazyai-cdr-transcript-msg {
        max-width: 95%;
    }
    
    .crazyai-cdr-timeline {
        padding-left: 25px;
    }
    
    .crazyai-cdr-timeline-marker {
        left: -25px;
        width: 16px;
        height: 16px;
    }
    
    .crazyai-cdr-timeline-marker i {
        font-size: 8px;
    }
}

/* ============================================================================
   ADDITIONAL ACCOUNT LOGINS SECTION STYLES
   ============================================================================ */

/* Login cards */
.login-card {
    transition: all 0.2s ease;
    border-width: 2px;
}

.login-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme-mode="dark"] .login-card {
    background-color: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] .login-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.login-card.border-success {
    border-color: #28a745 !important;
}

.login-card.border-secondary {
    border-color: #6c757d !important;
    opacity: 0.8;
}

[data-theme-mode="dark"] .login-card.border-success {
    border-color: #3dd865 !important;
}

[data-theme-mode="dark"] .login-card.border-secondary {
    border-color: #666666 !important;
}

/* Login card header */
.login-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

[data-theme-mode="dark"] .login-card .card-header {
    background-color: #0d0d0d;
    border-bottom-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .login-card .card-body {
    color: #ffffff;
}

/* Permission badges */
.login-card .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    margin: 0.125rem;
}

.login-card .badge.bg-success {
    background-color: #28a745 !important;
}

.login-card .badge.bg-secondary {
    background-color: #6c757d !important;
}

[data-theme-mode="dark"] .login-card .badge.bg-success {
    background-color: #3dd865 !important;
    color: #000000;
}

[data-theme-mode="dark"] .login-card .badge.bg-secondary {
    background-color: #666666 !important;
    color: #ffffff;
}

/* Login action buttons */
.login-card .btn-sm {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Modal styling for dark theme */
[data-theme-mode="dark"] .modal-content {
    background-color: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .modal-header {
    background-color: #0d0d0d;
    border-bottom-color: #333;
}

[data-theme-mode="dark"] .modal-header .btn-close {
    filter: invert(1);
}

[data-theme-mode="dark"] .modal-footer {
    background-color: #0d0d0d;
    border-top-color: #333;
}

[data-theme-mode="dark"] .modal-body .form-control,
[data-theme-mode="dark"] .modal-body .form-select {
    background-color: #111111;
    color: #ffffff;
    border-color: #333;
}

[data-theme-mode="dark"] .modal-body .form-control:focus,
[data-theme-mode="dark"] .modal-body .form-select:focus {
    background-color: #111111;
    color: #ffffff;
    border-color: #4da6ff;
    box-shadow: 0 0 0 0.25rem rgba(77, 166, 255, 0.25);
}

[data-theme-mode="dark"] .modal-body .form-control::placeholder {
    color: #666666;
}

[data-theme-mode="dark"] .modal-body .form-check-input {
    background-color: #111111;
    border-color: #333;
}

[data-theme-mode="dark"] .modal-body .form-check-input:checked {
    background-color: #4da6ff;
    border-color: #4da6ff;
}

[data-theme-mode="dark"] .modal-body .form-check-label {
    color: #ffffff;
}

[data-theme-mode="dark"] .modal-body .card {
    background-color: #0d0d0d;
    border-color: #333;
}

[data-theme-mode="dark"] .modal-body .card-body {
    color: #ffffff;
}

/* Info alert in dark theme */
[data-theme-mode="dark"] .alert-info {
    background-color: #1a3a52;
    border-color: #2a5a82;
    color: #4da6ff;
}

/* Responsive login cards */
@media (max-width: 768px) {
    .login-card .d-flex.gap-2 {
        flex-direction: column;
    }

    .login-card .btn-sm {
        width: 100%;
    }

    .login-card .badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 576px) {
    .login-card .card-body {
        padding: 1rem;
    }

    .login-card .card-header h6 {
        font-size: 0.9rem;
    }
}

/* ============================================
   Knowledge Base Admin Dark Theme Styles
   ============================================ */

/* DataTables Dark Theme */
[data-theme-mode="dark"] table.dataTable {
    color: #ffffff;
    background-color: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] table.dataTable thead th,
[data-theme-mode="dark"] table.dataTable thead td {
    background-color: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] table.dataTable tbody tr {
    background-color: #1a1a1a;
}

[data-theme-mode="dark"] table.dataTable tbody tr:hover {
    background-color: #2a2a2a;
}

[data-theme-mode="dark"] table.dataTable tbody td {
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .dataTables_wrapper .dataTables_length,
[data-theme-mode="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme-mode="dark"] .dataTables_wrapper .dataTables_info,
[data-theme-mode="dark"] .dataTables_wrapper .dataTables_processing,
[data-theme-mode="dark"] .dataTables_wrapper .dataTables_paginate {
    color: #ffffff;
}

[data-theme-mode="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme-mode="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: #111111;
    border-color: #333;
    color: #ffffff;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}

[data-theme-mode="dark"] .dataTables_wrapper .dataTables_filter input:focus,
[data-theme-mode="dark"] .dataTables_wrapper .dataTables_length select:focus {
    background-color: #111111;
    border-color: #007bff;
    color: #ffffff;
    outline: none;
}

[data-theme-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #ffffff !important;
    background: #111111;
    border: 1px solid #333;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    margin: 0 0.25rem;
}

[data-theme-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #2a2a2a !important;
    border-color: #007bff !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #007bff !important;
    border-color: #007bff !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
[data-theme-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #111111 !important;
    border-color: #333 !important;
    color: #666666 !important;
    cursor: not-allowed;
}

/* Quill Editor Dark Theme */
[data-theme-mode="dark"] .ql-toolbar.ql-snow {
    background-color: #111111;
    border-color: #333;
}

[data-theme-mode="dark"] .ql-container.ql-snow {
    background-color: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] .ql-editor {
    color: #ffffff;
    background-color: #1a1a1a;
}

[data-theme-mode="dark"] .ql-editor.ql-blank::before {
    color: #666666;
}

[data-theme-mode="dark"] .ql-snow .ql-stroke {
    stroke: #cccccc;
}

[data-theme-mode="dark"] .ql-snow .ql-fill {
    fill: #cccccc;
}

[data-theme-mode="dark"] .ql-snow .ql-picker-label {
    color: #cccccc;
}

[data-theme-mode="dark"] .ql-snow .ql-picker-options {
    background-color: #111111;
    border-color: #333;
}

[data-theme-mode="dark"] .ql-snow .ql-picker-item {
    color: #cccccc;
}

[data-theme-mode="dark"] .ql-snow .ql-picker-item:hover {
    background-color: #2a2a2a;
    color: #ffffff;
}

[data-theme-mode="dark"] .ql-snow .ql-tooltip {
    background-color: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .ql-snow .ql-tooltip input[type="text"] {
    background-color: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: #333;
}

[data-theme-mode="dark"] .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: #333;
}

[data-theme-mode="dark"] .ql-snow.ql-toolbar button:hover,
[data-theme-mode="dark"] .ql-snow .ql-toolbar button:hover,
[data-theme-mode="dark"] .ql-snow.ql-toolbar button:focus,
[data-theme-mode="dark"] .ql-snow .ql-toolbar button:focus,
[data-theme-mode="dark"] .ql-snow.ql-toolbar button.ql-active,
[data-theme-mode="dark"] .ql-snow .ql-toolbar button.ql-active,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-label:hover,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-label:hover,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-label.ql-active,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-label.ql-active,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-item:hover,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-item:hover,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: #007bff;
}

[data-theme-mode="dark"] .ql-snow.ql-toolbar button:hover .ql-stroke,
[data-theme-mode="dark"] .ql-snow .ql-toolbar button:hover .ql-stroke,
[data-theme-mode="dark"] .ql-snow.ql-toolbar button:focus .ql-stroke,
[data-theme-mode="dark"] .ql-snow .ql-toolbar button:focus .ql-stroke,
[data-theme-mode="dark"] .ql-snow.ql-toolbar button.ql-active .ql-stroke,
[data-theme-mode="dark"] .ql-snow .ql-toolbar button.ql-active .ql-stroke,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
    stroke: #007bff;
}

[data-theme-mode="dark"] .ql-snow.ql-toolbar button:hover .ql-fill,
[data-theme-mode="dark"] .ql-snow .ql-toolbar button:hover .ql-fill,
[data-theme-mode="dark"] .ql-snow.ql-toolbar button:focus .ql-fill,
[data-theme-mode="dark"] .ql-snow .ql-toolbar button:focus .ql-fill,
[data-theme-mode="dark"] .ql-snow.ql-toolbar button.ql-active .ql-fill,
[data-theme-mode="dark"] .ql-snow .ql-toolbar button.ql-active .ql-fill,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
[data-theme-mode="dark"] .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
[data-theme-mode="dark"] .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill {
    fill: #007bff;
}

/* Modal Dark Theme (KB specific enhancements) */
[data-theme-mode="dark"] .modal-content {
    background-color: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .modal-header {
    border-bottom-color: #333;
    background-color: #111111;
}

[data-theme-mode="dark"] .modal-footer {
    border-top-color: #333;
    background-color: #111111;
}

[data-theme-mode="dark"] .modal-title {
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-close {
    filter: invert(1);
}

/* Form Controls Dark Theme */
[data-theme-mode="dark"] .form-control,
[data-theme-mode="dark"] .form-select {
    background-color: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .form-control:focus,
[data-theme-mode="dark"] .form-select:focus {
    background-color: #111111;
    border-color: #007bff;
    color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

[data-theme-mode="dark"] .form-control::placeholder {
    color: #666666;
}

[data-theme-mode="dark"] .form-control:disabled,
[data-theme-mode="dark"] .form-select:disabled {
    background-color: #0d0d0d;
    border-color: #333;
    color: #666666;
}

[data-theme-mode="dark"] .form-label {
    color: #cccccc;
}

[data-theme-mode="dark"] .form-check-input {
    background-color: #111111;
    border-color: #333;
}

[data-theme-mode="dark"] .form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

[data-theme-mode="dark"] .form-check-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

[data-theme-mode="dark"] .form-check-label {
    color: #cccccc;
}

[data-theme-mode="dark"] .form-text {
    color: #999999;
}

/* Card Dark Theme (KB specific) */
[data-theme-mode="dark"] .card {
    background-color: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .card-header {
    background-color: #111111;
    border-bottom-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .card-body {
    background-color: #1a1a1a;
    color: #ffffff;
}

[data-theme-mode="dark"] .card-footer {
    background-color: #111111;
    border-top-color: #333;
    color: #cccccc;
}

/* Badge Dark Theme */
[data-theme-mode="dark"] .badge {
    color: #ffffff;
}

[data-theme-mode="dark"] .badge.bg-success {
    background-color: #198754 !important;
}

[data-theme-mode="dark"] .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

[data-theme-mode="dark"] .badge.bg-danger {
    background-color: #dc3545 !important;
}

[data-theme-mode="dark"] .badge.bg-secondary {
    background-color: #6c757d !important;
}

/* Alert Dark Theme */
[data-theme-mode="dark"] .alert {
    border-color: #333;
}

[data-theme-mode="dark"] .alert-success {
    background-color: #198754;
    border-color: #198754;
    color: #ffffff;
}

[data-theme-mode="dark"] .alert-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

[data-theme-mode="dark"] .alert-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000000;
}

[data-theme-mode="dark"] .alert-info {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    color: #000000;
}

/* Loading Spinner Dark Theme */
[data-theme-mode="dark"] .spinner-border {
    border-color: rgba(255, 255, 255, 0.25);
    border-right-color: #007bff;
}

/* Empty State Dark Theme */
[data-theme-mode="dark"] .kb-empty-state {
    color: #999999;
}

[data-theme-mode="dark"] .kb-empty-state i {
    color: #666666;
}

/* Tab Navigation Dark Theme */
[data-theme-mode="dark"] .kb-nav-tabs {
    border-bottom-color: #333;
}

[data-theme-mode="dark"] .kb-nav-tabs .nav-link {
    color: #cccccc;
}

[data-theme-mode="dark"] .kb-nav-tabs .nav-link:hover {
    color: #007bff;
    border-bottom-color: #007bff;
}

[data-theme-mode="dark"] .kb-nav-tabs .nav-link.active {
    color: #007bff;
    border-bottom-color: #007bff;
}

/* Category and Tag Cards Dark Theme */
[data-theme-mode="dark"] .kb-category-card,
[data-theme-mode="dark"] .kb-tag-card {
    background-color: #1a1a1a;
    border-color: #333;
}

[data-theme-mode="dark"] .kb-category-card:hover,
[data-theme-mode="dark"] .kb-tag-card:hover {
    background-color: #2a2a2a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Button Dark Theme Adjustments */
[data-theme-mode="dark"] .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

[data-theme-mode="dark"] .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

[data-theme-mode="dark"] .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Text Colors Dark Theme */
[data-theme-mode="dark"] .text-muted {
    color: #999999 !important;
}

[data-theme-mode="dark"] .text-secondary {
    color: #cccccc !important;
}

/* Border Colors Dark Theme */
[data-theme-mode="dark"] .border {
    border-color: #333 !important;
}

[data-theme-mode="dark"] .border-top {
    border-top-color: #333 !important;
}

[data-theme-mode="dark"] .border-bottom {
    border-bottom-color: #333 !important;
}

[data-theme-mode="dark"] .border-start {
    border-left-color: #333 !important;
}

[data-theme-mode="dark"] .border-end {
    border-right-color: #333 !important;
}

/* Responsive Adjustments for KB Admin */
@media (max-width: 768px) {
    .kb-action-btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }

    .kb-action-btn i {
        font-size: 0.875rem;
    }

    .kb-nav-tabs .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    #kb-articles-datatable {
        font-size: 0.875rem;
    }

    .modal-xl {
        max-width: 95%;
    }
}

/* ==========================================
   2FA Settings Page - Dark Theme Support
   ========================================== */

/* Light theme (default) */
.twofa-settings-card {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
}

.twofa-current-settings {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.twofa-method-options .form-check-label {
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.twofa-method-options .form-check-input:checked+.form-check-label {
    background-color: #e7f1ff;
}

.twofa-recovery-codes-list {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    font-family: 'Courier New', monospace;
}

/* Dark theme */
[data-theme-mode="dark"] .twofa-settings-card {
    background-color: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .twofa-current-settings {
    background-color: #0d0d0d;
    border-color: #444;
}

[data-theme-mode="dark"] .twofa-method-options .form-check-label {
    color: #ffffff;
}

[data-theme-mode="dark"] .twofa-method-options .form-check-input:checked+.form-check-label {
    background-color: #2a3a4a;
}

[data-theme-mode="dark"] .twofa-recovery-codes-list {
    background-color: #111111;
    border-color: #444;
    color: #ffffff;
}

[data-theme-mode="dark"] #qr-code-display .bg-light {
    background-color: #ffffff !important;
}

[data-theme-mode="dark"] .form-control {
    background-color: #111111;
    border-color: #444;
    color: #ffffff;
}

[data-theme-mode="dark"] .form-control:focus {
    background-color: #1a1a1a;
    border-color: #007bff;
    color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

[data-theme-mode="dark"] .form-control::placeholder {
    color: #666666;
}

[data-theme-mode="dark"] .alert-warning {
    background-color: #3a2f1a;
    border-color: #5a4a2a;
    color: #ffc107;
}

[data-theme-mode="dark"] .alert-info {
    background-color: #1a2a3a;
    border-color: #2a3a4a;
    color: #17a2b8;
}

[data-theme-mode="dark"] .alert-success {
    background-color: #1a2a1a;
    border-color: #2a3a2a;
    color: #28a745;
}

[data-theme-mode="dark"] .alert-danger {
    background-color: #2a1a1a;
    border-color: #3a2a2a;
    color: #dc3545;
}

[data-theme-mode="dark"] .badge.bg-primary-transparent {
    background-color: #1a2a3a !important;
    color: #007bff !important;
    border: 1px solid #2a3a4a;
}

[data-theme-mode="dark"] .modal-content {
    background-color: #1a1a1a;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] .modal-header {
    background-color: #111111;
    border-bottom-color: #333;
}

[data-theme-mode="dark"] .modal-footer {
    background-color: #111111;
    border-top-color: #333;
}

[data-theme-mode="dark"] .modal .btn-close {
    filter: invert(1);
}

[data-theme-mode="dark"] .text-muted {
    color: #999999 !important;
}

[data-theme-mode="dark"] .border {
    border-color: #444 !important;
}

[data-theme-mode="dark"] .form-text {
    color: #999999;
}

/* Dark theme hover states */
[data-theme-mode="dark"] .btn-outline-secondary:hover {
    background-color: #2a2a2a;
    border-color: #444;
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-outline-primary:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
}

/* Spinner colors for dark theme */
[data-theme-mode="dark"] .spinner-border {
    color: #007bff;
}

/* Radio button styling for dark theme */
[data-theme-mode="dark"] .form-check-input {
    background-color: #111111;
    border-color: #444;
}

[data-theme-mode="dark"] .form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

[data-theme-mode="dark"] .form-check-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

/* ============================================================================
   2FA Custom Destination UI - Dark Theme Support
   ============================================================================ */

/* Light theme base styling */
.twofa-current-settings {
    background-color: #f8f9fa;
}

/* Dark theme overrides */
[data-theme-mode="dark"] .twofa-current-settings {
    background-color: #0d0d0d;
    border-color: #333 !important;
}

[data-theme-mode="dark"] #destination-details .alert-info {
    background-color: #1a3a52;
    border-color: #2a5a7a;
    color: #cccccc;
}

[data-theme-mode="dark"] #destination-type-badge .badge {
    border: 1px solid #444;
}

[data-theme-mode="dark"] .form-check-label {
    color: #ffffff;
}

[data-theme-mode="dark"] .form-check-label .text-muted {
    color: #999999 !important;
}

[data-theme-mode="dark"] #default-destination-preview {
    color: #999999 !important;
}

[data-theme-mode="dark"] .btn-outline-warning {
    border-color: #ffc107;
    color: #ffc107;
}

[data-theme-mode="dark"] .btn-outline-warning:hover {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000000;
}

/* 2FA destination mode radio buttons */
[data-theme-mode="dark"] .twofa-method-options .form-check-label,
[data-theme-mode="dark"] #destination-input-section .form-check-label {
    color: #ffffff;
}

[data-theme-mode="dark"] #destination-input-section .form-check-label .small {
    color: #999999;
}

/* Custom destination input field */
[data-theme-mode="dark"] #custom-destination-input {
    background-color: #111111;
    border-color: #333;
}

[data-theme-mode="dark"] #custom-destination-input .form-control {
    background-color: #111111;
    border-color: #333;
    color: #ffffff;
}

[data-theme-mode="dark"] #custom-destination-input .form-control:focus {
    background-color: #111111;
    border-color: #007bff;
    color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

[data-theme-mode="dark"] #custom-destination-input .form-control::placeholder {
    color: #666666;
}


/* ============================================================================
   Custom Tooltip Pattern (from docs/tooltips.md)
   Standardized tooltips for rich content with reliable positioning
   ============================================================================ */

/* Wrapper ensures relative positioning context */
.custom-kb-tooltip-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* Tooltip Content Container */
.custom-kb-tooltip-content {
    visibility: hidden;
    width: 320px;
    /* Adjust width as needed */
    background-color: #000000;
    border: 1px solid #444;
    color: #ffffff;
    text-align: left;
    border-radius: 6px;
    padding: 15px;
    position: absolute;
    z-index: 1070;
    /* Above modals */
    bottom: 135%;
    /* Positioned above the trigger */
    left: 50%;
    transform: translateX(-50%);
    /* Centered horizontally */
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 0.85rem;
    font-weight: normal;
    line-height: 1.6;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    /* Prevent blocking interactions when hidden */
}

/* Show on Hover */
.custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* Downward Arrow */
.custom-kb-tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
}

/* Inner Code Blocks */
.custom-kb-tooltip-content code {
    color: #ffffff;
    background-color: #333333;
    border: 1px solid #555555;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 2px;
    display: inline-block;
}

/* Inner Title/Strong Text */
.custom-kb-tooltip-content strong {
    color: #ffd700;
    /* Gold */
}

/* Tooltip Footer */
.custom-kb-tooltip-content .tooltip-footer {
    color: #aaaaaa;
    margin-top: 8px;
    font-style: italic;
    font-size: 0.8em;
    border-top: 1px solid #333;
    padding-top: 8px;
}

/* Dark Theme Adjustments (already dark by default, but adding for consistency) */
[data-theme-mode="dark"] .custom-kb-tooltip-content {
    background-color: #000000;
    border-color: #444;
    color: #ffffff;
}

[data-theme-mode="dark"] .custom-kb-tooltip-content strong {
    color: #ffd700;
}

[data-theme-mode="dark"] .custom-kb-tooltip-content code {
    color: #ffffff;
    background-color: #333333;
    border-color: #555555;
}

[data-theme-mode="dark"] .custom-kb-tooltip-content .tooltip-footer {
    color: #aaaaaa;
    border-top-color: #333;
}

/* Tooltip icon styling */
.custom-kb-tooltip-wrapper i[class*="ri-question-"],
.custom-kb-tooltip-wrapper i[class*="ri-information-"] {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.custom-kb-tooltip-wrapper:hover i[class*="ri-question-"],
.custom-kb-tooltip-wrapper:hover i[class*="ri-information-"] {
    opacity: 1;
}


/* ============================================================================
   2FA Destination Options - Modern 2-Column Card Layout
   ============================================================================ */

/* Base styling for destination option cards */
.twofa-destination-option {
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f8f9fa;
    border: 2px solid #dee2e6 !important;
}

.twofa-destination-option:hover {
    border-color: #007bff !important;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
    transform: translateY(-1px);
}

/* Selected state */
.twofa-destination-option:has(input:checked) {
    border-color: #007bff !important;
    background-color: #e7f3ff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

/* Radio button positioning */
.twofa-destination-option .form-check-input {
    margin-top: 0.3rem;
}

/* Label takes full width for better click area */
.twofa-destination-option .form-check-label {
    cursor: pointer;
    margin-left: 0.5rem;
}

/* Icon styling */
.twofa-destination-option i[class*="ri-"]:not(.ri-information-) {
    color: #007bff;
}

/* Dark Theme */
[data-theme-mode="dark"] .twofa-destination-option {
    background-color: #111111;
    border-color: #333 !important;
}

[data-theme-mode="dark"] .twofa-destination-option:hover {
    border-color: #007bff !important;
    background-color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

[data-theme-mode="dark"] .twofa-destination-option:has(input:checked) {
    border-color: #007bff !important;
    background-color: #1a3a52;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
}

[data-theme-mode="dark"] .twofa-destination-option i[class*="ri-"]:not(.ri-information-) {
    color: #4da3ff;
}

[data-theme-mode="dark"] .twofa-destination-option .text-muted {
    color: #999999 !important;
}

/* Responsive: Stack on mobile */
@media (max-width: 767.98px) {
    .twofa-destination-option {
        margin-bottom: 0.75rem;
    }
}


/* ============================================================================
   2FA Method Selection - Modern 3-Column Card Layout
   ============================================================================ */

/* Base styling for method option cards */
.twofa-method-card {
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f8f9fa;
    border: 2px solid #dee2e6 !important;
}

.twofa-method-card:hover {
    border-color: #007bff !important;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
    transform: translateY(-1px);
}

/* Selected state */
.twofa-method-card:has(input:checked) {
    border-color: #007bff !important;
    background-color: #e7f3ff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

/* Radio button positioning */
.twofa-method-card .form-check-input {
    margin-top: 0.3rem;
}

/* Label takes full width for better click area */
.twofa-method-card .form-check-label {
    cursor: pointer;
    margin-left: 0.5rem;
}

/* Icon styling */
.twofa-method-card i[class*="ri-"]:not(.ri-information-) {
    color: #007bff;
}

/* Dark Theme */
[data-theme-mode="dark"] .twofa-method-card {
    background-color: #111111;
    border-color: #333 !important;
}

[data-theme-mode="dark"] .twofa-method-card:hover {
    border-color: #007bff !important;
    background-color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

[data-theme-mode="dark"] .twofa-method-card:has(input:checked) {
    border-color: #007bff !important;
    background-color: #1a3a52;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4);
}

[data-theme-mode="dark"] .twofa-method-card i[class*="ri-"]:not(.ri-information-) {
    color: #4da3ff;
}

[data-theme-mode="dark"] .twofa-method-card .text-muted {
    color: #999999 !important;
}

/* Responsive: 2 columns on tablet, stack on mobile */
@media (max-width: 991.98px) {
    .twofa-method-card {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 767.98px) {

    .twofa-method-options .col-lg-4,
    .twofa-method-options .col-md-6,
    .twofa-method-options .col-md-12 {
        margin-bottom: 0.75rem;
    }
}


/* 2FA Loading Overlay - Full page blocking */
.twofa-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.twofa-loading-overlay.show {
    display: flex;
}

[data-theme-mode="dark"] .twofa-loading-overlay {
    background: rgba(0, 0, 0, 0.90);
}

/* 2FA Destination Cards - Better UX Design */
.twofa-destination-card {
    transition: all 0.3s ease;
    background: var(--bs-body-bg, #fff);
    position: relative;
}

.twofa-destination-card-active {
    border-color: var(--bs-warning, #ffc107) !important;
    border-width: 2px !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

[data-theme-mode="dark"] .twofa-destination-card {
    background: #1a1a1a;
    border-color: #444 !important;
}

[data-theme-mode="dark"] .twofa-destination-card-active {
    border-color: #ffc107 !important;
    background: #1a1a1a;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.25);
}

.twofa-destination-value {
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 0.25rem;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-weight: 500;
}

[data-theme-mode="dark"] .twofa-destination-value {
    background: rgba(255, 255, 255, 0.05);
}

/* ========================================
   CrazyAI Footer Disclaimer Link Styles
   ======================================== */

/* Light theme footer link */
.footer .crazyai-disclaimer-purple {
    color: #9333ea !important;
    transition: all 0.2s ease;
}

.footer .crazyai-disclaimer-purple:hover {
    color: #a855f7 !important;
    text-decoration: none !important;
}

/* Dark theme footer */
[data-theme-mode="dark"] .footer {
    background-color: #1a1a1a !important;
    border-top: 1px solid #333;
}

[data-theme-mode="dark"] .footer .crazyai-disclaimer-purple {
    color: #c084fc !important;
}

[data-theme-mode="dark"] .footer .crazyai-disclaimer-purple:hover {
    color: #d8b4fe !important;
}

/* ========================================
   CrazyAI Terms Modal Styles
   ======================================== */

/* Modal base styles */
#crazyai-terms-modal .modal-content {
    background-color: #1a1a1a;
    color: #ffffff;
}

[data-theme-mode="dark"] #crazyai-terms-modal .modal-content {
    background-color: #1a1a1a;
    color: #ffffff;
}

[data-theme-mode="dark"] #crazyai-terms-modal .modal-header {
    background-color: #2a2a2a !important;
    border-bottom: 1px solid #333;
}

[data-theme-mode="dark"] #crazyai-terms-modal .modal-body {
    background-color: #1a1a1a;
}

[data-theme-mode="dark"] #crazyai-terms-modal .modal-footer {
    background-color: #2a2a2a !important;
    border-top: 1px solid #333;
}

[data-theme-mode="dark"] #crazyai-terms-modal .btn-close {
    filter: invert(1);
}

/* Terms sections */
#crazyai-terms-modal .terms-section {
    margin-bottom: 1.5rem;
}

#crazyai-terms-modal .terms-section h4 {
    color: #e74c3c;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

#crazyai-terms-modal .terms-section h5 {
    color: #ffffff;
    font-weight: 500;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

#crazyai-terms-modal .terms-section p,
#crazyai-terms-modal .terms-section li {
    color: #cccccc;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

#crazyai-terms-modal .terms-section ul {
    padding-left: 1.5rem;
}

/* Contact info boxes */
#crazyai-terms-modal .contact-info {
    background-color: #0d0d0d;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #333;
    margin: 1rem 0;
}

[data-theme-mode="dark"] #crazyai-terms-modal .contact-info {
    background-color: #0d0d0d;
    border: 1px solid #333;
}

#crazyai-terms-modal .contact-info p {
    margin-bottom: 0.25rem;
}

/* Disclaimer highlight box */
#crazyai-terms-modal .disclaimer-highlight {
    background-color: rgba(231, 76, 60, 0.1);
    border-left: 3px solid #e74c3c;
    padding: 1rem;
    border-radius: 0.375rem;
    margin: 1rem 0;
}

/* Custom scrollbar styling for CrazyAI Terms Modal */
#crazyai-terms-modal .modal-body::-webkit-scrollbar {
    width: 8px;
}

#crazyai-terms-modal .modal-body::-webkit-scrollbar-track {
    background: #333;
    border-radius: 4px;
}

#crazyai-terms-modal .modal-body::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 4px;
}

#crazyai-terms-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Responsive design for CrazyAI Terms Modal */
@media (max-width: 768px) {
    #crazyai-terms-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
    }

    #crazyai-terms-modal .modal-content {
        max-height: calc(100vh - 1rem);
    }

    #crazyai-terms-modal .modal-body {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #666 #333;
        padding: 1rem;
    }

    #crazyai-terms-modal .modal-header,
    #crazyai-terms-modal .modal-footer {
        padding: 0.75rem 1rem;
    }

    #crazyai-terms-modal .modal-title {
        font-size: 1rem;
    }

    #crazyai-terms-modal .terms-section h4 {
        font-size: 1rem;
    }

    #crazyai-terms-modal .contact-info {
        padding: 0.75rem;
    }
}

@media (max-width: 576px) {
    #crazyai-terms-modal .modal-xl {
        max-width: 98vw;
    }

    #crazyai-terms-modal .modal-dialog {
        margin: 0.25rem;
        max-width: calc(100vw - 0.5rem);
        max-height: calc(100vh - 0.5rem);
    }

    #crazyai-terms-modal .modal-content {
        max-height: calc(100vh - 0.5rem);
    }

    #crazyai-terms-modal .modal-body {
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #666 #333;
        padding: 0.75rem;
    }

    #crazyai-terms-modal .modal-header h5 {
        font-size: 0.9rem;
    }

    #crazyai-terms-modal .terms-section {
        margin-bottom: 1rem;
    }

    #crazyai-terms-modal .terms-section h4 {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    #crazyai-terms-modal .terms-section h5 {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    #crazyai-terms-modal .contact-info {
        padding: 0.5rem;
        margin: 0.75rem 0;
    }

    #crazyai-terms-modal .disclaimer-highlight {
        padding: 0.75rem;
        margin: 0.75rem 0;
    }
}
}

/* ========================================
   CrazyAI Stats Modal Dark Theme Styles
   ======================================== */

/* Override text-muted for better visibility in dark theme */
[data-theme-mode="dark"] #crazyai-stats-modal .text-muted {
    color: #999999 !important;
}

/* Ensure all text is visible */
[data-theme-mode="dark"] #crazyai-stats-modal .modal-content {
    background-color: #0e0e0e;
    color: #ffffff;
}

[data-theme-mode="dark"] #crazyai-stats-modal .card-body {
    color: #ffffff;
}

[data-theme-mode="dark"] #crazyai-stats-modal .text-white {
    color: #ffffff !important;
}

/* Secondary text visibility */
[data-theme-mode="dark"] #crazyai-stats-modal .text-muted.small,
[data-theme-mode="dark"] #crazyai-stats-modal .text-muted.fs-11,
[data-theme-mode="dark"] #crazyai-stats-modal .text-muted.fs-12 {
    color: #cccccc !important;
}

/* Stats labels */
[data-theme-mode="dark"] #crazyai-stats-modal .fs-11 {
    color: #cccccc;
}

/* Feature labels */
[data-theme-mode="dark"] #crazyai-stats-modal .col-md-4 p.text-muted {
    color: #999999 !important;
}

/* Legend items */
[data-theme-mode="dark"] #crazyai-stats-modal #outcomes-legend .text-muted {
    color: #cccccc !important;
}

/* Loading and error states */
[data-theme-mode="dark"] #crazyai-stats-modal #stats-loading p.text-muted,
[data-theme-mode="dark"] #crazyai-stats-modal #stats-error p.text-muted {
    color: #999999 !important;
}

/* Ensure stat values are bright white */
[data-theme-mode="dark"] #crazyai-stats-modal h3.fw-bold,
[data-theme-mode="dark"] #crazyai-stats-modal h5.fw-bold,
[data-theme-mode="dark"] #crazyai-stats-modal .fw-bold.fs-16 {
    color: #ffffff !important;
}

/* Badge visibility */
[data-theme-mode="dark"] #crazyai-stats-modal .badge.bg-soft-primary {
    background-color: rgba(0, 123, 255, 0.15) !important;
    color: #3b82f6 !important;
    border-color: rgba(0, 123, 255, 0.3) !important;
}

/* Success/danger badges for trends */
[data-theme-mode="dark"] #crazyai-stats-modal .badge.bg-success-transparent {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
}

[data-theme-mode="dark"] #crazyai-stats-modal .badge.bg-danger-transparent {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

/* Close button */
[data-theme-mode="dark"] #crazyai-stats-modal .btn-close-white {
    filter: invert(1);
}

/* Card titles - ensure all are bright white */
[data-theme-mode="dark"] #crazyai-stats-modal .card-title,
[data-theme-mode="dark"] #crazyai-stats-modal h6.card-title,
[data-theme-mode="dark"] #crazyai-stats-modal h6.fs-11,
[data-theme-mode="dark"] #crazyai-stats-modal h6,
[data-theme-mode="dark"] #crazyai-stats-modal .fw-semibold {
    color: #ffffff !important;
}

/* Ensure all section dividers/headers are white */
[data-theme-mode="dark"] #crazyai-stats-modal .fs-11.fw-semibold,
[data-theme-mode="dark"] #crazyai-stats-modal div.fw-semibold {
    color: #ffffff !important;
}

/* Tooltip icons - removed duplicate, see below */

/* Section backgrounds */
[data-theme-mode="dark"] #crazyai-stats-modal .p-3.rounded-2 {
    background-color: #252525 !important;
}

/* Form select */
[data-theme-mode="dark"] #crazyai-stats-modal .form-select {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #333 !important;
}

[data-theme-mode="dark"] #crazyai-stats-modal .form-select:focus {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

/* Button outline */
[data-theme-mode="dark"] #crazyai-stats-modal .btn-outline-light {
    color: #ffffff;
    border-color: #333;
}

[data-theme-mode="dark"] #crazyai-stats-modal .btn-outline-light:hover {
    background-color: #2a2a2a;
    border-color: #444;
    color: #ffffff;
}

/* Icons visibility */
[data-theme-mode="dark"] #crazyai-stats-modal .ri-bar-chart-2-line,
[data-theme-mode="dark"] #crazyai-stats-modal .ri-arrow-left-right-line,
[data-theme-mode="dark"] #crazyai-stats-modal .ri-phone-line,
[data-theme-mode="dark"] #crazyai-stats-modal .ri-message-3-line {
    opacity: 1;
}

/* Tab navigation styles */
[data-theme-mode="dark"] #crazyai-stats-modal .nav-tabs-custom {
    border-bottom: 1px solid #333 !important;
}

[data-theme-mode="dark"] #crazyai-stats-modal .nav-tabs-custom .nav-link {
    color: #999999;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
}

[data-theme-mode="dark"] #crazyai-stats-modal .nav-tabs-custom .nav-link:hover {
    color: #ffffff;
    border-bottom-color: #666;
}

[data-theme-mode="dark"] #crazyai-stats-modal .nav-tabs-custom .nav-link.active {
    color: #ffffff;
    background-color: transparent;
    border-bottom-color: #007bff;
}

/* Compact font sizes */
[data-theme-mode="dark"] #crazyai-stats-modal .fs-10 {
    font-size: 0.7rem !important;
}

[data-theme-mode="dark"] #crazyai-stats-modal .fs-11 {
    font-size: 0.8rem !important;
}

[data-theme-mode="dark"] #crazyai-stats-modal .fs-12 {
    font-size: 0.85rem !important;
}

[data-theme-mode="dark"] #crazyai-stats-modal .fs-14 {
    font-size: 0.95rem !important;
}

[data-theme-mode="dark"] #crazyai-stats-modal .fs-16 {
    font-size: 1.1rem !important;
}

/* Modal width control */
[data-theme-mode="dark"] #crazyai-stats-modal .modal-xl {
    max-width: 1400px;
}

/* Card header labels - ensure visibility */
[data-theme-mode="dark"] #crazyai-stats-modal .text-white-50 {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Question mark icon visibility */
[data-theme-mode="dark"] #crazyai-stats-modal .ri-question-line {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Reduce modal body padding */
[data-theme-mode="dark"] #crazyai-stats-modal .modal-body {
    padding: 1rem !important;
}

/* Tighter spacing for comparison cards */
[data-theme-mode="dark"] #crazyai-stats-modal .card-body.p-2 {
    padding: 0.5rem !important;
}

/* More compact cards */
[data-theme-mode="dark"] #crazyai-stats-modal .card {
    margin-bottom: 0 !important;
}

/* Compact tabs */
[data-theme-mode="dark"] #crazyai-stats-modal .nav-tabs-custom .nav-link {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.85rem !important;
}

/* Compact modal header */
[data-theme-mode="dark"] #crazyai-stats-modal .modal-header {
    padding: 0.75rem 1rem !important;
}

/* Remove excessive margins from progress bars */
[data-theme-mode="dark"] #crazyai-stats-modal .progress {
    margin-bottom: 0 !important;
}

/* Tighter mb-2 spacing */
[data-theme-mode="dark"] #crazyai-stats-modal .mb-2 {
    margin-bottom: 0.4rem !important;
}

/* Smaller icon sizes */
[data-theme-mode="dark"] #crazyai-stats-modal .ri-question-line {
    font-size: 0.75rem !important;
}

/* Compact padding for cards */
[data-theme-mode="dark"] #crazyai-stats-modal .card-body.p-2 {
    padding: 0.4rem !important;
}

[data-theme-mode="dark"] #crazyai-stats-modal .card-header.py-2 {
    padding: 0.3rem 0.5rem !important;
}

/* All card bodies compact */
[data-theme-mode="dark"] #crazyai-stats-modal .card-body {
    padding: 0.5rem !important;
}

/* Row gap control - tighter spacing */
[data-theme-mode="dark"] #crazyai-stats-modal .g-2 {
    --bs-gutter-x: 0.4rem;
    --bs-gutter-y: 0.4rem;
}

/* Reduce spacing between rows */
[data-theme-mode="dark"] #crazyai-stats-modal .mt-2 {
    margin-top: 0.4rem !important;
}

/* Badge transparency styles */
[data-theme-mode="dark"] #crazyai-stats-modal .bg-success-transparent {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

[data-theme-mode="dark"] #crazyai-stats-modal .bg-danger-transparent {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

/* Purple text for icons */
[data-theme-mode="dark"] #crazyai-stats-modal .text-purple {
    color: #a855f7 !important;
}

/* ===================================================================
   CrazyAI Stats Modal - Professional Data Viz Styling
   =================================================================== */

/* Colored left border cards for metric categories */
.crazyai-stat-card-primary { 
    border-left: 4px solid #3b82f6 !important; 
}

.crazyai-stat-card-purple { 
    border-left: 4px solid #a855f7 !important; 
}

.crazyai-stat-card-indigo { 
    border-left: 4px solid #6366f1 !important; 
}

.crazyai-stat-card-green { 
    border-left: 4px solid #22c55e !important; 
}

.crazyai-stat-card-orange { 
    border-left: 4px solid #f97316 !important; 
}

.crazyai-stat-card-red { 
    border-left: 4px solid #ef4444 !important; 
}

.crazyai-stat-card-cyan { 
    border-left: 4px solid #06b6d4 !important; 
}

.crazyai-stat-card-yellow { 
    border-left: 4px solid #eab308 !important; 
}

/* Large metric values with gradient effect */
.crazyai-metric-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
}

/* Metric icon containers */
.crazyai-metric-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.crazyai-metric-icon.icon-blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.crazyai-metric-icon.icon-purple {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.crazyai-metric-icon.icon-indigo {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.crazyai-metric-icon.icon-green {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.crazyai-metric-icon.icon-orange {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.crazyai-metric-icon.icon-red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.crazyai-metric-icon.icon-cyan {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.crazyai-metric-icon.icon-yellow {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

/* Gradient progress bars */
.crazyai-progress-bar-gradient {
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    height: 6px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.crazyai-progress-bar-green {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.crazyai-progress-bar-orange {
    background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
}

.crazyai-progress-bar-purple {
    background: linear-gradient(90deg, #a855f7 0%, #9333ea 100%);
}

/* Compact metric styling */
.crazyai-compact-metric {
    padding: 0.75rem;
    margin: 0;
}

/* Horizontal stat bars with hover effects */
.crazyai-stat-bar {
    height: 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.crazyai-stat-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.crazyai-stat-bar.bar-blue::before {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.crazyai-stat-bar.bar-green::before {
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
}

.crazyai-stat-bar.bar-orange::before {
    background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
}

.crazyai-stat-bar.bar-red::before {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

.crazyai-stat-bar.bar-purple::before {
    background: linear-gradient(90deg, #a855f7 0%, #c084fc 100%);
}

.crazyai-stat-bar.bar-yellow::before {
    background: linear-gradient(90deg, #eab308 0%, #facc15 100%);
}

.crazyai-stat-bar:hover {
    transform: scaleY(1.3);
}

/* Feature section headers with gradient background */
.crazyai-feature-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);
    border-left: 3px solid #3b82f6;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

.crazyai-feature-header.header-orange {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, transparent 100%);
    border-left-color: #f97316;
}

.crazyai-feature-header.header-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, transparent 100%);
    border-left-color: #22c55e;
}

.crazyai-feature-header.header-cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, transparent 100%);
    border-left-color: #06b6d4;
}

.crazyai-feature-header.header-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, transparent 100%);
    border-left-color: #a855f7;
}

/* Large badges for key metrics */
.crazyai-badge-large {
    font-size: 1.25rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
}

/* Compact card styling */
.crazyai-card-compact {
    background-color: #1a1a1a !important;
    border-color: #333 !important;
}

.crazyai-card-compact .card-body {
    padding: 0.75rem !important;
}

/* Mini stat boxes */
.crazyai-mini-stat {
    background-color: #252525;
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

.crazyai-mini-stat:hover {
    background-color: #2a2a2a;
    transform: translateY(-2px);
}

/* Comparison badge arrows */
.crazyai-trend-up {
    color: #22c55e !important;
}

.crazyai-trend-up::before {
    content: '↑ ';
    font-weight: bold;
}

.crazyai-trend-down {
    color: #ef4444 !important;
}

.crazyai-trend-down::before {
    content: '↓ ';
    font-weight: bold;
}

/* Tab styling improvements */
#crazyai-stats-modal .nav-tabs-custom {
    border-bottom: 1px solid #333;
    margin-bottom: 1rem;
}

#crazyai-stats-modal .nav-tabs-custom .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: #999;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    transition: all 0.2s ease;
    font-weight: 500;
}

#crazyai-stats-modal .nav-tabs-custom .nav-link:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.03);
}

#crazyai-stats-modal .nav-tabs-custom .nav-link.active {
    border-bottom-color: #3b82f6;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

/* List item bars */
.crazyai-list-item {
    display: block;
    padding: 0.4rem 0;
    transition: all 0.2s ease;
    border-radius: 4px;
    break-inside: avoid;
    page-break-inside: avoid;
}

.crazyai-list-item:hover {
    background-color: rgba(59, 130, 246, 0.08);
    transform: translateX(3px);
}

/* Colored text utilities */
.text-value-blue { color: #3b82f6 !important; }
.text-value-purple { color: #a855f7 !important; }
.text-value-green { color: #22c55e !important; }
.text-value-orange { color: #f97316 !important; }
.text-value-cyan { color: #06b6d4 !important; }
.text-value-yellow { color: #eab308 !important; }

/* Gradient text effect */
.text-gradient-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-purple {
    background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-green {
    background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Flatpickr Dark Theme Overrides for Stats Modal */
#crazyai-stats-modal .flatpickr-calendar {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

#crazyai-stats-modal .flatpickr-months {
    background: #0e0e0e !important;
}

#crazyai-stats-modal .flatpickr-current-month .flatpickr-monthDropdown-months,
#crazyai-stats-modal .flatpickr-current-month input.cur-year {
    background: #252525 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
}

#crazyai-stats-modal .flatpickr-weekday {
    color: #999 !important;
    background: #0e0e0e !important;
}

#crazyai-stats-modal .flatpickr-day {
    color: #fff !important;
    border-color: #333 !important;
}

#crazyai-stats-modal .flatpickr-day:hover,
#crazyai-stats-modal .flatpickr-day.prevMonthDay:hover,
#crazyai-stats-modal .flatpickr-day.nextMonthDay:hover {
    background: #2a2a2a !important;
    border-color: #3b82f6 !important;
}

#crazyai-stats-modal .flatpickr-day.selected,
#crazyai-stats-modal .flatpickr-day.startRange,
#crazyai-stats-modal .flatpickr-day.endRange {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

#crazyai-stats-modal .flatpickr-day.inRange {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#crazyai-stats-modal .flatpickr-day.disabled,
#crazyai-stats-modal .flatpickr-day.disabled:hover {
    color: #555 !important;
}

#crazyai-stats-modal .flatpickr-day.prevMonthDay,
#crazyai-stats-modal .flatpickr-day.nextMonthDay {
    color: #666 !important;
}

#crazyai-stats-modal span.flatpickr-weekday {
    font-weight: 600;
    font-size: 90%;
}

#crazyai-stats-modal .flatpickr-months .flatpickr-prev-month:hover svg,
#crazyai-stats-modal .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #3b82f6 !important;
}

#crazyai-stats-modal .flatpickr-months .flatpickr-prev-month svg,
#crazyai-stats-modal .flatpickr-months .flatpickr-next-month svg {
    fill: #fff !important;
}

/* ============================================
   Choices.js Dark Theme Support
   ============================================ */

/* Main container */
[data-theme-mode="dark"] .choices {
    background-color: #111111;
    border: 1px solid #333;
}

[data-theme-mode="dark"] .choices.is-focused,
[data-theme-mode="dark"] .choices:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

/* Inner wrapper */
[data-theme-mode="dark"] .choices__inner {
    background-color: #111111;
    border: none;
    color: #ffffff;
}

/* Input field */
[data-theme-mode="dark"] .choices__input {
    background-color: #111111;
    color: #ffffff;
}

[data-theme-mode="dark"] .choices__input::placeholder {
    color: #666666;
}

/* Dropdown */
[data-theme-mode="dark"] .choices__list--dropdown {
    background-color: #1a1a1a;
    border: 1px solid #333;
}

[data-theme-mode="dark"] .choices__list--dropdown .choices__item {
    color: #ffffff;
}

/* Dropdown items */
[data-theme-mode="dark"] .choices__item--selectable {
    color: #ffffff;
}

[data-theme-mode="dark"] .choices__item--selectable.is-highlighted {
    background-color: #2a2a2a;
    color: #ffffff;
}

[data-theme-mode="dark"] .choices__item--selectable:hover {
    background-color: #2a2a2a;
}

/* Selected item */
[data-theme-mode="dark"] .choices__item--choice {
    color: #ffffff;
}

[data-theme-mode="dark"] .choices__item--choice.is-selected {
    background-color: #2a2a2a;
    color: #cccccc;
}

/* Placeholder */
[data-theme-mode="dark"] .choices__placeholder {
    color: #666666;
    opacity: 1;
}

/* Button (clear, remove) */
[data-theme-mode="dark"] .choices__button {
    background-color: transparent;
    border-left: 1px solid #333;
    color: #ffffff;
    opacity: 0.7;
}

[data-theme-mode="dark"] .choices__button:hover {
    opacity: 1;
    color: #dc3545;
}

/* Disabled state */
[data-theme-mode="dark"] .choices.is-disabled .choices__inner,
[data-theme-mode="dark"] .choices.is-disabled .choices__input {
    background-color: #0d0d0d;
    cursor: not-allowed;
    user-select: none;
}

[data-theme-mode="dark"] .choices.is-disabled .choices__item {
    color: #666666;
}

/* Loading state */
[data-theme-mode="dark"] .choices.is-loading .choices__inner::after {
    border-color: #333 #333 #333 transparent;
}

/* No results / empty */
[data-theme-mode="dark"] .choices__item--disabled {
    color: #666666;
}
/* ==========================================================================
   CrazyAI Settings Styles (Moved from crazyai/settings.php)
   ========================================================================== */
/* CRITICAL LAYOUT FIX: Force sticky footer */
/* This ensures the footer stays at the bottom even if content is short or previous page styles interfere */
.page {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

.main-content {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

/* Card-Based Layout Styles */
.agents-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    /* Ensure tooltips aren't clipped by the container */
    overflow: visible; 
}

/* Ensure consistent card sizing in Flexbox */
.agent-card,
.create-agent-card {
    flex: 0 1 380px; /* Preference for ~380px width */
    min-width: 320px;
    width: 100%; /* Ensure they fill space on mobile */
}

.create-agent-card {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px dashed #3a3a3a;
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    cursor: pointer;
}

.create-agent-card:hover {
    border-color: #e74c3c;
    background: linear-gradient(135deg, #2a2a2a 0%, #252525 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.2);
}

.create-agent-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 40px;
    margin-bottom: 1.5rem;
}

.create-agent-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

.create-agent-subtitle {
    font-size: 0.85rem;
    color: #888;
    text-align: center;
    max-width: 280px;
}

.agent-card {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    position: relative;
    /* CRITICAL: Ensure card is clickable */
    cursor: pointer;
    /* Prevent layout shifts */
    will-change: transform;
}

.agent-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    border-color: #3a3a3a;
    /* CRITICAL: Bring card to front on hover so tooltips overlap neighbors correctly */
    z-index: 100;
    /* Subtle lift effect */
    transform: translateY(-2px);
}

/* Prevent transform on buttons inside cards to avoid nested transforms */
.agent-card:hover button {
    transform: none;
}

.agent-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.agent-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.agent-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 26px;
    flex-shrink: 0;
}

.agent-name-status {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.agent-name {
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.agent-status-badge {
    display: inline-block;
    background: #28a745;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    width: fit-content;
    text-transform: capitalize;
}

.agent-edit-icon {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.agent-edit-icon:hover {
    background: #2a2a2a;
    color: #fff;
    border-color: #555;
}

.agent-info-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #252525;
}

.agent-info-row:last-of-type {
    border-bottom: none;
}

/* 2-column layout for Voice ID and Personality */
.agent-info-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    border-bottom: 1px solid #252525;
}

.agent-info-row-2col .agent-info-row {
    border-bottom: none;
    padding: 0.6rem 0;
}

/* Stack on mobile */
@media (max-width: 576px) {
    .agent-info-row-2col {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .agent-info-row-2col .agent-info-row {
        border-bottom: 1px solid #252525;
    }
    
    .agent-info-row-2col .agent-info-row:last-child {
        border-bottom: none;
    }
}

.agent-info-icon {
    width: 36px;
    height: 36px;
    background: #252525;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 16px;
    flex-shrink: 0;
}

.agent-info-content {
    flex: 1;
}

.agent-info-label {
    font-size: 0.7rem;
    color: #888;
    margin: 0;
    line-height: 1.3;
    font-weight: 400;
}

.agent-info-value {
    font-size: 0.9rem;
    color: #fff;
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
}

/* Capitalize first letter of Voice ID */
.voice-id-capitalize {
    text-transform: capitalize;
}

/* Copy button styling */
.agent-phone-copy-btn {
    opacity: 0.6;
    transition: all 0.2s ease;
    border: none;
    background: none;
    color: #888 !important;
    text-decoration: none !important;
}

.agent-phone-copy-btn:hover {
    opacity: 1;
    color: #fff !important;
    transform: scale(1.1);
}

.agent-phone-copy-btn:active {
    transform: scale(0.95);
}

.agent-phone-copy-btn.copied {
    color: #28a745 !important;
    opacity: 1;
}

.agent-toggles {
    margin-top: 1.25rem;
    padding-top: 0;
    border-top: none;
}

.agent-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.agent-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ccc;
    font-size: 0.85rem;
}

.agent-toggle-label i {
    color: #888;
    font-size: 0.95rem;
}

.agent-toggle-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: capitalize;
}

.agent-toggle-badge.enabled {
    background: #28a745;
    color: #fff;
}

.agent-toggle-badge.disabled {
    background: #dc3545;
    color: #fff;
}

.agent-config-btn {
    width: 100%;
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.55rem;
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.agent-config-btn:hover {
    background: linear-gradient(135deg, #0aa2c0 0%, #087990 100%);
    box-shadow: 0 2px 8px rgba(13, 202, 240, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .agents-grid {
        grid-template-columns: 1fr;
    }
}

/* Tooltip styles for cards - Following docs/tooltips.md standard */
.custom-kb-tooltip-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    /* CRITICAL: Ensure wrapper doesn't block button clicks */
    pointer-events: auto;
}

.custom-kb-tooltip-content {
    visibility: hidden;
    width: 320px;
    background-color: #000000;
    border: 1px solid #444;
    color: #ffffff;
    text-align: left;
    border-radius: 6px;
    padding: 15px;
    position: absolute;
    z-index: 1070;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s, visibility 0s linear 0.2s;
    font-size: 0.85rem;
    font-weight: normal;
    line-height: 1.6;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    /* CRITICAL: Prevent tooltip from blocking clicks */
    pointer-events: none;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.custom-kb-tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #000000 transparent transparent transparent;
}

.custom-kb-tooltip-content strong {
    color: #ffd700;
}

.custom-kb-tooltip-content .tooltip-footer {
    color: #aaaaaa;
    margin-top: 8px;
    font-style: italic;
    font-size: 0.8em;
    border-top: 1px solid #333;
    padding-top: 8px;
}

/* CRITICAL FIX: Hide tooltips when ANY modal is open to prevent bleed-through */
/* We target the wrapper/content specifically instead of the whole grid */
body.modal-open .custom-kb-tooltip-wrapper,
body.modal-open .custom-kb-tooltip-content {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* HTMX Compatibility: Ensure tooltips are visible when no modals are open */
body:not(.modal-open) .custom-kb-tooltip-wrapper {
    visibility: visible;
    opacity: 1;
}

/* ==========================================================================
   CrazyAI Unanswered Questions Styles (Moved from crazyai/unanswered-questions.php)
   ========================================================================== */
/* CrazyAI Unanswered Questions - Modern Compact Design */
.crazyai-uq-container {
    padding: 0;
}

/* Stats Cards Row */
.crazyai-uq-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 992px) {
    .crazyai-uq-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .crazyai-uq-stats-row {
        grid-template-columns: 1fr;
    }
}

.crazyai-uq-stat-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid #1f1f1f;
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.crazyai-uq-stat-card:hover {
    border-color: #333;
    transform: translateY(-2px);
}

.crazyai-uq-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    font-family: 'RemixIcon', sans-serif;
}

.crazyai-uq-stat-icon i {
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.crazyai-uq-icon-text {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
}

.crazyai-uq-stat-icon.pending { background: #dc2626; color: #ffffff; }
.crazyai-uq-stat-icon.reviewed { background: #ec4899; color: #ffffff; }
.crazyai-uq-stat-icon.added { background: #8b5cf6; color: #ffffff; }
.crazyai-uq-stat-icon.total { background: #f97316; color: #ffffff; }

.crazyai-uq-stat-content {
    flex: 1;
    min-width: 0;
}

.crazyai-uq-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.crazyai-uq-stat-label {
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Filter Bar */
.crazyai-uq-filter-bar {
    background: #1a1a1a;
    border: 1px solid #1f1f1f;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.crazyai-uq-search-wrapper {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.crazyai-uq-search-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 1rem;
}

.crazyai-uq-search-input {
    width: 100%;
    background: #111;
    border: 1px solid #333;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    color: #fff;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.crazyai-uq-search-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.crazyai-uq-search-input::placeholder {
    color: #555;
}

.crazyai-uq-filter-select {
    background: #111;
    border: 1px solid #333;
    border-radius: 0.5rem;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    color: #fff;
    font-size: 0.875rem;
    min-width: 140px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.crazyai-uq-filter-select:focus {
    outline: none;
    border-color: #007bff;
}

/* Questions List */
.crazyai-uq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Question Card */
.crazyai-uq-card {
    background: #1a1a1a;
    border: 1px solid #1f1f1f;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: start;
}

.crazyai-uq-card:hover {
    border-color: #333;
    background: #1f1f1f;
}

.crazyai-uq-card.status-pending {
    border-left: 3px solid #ef4444;
}

.crazyai-uq-card.status-reviewed {
    border-left: 3px solid #22c55e;
}

.crazyai-uq-card.status-added {
    border-left: 3px solid #3b82f6;
}

/* Status Badge Column */
.crazyai-uq-status-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 70px;
}

.crazyai-uq-status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    text-transform: uppercase;
}

.crazyai-uq-status-badge.pending { background: #dc2626; color: #ffffff; }
.crazyai-uq-status-badge.reviewed { background: #ec4899; color: #ffffff; }
.crazyai-uq-status-badge.added { background: #8b5cf6; color: #ffffff; }

/* Content Column */
.crazyai-uq-content-col {
    flex: 1;
    min-width: 0;
}

.crazyai-uq-question {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.crazyai-uq-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: #888;
}

.crazyai-uq-meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.crazyai-uq-meta-item i {
    font-size: 0.9rem;
    color: #666;
}

/* Actions Column */
.crazyai-uq-actions-col {
    display: flex;
    gap: 0.5rem;
}

.crazyai-uq-action-btn {
    min-width: 70px;
    height: 42px;
    padding: 0 12px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    color: #cccccc;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crazyai-uq-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.crazyai-uq-action-btn:hover::before {
    opacity: 1;
}

.crazyai-uq-action-btn:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    color: #fff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}


.crazyai-uq-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: #1a1a1a;
    border-radius: 0.75rem;
    border: 1px dashed #333;
    color: #666;
}

.crazyai-uq-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #333;
}

/* Pagination */
.crazyai-uq-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding: 1rem;
    background: #1a1a1a;
    border-radius: 0.75rem;
    border: 1px solid #1f1f1f;
}

.crazyai-uq-page-btn {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #f97316;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    transition: all 0.2s;
}

.crazyai-uq-page-btn:hover:not(:disabled) {
    border-color: #f97316;
    background: #f97316;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.crazyai-uq-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #666;
}

.crazyai-uq-page-info {
    font-size: 0.85rem;
    color: #888;
}

/* Additional status badges */
.crazyai-uq-status-badge.answered { background: #f97316; color: #ffffff; }
.crazyai-uq-status-badge.ignored { background: #d946ef; color: #ffffff; }
.crazyai-uq-card.status-answered { border-left: 3px solid #f97316; }
.crazyai-uq-card.status-ignored { border-left: 3px solid #d946ef; }

/* Action buttons with color variants */
.crazyai-uq-action-btn.primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.crazyai-uq-action-btn.primary::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
}

.crazyai-uq-action-btn.primary:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6);
}

.crazyai-uq-action-btn.primary:hover::before {
    opacity: 0.8;
}

.crazyai-uq-action-btn.success {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
}

.crazyai-uq-action-btn.success::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
}

.crazyai-uq-action-btn.success:hover {
    background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.6);
}

.crazyai-uq-action-btn.success:hover::before {
    opacity: 0.8;
}

.crazyai-uq-action-btn.danger {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.crazyai-uq-action-btn.danger::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
}

.crazyai-uq-action-btn.danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.6);
}

.crazyai-uq-action-btn.danger:hover::before {
    opacity: 0.8;
}

/* Loading Skeleton */
.crazyai-uq-loading {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.crazyai-uq-skeleton-card {
    background: #1a1a1a;
    border: 1px solid #1f1f1f;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
}

.crazyai-uq-skeleton-badge {
    width: 60px;
    height: 24px;
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: crazyai-uq-shimmer 1.5s infinite;
    border-radius: 0.375rem;
}

.crazyai-uq-skeleton-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crazyai-uq-skeleton-line {
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: crazyai-uq-shimmer 1.5s infinite;
    border-radius: 0.25rem;
}

.crazyai-uq-skeleton-line.title { width: 60%; height: 20px; }
.crazyai-uq-skeleton-line.meta { width: 80%; height: 14px; }

.crazyai-uq-skeleton-actions {
    display: flex;
    gap: 0.5rem;
}

.crazyai-uq-skeleton-btn {
    width: 36px;
    height: 36px;
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: crazyai-uq-shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

@keyframes crazyai-uq-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Custom Tooltip for UQ Page */
.crazyai-uq-tooltip {
    position: relative;
}

.crazyai-uq-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #1a1a1a;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    border: 1px solid #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.crazyai-uq-tooltip[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.crazyai-uq-tooltip:hover[data-tooltip]::after,
.crazyai-uq-tooltip:hover[data-tooltip]::before {
    opacity: 1;
    visibility: visible;
}

/* Question text with icon */
.crazyai-uq-question-text {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.crazyai-uq-question-text i {
    color: #666;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Time display in status column */
.crazyai-uq-time {
    font-size: 0.75rem;
    color: #666;
}

/* Content wrapper */
.crazyai-uq-content {
    flex: 1;
    min-width: 0;
}

/* Actions wrapper */
.crazyai-uq-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Page buttons container */
.crazyai-uq-page-btns {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.crazyai-uq-page-btn.active {
    background: #f97316;
    border-color: #f97316;
    color: #fff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* Hot color overrides for Bootstrap buttons */
.crazyai-uq-container .btn-success {
    background: #ec4899;
    border-color: #ec4899;
    color: #ffffff;
}

.crazyai-uq-container .btn-success:hover {
    background: #db2777;
    border-color: #db2777;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.crazyai-uq-container .btn-primary {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: #ffffff;
}

.crazyai-uq-container .btn-primary:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Hero Section */
.crazyai-uq-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid #333;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.crazyai-uq-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
    pointer-events: none;
}

.crazyai-uq-hero-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

.crazyai-uq-hero-left {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.crazyai-uq-hero-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
    color: #ffffff;
    font-size: 2.5rem;
}

.crazyai-uq-hero-text {
    flex: 1;
}

.crazyai-uq-hero-right {
    display: flex;
    align-items: center;
}

.crazyai-uq-hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, #ffffff 0%, #cccccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.crazyai-uq-hero-description {
    color: #cccccc;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 600px;
}

.crazyai-uq-hero-benefits {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.crazyai-uq-benefit-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #cccccc;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 0;
}

.crazyai-uq-benefit-item i,
.crazyai-uq-benefit-icon {
    color: #f97316;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .crazyai-uq-hero {
        padding: 1.5rem;
    }

    .crazyai-uq-hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .crazyai-uq-hero-left {
        text-align: center;
    }

    .crazyai-uq-hero-right {
        justify-content: center;
    }

    .crazyai-uq-hero-title {
        font-size: 1.5rem;
    }

    .crazyai-uq-hero-description {
        max-width: none;
    }

    .crazyai-uq-hero-benefits {
        align-items: center;
    }

    .crazyai-uq-card {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .crazyai-uq-status-col {
        flex-direction: row;
        justify-content: flex-start;
        min-width: unset;
    }
    
    .crazyai-uq-actions {
        justify-content: flex-start;
    }
    
    .crazyai-uq-pagination {
        flex-direction: column;
        gap: 1rem;
    }
}

/* =====================================================
   SIDEBAR SCROLLBAR VISIBILITY FIX
   Makes the scrollbar visible in the sidebar on all screens,
   especially important for smaller screens where content overflows
   ===================================================== */

/* Main sidebar scrollbar - always show on smaller screens */
.main-sidebar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.main-sidebar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.main-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.main-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Firefox scrollbar support */
.main-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Dark theme adjustments */
[data-theme-mode="dark"] .main-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme-mode="dark"] .main-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme-mode="dark"] .main-sidebar {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Light theme adjustments */
[data-theme-mode="light"] .main-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme-mode="light"] .main-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

[data-theme-mode="light"] .main-sidebar {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Mobile/tablet specific - ensure scrollbar is always visible */
@media (max-width: 991.98px) {
    .main-sidebar::-webkit-scrollbar {
        width: 5px;
    }
    
    /* Ensure sidebar content is scrollable */
    .main-sidebar {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Show scrollbar on touch devices when scrolling */
    .main-sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
    }
    
    [data-theme-mode="light"] .main-sidebar::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.25);
    }
}

/* Very small screens */
@media (max-width: 575.98px) {
    .main-sidebar::-webkit-scrollbar {
        width: 4px;
    }
}

/* ============================================
   Crazytel Compact Sidebar Styles
   Makes all sidebar menus more condensed with less whitespace
   ============================================ */

/* Compact menu items - reduced padding */
.crazytel-compact-sidebar .side-menu__item {
    padding: 0.4rem 1rem !important;
    min-height: auto !important;
}

/* Compact category headers - reduced margins */
.crazytel-compact-sidebar .slide__category {
    padding: 0.5rem 1rem 0.25rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.5px !important;
}

/* First category - no top margin */
.crazytel-compact-sidebar .main-menu > .slide__category:first-child {
    margin-top: 0 !important;
}

/* Compact slide items */
.crazytel-compact-sidebar .slide {
    margin: 0 !important;
    padding: 0 !important;
}

/* Compact icons - slightly smaller */
.crazytel-compact-sidebar .side-menu__icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-inline-end: 0.5rem !important;
}

/* Compact labels */
.crazytel-compact-sidebar .side-menu__label {
    font-size: 0.825rem !important;
    line-height: 1.3 !important;
}

/* Compact submenus - reduced padding and margins */
.crazytel-compact-sidebar .slide-menu.child1,
.crazytel-compact-sidebar .slide-menu.child2 {
    padding: 0 !important;
    margin-left: 0.5rem !important;
}

.crazytel-compact-sidebar .slide-menu.child1 .side-menu__item,
.crazytel-compact-sidebar .slide-menu.child2 .side-menu__item {
    padding: 0.3rem 0.75rem !important;
    font-size: 0.8rem !important;
}

/* Submenu label header - more compact */
.crazytel-compact-sidebar .side-menu__label1 {
    padding: 0.3rem 0.75rem !important;
    font-size: 0.75rem !important;
    margin-bottom: 0.125rem !important;
}

/* Compact dropdown angle icons */
.crazytel-compact-sidebar .side-menu__angle {
    font-size: 0.9rem !important;
}

/* Reduce border-left width on active items for cleaner look */
.crazytel-compact-sidebar .side-menu__item.active {
    border-left-width: 2px !important;
}

/* Compact main menu container padding */
.crazytel-compact-sidebar .main-menu-container {
    padding: 0.5rem 0 !important;
}

/* Compact main menu list */
.crazytel-compact-sidebar .main-menu {
    padding: 0 !important;
}

/* Dark theme adjustments for compact sidebar */
[data-theme-mode="dark"] .crazytel-compact-sidebar .slide__category {
    border-bottom: none !important;
}

/* Ensure active state still stands out in compact mode */
[data-theme-mode="dark"] .crazytel-compact-sidebar .side-menu__item.active {
    background-color: rgba(220, 53, 69, 0.12) !important;
}

/* ============================================
   CrazyAI CDR Detail Modal - Dark Theme Text Fixes
   Ensures all text is visible with white color
   ============================================ */

/* Modal structure - ensure white text */
[data-theme-mode="dark"] #crazyai-cdr-detail-modal .modal-content {
    color: #ffffff !important;
}

/* All table cells in detail tables should be white unless specifically muted */
[data-theme-mode="dark"] .crazyai-cdr-detail-table td {
    color: #ffffff !important;
}

/* Muted text (labels) should be lighter gray for visibility */
[data-theme-mode="dark"] .crazyai-cdr-detail-table td.text-muted {
    color: #999999 !important;
}

/* Card headers text */
[data-theme-mode="dark"] #crazyai-cdr-detail-modal .card-header h6 {
    color: #ffffff !important;
}

/* Empty state messages */
[data-theme-mode="dark"] #crazyai-cdr-detail-modal .text-center.text-muted p {
    color: #cccccc !important;
}

/* Timeline text */
[data-theme-mode="dark"] .crazyai-cdr-timeline-item .text-white {
    color: #ffffff !important;
}

[data-theme-mode="dark"] .crazyai-cdr-timeline-content small.text-muted {
    color: #999999 !important;
}

[data-theme-mode="dark"] .crazyai-cdr-timeline-content pre {
    color: #cccccc !important;
}

/* Transcript messages */
[data-theme-mode="dark"] .crazyai-cdr-transcript-text {
    color: #ffffff !important;
}

/* Quick info bar text */
[data-theme-mode="dark"] #crazyai-cdr-detail-modal .row.g-2.mb-3 .p-2 small.text-muted {
    color: #999999 !important;
}

[data-theme-mode="dark"] #crazyai-cdr-detail-modal .row.g-2.mb-3 .p-2 span {
    color: #ffffff !important;
}

/* Tab content general text */
[data-theme-mode="dark"] #cdr-detail-tab-content {
    color: #ffffff !important;
}

/* Analysis tab text */
[data-theme-mode="dark"] #cdr-analysis-data .p-3 {
    color: #ffffff !important;
}

/* Conversation metrics text */
[data-theme-mode="dark"] #cdr-conversation-content h3 {
    color: inherit !important;
}

[data-theme-mode="dark"] #cdr-conversation-content small.text-muted {
    color: #999999 !important;
}

/* Engagement metrics text */
[data-theme-mode="dark"] #cdr-engagement-content .text-white {
    color: #ffffff !important;
}

/* Pre-formatted text (JSON displays) */
[data-theme-mode="dark"] #crazyai-cdr-detail-modal pre {
    color: #cccccc !important;
    background-color: #0d0d0d !important;
}

/* Section headers with icons */
[data-theme-mode="dark"] #crazyai-cdr-detail-modal h6.text-white {
    color: #ffffff !important;
}

/* Badge count text */
[data-theme-mode="dark"] #cdr-transcript-count {
    color: #ffffff !important;
}

/* Modal subtitle */
[data-theme-mode="dark"] #crazyai-cdr-detail-subtitle {
    color: #ffffff !important;
}

/* Audio player - ensure controls are visible */
[data-theme-mode="dark"] .crazyai-cdr-audio-player {
    filter: invert(1) hue-rotate(180deg);
    background-color: #1a1a1a;
}

/* Timeline and transcript custom components */
[data-theme-mode="dark"] .crazyai-cdr-timeline {
    color: #ffffff !important;
}

[data-theme-mode="dark"] .crazyai-cdr-transcript {
    color: #ffffff !important;
}

/* ============================================
   CrazyAI CDR Modal - Chat-like Transcript
   ============================================ */

.crazyai-chat-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    max-height: 450px;
    overflow-y: auto;
    background: linear-gradient(180deg, #0d0d0d 0%, #111111 100%);
}

.crazyai-chat-message {
    display: flex;
    gap: 10px;
    max-width: 85%;
}

.crazyai-chat-message.customer-message {
    align-self: flex-start;
}

.crazyai-chat-message.ai-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.crazyai-chat-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.crazyai-chat-message.customer-message .crazyai-chat-avatar {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.crazyai-chat-message.ai-message .crazyai-chat-avatar {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.crazyai-chat-bubble {
    position: relative;
    padding: 10px 14px;
    border-radius: 16px;
    min-width: 100px;
}

.crazyai-chat-message.customer-message .crazyai-chat-bubble {
    background: linear-gradient(135deg, #1e3a2f 0%, #1a2f26 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-bottom-left-radius: 4px;
}

.crazyai-chat-message.ai-message .crazyai-chat-bubble {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a2f4f 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-bottom-right-radius: 4px;
}

.crazyai-chat-sender {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crazyai-chat-message.customer-message .crazyai-chat-sender {
    color: #4ade80;
}

.crazyai-chat-message.ai-message .crazyai-chat-sender {
    color: #60a5fa;
}

.crazyai-chat-text {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
}

.crazyai-chat-time {
    font-size: 10px;
    color: #666666;
    margin-top: 6px;
    text-align: right;
}

.crazyai-chat-message.ai-message .crazyai-chat-time {
    text-align: left;
}

/* Chat container scrollbar */
.crazyai-chat-container::-webkit-scrollbar {
    width: 6px;
}

.crazyai-chat-container::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 3px;
}

.crazyai-chat-container::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 3px;
}

.crazyai-chat-container::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

/* ============================================
   CrazyAI CDR Modal - AI Tools Timeline
   ============================================ */

.crazyai-tools-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crazyai-tool-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #151515 100%);
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.crazyai-tool-card:hover {
    border-color: #444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.crazyai-tool-card.success {
    border-left: 3px solid #22c55e;
}

.crazyai-tool-card.failed {
    border-left: 3px solid #ef4444;
}

.crazyai-tool-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.crazyai-tool-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
}

.crazyai-tool-card.success .crazyai-tool-icon {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.crazyai-tool-card.failed .crazyai-tool-icon {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.crazyai-tool-info {
    flex: 1;
    min-width: 0;
}

.crazyai-tool-name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}

.crazyai-tool-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: #888888;
}

.crazyai-tool-meta i {
    font-size: 12px;
}

.crazyai-tool-status {
    flex-shrink: 0;
}

.crazyai-tool-args {
    padding: 0 16px 12px 68px;
}

.crazyai-tool-args-label {
    font-size: 10px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.crazyai-tool-arg {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    background-color: #0d0d0d;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 12px;
}

.crazyai-tool-arg:last-child {
    margin-bottom: 0;
}

.crazyai-tool-arg-key {
    color: #888888;
    font-weight: 500;
    white-space: nowrap;
}

.crazyai-tool-arg-value {
    color: #ffffff;
    word-break: break-word;
}

/* Responsive adjustments for tools */
@media (max-width: 576px) {
    .crazyai-tool-header {
        flex-wrap: wrap;
    }
    
    .crazyai-tool-args {
        padding-left: 16px;
    }
    
    .crazyai-tool-meta {
        flex-direction: column;
        gap: 4px;
    }
}

/* Badge count for tools */
[data-theme-mode="dark"] #cdr-aitools-count {
    color: #ffffff !important;
}

/* ============================================
   CrazyAI CDR Modal - Tab Styling
   ============================================ */

#crazyai-cdr-detail-modal .nav-tabs {
    border-bottom: 2px solid #333;
    gap: 3px;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    overflow-x: auto;
}

#crazyai-cdr-detail-modal .nav-tabs .nav-link {
    color: #888888;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-bottom: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

#crazyai-cdr-detail-modal .nav-tabs .nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #444;
}

#crazyai-cdr-detail-modal .nav-tabs .nav-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

/* Individual tab colors when active */
#crazyai-cdr-detail-modal #cdr-overview-tab.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

#crazyai-cdr-detail-modal #cdr-transfer-tab.active {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
}

#crazyai-cdr-detail-modal #cdr-callback-tab.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

#crazyai-cdr-detail-modal #cdr-sms-tab.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

#crazyai-cdr-detail-modal #cdr-aitools-tab.active {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
}

#crazyai-cdr-detail-modal #cdr-dtmf-tab.active {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
}

#crazyai-cdr-detail-modal #cdr-engagement-tab.active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

#crazyai-cdr-detail-modal #cdr-conversation-tab.active {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.4);
}

#crazyai-cdr-detail-modal #cdr-analysis-tab.active {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

#crazyai-cdr-detail-modal #cdr-timeline-tab.active {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.4);
}

#crazyai-cdr-detail-modal #cdr-recording-tab.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

#crazyai-cdr-detail-modal #cdr-transcript-tab.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Tab icons - subtle color hint when inactive */
#crazyai-cdr-detail-modal #cdr-overview-tab i { color: #60a5fa; }
#crazyai-cdr-detail-modal #cdr-transfer-tab i { color: #22d3ee; }
#crazyai-cdr-detail-modal #cdr-callback-tab i { color: #fbbf24; }
#crazyai-cdr-detail-modal #cdr-sms-tab i { color: #a78bfa; }
#crazyai-cdr-detail-modal #cdr-aitools-tab i { color: #f472b6; }
#crazyai-cdr-detail-modal #cdr-dtmf-tab i { color: #fb923c; }
#crazyai-cdr-detail-modal #cdr-engagement-tab i { color: #4ade80; }
#crazyai-cdr-detail-modal #cdr-conversation-tab i { color: #2dd4bf; }
#crazyai-cdr-detail-modal #cdr-analysis-tab i { color: #c084fc; }
#crazyai-cdr-detail-modal #cdr-timeline-tab i { color: #94a3b8; }
#crazyai-cdr-detail-modal #cdr-recording-tab i { color: #f87171; }
#crazyai-cdr-detail-modal #cdr-transcript-tab i { color: #34d399; }

/* Active tabs have white icons */
#crazyai-cdr-detail-modal .nav-tabs .nav-link.active i {
    color: #ffffff !important;
}

/* ============================================
   CrazyAI CDR Modal - Responsive Width
   ============================================ */

/* CDR Modal Tab Styling */
#cdr-detail-tabs .nav-link {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    border: none;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

#cdr-detail-tabs .nav-link:hover {
    color: #ffffff;
    border-bottom-color: rgba(220, 38, 38, 0.5);
}

#cdr-detail-tabs .nav-link.active {
    color: #ffffff;
    background-color: transparent;
    border-bottom-color: #dc2626;
}

#cdr-detail-tabs .nav-link i {
    font-size: 1rem;
}

@media (max-width: 992px) {
    #cdr-detail-tabs .nav-link {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
    
    #cdr-detail-tabs .nav-link i {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    #cdr-detail-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    #cdr-detail-tabs::-webkit-scrollbar {
        display: none;
    }
    
    #cdr-detail-tabs .nav-link {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
        white-space: nowrap;
    }
}

.crazyai-cdr-modal-dialog {
    max-width: 92vw;
    width: 1300px;
}

.crazyai-cdr-modal-dialog .modal-content {
    height: 85vh;
    max-height: 850px;
    display: flex;
    flex-direction: column;
}

.crazyai-cdr-modal-dialog .modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#cdr-detail-tab-content {
    flex: 1;
    overflow-y: auto;
    min-height: 400px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

#cdr-detail-tab-content::-webkit-scrollbar {
    width: 6px;
}

#cdr-detail-tab-content::-webkit-scrollbar-track {
    background: transparent;
}

#cdr-detail-tab-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

#cdr-detail-tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

#cdr-detail-tab-content .tab-pane {
    height: 100%;
}

@media (max-width: 1400px) {
    .crazyai-cdr-modal-dialog {
        max-width: 95vw;
        width: auto;
    }
}

@media (max-width: 992px) {
    .crazyai-cdr-modal-dialog .modal-content {
        height: 90vh;
        max-height: none;
    }
}

@media (max-width: 576px) {
    .crazyai-cdr-modal-dialog {
        max-width: 100%;
        margin: 0.5rem;
    }
    
    .crazyai-cdr-modal-dialog .modal-content {
        height: 95vh;
    }
    
    #cdr-detail-tab-content {
        min-height: 300px;
    }
}

/* ============================================
   CrazyAI Quick Info Cards
   ============================================ */

.crazyai-quickinfo-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    border-radius: 12px;
    border: 1px solid rgba(220, 38, 38, 0.3);
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.crazyai-quickinfo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #dc2626, transparent);
    opacity: 0.8;
}

.crazyai-quickinfo-card:hover {
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 6px 25px rgba(220, 38, 38, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.crazyai-quickinfo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-radius: 10px;
    border: 1px solid rgba(220, 38, 38, 0.3);
    flex-shrink: 0;
}

.crazyai-quickinfo-icon i {
    font-size: 1.25rem;
    color: #ef4444;
}

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

.crazyai-quickinfo-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.125rem;
    font-weight: 500;
}

.crazyai-quickinfo-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cost card special styling */
.crazyai-quickinfo-card.crazyai-quickinfo-cost {
    border-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.crazyai-quickinfo-card.crazyai-quickinfo-cost::before {
    background: linear-gradient(90deg, transparent, #22c55e, transparent);
}

.crazyai-quickinfo-card.crazyai-quickinfo-cost:hover {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 6px 25px rgba(34, 197, 94, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.crazyai-quickinfo-card.crazyai-quickinfo-cost .crazyai-quickinfo-icon {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

.crazyai-quickinfo-card.crazyai-quickinfo-cost .crazyai-quickinfo-icon i {
    color: #22c55e;
}

.crazyai-quickinfo-card.crazyai-quickinfo-cost .crazyai-quickinfo-value {
    color: #22c55e;
}

/* Responsive */
@media (max-width: 768px) {
    .crazyai-quickinfo-card {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .crazyai-quickinfo-icon {
        width: 36px;
        height: 36px;
    }

    .crazyai-quickinfo-icon i {
        font-size: 1.1rem;
    }

    .crazyai-quickinfo-value {
        font-size: 0.9rem;
    }

    .crazyai-quickinfo-label {
        font-size: 0.65rem;
    }
}

/* ============================================
   CrazyAI Modern Chat Interface
   ============================================ */

.crazyai-modern-chat-container {
    padding: 0.75rem;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Custom scrollbar for tab content */
/* Scrollbar styling is now defined in the modal dialog section above */

.crazyai-modern-message-wrapper {
    margin-bottom: 0.75rem;
    animation: slideInUp 0.4s ease-out;
    display: flex;
}

.crazyai-modern-message-wrapper:last-child {
    margin-bottom: 0;
}

.crazyai-modern-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 85%;
}

.crazyai-modern-message-wrapper.ai-message-wrapper {
    justify-content: flex-end;
}

.crazyai-modern-message-wrapper.ai-message-wrapper .crazyai-modern-message {
    flex-direction: row-reverse;
}

.crazyai-modern-message-wrapper.customer-message-wrapper {
    justify-content: flex-start;
}

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

.crazyai-avatar-inner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.crazyai-modern-message-wrapper.ai-message-wrapper .crazyai-avatar-inner {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.3);
}

.crazyai-modern-message-wrapper.customer-message-wrapper .crazyai-avatar-inner {
    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
    box-shadow: 0 8px 32px rgba(107, 114, 128, 0.3);
}

.crazyai-avatar-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: rotate 3s linear infinite;
    z-index: 1;
}

.crazyai-modern-message:hover .crazyai-avatar-inner {
    transform: scale(1.05);
}

.crazyai-modern-bubble {
    flex: 1;
    position: relative;
    border-radius: 16px;
    padding: 0.625rem 0.875rem;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.crazyai-modern-message-wrapper.ai-message-wrapper .crazyai-modern-bubble {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(239, 68, 68, 0.15) 100%);
    border-color: rgba(220, 38, 38, 0.2);
}

.crazyai-modern-message-wrapper.customer-message-wrapper .crazyai-modern-bubble {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(156, 163, 175, 0.15) 100%);
    border-color: rgba(107, 114, 128, 0.2);
}

.crazyai-modern-message:hover .crazyai-modern-bubble {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.crazyai-bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    gap: 0.5rem;
}

.crazyai-sender-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.crazyai-sender-badge.ai-badge {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(239, 68, 68, 0.2) 100%);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

.crazyai-sender-badge.customer-badge {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(156, 163, 175, 0.2) 100%);
    color: #d1d5db;
    border-color: rgba(107, 114, 128, 0.3);
}

.crazyai-message-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    white-space: nowrap;
}

.crazyai-message-text {
    color: #ffffff;
    line-height: 1.4;
    font-size: 0.85rem;
    word-wrap: break-word;
    margin: 0;
}

.crazyai-bubble-tail {
    position: absolute;
    width: 0;
    height: 0;
    bottom: 16px;
}

.crazyai-modern-message-wrapper.ai-message-wrapper .crazyai-bubble-tail {
    right: -8px;
    border-left: 8px solid rgba(220, 38, 38, 0.2);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.crazyai-modern-message-wrapper.customer-message-wrapper .crazyai-bubble-tail {
    left: -8px;
    border-right: 8px solid rgba(107, 114, 128, 0.2);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Hover effects */
.crazyai-modern-message-wrapper:hover .crazyai-avatar-glow {
    animation-duration: 1s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .crazyai-modern-chat-container {
        padding: 0.5rem;
    }

    .crazyai-modern-message {
        max-width: 90%;
        gap: 0.5rem;
    }

    .crazyai-avatar-inner {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .crazyai-modern-bubble {
        padding: 0.5rem 0.75rem;
        border-radius: 14px;
    }

    .crazyai-message-text {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .crazyai-modern-message {
        max-width: 95%;
        gap: 0.375rem;
    }

    .crazyai-avatar-inner {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .crazyai-modern-bubble {
        padding: 0.5rem 0.625rem;
        border-radius: 12px;
    }

    .crazyai-bubble-header {
        margin-bottom: 0.2rem;
    }

    .crazyai-message-text {
        font-size: 0.75rem;
        line-height: 1.3;
    }
}

/* Modern Empty State */
.crazyai-modern-empty-state {
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.crazyai-empty-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.crazyai-empty-icon-wrapper i {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
}

.crazyai-empty-glow {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.crazyai-empty-title {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.crazyai-empty-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin: 0;
    font-weight: 400;
}

/* ============================================
   CrazyAI Fullscreen Chat
   ============================================ */

.crazyai-fullscreen-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.crazyai-fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: scale(1.05);
}

.crazyai-fullscreen-btn i {
    font-size: 0.9rem;
}

.crazyai-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow: hidden;
}

.crazyai-fullscreen-overlay.active {
    display: flex;
}

/* Ensure no scrollbars leak through when fullscreen is active */
body.crazyai-fullscreen-active,
html.crazyai-fullscreen-active {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* CrazyAI CDR Modal - Hide browser scrollbar when modal is open */
body.crazyai-cdr-modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

.crazyai-fullscreen-content {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    max-height: calc(100vh - 4rem);
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.crazyai-fullscreen-header {
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.crazyai-fullscreen-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.crazyai-fullscreen-title i {
    color: #22c55e;
    font-size: 1.5rem;
}

.crazyai-fullscreen-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.crazyai-fullscreen-count {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-weight: 500;
}

.crazyai-fullscreen-close {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.crazyai-fullscreen-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.crazyai-fullscreen-body {
    flex: 1;
    overflow: hidden;
    padding: 2rem;
}

.crazyai-fullscreen-chat {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.crazyai-fullscreen-chat::-webkit-scrollbar {
    width: 8px;
}

.crazyai-fullscreen-chat::-webkit-scrollbar-track {
    background: transparent;
}

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

.crazyai-fullscreen-chat::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Fullscreen responsive */
@media (max-width: 768px) {
    .crazyai-fullscreen-overlay {
        padding: 1rem;
    }

    .crazyai-fullscreen-content {
        max-height: calc(100vh - 2rem);
    }

    .crazyai-fullscreen-header {
        padding: 1rem 1.5rem;
    }

    .crazyai-fullscreen-title {
        font-size: 1.1rem;
    }

    .crazyai-fullscreen-body {
        padding: 1rem;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* ============================================
   CrazyAI Custom Audio Player - Red/Black Theme
   ============================================ */

.crazyai-audio-player {
    background: linear-gradient(145deg, #0a0a0a 0%, #141414 50%, #0d0d0d 100%);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(220, 38, 38, 0.2);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 40px rgba(220, 38, 38, 0.08);
    position: relative;
    overflow: hidden;
}

/* Subtle animated glow effect */
.crazyai-audio-player::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(220, 38, 38, 0.03) 0%, transparent 50%);
    animation: crazyai-player-glow 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes crazyai-player-glow {
    0%, 100% { opacity: 0.5; transform: rotate(0deg); }
    50% { opacity: 1; transform: rotate(180deg); }
}

/* Waveform Visualization */
.crazyai-audio-waveform {
    position: relative;
    height: 60px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.crazyai-audio-waveform canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.crazyai-audio-progress-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, 
        rgba(220, 38, 38, 0.4) 0%, 
        rgba(220, 38, 38, 0.2) 100%);
    pointer-events: none;
    transition: none;
}

/* Main Controls Container */
.crazyai-audio-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

/* Play/Pause Button */
.crazyai-audio-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(145deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 
        0 4px 15px rgba(220, 38, 38, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.crazyai-audio-play-btn:hover {
    transform: scale(1.08);
    background: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 
        0 6px 25px rgba(220, 38, 38, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.crazyai-audio-play-btn:active {
    transform: scale(0.98);
}

.crazyai-audio-play-btn.playing {
    animation: crazyai-pulse-playing 2s ease-in-out infinite;
}

@keyframes crazyai-pulse-playing {
    0%, 100% {
        box-shadow: 
            0 4px 15px rgba(220, 38, 38, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 4px 25px rgba(220, 38, 38, 0.6),
            0 0 40px rgba(220, 38, 38, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* Progress Section */
.crazyai-audio-progress-section {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Time Display */
.crazyai-audio-time {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Progress Bar Container */
.crazyai-audio-progress-container {
    flex: 1;
    height: 32px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px 0;
}

.crazyai-audio-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    position: relative;
    overflow: visible;
}

.crazyai-audio-progress-buffer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    transition: width 0.1s ease;
}

.crazyai-audio-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

.crazyai-audio-progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%) scale(0);
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(220, 38, 38, 0.4);
    transition: transform 0.15s ease;
}

.crazyai-audio-progress-container:hover .crazyai-audio-progress-handle {
    transform: translate(-50%, -50%) scale(1);
}

.crazyai-audio-progress-container:hover .crazyai-audio-progress-track {
    height: 8px;
}

.crazyai-audio-progress-track {
    transition: height 0.15s ease;
}

/* Volume Section */
.crazyai-audio-volume-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crazyai-audio-volume-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.crazyai-audio-volume-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.crazyai-audio-volume-slider-container {
    width: 80px;
    display: flex;
    align-items: center;
}

.crazyai-audio-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.crazyai-audio-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.crazyai-audio-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.crazyai-audio-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Speed Button */
.crazyai-audio-speed-section {
    flex-shrink: 0;
}

.crazyai-audio-speed-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.crazyai-audio-speed-btn:hover {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.4);
    color: #ffffff;
}

/* Download Button */
.crazyai-audio-download-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.crazyai-audio-download-btn:hover {
    background: rgba(220, 38, 38, 0.3);
    color: #ffffff;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .crazyai-audio-player {
        padding: 16px;
    }
    
    .crazyai-audio-controls {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .crazyai-audio-play-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    
    .crazyai-audio-progress-section {
        order: 2;
        width: 100%;
        margin-top: 8px;
    }
    
    .crazyai-audio-volume-section {
        order: 1;
    }
    
    .crazyai-audio-volume-slider-container {
        width: 60px;
    }
    
    .crazyai-audio-speed-section {
        order: 1;
    }
    
    .crazyai-audio-download-btn {
        order: 1;
    }
    
    .crazyai-audio-waveform {
        height: 50px;
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    .crazyai-audio-player {
        padding: 12px;
    }
    
    .crazyai-audio-controls {
        gap: 8px;
    }
    
    .crazyai-audio-play-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .crazyai-audio-volume-slider-container {
        display: none;
    }
    
    .crazyai-audio-time {
        font-size: 11px;
        min-width: 36px;
    }
    
    .crazyai-audio-waveform {
        height: 40px;
    }
}

/* ========================================== */
/* CrazyAI Callback History Page Styles       */
/* ========================================== */

/* Modern Chat Container (Reusable for Email Detail) */
.crazyai-modern-chat-container {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.crazyai-modern-chat-container::-webkit-scrollbar {
    width: 6px;
}

.crazyai-modern-chat-container::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 3px;
}

.crazyai-modern-chat-container::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 3px;
}

.crazyai-modern-chat-container::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Message Wrapper */
.crazyai-modern-message-wrapper {
    display: flex;
    width: 100%;
}

.crazyai-modern-message-wrapper.ai-message-wrapper {
    justify-content: flex-start;
}

.crazyai-modern-message-wrapper.customer-message-wrapper {
    justify-content: flex-end;
}

/* Message */
.crazyai-modern-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 85%;
}

.crazyai-modern-message.customer-message {
    flex-direction: row-reverse;
}

/* Avatar */
.crazyai-modern-avatar {
    position: relative;
    flex-shrink: 0;
}

.crazyai-avatar-inner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: #333;
    color: #fff;
}

.ai-message .crazyai-avatar-inner {
    background: linear-gradient(135deg, #dc3545, #b02a37);
}

.customer-message .crazyai-avatar-inner {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
}

.crazyai-avatar-glow {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.15;
    filter: blur(6px);
}

.ai-message .crazyai-avatar-glow {
    background: #dc3545;
}

.customer-message .crazyai-avatar-glow {
    background: #0d6efd;
}

/* Bubble */
.crazyai-modern-bubble {
    position: relative;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: #222;
    border: 1px solid #333;
}

.ai-message .crazyai-modern-bubble {
    border-radius: 4px 12px 12px 12px;
    border-left: 3px solid #dc3545;
}

.customer-message .crazyai-modern-bubble {
    border-radius: 12px 4px 12px 12px;
    border-right: 3px solid #0d6efd;
}

/* Bubble Header */
.crazyai-bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 1rem;
}

.crazyai-sender-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.crazyai-sender-badge.ai-badge {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.crazyai-sender-badge.customer-badge {
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
}

.crazyai-message-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Message Text */
.crazyai-message-text {
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Bubble Tail (hidden by default, decorative) */
.crazyai-bubble-tail {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .crazyai-modern-message {
        max-width: 95%;
    }
    
    .crazyai-modern-chat-container {
        padding: 1rem;
    }
    
    .crazyai-avatar-inner {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
}

/* ========================================== */
/* End CrazyAI Callback History Styles        */
/* ========================================== */