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

/* Portal vibrant icon utilities (inline text icons) */
.icon-vibrant-purple { color: #d8b4fe !important; }
.icon-vibrant-gold { color: #fcd34d !important; }
.icon-vibrant-cyan { color: #67e8f9 !important; }
.icon-vibrant-green { color: #86efac !important; }
.icon-vibrant-red { color: #fca5a5 !important; }
.icon-vibrant-orange { color: #fdba74 !important; }
.icon-vibrant-blue { color: #93c5fd !important; }
.icon-vibrant-pink { color: #f9a8d4 !important; }

/* Portal card header title icons (bright badge style) */
.portal-card-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    color: #f6f7fb;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.portal-card-title-icon--purple { background: #a855f7; }
.portal-card-title-icon--cyan { background: #06b6d4; }
.portal-card-title-icon--gold { background: #eab308; }
.portal-card-title-icon--green { background: #22c55e; }
.portal-card-title-icon--red { background: #ef4444; }
.portal-card-title-icon--orange { background: #f97316; }
.portal-card-title-icon--blue { background: #3b82f6; }
.portal-card-title-icon--pink { background: #ec4899; }
.portal-card-title-icon--indigo { background: #6366f1; }
.portal-card-title-icon--teal { background: #14b8a6; }

.card-header .card-title,
.card-header > h4,
.card-header > h5,
.card-header > h6,
.ann-table-card-header .card-title,
.ann-table-card-header > h4,
.ann-table-card-header > h5,
.ann-table-card-header > h6 {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* Premium feature product beta badge (Voicemail, Announcements, Ring Groups dashboards) */
.portal-premium-beta-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.22);
    flex-shrink: 0;
}

[data-theme-mode="dark"] .portal-premium-beta-badge {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    box-shadow: 0 8px 20px rgba(109, 40, 217, 0.28);
}

.portal-premium-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

/* Premium Ring Groups Override Styles */
.rg-dashboard-container,
.rg-edit-container,
.rg-ann-container,
.rg-calls-container,
.rg-stats-container,
.rg-usage-container,
.rg-recordings-container,
#modal-create-ring-group,
#modal-call-detail,
#modal-add-member,
#modal-delete-group-confirm {
    --rg-ink: var(--bs-heading-color, #172033);
    --rg-muted: var(--bs-secondary-color, #697386);
    --rg-panel: var(--bs-card-bg, #fff);
    --rg-panel-strong: var(--bs-body-bg, #fff);
    --rg-border: var(--bs-border-color, rgba(0, 0, 0, 0.12));
    --rg-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
    --rg-accent: #8b5cf6;
    --rg-accent-light: rgba(139, 92, 246, 0.12);
    --rg-green: #22c55e;
    --rg-red: #ef4444;
    --rg-amber: #f59e0b;
    --primary-rgb: 139, 92, 246;
    --secondary-rgb: 100, 116, 139;
    --primary-color: #8b5cf6;
    --primary-border: #8b5cf6;
    --primary05: rgba(139, 92, 246, 0.5);
}

[data-theme-mode="dark"] .rg-dashboard-container,
[data-theme-mode="dark"] .rg-edit-container,
[data-theme-mode="dark"] .rg-ann-container,
[data-theme-mode="dark"] .rg-calls-container,
[data-theme-mode="dark"] .rg-stats-container,
[data-theme-mode="dark"] .rg-usage-container,
[data-theme-mode="dark"] .rg-recordings-container,
[data-theme-mode="dark"] #modal-create-ring-group,
[data-theme-mode="dark"] #modal-call-detail,
[data-theme-mode="dark"] #modal-add-member,
[data-theme-mode="dark"] #modal-delete-group-confirm {
    --rg-ink: #f6f7fb;
    --rg-muted: #b3b3b3;
    --rg-panel: #161616;
    --rg-panel-strong: #101010;
    --rg-border: rgba(255, 255, 255, 0.09);
    --rg-shadow: none;
}

[class^="rg-"] .btn.btn-primary,
[class*=" rg-"] .btn.btn-primary,
[id^="rg-"] .btn.btn-primary,
#modal-create-ring-group .btn.btn-primary,
#modal-call-detail .btn.btn-primary,
#modal-add-member .btn.btn-primary {
    background-color: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    color: #ffffff !important;
}

[class^="rg-"] .btn.btn-primary:hover,
[class^="rg-"] .btn.btn-primary:focus,
[class*=" rg-"] .btn.btn-primary:hover,
[class*=" rg-"] .btn.btn-primary:focus,
[id^="rg-"] .btn.btn-primary:hover,
[id^="rg-"] .btn.btn-primary:focus,
#modal-create-ring-group .btn.btn-primary:hover,
#modal-create-ring-group .btn.btn-primary:focus,
#modal-call-detail .btn.btn-primary:hover,
#modal-call-detail .btn.btn-primary:focus,
#modal-add-member .btn.btn-primary:hover,
#modal-add-member .btn.btn-primary:focus {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
}

[class^="rg-"] .btn.btn-secondary,
[class*=" rg-"] .btn.btn-secondary,
[id^="rg-"] .btn.btn-secondary,
#modal-create-ring-group .btn.btn-secondary,
#modal-call-detail .btn.btn-secondary,
#modal-add-member .btn.btn-secondary,
#modal-delete-group-confirm .btn.btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

[class^="rg-"] .btn.btn-secondary:hover,
[class^="rg-"] .btn.btn-secondary:focus,
[class*=" rg-"] .btn.btn-secondary:hover,
[class*=" rg-"] .btn.btn-secondary:focus,
[id^="rg-"] .btn.btn-secondary:hover,
[id^="rg-"] .btn.btn-secondary:focus,
#modal-create-ring-group .btn.btn-secondary:hover,
#modal-create-ring-group .btn.btn-secondary:focus,
#modal-call-detail .btn.btn-secondary:hover,
#modal-call-detail .btn.btn-secondary:focus,
#modal-add-member .btn.btn-secondary:hover,
#modal-add-member .btn.btn-secondary:focus,
#modal-delete-group-confirm .btn.btn-secondary:hover,
#modal-delete-group-confirm .btn.btn-secondary:focus {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

[class^="rg-"] .text-white,
[class*=" rg-"] .text-white,
[id^="rg-"] .text-white,
#modal-create-ring-group .text-white,
#modal-call-detail .text-white,
#modal-add-member .text-white,
#modal-delete-group-confirm .text-white {
    color: var(--rg-ink) !important;
}

/* Auto-size select dropdowns to their option contents instead of full-width */
.rg-edit-container .form-select,
.rg-edit-container .rg-form-select,
.rg-dashboard-container .form-select,
.rg-calls-container .form-select,
.rg-stats-container .form-select,
.rg-usage-container .form-select,
.rg-recordings-container .form-select,
#modal-create-ring-group .form-select,
#modal-call-detail .form-select,
#modal-add-member .rg-form-select {
    width: fit-content !important;
    min-width: 320px !important;
    max-width: 100% !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238b5cf6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    padding-right: 2.5rem !important;
}

@media (min-width: 768px) {
    .rg-settings-divider-left {
        border-right: 1px solid var(--rg-border, rgba(255, 255, 255, 0.09));
    }
}

/* Premium Recording Box Override Styles */
.rb-dashboard-container,
.rb-edit-container,
.rb-ann-container,
.rb-calls-container,
.rb-stats-container,
.rb-usage-container,
.rb-recordings-container,
.rb-export-deliveries-container,
.rb-pricing-container,
#modal-create-recording-box,
#modal-recording-detail,
#modal-delete-recording-confirm,
#rb-webhook-help-modal,
#rb-quickstart-modal,
#modal-call-simulator,
.rb-modern-modal {
    --rb-ink: var(--bs-heading-color, #172033);
    --rb-muted: var(--bs-secondary-color, #697386);
    --rb-panel: var(--bs-card-bg, #fff);
    --rb-panel-strong: var(--bs-body-bg, #fff);
    --rb-border: var(--bs-border-color, rgba(0, 0, 0, 0.12));
    --rb-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
    --rb-accent: #ec4899;
    --rb-accent-light: rgba(236, 72, 153, 0.12);
    --rb-green: #22c55e;
    --rb-red: #ef4444;
    --rb-amber: #f59e0b;
    --primary-rgb: 236, 72, 153;
    --secondary-rgb: 100, 116, 139;
    --primary-color: #ec4899;
    --primary-border: #ec4899;
    --primary05: rgba(236, 72, 153, 0.5);
}

.rb-dashboard-container,
.rb-edit-container,
.rb-ann-container,
.rb-calls-container,
.rb-stats-container,
.rb-usage-container,
.rb-recordings-container,
.rb-export-deliveries-container,
.rb-pricing-container {
    overflow-x: hidden;
}

[data-theme-mode="dark"] .rb-dashboard-container,
[data-theme-mode="dark"] .rb-edit-container,
[data-theme-mode="dark"] .rb-ann-container,
[data-theme-mode="dark"] .rb-calls-container,
[data-theme-mode="dark"] .rb-stats-container,
[data-theme-mode="dark"] .rb-usage-container,
[data-theme-mode="dark"] .rb-recordings-container,
[data-theme-mode="dark"] .rb-export-deliveries-container,
[data-theme-mode="dark"] .rb-pricing-container,
[data-theme-mode="dark"] #modal-create-recording-box,
[data-theme-mode="dark"] #modal-recording-detail,
[data-theme-mode="dark"] #modal-delete-recording-confirm,
[data-theme-mode="dark"] #rb-webhook-help-modal,
[data-theme-mode="dark"] #rb-quickstart-modal,
[data-theme-mode="dark"] #modal-call-simulator,
[data-theme-mode="dark"] .rb-modern-modal {
    --rb-ink: #f6f7fb;
    --rb-muted: #b3b3b3;
    --rb-panel: #161616;
    --rb-panel-strong: #101010;
    --rb-border: rgba(255, 255, 255, 0.09);
    --rb-shadow: none;
}

[class^="rb-"] .btn.btn-primary,
[class*=" rb-"] .btn.btn-primary,
[id^="rb-"] .btn.btn-primary,
#modal-create-recording-box .btn.btn-primary,
#modal-recording-detail .btn.btn-primary,
.rb-edit-container #modal-add-member .btn.btn-primary,
#modal-call-simulator .btn.btn-primary {
    background-color: #ec4899 !important;
    border-color: #ec4899 !important;
    color: #ffffff !important;
}

[class^="rb-"] .btn.btn-primary:hover,
[class^="rb-"] .btn.btn-primary:focus,
[class*=" rb-"] .btn.btn-primary:hover,
[class*=" rb-"] .btn.btn-primary:focus,
[id^="rb-"] .btn.btn-primary:hover,
[id^="rb-"] .btn.btn-primary:focus,
#modal-create-recording-box .btn.btn-primary:hover,
#modal-create-recording-box .btn.btn-primary:focus,
#modal-recording-detail .btn.btn-primary:hover,
#modal-recording-detail .btn.btn-primary:focus,
.rb-edit-container #modal-add-member .btn.btn-primary:hover,
.rb-edit-container #modal-add-member .btn.btn-primary:focus,
#modal-call-simulator .btn.btn-primary:hover,
#modal-call-simulator .btn.btn-primary:focus {
    background-color: #db2777 !important;
    border-color: #db2777 !important;
    color: #ffffff !important;
}

[class^="rb-"] .btn.btn-secondary,
[class*=" rb-"] .btn.btn-secondary,
[id^="rb-"] .btn.btn-secondary,
#modal-create-recording-box .btn.btn-secondary,
#modal-call-detail .btn.btn-secondary,
#modal-recording-detail .btn.btn-secondary,
.rb-edit-container #modal-add-member .btn.btn-secondary,
.rb-edit-container #modal-delete-group-confirm .btn.btn-secondary,
#modal-delete-recording-confirm .btn.btn-secondary,
#rb-quickstart-modal .btn.btn-secondary,
#rb-webhook-help-modal .btn.btn-secondary,
#modal-call-simulator .btn.btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

[class^="rb-"] .btn.btn-secondary:hover,
[class^="rb-"] .btn.btn-secondary:focus,
[class*=" rb-"] .btn.btn-secondary:hover,
[class*=" rb-"] .btn.btn-secondary:focus,
[id^="rb-"] .btn.btn-secondary:hover,
[id^="rb-"] .btn.btn-secondary:focus,
#modal-create-recording-box .btn.btn-secondary:hover,
#modal-create-recording-box .btn.btn-secondary:focus,
#modal-call-detail .btn.btn-secondary:hover,
#modal-call-detail .btn.btn-secondary:focus,
#modal-recording-detail .btn.btn-secondary:hover,
#modal-recording-detail .btn.btn-secondary:focus,
.rb-edit-container #modal-add-member .btn.btn-secondary:hover,
.rb-edit-container #modal-add-member .btn.btn-secondary:focus,
.rb-edit-container #modal-delete-group-confirm .btn.btn-secondary:hover,
.rb-edit-container #modal-delete-group-confirm .btn.btn-secondary:focus,
#modal-delete-recording-confirm .btn.btn-secondary:hover,
#modal-delete-recording-confirm .btn.btn-secondary:focus,
#rb-quickstart-modal .btn.btn-secondary:hover,
#rb-quickstart-modal .btn.btn-secondary:focus,
#rb-webhook-help-modal .btn.btn-secondary:hover,
#rb-webhook-help-modal .btn.btn-secondary:focus,
#modal-call-simulator .btn.btn-secondary:hover,
#modal-call-simulator .btn.btn-secondary:focus {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

[class^="rb-"] .text-white,
[class*=" rb-"] .text-white,
[id^="rb-"] .text-white,
[id^="modal-"] .rb-modern-modal .text-white,
#modal-create-recording-box .text-white,
#modal-call-detail .text-white,
#modal-recording-detail .text-white,
.rb-edit-container #modal-add-member .text-white,
.rb-edit-container #modal-delete-group-confirm .text-white,
#rb-webhook-help-modal .text-white,
#rb-quickstart-modal .text-white,
#modal-call-simulator .text-white {
    color: var(--rb-ink) !important;
}

[class^="rb-"] .text-muted,
[class*=" rb-"] .text-muted,
[id^="rb-"] .text-muted {
    color: var(--rb-muted) !important;
}

.rb-edit-container .form-select,
.rb-edit-container .rb-form-select,
.rb-dashboard-container .form-select,
.rb-calls-container .form-select,
.rb-stats-container .form-select,
.rb-usage-container .form-select,
.rb-recordings-container .form-select,
#modal-create-recording-box .form-select,
#modal-call-detail .form-select,
.rb-edit-container #modal-add-member .rb-form-select {
    width: fit-content !important;
    min-width: 320px !important;
    max-width: 100% !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ec4899' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    padding-right: 2.5rem !important;
}

@media (min-width: 768px) {
    .rb-settings-divider-left {
        border-right: 1px solid var(--rb-border, rgba(255, 255, 255, 0.09));
    }
}

/* Premium Announcements Override Styles (yellow accent) */
.ann-page-container,
.ann-pricing-container,
#ann-create-drawer,
#ann-add-schedule-modal,
#ann-add-holiday-modal,
#ann-delete-box-modal,
#ann-delete-recording-modal,
#ann-delete-holiday-modal,
#ann-create-success-modal,
#ann-quickstart-modal,
#ann-call-timeline-drawer,
.ann-modern-modal {
    --ann-ink: var(--bs-heading-color, #172033);
    --ann-muted: var(--bs-secondary-color, #697386);
    --ann-panel: var(--bs-card-bg, #fff);
    --ann-panel-strong: var(--bs-body-bg, #fff);
    --ann-border: var(--bs-border-color, rgba(0, 0, 0, 0.12));
    --ann-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
    --ann-accent: #eab308;
    --ann-accent-hover: #ca8a04;
    --ann-accent-light: rgba(234, 179, 8, 0.12);
    --ann-accent-soft: #facc15;
    --ann-green: #22c55e;
    --ann-red: #ef4444;
    --ann-amber: #f59e0b;
    --ann-card-header-bg: #f3f4f6;
    --ann-card-header-border: rgba(15, 23, 42, 0.1);
    --ann-card-header-accent: #eab308;
    --ann-card-accent-icon-bg: #eab308;
    --ann-cyan: #0891b2;
    --ann-mint: #059669;
}

[data-theme-mode="dark"] .ann-page-container,
[data-theme-mode="dark"] .ann-pricing-container,
[data-theme-mode="dark"] #ann-create-drawer,
[data-theme-mode="dark"] #ann-add-schedule-modal,
[data-theme-mode="dark"] #ann-add-holiday-modal,
[data-theme-mode="dark"] #ann-delete-box-modal,
[data-theme-mode="dark"] #ann-delete-recording-modal,
[data-theme-mode="dark"] #ann-delete-holiday-modal,
[data-theme-mode="dark"] #ann-create-success-modal,
[data-theme-mode="dark"] #ann-quickstart-modal,
[data-theme-mode="dark"] #ann-call-timeline-drawer,
[data-theme-mode="dark"] .ann-modern-modal {
    --ann-ink: #f6f7fb;
    --ann-muted: #b3b3b3;
    --ann-panel: #161616;
    --ann-panel-strong: #101010;
    --ann-border: rgba(255, 255, 255, 0.09);
    --ann-shadow: none;
    --ann-card-header-bg: #1a1a1e;
    --ann-card-header-border: rgba(255, 255, 255, 0.09);
}

.ann-page-container .btn.btn-primary,
.ann-pricing-container .btn.btn-primary,
#ann-create-drawer .btn.btn-primary,
#ann-add-schedule-modal .btn.btn-primary,
#ann-add-holiday-modal .btn.btn-primary,
#ann-delete-box-modal .btn.btn-primary,
#ann-delete-recording-modal .btn.btn-primary,
#ann-delete-holiday-modal .btn.btn-primary,
#ann-create-success-modal .btn.btn-primary,
#ann-quickstart-modal .btn.btn-primary,
#ann-call-timeline-drawer .btn.btn-primary,
.ann-modern-modal .btn.btn-primary,
.ann-ad-cta-btn {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.28) !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ann-page-container .btn.btn-primary:hover,
.ann-page-container .btn.btn-primary:focus,
.ann-pricing-container .btn.btn-primary:hover,
.ann-pricing-container .btn.btn-primary:focus,
#ann-create-drawer .btn.btn-primary:hover,
#ann-create-drawer .btn.btn-primary:focus,
#ann-add-schedule-modal .btn.btn-primary:hover,
#ann-add-schedule-modal .btn.btn-primary:focus,
#ann-add-holiday-modal .btn.btn-primary:hover,
#ann-add-holiday-modal .btn.btn-primary:focus,
#ann-delete-box-modal .btn.btn-primary:hover,
#ann-delete-box-modal .btn.btn-primary:focus,
#ann-delete-recording-modal .btn.btn-primary:hover,
#ann-delete-recording-modal .btn.btn-primary:focus,
#ann-delete-holiday-modal .btn.btn-primary:hover,
#ann-delete-holiday-modal .btn.btn-primary:focus,
#ann-create-success-modal .btn.btn-primary:hover,
#ann-create-success-modal .btn.btn-primary:focus,
#ann-quickstart-modal .btn.btn-primary:hover,
#ann-quickstart-modal .btn.btn-primary:focus,
#ann-call-timeline-drawer .btn.btn-primary:hover,
#ann-call-timeline-drawer .btn.btn-primary:focus,
.ann-modern-modal .btn.btn-primary:hover,
.ann-modern-modal .btn.btn-primary:focus,
.ann-ad-cta-btn:hover,
.ann-ad-cta-btn:focus {
    background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%) !important;
    box-shadow: 0 6px 18px rgba(234, 179, 8, 0.38) !important;
    color: #1a1a1a !important;
    transform: translateY(-1px);
}

.ann-page-container .btn.btn-secondary,
.ann-pricing-container .btn.btn-secondary,
#ann-create-drawer .btn.btn-secondary,
#ann-add-schedule-modal .btn.btn-secondary,
#ann-add-holiday-modal .btn.btn-secondary,
#ann-delete-box-modal .btn.btn-secondary,
#ann-delete-recording-modal .btn.btn-secondary,
#ann-delete-holiday-modal .btn.btn-secondary,
#ann-create-success-modal .btn.btn-secondary,
#ann-quickstart-modal .btn.btn-secondary,
#ann-call-timeline-drawer .btn.btn-secondary,
.ann-modern-modal .btn.btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

.ann-page-container .btn.btn-secondary:hover,
.ann-page-container .btn.btn-secondary:focus,
.ann-pricing-container .btn.btn-secondary:hover,
.ann-pricing-container .btn.btn-secondary:focus,
#ann-create-drawer .btn.btn-secondary:hover,
#ann-create-drawer .btn.btn-secondary:focus,
#ann-add-schedule-modal .btn.btn-secondary:hover,
#ann-add-schedule-modal .btn.btn-secondary:focus,
#ann-add-holiday-modal .btn.btn-secondary:hover,
#ann-add-holiday-modal .btn.btn-secondary:focus,
#ann-delete-box-modal .btn.btn-secondary:hover,
#ann-delete-box-modal .btn.btn-secondary:focus,
#ann-delete-recording-modal .btn.btn-secondary:hover,
#ann-delete-recording-modal .btn.btn-secondary:focus,
#ann-delete-holiday-modal .btn.btn-secondary:hover,
#ann-delete-holiday-modal .btn.btn-secondary:focus,
#ann-create-success-modal .btn.btn-secondary:hover,
#ann-create-success-modal .btn.btn-secondary:focus,
#ann-quickstart-modal .btn.btn-secondary:hover,
#ann-quickstart-modal .btn.btn-secondary:focus,
#ann-call-timeline-drawer .btn.btn-secondary:hover,
#ann-call-timeline-drawer .btn.btn-secondary:focus,
.ann-modern-modal .btn.btn-secondary:hover,
.ann-modern-modal .btn.btn-secondary:focus {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

.ann-page-container .text-gold,
.ann-page-container .text-primary,
.ann-modern-modal .text-primary {
    color: var(--ann-accent) !important;
}

/* Announcements — yellow subnav (mirrors rb-subnav / rg-subnav) */
.ann-page-container .ann-subnav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ann-page-container .ann-subnav-link {
    align-items: center;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid var(--ann-border, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    color: var(--ann-muted, #b3b3b3);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ann-page-container .ann-subnav-link:hover {
    border-color: rgba(234, 179, 8, 0.35);
    color: var(--ann-ink, #f6f7fb);
}

.ann-page-container .ann-subnav-link.is-active {
    background: rgba(234, 179, 8, 0.18);
    border-color: rgba(234, 179, 8, 0.55);
    color: var(--ann-ink, #172033);
}

.ann-page-container .ann-subnav-link i {
    color: inherit;
    font-size: 0.95em;
    line-height: 1;
}

[data-theme-mode="dark"] .ann-page-container .ann-subnav-link:not(.is-active) {
    background: rgba(255, 255, 255, 0.05);
    color: #d4d4d4;
}

[data-theme-mode="dark"] .ann-page-container .ann-subnav-link.is-active {
    color: #f6f7fb;
    background: rgba(234, 179, 8, 0.2);
}

/* Announcements — advertisement-style table empty states */
.ann-empty-state-cell {
    border-bottom: 0 !important;
    padding: 1.25rem 1rem !important;
    vertical-align: middle;
}

.ann-empty-state {
    position: relative;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.28) 0%, rgba(245, 158, 11, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    margin: 0.35rem auto;
    max-width: 34rem;
}

.ann-empty-state--compact {
    max-width: 28rem;
}

.ann-empty-state-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
    animation: rgAdGlowRotate 8s linear infinite;
}

.ann-empty-state-inner {
    position: relative;
    z-index: 2;
    background: var(--ann-panel, #161616);
    border-radius: 0.95rem;
    padding: 1.35rem 1.25rem;
    text-align: center;
}

.ann-empty-state-inner::after {
    content: '';
    position: absolute;
    bottom: -24px;
    right: -24px;
    width: 96px;
    height: 96px;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ann-empty-state-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 0.85rem;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.22) 0%, rgba(245, 158, 11, 0.08) 100%);
    border: 1px solid rgba(234, 179, 8, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #facc15;
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.18);
}

.ann-empty-state-icon i {
    font-size: 1.35rem;
    line-height: 1;
}

.ann-empty-state-title {
    color: var(--ann-ink, #f6f7fb);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
}

.ann-empty-state-message {
    color: var(--ann-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 26rem;
}

.ann-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.ann-empty-state-actions .btn {
    min-height: 2.5rem;
    min-width: 2.75rem;
}

[data-theme-mode="light"] .ann-empty-state-inner {
    background: var(--ann-panel, #fff);
}

[data-theme-mode="light"] .ann-empty-state-title {
    color: var(--ann-ink, #172033);
}

@media (max-width: 575.98px) {
    .ann-empty-state-cell {
        padding: 0.85rem 0.5rem !important;
    }

    .ann-empty-state-inner {
        padding: 1.1rem 0.85rem;
    }

    .ann-empty-state-icon {
        width: 46px;
        height: 46px;
    }

    .ann-empty-state-title {
        font-size: 0.95rem;
    }

    .ann-empty-state-message {
        font-size: 0.85rem;
    }
}

/* Announcements — neutral panel hero (matches RG/RB) */
.ann-dashboard-hero {
    background: var(--ann-panel);
    border: 1px solid var(--ann-border);
    border-radius: 0.85rem;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--ann-shadow);
    display: block;
    width: 100%;
}

.ann-dashboard-hero.ann-dashboard-hero--boxes {
    display: block;
}

.ann-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--ann-accent-light);
    color: var(--ann-accent);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ann-hero-title {
    color: var(--ann-ink);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0.5rem 0 0.25rem;
}

.ann-hero-copy {
    color: var(--ann-muted);
    font-size: 0.875rem;
    max-width: 42rem;
    margin-bottom: 0.35rem;
}

.ann-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--ann-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--ann-ink);
    font-size: 0.875rem;
    font-weight: 600;
}

.ann-page-container .metric-card {
    position: relative;
    height: 100%;
    border-radius: 0.7rem;
    padding: 0.75rem 0.85rem;
    background: var(--ann-panel);
    border: 1px solid var(--ann-border);
    box-shadow: var(--ann-shadow);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ann-page-container .metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(234, 179, 8, 0.3);
}

.ann-page-container .metric-value {
    color: var(--ann-ink);
    font-size: clamp(1.4rem, 2.5vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0.25rem 0 0.15rem;
}

.ann-page-container .metric-label {
    color: var(--ann-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ann-page-container .metric-footnote {
    color: var(--ann-muted);
    font-size: 0.68rem;
}

.ann-page-container .metric-icon-solid {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 1px solid var(--ann-border);
}

.ann-page-container .metric-icon-solid.bg-primary {
    color: #101010 !important;
    background: linear-gradient(135deg, var(--ann-accent), #facc15) !important;
    border-color: var(--ann-accent) !important;
}

.ann-page-container .metric-icon-solid.bg-info {
    color: #ffffff !important;
    background: #10b981 !important;
    border-color: #10b981 !important;
    box-shadow: none;
}

.ann-page-container .metric-icon-solid.bg-danger {
    color: #ffffff !important;
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    box-shadow: none;
}

.ann-page-container .metric-icon-solid.bg-warning {
    color: #101010 !important;
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    box-shadow: none;
}

/* Announcements — advertisement CTA card (yellow accent) */
.ann-ad-cta-card {
    position: relative;
    border-radius: 1.25rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.3) 0%, rgba(245, 158, 11, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.ann-ad-cta-card:hover,
.ann-ad-cta-card:focus-visible {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.5) 0%, rgba(245, 158, 11, 0.2) 50%, rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 0 20px 32px -8px rgba(0, 0, 0, 0.6), 0 0 15px rgba(234, 179, 8, 0.15);
    outline: none;
}

.ann-ad-cta-glow {
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.12) 0%, transparent 68%);
    pointer-events: none;
    z-index: 1;
}

.ann-ad-cta-content {
    position: relative;
    z-index: 2;
    border-radius: 0.95rem;
    padding: 1.1rem 1.15rem;
    background: var(--ann-panel);
    border: 1px solid var(--ann-border);
}

.ann-ad-cta-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #101010;
    font-size: 1.2rem;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.85), #facc15);
    border: 1px solid rgba(234, 179, 8, 0.35);
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.25);
    transition: transform 0.25s ease;
}

.ann-ad-cta-card:hover .ann-ad-cta-icon {
    transform: scale(1.05);
}

.ann-ad-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--ann-accent-light);
    border: 1px solid rgba(234, 179, 8, 0.25);
    color: var(--ann-accent-soft);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ann-ad-cta-title {
    margin: 0 0 0.3rem;
    color: var(--ann-ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.ann-ad-cta-desc {
    margin: 0;
    color: var(--ann-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.ann-ad-cta-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ann-border);
    color: var(--ann-accent);
    font-size: 0.875rem;
    font-weight: 700;
}

.ann-ad-cta-action i {
    color: inherit;
    transition: transform 0.2s ease;
}

.ann-ad-cta-card:hover .ann-ad-cta-action i {
    transform: translateX(3px);
}

/* Announcements — setup guide launcher */
.ann-help-launcher {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem 0.65rem 0.85rem;
    border: 1px dashed rgba(234, 179, 8, 0.45);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.12), rgba(245, 158, 11, 0.08));
    color: var(--ann-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ann-help-launcher:hover,
.ann-help-launcher:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(234, 179, 8, 0.65);
    box-shadow: 0 14px 32px rgba(234, 179, 8, 0.2);
    outline: none;
}

.ann-help-launcher-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #101010;
    background: linear-gradient(135deg, #eab308, #ca8a04);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Announcements — setup guide trigger + modal (yellow accent) */
.ann-quickstart-bar {
    background: var(--ann-panel, #161616);
    border: 1px solid var(--ann-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.65rem;
    overflow: hidden;
}

.ann-quickstart-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    text-align: left;
    width: 100%;
}

.ann-quickstart-trigger:hover {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme-mode="dark"] .ann-quickstart-trigger:hover {
    background: rgba(255, 255, 255, 0.025);
}

.ann-quickstart-trigger:focus-visible {
    outline: 2px solid rgba(234, 179, 8, 0.55);
    outline-offset: -2px;
}

.ann-quickstart-trigger-icon {
    align-items: center;
    background: rgba(234, 179, 8, 0.12);
    border-radius: 0.45rem;
    color: #facc15;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.95rem;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.ann-quickstart-trigger-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ann-quickstart-trigger-title {
    color: var(--ann-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
}

.ann-quickstart-trigger-meta {
    color: var(--ann-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.2;
}

.ann-quickstart-trigger-action {
    align-items: center;
    color: var(--ann-muted, #b3b3b3);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.2rem;
    white-space: nowrap;
}

.ann-quickstart-chevron {
    color: #facc15;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.ann-quickstart-trigger:hover .ann-quickstart-chevron,
.ann-quickstart-trigger:focus-visible .ann-quickstart-chevron {
    transform: translateX(2px);
}

.ann-quickstart-modal-body {
    padding-top: 0.25rem !important;
}

.ann-quickstart-modal-intro {
    color: var(--ann-muted, #b3b3b3) !important;
    font-size: 0.875rem;
    line-height: 1.45;
}

.ann-quickstart-grid {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ann-quickstart-item {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ann-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.55rem;
    display: flex;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
}

.ann-quickstart-item-num {
    align-items: center;
    background: rgba(234, 179, 8, 0.14);
    border-radius: 0.45rem;
    color: #fde047;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 800;
    height: 1.65rem;
    justify-content: center;
    width: 1.65rem;
}

.ann-quickstart-item-copy {
    min-width: 0;
}

.ann-quickstart-item-title {
    color: var(--ann-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.15rem;
}

.ann-quickstart-item-detail {
    color: var(--ann-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
}

.ann-quickstart-tip {
    align-items: flex-start;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.18);
    border-radius: 0.55rem;
    color: var(--ann-muted, #b3b3b3);
    display: flex;
    font-size: 0.875rem;
    gap: 0.45rem;
    line-height: 1.45;
    margin: 0.85rem 0 0;
    padding: 0.65rem 0.75rem;
}

.ann-quickstart-tip i {
    color: #facc15;
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.2;
    margin-top: 0.05rem;
}

.ann-hero-layout {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
}

.ann-hero-breadcrumb {
    font-size: 0.875rem;
}

.ann-hero-breadcrumb .breadcrumb-item a {
    color: var(--ann-muted);
    text-decoration: none;
}

.ann-hero-breadcrumb .breadcrumb-item a:hover {
    color: var(--ann-ink);
}

.ann-hero-breadcrumb .breadcrumb-item.active {
    color: var(--ann-ink);
}

.ann-hero-title-icon {
    color: var(--ann-accent);
}

.ann-hero-search {
    background-color: var(--ann-panel-strong) !important;
    border: 1px solid var(--ann-border) !important;
    border-radius: 50px !important;
    color: var(--ann-ink) !important;
}

.ann-hero-search:focus {
    border-color: rgba(234, 179, 8, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
}

.ann-upload-drag-zone:hover {
    background: rgba(234, 179, 8, 0.05) !important;
}

.ann-audio-player-widget {
    border: 1px solid rgba(234, 179, 8, 0.35) !important;
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.12) !important;
}

.ann-audio-player-icon {
    background: rgba(234, 179, 8, 0.15);
}

@media (max-width: 575.98px) {
    .ann-quickstart-grid {
        grid-template-columns: 1fr;
    }

    .ann-quickstart-trigger-action .ann-quickstart-action-label {
        display: none;
    }
}

.ann-page-container {
    padding: 0.5rem 0.75rem 2.5rem !important;
    position: relative;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    .ann-page-container { overflow-x: hidden; }
}

.ann-page-container .ann-panel-card {
    background: var(--ann-panel);
    border: 1px solid var(--ann-border);
    border-radius: 0.85rem;
    box-shadow: var(--ann-shadow);
}

.ann-page-container .ann-panel-card .card-header,
.ann-page-container .ann-panel-card .ann-panel-card-header,
.ann-page-container .ann-panel-card .ann-table-card-header {
    background: var(--ann-card-header-bg, var(--ann-panel));
    border-bottom: 1px solid var(--ann-border);
    color: var(--ann-ink);
}

.ann-page-container .ann-panel-card .card-header h6,
.ann-page-container .ann-panel-card .ann-table-card-header h6,
.ann-page-container .ann-panel-card .ann-panel-card-header h6 {
    color: var(--ann-ink);
}

.ann-page-container .ann-panel-card-subtitle {
    color: var(--ann-muted);
}

.ann-page-container .ann-panel-card .card-body {
    background: var(--ann-panel);
    color: var(--ann-ink);
}

.ann-page-container .card.ann-panel-card,
.ann-page-container .ann-panel-card.card {
    background: var(--ann-panel) !important;
    border-color: var(--ann-border) !important;
    color: var(--ann-ink);
}

.ann-page-container .ann-panel-card .table-responsive,
.ann-page-container .ann-panel-card > .card-body.p-0 .table-responsive,
.ann-page-container .table-responsive {
    background: var(--ann-panel) !important;
    border: 1px solid var(--ann-border);
    border-radius: 0.65rem;
}

.ann-page-container .ann-panel-card > .card-body.p-0 > .table-responsive {
    border: none;
    border-radius: 0 0 0.85rem 0.85rem;
}

.ann-page-container .ann-table,
.ann-page-container .table.ann-table {
    --bs-table-bg: var(--ann-panel) !important;
    --bs-table-color: var(--ann-ink) !important;
    --bs-table-border-color: var(--ann-border) !important;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.03) !important;
    --bs-table-hover-bg: rgba(234, 179, 8, 0.06) !important;
    --bs-table-hover-color: var(--ann-ink) !important;
    --bs-table-active-bg: rgba(234, 179, 8, 0.08) !important;
    background-color: var(--ann-panel) !important;
    border-color: var(--ann-border) !important;
    color: var(--ann-ink) !important;
    margin-bottom: 0;
}

.ann-page-container .ann-table > :not(caption) > * > *,
.ann-page-container .table.ann-table > :not(caption) > * > * {
    --bs-table-bg: var(--ann-panel) !important;
    --bs-table-color: var(--ann-ink) !important;
    --bs-body-bg: var(--ann-panel) !important;
    background-color: var(--ann-panel) !important;
    border-color: var(--ann-border) !important;
    box-shadow: none !important;
    color: var(--ann-ink) !important;
}

.ann-page-container .ann-table thead th,
.ann-page-container .table.ann-table thead th {
    background: rgba(0, 0, 0, 0.06) !important;
    border-bottom: 2px solid var(--ann-border) !important;
    color: var(--ann-muted) !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .ann-page-container .ann-table thead th,
[data-theme-mode="dark"] .ann-page-container .table.ann-table thead th {
    background: rgba(255, 255, 255, 0.02) !important;
}

.ann-page-container .ann-table tbody tr,
.ann-page-container .table.ann-table tbody tr {
    border-bottom: 1px solid var(--ann-border);
}

.ann-page-container .ann-table tbody tr:hover > *,
.ann-page-container .table.ann-table tbody tr:hover > * {
    --bs-table-accent-bg: rgba(234, 179, 8, 0.04) !important;
    --bs-table-bg-state: rgba(234, 179, 8, 0.04) !important;
    background-color: rgba(234, 179, 8, 0.04) !important;
    box-shadow: none !important;
    color: var(--ann-ink) !important;
}

.ann-page-container .ann-table td,
.ann-page-container .ann-table th,
.ann-page-container .table.ann-table td,
.ann-page-container .table.ann-table th {
    border-color: var(--ann-border) !important;
    color: var(--ann-ink) !important;
    vertical-align: middle;
}

.ann-page-container .text-white {
    color: var(--ann-ink) !important;
}

.ann-page-container .alert-warning {
    background: rgba(234, 179, 8, 0.08) !important;
    border: 1px solid rgba(234, 179, 8, 0.35) !important;
    border-left: 3px solid var(--ann-accent) !important;
    color: var(--ann-muted) !important;
}

.ann-page-container .alert-warning i {
    color: #facc15 !important;
}

.ann-page-container .alert-warning .flex-grow-1 {
    color: var(--ann-ink) !important;
}

.ann-page-container .ann-dash-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ann-page-container .ann-dash-quick-action {
    align-items: center;
    background: var(--ann-panel-strong);
    border: 1px solid var(--ann-border);
    border-radius: 0.65rem;
    color: var(--ann-ink);
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    width: 100%;
}

.ann-page-container .ann-dash-quick-action:hover,
.ann-page-container .ann-dash-quick-action:focus-visible {
    background: rgba(234, 179, 8, 0.06);
    border-color: rgba(234, 179, 8, 0.28);
    transform: translateY(-1px);
}

.ann-page-container .ann-dash-quick-action-icon {
    align-items: center;
    background: var(--ann-accent-light);
    border-radius: 0.5rem;
    color: var(--ann-accent);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.1rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.ann-page-container .ann-dash-quick-action-title {
    color: var(--ann-ink);
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
}

.ann-page-container .ann-dash-quick-action-desc {
    color: var(--ann-muted);
    display: block;
    font-size: 0.75rem;
}

.ann-page-container .ann-dash-quick-action-go {
    color: var(--ann-muted);
    flex-shrink: 0;
    margin-left: auto;
}

.ann-page-container .ann-dash-header-btn {
    border-color: var(--ann-border) !important;
    color: var(--ann-accent) !important;
}

.ann-page-container .ann-dash-header-btn:hover,
.ann-page-container .ann-dash-header-btn:focus-visible {
    background: var(--ann-accent-light) !important;
    border-color: rgba(234, 179, 8, 0.35) !important;
    color: var(--ann-accent-soft) !important;
}

.ann-page-container .ann-dash-spinner {
    color: var(--ann-accent) !important;
}

.ann-page-container .ann-snapshot-setup-list .badge {
    background: var(--ann-accent-light) !important;
    border: 1px solid rgba(234, 179, 8, 0.25);
    color: var(--ann-accent-soft) !important;
    font-weight: 700;
}

.ann-page-container .ann-snapshot-setup-step-text a {
    color: var(--ann-accent);
    text-decoration: none;
}

.ann-snapshot-setup-step-text a:hover {
    color: var(--ann-accent-soft);
    text-decoration: underline;
}

.ann-page-container .form-control,
.ann-page-container .form-select {
    background-color: var(--ann-panel-strong);
    border-color: var(--ann-border);
    color: var(--ann-ink);
}

.ann-page-container .form-control:focus,
.ann-page-container .form-select:focus {
    background-color: var(--ann-panel-strong);
    border-color: rgba(234, 179, 8, 0.45);
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
    color: var(--ann-ink);
}

.ann-page-container .form-control::placeholder {
    color: var(--ann-muted);
}

.ann-page-container #settings-view-container .nav-pills .nav-link.active {
    background: var(--ann-accent-light) !important;
    border-left: 3px solid var(--ann-accent) !important;
    color: #facc15 !important;
    font-weight: 600 !important;
}

.ann-page-container #settings-view-container .form-control:focus,
.ann-page-container #settings-view-container .form-select:focus {
    border-color: var(--ann-accent) !important;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15) !important;
}

.ann-modern-modal {
    background: var(--ann-panel) !important;
    border: 1px solid var(--ann-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
}

.offcanvas.ann-modern-modal {
    border-bottom: none !important;
    border-left: 1px solid var(--ann-border) !important;
    border-radius: 0 !important;
    border-right: none !important;
    border-top: none !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    top: 0 !important;
}

.offcanvas.ann-modern-modal .offcanvas-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.ann-modern-modal .modal-header,
.ann-modern-modal .offcanvas-header {
    background: linear-gradient(90deg, #a16207 0%, #eab308 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.ann-modern-modal.ann-modern-modal--danger .modal-header,
.ann-modern-modal.ann-modern-modal--danger .offcanvas-header {
    background: linear-gradient(90deg, rgba(127, 29, 29, 0.85) 0%, rgba(185, 28, 28, 0.65) 100%) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.ann-modern-modal .modal-title,
.ann-modern-modal .offcanvas-title {
    color: #f6f7fb !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.ann-modern-modal.ann-modern-modal--danger .modal-title.text-danger {
    color: #fca5a5 !important;
}

.ann-modern-modal .modal-title i,
.ann-modern-modal .offcanvas-title i {
    color: #ffffff !important;
    font-size: 1.2rem !important;
    vertical-align: middle;
}

.ann-modern-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.2);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ann-modern-modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.ann-modern-modal .modal-body,
.ann-modern-modal .offcanvas-body {
    background: var(--ann-panel) !important;
    color: var(--ann-ink) !important;
    padding: 1.5rem !important;
}

.ann-modern-modal .form-label {
    color: var(--ann-muted) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 0.5rem !important;
    text-transform: uppercase !important;
}

.ann-modern-modal .form-control,
.ann-modern-modal .form-select {
    background-color: var(--ann-panel-strong) !important;
    border: 1px solid var(--ann-border) !important;
    border-radius: 8px !important;
    color: var(--ann-ink) !important;
    font-size: 0.875rem !important;
    padding: 0.55rem 0.8rem !important;
}

.ann-modern-modal .form-control:focus,
.ann-modern-modal .form-select:focus {
    background-color: var(--ann-panel-strong) !important;
    border-color: var(--ann-accent) !important;
    box-shadow: 0 0 0 3px var(--ann-accent-light) !important;
    color: var(--ann-ink) !important;
}

.ann-modern-modal h6.text-muted {
    color: var(--ann-accent-hover, #ca8a04) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1rem !important;
    text-transform: uppercase !important;
}

.ann-modern-modal .text-muted.fs-10,
.ann-modern-modal .fs-10.text-muted,
.ann-modern-modal .fs-11.text-muted {
    font-size: 0.875rem !important;
}

.ann-modern-modal .modal-footer {
    align-items: center !important;
    background: var(--ann-panel) !important;
    border-top: 1px solid var(--ann-border) !important;
    display: flex !important;
    gap: 0.75rem !important;
    justify-content: flex-end !important;
    padding: 1.25rem 1.5rem !important;
}

.ann-modern-modal .btn-secondary {
    border: 1px solid var(--ann-border) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    padding: 0.55rem 1.25rem !important;
}

[data-theme-mode="dark"] .ann-modern-modal {
    background: #161616 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.75) !important;
}

[data-theme-mode="dark"] .offcanvas.ann-modern-modal {
    border-left-color: rgba(255, 255, 255, 0.09) !important;
}

[data-theme-mode="dark"] .ann-modern-modal .modal-body,
[data-theme-mode="dark"] .ann-modern-modal .offcanvas-body {
    background: #161616 !important;
}

[data-theme-mode="dark"] .ann-modern-modal .form-label {
    color: #b3b3b3 !important;
}

[data-theme-mode="dark"] .ann-modern-modal .form-control,
[data-theme-mode="dark"] .ann-modern-modal .form-select {
    background-color: #1a1a1c !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #eeeeee !important;
}

[data-theme-mode="dark"] .ann-modern-modal .form-control:focus,
[data-theme-mode="dark"] .ann-modern-modal .form-select:focus {
    color: #ffffff !important;
}

[data-theme-mode="dark"] .ann-modern-modal h6.text-muted {
    color: #fde047 !important;
}

[data-theme-mode="dark"] .ann-modern-modal .modal-footer {
    background: #161616 !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme-mode="dark"] .ann-modern-modal .btn-secondary {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #b3b3b3 !important;
}

[data-theme-mode="light"] .ann-modern-modal {
    background: var(--ann-panel, #ffffff) !important;
    border-color: var(--ann-border, rgba(0, 0, 0, 0.12)) !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    color: var(--ann-ink, #172033) !important;
}

[data-theme-mode="light"] .offcanvas.ann-modern-modal {
    border-left-color: var(--ann-border, rgba(0, 0, 0, 0.12)) !important;
}

[data-theme-mode="light"] .ann-modern-modal .modal-body,
[data-theme-mode="light"] .ann-modern-modal .offcanvas-body {
    background: var(--ann-panel, #ffffff) !important;
    color: var(--ann-ink, #172033) !important;
}

[data-theme-mode="light"] .ann-modern-modal .form-label {
    color: var(--ann-muted, #697386) !important;
}

[data-theme-mode="light"] .ann-modern-modal .form-control,
[data-theme-mode="light"] .ann-modern-modal .form-select {
    background-color: var(--ann-panel-strong, #ffffff) !important;
    border-color: var(--ann-border, rgba(0, 0, 0, 0.12)) !important;
    color: var(--ann-ink, #172033) !important;
}

[data-theme-mode="light"] .ann-modern-modal .form-control:focus,
[data-theme-mode="light"] .ann-modern-modal .form-select:focus {
    background-color: var(--ann-panel-strong, #ffffff) !important;
    color: var(--ann-ink, #172033) !important;
}

[data-theme-mode="light"] .ann-modern-modal h6.text-muted {
    color: var(--ann-accent-hover, #ca8a04) !important;
}

[data-theme-mode="light"] .ann-modern-modal .modal-footer {
    background: var(--ann-panel, #ffffff) !important;
    border-top-color: var(--ann-border, rgba(0, 0, 0, 0.12)) !important;
}

[data-theme-mode="light"] .ann-modern-modal .btn-secondary {
    border-color: var(--ann-border, rgba(0, 0, 0, 0.12)) !important;
    color: var(--ann-muted, #697386) !important;
}

/* Announcements — pricing page (scoped under ann-page-container) */

.ann-page-container[data-ann-page="pricing"] .ann-panel-card {
    background: var(--ann-panel);
    border: 1px solid var(--ann-border);
    border-radius: 0.85rem;
    box-shadow: var(--ann-shadow);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero {
    background: var(--ann-panel);
    border: 1px solid var(--ann-border);
    border-radius: 0.85rem;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--ann-shadow);
}
.ann-page-container[data-ann-page="pricing"] .ann-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem 0.28rem 0.45rem;
    border-radius: 999px;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.25);
    color: #facc15;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ann-page-container[data-ann-page="pricing"] .ann-eyebrow i {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: #facc15;
    background: rgba(234, 179, 8, 0.18);
}
.ann-page-container[data-ann-page="pricing"] .ann-hero-title {
    color: var(--ann-ink);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0.55rem 0 0.35rem;
}
.ann-page-container[data-ann-page="pricing"] .ann-hero-copy {
    color: var(--ann-muted);
    font-size: 0.85rem;
    max-width: 42rem;
    line-height: 1.55;
}
.ann-page-container[data-ann-page="pricing"] .ann-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.32rem 0.7rem 0.32rem 0.45rem;
    border: 1px solid var(--ann-border);
    border-radius: 999px;
    color: var(--ann-ink);
    font-size: 0.72rem;
    font-weight: 650;
    background: rgba(255, 255, 255, 0.03);
}
.ann-page-container[data-ann-page="pricing"] .ann-hero-pill:nth-child(1) {
    border-color: rgba(5, 150, 105, 0.35);
    background: rgba(5, 150, 105, 0.1);
}
.ann-page-container[data-ann-page="pricing"] .ann-hero-pill:nth-child(2) {
    border-color: rgba(234, 179, 8, 0.35);
    background: rgba(234, 179, 8, 0.1);
}
.ann-page-container[data-ann-page="pricing"] .ann-hero-pill:nth-child(3) {
    border-color: rgba(8, 145, 178, 0.35);
    background: rgba(8, 145, 178, 0.1);
}
.ann-page-container[data-ann-page="pricing"] .ann-hero-pill i {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: inherit !important;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
}
.ann-page-container[data-ann-page="pricing"] .ann-hero-pill:nth-child(1) i {
    color: var(--ann-mint) !important;
    background: rgba(5, 150, 105, 0.14);
}
.ann-page-container[data-ann-page="pricing"] .ann-hero-pill:nth-child(2) i {
    color: #facc15 !important;
    background: rgba(234, 179, 8, 0.18);
}
.ann-page-container[data-ann-page="pricing"] .ann-hero-pill:nth-child(3) i {
    color: var(--ann-cyan) !important;
    background: rgba(8, 145, 178, 0.14);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-accent {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 700;
    color: #facc15;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.25);
    letter-spacing: -0.01em;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-card {
    text-align: center;
    padding: 1.5rem 1.25rem;
    border-radius: 0.85rem;
    border: none;
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
    box-shadow: 0 10px 28px rgba(234, 179, 8, 0.28);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.85rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-card-icon i {
    color: #ffffff;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-card-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.5rem;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-price {
    color: #ffffff;
    font-size: clamp(2.5rem, 6vw, 3.25rem);
    font-weight: 850;
    letter-spacing: -0.06em;
    line-height: 1;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-currency {
    font-size: 0.55em;
    vertical-align: super;
    font-weight: 700;
    color: #ffffff;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-period {
    font-size: 0.35em;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-card-note {
    margin-top: 0.65rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card {
    border: 1px solid var(--ann-border);
    border-radius: 0.85rem;
    padding: 1.25rem;
    background: var(--ann-panel);
    box-shadow: var(--ann-shadow);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card:hover {
    transform: translateY(-2px);
    border-color: rgba(234, 179, 8, 0.35);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card--subscription { border-top: 3px solid var(--ann-accent); }
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card--sms { border-top: 3px solid #ec4899; }
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card--forward { border-top: 3px solid var(--ann-amber); }
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.85rem;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-icon.is-blue {
    background: rgba(234, 179, 8, 0.12);
    color: #facc15;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-icon.is-pink {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-icon.is-amber {
    background: rgba(245, 158, 11, 0.12);
    color: var(--ann-amber);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-icon i {
    color: inherit;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-title {
    color: var(--ann-ink);
    font-size: 1.05rem;
    font-weight: 750;
    margin-bottom: 0.5rem;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-amount {
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -0.03em;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-unit {
    font-size: 0.8rem;
    font-weight: 500;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-rate {
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    text-align: center;
    border: 1px solid rgba(234, 179, 8, 0.25);
    background: rgba(234, 179, 8, 0.08);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card--subscription .ann-pricing-card-rate {
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.25);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card--sms .ann-pricing-card-rate {
    background: rgba(236, 72, 153, 0.08);
    border-color: rgba(236, 72, 153, 0.25);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card--forward .ann-pricing-card-rate {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
}
.ann-pricing-card-rate .ann-pricing-card-amount,
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-rate .ann-pricing-card-unit {
    color: var(--ann-ink);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-card-lead {
    font-size: 0.825rem;
    color: var(--ann-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--ann-muted);
    line-height: 1.45;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-feature-list li > i {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    background: rgba(34, 197, 94, 0.12);
    color: var(--ann-green) !important;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-feature-warn-icon {
    background: rgba(245, 158, 11, 0.12) !important;
    color: var(--ann-amber) !important;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-feature-list strong {
    color: var(--ann-ink);
    font-weight: 650;
}
.ann-page-container[data-ann-page="pricing"] .ann-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.25);
    color: #facc15;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-example-table-wrap {
    border: 1px solid var(--ann-border);
    border-radius: 0.65rem;
    overflow: hidden;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-example-table > :not(caption) > * > * {
    background: var(--ann-panel);
    color: var(--ann-ink);
    border-color: var(--ann-border);
    font-size: 0.82rem;
    vertical-align: middle;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-example-table thead th {
    background: var(--ann-panel-strong);
    color: var(--ann-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ann-muted);
    background: var(--ann-panel);
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-left: 3px solid var(--ann-accent);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-callout strong {
    color: var(--ann-ink);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-callout a {
    color: #facc15;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.ann-pricing-callout a:hover,
.ann-page-container[data-ann-page="pricing"] .ann-pricing-callout a:focus-visible {
    color: var(--ann-accent);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-callout--info {
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.35);
    border-left-color: var(--ann-accent);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-callout--tip {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.35);
    border-left-color: var(--ann-amber);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-callout-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: #facc15;
    background: rgba(234, 179, 8, 0.12);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-callout-icon i {
    color: inherit;
}
.ann-pricing-callout--info .ann-pricing-callout-icon,
.ann-page-container[data-ann-page="pricing"] .ann-pricing-callout--tip .ann-pricing-callout-icon {
    background: rgba(234, 179, 8, 0.12);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-callout--tip .ann-pricing-callout-icon {
    color: var(--ann-amber);
    background: rgba(245, 158, 11, 0.12);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-table-wrap {
    border: 1px solid var(--ann-border);
    border-radius: 0.65rem;
    overflow: hidden;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-table > :not(caption) > * > * {
    background: var(--ann-panel);
    color: var(--ann-ink);
    border-color: var(--ann-border);
    font-size: 0.82rem;
    vertical-align: middle;
    padding: 0.75rem 1rem;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-table thead th {
    background: var(--ann-panel-strong);
    color: var(--ann-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-faq-item {
    border: 1px solid var(--ann-border);
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--ann-panel-strong);
    height: 100%;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-faq-q {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ann-ink);
    margin-bottom: 0.45rem;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-faq-q i {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    background: rgba(234, 179, 8, 0.12);
    color: #facc15;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-faq-a {
    font-size: 0.82rem;
    color: var(--ann-muted);
    line-height: 1.5;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-cta {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
    border: none;
    border-radius: 0.85rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 28px rgba(234, 179, 8, 0.24);
}
.ann-pricing-cta .ann-hero-copy,
.ann-page-container[data-ann-page="pricing"] .ann-pricing-cta h3 {
    color: #ffffff !important;
}
.ann-pricing-cta .btn.btn-primary,
.ann-page-container[data-ann-page="pricing"] .ann-pricing-cta a.btn.btn-primary {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--ann-accent) !important;
}
.ann-pricing-cta .btn.btn-primary:hover,
.ann-pricing-cta .btn.btn-primary:focus,
.ann-pricing-cta a.btn.btn-primary:hover,
.ann-page-container[data-ann-page="pricing"] .ann-pricing-cta a.btn.btn-primary:focus {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    color: #ca8a04 !important;
}
.ann-pricing-cta .btn.btn-primary i,
.ann-page-container[data-ann-page="pricing"] .ann-pricing-cta a.btn.btn-primary i {
    color: var(--ann-accent) !important;
}
.ann-pricing-cta .btn.btn-primary:hover i,
.ann-page-container[data-ann-page="pricing"] .ann-pricing-cta a.btn.btn-primary:hover i {
    color: #ca8a04 !important;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-cta .btn-secondary {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-cta .btn-secondary i {
    color: #ffffff !important;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-page-end {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--ann-border);
    opacity: 1;
}
[data-theme-mode="dark"] .ann-pricing-page-end .ann-page-container[data-ann-page="pricing"] {
    border-top-color: rgba(255, 255, 255, 0.12);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-breadcrumb .breadcrumb-item a {
    color: var(--ann-muted);
    text-decoration: none;
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-breadcrumb .breadcrumb-item a:hover {
    color: var(--ann-ink);
}
.ann-page-container[data-ann-page="pricing"] .ann-pricing-breadcrumb .breadcrumb-item.active {
    color: var(--ann-ink);
}
@media (max-width: 575.98px) {
.ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-card {
        margin-top: 0.5rem;
    }
}

/* Announcements — random playback playlist editor */
.ann-page-container .ann-playback-mode-options,
#ann-create-drawer .ann-playback-mode-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.ann-page-container .ann-playback-mode-options .form-check,
#ann-create-drawer .ann-playback-mode-options .form-check {
    margin: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.ann-page-container .ann-playlist-list,
#ann-call-timeline-drawer .ann-played-keys-list {
    margin: 0;
}

.ann-page-container .ann-playlist-item {
    background: rgba(255, 255, 255, 0.03);
    cursor: grab;
}

.ann-page-container .ann-playlist-item--dragging {
    opacity: 0.55;
}

.ann-page-container .ann-playlist-handle {
    cursor: grab;
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
}

.ann-page-container .ann-playlist-empty {
    border: 1px dashed var(--ann-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.ann-page-container .ann-pick-stepper .form-control {
    max-width: 4.5rem;
}

[data-theme-mode="dark"] .ann-page-container .ann-playlist-item,
[data-theme-mode="dark"] #ann-create-drawer .ann-playlist-item {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

[class^="wholesale-"],
[class*=" wholesale-"],
[id^="wholesale-"],
.wholesale-modern-modal,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) {
    --primary-rgb: 37, 99, 235;
    --secondary-rgb: 100, 116, 139;
    --primary-color: #2563eb;
    --primary-border: #2563eb;
    --primary05: rgba(37, 99, 235, 0.5);
}

[class^="wholesale-"] .btn.btn-primary,
[class*=" wholesale-"] .btn.btn-primary,
[id^="wholesale-"] .btn.btn-primary,
.wholesale-modern-modal .btn.btn-primary,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-primary:hover,
[class^="wholesale-"] .btn.btn-primary:focus,
[class*=" wholesale-"] .btn.btn-primary:hover,
[class*=" wholesale-"] .btn.btn-primary:focus,
[id^="wholesale-"] .btn.btn-primary:hover,
[id^="wholesale-"] .btn.btn-primary:focus,
.wholesale-modern-modal .btn.btn-primary:hover,
.wholesale-modern-modal .btn.btn-primary:focus,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-primary:hover,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-primary:focus {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-secondary,
[class*=" wholesale-"] .btn.btn-secondary,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-secondary:hover,
[class^="wholesale-"] .btn.btn-secondary:focus,
[class*=" wholesale-"] .btn.btn-secondary:hover,
[class*=" wholesale-"] .btn.btn-secondary:focus,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-secondary:hover,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-secondary:focus {
    background-color: #475569 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-success,
[class*=" wholesale-"] .btn.btn-success,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-success {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-success:hover,
[class^="wholesale-"] .btn.btn-success:focus,
[class*=" wholesale-"] .btn.btn-success:hover,
[class*=" wholesale-"] .btn.btn-success:focus,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-success:hover,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-success:focus {
    background-color: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-warning,
[class*=" wholesale-"] .btn.btn-warning,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-warning {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-warning:hover,
[class^="wholesale-"] .btn.btn-warning:focus,
[class*=" wholesale-"] .btn.btn-warning:hover,
[class*=" wholesale-"] .btn.btn-warning:focus,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-warning:hover,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-warning:focus {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-info,
[class*=" wholesale-"] .btn.btn-info,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-info {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-info:hover,
[class^="wholesale-"] .btn.btn-info:focus,
[class*=" wholesale-"] .btn.btn-info:hover,
[class*=" wholesale-"] .btn.btn-info:focus,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-info:hover,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-info:focus {
    background-color: #0e7490 !important;
    border-color: #0e7490 !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-danger,
[class*=" wholesale-"] .btn.btn-danger,
[id^="wholesale-"] .btn.btn-danger,
.wholesale-modern-modal .btn.btn-danger,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-danger:hover,
[class^="wholesale-"] .btn.btn-danger:focus,
[class*=" wholesale-"] .btn.btn-danger:hover,
[class*=" wholesale-"] .btn.btn-danger:focus,
[id^="wholesale-"] .btn.btn-danger:hover,
[id^="wholesale-"] .btn.btn-danger:focus,
.wholesale-modern-modal .btn.btn-danger:hover,
.wholesale-modern-modal .btn.btn-danger:focus,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-danger:hover,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-danger:focus {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
    color: #ffffff !important;
}

/* Destructive confirm actions use btn-dark; theme dark mode inverts --dark-rgb to near-white */
[class^="wholesale-"] .btn.btn-dark,
[class*=" wholesale-"] .btn.btn-dark,
[id^="wholesale-"] .btn.btn-dark,
.wholesale-modern-modal .btn.btn-dark,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-dark {
    background-color: #991b1b !important;
    border-color: #991b1b !important;
    color: #ffffff !important;
}

[class^="wholesale-"] .btn.btn-dark:hover,
[class^="wholesale-"] .btn.btn-dark:focus,
[class*=" wholesale-"] .btn.btn-dark:hover,
[class*=" wholesale-"] .btn.btn-dark:focus,
[id^="wholesale-"] .btn.btn-dark:hover,
[id^="wholesale-"] .btn.btn-dark:focus,
.wholesale-modern-modal .btn.btn-dark:hover,
.wholesale-modern-modal .btn.btn-dark:focus,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-dark:hover,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-dark:focus {
    background-color: #7f1d1d !important;
    border-color: #7f1d1d !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] [class^="wholesale-"] .btn.btn-danger,
[data-theme-mode="dark"] [class*=" wholesale-"] .btn.btn-danger,
[data-theme-mode="dark"] [id^="wholesale-"] .btn.btn-danger,
[data-theme-mode="dark"] .wholesale-modern-modal .btn.btn-danger,
[data-theme-mode="dark"] .page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] [class^="wholesale-"] .btn.btn-danger:hover,
[data-theme-mode="dark"] [class*=" wholesale-"] .btn.btn-danger:hover,
[data-theme-mode="dark"] [class*=" wholesale-"] .btn.btn-danger:focus,
[data-theme-mode="dark"] [id^="wholesale-"] .btn.btn-danger:hover,
[data-theme-mode="dark"] [id^="wholesale-"] .btn.btn-danger:focus,
[data-theme-mode="dark"] .wholesale-modern-modal .btn.btn-danger:hover,
[data-theme-mode="dark"] .wholesale-modern-modal .btn.btn-danger:focus {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] [class^="wholesale-"] .btn.btn-dark,
[data-theme-mode="dark"] [class*=" wholesale-"] .btn.btn-dark,
[data-theme-mode="dark"] [id^="wholesale-"] .btn.btn-dark,
[data-theme-mode="dark"] .wholesale-modern-modal .btn.btn-dark,
[data-theme-mode="dark"] .page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .btn.btn-dark {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] [class^="wholesale-"] .btn.btn-dark:hover,
[data-theme-mode="dark"] [class*=" wholesale-"] .btn.btn-dark:hover,
[data-theme-mode="dark"] [class*=" wholesale-"] .btn.btn-dark:focus,
[data-theme-mode="dark"] [id^="wholesale-"] .btn.btn-dark:hover,
[data-theme-mode="dark"] [id^="wholesale-"] .btn.btn-dark:focus,
[data-theme-mode="dark"] .wholesale-modern-modal .btn.btn-dark:hover,
[data-theme-mode="dark"] .wholesale-modern-modal .btn.btn-dark:focus {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] [class^="wholesale-"],
[data-theme-mode="dark"] [class*=" wholesale-"],
[data-theme-mode="dark"] [id^="wholesale-"],
[data-theme-mode="dark"] .sms-page-container,
[data-theme-mode="dark"] .page-header-breadcrumb:has(a[href*="/wholesale/admin"]) {
    --bs-body-color: #f1f3f8;
    --bs-card-color: #f1f3f8;
    --bs-secondary-color: #b8bec9;
    --bs-tertiary-color: #9aa3b2;
    --bs-code-color: #c9d1d9;
    color: var(--bs-body-color);
}

[class^="wholesale-"],
[class*=" wholesale-"],
[id^="wholesale-"],
.wholesale-modern-modal,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) {
    --bs-code-color: #475569;
}

[data-theme-mode="dark"] [class^="wholesale-"] code,
[data-theme-mode="dark"] [class*=" wholesale-"] code,
[data-theme-mode="dark"] [id^="wholesale-"] code,
[data-theme-mode="dark"] .wholesale-modern-modal code,
[data-theme-mode="dark"] .page-header-breadcrumb:has(a[href*="/wholesale/admin"]) code {
    color: #c9d1d9;
}

[class^="wholesale-"] code,
[class*=" wholesale-"] code,
[id^="wholesale-"] code,
.wholesale-modern-modal code,
.page-header-breadcrumb:has(a[href*="/wholesale/admin"]) code {
    color: #475569;
}

[data-theme-mode="dark"] [class^="wholesale-"] .text-muted,
[data-theme-mode="dark"] [class*=" wholesale-"] .text-muted,
[data-theme-mode="dark"] [id^="wholesale-"] .text-muted,
[data-theme-mode="dark"] .sms-page-container .text-muted,
[data-theme-mode="dark"] .page-header-breadcrumb:has(a[href*="/wholesale/admin"]) .text-muted {
    color: #b8bec9 !important;
}

[data-theme-mode="dark"] [class^="wholesale-"] .form-label,
[data-theme-mode="dark"] [class*=" wholesale-"] .form-label,
[data-theme-mode="dark"] [id^="wholesale-"] .form-label,
[data-theme-mode="dark"] .sms-page-container .form-label,
[data-theme-mode="dark"] [class^="wholesale-"] .form-check-label,
[data-theme-mode="dark"] [class*=" wholesale-"] .form-check-label,
[data-theme-mode="dark"] [id^="wholesale-"] .form-check-label,
[data-theme-mode="dark"] .sms-page-container .form-check-label,
[data-theme-mode="dark"] [class^="wholesale-"] .card-title,
[data-theme-mode="dark"] [class*=" wholesale-"] .card-title,
[data-theme-mode="dark"] [id^="wholesale-"] .card-title,
[data-theme-mode="dark"] .sms-page-container .card-title,
[data-theme-mode="dark"] [class^="wholesale-"] .modal-title,
[data-theme-mode="dark"] [class*=" wholesale-"] .modal-title,
[data-theme-mode="dark"] [id^="wholesale-"] .modal-title,
[data-theme-mode="dark"] [class^="wholesale-"] .table th,
[data-theme-mode="dark"] [class*=" wholesale-"] .table th,
[data-theme-mode="dark"] [id^="wholesale-"] .table th {
    color: #f1f3f8;
}

[data-theme-mode="dark"] [class^="wholesale-"] .form-text,
[data-theme-mode="dark"] [class*=" wholesale-"] .form-text,
[data-theme-mode="dark"] [id^="wholesale-"] .form-text,
[data-theme-mode="dark"] .sms-page-container .form-text,
[data-theme-mode="dark"] [class^="wholesale-"] [class$="-label"],
[data-theme-mode="dark"] [class*=" wholesale-"] [class$="-label"],
[data-theme-mode="dark"] [id^="wholesale-"] [class$="-label"] {
    color: #b8bec9;
}

/* Carrier account detail section headings — exclude from muted [class$="-label"] treatment */
.wholesale-carrier-account-detail-section-label {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--bs-body-color, #212529);
    margin-bottom: 0.625rem;
    margin-top: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
}

.wholesale-carrier-account-detail-settings-form .wholesale-carrier-account-detail-section-label:first-of-type {
    margin-top: 0;
}

html[data-theme-mode="dark"] [class^="wholesale-"] .wholesale-carrier-account-detail-section-label,
html[data-theme-mode="dark"] [class*=" wholesale-"] .wholesale-carrier-account-detail-section-label,
html[data-theme-mode="dark"] [id^="wholesale-"] .wholesale-carrier-account-detail-section-label {
    color: #f6f7fb;
    font-weight: 700;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Carrier account detail — Overview tab */
.wholesale-carrier-account-detail-tab-pane.active.wca-overview {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.wca-overview-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .wca-overview-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}
.wca-overview-panels-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 1200px) {
    .wca-overview-panels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}
.wca-overview-currency-breakdown:not(.d-none) {
    margin-bottom: 0;
}
.wca-overview-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.025);
    min-height: 4.5rem;
}
.wca-overview-stat-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.45rem;
    font-size: 0.95rem;
    flex-shrink: 0;
    color: #f6f7fb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.wca-overview-stat-icon--currency { background: #7c3aed; }
.wca-overview-stat-icon--balance { background: #16a34a; }
.wca-overview-stat-icon--spend { background: #dc2626; }
.wca-overview-stat-icon--trunks { background: #4f46e5; }
.wca-overview-stat-body { flex: 1; min-width: 0; }
.wca-overview-stat-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}
.wca-overview-stat-value {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
}
.wca-overview-stat-meta {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
    margin-top: 0.15rem;
}
.wca-overview-panel-header { min-height: auto; }
.wca-overview-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.wca-overview-panel-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.35rem;
    font-size: 0.72rem;
    color: #f6f7fb;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.wca-overview-panel-title-icon--details { background: #2563eb; }
.wca-overview-panel-title-icon--trunks { background: #4f46e5; }
.wca-overview-panel-action { white-space: nowrap; }
.wca-overview-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}
.wca-overview-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
    background: rgba(0, 0, 0, 0.02);
}
.wca-overview-detail-icon {
    width: 1.65rem;
    height: 1.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.35rem;
    font-size: 0.72rem;
    flex-shrink: 0;
    color: #f6f7fb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.wca-overview-detail-icon--name { background: #6366f1; }
.wca-overview-detail-icon--status { background: #16a34a; }
.wca-overview-detail-icon--currency { background: #7c3aed; }
.wca-overview-detail-icon--gst { background: #d97706; }
.wca-overview-detail-icon--invoice { background: #2563eb; }
.wca-overview-detail-icon--payment { background: #0891b2; }
.wca-overview-detail-icon--credit { background: #64748b; }
.wca-overview-detail-icon--warning { background: #ea580c; }
.wca-overview-detail-body { min-width: 0; flex: 1; }
.wca-overview-detail-label {
    display: block;
    font-size: 0.68rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}
.wca-overview-detail-value {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}
.wca-overview-loading {
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
}
.wca-overview-trunks-table thead th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.wca-overview-trunks-table tbody td {
    font-size: 0.8rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    vertical-align: middle;
}
.wca-overview-trunk-name {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wca-overview-trunk-limit {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wca-overview-trunk-sub {
    display: block;
    font-size: 0.68rem;
    color: var(--bs-secondary-color);
    line-height: 1.2;
}
.wca-overview-th-id { width: 2.5rem; }
@media (max-width: 575.98px) {
    .wca-overview-detail-grid { grid-template-columns: 1fr; }
    .wca-overview-stat-value { font-size: 0.95rem; }
}
[data-theme-mode="dark"] .wca-overview-stat-card {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme-mode="dark"] .wca-overview-stat-label,
[data-theme-mode="dark"] .wca-overview-stat-meta,
[data-theme-mode="dark"] .wca-overview-detail-label,
[data-theme-mode="dark"] .wca-overview-trunk-sub,
[data-theme-mode="dark"] .wca-overview-loading {
    color: #b3b3b3;
}
[data-theme-mode="dark"] .wca-overview-detail-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Wholesale customer account detail — Overview tab */
.wholesale-account-detail-tab-pane.active.wad-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.wad-overview-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .wad-overview-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.wad-overview-panels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.wad-overview-row--split,
.wad-overview-row--wide {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 1200px) {
    .wad-overview-row--split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wad-overview-row--wide {
        grid-template-columns: 1.35fr 1fr;
    }
}
.wad-overview-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.025);
    min-height: 4.25rem;
}
.wad-overview-stat-icon {
    width: 2.15rem;
    height: 2.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.45rem;
    font-size: 0.9rem;
    flex-shrink: 0;
    color: #f6f7fb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.wad-overview-stat-icon--balance { background: #16a34a; }
.wad-overview-stat-icon--billing { background: #4f46e5; }
.wad-overview-stat-icon--trunks { background: #0891b2; }
.wad-overview-stat-icon--currency { background: #7c3aed; }
.wad-overview-stat-body { flex: 1; min-width: 0; }
.wad-overview-stat-label {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: 0.15rem;
}
.wad-overview-stat-value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
}
.wad-overview-stat-value--badge {
    font-size: inherit;
    font-weight: inherit;
}
.wad-overview-stat-meta {
    font-size: 0.68rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
    margin-top: 0.12rem;
}
.wad-billing-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #f6f7fb;
    line-height: 1.3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.wad-billing-badge--postpaid { background: #4338ca; }
.wad-billing-badge--prepaid { background: #0e7490; }
.wad-overview-panel-header { min-height: auto; }
.wad-overview-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    font-weight: 600;
}
.wad-overview-panel-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    color: #f6f7fb;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.wad-overview-panel-title-icon--account { background: #2563eb; }
.wad-overview-panel-title-icon--actions { background: #d97706; }
.wad-overview-panel-title-icon--trunks { background: #4f46e5; }
.wad-overview-panel-title-icon--activity { background: #64748b; }
.wad-overview-panel-action { white-space: nowrap; }
.wad-overview-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.75rem;
}
.wad-overview-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.55rem;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
    background: rgba(0, 0, 0, 0.02);
}
.wad-overview-detail-icon {
    width: 1.55rem;
    height: 1.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.35rem;
    font-size: 0.68rem;
    flex-shrink: 0;
    color: #f6f7fb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.wad-overview-detail-icon--username { background: #6366f1; }
.wad-overview-detail-icon--invoice { background: #2563eb; }
.wad-overview-detail-icon--payment { background: #0891b2; }
.wad-overview-detail-icon--cutoff { background: #ea580c; }
.wad-overview-detail-icon--timing { background: #64748b; }
.wad-overview-detail-icon--billing { background: #4338ca; }
.wad-overview-detail-body { min-width: 0; flex: 1; }
.wad-overview-detail-label {
    display: block;
    font-size: 0.64rem;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}
.wad-overview-detail-value {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}
.wad-overview-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.wad-overview-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 4.25rem;
    padding: 0.55rem 0.4rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.02);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wad-overview-quick-action:hover,
.wad-overview-quick-action:focus-visible {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.06);
    outline: none;
}
.wad-overview-quick-action-icon {
    width: 1.85rem;
    height: 1.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    color: #f6f7fb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.wad-overview-quick-action-icon--credit { background: #16a34a; }
.wad-overview-quick-action-icon--debit { background: #d97706; }
.wad-overview-quick-action-icon--adjust { background: #2563eb; }
.wad-overview-quick-action-label {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}
.wad-overview-loading {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}
.wad-overview-table thead th {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.wad-overview-table tbody td {
    font-size: 0.78rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    vertical-align: middle;
}
.wad-overview-trunk-name {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
}
.wad-overview-trunk-limit {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wad-overview-trunk-sub {
    display: block;
    font-size: 0.64rem;
    color: var(--bs-secondary-color);
    line-height: 1.2;
}
.wad-overview-th-id { width: 2.5rem; }
.wad-overview-tx-type {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.wad-overview-tx-icon {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.3rem;
    font-size: 0.62rem;
    color: #f6f7fb;
    flex-shrink: 0;
}
.wad-overview-tx-icon--credit { background: #16a34a; }
.wad-overview-tx-icon--debit { background: #dc2626; }
.wad-overview-tx-icon--adjust { background: #2563eb; }
.wad-overview-tx-icon--default { background: #64748b; }
.wad-overview-tx-date {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .wad-overview-detail-grid { grid-template-columns: 1fr; }
    .wad-overview-quick-actions { grid-template-columns: 1fr; }
    .wad-overview-stat-value { font-size: 0.92rem; }
}
[data-theme-mode="dark"] .wad-overview-stat-card,
[data-theme-mode="dark"] .wad-overview-detail-item,
[data-theme-mode="dark"] .wad-overview-quick-action {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme-mode="dark"] .wad-overview-stat-label,
[data-theme-mode="dark"] .wad-overview-stat-meta,
[data-theme-mode="dark"] .wad-overview-detail-label,
[data-theme-mode="dark"] .wad-overview-trunk-sub,
[data-theme-mode="dark"] .wad-overview-loading,
[data-theme-mode="dark"] .wad-overview-tx-date {
    color: #b3b3b3;
}
[data-theme-mode="dark"] .wad-overview-quick-action:hover,
[data-theme-mode="dark"] .wad-overview-quick-action:focus-visible {
    border-color: rgba(167, 139, 250, 0.45);
    background: rgba(167, 139, 250, 0.1);
}

[data-theme-mode="dark"] [class^="wholesale-"] .form-control::placeholder,
[data-theme-mode="dark"] [class*=" wholesale-"] .form-control::placeholder,
[data-theme-mode="dark"] [id^="wholesale-"] .form-control::placeholder,
[data-theme-mode="dark"] .sms-page-container .form-control::placeholder,
[data-theme-mode="dark"] [class^="wholesale-"] textarea.form-control::placeholder,
[data-theme-mode="dark"] [class*=" wholesale-"] textarea.form-control::placeholder,
[data-theme-mode="dark"] [id^="wholesale-"] textarea.form-control::placeholder {
    color: #8f98a8;
    opacity: 1;
}

/* Wholesale New Carrier Account stepped modal */
.wholesale-carriers-new-modal .modal-content {
    border: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
}
.wholesale-carriers-new-modal .modal-body {
    padding: 0;
    min-height: 420px;
}
.wholesale-carriers-new-step {
    display: none;
    padding: 1.25rem;
}
.wholesale-carriers-new-step.active {
    display: block;
}
.wholesale-carriers-new-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
}
.wholesale-carriers-new-stepper-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: .78rem;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.wholesale-carriers-new-stepper-item .step-label {
    color: #4b5563;
}
.wholesale-carriers-new-stepper-item.active .step-label {
    color: #111827;
}
.wholesale-carriers-new-stepper-item.completed .step-label {
    color: #166534;
}
.wholesale-carriers-new-stepper-item .step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}
.wholesale-carriers-new-stepper-item.active .step-number {
    background: #8b5cf6;
    color: #fff;
}
.wholesale-carriers-new-stepper-item.completed .step-number {
    background: #22c55e;
    color: #fff;
}
.wholesale-carriers-new-stepper-line {
    width: 24px;
    height: 2px;
    background: var(--bs-secondary-bg, #e9ecef);
    border-radius: 1px;
}
.wholesale-carriers-new-stepper-item.completed + .wholesale-carriers-new-stepper-line {
    background: #22c55e;
}
.wholesale-carriers-new-modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-border-color, rgba(0,0,0,.125));
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wholesale-carriers-new-review-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .45rem 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: .85rem;
}
.wholesale-carriers-new-review-row:last-child {
    border-bottom: none;
}
.wholesale-carriers-new-review-label {
    color: var(--bs-secondary-color);
    font-weight: 500;
}
.wholesale-carriers-new-review-value {
    font-weight: 600;
    text-align: right;
}
.wholesale-carriers-new-gateway-row {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    padding: .6rem;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .375rem;
    margin-bottom: .5rem;
    background: rgba(0,0,0,.015);
}
.wholesale-carriers-new-gateway-row .form-group {
    flex: 1;
    min-width: 0;
}
.wholesale-carriers-new-gateway-row .form-group label {
    font-size: .72rem;
    margin-bottom: .15rem;
    display: block;
}
.wholesale-carriers-new-gateway-row .form-group input,
.wholesale-carriers-new-gateway-row .form-group select {
    font-size: .85rem;
}
.wholesale-carriers-new-gateway-remove {
    padding: .25rem .4rem;
    line-height: 1;
}
.wholesale-carriers-new-rate-deck-modes .form-check {
    padding: .5rem .6rem;
    border-radius: .375rem;
    background: rgba(0,0,0,.02);
    border: 1px solid rgba(0,0,0,.04);
    margin-bottom: .4rem;
}
.wholesale-carriers-new-rate-deck-modes .form-check-input {
    margin-top: .15rem;
}
.wholesale-carriers-new-rate-deck-modes .form-check-label {
    font-size: .85rem;
    margin-left: .2rem;
}
.wholesale-carriers-new-failover-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .4rem .6rem;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: .375rem;
    margin-bottom: .4rem;
    background: rgba(0,0,0,.015);
}
[data-theme-mode="dark"] .wholesale-carriers-new-modal .modal-content {
    background: #1a1a1a;
    border-color: rgba(255,255,255,.09);
    color: #f6f7fb;
}
[data-theme-mode="dark"] .wholesale-carriers-new-stepper-item {
    color: #b3b3b3;
}
[data-theme-mode="dark"] .wholesale-carriers-new-stepper-item .step-label {
    color: #b3b3b3;
}
[data-theme-mode="dark"] .wholesale-carriers-new-stepper-item.active .step-label {
    color: #f6f7fb;
}
[data-theme-mode="dark"] .wholesale-carriers-new-stepper-item.completed .step-label {
    color: #86efac;
}
[data-theme-mode="dark"] .wholesale-carriers-new-review-row {
    border-color: rgba(255,255,255,.06);
}
[data-theme-mode="dark"] .wholesale-carriers-new-gateway-row,
[data-theme-mode="dark"] .wholesale-carriers-new-failover-row {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.09);
}
[data-theme-mode="dark"] .wholesale-carriers-new-rate-deck-modes .form-check {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.09);
}
@media (max-width: 576px) {
    .wholesale-carriers-new-stepper-item .step-label {
        display: none;
    }
    .wholesale-carriers-new-stepper-line {
        width: 12px;
    }
    .wholesale-carriers-new-gateway-row {
        flex-wrap: wrap;
    }
    .wholesale-carriers-new-gateway-row .form-group {
        flex: 1 1 40%;
    }
}

/* Wholesale Trunk Auth Table Header Styles */
.wholesale-auth-group-header {
    background: rgba(0, 0, 0, 0.02) !important;
}
.wholesale-auth-group-header td {
    font-size: 0.8rem;
    font-weight: 600;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
}
.wholesale-auth-trunk-name {
    color: #1e293b !important;
    font-weight: 600;
}
[data-theme-mode="dark"] .wholesale-auth-group-header {
    background: rgba(255, 255, 255, 0.025) !important;
}
[data-theme-mode="dark"] .wholesale-auth-group-header td {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}
[data-theme-mode="dark"] .wholesale-auth-trunk-name {
    color: #f6f7fb !important;
}

/* CrazyPBX Porting Manager */
.crazypbx-porting-page-container {
    padding: 1.25rem;
}

.crazypbx-porting-hero {
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 36%),
        linear-gradient(135deg, #18181b 0%, #0f0f0f 54%, #1f1f22 100%);
    border: 1px solid rgba(161, 161, 170, 0.18);
    border-radius: 0.95rem;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
    color: #f4f4f5;
    display: flex;
    gap: 0.85rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    overflow: visible;
    padding: 0.85rem 1rem;
}

.crazypbx-porting-hero h2 {
    color: #38bdf8;
    font-size: clamp(1.08rem, 1.35vw, 1.35rem);
    font-weight: 820;
    letter-spacing: -0.03em;
    margin: 0.12rem 0 0.22rem;
}

.crazypbx-porting-hero p,
.crazypbx-porting-section-head p {
    color: rgba(212, 212, 216, 0.78);
    font-size: 0.84rem;
    margin: 0;
}

.crazypbx-porting-kicker,
.crazypbx-porting-section-kicker {
    align-items: center;
    display: inline-flex;
    font-size: 0.64rem;
    font-weight: 800;
    gap: 0.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.crazypbx-porting-kicker {
    color: #d4d4d8;
}

.crazypbx-porting-section-kicker {
    color: #ff4d5f;
}

.crazypbx-porting-hero-meta {
    align-items: stretch;
    display: grid;
    gap: 0.45rem;
    min-width: 180px;
}

.crazypbx-porting-hero-meta span {
    background: rgba(24, 24, 27, 0.72);
    border: 1px solid rgba(161, 161, 170, 0.18);
    border-radius: 0.72rem;
    color: #a1a1aa;
    display: grid;
    font-size: 0.66rem;
    gap: 0.12rem;
    padding: 0.5rem 0.6rem;
}

.crazypbx-porting-hero-meta strong {
    color: #e4e4e7;
    font-size: 0.76rem;
}

.crazypbx-porting-notice,
.crazypbx-porting-modal-notice {
    margin-bottom: 0.85rem;
}

.crazypbx-porting-top-cards {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0.9rem;
}

.crazypbx-porting-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0.9rem;
}

.crazypbx-porting-card {
    background: rgba(18, 18, 19, 0.96);
    border: 1px solid rgba(161, 161, 170, 0.16);
    border-radius: 1rem;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    color: #e4e4e7;
    overflow: visible;
    padding: 1rem;
}

.crazypbx-porting-card > span:not(.crazypbx-porting-card-icon) {
    color: #ff4d5f;
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.crazypbx-porting-card > strong {
    color: #f4f4f5;
    display: block;
    font-size: 1.8rem;
    line-height: 1.1;
    margin: 0.35rem 0;
}

.crazypbx-porting-card small {
    color: #a1a1aa;
    display: block;
    line-height: 1.45;
}

.crazypbx-porting-card-icon {
    align-items: center;
    background: rgba(161, 161, 170, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8rem;
    color: #e4e4e7;
    display: inline-flex;
    font-size: 1.2rem;
    height: 2.35rem;
    justify-content: center;
    margin-bottom: 0.65rem;
    width: 2.35rem;
}

.crazypbx-porting-card.is-pending .crazypbx-porting-card-icon {
    background: rgba(236, 72, 153, 0.22);
    border-color: rgba(244, 114, 182, 0.5);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.28);
    color: #ff5dbd;
}

.crazypbx-porting-card.is-active .crazypbx-porting-card-icon {
    background: rgba(14, 165, 233, 0.22);
    border-color: rgba(56, 189, 248, 0.52);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.28);
    color: #38d5ff;
}

.crazypbx-porting-card.is-attention .crazypbx-porting-card-icon {
    background: rgba(245, 158, 11, 0.24);
    border-color: rgba(251, 191, 36, 0.56);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
    color: #ffd166;
}

.crazypbx-porting-card.is-cutover .crazypbx-porting-card-icon {
    background: rgba(168, 85, 247, 0.23);
    border-color: rgba(192, 132, 252, 0.54);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.28);
    color: #c084fc;
}

.crazypbx-porting-section-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.crazypbx-porting-section-head h3 {
    align-items: center;
    color: #f4f4f5;
    display: flex;
    flex-wrap: wrap;
    font-size: 1rem;
    gap: 0.45rem;
    margin: 0.15rem 0 0.15rem;
}

.crazypbx-porting-section-head > strong {
    color: #e4e4e7;
    font-size: 1.4rem;
}

.crazypbx-porting-metric-list {
    display: grid;
    gap: 0.48rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crazypbx-porting-metric-row {
    align-items: center;
    background: rgba(39, 39, 42, 0.58);
    border: 1px solid rgba(161, 161, 170, 0.12);
    border-radius: 0.75rem;
    display: flex;
    justify-content: space-between;
    min-width: 0;
    padding: 0.5rem 0.62rem;
}

.crazypbx-porting-metric-row span {
    color: #d4d4d8;
    font-size: 0.78rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crazypbx-porting-metric-row strong {
    color: #f4f4f5;
    flex: 0 0 auto;
    font-size: 0.86rem;
    margin-left: 0.55rem;
}

.crazypbx-porting-metric-row.is-success strong {
    color: #4ade80;
}

.crazypbx-porting-metric-row.is-warning strong {
    color: #fbbf24;
}

.crazypbx-porting-metric-row.is-danger strong {
    color: #f87171;
}

.crazypbx-porting-metric-row.is-info strong {
    color: #d4d4d8;
}

.crazypbx-porting-carrier-list {
    display: grid;
    gap: 0.65rem;
}

.crazypbx-porting-carrier-row {
    display: grid;
    gap: 0.45rem;
}

.crazypbx-porting-carrier-row div:first-child {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.crazypbx-porting-carrier-row strong {
    color: #e4e4e7;
    font-size: 0.86rem;
}

.crazypbx-porting-carrier-row span {
    color: #a1a1aa;
    font-size: 0.74rem;
}

.crazypbx-porting-carrier-bar {
    background: rgba(63, 63, 70, 0.42);
    border-radius: 999px;
    height: 0.5rem;
    overflow: hidden;
}

.crazypbx-porting-carrier-bar span {
    background: linear-gradient(90deg, #84cc16, #f59e0b, #ef4444);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.crazypbx-porting-inline-tip {
    align-items: flex-start;
    background: rgba(161, 161, 170, 0.1);
    border: 1px solid rgba(161, 161, 170, 0.24);
    border-radius: 0.85rem;
    color: #d4d4d8;
    display: flex;
    gap: 0.65rem;
    padding: 0.85rem;
}

.crazypbx-porting-table-wrap {
    border: 1px solid rgba(161, 161, 170, 0.16);
    border-radius: 0.85rem;
    overflow-x: auto;
    overflow-y: visible;
}

.crazypbx-porting-table {
    border-collapse: collapse;
    min-width: 940px;
    width: 100%;
}

.crazypbx-porting-table th {
    background: rgba(24, 24, 27, 0.92);
    color: #a1a1aa;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding: 0.75rem;
    text-transform: uppercase;
}

.crazypbx-porting-table td {
    border-top: 1px solid rgba(161, 161, 170, 0.12);
    color: #e4e4e7;
    font-size: 0.84rem;
    padding: 0.75rem;
    vertical-align: middle;
}

.crazypbx-porting-badge {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.26rem 0.55rem;
}

.crazypbx-porting-badge.is-success {
    background: rgba(34, 197, 94, 0.24);
    color: #4ade80;
}

.crazypbx-porting-badge.is-warning {
    background: rgba(245, 158, 11, 0.24);
    color: #fbbf24;
}

.crazypbx-porting-badge.is-danger {
    background: rgba(239, 68, 68, 0.24);
    color: #f87171;
}

.crazypbx-porting-badge.is-rejected {
    background: rgba(153, 27, 27, 0.72);
    border: 1px solid rgba(252, 165, 165, 0.46);
    box-shadow: 0 0 18px rgba(220, 38, 38, 0.24);
    color: #fca5a5;
}

.crazypbx-porting-badge.is-cancelled {
    background: rgba(127, 29, 29, 0.78);
    border: 1px solid rgba(248, 113, 113, 0.52);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.28);
    color: #ff6b6b;
}

.crazypbx-porting-badge.is-info {
    background: rgba(113, 113, 122, 0.18);
    color: #d4d4d8;
}

.crazypbx-porting-badge.is-secondary {
    background: rgba(113, 113, 122, 0.18);
    color: #d4d4d8;
}

.crazypbx-porting-row-action {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border: 1px solid rgba(251, 191, 36, 0.38);
    border-radius: 999px;
    color: #111111;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.34rem 0.72rem;
}

.crazypbx-porting-row-action:hover,
.crazypbx-porting-row-action:focus {
    background: linear-gradient(135deg, #fbbf24, #f97316);
    border-color: rgba(251, 191, 36, 0.58);
    color: #111111;
    transform: translateY(-1px);
}

.crazypbx-porting-loading,
.crazypbx-porting-empty {
    color: #a1a1aa !important;
    text-align: center;
}

.crazypbx-porting-empty {
    padding: 2rem !important;
}

.crazypbx-porting-empty i,
.crazypbx-porting-empty strong,
.crazypbx-porting-empty span {
    display: block;
}

.crazypbx-porting-empty i {
    color: #a1a1aa;
    font-size: 1.7rem;
}

.crazypbx-porting-empty strong {
    color: #e4e4e7;
    margin-bottom: 0.15rem;
}

.crazypbx-porting-tooltip-panel,
.crazypbx-porting-page-container .crazypbx-extensions-tooltip-panel.is-fixed.is-active,
#crazypbx-porting-help-modal .crazypbx-extensions-tooltip-panel.is-fixed.is-active,
#crazypbx-porting-request-details-modal .crazypbx-extensions-tooltip-panel.is-fixed.is-active {
    z-index: 9999 !important;
}

.crazypbx-porting-modal-panel {
    overflow: visible;
}

.crazypbx-porting-page-container .crazypbx-extensions-tooltip-icon {
    background: rgba(113, 113, 122, 0.22);
    border-color: rgba(161, 161, 170, 0.38);
    color: #d4d4d8;
}

.crazypbx-porting-page-container .crazypbx-extensions-tooltip-icon:hover,
.crazypbx-porting-page-container .crazypbx-extensions-tooltip-icon:focus,
.crazypbx-porting-page-container .crazypbx-extensions-tooltip-icon:focus-visible {
    background: rgba(161, 161, 170, 0.26);
    border-color: rgba(212, 212, 216, 0.48);
    color: #f4f4f5;
}

.crazypbx-porting-help-section {
    margin-bottom: 1rem;
}

.crazypbx-porting-help-section h6 {
    color: #f4f4f5;
    font-weight: 820;
}

.crazypbx-porting-help-section p {
    color: #d4d4d8;
    margin-bottom: 0;
}

.crazypbx-porting-details-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crazypbx-porting-detail-field {
    background: rgba(39, 39, 42, 0.58);
    border: 1px solid rgba(161, 161, 170, 0.12);
    border-radius: 0.8rem;
    display: grid;
    gap: 0.2rem;
    padding: 0.78rem;
}

.crazypbx-porting-detail-field.is-wide {
    grid-column: 1 / -1;
}

.crazypbx-porting-detail-field span {
    color: #a1a1aa;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.crazypbx-porting-detail-field strong {
    color: #f4f4f5;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

[data-theme-mode="light"] .crazypbx-porting-card,
[data-theme-mode="light"] .crazypbx-porting-metric-row,
[data-theme-mode="light"] .crazypbx-porting-detail-field {
    background: #ffffff;
    border-color: rgba(39, 39, 42, 0.12);
    color: #18181b;
}

[data-theme-mode="light"] .crazypbx-porting-section-head h3,
[data-theme-mode="light"] .crazypbx-porting-card > strong,
[data-theme-mode="light"] .crazypbx-porting-metric-row strong,
[data-theme-mode="light"] .crazypbx-porting-detail-field strong,
[data-theme-mode="light"] .crazypbx-porting-table td,
[data-theme-mode="light"] .crazypbx-porting-empty strong {
    color: #18181b;
}

[data-theme-mode="light"] .crazypbx-porting-table th {
    background: #f4f4f5;
    color: #52525b;
}

@media (max-width: 991.98px) {
    .crazypbx-porting-hero {
        align-items: stretch;
        display: grid;
    }

    .crazypbx-porting-top-cards,
    .crazypbx-porting-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .crazypbx-porting-page-container {
        padding: 0.8rem;
    }

    .crazypbx-porting-hero,
    .crazypbx-porting-card {
        border-radius: 0.9rem;
        padding: 0.85rem;
    }

    .crazypbx-porting-top-cards,
    .crazypbx-porting-grid,
    .crazypbx-porting-metric-list,
    .crazypbx-porting-details-grid {
        grid-template-columns: 1fr;
    }

    .crazypbx-porting-section-head {
        display: grid;
    }
}

/* End CrazyPBX Porting Manager */

/* Porting Create Request */
.porting-create-page-container,
.porting-create-modal-panel {
    --porting-create-ink: #18181b;
    --porting-create-muted: #64748b;
    --porting-create-panel: #ffffff;
    --porting-create-panel-strong: #f8fafc;
    --porting-create-border: rgba(15, 23, 42, 0.1);
    --porting-create-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}
.porting-create-page-container {
    display: grid;
    gap: 0.9rem;
    padding: 1.25rem;
}

.porting-create-hero,
.porting-create-step-card,
.porting-create-prefill-card,
.porting-create-submit-bar {
    background: var(--porting-create-panel);
    border: 1px solid var(--porting-create-border);
    border-radius: 1rem;
    box-shadow: var(--porting-create-shadow);
    color: var(--porting-create-ink);
    overflow: visible;
}

.porting-create-hero {
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(239, 68, 68, 0.06), transparent 36%),
        linear-gradient(135deg, #ffffff 0%, #f8fafc 54%, #f1f5f9 100%);
    display: flex;
    gap: 0.85rem;
    justify-content: space-between;
    padding: 0.95rem 1.05rem;
}

.porting-create-hero h2 {
    color: #ef4444;
    font-size: clamp(1.08rem, 1.35vw, 1.35rem);
    font-weight: 820;
    letter-spacing: -0.03em;
    margin: 0.12rem 0 0.22rem;
}

.porting-create-hero p,
.porting-create-section-head p {
    color: var(--porting-create-muted);
    font-size: 0.84rem;
    margin: 0;
}

.porting-create-kicker,
.porting-create-section-kicker {
    align-items: center;
    color: var(--porting-create-muted);
    display: inline-flex;
    font-size: 0.64rem;
    font-weight: 800;
    gap: 0.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.porting-create-hero-meta {
    display: grid;
    gap: 0.45rem;
    min-width: 190px;
}

.porting-create-hero-meta span {
    background: var(--porting-create-panel-strong);
    border: 1px solid var(--porting-create-border);
    border-radius: 0.72rem;
    color: var(--porting-create-muted);
    display: grid;
    font-size: 0.66rem;
    gap: 0.12rem;
    padding: 0.5rem 0.6rem;
}

.porting-create-hero-meta strong {
    color: var(--porting-create-ink);
    font-size: 0.76rem;
}

.porting-create-notice {
    margin-bottom: 0;
}

.porting-create-form {
    display: grid;
    gap: 0.9rem;
}

.porting-create-step-card,
.porting-create-prefill-card {
    padding: 1rem;
}

.porting-create-section-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.porting-create-section-head h3 {
    color: var(--porting-create-ink);
    font-size: 1rem;
    font-weight: 800;
    margin: 0.15rem 0;
}

.porting-create-type-grid,
.porting-create-field-grid,
.porting-create-prefill-grid,
.porting-create-modal-grid {
    align-items: start;
    display: grid;
    gap: 0.75rem;
}

.porting-create-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.porting-create-field-grid,
.porting-create-prefill-grid,
.porting-create-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.porting-create-number-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.porting-create-type-option {
    background:
        radial-gradient(circle at top left, rgba(255, 23, 68, 0.16), transparent 42%),
        rgba(18, 18, 19, 0.92);
    border: 1px solid rgba(244, 63, 94, 0.28);
    border-radius: 0.9rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 24px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    display: grid;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.85rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.porting-create-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.porting-create-type-option span {
    align-items: center;
    background: linear-gradient(135deg, #ff1744, #8b5cf6);
    border-radius: 0.72rem;
    box-shadow: 0 8px 18px rgba(255, 23, 68, 0.24);
    color: #ffffff;
    display: inline-flex;
    font-size: 1.1rem;
    height: 2.1rem;
    justify-content: center;
    width: 2.1rem;
}

.porting-create-type-option strong {
    color: #f4f4f5;
}

.porting-create-type-option small {
    color: #d4d4d8;
    line-height: 1.45;
}

.porting-create-type-option.is-active {
    background:
        radial-gradient(circle at top left, rgba(255, 23, 68, 0.26), transparent 45%),
        linear-gradient(135deg, rgba(136, 19, 55, 0.55), rgba(24, 24, 27, 0.94));
    border-color: rgba(255, 23, 68, 0.82);
    box-shadow: 0 0 0 0.12rem rgba(255, 23, 68, 0.16), 0 16px 34px rgba(255, 23, 68, 0.16);
    transform: translateY(-1px);
}

.porting-create-type-option:nth-child(2) {
    background:
        radial-gradient(circle at top left, rgba(147, 51, 234, 0.18), transparent 42%),
        rgba(18, 18, 19, 0.92);
    border-color: rgba(168, 85, 247, 0.26);
}

.porting-create-type-option:nth-child(2) span {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 8px 18px rgba(168, 85, 247, 0.22);
}

.porting-create-type-option:nth-child(3) {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 42%),
        rgba(18, 18, 19, 0.92);
    border-color: rgba(59, 130, 246, 0.26);
}

.porting-create-type-option:nth-child(3) span {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.2);
}

.porting-create-type-option.is-disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.porting-create-field-grid label,
.porting-create-wide-field,
.porting-create-modal-grid label {
    color: #60a5fa;
    display: grid;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.35rem;
}

.porting-create-label-with-tooltip {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.porting-create-label-with-tooltip .custom-kb-tooltip-wrapper i {
    color: #a1a1aa;
    cursor: help;
    font-size: 0.85rem;
}

.porting-create-routing-help {
    background: rgba(30, 30, 34, 0.72);
    border: 1px solid rgba(161, 161, 170, 0.2);
    border-radius: 0.9rem;
    margin: 0.8rem 0 0.35rem;
    padding: 0.9rem;
}

.porting-create-routing-help h4 {
    color: #f4f4f5;
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 0.45rem;
}

.porting-create-routing-help-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #f4f4f5;
    cursor: pointer;
    display: flex;
    font-size: 0.95rem;
    font-weight: 800;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.porting-create-routing-help-toggle i {
    color: #c4c4ca;
    font-size: 1.05rem;
    transition: transform 0.16s ease;
}

.porting-create-routing-help-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.porting-create-routing-help-toggle:focus-visible {
    border-radius: 0.45rem;
    outline: 2px solid rgba(96, 165, 250, 0.7);
    outline-offset: 3px;
}

.porting-create-routing-help .collapse {
    margin-top: 0.65rem;
}

.porting-create-routing-help p {
    color: #c4c4ca;
    font-size: 0.8rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
}

.porting-create-routing-table {
    border-color: rgba(161, 161, 170, 0.18);
    margin-bottom: 0;
}

.porting-create-routing-table > :not(caption) > * > * {
    background-color: rgba(24, 24, 27, 0.72);
    border-color: rgba(161, 161, 170, 0.16);
    color: #e4e4e7;
    font-size: 0.78rem;
    padding: 0.56rem 0.62rem;
    vertical-align: top;
}

.porting-create-routing-table thead th {
    background: rgba(37, 99, 235, 0.2);
    color: #dbeafe;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.porting-create-routing-table code {
    color: #fda4af;
    font-size: 0.72rem;
}

.porting-create-routing-notes {
    background: rgba(37, 99, 235, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.32);
    border-radius: 0.72rem;
    color: #dbeafe;
    font-size: 0.78rem;
    margin-top: 0.75rem;
    padding: 0.7rem 0.78rem;
}

.porting-create-routing-notes strong {
    color: #f8fafc;
}

.porting-create-routing-notes ul {
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
}

.porting-create-routing-notes li + li {
    margin-top: 0.28rem;
}

.porting-create-routing-notes a {
    color: #bfdbfe;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.porting-create-routing-notes a:hover,
.porting-create-routing-notes a:focus-visible {
    color: #ffffff;
}

.porting-create-field-grid .form-control,
.porting-create-field-grid .form-select,
.porting-create-wide-field .form-control,
.porting-create-modal-grid .form-control,
.porting-create-modal-grid .form-select {
    min-height: 44px;
}

.porting-create-page-container .form-control,
.porting-create-modal-panel .form-control {
    background-color: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color, rgba(15, 23, 42, 0.15));
    box-shadow: none;
    color: var(--porting-create-ink);
}

.porting-create-page-container .form-control::placeholder,
.porting-create-modal-panel .form-control::placeholder {
    color: var(--porting-create-muted);
}

.porting-create-page-container .form-control:hover,
.porting-create-modal-panel .form-control:hover {
    border-color: rgba(59, 130, 246, 0.45);
}

.porting-create-page-container .form-control:focus,
.porting-create-modal-panel .form-control:focus {
    background-color: var(--bs-body-bg, #ffffff);
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.22rem rgba(59, 130, 246, 0.18);
    color: var(--porting-create-ink);
}

.porting-create-page-container .crazypbx-extensions-select,
.porting-create-page-container .form-select {
    background-color: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color, rgba(15, 23, 42, 0.15));
    box-shadow: none;
    color: var(--porting-create-ink);
}

.porting-create-page-container .crazypbx-extensions-select:hover,
.porting-create-page-container .form-select:hover {
    border-color: rgba(59, 130, 246, 0.45);
}

.porting-create-page-container .crazypbx-extensions-select:focus,
.porting-create-page-container .form-select:focus {
    background-color: var(--bs-body-bg, #ffffff);
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.22rem rgba(59, 130, 246, 0.18);
    color: var(--porting-create-ink);
    outline: none;
}

.porting-create-page-container .crazypbx-extensions-select option,
.porting-create-page-container .form-select option {
    background-color: var(--bs-body-bg, #ffffff);
    color: var(--porting-create-ink);
}

.porting-create-wide-field {
    margin-top: 0.75rem;
}

.porting-create-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0.9rem 0;
}

.porting-create-page-container .crazypbx-extensions-btn {
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    min-height: 44px;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.porting-create-page-container .crazypbx-extensions-btn:hover,
.porting-create-page-container .crazypbx-extensions-btn:focus-visible {
    transform: translateY(-1px);
}

.porting-create-page-container .crazypbx-extensions-btn:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.35), 0 10px 22px rgba(0, 0, 0, 0.22);
    outline: none;
}

.porting-create-page-container .crazypbx-extensions-btn-primary {
    background: linear-gradient(135deg, #ff1744, #dc2626);
    border-color: rgba(255, 23, 68, 0.78);
    color: #ffffff;
}

.porting-create-page-container .crazypbx-extensions-btn-primary:hover,
.porting-create-page-container .crazypbx-extensions-btn-primary:focus-visible {
    background: linear-gradient(135deg, #ff4770, #ff1744);
    color: #ffffff;
}

.porting-create-page-container .crazypbx-extensions-btn-ghost {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(124, 58, 237, 0.34));
    border-color: rgba(96, 165, 250, 0.58);
    color: #dbeafe;
}

.porting-create-page-container .crazypbx-extensions-btn-ghost:hover,
.porting-create-page-container .crazypbx-extensions-btn-ghost:focus-visible {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.5), rgba(147, 51, 234, 0.58));
    border-color: rgba(167, 139, 250, 0.8);
    color: #ffffff;
}

.porting-create-prefill-card {
    background: rgba(24, 24, 27, 0.52);
    box-shadow: none;
    margin-top: 0.75rem;
}

.porting-create-prefill-field {
    background: rgba(39, 39, 42, 0.58);
    border: 1px solid rgba(161, 161, 170, 0.12);
    border-radius: 0.78rem;
    display: grid;
    gap: 0.2rem;
    padding: 0.72rem;
}

.porting-create-prefill-field.is-wide {
    grid-column: 1 / -1;
}

.porting-create-prefill-field span {
    color: #a1a1aa;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.porting-create-prefill-field strong {
    color: #f4f4f5;
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.porting-create-empty {
    color: #a1a1aa;
    grid-column: 1 / -1;
    padding: 0.8rem;
    text-align: center;
}

.porting-create-terms-check {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(161, 161, 170, 0.16);
    border-radius: 0.85rem;
    color: #e4e4e7;
    display: flex;
    gap: 0.65rem;
    line-height: 1.45;
    margin: 0.85rem 0;
    min-height: 44px;
    padding: 0.78rem;
}

.porting-create-terms-check input {
    margin-top: 0.2rem;
}

.porting-create-terms-check a {
    color: #93c5fd;
}

.porting-create-terms-check a:hover,
.porting-create-terms-check a:focus-visible {
    color: #bfdbfe;
}

.porting-create-document-preview {
    align-items: center;
    background: var(--porting-create-panel-strong);
    border: 1px dashed var(--porting-create-border);
    border-radius: 0.85rem;
    color: var(--porting-create-muted);
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    min-height: 120px;
    padding: 1rem;
    text-align: center;
}

.porting-create-document-preview i {
    color: #fbbf24;
    font-size: 1.8rem;
}

.porting-create-document-preview strong {
    color: var(--porting-create-ink);
}

.porting-create-document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
    margin-top: 0.35rem;
}

.porting-create-document-download {
    align-items: center;
    background: linear-gradient(135deg, #ef4444, #a855f7);
    border: 1px solid rgba(244, 244, 245, 0.16);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    gap: 0.35rem;
    padding: 0.48rem 0.78rem;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.porting-create-document-download:hover,
.porting-create-document-download:focus-visible {
    box-shadow: 0 10px 22px rgba(239, 68, 68, 0.22);
    color: #ffffff;
    transform: translateY(-1px);
}

.porting-create-document-download i {
    color: #ffffff;
    font-size: 0.98rem;
}

.porting-create-submit-overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.58);
    display: none;
    inset: 0;
    justify-content: center;
    position: fixed;
    z-index: 1060;
}

.porting-create-submit-overlay.is-visible {
    display: flex;
}

.porting-create-submit-overlay-card {
    align-items: center;
    background: var(--porting-create-panel);
    border: 1px solid var(--porting-create-border);
    border-radius: 1rem;
    box-shadow: var(--porting-create-shadow);
    color: var(--porting-create-ink);
    display: grid;
    gap: 0.45rem;
    justify-items: center;
    max-width: min(360px, calc(100vw - 2rem));
    padding: 1.35rem;
    text-align: center;
}

.porting-create-submit-overlay-card span:not(.porting-create-submit-spinner) {
    color: #d4d4d8;
    font-size: 0.82rem;
}

.porting-create-submit-spinner {
    animation: porting-create-spin 0.8s linear infinite;
    border: 3px solid rgba(212, 212, 216, 0.22);
    border-radius: 50%;
    border-top-color: #60a5fa;
    height: 2.2rem;
    width: 2.2rem;
}

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

#porting-create-post-submit-download-modal {
    z-index: 1065;
}

.porting-create-post-submit-download-panel {
    background: var(--porting-create-panel) !important;
    border: 1px solid var(--porting-create-border) !important;
    box-shadow: var(--porting-create-shadow) !important;
    color: var(--porting-create-ink) !important;
}

.porting-create-post-submit-download-panel .modal-title,
.porting-create-post-submit-download-panel .modal-body,
.porting-create-post-submit-download-panel .modal-body p {
    color: var(--porting-create-ink) !important;
}

.porting-create-post-submit-download-panel .porting-create-modal-kicker {
    color: #fca5a5 !important;
}

.porting-create-submit-bar {
    align-items: center;
    display: flex;
    gap: 0.65rem;
    justify-content: flex-end;
    padding: 0.85rem;
}

.porting-create-modal-panel {
    overflow: visible;
}

.porting-create-person-modal-panel {
    background:
        radial-gradient(circle at top left, rgba(255, 23, 68, 0.18), transparent 34%),
        linear-gradient(145deg, #111111 0%, #0a0a0a 100%);
    border: 1px solid rgba(244, 63, 94, 0.26);
    border-radius: 1.1rem;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.porting-create-person-modal-header {
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.16), rgba(139, 92, 246, 0.12)) #111111;
    border-bottom: 1px solid rgba(244, 63, 94, 0.22);
    padding: 1rem 1.1rem;
}

.porting-create-modal-title-wrap {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.porting-create-modal-title-icon {
    align-items: center;
    background: linear-gradient(135deg, #ff1744, #8b5cf6);
    border-radius: 0.85rem;
    box-shadow: 0 10px 22px rgba(255, 23, 68, 0.24);
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.2rem;
    height: 2.6rem;
    justify-content: center;
    width: 2.6rem;
}

.porting-create-modal-kicker {
    color: #fda4af;
    display: block;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    line-height: 1.1;
    text-transform: uppercase;
}

.porting-create-person-modal-header .modal-title {
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: -0.02em;
    margin: 0.1rem 0 0;
}
[data-theme-mode="light"] .porting-create-person-modal-header .modal-title {
    color: #111827;
}

.porting-create-modal-intro {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.9rem;
    color: #d4d4d8;
    display: grid;
    gap: 0.18rem;
    margin-bottom: 0.85rem;
    padding: 0.8rem 0.9rem;
}

.porting-create-modal-intro strong {
    color: #ffffff;
    font-size: 0.9rem;
}

.porting-create-modal-intro span {
    color: #b8b8c0;
    font-size: 0.78rem;
    line-height: 1.45;
}

.porting-create-modal-status {
    color: #a1a1aa;
    margin-bottom: 0.75rem;
    min-height: 1.2rem;
}

.porting-create-modal-status.is-error {
    color: #f87171;
}

.porting-create-modal-status.is-success {
    color: #4ade80;
}

.porting-create-person-grid {
    gap: 0.8rem;
}

.porting-create-field-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.85rem;
    padding: 0.68rem;
}

.porting-create-field-card > span {
    align-items: center;
    color: #60a5fa;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 850;
    justify-content: space-between;
    letter-spacing: 0.01em;
}

.porting-create-person-modal-footer {
    background: rgba(0, 0, 0, 0.26);
    border-top: 1px solid rgba(244, 63, 94, 0.18);
    gap: 0.55rem;
    padding: 0.85rem 1.1rem;
}

.porting-create-address-selected {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: 0.65rem;
    color: #86efac;
    display: none;
    font-size: 0.82rem;
    line-height: 1.35;
    padding: 0.55rem 0.65rem;
}

.porting-create-address-selected.is-visible {
    display: block;
}

.porting-create-address-field .form-control:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.26);
}

.porting-create-address-field ul.af_list {
    background: #111111;
    border: 1px solid rgba(82, 82, 91, 0.72);
    border-radius: 0.65rem;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.34);
    color: #f8fafc;
    overflow: hidden;
    z-index: 1305;
}

.porting-create-address-field li.af_item {
    border-bottom: 1px solid rgba(82, 82, 91, 0.5);
    color: #e5e7eb;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
    padding: 0.58rem 0.75rem;
}

.porting-create-address-field li.af_item:last-child {
    border-bottom: 0;
}

.porting-create-address-field li.af_item.af_hover,
.porting-create-address-field li.af_item:hover,
.porting-create-address-field li.af_item:focus {
    background: linear-gradient(135deg, #ff1744, #7c3aed);
    color: #ffffff;
}

.porting-create-address-field li.af_item .matched,
.porting-create-address-field li.af_item strong {
    color: inherit;
}

.porting-create-mobile-fields {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.porting-create-mobile-verification-card {
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.18), transparent 42%),
        rgba(24, 24, 27, 0.82);
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 0.9rem;
    display: grid;
    gap: 0.8rem;
    padding: 0.9rem;
}

.porting-create-mobile-verification-card h4 {
    color: #f4f4f5;
    font-size: 0.98rem;
    font-weight: 820;
    margin: 0.1rem 0 0.25rem;
}

.porting-create-mobile-verification-card p {
    color: rgba(212, 212, 216, 0.78);
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0;
}

.porting-create-mobile-verification-actions {
    align-items: start;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(9rem, 13rem) max-content max-content;
    justify-content: start;
}

.porting-create-mobile-verification-actions .porting-create-field {
    color: #d4d4d8;
    display: grid;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.35rem;
}

.porting-create-mobile-verification-actions .crazypbx-extensions-btn {
    align-self: start;
    margin-top: 1.55rem;
    min-height: 42px;
}

.porting-create-mobile-code-field {
    min-width: 9rem;
}

.porting-create-mobile-code-field .form-control {
    text-align: center;
}

.porting-create-page-container .crazypbx-extensions-btn:disabled,
.porting-create-page-container .crazypbx-extensions-btn[disabled] {
    background: rgba(82, 82, 91, 0.48) !important;
    border-color: rgba(161, 161, 170, 0.2) !important;
    color: rgba(228, 228, 231, 0.58) !important;
    cursor: not-allowed;
    opacity: 1;
}

.porting-create-mobile-verification-card .crazypbx-extensions-btn-ghost {
    background: linear-gradient(135deg, #17b978, #0f766e);
    border-color: rgba(23, 185, 120, 0.78);
    color: #ffffff;
}

.porting-create-mobile-verification-card .crazypbx-extensions-btn-ghost:hover,
.porting-create-mobile-verification-card .crazypbx-extensions-btn-ghost:focus-visible {
    background: linear-gradient(135deg, #22c55e, #17b978);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}

.porting-create-page-container .is-hidden {
    display: none !important;
}

.porting-create-form.is-submitted .porting-create-submit-bar {
    border-color: rgba(34, 197, 94, 0.28);
}

[data-theme-mode="light"] .porting-create-hero,
[data-theme-mode="light"] .porting-create-step-card,
[data-theme-mode="light"] .porting-create-prefill-card,
[data-theme-mode="light"] .porting-create-submit-bar,
[data-theme-mode="light"] .porting-create-type-option,
[data-theme-mode="light"] .porting-create-prefill-field,
[data-theme-mode="light"] .porting-create-mobile-verification-card,
[data-theme-mode="light"] .porting-create-document-preview {
    background: #ffffff;
    border-color: rgba(39, 39, 42, 0.12);
    color: #18181b;
}

[data-theme-mode="light"] .porting-create-section-head h3,
[data-theme-mode="light"] .porting-create-type-option strong,
[data-theme-mode="light"] .porting-create-prefill-field strong,
[data-theme-mode="light"] .porting-create-mobile-verification-card h4,
[data-theme-mode="light"] .porting-create-document-preview strong {
    color: #18181b;
}

[data-theme-mode="light"] .porting-create-hero p,
[data-theme-mode="light"] .porting-create-section-head p,
[data-theme-mode="light"] .porting-create-mobile-verification-card p,
[data-theme-mode="light"] .porting-create-type-option small {
    color: #52525b;
}

[data-theme-mode="light"] .porting-create-page-container .crazypbx-extensions-btn-ghost {
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    border-color: rgba(59, 130, 246, 0.45);
    color: #1d4ed8;
}

[data-theme-mode="light"] .porting-create-page-container .crazypbx-extensions-btn-ghost:hover,
[data-theme-mode="light"] .porting-create-page-container .crazypbx-extensions-btn-ghost:focus-visible {
    background: linear-gradient(135deg, #60a5fa, #8b5cf6);
    border-color: rgba(124, 58, 237, 0.7);
    color: #ffffff;
}

[data-theme-mode="light"] .porting-create-page-container .crazypbx-extensions-select,
[data-theme-mode="light"] .porting-create-page-container .form-select,
[data-theme-mode="light"] .porting-create-modal-panel .crazypbx-extensions-select,
[data-theme-mode="light"] .porting-create-modal-panel .form-select {
    background-color: #ffffff;
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.12), 0 8px 18px rgba(30, 64, 175, 0.12);
    color: #0f172a;
}

[data-theme-mode="light"] .porting-create-page-container .form-control,
[data-theme-mode="light"] .porting-create-modal-panel .form-control {
    background-color: #ffffff !important;
    border-color: rgba(37, 99, 235, 0.62) !important;
    color: #0f172a !important;
}

[data-theme-mode="light"] .porting-create-page-container .form-control::placeholder,
[data-theme-mode="light"] .porting-create-modal-panel .form-control::placeholder {
    color: #64748b !important;
}

[data-theme-mode="light"] .porting-create-page-container .form-control:focus,
[data-theme-mode="light"] .porting-create-modal-panel .form-control:focus {
    background-color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.22), 0 0 18px rgba(37, 99, 235, 0.14) !important;
    color: #0f172a !important;
}

[data-theme-mode="light"] .porting-create-page-container .crazypbx-extensions-select:focus,
[data-theme-mode="light"] .porting-create-page-container .form-select:focus,
[data-theme-mode="light"] .porting-create-modal-panel .crazypbx-extensions-select:focus,
[data-theme-mode="light"] .porting-create-modal-panel .form-select:focus {
    background-color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.22), 0 0 18px rgba(37, 99, 235, 0.14);
    color: #0f172a;
}

[data-theme-mode="light"] .porting-create-page-container .crazypbx-extensions-select option,
[data-theme-mode="light"] .porting-create-page-container .form-select option,
[data-theme-mode="light"] .porting-create-modal-panel .crazypbx-extensions-select option,
[data-theme-mode="light"] .porting-create-modal-panel .form-select option {
    background-color: #ffffff;
    color: #0f172a;
}

[data-theme-mode="light"] .porting-create-label-with-tooltip .custom-kb-tooltip-wrapper i {
    color: #4b5563;
}

[data-theme-mode="light"] .porting-create-routing-help {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.34);
}

[data-theme-mode="light"] .porting-create-routing-help h4 {
    color: #111827;
}

[data-theme-mode="light"] .porting-create-routing-help-toggle {
    color: #111827;
}

[data-theme-mode="light"] .porting-create-routing-help-toggle i {
    color: #475569;
}

[data-theme-mode="light"] .porting-create-routing-help-toggle:focus-visible {
    outline-color: rgba(37, 99, 235, 0.65);
}

[data-theme-mode="light"] .porting-create-routing-help p {
    color: #334155;
}

[data-theme-mode="light"] .porting-create-routing-table > :not(caption) > * > * {
    background-color: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.28);
    color: #1f2937;
}

[data-theme-mode="light"] .porting-create-routing-table thead th {
    background: rgba(219, 234, 254, 0.9);
    color: #1d4ed8;
}

[data-theme-mode="light"] .porting-create-routing-table code {
    color: #be123c;
}

[data-theme-mode="light"] .porting-create-routing-notes {
    background: rgba(219, 234, 254, 0.85);
    border-color: rgba(96, 165, 250, 0.45);
    color: #1e3a8a;
}

[data-theme-mode="light"] .porting-create-routing-notes strong {
    color: #0f172a;
}

[data-theme-mode="light"] .porting-create-routing-notes a {
    color: #1d4ed8;
}

[data-theme-mode="light"] .porting-create-routing-notes a:hover,
[data-theme-mode="light"] .porting-create-routing-notes a:focus-visible {
    color: #1e40af;
}

[data-theme-mode="light"] .porting-create-address-selected {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.24);
    color: #166534;
}

[data-theme-mode="light"] .porting-create-address-field ul.af_list {
    background: #ffffff;
    border-color: rgba(113, 113, 122, 0.34);
    color: #0f172a;
}

[data-theme-mode="light"] .porting-create-address-field li.af_item {
    border-color: rgba(113, 113, 122, 0.2);
    color: #0f172a;
}

[data-theme-mode="light"] .porting-create-address-field li.af_item.af_hover,
[data-theme-mode="light"] .porting-create-address-field li.af_item:hover,
[data-theme-mode="light"] .porting-create-address-field li.af_item:focus {
    background: linear-gradient(135deg, #ff1744, #8b5cf6);
    color: #ffffff;
}

[data-theme-mode="light"] .porting-create-modal-panel {
    background: radial-gradient(circle at top left, rgba(255, 23, 68, 0.05), transparent 34%), #ffffff;
    border-color: rgba(161, 161, 170, 0.28);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .porting-create-modal-panel .modal-header,
[data-theme-mode="light"] .porting-create-modal-panel .modal-footer {
    border-color: rgba(161, 161, 170, 0.2);
}

[data-theme-mode="light"] .porting-create-person-modal-panel {
    background: radial-gradient(circle at top left, rgba(255, 23, 68, 0.05), transparent 34%), #ffffff;
    border-color: rgba(244, 63, 94, 0.18);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .porting-create-person-modal-header {
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.06), rgba(139, 92, 246, 0.04)) #ffffff;
    border-bottom-color: rgba(244, 63, 94, 0.14);
}

[data-theme-mode="light"] .porting-create-modal-kicker {
    color: #e11d48;
}

[data-theme-mode="light"] .porting-create-modal-intro {
    background: rgba(255, 23, 68, 0.03);
    border-color: rgba(255, 23, 68, 0.1);
    color: #4b5563;
}

[data-theme-mode="light"] .porting-create-modal-intro strong {
    color: #1f2937;
}

[data-theme-mode="light"] .porting-create-modal-intro span {
    color: #6b7280;
}

[data-theme-mode="light"] .porting-create-field-card {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme-mode="light"] .porting-create-field-card > span {
    color: #2563eb;
}

[data-theme-mode="light"] .porting-create-person-modal-footer {
    background: #f8fafc;
    border-top-color: rgba(244, 63, 94, 0.14);
}

[data-theme-mode="dark"] .porting-create-page-container input.form-control,
[data-theme-mode="dark"] .porting-create-page-container textarea.form-control,
[data-theme-mode="dark"] .porting-create-page-container select.form-select,
[data-theme-mode="dark"] .porting-create-page-container select.crazypbx-extensions-select,
[data-theme-mode="dark"] .porting-create-modal-panel input.form-control,
[data-theme-mode="dark"] .porting-create-modal-panel textarea.form-control,
[data-theme-mode="dark"] .porting-create-modal-panel select.form-select,
[data-theme-mode="dark"] .porting-create-modal-panel select.crazypbx-extensions-select {
    background: #000000 !important;
    border-color: rgba(96, 165, 250, 0.72) !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .porting-create-page-container input.form-control::placeholder,
[data-theme-mode="dark"] .porting-create-page-container textarea.form-control::placeholder,
[data-theme-mode="dark"] .porting-create-modal-panel input.form-control::placeholder,
[data-theme-mode="dark"] .porting-create-modal-panel textarea.form-control::placeholder {
    color: #d4d4d8 !important;
    opacity: 1 !important;
}

[data-theme-mode="dark"] .porting-create-page-container input.form-control:focus,
[data-theme-mode="dark"] .porting-create-page-container textarea.form-control:focus,
[data-theme-mode="dark"] .porting-create-page-container select.form-select:focus,
[data-theme-mode="dark"] .porting-create-page-container select.crazypbx-extensions-select:focus,
[data-theme-mode="dark"] .porting-create-modal-panel input.form-control:focus,
[data-theme-mode="dark"] .porting-create-modal-panel textarea.form-control:focus,
[data-theme-mode="dark"] .porting-create-modal-panel select.form-select:focus,
[data-theme-mode="dark"] .porting-create-modal-panel select.crazypbx-extensions-select:focus {
    background: #000000 !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 0.22rem rgba(59, 130, 246, 0.28), 0 0 18px rgba(59, 130, 246, 0.18) !important;
    color: #ffffff !important;
}

.porting-create-page-container .form-control:disabled,
.porting-create-page-container .form-select:disabled,
.porting-create-page-container .crazypbx-extensions-select:disabled {
    background: #1f2937 !important;
    border-color: rgba(107, 114, 128, 0.8) !important;
    box-shadow: none !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    opacity: 1;
}

[data-theme-mode="light"] .porting-create-page-container .form-control:disabled,
[data-theme-mode="light"] .porting-create-page-container .form-select:disabled,
[data-theme-mode="light"] .porting-create-page-container .crazypbx-extensions-select:disabled {
    background: #e5e7eb !important;
    border-color: rgba(148, 163, 184, 0.9) !important;
    color: #64748b !important;
}

@media (max-width: 991.98px) {
    .porting-create-hero,
    .porting-create-section-head {
        align-items: stretch;
        display: grid;
    }

    .porting-create-type-grid {
        grid-template-columns: 1fr;
    }

    .porting-create-mobile-verification-actions {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .porting-create-mobile-verification-actions .crazypbx-extensions-btn {
        margin-top: 0;
    }
}

@media (max-width: 575.98px) {
    .porting-create-page-container {
        padding: 0.8rem;
    }

    .porting-create-hero,
    .porting-create-step-card,
    .porting-create-prefill-card,
    .porting-create-submit-bar {
        border-radius: 0.9rem;
        padding: 0.85rem;
    }

    .porting-create-field-grid,
    .porting-create-prefill-grid,
    .porting-create-modal-grid,
    .porting-create-submit-bar {
        grid-template-columns: 1fr;
    }

    .porting-create-submit-bar {
        display: grid;
    }

    .porting-create-modal-grid,
    .porting-create-person-grid {
        grid-template-columns: 1fr;
    }

    .porting-create-person-modal-header,
    .porting-create-person-modal-footer {
        padding-inline: 0.85rem;
    }
}

/* Compact step-flow refresh */
.porting-create-page-container {
    isolation: isolate;
    overflow: visible;
    position: relative;
}

.porting-create-hero {
    padding: 0.82rem 0.95rem;
}

.porting-create-hero h2 {
    font-size: clamp(1rem, 1.15vw, 1.22rem);
}

.porting-create-hero p {
    max-width: 760px;
}

.porting-create-stepper {
    background:
        linear-gradient(135deg, rgba(24, 24, 27, 0.92), rgba(10, 10, 12, 0.94)),
        radial-gradient(circle at top left, rgba(255, 23, 68, 0.12), transparent 38%);
    border: 1px solid rgba(161, 161, 170, 0.16);
    border-radius: 1rem;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    padding: 0.5rem;
    position: relative;
    z-index: 4;
}

.porting-create-stepper-item {
    align-items: center;
    background: rgba(39, 39, 42, 0.62);
    border: 1px solid rgba(161, 161, 170, 0.14);
    border-radius: 0.78rem;
    color: #a1a1aa;
    cursor: pointer;
    display: grid;
    gap: 0.08rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 54px;
    padding: 0.55rem 0.65rem;
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.porting-create-stepper-item span {
    align-items: center;
    background: rgba(82, 82, 91, 0.58);
    border: 1px solid rgba(212, 212, 216, 0.14);
    border-radius: 999px;
    color: #e4e4e7;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 900;
    grid-row: 1 / span 2;
    height: 1.8rem;
    justify-content: center;
    width: 1.8rem;
}

.porting-create-stepper-item strong {
    color: #f4f4f5;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.porting-create-stepper-item small {
    color: #a1a1aa;
    font-size: 0.66rem;
}

.porting-create-stepper-item.is-active {
    background:
        radial-gradient(circle at top left, rgba(255, 23, 68, 0.28), transparent 48%),
        linear-gradient(135deg, rgba(127, 29, 29, 0.58), rgba(39, 39, 42, 0.88));
    border-color: rgba(255, 23, 68, 0.74);
    box-shadow: 0 10px 24px rgba(255, 23, 68, 0.14);
    color: #ffffff;
    transform: translateY(-1px);
}

.porting-create-stepper-item.is-active span,
.porting-create-stepper-item.is-complete span {
    background: linear-gradient(135deg, #ff1744, #8b5cf6);
    border-color: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.porting-create-step-card[hidden] {
    display: none !important;
}

.porting-create-step-card.is-active {
    animation: portingCreateStepIn 170ms ease-out;
}

@keyframes portingCreateStepIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.porting-create-step-card,
.porting-create-prefill-card {
    padding: 0.85rem;
}

.porting-create-section-head {
    margin-bottom: 0.72rem;
}

.porting-create-section-head h3 {
    font-size: 0.96rem;
}

.porting-create-field-grid,
.porting-create-prefill-grid,
.porting-create-modal-grid {
    gap: 0.62rem;
}

.porting-create-field-grid label,
.porting-create-wide-field,
.porting-create-modal-grid label {
    gap: 0.28rem;
}

.porting-create-page-container .form-control,
.porting-create-page-container .crazypbx-extensions-select,
.porting-create-page-container .form-select,
.porting-create-modal-panel .form-control,
.porting-create-modal-panel .form-select {
    border-radius: 0.7rem;
    min-height: 42px;
}

.porting-create-page-container textarea.form-control {
    min-height: 82px;
}

.porting-create-inline-message {
    border-radius: 0.68rem;
    display: none;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 0.28rem;
    padding: 0.44rem 0.55rem;
}

.porting-create-inline-message.is-visible,
.porting-create-field-message.is-visible {
    display: block;
}

.porting-create-field-message {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.18rem;
    min-height: 0.85rem;
    padding: 0;
}

.porting-create-inline-message.is-error {
    background: rgba(244, 63, 94, 0.13);
    border: 1px solid rgba(244, 63, 94, 0.34);
    color: #fda4af;
}

.porting-create-field-message.is-error {
    color: #fda4af;
}

.porting-create-inline-message.is-success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.porting-create-field-message.is-success {
    color: #86efac;
}

.porting-create-inline-message.is-info {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #bfdbfe;
}

.porting-create-field-message.is-info {
    color: #bfdbfe;
}

.porting-create-field.has-error .form-control,
.porting-create-field.has-error .form-select,
.porting-create-field.has-error .crazypbx-extensions-select,
.porting-create-terms-check.has-error {
    border-color: rgba(244, 63, 94, 0.8) !important;
    box-shadow: 0 0 0 0.18rem rgba(244, 63, 94, 0.18) !important;
}

.porting-create-field.has-success .form-control,
.porting-create-field.has-success .form-select,
.porting-create-field.has-success .crazypbx-extensions-select,
.porting-create-terms-check.has-success {
    border-color: rgba(34, 197, 94, 0.82) !important;
    box-shadow: 0 0 0 0.16rem rgba(34, 197, 94, 0.16) !important;
}

.porting-create-field.has-success > span:first-child {
    color: #86efac;
}

.porting-create-terms-check.has-success {
    background: rgba(34, 197, 94, 0.08);
}

.porting-create-refresh-wrap {
    align-items: flex-end;
    display: grid;
    gap: 0.35rem;
    justify-items: end;
    min-width: min(100%, 220px);
}

.porting-create-inline-actions {
    align-items: center;
    margin: 0.7rem 0;
}

.porting-create-inline-actions .porting-create-inline-message {
    margin-top: 0;
}

.porting-create-routing-help,
.porting-create-prefill-card,
.porting-create-document-preview {
    margin-top: 0.65rem;
}

.porting-create-document-preview {
    min-height: 94px;
}

.porting-create-submit-bar {
    bottom: 0.75rem;
    gap: 0.55rem;
    position: sticky;
    z-index: 20;
}

.porting-create-submit-bar .porting-create-inline-message {
    flex: 1 1 220px;
    margin: 0;
}

.porting-create-submit-bar [hidden] {
    display: none !important;
}

.porting-create-page-container .custom-kb-tooltip-wrapper {
    overflow: visible;
    position: relative !important;
    z-index: auto;
}

.porting-create-page-container .custom-kb-tooltip-content {
    background:
        linear-gradient(135deg, rgba(12, 12, 14, 0.98), rgba(24, 24, 27, 0.98));
    border: 1px solid rgba(244, 63, 94, 0.35);
    border-radius: 0.78rem;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.58);
    color: #f4f4f5;
    max-width: min(340px, calc(100vw - 2rem));
    overflow-wrap: break-word;
    position: absolute;
    white-space: normal !important;
    width: 320px;
    z-index: 9999 !important;
}

.porting-create-page-container .custom-kb-tooltip-content strong {
    color: #fda4af;
}

.porting-create-page-container .custom-kb-tooltip-content::after {
    border-color: #18181b transparent transparent transparent;
}

.porting-create-page-container .table-responsive,
.porting-create-step-card,
.porting-create-prefill-card,
.porting-create-modal-panel {
    overflow: visible;
}

.porting-create-address-field ul.af_list {
    position: fixed !important;
    z-index: 9999 !important;
}

#porting-create-person-modal,
#porting-create-address-modal,
#porting-create-terms-modal {
    z-index: 9999995 !important;
}

.porting-create-modal-panel {
    background:
        radial-gradient(circle at top left, rgba(255, 23, 68, 0.12), transparent 34%),
        linear-gradient(145deg, #111111 0%, #09090b 100%);
    border: 1px solid rgba(161, 161, 170, 0.18);
    border-radius: 1.05rem;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}

.porting-create-modal-panel .modal-header,
.porting-create-modal-panel .modal-footer {
    border-color: rgba(161, 161, 170, 0.16);
}

.porting-create-modal-status:not(:empty) {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 0.68rem;
    padding: 0.5rem 0.6rem;
}

.porting-create-modal-status.is-error:not(:empty) {
    background: rgba(244, 63, 94, 0.13);
    border-color: rgba(244, 63, 94, 0.34);
}

.porting-create-modal-status.is-success:not(:empty) {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
}

[data-theme-mode="light"] .porting-create-stepper {
    background: #ffffff;
    border-color: rgba(39, 39, 42, 0.12);
}

[data-theme-mode="light"] .porting-create-stepper-item {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.32);
    color: #475569;
}

[data-theme-mode="light"] .porting-create-stepper-item strong {
    color: #0f172a;
}

[data-theme-mode="light"] .porting-create-stepper-item small {
    color: #64748b;
}

[data-theme-mode="light"] .porting-create-stepper-item.is-active {
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.13), rgba(237, 233, 254, 0.92));
    border-color: rgba(255, 23, 68, 0.42);
}

[data-theme-mode="light"] .porting-create-inline-message.is-error,
[data-theme-mode="light"] .porting-create-field-message.is-error {
    color: #be123c;
}

[data-theme-mode="light"] .porting-create-inline-message.is-success,
[data-theme-mode="light"] .porting-create-field-message.is-success {
    color: #166534;
}

[data-theme-mode="light"] .porting-create-inline-message.is-info,
[data-theme-mode="light"] .porting-create-field-message.is-info {
    color: #1d4ed8;
}

@media (max-width: 991.98px) {
    .porting-create-number-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .porting-create-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .porting-create-refresh-wrap {
        justify-items: stretch;
    }

    .porting-create-submit-bar {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .porting-create-submit-bar .porting-create-inline-message {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .porting-create-stepper {
        grid-template-columns: 1fr;
    }

    .porting-create-stepper-item {
        min-height: 48px;
    }

    .porting-create-submit-bar {
        bottom: 0.45rem;
        grid-template-columns: 1fr;
    }

    .porting-create-page-container .custom-kb-tooltip-content {
        left: auto;
        right: -0.5rem;
        transform: none;
        width: min(300px, calc(100vw - 2rem));
    }
}

/* SMS-inspired port request refresh: brighter colour, compact cards, clean forms. */
.porting-create-page-header {
    --porting-create-ink: var(--bs-heading-color, #172033);
    --porting-create-muted: var(--bs-secondary-color, #697386);
    --porting-create-panel: var(--bs-card-bg, #ffffff);
    --porting-create-panel-strong: var(--bs-body-bg, #ffffff);
    --porting-create-border: var(--bs-border-color, rgba(15, 23, 42, 0.12));
    --porting-create-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
    --porting-create-blue: var(--primary-color, #2f7df6);
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--bs-border-color, rgba(15, 23, 42, 0.1));
    border-radius: 0.85rem;
    box-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0.75rem;
    padding: 0.8rem 0.95rem;
}

.porting-create-page-container {
    --porting-create-ink: var(--bs-heading-color, #172033);
    --porting-create-muted: var(--bs-secondary-color, #697386);
    --porting-create-panel: var(--bs-card-bg, #ffffff);
    --porting-create-panel-strong: var(--bs-body-bg, #ffffff);
    --porting-create-border: var(--bs-border-color, rgba(15, 23, 42, 0.12));
    --porting-create-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
    --porting-create-blue: var(--primary-color, #2f7df6);
    --porting-create-cyan: var(--info-color, #0db7d7);
    --porting-create-mint: var(--success-color, #17b978);
    --porting-create-amber: var(--warning-color, #ffc107);
    --porting-create-red: var(--danger-color, #f04438);
    gap: 0.72rem;
    padding: 0.75rem 0 0;
}

.porting-create-header-main {
    min-width: 0;
}

.porting-create-page-header .breadcrumb {
    font-size: 0.68rem;
}

.porting-create-header-title-row {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 0.35rem;
}

.porting-create-header-title-row h1 {
    color: var(--porting-create-ink);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 850;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.porting-create-header-title-row p {
    color: var(--porting-create-muted);
    font-size: 0.76rem;
    line-height: 1.35;
    margin: 0.25rem 0 0;
    max-width: 48rem;
}

.porting-create-header-actions {
    align-self: start;
}

.porting-create-page-header .crazypbx-extensions-btn {
    border-radius: 0.55rem;
    min-height: 34px;
    padding: 0.38rem 0.68rem;
}

@media (max-width: 991.98px) {
    .porting-create-page-header,
    .porting-create-header-title-row {
        grid-template-columns: 1fr;
    }

    .porting-create-header-actions {
        justify-self: start;
    }

    .porting-create-hero-meta {
        justify-content: flex-start;
    }
}

.porting-create-hero,
.porting-create-stepper,
.porting-create-step-card,
.porting-create-prefill-card,
.porting-create-submit-bar {
    background: var(--porting-create-panel) !important;
    border: 1px solid var(--porting-create-border) !important;
    box-shadow: var(--porting-create-shadow);
    color: var(--porting-create-ink);
}

.porting-create-hero {
    border-radius: 0.85rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
    padding: 1rem;
}

.porting-create-kicker,
.porting-create-section-kicker {
    background: var(--porting-create-panel-strong);
    border: 1px solid rgba(47, 125, 246, 0.22);
    border-radius: 999px;
    color: var(--porting-create-blue);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    padding: 0.32rem 0.55rem;
}

.porting-create-section-kicker {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--porting-create-muted);
    padding: 0;
}

.porting-create-section-kicker-danger {
    color: #fb7185;
}

.porting-create-hero h2 {
    color: var(--porting-create-ink);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 850;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0.55rem 0 0.35rem;
}

.porting-create-hero h2::first-letter {
    color: inherit;
}

.porting-create-hero p,
.porting-create-section-head p {
    color: var(--porting-create-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.porting-create-hero-meta {
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    min-width: min(100%, 260px);
}

.porting-create-hero-meta span {
    background: var(--porting-create-panel-strong) !important;
    border: 1px solid var(--porting-create-border) !important;
    border-radius: 999px;
    color: var(--porting-create-muted);
    display: inline-flex;
    flex-direction: column;
    font-size: 0.66rem;
    gap: 0.1rem;
    min-height: 1.9rem;
    padding: 0.3rem 0.6rem;
}

.porting-create-hero-meta strong {
    color: var(--porting-create-ink);
    font-size: 0.72rem;
}

.porting-create-stepper {
    border-radius: 0.85rem;
    gap: 0.5rem;
    padding: 0.5rem;
}

.porting-create-stepper-item {
    background: var(--porting-create-panel-strong) !important;
    border: 1px solid var(--porting-create-border) !important;
    border-radius: 0.65rem;
    color: var(--porting-create-muted);
    min-height: 48px;
    padding: 0.48rem 0.55rem;
}

.porting-create-stepper-item:hover,
.porting-create-stepper-item:focus-visible {
    background: var(--porting-create-panel) !important;
    border-color: rgba(161, 161, 170, 0.24) !important;
    outline: none;
}

.porting-create-stepper-item span {
    background: var(--porting-create-panel) !important;
    border: 1px solid rgba(47, 125, 246, 0.18);
    color: var(--porting-create-blue);
    font-size: 0.68rem;
    height: 1.55rem;
    width: 1.55rem;
}

.porting-create-stepper-item strong {
    color: var(--porting-create-ink);
    font-size: 0.74rem;
}

.porting-create-stepper-item small {
    color: var(--porting-create-muted);
    font-size: 0.61rem;
}

.porting-create-stepper-item.is-active {
    background: var(--porting-create-panel) !important;
    border-color: rgba(161, 161, 170, 0.28) !important;
    box-shadow: inset 0 -2px 0 #2f7df6;
    transform: none;
}

.porting-create-stepper-item:nth-child(2).is-active {
    box-shadow: inset 0 -2px 0 #7c3aed;
}

.porting-create-stepper-item:nth-child(3).is-active {
    box-shadow: inset 0 -2px 0 #0f766e;
}

.porting-create-stepper-item:nth-child(4).is-active {
    box-shadow: inset 0 -2px 0 #b45309;
}

.porting-create-stepper-item.is-active span,
.porting-create-stepper-item.is-complete span {
    background: linear-gradient(135deg, #2f7df6, #0db7d7) !important;
    box-shadow: none;
    color: #ffffff;
}

.porting-create-stepper-item:nth-child(2).is-active span,
.porting-create-stepper-item:nth-child(2).is-complete span {
    background: linear-gradient(135deg, #7c3aed, #d946ef) !important;
}

.porting-create-stepper-item:nth-child(3).is-active span,
.porting-create-stepper-item:nth-child(3).is-complete span {
    background: linear-gradient(135deg, #17b978, #0db7d7) !important;
}

.porting-create-stepper-item:nth-child(4).is-active span,
.porting-create-stepper-item:nth-child(4).is-complete span {
    background: linear-gradient(135deg, #b45309, #f59e0b) !important;
}

.porting-create-step-card,
.porting-create-prefill-card {
    border-radius: 0.85rem;
    padding: 0.85rem 0.9rem;
}

.porting-create-section-head {
    margin-bottom: 0.72rem;
}

.porting-create-section-head h3 {
    align-items: center;
    color: var(--porting-create-ink);
    display: flex;
    font-size: 0.96rem;
    font-weight: 850;
    gap: 0.55rem;
    letter-spacing: -0.02em;
    flex-wrap: wrap;
}

.porting-create-heading-action {
    background: rgba(23, 185, 120, 0.12);
    border: 1px solid rgba(23, 185, 120, 0.28);
    border-radius: 999px;
    color: #86efac;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    padding: 0.22rem 0.55rem;
}

.porting-create-type-grid {
    gap: 0.55rem;
}

.porting-create-type-option {
    --porting-create-option-accent: #2f7df6;
    background: var(--porting-create-panel-strong) !important;
    border-color: var(--porting-create-border) !important;
    border-radius: 0.75rem;
    box-shadow: none;
    gap: 0.28rem;
    min-height: 78px;
    padding: 0.68rem;
}

.porting-create-type-option span {
    background: linear-gradient(135deg, #2f7df6, #0db7d7) !important;
    border: 0;
    border-radius: 0.7rem;
    box-shadow: none !important;
    color: #ffffff;
    height: 2rem;
    width: 2rem;
}

.porting-create-type-option:nth-child(2) span {
    background: linear-gradient(135deg, #7c3aed, #d946ef) !important;
}

.porting-create-type-option:nth-child(2) {
    --porting-create-option-accent: #7c3aed;
}

.porting-create-type-option:nth-child(3) span {
    background: linear-gradient(135deg, #17b978, #0db7d7) !important;
}

.porting-create-type-option:nth-child(3) {
    --porting-create-option-accent: #17b978;
}

.porting-create-type-option strong {
    color: var(--porting-create-ink);
    font-size: 0.78rem;
}

.porting-create-type-option small {
    color: var(--porting-create-muted);
    font-size: 0.69rem;
    line-height: 1.35;
}

.porting-create-type-option.is-active {
    background: var(--porting-create-panel) !important;
    border-color: rgba(161, 161, 170, 0.3) !important;
    box-shadow: inset 3px 0 0 var(--porting-create-option-accent), 0 8px 18px rgba(0, 0, 0, 0.12);
    transform: none;
}

.porting-create-type-option.is-active span {
    background: linear-gradient(135deg, #2f7df6, #0db7d7) !important;
    color: #ffffff;
}

.porting-create-type-option:nth-child(2).is-active span {
    background: linear-gradient(135deg, #7c3aed, #d946ef) !important;
}

.porting-create-type-option:nth-child(3).is-active span {
    background: linear-gradient(135deg, #17b978, #0db7d7) !important;
}

.porting-create-field-grid label,
.porting-create-wide-field,
.porting-create-modal-grid label {
    color: var(--porting-create-blue);
}

.porting-create-field-card > span {
    color: var(--porting-create-blue);
}

.porting-create-page-container .form-control,
.porting-create-page-container .crazypbx-extensions-select,
.porting-create-page-container .form-select,
.porting-create-modal-panel .form-control,
.porting-create-modal-panel .form-select {
    background: var(--porting-create-panel-strong) !important;
    border-color: var(--porting-create-border) !important;
    box-shadow: none !important;
    color: var(--porting-create-ink) !important;
}

.porting-create-page-container input[type="file"].form-control {
    align-items: center;
    display: flex;
    min-height: 42px;
    padding: 0.28rem;
}

.porting-create-page-container input[type="file"].form-control::file-selector-button {
    background: rgba(47, 125, 246, 0.14);
    border: 1px solid rgba(47, 125, 246, 0.34);
    border-radius: 0.48rem;
    color: #bfdbfe;
    cursor: pointer;
    font-weight: 800;
    margin: 0 0.65rem 0 0;
    min-height: 30px;
    padding: 0.36rem 0.7rem;
}

.porting-create-page-container input[type="file"].form-control:hover::file-selector-button,
.porting-create-page-container input[type="file"].form-control:focus::file-selector-button {
    background: rgba(47, 125, 246, 0.22);
    border-color: rgba(47, 125, 246, 0.54);
    color: #ffffff;
}

.porting-create-page-container #porting-create-business-name-help {
    color: #93c5fd;
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 0.35rem;
}

.porting-create-additional-numbers-card {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.36);
    border-radius: 0.85rem;
    box-shadow: inset 3px 0 0 rgba(124, 58, 237, 0.86), 0 0.45rem 1rem rgba(15, 23, 42, 0.08);
    padding: 0.85rem;
}

.porting-create-additional-numbers-card .porting-create-label-with-tooltip > span:first-child {
    align-items: center;
    color: var(--porting-create-ink);
    display: inline-flex;
    font-size: 0.84rem;
    gap: 0.35rem;
}

.porting-create-additional-numbers-card .porting-create-label-with-tooltip > span:first-child i {
    color: #7c3aed;
    font-size: 1rem;
}

.porting-create-additional-numbers-help {
    color: #6d28d9;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35;
}

.porting-create-additional-numbers-card textarea.form-control {
    border-color: rgba(124, 58, 237, 0.48) !important;
    min-height: 108px;
}

.porting-create-page-container .form-control::placeholder,
.porting-create-modal-panel .form-control::placeholder {
    color: var(--porting-create-muted) !important;
    opacity: 0.78 !important;
}

.porting-create-page-container .form-control:hover,
.porting-create-page-container .crazypbx-extensions-select:hover,
.porting-create-page-container .form-select:hover {
    border-color: rgba(47, 125, 246, 0.38) !important;
}

.porting-create-page-container .form-control:focus,
.porting-create-page-container .crazypbx-extensions-select:focus,
.porting-create-page-container .form-select:focus,
.porting-create-modal-panel .form-control:focus,
.porting-create-modal-panel .form-select:focus {
    background: var(--porting-create-panel-strong) !important;
    border-color: rgba(47, 125, 246, 0.72) !important;
    box-shadow: 0 0 0 0.18rem rgba(47, 125, 246, 0.18) !important;
    color: var(--porting-create-ink) !important;
}

.porting-create-page-container .crazypbx-extensions-select option,
.porting-create-page-container .form-select option {
    background-color: var(--porting-create-panel);
    color: var(--porting-create-ink);
}

.porting-create-routing-help,
.porting-create-prefill-field,
.porting-create-document-preview {
    background: var(--porting-create-panel-strong) !important;
    border-color: var(--porting-create-border) !important;
}

.porting-create-prefill-field span,
.porting-create-empty,
.porting-create-document-preview {
    color: var(--porting-create-muted);
}

.porting-create-prefill-field strong,
.porting-create-document-preview strong {
    color: var(--porting-create-ink);
}

.porting-create-routing-table > :not(caption) > * > * {
    background-color: var(--porting-create-panel-strong) !important;
    border-color: var(--porting-create-border) !important;
    color: var(--porting-create-ink) !important;
}

.porting-create-routing-table thead th {
    background: var(--porting-create-panel) !important;
    color: var(--porting-create-blue) !important;
}

.porting-create-routing-notes {
    background: var(--porting-create-panel-strong);
    border-color: rgba(47, 125, 246, 0.26);
    border-left: 3px solid var(--porting-create-blue);
    color: var(--porting-create-ink);
}

.porting-create-terms-check {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(161, 161, 170, 0.16);
    color: var(--porting-create-ink);
}

.porting-create-inline-message.is-error,
.porting-create-field-message.is-error {
    color: var(--porting-create-red);
}

.porting-create-inline-message.is-success,
.porting-create-field-message.is-success {
    color: var(--porting-create-mint);
}

.porting-create-inline-message.is-info,
.porting-create-field-message.is-info {
    color: var(--porting-create-blue);
}

.porting-create-submit-bar {
    border-radius: 0.85rem;
    padding: 0.62rem;
}

.porting-create-page-container .crazypbx-extensions-btn {
    border-radius: 0.55rem;
    box-shadow: none;
    min-height: 36px;
    padding: 0.42rem 0.7rem;
}

.porting-create-page-container .crazypbx-extensions-btn-primary.is-select-port-type {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border-color: rgba(245, 158, 11, 0.78);
    color: #ffffff;
}

.porting-create-page-container .crazypbx-extensions-btn-primary.is-select-port-type:hover,
.porting-create-page-container .crazypbx-extensions-btn-primary.is-select-port-type:focus-visible {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: rgba(251, 191, 36, 0.88);
    color: #ffffff;
}

.porting-create-page-container .crazypbx-extensions-btn-primary {
    background: linear-gradient(135deg, #17b978, #22c55e);
    border-color: rgba(23, 185, 120, 0.78);
}

.porting-create-page-container .crazypbx-extensions-btn-primary:hover,
.porting-create-page-container .crazypbx-extensions-btn-primary:focus-visible {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: rgba(34, 197, 94, 0.86);
}

.porting-create-page-container .crazypbx-extensions-btn-ghost {
    background: transparent;
    border-color: var(--porting-create-border);
    color: var(--porting-create-muted);
}

.porting-create-page-container .crazypbx-extensions-btn-ghost:hover,
.porting-create-page-container .crazypbx-extensions-btn-ghost:focus-visible {
    background: rgba(47, 125, 246, 0.1);
    border-color: rgba(47, 125, 246, 0.32);
    color: var(--porting-create-ink);
}

.porting-create-timeline-card {
    background: var(--porting-create-panel);
    border: 1px solid var(--porting-create-border);
    border-radius: 0.85rem;
    box-shadow: var(--porting-create-shadow);
    color: var(--porting-create-ink);
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem;
}

.porting-create-timeline-intro {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.porting-create-timeline-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.porting-create-timeline-icon {
    align-items: center;
    background: rgba(47, 125, 246, 0.12);
    border: 1px solid rgba(47, 125, 246, 0.24);
    border-radius: 0.75rem;
    color: var(--porting-create-blue);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.2rem;
    height: 2.45rem;
    justify-content: center;
    width: 2.45rem;
}

.porting-create-timeline-toggle {
    align-items: center;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.38);
    border-radius: 999px;
    color: #f59e0b;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 800;
    gap: 0.25rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
}

.porting-create-timeline-toggle:hover,
.porting-create-timeline-toggle:focus-visible {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    border-color: rgba(245, 158, 11, 0.58);
    color: #ffffff;
}

.porting-create-timeline-intro h2 {
    color: var(--porting-create-ink);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 850;
    letter-spacing: -0.025em;
    margin: 0.15rem 0 0;
}

.porting-create-timeline-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(220px, 0.75fr);
}

.porting-create-timeline-panel,
.porting-create-timeline-notes {
    background: var(--porting-create-panel-strong);
    border: 1px solid var(--porting-create-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.porting-create-timeline-panel h3 {
    align-items: center;
    color: var(--porting-create-ink);
    display: flex;
    font-size: 0.88rem;
    font-weight: 850;
    gap: 0.45rem;
    justify-content: space-between;
    margin: 0 0 0.55rem;
}

.porting-create-timeline-panel h3 span {
    background: rgba(23, 185, 120, 0.1);
    border: 1px solid rgba(23, 185, 120, 0.22);
    border-radius: 999px;
    color: var(--porting-create-mint);
    font-size: 0.64rem;
    font-weight: 800;
    padding: 0.16rem 0.42rem;
}

.porting-create-timeline-panel:nth-child(2) h3 span {
    background: rgba(245, 158, 11, 0.11);
    border-color: rgba(245, 158, 11, 0.24);
    color: #f59e0b;
}

.porting-create-timeline-panel p {
    color: var(--porting-create-muted);
    font-size: 0.72rem;
    line-height: 1.35;
    margin: -0.2rem 0 0.55rem;
}

.porting-create-timeline-list {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.porting-create-timeline-list li {
    align-items: start;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.porting-create-timeline-list li > span {
    align-items: center;
    background: rgba(47, 125, 246, 0.12);
    border: 1px solid rgba(47, 125, 246, 0.24);
    border-radius: 999px;
    color: var(--porting-create-blue);
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 900;
    height: 1.55rem;
    justify-content: center;
    width: 1.55rem;
}

.porting-create-timeline-list strong,
.porting-create-timeline-notes strong {
    color: var(--porting-create-ink);
    display: block;
    font-size: 0.78rem;
    font-weight: 850;
}

.porting-create-timeline-list small {
    color: var(--porting-create-muted);
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
    margin-top: 0.08rem;
}

.porting-create-timeline-notes {
    border-left: 3px solid var(--porting-create-amber);
}

.porting-create-timeline-notes ul {
    color: var(--porting-create-muted);
    font-size: 0.72rem;
    line-height: 1.4;
    margin: 0.45rem 0 0;
    padding-left: 1rem;
}

.porting-create-timeline-notes li + li {
    margin-top: 0.32rem;
}

[data-theme-mode="dark"] .porting-create-hero {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 36%),
        linear-gradient(135deg, #18181b 0%, #0f0f0f 54%, #1f1f22 100%) !important;
}

[data-theme-mode="dark"] .porting-create-submit-overlay-card,
[data-theme-mode="dark"] .porting-create-post-submit-download-panel {
    background: linear-gradient(145deg, #18181b 0%, #09090b 100%) !important;
    border-color: rgba(244, 244, 245, 0.16) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62) !important;
    color: #f8fafc !important;
}

[data-theme-mode="dark"] .porting-create-post-submit-download-panel .modal-title,
[data-theme-mode="dark"] .porting-create-post-submit-download-panel .modal-body,
[data-theme-mode="dark"] .porting-create-post-submit-download-panel .modal-body p {
    color: #f8fafc !important;
}

[data-theme-mode="dark"] .porting-create-page-header,
[data-theme-mode="dark"] .porting-create-page-container,
[data-theme-mode="dark"] .porting-create-modal-panel {
    --porting-create-ink: #f7fbff;
    --porting-create-muted: #a1a1aa;
    --porting-create-panel: #18181b;
    --porting-create-panel-strong: #101012;
    --porting-create-border: rgba(212, 212, 216, 0.14);
    --porting-create-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
    --porting-create-blue: #94a3b8;
    --porting-create-cyan: #a1a1aa;
}

[data-theme-mode="dark"] .porting-create-page-header {
    background: #18181b;
    border-color: rgba(212, 212, 216, 0.14);
    box-shadow: var(--porting-create-shadow);
}

[data-theme-mode="dark"] .porting-create-hero,
[data-theme-mode="dark"] .porting-create-stepper,
[data-theme-mode="dark"] .porting-create-step-card,
[data-theme-mode="dark"] .porting-create-prefill-card,
[data-theme-mode="dark"] .porting-create-submit-bar {
    background: #18181b !important;
}

[data-theme-mode="dark"] .porting-create-stepper-item,
[data-theme-mode="dark"] .porting-create-type-option,
[data-theme-mode="dark"] .porting-create-hero-meta span,
[data-theme-mode="dark"] .porting-create-routing-help,
[data-theme-mode="dark"] .porting-create-prefill-field,
[data-theme-mode="dark"] .porting-create-document-preview,
[data-theme-mode="dark"] .porting-create-page-container .form-control,
[data-theme-mode="dark"] .porting-create-page-container .crazypbx-extensions-select,
[data-theme-mode="dark"] .porting-create-page-container .form-select,
[data-theme-mode="dark"] .porting-create-modal-panel .form-control,
[data-theme-mode="dark"] .porting-create-modal-panel .form-select {
    background: #101012 !important;
    border-color: rgba(212, 212, 216, 0.14) !important;
}

[data-theme-mode="dark"] .porting-create-additional-numbers-card {
    background: rgba(124, 58, 237, 0.13);
    border-color: rgba(168, 85, 247, 0.46);
}

[data-theme-mode="dark"] .porting-create-additional-numbers-help {
    color: #c4b5fd;
}

[data-theme-mode="dark"] .porting-create-additional-numbers-card textarea.form-control {
    border-color: rgba(168, 85, 247, 0.58) !important;
}

[data-theme-mode="dark"] .porting-create-hero-meta {
    gap: 0.45rem;
}

[data-theme-mode="dark"] .porting-create-hero-meta span {
    border-radius: 0.55rem;
    color: #a1a1aa;
    min-height: auto;
    padding: 0.42rem 0.58rem;
}

[data-theme-mode="dark"] .porting-create-hero-meta strong {
    color: #ffffff;
    font-size: 0.74rem;
}

[data-theme-mode="dark"] .porting-create-stepper-item.is-active,
[data-theme-mode="dark"] .porting-create-type-option.is-active {
    background: #141416 !important;
    border-color: rgba(212, 212, 216, 0.26) !important;
}

[data-theme-mode="dark"] .porting-create-kicker {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(212, 212, 216, 0.16);
    color: #d4d4d8;
}

[data-theme-mode="dark"] .porting-create-section-kicker {
    color: #a1a1aa;
}

[data-theme-mode="dark"] .porting-create-section-kicker.porting-create-section-kicker-danger {
    color: #fb7185;
}

[data-theme-mode="dark"] .porting-create-stepper-item:hover,
[data-theme-mode="dark"] .porting-create-stepper-item:focus-visible,
[data-theme-mode="dark"] .porting-create-page-container .form-control:hover,
[data-theme-mode="dark"] .porting-create-page-container .crazypbx-extensions-select:hover,
[data-theme-mode="dark"] .porting-create-page-container .form-select:hover {
    border-color: rgba(212, 212, 216, 0.24) !important;
}

[data-theme-mode="dark"] .porting-create-stepper-item span {
    background: rgba(82, 82, 91, 0.34) !important;
    border-color: rgba(212, 212, 216, 0.14);
    color: #d4d4d8;
}

[data-theme-mode="dark"] .porting-create-stepper-item:nth-child(1) span,
[data-theme-mode="dark"] .porting-create-type-option:nth-child(1) span,
[data-theme-mode="dark"] .porting-create-type-option:nth-child(1).is-active span {
    background: #2563eb !important;
    color: #ffffff;
}

[data-theme-mode="dark"] .porting-create-stepper-item:nth-child(2) span,
[data-theme-mode="dark"] .porting-create-type-option:nth-child(2) span {
    background: #7c3aed !important;
    color: #ffffff;
}

[data-theme-mode="dark"] .porting-create-stepper-item:nth-child(3) span,
[data-theme-mode="dark"] .porting-create-type-option:nth-child(3) span {
    background: #0f766e !important;
    color: #ffffff;
}

[data-theme-mode="dark"] .porting-create-stepper-item:nth-child(4) span {
    background: #b45309 !important;
    color: #ffffff;
}

[data-theme-mode="dark"] .porting-create-page-container .form-control:focus,
[data-theme-mode="dark"] .porting-create-page-container .crazypbx-extensions-select:focus,
[data-theme-mode="dark"] .porting-create-page-container .form-select:focus,
[data-theme-mode="dark"] .porting-create-modal-panel .form-control:focus,
[data-theme-mode="dark"] .porting-create-modal-panel .form-select:focus {
    border-color: rgba(47, 125, 246, 0.72) !important;
    box-shadow: 0 0 0 0.18rem rgba(47, 125, 246, 0.18) !important;
}

[data-theme-mode="dark"] .porting-create-routing-table thead th {
    background: #141416 !important;
    color: #e4e4e7 !important;
}

[data-theme-mode="dark"] .porting-create-routing-notes {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.22);
    border-left-color: #f59e0b;
    color: #e4e4e7;
}

[data-theme-mode="dark"] .porting-create-routing-notes strong {
    color: #f4f4f5;
}

[data-theme-mode="dark"] .porting-create-page-container .crazypbx-extensions-btn-ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(212, 212, 216, 0.16);
    color: #d4d4d8;
}

[data-theme-mode="dark"] .porting-create-page-container .crazypbx-extensions-btn-ghost:hover,
[data-theme-mode="dark"] .porting-create-page-container .crazypbx-extensions-btn-ghost:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 212, 216, 0.28);
    color: #ffffff;
}

[data-theme-mode] .porting-create-page-container .porting-create-mobile-verification-card .crazypbx-extensions-btn-ghost {
    background: linear-gradient(135deg, #17b978, #0f766e) !important;
    border-color: rgba(23, 185, 120, 0.82) !important;
    color: #ffffff !important;
}

[data-theme-mode] .porting-create-page-container .porting-create-mobile-verification-card .crazypbx-extensions-btn-ghost:hover,
[data-theme-mode] .porting-create-page-container .porting-create-mobile-verification-card .crazypbx-extensions-btn-ghost:focus-visible {
    background: linear-gradient(135deg, #22c55e, #17b978) !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
    color: #ffffff !important;
}

[data-theme-mode] .porting-create-page-container .porting-create-mobile-verification-card .crazypbx-extensions-btn.is-sms-sent,
[data-theme-mode] .porting-create-page-container .porting-create-mobile-verification-card .crazypbx-extensions-btn.is-sms-sent:disabled {
    background: #3f3f46 !important;
    border-color: rgba(161, 161, 170, 0.42) !important;
    box-shadow: none !important;
    color: #d4d4d8 !important;
    cursor: not-allowed;
}

[data-theme-mode="dark"] .porting-create-timeline-icon,
[data-theme-mode="dark"] .porting-create-timeline-list li > span {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(212, 212, 216, 0.16);
    color: #d4d4d8;
}

[data-theme-mode="dark"] .porting-create-timeline-panel h3 span {
    background: rgba(23, 185, 120, 0.1);
    border-color: rgba(23, 185, 120, 0.24);
    color: #86efac;
}

[data-theme-mode="dark"] .porting-create-timeline-panel:nth-child(2) h3 span {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.24);
    color: #fbbf24;
}

[data-theme-mode="dark"] .porting-create-timeline-panel,
[data-theme-mode="dark"] .porting-create-timeline-notes {
    background: #101012;
    border-color: rgba(212, 212, 216, 0.14);
}

@media (max-width: 1199.98px) {
    .porting-create-timeline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .porting-create-timeline-notes {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .porting-create-timeline-grid {
        grid-template-columns: 1fr;
    }

    .porting-create-timeline-intro {
        align-items: flex-start;
    }

    .porting-create-timeline-notes {
        grid-column: auto;
    }
}

/* Porting Create Request — DID pricing collapsible */
.porting-create-pricing-help {
    background: rgba(30, 30, 34, 0.72);
    border: 1px solid rgba(139, 92, 246, 0.32);
    border-radius: 0.9rem;
    margin: 0.8rem 0 0.35rem;
    padding: 0.9rem;
}

.porting-create-pricing-help-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #ede9fe;
    cursor: pointer;
    display: flex;
    font-size: 0.95rem;
    font-weight: 800;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.porting-create-pricing-help-toggle i {
    color: #a78bfa;
}

.porting-create-pricing-help-toggle span i {
    margin-right: 0.35rem;
}

.porting-create-pricing-help-toggle[aria-expanded="true"] .ri-arrow-down-s-line {
    transform: rotate(180deg);
}

.porting-create-pricing-help .ri-arrow-down-s-line {
    transition: transform 0.2s ease;
}

.porting-create-pricing-help-body {
    margin-top: 0.6rem;
}

.porting-create-pricing-help-body p {
    color: #d4d4d8;
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0 0 0.6rem;
}

.porting-create-pricing-monthly {
    color: #86efac;
    font-weight: 600;
}

.porting-create-pricing-port {
    color: #a5b4fc;
    font-weight: 600;
}

.porting-create-pricing-country {
    color: #a1a1aa;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.porting-create-pricing-note {
    align-items: flex-start;
    color: #b3b3b3;
    display: flex;
    font-size: 0.78rem;
    gap: 0.35rem;
    line-height: 1.45;
    margin: 0.6rem 0 0;
}

.porting-create-pricing-note i {
    color: #a78bfa;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.porting-create-pricing-skeleton-row td {
    color: #b3b3b3;
    font-size: 0.8rem;
    padding: 0.85rem 0.62rem;
}

[data-theme-mode="light"] .porting-create-pricing-help {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme-mode="light"] .porting-create-pricing-help-toggle {
    color: #4c1d95;
}

[data-theme-mode="light"] .porting-create-pricing-help-body p {
    color: #52525b;
}

[data-theme-mode="light"] .porting-create-pricing-monthly {
    color: #15803d;
}

[data-theme-mode="light"] .porting-create-pricing-port {
    color: #4338ca;
}

[data-theme-mode="light"] .porting-create-pricing-country {
    color: #71717a;
}

[data-theme-mode="light"] .porting-create-pricing-note,
[data-theme-mode="light"] .porting-create-pricing-skeleton-row td {
    color: #52525b;
}
/* End Porting Create Request */

/* Porting Status Updates */
.porting-status-page-container {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 1.25rem;
}

.porting-status-hero,
.porting-status-filter-card,
.porting-status-request-card {
    background: rgba(18, 18, 19, 0.96);
    border: 1px solid rgba(161, 161, 170, 0.16);
    border-radius: 0.95rem;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
    color: #e4e4e7;
    overflow: visible;
}

.porting-status-hero {
    align-items: center;
    display: flex;
    gap: 0.85rem;
    justify-content: space-between;
    padding: 0.85rem 1rem;
}

.porting-status-hero h2 {
    color: #ef4444;
    font-size: clamp(1.08rem, 1.35vw, 1.35rem);
    font-weight: 820;
    letter-spacing: -0.03em;
    margin: 0.12rem 0 0.22rem;
}

.porting-status-hero p {
    color: rgba(212, 212, 216, 0.78);
    font-size: 0.84rem;
    margin: 0;
}

.porting-status-hero code {
    background: rgba(113, 113, 122, 0.22);
    border-radius: 0.28rem;
    color: #f4f4f5;
    padding: 0.08rem 0.26rem;
}

.porting-status-kicker,
.porting-status-section-kicker {
    align-items: center;
    color: #d4d4d8;
    display: inline-flex;
    font-size: 0.64rem;
    font-weight: 800;
    gap: 0.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.porting-status-hero-meta {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 220px;
}

.porting-status-hero-meta span {
    background: rgba(24, 24, 27, 0.72);
    border: 1px solid rgba(161, 161, 170, 0.18);
    border-radius: 0.72rem;
    color: #a1a1aa;
    display: grid;
    font-size: 0.66rem;
    gap: 0.12rem;
    padding: 0.5rem 0.6rem;
}

.porting-status-hero-meta strong {
    color: #e4e4e7;
    font-size: 0.95rem;
}

.porting-status-notice,
.porting-status-modal-notice {
    grid-column: 1 / -1;
    margin-bottom: 0.85rem;
}

.porting-status-filter-card {
    background: rgba(28, 28, 31, 0.98);
    border-color: rgba(212, 212, 216, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.32);
    padding: 0.85rem;
}

.porting-status-filter-grid {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(160px, 1fr) minmax(100px, 0.7fr) auto;
}

.porting-status-filter-grid label {
    background: rgba(12, 12, 13, 0.72);
    border: 1px solid rgba(161, 161, 170, 0.2);
    border-radius: 0.72rem;
    display: grid;
    gap: 0.35rem;
    padding: 0.55rem;
}

.porting-status-filter-grid label > span {
    color: #f4f4f5;
    font-size: 0.76rem;
    font-weight: 800;
}

.porting-status-filter-grid .crazypbx-extensions-select {
    background-color: #0b0b0c;
    border-color: rgba(212, 212, 216, 0.32);
    color: #f4f4f5;
    min-height: 2.35rem;
}

.porting-status-filter-grid .crazypbx-extensions-select:focus {
    border-color: rgba(239, 68, 68, 0.65);
    box-shadow: 0 0 0 0.16rem rgba(239, 68, 68, 0.18);
}

.porting-status-filter-actions {
    display: flex;
    gap: 0.45rem;
    justify-content: flex-end;
}

.porting-status-public-note {
    background: rgba(24, 24, 27, 0.9);
    border: 1px solid rgba(161, 161, 170, 0.16);
    border-left: 2px solid rgba(239, 68, 68, 0.72);
    border-radius: 0.78rem;
    color: #d4d4d8;
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem;
}

.porting-status-public-note strong {
    color: #f4f4f5;
}

.porting-status-list {
    display: grid;
    gap: 0.85rem;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.porting-status-request-card {
    display: grid;
    gap: 0.75rem;
    position: relative;
    padding: 0.95rem;
}

.porting-status-request-card:nth-child(3n + 1) {
    border-color: rgba(161, 161, 170, 0.18);
}

.porting-status-request-card:nth-child(3n + 2) {
    border-color: rgba(161, 161, 170, 0.18);
}

.porting-status-request-card:nth-child(3n) {
    border-color: rgba(161, 161, 170, 0.18);
}

.porting-status-request-main {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.porting-status-request-main h3 {
    color: #f4f4f5;
    font-size: 1.05rem;
    margin: 0.15rem 0 0.1rem;
}

.porting-status-request-main p {
    color: #a1a1aa;
    margin: 0;
}

.porting-status-request-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.porting-status-request-grid span {
    background: rgba(24, 24, 27, 0.88);
    border: 1px solid rgba(161, 161, 170, 0.14);
    border-radius: 0.72rem;
    display: grid;
    gap: 0.18rem;
    padding: 0.58rem;
}

.porting-status-request-grid span:nth-child(1) {
    box-shadow: inset 2px 0 0 rgba(239, 68, 68, 0.82);
}

.porting-status-request-grid span:nth-child(2) {
    box-shadow: inset 2px 0 0 rgba(245, 158, 11, 0.82);
}

.porting-status-request-grid span:nth-child(3) {
    box-shadow: inset 2px 0 0 rgba(132, 204, 22, 0.76);
}

.porting-status-request-grid span:nth-child(4) {
    box-shadow: inset 2px 0 0 rgba(249, 115, 22, 0.78);
}

.porting-status-request-grid small {
    color: #a1a1aa;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.porting-status-request-grid strong {
    color: #e4e4e7;
    font-size: 0.82rem;
}

.porting-status-badge {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.26rem 0.55rem;
}

.porting-status-badge.is-success {
    background: rgba(34, 197, 94, 0.24);
    color: #4ade80;
}

.porting-status-badge.is-warning {
    background: rgba(245, 158, 11, 0.24);
    color: #fbbf24;
}

.porting-status-badge.is-danger {
    background: rgba(239, 68, 68, 0.24);
    color: #f87171;
}

.porting-status-badge.is-rejected {
    background: rgba(153, 27, 27, 0.72);
    border: 1px solid rgba(252, 165, 165, 0.46);
    box-shadow: 0 0 18px rgba(220, 38, 38, 0.24);
    color: #fca5a5;
}

.porting-status-badge.is-cancelled {
    background: rgba(127, 29, 29, 0.78);
    border: 1px solid rgba(248, 113, 113, 0.52);
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.28);
    color: #ff6b6b;
}

.porting-status-badge.is-secondary {
    background: rgba(113, 113, 122, 0.18);
    color: #d4d4d8;
}

.porting-status-loading,
.porting-status-empty {
    color: #a1a1aa;
    text-align: center;
}

.porting-status-empty {
    background: rgba(18, 18, 19, 0.96);
    border: 1px solid rgba(161, 161, 170, 0.16);
    border-radius: 0.95rem;
    padding: 1.5rem;
}

.porting-status-empty i,
.porting-status-empty strong,
.porting-status-empty span {
    display: block;
}

.porting-status-tooltip-panel,
.porting-status-page-container .crazypbx-extensions-tooltip-panel.is-fixed.is-active {
    z-index: 9999 !important;
}

.porting-status-page-container .crazypbx-extensions-tooltip-icon {
    background: rgba(113, 113, 122, 0.22);
    border-color: rgba(161, 161, 170, 0.38);
    color: #d4d4d8;
}

.porting-status-modal-panel {
    overflow: visible;
}

@media (max-width: 991.98px) {
    .porting-status-page-container {
        grid-template-columns: 1fr;
    }

    .porting-status-hero {
        align-items: stretch;
        display: grid;
    }

    .porting-status-filter-grid,
    .porting-status-list,
    .porting-status-request-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .porting-status-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .porting-status-page-container {
        padding: 0.8rem;
    }

    .porting-status-filter-grid,
    .porting-status-list,
    .porting-status-request-grid {
        grid-template-columns: 1fr;
    }

    .porting-status-request-main {
        display: grid;
    }
}

/* End Porting Status Updates */
/* CrazyPBX Call Recordings Management */
.crazypbx-call-recordings-page-container {
    --cpcr-accent: #e11d48;
    --cpcr-accent-soft: rgba(225, 29, 72, 0.12);
    --cpcr-border: rgba(161, 161, 170, 0.28);
    --cpcr-card: rgba(255, 255, 255, 0.92);
    --cpcr-text: #18181b;
    --cpcr-muted: #71717a;
    padding: 1.25rem;
    color: var(--cpcr-text);
}

[data-theme-mode="dark"] .crazypbx-call-recordings-page-container {
    --cpcr-card: rgba(24, 24, 27, 0.84);
    --cpcr-border: rgba(161, 161, 170, 0.26);
    --cpcr-text: #f4f4f5;
    --cpcr-muted: #a1a1aa;
}

.crazypbx-call-recordings-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem;
    margin-bottom: 1rem;
    border: 1px solid var(--cpcr-border);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 12% 18%, rgba(225, 29, 72, 0.16), transparent 28%),
        linear-gradient(135deg, var(--cpcr-card), rgba(248, 250, 252, 0.72));
    box-shadow: 0 18px 45px rgba(24, 24, 27, 0.1);
}

[data-theme-mode="dark"] .crazypbx-call-recordings-hero {
    background:
        radial-gradient(circle at 12% 18%, rgba(225, 29, 72, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(24, 24, 27, 0.96), rgba(39, 39, 42, 0.78));
}

.crazypbx-call-recordings-kicker,
.crazypbx-call-recordings-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--cpcr-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.crazypbx-call-recordings-title {
    margin: 0.35rem 0;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--cpcr-text);
}

.crazypbx-call-recordings-subtitle,
.crazypbx-call-recordings-card-head p {
    max-width: 54rem;
    margin: 0;
    color: var(--cpcr-muted);
}

.crazypbx-call-recordings-hero-actions,
.crazypbx-call-recordings-selection-actions,
.crazypbx-call-recordings-filter-actions,
.crazypbx-call-recordings-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.crazypbx-call-recordings-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.crazypbx-call-recordings-stat-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.7rem;
    align-items: center;
    padding: 0.95rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
    border-color: rgba(148, 163, 184, 0.28);
}

.crazypbx-call-recordings-stat-icon {
    grid-row: span 2;
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.95), rgba(159, 18, 57, 0.95));
    color: #ffffff;
    font-size: 1.2rem;
    box-shadow: 0 10px 22px rgba(225, 29, 72, 0.24);
}

.crazypbx-call-recordings-stat-icon i {
    display: inline-flex;
    line-height: 1;
}

[data-theme-mode="dark"] .crazypbx-call-recordings-stat-card {
    background:
        linear-gradient(135deg, rgba(24, 24, 27, 0.98), rgba(39, 39, 42, 0.92));
    border-color: rgba(161, 161, 170, 0.32);
}

.crazypbx-call-recordings-stat-label {
    color: var(--cpcr-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.crazypbx-call-recordings-stat-card strong {
    color: var(--cpcr-text);
    font-size: 1.15rem;
}

.crazypbx-call-recordings-filter-card,
.crazypbx-call-recordings-table-card {
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 16px 38px rgba(24, 24, 27, 0.08);
}

[data-theme-mode="dark"] .crazypbx-call-recordings-filter-card,
[data-theme-mode="dark"] .crazypbx-call-recordings-table-card {
    background:
        linear-gradient(135deg, rgba(24, 24, 27, 0.96), rgba(9, 9, 11, 0.98));
    border-color: rgba(161, 161, 170, 0.28);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.crazypbx-call-recordings-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.crazypbx-call-recordings-card-head h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.15rem 0 0.25rem;
    color: var(--cpcr-text);
    font-size: 1rem;
    font-weight: 800;
}

.crazypbx-call-recordings-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: end;
}

.crazypbx-call-recordings-filter-grid .crazypbx-extensions-field-label {
    gap: 0.4rem;
    padding: 0.72rem;
    border: 1px solid rgba(161, 161, 170, 0.28);
    border-radius: 0.9rem;
    background: rgba(244, 244, 245, 0.9);
}

[data-theme-mode="dark"] .crazypbx-call-recordings-filter-grid .crazypbx-extensions-field-label {
    background: rgba(39, 39, 42, 0.94);
    border-color: rgba(161, 161, 170, 0.36);
}

.crazypbx-call-recordings-filter-grid .crazypbx-extensions-label-row {
    color: var(--cpcr-text);
    font-size: 0.78rem;
    font-weight: 800;
}

.crazypbx-call-recordings-page-container .crazypbx-extensions-input,
.crazypbx-call-recordings-page-container .crazypbx-extensions-select {
    min-height: 2.65rem;
    border: 1px solid rgba(161, 161, 170, 0.38);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #18181b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme-mode="dark"] .crazypbx-call-recordings-page-container .crazypbx-extensions-input,
[data-theme-mode="dark"] .crazypbx-call-recordings-page-container .crazypbx-extensions-select {
    background: rgba(9, 9, 11, 0.94);
    border-color: rgba(161, 161, 170, 0.46);
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.crazypbx-call-recordings-page-container .crazypbx-extensions-input:focus,
.crazypbx-call-recordings-page-container .crazypbx-extensions-select:focus {
    border-color: rgba(225, 29, 72, 0.78);
    box-shadow: 0 0 0 0.18rem rgba(225, 29, 72, 0.18);
    outline: none;
}

.crazypbx-call-recordings-field-message,
.crazypbx-call-recordings-inline-message,
.crazypbx-call-recordings-row-message {
    display: block;
    min-height: 1.1rem;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.crazypbx-call-recordings-inline-message {
    margin: 0;
}

.crazypbx-call-recordings-field-message.is-error,
.crazypbx-call-recordings-inline-message.is-error,
.crazypbx-call-recordings-row-message.is-error {
    color: #dc2626;
}

.crazypbx-call-recordings-field-message.is-success,
.crazypbx-call-recordings-inline-message.is-success,
.crazypbx-call-recordings-row-message.is-success {
    color: #059669;
}

.crazypbx-call-recordings-field-message.is-muted,
.crazypbx-call-recordings-inline-message.is-muted,
.crazypbx-call-recordings-row-message.is-muted {
    color: var(--cpcr-muted);
}

.crazypbx-call-recordings-selection-bar {
    position: sticky;
    top: 0.75rem;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(225, 29, 72, 0.24);
    border-radius: 1rem;
    background: rgba(255, 241, 242, 0.96);
    box-shadow: 0 14px 30px rgba(24, 24, 27, 0.16);
}

[data-theme-mode="dark"] .crazypbx-call-recordings-selection-bar {
    background: rgba(63, 23, 33, 0.96);
}

.crazypbx-call-recordings-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.crazypbx-call-recordings-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.45rem;
    color: var(--cpcr-text);
}

.crazypbx-call-recordings-table th {
    padding: 0.35rem 0.55rem;
    color: var(--cpcr-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.crazypbx-call-recordings-table td {
    padding: 0.7rem 0.55rem;
    background: rgba(148, 163, 184, 0.08);
    vertical-align: middle;
}

.crazypbx-call-recordings-table td:first-child {
    border-radius: 0.85rem 0 0 0.85rem;
}

.crazypbx-call-recordings-table td:last-child {
    border-radius: 0 0.85rem 0.85rem 0;
}

.crazypbx-call-recordings-table td span {
    display: block;
    color: var(--cpcr-muted);
    font-size: 0.76rem;
}

.crazypbx-call-recordings-pill,
.crazypbx-call-recordings-result-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(225, 29, 72, 0.38);
    background: rgba(225, 29, 72, 0.18);
    color: #be123c;
    padding: 0.28rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: capitalize;
}

[data-theme-mode="dark"] .crazypbx-call-recordings-pill,
[data-theme-mode="dark"] .crazypbx-call-recordings-result-pill {
    border-color: rgba(244, 63, 94, 0.55);
    background: rgba(244, 63, 94, 0.24);
    color: #fecdd3;
}

.crazypbx-call-recordings-row-actions button {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--cpcr-border);
    border-radius: 0.7rem;
    background: var(--cpcr-card);
    color: var(--cpcr-text);
}

.crazypbx-call-recordings-row-actions button:hover {
    border-color: var(--cpcr-accent);
    color: var(--cpcr-accent);
}

.crazypbx-call-recordings-row-actions button.is-danger:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.crazypbx-call-recordings-action-tooltip {
    display: inline-flex;
    position: relative;
}

.crazypbx-call-recordings-action-tooltip-panel {
    position: fixed;
    z-index: 9999;
    max-width: min(14rem, calc(100vw - 1.5rem));
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.65rem;
    background: #18181b;
    color: #f8fafc;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
    visibility: hidden;
    white-space: nowrap;
}

.crazypbx-call-recordings-action-tooltip-panel.is-active {
    opacity: 1;
    visibility: visible;
}

.crazypbx-call-recordings-action-tooltip-panel::after {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    border: 0.35rem solid transparent;
    border-top-color: #18181b;
    content: "";
    transform: translateX(-50%);
}

.crazypbx-call-recordings-empty {
    padding: 2rem !important;
    text-align: center;
    color: var(--cpcr-muted);
}

.crazypbx-call-recordings-modal-panel {
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}

.crazypbx-call-recordings-modal-panel .modal-body,
.crazypbx-call-recordings-modal-panel .crazypbx-extensions-modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.crazypbx-call-recordings-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.crazypbx-call-recordings-detail-grid div {
    padding: 0.75rem;
    border: 1px solid var(--cpcr-border);
    border-radius: 0.85rem;
    background: rgba(148, 163, 184, 0.08);
}

.crazypbx-call-recordings-detail-grid span {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--cpcr-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.crazypbx-call-recordings-detail-grid strong {
    overflow-wrap: anywhere;
    color: var(--cpcr-text);
}

.crazypbx-call-recordings-audio {
    width: 100%;
    margin-top: 0.75rem;
}

.crazypbx-call-recordings-tooltip-wrap {
    position: relative;
    overflow: visible;
}

.crazypbx-call-recordings-tooltip-panel,
.crazypbx-call-recordings-page-container .crazypbx-extensions-tooltip-panel {
    position: fixed;
    z-index: 9999;
    max-width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.crazypbx-call-recordings-page-container .crazypbx-extensions-tooltip-panel.is-active {
    opacity: 1;
    visibility: visible;
}

.crazypbx-call-recordings-page-container .crazypbx-extensions-select {
    position: relative;
    z-index: 5;
}

.crazypbx-call-recordings-page-container .crazypbx-extensions-tooltip-icon {
    background: rgba(113, 113, 122, 0.22);
    border: 1px solid rgba(161, 161, 170, 0.42);
    color: #71717a;
}

[data-theme-mode="dark"] .crazypbx-call-recordings-page-container .crazypbx-extensions-tooltip-icon {
    background: rgba(82, 82, 91, 0.72);
    border-color: rgba(161, 161, 170, 0.5);
    color: #e4e4e7;
}

.crazypbx-call-recordings-page-container .crazypbx-extensions-tooltip-icon:hover,
.crazypbx-call-recordings-page-container .crazypbx-extensions-tooltip-icon:focus {
    background: rgba(225, 29, 72, 0.14);
    border-color: rgba(225, 29, 72, 0.5);
    color: var(--cpcr-accent);
}

@media (max-width: 1199.98px) {
    .crazypbx-call-recordings-stats,
    .crazypbx-call-recordings-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .crazypbx-call-recordings-page-container {
        padding: 0.75rem;
    }

    .crazypbx-call-recordings-hero,
    .crazypbx-call-recordings-card-head,
    .crazypbx-call-recordings-selection-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .crazypbx-call-recordings-stats,
    .crazypbx-call-recordings-filter-grid,
    .crazypbx-call-recordings-detail-grid {
        grid-template-columns: 1fr;
    }

    .crazypbx-call-recordings-hero-actions,
    .crazypbx-call-recordings-selection-actions,
    .crazypbx-call-recordings-filter-actions {
        justify-content: stretch;
    }

    .crazypbx-call-recordings-hero-actions > *,
    .crazypbx-call-recordings-selection-actions > *,
    .crazypbx-call-recordings-filter-actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* CrazyPBX Call History Management */
.crazypbx-call-history-page-container {
    --cpch-card: var(--cpe-card, rgba(255, 255, 255, 0.94));
    --cpch-card-strong: var(--cpe-card-strong, #ffffff);
    --cpch-border: var(--cpe-border, rgba(15, 23, 42, 0.1));
    --cpch-filter-field-bg: color-mix(in srgb, var(--cpch-card-strong) 82%, rgba(15, 23, 42, 0.04));
    --cpch-control-bg: var(--cpch-card-strong);
    --cpch-control-border: color-mix(in srgb, var(--cpch-border) 70%, var(--cpch-muted));
    --cpch-text: var(--cpe-text, #172033);
    --cpch-muted: var(--cpe-muted, #64748b);
    --cpch-red: var(--cpe-red, #f43f5e);
    --cpch-cyan: var(--cpe-cyan, #06b6d4);
    --cpch-green: var(--cpe-green, #10b981);
    color: var(--cpch-text);
    padding: 0.65rem 0 1.25rem;
}

.crazypbx-call-history-hero,
.crazypbx-call-history-filter-card,
.crazypbx-call-history-table-card,
.crazypbx-call-history-modal-panel {
    background: var(--cpch-card);
    border: 1px solid var(--cpch-border);
    border-radius: 1.15rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.crazypbx-call-history-hero {
    align-items: center;
    background:
        radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.18), transparent 16rem),
        linear-gradient(135deg, #111827 0%, #0f766e 48%, #06b6d4 100%);
    color: #ffffff;
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: visible;
    padding: 0.85rem 0.95rem;
}

.crazypbx-call-history-kicker,
.crazypbx-call-history-section-kicker,
.crazypbx-call-history-result-pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 800;
    gap: 0.35rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crazypbx-call-history-kicker {
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.62rem;
    padding: 0.24rem 0.52rem;
}

.crazypbx-call-history-section-kicker {
    color: var(--cpch-red);
    font-size: 0.62rem;
}

.crazypbx-call-history-title {
    font-size: clamp(1.05rem, 2.1vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0.35rem 0 0.18rem;
}

.crazypbx-call-history-subtitle,
.crazypbx-call-history-card-head p {
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0;
}

.crazypbx-call-history-subtitle {
    color: rgba(255, 255, 255, 0.78);
    max-width: 42rem;
}

.crazypbx-call-history-card-head p {
    color: var(--cpch-muted);
}

.crazypbx-call-history-hero-actions,
.crazypbx-call-history-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.crazypbx-call-history-stats {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0.55rem 0 0.85rem;
}

.crazypbx-call-history-stat-card {
    --cpch-stat-accent: var(--cpch-cyan);
    --cpch-stat-bg: rgba(6, 182, 212, 0.12);
    align-items: center;
    border-radius: 0.85rem;
    display: grid;
    gap: 0.38rem 0.65rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 3.1rem;
    padding: 0.65rem 0.75rem;
}

.crazypbx-call-history-stat-card.is-total {
    --cpch-stat-accent: #818cf8;
    --cpch-stat-bg: rgba(129, 140, 248, 0.14);
}

.crazypbx-call-history-stat-card.is-inbound {
    --cpch-stat-accent: #10b981;
    --cpch-stat-bg: rgba(16, 185, 129, 0.14);
}

.crazypbx-call-history-stat-card.is-outbound {
    --cpch-stat-accent: #f97316;
    --cpch-stat-bg: rgba(249, 115, 22, 0.14);
}

.crazypbx-call-history-stat-card.is-recording {
    --cpch-stat-accent: #f43f5e;
    --cpch-stat-bg: rgba(244, 63, 94, 0.14);
}

.crazypbx-call-history-stat-card.is-quality {
    --cpch-stat-accent: #06b6d4;
    --cpch-stat-bg: rgba(6, 182, 212, 0.14);
}

.crazypbx-call-history-stat-icon {
    align-items: center;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cpch-stat-accent) 18%, transparent), transparent),
        var(--cpch-stat-bg);
    border: 1px solid color-mix(in srgb, var(--cpch-stat-accent) 35%, transparent);
    border-radius: 0.65rem;
    color: var(--cpch-stat-accent);
    display: inline-flex;
    font-size: 1rem;
    height: 2.05rem;
    justify-content: center;
    width: 2.05rem;
}

.crazypbx-call-history-stat-label {
    color: var(--cpch-muted);
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.crazypbx-call-history-stat-card strong {
    background: color-mix(in srgb, var(--cpch-stat-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cpch-stat-accent) 22%, var(--cpch-border));
    border-radius: 0.65rem;
    color: var(--cpch-text);
    font-size: 1.15rem;
    letter-spacing: -0.04em;
    line-height: 1;
    min-width: 2.15rem;
    padding: 0.38rem 0.48rem;
    text-align: center;
}

.crazypbx-call-history-filter-card,
.crazypbx-call-history-table-card {
    margin-bottom: 0.85rem;
    overflow: visible;
    padding: 0;
}

.crazypbx-call-history-card-head {
    align-items: center;
    border-bottom: 1px solid var(--cpch-border);
    display: grid;
    gap: 0.7rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.85rem 1rem;
}

.crazypbx-call-history-card-head h3 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 800;
    gap: 0.35rem;
    margin: 0.08rem 0 0.16rem;
}

.crazypbx-call-history-mode-toggle {
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid var(--cpch-border);
    border-radius: 999px;
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.2rem;
}

.crazypbx-call-history-mode-toggle button {
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--cpch-muted);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.42rem 0.7rem;
}

.crazypbx-call-history-mode-toggle button.is-active {
    background: #ffffff;
    box-shadow: 0 0.45rem 1rem rgba(15, 23, 42, 0.12);
    color: #0f766e;
}

.crazypbx-call-history-filter-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding: 1rem;
}

.crazypbx-call-history-filter-grid .crazypbx-extensions-field-label {
    background: var(--cpch-filter-field-bg);
    border: 1px solid color-mix(in srgb, var(--cpch-control-border) 76%, transparent);
    border-radius: 0.95rem;
    padding: 0.72rem 0.78rem 0.58rem;
}

.crazypbx-call-history-filter-grid .crazypbx-extensions-input,
.crazypbx-call-history-filter-grid .crazypbx-extensions-select {
    background: var(--cpch-control-bg);
    border-color: var(--cpch-control-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0.45rem 1.1rem rgba(15, 23, 42, 0.06);
}

.crazypbx-call-history-filter-grid .crazypbx-extensions-input:hover,
.crazypbx-call-history-filter-grid .crazypbx-extensions-select:hover,
.crazypbx-call-history-filter-grid .crazypbx-extensions-input:focus,
.crazypbx-call-history-filter-grid .crazypbx-extensions-select:focus {
    border-color: color-mix(in srgb, var(--cpch-cyan) 52%, var(--cpch-control-border));
    outline: 0;
}

.crazypbx-call-history-filter-grid .crazypbx-extensions-input:focus,
.crazypbx-call-history-filter-grid .crazypbx-extensions-select:focus {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 0.18rem color-mix(in srgb, var(--cpch-cyan) 18%, transparent);
}

.crazypbx-call-history-filter-actions {
    align-items: end;
    grid-column: span 2;
}

.crazypbx-call-history-field-message,
.crazypbx-call-history-inline-message {
    color: var(--cpch-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 0.32rem;
    min-height: 1rem;
}

.crazypbx-call-history-field-message.is-error,
.crazypbx-call-history-inline-message.is-error {
    color: #f43f5e;
}

.crazypbx-call-history-field-message.is-success,
.crazypbx-call-history-inline-message.is-success {
    color: #10b981;
}

.crazypbx-call-history-inline-message:not(.is-visible) {
    display: none;
}

.crazypbx-call-history-result-pill {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.24);
    color: #0e7490;
    font-size: 0.66rem;
    padding: 0.34rem 0.6rem;
}

.crazypbx-call-history-table-wrap {
    overflow-x: auto;
}

.crazypbx-call-history-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1040px;
    width: 100%;
}

.crazypbx-call-history-table th,
.crazypbx-call-history-table td {
    border-bottom: 1px solid var(--cpch-border);
    font-size: 0.78rem;
    padding: 0.7rem 0.72rem;
    vertical-align: middle;
}

.crazypbx-call-history-table th {
    color: var(--cpch-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.crazypbx-call-history-table code {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 0.35rem;
    color: var(--cpch-text);
    font-size: 0.68rem;
    padding: 0.18rem 0.28rem;
}

.crazypbx-call-history-empty {
    color: var(--cpch-muted);
    padding: 1.5rem !important;
    text-align: center;
}

.crazypbx-call-history-empty.is-error {
    color: #f43f5e;
}

.crazypbx-call-history-badge,
.crazypbx-call-history-flag,
.crazypbx-call-history-outcome {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 800;
    gap: 0.25rem;
    padding: 0.28rem 0.5rem;
    white-space: nowrap;
}

.crazypbx-call-history-badge.is-inbound {
    background: rgba(16, 185, 129, 0.13);
    color: #047857;
}

.crazypbx-call-history-badge.is-outbound {
    background: rgba(249, 115, 22, 0.13);
    color: #c2410c;
}

.crazypbx-call-history-badge.is-internal {
    background: rgba(129, 140, 248, 0.14);
    color: #4f46e5;
}

.crazypbx-call-history-badge.is-forwarded {
    background: rgba(6, 182, 212, 0.13);
    color: #0e7490;
}

.crazypbx-call-history-badge.is-recording {
    background: rgba(244, 63, 94, 0.12);
    color: #be123c;
}

.crazypbx-call-history-badge.is-unknown,
.crazypbx-call-history-outcome {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}

.crazypbx-call-history-quality {
    display: block;
    font-weight: 900;
}

.crazypbx-call-history-subvalue,
.crazypbx-call-history-muted {
    color: var(--cpch-muted);
    display: block;
    font-size: 0.68rem;
}

.crazypbx-call-history-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.crazypbx-call-history-flag {
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
}

.crazypbx-call-history-flag.is-active {
    background: rgba(16, 185, 129, 0.13);
    color: #047857;
}

.crazypbx-call-history-action {
    align-items: center;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid var(--cpch-border);
    border-radius: 0.65rem;
    color: var(--cpch-text);
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    margin-left: 0.3rem;
    width: 2rem;
}

.crazypbx-call-history-action:hover,
.crazypbx-call-history-action:focus-visible {
    background: rgba(6, 182, 212, 0.14);
    border-color: rgba(6, 182, 212, 0.28);
    color: #0e7490;
}

.crazypbx-call-history-detail-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crazypbx-call-history-detail-item {
    background: var(--cpch-card-strong);
    border: 1px solid var(--cpch-border);
    border-radius: 0.85rem;
    padding: 0.65rem;
}

.crazypbx-call-history-detail-item span {
    color: var(--cpch-muted);
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.crazypbx-call-history-detail-item strong {
    font-size: 0.85rem;
    letter-spacing: normal;
    overflow-wrap: anywhere;
}

.crazypbx-call-history-json-view {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.9rem;
    color: #e5e7eb;
    font-size: 0.75rem;
    max-height: 60vh;
    overflow: auto;
    padding: 0.85rem;
    white-space: pre-wrap;
}

.crazypbx-call-history-tooltip-panel.is-fixed {
    z-index: 9999;
}

[data-theme-mode="dark"] .crazypbx-call-history-page-container {
    --cpch-card: rgba(24, 24, 27, 0.84);
    --cpch-card-strong: rgba(39, 39, 42, 0.94);
    --cpch-border: rgba(161, 161, 170, 0.26);
    --cpch-filter-field-bg: rgba(39, 39, 42, 0.94);
    --cpch-control-bg: rgba(9, 9, 11, 0.94);
    --cpch-control-border: rgba(161, 161, 170, 0.46);
    --cpch-text: #f4f4f5;
    --cpch-muted: #a1a1aa;
}

[data-theme-mode="dark"] .crazypbx-call-history-stat-card {
    background: linear-gradient(135deg, rgba(24, 24, 27, 0.98), rgba(39, 39, 42, 0.92));
    border: 1px solid rgba(161, 161, 170, 0.32);
}

[data-theme-mode="dark"] .crazypbx-call-history-filter-card,
[data-theme-mode="dark"] .crazypbx-call-history-table-card {
    background: linear-gradient(135deg, rgba(24, 24, 27, 0.96), rgba(9, 9, 11, 0.98));
    border-color: rgba(161, 161, 170, 0.28);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

[data-theme-mode="dark"] .crazypbx-call-history-filter-grid .crazypbx-extensions-field-label {
    background: rgba(39, 39, 42, 0.94);
    border-color: rgba(161, 161, 170, 0.36);
}

[data-theme-mode="dark"] .crazypbx-call-history-filter-grid .crazypbx-extensions-input,
[data-theme-mode="dark"] .crazypbx-call-history-filter-grid .crazypbx-extensions-select {
    background: rgba(9, 9, 11, 0.94);
    border-color: rgba(161, 161, 170, 0.46);
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme-mode="dark"] .crazypbx-call-history-filter-grid .crazypbx-extensions-input:focus,
[data-theme-mode="dark"] .crazypbx-call-history-filter-grid .crazypbx-extensions-select:focus {
    border-color: rgba(6, 182, 212, 0.78);
    box-shadow: 0 0 0 0.18rem rgba(6, 182, 212, 0.18);
}

[data-theme-mode="dark"] .crazypbx-call-history-mode-toggle {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme-mode="dark"] .crazypbx-call-history-mode-toggle button.is-active {
    background: #0f172a;
    color: #67e8f9;
}

[data-theme-mode="dark"] .crazypbx-call-history-result-pill {
    color: #67e8f9;
}

[data-theme-mode="dark"] .crazypbx-call-history-action {
    background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1199.98px) {
    .crazypbx-call-history-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .crazypbx-call-history-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .crazypbx-call-history-hero,
    .crazypbx-call-history-card-head {
        grid-template-columns: 1fr;
    }

    .crazypbx-call-history-hero-actions,
    .crazypbx-call-history-filter-actions {
        justify-content: stretch;
    }

    .crazypbx-call-history-hero-actions > *,
    .crazypbx-call-history-filter-actions > * {
        flex: 1 1 auto;
    }

    .crazypbx-call-history-stats,
    .crazypbx-call-history-filter-grid,
    .crazypbx-call-history-detail-grid {
        grid-template-columns: 1fr;
    }

    .crazypbx-call-history-filter-actions {
        grid-column: auto;
    }
}
/* ========================================== */
/* Global Modal Focus Backdrop                */
/* ========================================== */

.modal-backdrop.show {
    background-color: #000 !important;
    opacity: 0.92 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme-mode="light"] .modal-backdrop.show {
    background-color: rgba(15, 23, 42, 0.45) !important;
    opacity: 1 !important;
}

/* Bootstrap tab panes — instant swap; fade stacking looks like a stuck dim overlay */
.tab-content > .tab-pane.fade {
    transition: none !important;
}

.tab-content > .tab-pane:not(.active) {
    display: none !important;
}

/* ========================================== */
/* 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;
    z-index: 1080;
}

.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 !important;
    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;
    overflow-wrap: break-word;
}

.crazyai-tooltip-wrapper:hover,
.crazyai-tooltip-wrapper:focus-within {
    z-index: 1100;
}

.crazyai-tooltip-wrapper:hover .crazyai-tooltip-content,
.crazyai-tooltip-wrapper:focus-within .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: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-card-border-color, rgba(0, 0, 0, 0.125));
}

[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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 0.5rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    border: 1px solid rgba(0, 200, 83, 0.45);
    background: rgba(0, 200, 83, 0.1);
    color: #00963d;
    box-shadow: none;
}

.crazytel-recharge-btn:hover {
    background: #00a046;
    border-color: #00a046;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 143, 56, 0.32);
}

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

[data-theme-mode="dark"] .crazytel-recharge-btn {
    background: rgba(0, 200, 83, 0.14);
    border-color: rgba(0, 200, 83, 0.5);
    color: #34d06a;
    box-shadow: none;
}

[data-theme-mode="dark"] .crazytel-recharge-btn:hover {
    background: #00a046;
    border-color: #00a046;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 143, 56, 0.36);
}

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

/* Recharge link — compact accent button (products dashboard, account balance, shop) */
.crazytel-adv-recharge-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 0.55rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
    border: 1px solid #00a046;
    background: #00a046;
    color: #ffffff !important;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.crazytel-adv-recharge-btn:hover,
.crazytel-adv-recharge-btn:focus-visible {
    background: #008f38;
    border-color: #008f38;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 143, 56, 0.32);
}

.crazytel-adv-recharge-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.crazytel-adv-recharge-btn.is-compact {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    gap: 0.35rem;
}

.crazytel-adv-recharge-btn-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    font-size: 0.92em;
    font-weight: 800;
    line-height: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.crazytel-adv-recharge-btn:hover .crazytel-adv-recharge-btn-mark,
.crazytel-adv-recharge-btn:focus-visible .crazytel-adv-recharge-btn-mark {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.crazytel-adv-recharge-btn.is-compact .crazytel-adv-recharge-btn-mark {
    width: 1.15em;
    height: 1.15em;
    font-size: 0.88em;
}

[data-theme-mode="dark"] .crazytel-adv-recharge-btn {
    background: #00a046;
    border-color: #00a046;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .crazytel-adv-recharge-btn:hover,
[data-theme-mode="dark"] .crazytel-adv-recharge-btn:focus-visible {
    background: #008f38;
    border-color: #008f38;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(0, 143, 56, 0.36);
}

/* 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: linear-gradient(135deg, #17a2b8, #138496);
    border: none;
}

[data-theme-mode="dark"] .crazytel-product-nbn-icon {
    background: linear-gradient(135deg, #17a2b8, #138496);
    border: none;
}

.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: #ffffff;
}

.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 section category headers — bold in all theme modes (overrides template font-weight: 500) */
.app-sidebar .slide__category,
.app-sidebar .slide__category .category-name {
    font-weight: 700 !important;
}

/* 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;
}

/* Light mode sidebar — dark menu text/icons on white sidebar (portal theme preview) */
[data-theme-mode="light"][data-menu-styles="light"] {
    --portal-sidebar-text: #172033;
    --portal-sidebar-category: #3d4a5c;
    --portal-sidebar-muted: #455468;
}

[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__label,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__icon,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__angle {
    color: var(--portal-sidebar-text) !important;
    opacity: 1 !important;
}

[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .slide__category {
    color: var(--portal-sidebar-category) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item:hover,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item:hover .side-menu__label,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item:hover .side-menu__angle {
    color: var(--portal-sidebar-text) !important;
}

[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item:hover .side-menu__icon {
    color: var(--portal-sidebar-muted) !important;
}

[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.active,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.active .side-menu__label,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.active .side-menu__icon,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.active .side-menu__angle {
    color: var(--portal-sidebar-text) !important;
}

/* CrazyFax "Send Fax" nav — theme-aware emphasis (no inline white labelStyle) */
.app-sidebar .side-menu__item.crazyfax-send-fax-nav .side-menu__label {
    font-weight: 700;
}

/* Hybrid SIP Trunks "Manage Trunks" nav — bold emphasis */
.app-sidebar .side-menu__item.hst-manage-trunks-nav .side-menu__label {
    font-weight: 700;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav,
[data-theme-mode="dark"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav .side-menu__label,
[data-theme-mode="dark"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav .side-menu__icon {
    color: #ffffff !important;
}

[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav .side-menu__label,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav .side-menu__icon,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav:hover,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav:hover .side-menu__label,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav:hover .side-menu__icon,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav.active,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav.active .side-menu__label,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .side-menu__item.crazyfax-send-fax-nav.active .side-menu__icon {
    color: var(--portal-sidebar-text) !important;
}

[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .slide-menu.child1 .side-menu__item,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .slide-menu.child2 .side-menu__item,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .slide-menu.child3 .side-menu__item {
    color: var(--portal-sidebar-muted) !important;
}

[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .slide-menu.child1 .side-menu__item:hover,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .slide-menu.child2 .side-menu__item:hover,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .slide-menu.child3 .side-menu__item:hover,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .slide-menu.child1 .side-menu__item.active,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .slide-menu.child2 .side-menu__item.active,
[data-theme-mode="light"][data-menu-styles="light"] .app-sidebar .slide-menu.child3 .side-menu__item.active {
    color: var(--primary-color) !important;
}

/* ═══ Portal light-mode dashboard metric contrast (WCAG AA) ═══ */
[data-theme-mode="light"] {
    --portal-metric-ink: #172033;
    --portal-metric-muted: #64748b;
    --portal-metric-success: #047857;
    --portal-metric-danger: #b91c1c;
    --portal-metric-warning: #b45309;
    --portal-metric-info: #0369a1;
}

/* Portal saturated gradient panels — Bootstrap .card-body uses --default-text-color (dark in light mode) */
.portal-gradient-pricing-card {
    --portal-gradient-panel-ink: #f6f7fb;
    --portal-gradient-panel-muted: rgba(246, 247, 251, 0.92);
    --portal-gradient-panel-subtle: rgba(246, 247, 251, 0.85);
    color: var(--portal-gradient-panel-ink);
}

.portal-gradient-pricing-card .card-body,
.portal-gradient-pricing-card .tts-ad-content,
.portal-gradient-pricing-card .tts-ad-title,
.portal-gradient-pricing-card .tts-ad-text,
.portal-gradient-pricing-card .tts-ad-highlight,
.portal-gradient-pricing-card .tts-ad-disclaimer,
.portal-gradient-pricing-card li,
.portal-gradient-pricing-card p,
.portal-gradient-pricing-card .tts-pricing-table th,
.portal-gradient-pricing-card .tts-pricing-table td {
    color: var(--portal-gradient-panel-muted) !important;
}

.portal-gradient-pricing-card .tts-ad-title,
.portal-gradient-pricing-card .tts-ad-highlight {
    color: var(--portal-gradient-panel-ink) !important;
    font-weight: 600;
}

.portal-gradient-pricing-card .tts-ad-disclaimer {
    color: var(--portal-gradient-panel-subtle) !important;
    opacity: 1 !important;
}

[data-theme-mode="light"] .portal-gradient-pricing-card .card-body,
[data-theme-mode="light"] .portal-gradient-pricing-card .tts-ad-content,
[data-theme-mode="light"] .portal-gradient-pricing-card .tts-ad-text,
[data-theme-mode="light"] .portal-gradient-pricing-card .tts-ad-highlight,
[data-theme-mode="light"] .portal-gradient-pricing-card .tts-ad-disclaimer,
[data-theme-mode="light"] .portal-gradient-pricing-card li,
[data-theme-mode="light"] .portal-gradient-pricing-card p,
[data-theme-mode="light"] .tts-ad-card .card-body,
[data-theme-mode="light"] .tts-ad-card .tts-ad-content,
[data-theme-mode="light"] .tts-ad-card .tts-ad-text,
[data-theme-mode="light"] .tts-ad-card .tts-ad-highlight,
[data-theme-mode="light"] .tts-ad-card .tts-ad-disclaimer,
[data-theme-mode="light"] .tts-ad-card li,
[data-theme-mode="light"] .tts-ad-card p {
    color: var(--portal-gradient-panel-muted, rgba(246, 247, 251, 0.92)) !important;
}

[data-theme-mode="light"] .portal-gradient-pricing-card .tts-ad-title,
[data-theme-mode="light"] .portal-gradient-pricing-card .tts-ad-highlight,
[data-theme-mode="light"] .tts-ad-card .tts-ad-title,
[data-theme-mode="light"] .tts-ad-card .tts-ad-highlight {
    color: var(--portal-gradient-panel-ink, #f6f7fb) !important;
}

[data-theme-mode="light"] .tts-hero-card,
[data-theme-mode="light"] .tts-hero-card .tts-hero-title,
[data-theme-mode="light"] .tts-hero-card .tts-hero-text,
[data-theme-mode="light"] .ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-card,
[data-theme-mode="light"] .ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-card-label,
[data-theme-mode="light"] .ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-card-note,
[data-theme-mode="light"] .ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-price,
[data-theme-mode="light"] .ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-currency,
[data-theme-mode="light"] .ann-page-container[data-ann-page="pricing"] .ann-pricing-hero-period,
[data-theme-mode="light"] .tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-card,
[data-theme-mode="light"] .tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-card-label,
[data-theme-mode="light"] .tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-card-note,
[data-theme-mode="light"] .tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-price,
[data-theme-mode="light"] .tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-currency,
[data-theme-mode="light"] .tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-period,
[data-theme-mode="light"] .voicemail-shared-hero .voicemail-title,
[data-theme-mode="light"] .voicemail-shared-hero .voicemail-subtitle,
[data-theme-mode="light"] .voicemail-shared-hero .voicemail-kicker {
    color: rgba(246, 247, 251, 0.92) !important;
}

[data-theme-mode="light"] .cp-stat-value,
[data-theme-mode="light"] .metric-value,
[data-theme-mode="light"] .tc-metric-value,
[data-theme-mode="light"] .ivr-metric-value,
[data-theme-mode="light"] .ivr-dashboard-container .metric-value,
[data-theme-mode="light"] .ivr-stats-container .metric-value,
[data-theme-mode="light"] .ivr-usage-container .metric-value,
[data-theme-mode="light"] .queues-metric-value,
[data-theme-mode="light"] .sip-metric-value,
[data-theme-mode="light"] .ann-page-container .metric-value,
[data-theme-mode="light"] .crazypbx-dashboard-stat-value,
[data-theme-mode="light"] .crazytel-stat-value,
[data-theme-mode="light"] .fax-stat-value {
    color: var(--portal-metric-ink) !important;
    -webkit-text-fill-color: var(--portal-metric-ink) !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

[data-theme-mode="light"] .metric-value.text-success,
[data-theme-mode="light"] .tc-metric-value.text-success {
    color: var(--portal-metric-success) !important;
    -webkit-text-fill-color: var(--portal-metric-success) !important;
}

[data-theme-mode="light"] .metric-value.text-danger {
    color: var(--portal-metric-danger) !important;
    -webkit-text-fill-color: var(--portal-metric-danger) !important;
}

[data-theme-mode="light"] .metric-value.text-warning,
[data-theme-mode="light"] .tc-metric-value.text-warning {
    color: var(--portal-metric-warning) !important;
    -webkit-text-fill-color: var(--portal-metric-warning) !important;
}

[data-theme-mode="light"] .metric-value.text-info {
    color: var(--portal-metric-info) !important;
    -webkit-text-fill-color: var(--portal-metric-info) !important;
}

[data-theme-mode="light"] .fax-stat-value--failed {
    color: var(--portal-metric-danger) !important;
    -webkit-text-fill-color: var(--portal-metric-danger) !important;
}

[data-theme-mode="light"] .text-gradient-blue,
[data-theme-mode="light"] .text-gradient-purple,
[data-theme-mode="light"] .text-gradient-green {
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

[data-theme-mode="light"] .text-gradient-blue {
    color: #1d4ed8 !important;
    -webkit-text-fill-color: #1d4ed8 !important;
}

[data-theme-mode="light"] .text-gradient-purple {
    color: #7e22ce !important;
    -webkit-text-fill-color: #7e22ce !important;
}

[data-theme-mode="light"] .text-gradient-green {
    color: var(--portal-metric-success) !important;
    -webkit-text-fill-color: var(--portal-metric-success) !important;
}

[data-theme-mode="light"] .text-value-green {
    color: var(--portal-metric-success) !important;
}

[data-theme-mode="light"] .text-value-purple {
    color: #7e22ce !important;
}

[data-theme-mode="light"] .porting-dashboard-stat-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .porting-dashboard-combined-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .porting-dashboard-stat-value,
[data-theme-mode="light"] .porting-dashboard-combined-metric-value {
    color: var(--portal-metric-ink);
}

[data-theme-mode="light"] .porting-dashboard-stat-label,
[data-theme-mode="light"] .porting-dashboard-combined-metric-label {
    color: var(--portal-metric-muted);
}

[data-theme-mode="light"] .porting-dashboard-combined-metric {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* ═══ Portal light-mode dashboard cards & tables (WCAG AA) ═══ */
[data-theme-mode="light"] .crazytel-dashboard-card {
    color: var(--portal-metric-ink, #172033);
}

[data-theme-mode="light"] .crazytel-dashboard-card .card-title,
[data-theme-mode="light"] .cgrt-dashboard-heading,
[data-theme-mode="light"] .cgrt-dashboard-card-title {
    color: var(--portal-metric-ink, #172033) !important;
}

[data-theme-mode="light"] .crazytel-dashboard-card .text-muted,
[data-theme-mode="light"] .crazytel-manage-container .text-muted,
[data-theme-mode="light"] .cgrt-dashboard-heading + .text-muted {
    color: var(--portal-metric-muted, #64748b) !important;
}

[data-theme-mode="light"] .cgrt-dashboard-metric-value,
[data-theme-mode="light"] .cgrt-dashboard-cell-primary,
[data-theme-mode="light"] #recent-customers-table tbody td {
    color: var(--portal-metric-ink, #172033);
}

[data-theme-mode="light"] #recent-customers-table tbody td .text-muted,
[data-theme-mode="light"] #recent-customers-table thead th.text-muted {
    color: var(--portal-metric-muted, #64748b) !important;
}

[data-theme-mode="light"] #recent-customers-table tbody tr:hover {
    background-color: rgba(15, 23, 42, 0.04);
}

[data-theme-mode="light"] .cgrt-loading-row .crazytel-loading-placeholder {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
}

[data-theme-mode="light"] .table {
    --bs-table-color: var(--portal-metric-ink, #172033);
    color: var(--portal-metric-ink, #172033);
}

[data-theme-mode="light"] .table td,
[data-theme-mode="light"] .table tbody td,
[data-theme-mode="light"] .table-borderless td {
    color: var(--portal-metric-ink, #172033);
}

[data-theme-mode="light"] .table .text-muted,
[data-theme-mode="light"] .table td .text-muted,
[data-theme-mode="light"] .table thead th.text-muted {
    color: var(--portal-metric-muted, #64748b) !important;
}

[data-theme-mode="light"] .table a:not(.btn) {
    color: #1d4ed8;
}

[data-theme-mode="light"] .table a:not(.btn):hover,
[data-theme-mode="light"] .table a:not(.btn):focus-visible {
    color: #1e40af;
}

[data-theme-mode="light"] .crazytel-dashboard-card .badge.bg-info,
[data-theme-mode="light"] #personal-signups-badge,
[data-theme-mode="light"] #recent-customers-table .badge.bg-info {
    background-color: #0369a1 !important;
    color: #ffffff !important;
}

[data-theme-mode="light"] .crazytel-card-footer-domain {
    color: var(--portal-metric-muted, #64748b) !important;
}

[data-theme-mode="light"] .crazytel-manage-container .btn-light {
    color: var(--portal-metric-ink, #172033);
    border-color: rgba(15, 23, 42, 0.2);
}

[data-theme-mode="light"] .crazytel-manage-container .btn-light:hover,
[data-theme-mode="light"] .crazytel-manage-container .btn-light:focus-visible {
    background-color: rgba(15, 23, 42, 0.06);
    color: var(--portal-metric-ink, #172033);
    border-color: rgba(15, 23, 42, 0.28);
}

[data-theme-mode="dark"] .cgrt-dashboard-heading,
[data-theme-mode="dark"] .cgrt-dashboard-card-title {
    color: #ffffff !important;
}

[data-theme-mode="dark"] .cgrt-dashboard-metric-value,
[data-theme-mode="dark"] .cgrt-dashboard-cell-primary {
    color: #ffffff;
}

[data-theme-mode="dark"] .crazytel-card-footer-domain {
    color: #ffffff !important;
}


/* 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);
    color: #e0e0e0 !important;
}

.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 !important;
}

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

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

.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 {
    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;
}

/* CrazyPBX inbound feature submenu icons */
.app-sidebar .slide-menu.child1 .side-menu__item .crazytel-submenu-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    margin-inline-end: 0.5rem;
    opacity: 0.95;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.app-sidebar .slide-menu.child1 .side-menu__item:hover .crazytel-submenu-icon,
.app-sidebar .slide-menu.child1 .side-menu__item.active .crazytel-submenu-icon,
.app-sidebar .slide-menu.child2 .side-menu__item:hover .crazytel-submenu-icon,
.app-sidebar .slide-menu.child2 .side-menu__item.active .crazytel-submenu-icon {
    opacity: 1;
    filter: brightness(1.2) drop-shadow(0 0 6px currentColor);
    transform: scale(1.08);
}

.app-sidebar .slide-menu.child2 .side-menu__item .crazytel-submenu-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    margin-inline-end: 0.5rem;
    opacity: 0.95;
    transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.app-sidebar .crazytel-submenu-icon--speed-dials {
    color: #20c997 !important;
}

.app-sidebar .crazytel-submenu-icon--manual-switches {
    color: #fd7e14 !important;
}

.app-sidebar .crazytel-submenu-icon--time-switches {
    color: #ffc107 !important;
}

.app-sidebar .crazytel-submenu-icon--announcements {
    color: #0dcaf0 !important;
}

.app-sidebar .crazytel-submenu-icon--auto-attendants {
    color: #e83e8c !important;
}

.app-sidebar .crazytel-submenu-icon--ring-groups {
    color: #6f42c1 !important;
}

.app-sidebar .crazytel-submenu-icon--queues {
    color: #0d6efd !important;
}

.app-sidebar .crazytel-submenu-icon--premium-queues {
    color: #84cc16 !important;
}

.app-sidebar .crazytel-submenu-icon--accounting {
    color: #20c997 !important;
}

.app-sidebar .crazytel-submenu-icon--help-center {
    color: #0dcaf0 !important;
}

.app-sidebar .crazytel-submenu-icon--rejected-calls {
    color: #fd7e14 !important;
}

.app-sidebar .crazytel-submenu-icon--api-management {
    color: #8b5cf6 !important;
}

.app-sidebar .crazytel-submenu-icon--channel-partner {
    color: #e83e8c !important;
}

.app-sidebar .crazytel-submenu-icon--money-transfer {
    color: #84cc16 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--money-transfer {
    color: #bef264 !important;
}

.app-sidebar .crazytel-submenu-icon--account-management {
    color: #0d6efd !important;
}

.app-sidebar .crazytel-submenu-icon--cdr {
    color: #0d6efd !important;
}

.app-sidebar .crazytel-submenu-icon--did-pricing {
    color: #eab308 !important;
}

.app-sidebar .crazytel-submenu-icon--call-price-sim {
    color: #a855f7 !important;
}

.app-sidebar .crazytel-submenu-icon--balance {
    color: #20c997 !important;
}

.app-sidebar .crazytel-submenu-icon--subscriptions {
    color: #14b8a6 !important;
}

.app-sidebar .crazytel-submenu-icon--invoices {
    color: #6366f1 !important;
}

.app-sidebar .crazytel-submenu-icon--knowledgebase {
    color: #6f42c1 !important;
}

.app-sidebar .crazytel-submenu-icon--emergency {
    color: #dc3545 !important;
}

.app-sidebar .crazytel-submenu-icon--basic {
    color: #0d6efd !important;
}

.app-sidebar .crazytel-submenu-icon--network {
    color: #20c997 !important;
}

.app-sidebar .crazytel-submenu-icon--shop {
    color: #f59e0b !important;
}

.app-sidebar .crazytel-submenu-icon--shop-ht801 {
    color: #8b5cf6 !important;
}

.app-sidebar .crazytel-submenu-icon--shop-orders {
    color: #ffc107 !important;
}

.app-sidebar .crazytel-submenu-icon--shop-external {
    color: #0dcaf0 !important;
}

.app-sidebar .crazytel-submenu-icon--text-to-speech {
    color: #a855f7 !important;
}

.app-sidebar .crazytel-submenu-icon--caller-id {
    color: #ef4444 !important;
}

.app-sidebar .crazytel-submenu-icon--number-dashboard {
    color: #8b5cf6 !important;
}

.app-sidebar .crazytel-submenu-icon--number-management {
    color: #0d6efd !important;
}

.app-sidebar .crazytel-submenu-icon--buy-number {
    color: #22c55e !important;
}

.app-sidebar .crazytel-submenu-icon--account-holders {
    color: #e83e8c !important;
}

.app-sidebar .crazytel-submenu-icon--contact-addresses {
    color: #0dcaf0 !important;
}

.app-sidebar .crazytel-submenu-icon--porting-manager {
    color: #fd7e14 !important;
}

.app-sidebar .crazytel-submenu-icon--voicemail {
    color: #8b5cf6 !important;
}

.app-sidebar .crazytel-submenu-icon--recording-box {
    color: #ec4899 !important;
}

.app-sidebar .crazytel-submenu-icon--time-conditions {
    color: #22c55e !important;
}

/* SMS Center submenu icons */
.app-sidebar .crazytel-submenu-icon--sms-new {
    color: #0d6efd !important;
}

.app-sidebar .crazytel-submenu-icon--sms-inbox {
    color: #0dcaf0 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-scheduled {
    color: #ffc107 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-email-to-sms {
    color: #6f42c1 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-number-management {
    color: #20c997 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-sent {
    color: #0d6efd !important;
}

.app-sidebar .crazytel-submenu-icon--sms-received {
    color: #22c55e !important;
}

.app-sidebar .crazytel-submenu-icon--sms-troubleshooting {
    color: #fd7e14 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-history {
    color: #6c757d !important;
}

/* Hybrid SIP Trunks — collapsible children icon colors (no teal; parents keep hybrid teal) */
.app-sidebar .crazytel-submenu-icon--hst-call-reports {
    color: #fb923c !important;
}

.app-sidebar .crazytel-submenu-icon--hst-cdr {
    color: #38bdf8 !important;
}

.app-sidebar .crazytel-submenu-icon--hst-registration-logs {
    color: #a78bfa !important;
}

.app-sidebar .crazytel-submenu-icon--hst-simple-messages {
    color: #84cc16 !important;
}

.app-sidebar .crazytel-submenu-icon--hst-feature-codes {
    color: #f59e0b !important;
}

.app-sidebar .crazytel-submenu-icon--hst-blf {
    color: #f472b6 !important;
}

.app-sidebar .crazytel-submenu-icon--hst-webhooks {
    color: #60a5fa !important;
}

.app-sidebar .crazytel-submenu-icon--hst-recording {
    color: #f87171 !important;
}

.app-sidebar .crazytel-submenu-icon--hst-moh {
    color: #c084fc !important;
}

.app-sidebar .crazytel-submenu-icon--hst-ai-transcriptions {
    color: #e879f9 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-address-book {
    color: #e83e8c !important;
}

.app-sidebar .crazytel-submenu-icon--sms-contact-lists {
    color: #0dcaf0 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-templates {
    color: #8b5cf6 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-blocking {
    color: #dc3545 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-outbound-blocking {
    color: #fd7e14 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-inbound-blocking {
    color: #ffc107 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-opt-out {
    color: #20c997 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-bolt-on {
    color: #f59e0b !important;
}

.app-sidebar .crazytel-submenu-icon--sms-bulk-plans {
    color: #84cc16 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-faq {
    color: #0dcaf0 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-knowledge-base {
    color: #6f42c1 !important;
}

.app-sidebar .crazytel-submenu-icon--sms-api {
    color: #8b5cf6 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-new {
    color: #3b82f6 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-inbox {
    color: #22d3ee !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-scheduled {
    color: #facc15 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-email-to-sms {
    color: #a78bfa !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-number-management {
    color: #2dd4bf !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-sent {
    color: #3b82f6 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-received {
    color: #4ade80 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-troubleshooting {
    color: #fb923c !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-history {
    color: #94a3b8 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-address-book {
    color: #f472b6 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-contact-lists {
    color: #22d3ee !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-templates {
    color: #a78bfa !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-blocking {
    color: #f87171 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-outbound-blocking {
    color: #fb923c !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-inbound-blocking {
    color: #facc15 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-opt-out {
    color: #2dd4bf !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-bolt-on {
    color: #fbbf24 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-bulk-plans {
    color: #bef264 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-faq {
    color: #22d3ee !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-knowledge-base {
    color: #a78bfa !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--sms-api {
    color: #a78bfa !important;
}

/* Premium Features submenu — match each feature accent (scoped by route where legacy CrazyPBX shares icon classes) */
.app-sidebar .side-menu__item[href*="/announcement/"] .crazytel-submenu-icon {
    color: #eab308 !important;
}

.app-sidebar .side-menu__item[href*="/ring-groups/"] .crazytel-submenu-icon {
    color: #8b5cf6 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href*="/announcement/"] .crazytel-submenu-icon {
    color: #facc15 !important;
}

[data-theme-mode="dark"] .app-sidebar .side-menu__item[href*="/ring-groups/"] .crazytel-submenu-icon,
[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--voicemail {
    color: #a78bfa !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--recording-box {
    color: #f472b6 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--time-conditions {
    color: #86efac !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--premium-queues {
    color: #bef264 !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-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-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
}

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

.simcard-card-actions .btn-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-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 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    min-height: 60px;
}

/* Left section of card header - text area */
.simcard-modern-card-header>div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

/* Right section of card header - icons inline */
.simcard-modern-card-header>div:last-child {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* 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.25rem;
    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.35rem 0.65rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    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 */
        gap: 0.5rem;
    }

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

    .simcard-modern-status-badge {
        font-size: 0.65rem;
        /* Slightly smaller on mobile */
        padding: 0.3rem 0.55rem;
        /* 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;
    /* button reset — trigger is <button> so hx-boost cannot treat it as navigation */
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.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;
}
[data-theme-mode="light"] .modal-title {
    color: #111827;
}

.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-secondary {
    border: 2px solid #6c757d;
    color: #ffffff;
}

.network-status-modal-footer .btn-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-secondary {
    border-color: #cccccc;
    color: #cccccc;
}

[data-theme-mode="dark"] .network-status-modal-footer .btn-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-visible {
    outline: 2px solid rgb(var(--primary-rgb));
    outline-offset: 2px;
}

.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;
}

.cgrt-dashboard-heading,
.cgrt-dashboard-card-title {
    color: var(--portal-metric-ink, #172033);
}

.cgrt-dashboard-metric-value,
.cgrt-dashboard-cell-primary {
    color: var(--portal-metric-ink, #172033);
}

.crazytel-card-footer-domain {
    color: var(--portal-metric-muted, #64748b);
}

[data-theme-mode="dark"] .cgrt-dashboard-heading,
[data-theme-mode="dark"] .cgrt-dashboard-card-title,
[data-theme-mode="dark"] .cgrt-dashboard-metric-value,
[data-theme-mode="dark"] .cgrt-dashboard-cell-primary {
    color: #ffffff;
}

[data-theme-mode="dark"] .crazytel-card-footer-domain {
    color: #ffffff !important;
}

#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-day.today {
    border: 1px solid #666;
    background: transparent;
    border-radius: 4px;
}

[data-theme-mode="dark"] .flatpickr-day.today:hover,
[data-theme-mode="dark"] .flatpickr-day.today:focus {
    background: #444;
    border-color: #777;
    color: #fff;
}

[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-primary {
    color: #007bff;
    border-color: #007bff;
}

[data-theme-mode="dark"] .btn-primary:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-check:checked+.btn-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 {
    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;
    }
}

/* ============================================================================
   SHARED ACCOUNT WELCOME HEADER STYLES
   ============================================================================ */
.profile-welcome-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.profile-welcome-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-welcome-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 700;
    color: #111827;
    font-size: 1.45rem;
    letter-spacing: -0.015em;
}

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

.profile-welcome-subtitle {
    font-size: 0.88rem;
    color: #697386;
    font-weight: 400;
}

[data-theme-mode="dark"] .profile-welcome-subtitle {
    color: #b3b3b3;
}

.profile-avatar-pulse {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a78bfa;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.08);
}

.profile-code-capsule {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    padding: 0.4rem 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

[data-theme-mode="dark"] .profile-code-capsule {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}

.profile-code-label {
    font-size: 0.65rem;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1px;
}

.profile-code-value {
    font-family: monospace;
    font-weight: 700;
    color: #111827;
    font-size: 0.9rem;
}

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

@media (max-width: 768px) {
    .profile-welcome-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .profile-welcome-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* ============================================================================
   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);
    }
}

.account-payments-tabs .nav-link {
    color: var(--account-muted, #697386);
}

.account-payments-tabs .nav-link.active {
    color: #8b5cf6;
    border-color: #dee2e6 #dee2e6 #fff;
}

.account-payments-quick-btn.active {
    background-color: rgba(139, 92, 246, 0.12);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.account-payments-stripe-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.75rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.02);
}

.account-payments-element {
    min-height: 11rem;
}

.account-payments-field-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.35rem;
    margin-bottom: 0.75rem;
}

.account-payments-amount-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 0.15rem rgba(239, 68, 68, 0.18);
}

[data-theme-mode="dark"] .account-payments-field-error {
    color: #f87171;
}

[data-theme-mode="dark"] .account-payments-amount-input.is-invalid {
    border-color: #f87171;
    box-shadow: 0 0 0 0.15rem rgba(248, 113, 113, 0.2);
}

.account-payments-auto-status,
.account-payments-bank-card {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.account-payments-status-badge {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.account-payments-auto-checklist li + li {
    margin-top: 0.35rem;
}

[data-theme-mode="dark"] .account-payments-tabs .nav-link {
    color: #b3b3b3;
}

[data-theme-mode="dark"] .account-payments-tabs .nav-link.active {
    color: #c4b5fd;
    background-color: #161616;
    border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) #161616;
}

[data-theme-mode="dark"] .account-payments-stripe-panel,
[data-theme-mode="dark"] .account-payments-auto-status,
[data-theme-mode="dark"] .account-payments-bank-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-payments-quick-btn.active {
    background-color: rgba(139, 92, 246, 0.18);
    border-color: #8b5cf6;
    color: #ddd6fe;
}

/* Recharge tab — Stripe advertisement-style layout */
.account-payments-page-header {
    background:
        linear-gradient(135deg, rgba(99, 91, 255, 0.12), rgba(99, 91, 255, 0.02)),
        #f8f9fa;
}

.account-payments-header-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #635bff;
    background: rgba(99, 91, 255, 0.12);
    border: 1px solid rgba(99, 91, 255, 0.22);
    font-size: 1.25rem;
}

.account-payments-eyebrow,
.account-payments-stripe-form-kicker,
.account-payments-stripe-hero-kicker {
    color: #635bff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-payments-stripe-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #3c3489;
    background: rgba(99, 91, 255, 0.1);
    border: 1px solid rgba(99, 91, 255, 0.28);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.account-payments-stripe-pill-logo {
    display: block;
    width: auto;
    height: 1rem;
}

.account-payments-stripe-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.8fr);
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(99, 91, 255, 0.22);
    background:
        linear-gradient(135deg, rgba(99, 91, 255, 0.14), rgba(255, 255, 255, 0.96)),
        #ffffff;
    box-shadow: 0 0.85rem 1.75rem rgba(15, 23, 42, 0.07);
}

.account-payments-stripe-hero-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.account-payments-stripe-logo,
.account-payments-stripe-trust-logo {
    display: block;
    width: auto;
    height: 1.75rem;
}

.account-payments-stripe-hero-title {
    color: #111827;
    font-size: 1.15rem;
    font-weight: 700;
}

.account-payments-stripe-hero-copy {
    color: #4b5563;
    font-size: 0.92rem;
    max-width: 38rem;
}

.account-payments-stripe-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
}

.account-payments-stripe-feature-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(99, 91, 255, 0.16);
}

.account-payments-stripe-feature-list i {
    color: #635bff;
    font-size: 1rem;
}

.account-payments-stripe-hero-amount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(99, 91, 255, 0.18);
    min-height: 100%;
}

.account-payments-stripe-hero-amount-label,
.account-payments-stripe-hero-amount-meta {
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.account-payments-stripe-hero-amount-value {
    color: #111827;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0.2rem 0;
}

.account-payments-stripe-form-panel,
.account-payments-stripe-trust-panel {
    border: 1px solid #dee2e6;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1.25rem;
    height: 100%;
}

.account-payments-stripe-form-heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.account-payments-amount-field {
    position: relative;
}

.account-payments-amount-prefix {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 1.35rem;
    font-weight: 700;
    pointer-events: none;
    z-index: 2;
}

[data-theme-mode="dark"] .account-payments-amount-prefix {
    color: #b3b3b3;
}

.account-payments-amount-input {
    min-height: 3.25rem;
    padding-left: 2.35rem;
    font-size: 1.35rem;
    font-weight: 700;
    border-radius: 0.75rem;
}

.account-payments-quick-amounts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.account-payments-quick-btn {
    min-height: 2.75rem;
    border-radius: 0.65rem;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    color: #374151;
    font-weight: 700;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.account-payments-quick-btn:hover,
.account-payments-quick-btn:focus-visible {
    border-color: #635bff;
    color: #635bff;
    background: rgba(99, 91, 255, 0.08);
}

.account-payments-quick-btn.active {
    background-color: rgba(99, 91, 255, 0.14);
    border-color: #635bff;
    color: #4f46e5;
    box-shadow: 0 0 0 0.2rem rgba(99, 91, 255, 0.14);
}

.account-payments-account-code-display {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.04);
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
    user-select: all;
}

.account-payments-account-code-value {
    color: #111827;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.account-payments-account-code-display i {
    color: #6b7280;
    font-size: 1rem;
    flex-shrink: 0;
}

.account-payments-stripe-cta {
    min-height: 2.75rem;
    background: #635bff !important;
    border-color: #635bff !important;
    color: #ffffff !important;
}

.account-payments-stripe-cta:hover,
.account-payments-stripe-cta:focus-visible {
    background: #5147e5 !important;
    border-color: #5147e5 !important;
    color: #ffffff !important;
}

.account-payments-stripe-cta-logo {
    display: block;
    width: auto;
    height: 1.1rem;
    filter: brightness(0) invert(1);
}

.account-payments-stripe-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.account-payments-stripe-steps li + li {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.account-payments-stripe-step-num {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: #635bff;
    background: rgba(99, 91, 255, 0.12);
    border: 1px solid rgba(99, 91, 255, 0.24);
}

.account-payments-stripe-trust-badge {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 0.75rem;
    background: rgba(99, 91, 255, 0.06);
    border: 1px solid rgba(99, 91, 255, 0.16);
}

.account-payments-stripe-trust-badge p {
    color: #4b5563;
}

@media (max-width: 991.98px) {
    .account-payments-stripe-hero {
        grid-template-columns: 1fr;
    }

    .account-payments-quick-amounts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .account-payments-stripe-pill {
        width: 100%;
        justify-content: center;
    }

    .account-payments-quick-amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-payments-stripe-cta,
    .account-payments-stripe-form-panel .account-btn-neutral {
        width: 100%;
    }
}

[data-theme-mode="dark"] .account-payments-page-header {
    background:
        linear-gradient(135deg, rgba(99, 91, 255, 0.18), rgba(22, 22, 22, 0.98)),
        #161616;
}

[data-theme-mode="dark"] .account-payments-header-icon {
    color: #a5b4fc;
    background: rgba(99, 91, 255, 0.16);
    border-color: rgba(99, 91, 255, 0.32);
}

[data-theme-mode="dark"] .account-payments-eyebrow,
[data-theme-mode="dark"] .account-payments-stripe-form-kicker,
[data-theme-mode="dark"] .account-payments-stripe-hero-kicker {
    color: #a5b4fc;
}

[data-theme-mode="dark"] .account-payments-stripe-pill {
    color: #ddd6fe;
    background: rgba(99, 91, 255, 0.14);
    border-color: rgba(99, 91, 255, 0.32);
}

[data-theme-mode="dark"] .account-payments-stripe-pill-logo,
[data-theme-mode="dark"] .account-payments-stripe-logo,
[data-theme-mode="dark"] .account-payments-stripe-trust-logo {
    filter: brightness(0) invert(1);
}

[data-theme-mode="dark"] .account-payments-stripe-hero {
    background:
        linear-gradient(135deg, rgba(99, 91, 255, 0.16), rgba(26, 26, 26, 0.98)),
        #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0.85rem 1.75rem rgba(0, 0, 0, 0.35);
}

[data-theme-mode="dark"] .account-payments-stripe-hero-title,
[data-theme-mode="dark"] .account-payments-stripe-hero-amount-value {
    color: #f6f7fb;
}

[data-theme-mode="dark"] .account-payments-stripe-hero-copy,
[data-theme-mode="dark"] .account-payments-stripe-trust-badge p {
    color: #b3b3b3;
}

[data-theme-mode="dark"] .account-payments-stripe-feature-list li {
    color: #eeeeee;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-payments-stripe-hero-amount {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-payments-stripe-hero-amount-label,
[data-theme-mode="dark"] .account-payments-stripe-hero-amount-meta {
    color: #697386;
}

[data-theme-mode="dark"] .account-payments-stripe-form-panel,
[data-theme-mode="dark"] .account-payments-stripe-trust-panel {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-payments-quick-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #eeeeee;
}

[data-theme-mode="dark"] .account-payments-quick-btn:hover,
[data-theme-mode="dark"] .account-payments-quick-btn:focus-visible {
    background: rgba(99, 91, 255, 0.14);
    border-color: #8b5cf6;
    color: #ddd6fe;
}

[data-theme-mode="dark"] .account-payments-quick-btn.active {
    background-color: rgba(99, 91, 255, 0.2);
    border-color: #8b5cf6;
    color: #ddd6fe;
    box-shadow: 0 0 0 0.2rem rgba(99, 91, 255, 0.18);
}

html[data-theme-mode="dark"] .account-payments-card .account-payments-account-code-display {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #f6f7fb;
}

html[data-theme-mode="dark"] .account-payments-card .account-payments-account-code-value {
    color: #f6f7fb !important;
}

html[data-theme-mode="dark"] .account-payments-card .account-payments-account-code-display i {
    color: #b3b3b3;
}

[data-theme-mode="dark"] .account-payments-stripe-trust-badge {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-payments-stripe-steps li + li {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* PayPal recharge tab */
.account-payments-paypal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.8fr);
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(0, 48, 135, 0.22);
    background:
        linear-gradient(135deg, rgba(0, 156, 222, 0.12), rgba(255, 255, 255, 0.96)),
        #ffffff;
    box-shadow: 0 0.85rem 1.75rem rgba(15, 23, 42, 0.07);
}

.account-payments-paypal-hero-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.account-payments-paypal-logo,
.account-payments-paypal-trust-logo {
    display: block;
    width: auto;
    height: 1.75rem;
}

.account-payments-paypal-hero-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #003087;
}

.account-payments-paypal-hero-title {
    color: #111827;
    font-size: 1.15rem;
    font-weight: 700;
}

.account-payments-paypal-hero-copy {
    color: #4b5563;
    font-size: 0.92rem;
    max-width: 38rem;
}

.account-payments-paypal-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
}

.account-payments-paypal-feature-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 48, 135, 0.16);
}

.account-payments-paypal-feature-list i {
    color: #003087;
    font-size: 1rem;
}

.account-payments-paypal-hero-amount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(0, 48, 135, 0.18);
    min-height: 100%;
}

.account-payments-paypal-hero-amount-label,
.account-payments-paypal-hero-amount-meta {
    font-size: 0.78rem;
    color: #6b7280;
}

.account-payments-paypal-hero-amount-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: #003087;
    line-height: 1.2;
    margin: 0.15rem 0;
}

.account-payments-paypal-form-panel,
.account-payments-paypal-trust-panel {
    padding: 1.25rem 1.35rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

.account-payments-paypal-form-kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #009cde;
    margin-bottom: 0.25rem;
}

.account-payments-paypal-steps li {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 0;
}

.account-payments-paypal-steps li + li {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.account-payments-paypal-step-num {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #003087;
    background: rgba(0, 156, 222, 0.14);
    border: 1px solid rgba(0, 48, 135, 0.18);
}

.account-payments-paypal-trust-badge {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 0.75rem;
    background: rgba(0, 48, 135, 0.06);
    border: 1px solid rgba(0, 48, 135, 0.16);
}

.account-payments-paypal-trust-badge p {
    color: #4b5563;
}

.account-payments-paypal-buttons {
    min-height: 2.75rem;
    color-scheme: light;
}

.account-payments-paypal-buttons iframe {
    color-scheme: light !important;
}

.account-payments-paypal-buttons-hidden {
    opacity: 0.35;
    pointer-events: none;
}

.account-payments-paypal-buttons-loading {
    padding: 0.5rem 0;
}

@media (max-width: 991.98px) {
    .account-payments-paypal-hero {
        grid-template-columns: 1fr;
    }
}

[data-theme-mode="dark"] .account-payments-paypal-hero {
    background:
        linear-gradient(135deg, rgba(0, 156, 222, 0.08), rgba(26, 26, 26, 0.98)),
        #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-payments-paypal-hero-kicker {
    color: #60a5fa;
}

[data-theme-mode="dark"] .account-payments-paypal-hero-title {
    color: #f6f7fb;
}

[data-theme-mode="dark"] .account-payments-paypal-hero-copy,
[data-theme-mode="dark"] .account-payments-paypal-trust-badge p {
    color: #b3b3b3;
}

[data-theme-mode="dark"] .account-payments-paypal-feature-list li {
    color: #eeeeee;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-payments-paypal-feature-list i {
    color: #60a5fa;
}

[data-theme-mode="dark"] .account-payments-paypal-hero-amount {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-payments-paypal-hero-amount-label,
[data-theme-mode="dark"] .account-payments-paypal-hero-amount-meta {
    color: #697386;
}

[data-theme-mode="dark"] .account-payments-paypal-hero-amount-value {
    color: #f6f7fb;
}

[data-theme-mode="dark"] .account-payments-paypal-form-kicker {
    color: #60a5fa;
}

[data-theme-mode="dark"] .account-payments-paypal-form-panel,
[data-theme-mode="dark"] .account-payments-paypal-trust-panel {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-payments-paypal-step-num {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.24);
}

[data-theme-mode="dark"] .account-payments-paypal-logo,
[data-theme-mode="dark"] .account-payments-paypal-trust-logo {
    filter: brightness(0) invert(1);
}

[data-theme-mode="dark"] .account-payments-paypal-trust-badge {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-payments-paypal-steps li + li {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* 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;
}

/* Global input group text override for dark theme payments */
[data-theme-mode="dark"] .input-group-text {
    background-color: #262626;
    border-color: rgba(255, 255, 255, 0.1);
    color: #eeeeee;
}

/* Auto top-up management (Payments tab) */
.account-auto-topup-empty,
.account-auto-topup-status,
.account-auto-topup-cards {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme-mode="dark"] .account-auto-topup-empty,
[data-theme-mode="dark"] .account-auto-topup-status,
[data-theme-mode="dark"] .account-auto-topup-cards {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
}

.account-auto-topup-field-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.35rem;
}

.account-auto-topup-card-element {
    min-height: 2.75rem;
    padding: 0.85rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #ffffff;
}

.account-auto-topup-cards-empty {
    color: #697386;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.account-auto-topup-card-item {
    background: transparent;
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme-mode="dark"] .account-auto-topup-card-item {
    border-color: rgba(255, 255, 255, 0.1);
}

.account-auto-topup-card-label {
    font-weight: 600;
    font-size: 0.92rem;
}

/* Bank Deposit Tab styling overrides/additions */
.account-payments-bank-detail-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.25rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    color: #0f172a;
    margin-bottom: 1.25rem;
    transition: all 0.2s ease;
}

.account-payments-bank-detail-value {
    font-size: 1rem;
    font-weight: 600;
}

.account-payments-bank-detail-value.font-monospace {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.03em;
}

.account-payments-bank-label {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

[data-theme-mode="dark"] .account-payments-bank-label {
    color: #94a3b8;
}

[data-theme-mode="dark"] .account-payments-bank-detail-box {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.15);
    color: #f6f7fb;
}

.account-payments-bank-detail-box:hover {
    border-color: #635bff;
    box-shadow: 0 0 0 1px #635bff;
}

[data-theme-mode="dark"] .account-payments-bank-detail-box:hover {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 1px #8b5cf6;
}

.account-payments-bank-detail-box-highlight {
    border-color: rgba(99, 91, 255, 0.4);
    background: rgba(99, 91, 255, 0.08);
}

[data-theme-mode="dark"] .account-payments-bank-detail-box-highlight {
    border-color: rgba(139, 92, 246, 0.45);
    background: rgba(139, 92, 246, 0.12);
}

.account-auto-topup-modal {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
    color: #1f2937;
    overflow: hidden;
}

[data-theme-mode="dark"] .account-auto-topup-modal {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    color: #eeeeee;
}

.account-auto-topup-modal .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1.5rem;
}

[data-theme-mode="dark"] .account-auto-topup-modal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.account-auto-topup-modal .modal-title {
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}

[data-theme-mode="dark"] .account-auto-topup-modal .modal-title {
    color: #ffffff;
}

.account-auto-topup-modal .btn-close {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

[data-theme-mode="dark"] .account-auto-topup-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(0.8);
    opacity: 0.7;
}

.account-auto-topup-modal .btn-close:hover {
    opacity: 1;
}

.account-auto-topup-modal .modal-body {
    padding: 1.5rem;
}

.account-auto-topup-modal .form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #4b5563;
    margin-bottom: 0.5rem;
}

[data-theme-mode="dark"] .account-auto-topup-modal .form-label {
    color: #b3b3b3;
}

.account-auto-topup-modal .form-control {
    background: rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #111827;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme-mode="dark"] .account-auto-topup-modal .form-control {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.account-auto-topup-modal .form-control:focus {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(99, 91, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.15);
}

[data-theme-mode="dark"] .account-auto-topup-modal .form-control:focus {
    background: rgba(255, 255, 255, 0.05);
}

.account-auto-topup-modal .form-control::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme-mode="dark"] .account-auto-topup-modal .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.account-auto-topup-modal .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1.5rem;
}

[data-theme-mode="dark"] .account-auto-topup-modal .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.account-auto-topup-card-element {
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.01);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme-mode="dark"] .account-auto-topup-card-element {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.account-auto-topup-card-element.focused {
    border-color: rgba(99, 91, 255, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.15) !important;
}

.account-auto-topup-modal .account-btn {
    min-height: 2.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border-width: 1px;
    border-style: solid;
    padding: 0.625rem 1.5rem;
    font-size: 0.9rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.account-auto-topup-modal .account-btn-action {
    background-color: #635bff !important;
    border-color: #635bff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(99, 91, 255, 0.25);
}

.account-auto-topup-modal .account-btn-action:hover {
    background-color: #5147e5 !important;
    border-color: #5147e5 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 91, 255, 0.35);
}

.account-auto-topup-modal .account-btn-action:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(99, 91, 255, 0.2);
}

.account-auto-topup-modal .account-btn-neutral {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #374151 !important;
}

.account-auto-topup-modal .account-btn-neutral:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #111827 !important;
}

[data-theme-mode="dark"] .account-auto-topup-modal .account-btn-neutral {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cccccc !important;
}

[data-theme-mode="dark"] .account-auto-topup-modal .account-btn-neutral:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

.account-auto-topup-modal .account-btn-cancel {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.account-auto-topup-modal .account-btn-cancel:hover {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
}

.account-auto-topup-modal .account-btn-cancel:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

[data-theme-mode="dark"] .account-auto-topup-empty,
[data-theme-mode="dark"] .account-auto-topup-status,
[data-theme-mode="dark"] .account-auto-topup-cards {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .account-auto-topup-field-error {
    color: #f87171;
}

[data-theme-mode="dark"] .account-auto-topup-cards-empty {
    color: #b3b3b3;
}

[data-theme-mode="dark"] .account-auto-topup-card-item {
    border-color: rgba(255, 255, 255, 0.08);
    color: #f6f7fb;
}

/* 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-primary {
    color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #007bff;
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-primary {
    color: #4da6ff;
    border-color: #4da6ff;
}

[data-theme-mode="dark"] .btn-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;
}

/* ============================================================================
   ACCOUNT INVOICING SECTION STYLES
   ============================================================================ */

.account-invoices-table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

[data-theme-mode="dark"] .account-invoices-table thead th {
    background-color: #161616;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #eeeeee;
}

.account-invoices-table tbody td {
    vertical-align: middle;
}

[data-theme-mode="dark"] .account-invoices-table tbody td {
    border-color: rgba(255, 255, 255, 0.09);
    color: #eeeeee;
}

[data-theme-mode="dark"] .account-invoices-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.account-invoices-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: #8b93a7;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.account-invoices-copy-btn:hover,
.account-invoices-copy-btn:focus-visible {
    color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.12);
    outline: none;
}

.account-invoices-copy-btn.is-copied,
.account-invoices-copy-btn.is-copied:hover {
    color: #22c55e;
    background-color: rgba(34, 197, 94, 0.12);
}

[data-theme-mode="dark"] .account-invoices-copy-btn {
    color: #9aa3b5;
}

[data-theme-mode="dark"] .account-invoices-copy-btn:hover,
[data-theme-mode="dark"] .account-invoices-copy-btn:focus-visible {
    color: #6ea8fe;
    background-color: rgba(110, 168, 254, 0.14);
}

[data-theme-mode="dark"] .account-invoices-copy-btn.is-copied,
[data-theme-mode="dark"] .account-invoices-copy-btn.is-copied:hover {
    color: #4ade80;
    background-color: rgba(74, 222, 128, 0.14);
}

.account-invoices-contact-cell {
    max-width: 180px;
}

.account-invoices-mobile-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="dark"] .account-invoices-mobile-card {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.1);
}

.account-invoices-empty-icon {
    font-size: 3rem;
    color: #697386;
}

.account-invoices-detail-header,
.account-invoices-detail-panel {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.015);
}

[data-theme-mode="dark"] .account-invoices-detail-header,
[data-theme-mode="dark"] .account-invoices-detail-panel {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.1);
}

.account-invoices-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.account-invoices-summary-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 100%;
    background: rgba(255, 255, 255, 0.02);
}

.account-invoices-summary-card strong {
    font-size: 1.05rem;
}

[data-theme-mode="dark"] .account-invoices-summary-card {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.1);
}

.account-invoices-detail-tabs .nav-link {
    font-size: 0.875rem;
}

.account-invoices-tab-content {
    border-top: 0;
}

.account-invoices-detail-table thead th {
    font-size: 0.8125rem;
    white-space: nowrap;
}

.account-invoices-json-cell {
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: #697386;
}

[data-theme-mode="dark"] .account-invoices-json-cell {
    color: #b3b3b3;
}

@media (max-width: 767.98px) {
    .account-invoices-filters .btn,
    .account-invoices-filters .form-control {
        min-height: 44px;
    }
}

/* Invoice detail tabs — instant swap; avoid fade stacking that looks like a stuck dim overlay */
.account-invoices-card .tab-pane.fade {
    transition: none;
}

.account-invoices-card .tab-pane:not(.active) {
    display: none !important;
}

/* Account section buttons: solid fills, white label text; red reserved for cancel/close */
.crazytel-manage-container .account-content-card .account-btn {
    min-height: 2.125rem;
    border-radius: 0.5rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border-width: 1px;
    border-style: solid;
}

.crazytel-manage-container .account-content-card .account-btn-action {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

.crazytel-manage-container .account-content-card .account-btn-action:hover,
.crazytel-manage-container .account-content-card .account-btn-action:focus-visible {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: #ffffff !important;
}

.crazytel-manage-container .account-content-card .account-btn-neutral {
    background-color: #495057 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

.crazytel-manage-container .account-content-card .account-btn-neutral:hover,
.crazytel-manage-container .account-content-card .account-btn-neutral:focus-visible {
    background-color: #3d444a !important;
    border-color: #3d444a !important;
    color: #ffffff !important;
}

.crazytel-manage-container .account-content-card .account-btn-cancel {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.crazytel-manage-container .account-content-card .account-btn-cancel:hover,
.crazytel-manage-container .account-content-card .account-btn-cancel:focus-visible {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
    color: #ffffff !important;
}

.crazytel-manage-container .account-content-card .account-btn:disabled,
.crazytel-manage-container .account-content-card .account-btn.disabled {
    opacity: 0.65;
    color: #ffffff !important;
}

.crazytel-manage-container .account-content-card .account-invoices-table .account-btn-action,
.crazytel-manage-container .account-content-card .account-invoices-table .account-btn-neutral {
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
}

[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-primary,
.close-account-card .btn-secondary,
.close-account-card .btn-info text-white {
    transition: all 0.2s ease;
}

.close-account-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

.close-account-card .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.2);
}

.close-account-card .btn-info text-white: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 (PREMIUM ADVERTISEMENT STYLE)
   ============================================================================ */

/* Plan cards (general/active) */
.plan-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.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: #161616;
    border-color: rgba(255, 255, 255, 0.08);
}

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

.plan-card.border-success {
    border-color: #22c55e !important;
    border-width: 2px;
}

[data-theme-mode="dark"] .plan-card.border-success {
    border-color: #22c55e !important;
}

/* Available plan cards (Premium Advertisement Style) */
.available-plan-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    border-radius: 1.25rem !important;
    overflow: hidden;
    color: #1f2937;
    width: 100%;
}

.available-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -10px rgba(0, 123, 255, 0.15);
    border-color: #007bff;
}

[data-theme-mode="dark"] .available-plan-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.005) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .available-plan-card:hover {
    border-color: rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 18px 36px -12px rgba(139, 92, 246, 0.35) !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
}

.available-plan-card .card-body {
    color: inherit !important;
    padding: 1rem 1.1rem !important;
    min-height: 100%;
}

/* Headings inside cards */
.available-plan-card h5 {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1f2937 !important;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 0.3rem !important;
}

[data-theme-mode="dark"] .available-plan-card h5 {
    color: #ffffff !important;
}

/* Descriptions */
.available-plan-card .text-muted.small,
.available-plan-card-desc {
    color: #6b7280 !important;
    font-size: 0.8rem;
    line-height: 1.35;
    margin-bottom: 0.45rem !important;
}

[data-theme-mode="dark"] .available-plan-card .text-muted.small,
[data-theme-mode="dark"] .available-plan-card-desc {
    color: #cccccc !important;
}

/* Prices */
.available-plan-card .fs-2.fw-bold {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.75rem !important;
    line-height: 1.1;
}

[data-theme-mode="dark"] .available-plan-card .fs-2.fw-bold {
    background: linear-gradient(135deg, #a78bfa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.available-plan-card-price {
    margin-bottom: 0.35rem !important;
}

.available-plan-card-price small {
    font-size: 0.82rem;
}

.available-plan-card-rule {
    margin: 0.5rem 0 !important;
}

.available-plan-card-meta {
    margin-bottom: 0.35rem !important;
}

.available-plan-card-meta > div,
.available-plan-card-rates ul li {
    margin-bottom: 0.28rem;
    line-height: 1.35;
    font-size: 0.84rem;
}

.available-plan-card-rates ul li:last-child {
    margin-bottom: 0;
}

.available-plan-card-rates ul li i {
    font-size: 1rem;
}

.available-plan-card-rates h6 {
    font-size: 0.7rem !important;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem !important;
}

.available-plan-card-actions {
    margin-top: 0.7rem;
}

.available-plan-card .plan-select-btn {
    min-height: 2.35rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.88rem;
}

.available-plan-card .plan-popular-badge {
    margin-bottom: 0.4rem !important;
}

.available-plan-card .plan-popular-badge .badge {
    font-size: 0.72rem;
    padding: 0.3rem 0.75rem;
}

.available-plan-card-actions .small {
    font-size: 0.8rem !important;
}

#available-plans-grid,
#plans-per-sip-trunk-grid {
    align-items: stretch;
}

#account-plans-root > .card-body {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

#account-plans-root .plans-section-divider {
    margin-bottom: 0.65rem !important;
}

#account-plans-root .plans-billing-label {
    display: block;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}

#account-plans-root .plans-billing-value {
    display: block;
    color: var(--bs-body-color);
    font-size: 1rem;
}

#account-plans-root .plans-billing-trunk-row {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding: 0.55rem 0;
    font-size: 0.875rem;
}

#account-plans-root .plans-billing-trunk-row:first-child {
    border-top: 0;
}

.sip-billing-receipt {
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 0.65rem;
    background: rgba(139, 92, 246, 0.08);
    color: var(--bs-body-color);
    padding: 0.75rem 0.9rem;
    font-size: 0.875rem;
}

[data-theme-mode="light"] .sip-billing-receipt {
    background: rgba(109, 40, 217, 0.06);
    border-color: rgba(109, 40, 217, 0.22);
}

/*
 * Grow plan cards to fill leftover viewport space.
 * --plans-card-min-h is set by plans-subscriptions.js from measured chrome.
 */
@media (min-width: 992px) {
    #plans-content-state {
        display: flex !important;
        flex-direction: column;
    }

    #plans-content-state[style*="display: none"],
    #plans-content-state[style*="display:none"] {
        display: none !important;
    }

    #available-plans-grid,
    #plans-per-sip-trunk-grid {
        align-content: stretch;
    }

    #available-plans-grid > [class*="col-"],
    #plans-per-sip-trunk-grid > [class*="col-"] {
        display: flex;
    }

    #available-plans-grid .available-plan-card,
    #plans-per-sip-trunk-grid .available-plan-card {
        flex: 1 1 auto;
        min-height: var(--plans-card-min-h, 0px);
    }

    #available-plans-grid .available-plan-card .card-body > div:first-child,
    #plans-per-sip-trunk-grid .available-plan-card .card-body > div:first-child {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    #available-plans-grid .available-plan-card-rates,
    #plans-per-sip-trunk-grid .available-plan-card-rates {
        flex: 1 1 auto;
    }
}

/* Stretched cards: distribute rate rows through the extra height */
@media (min-width: 992px) {
    #available-plans-grid[style*="--plans-card-min-h"] .available-plan-card .card-body,
    #plans-per-sip-trunk-grid[style*="--plans-card-min-h"] .available-plan-card .card-body {
        padding: 1.15rem 1.2rem !important;
    }

    #available-plans-grid[style*="--plans-card-min-h"] .available-plan-card-rates,
    #plans-per-sip-trunk-grid[style*="--plans-card-min-h"] .available-plan-card-rates {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    #available-plans-grid[style*="--plans-card-min-h"] .available-plan-card-rates ul,
    #plans-per-sip-trunk-grid[style*="--plans-card-min-h"] .available-plan-card-rates ul {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        flex: 1 1 auto;
        min-height: 0;
    }

    #available-plans-grid[style*="--plans-card-min-h"] .available-plan-card .plan-select-btn,
    #plans-per-sip-trunk-grid[style*="--plans-card-min-h"] .available-plan-card .plan-select-btn {
        min-height: 2.5rem;
    }
}

/* Feature grid items */
.available-plan-card strong.text-white {
    color: #111827 !important;
}

[data-theme-mode="dark"] .available-plan-card strong.text-white {
    color: #ffffff !important;
}

.available-plan-card .text-muted {
    color: #4b5563 !important;
}

[data-theme-mode="dark"] .available-plan-card .text-muted {
    color: #d4d4d8 !important;
}

.available-plan-card ul.small.text-muted strong {
    color: #111827 !important;
}

[data-theme-mode="dark"] .available-plan-card ul.small.text-muted strong {
    color: #f6f7fb !important;
}

.available-plan-card ul.small.text-muted span {
    color: #374151 !important;
}

[data-theme-mode="dark"] .available-plan-card ul.small.text-muted span {
    color: #d4d4d8 !important;
}

/* Popular (Current) Card highlight */
.plan-popular {
    border-color: #007bff !important;
    border-width: 2px;
}

[data-theme-mode="dark"] .plan-popular {
    border-color: #8b5cf6 !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    box-shadow: 0 15px 30px -10px rgba(139, 92, 246, 0.15) !important;
}

/* Popular badge style overrides */
.plan-popular-badge {
    display: inline-block;
}

.plan-popular-badge .badge {
    font-size: 0.72rem;
    padding: 0.35rem 0.8rem;
    border-radius: 4px !important;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme-mode="dark"] .plan-popular-badge .badge {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
}

/* Website source link */
.available-plan-card .hover-white {
    transition: color 0.2s ease;
}

.available-plan-card .hover-white:hover {
    color: #007bff !important;
}

[data-theme-mode="dark"] .available-plan-card .hover-white:hover {
    color: #ffffff !important;
}

/* Billing-scope plan sections and itemised per-trunk pricing */
.plans-main-tabs {
    border-bottom-color: rgba(148, 163, 184, 0.28);
    gap: 0.35rem;
    overflow: visible;
}

/* Fixed-position tooltips (plans-tooltips.js) — suppress clipped CSS hover panels */
#account-plans-root .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content:not(.plans-floating-tooltip),
#account-plans-root .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content:not(.plans-floating-tooltip),
#confirm-plan-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content:not(.plans-floating-tooltip),
#confirm-plan-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content:not(.plans-floating-tooltip),
#confirm-channels-add-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content:not(.plans-floating-tooltip),
#confirm-channels-add-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content:not(.plans-floating-tooltip),
#confirm-channels-remove-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content:not(.plans-floating-tooltip),
#confirm-channels-remove-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content:not(.plans-floating-tooltip) {
    visibility: hidden !important;
    opacity: 0 !important;
}

.plans-floating-tooltip {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: calc(100vw - 1.5rem) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1200 !important;
}

body.modal-open .plans-floating-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
}

.modal.show .plans-floating-tooltip {
    z-index: 1305 !important;
}

.plans-floating-tooltip[data-plans-tooltip-placement="bottom"]::after {
    top: auto !important;
    bottom: 100% !important;
    border-color: transparent transparent #000000 transparent !important;
}

[data-theme-mode="dark"] .plans-floating-tooltip[data-plans-tooltip-placement="bottom"]::after {
    border-color: transparent transparent #101010 transparent !important;
}

#account-plans-root,
#account-plans-root > .card-header,
#account-plans-root > .card-body,
#account-plans-root .plans-main-tabs,
#account-plans-root .plans-main-tab-content,
#account-plans-root .tab-pane,
#account-plans-root .plans-billing-summary,
#account-plans-root .plans-billing-summary .card-header,
#account-plans-root .plans-billing-summary .card-body,
#account-plans-root .plans-billing-trunks-table-wrap,
#confirm-plan-modal .modal-body,
#confirm-channels-add-modal .modal-body,
#confirm-channels-remove-modal .modal-body {
    overflow: visible !important;
}

#account-plans-root .custom-kb-tooltip-wrapper.plans-tooltip-active,
#confirm-plan-modal .custom-kb-tooltip-wrapper.plans-tooltip-active,
#confirm-channels-add-modal .custom-kb-tooltip-wrapper.plans-tooltip-active,
#confirm-channels-remove-modal .custom-kb-tooltip-wrapper.plans-tooltip-active {
    z-index: 1200 !important;
}

#account-plans-root .plans-field-tooltip {
    position: relative !important;
    display: inline-block;
    vertical-align: middle;
}

.plans-main-tabs .nav-link {
    color: #4b5563;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
}

[data-theme-mode="dark"] .plans-main-tabs .nav-link {
    color: #c7cbd3;
}

.plans-main-tabs .nav-link:hover,
.plans-main-tabs .nav-link:focus {
    color: #7c3aed;
    border-bottom-color: rgba(124, 58, 237, 0.5);
}

.plans-main-tabs .nav-link.active {
    color: #6d28d9;
    background: transparent;
    border-color: transparent;
    border-bottom-color: #8b5cf6;
}

[data-theme-mode="dark"] .plans-main-tabs .nav-link.active {
    color: #c4b5fd;
    background: transparent;
    border-bottom-color: #a78bfa;
}

.plans-tab-new-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.16rem 0.48rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    vertical-align: middle;
    color: #ffffff;
    background: #dc3545;
    border: 1px solid #dc3545;
    white-space: nowrap;
}

[data-theme-mode="dark"] .plans-tab-new-badge {
    color: #ffffff;
    background: #dc3545;
    border-color: #e35d6a;
}

.plans-main-tabs .nav-link:hover .plans-tab-new-badge,
.plans-main-tabs .nav-link:focus .plans-tab-new-badge,
.plans-main-tabs .nav-link.active .plans-tab-new-badge {
    color: #ffffff;
    background: #c82333;
    border-color: #bd2130;
}

[data-theme-mode="dark"] .plans-main-tabs .nav-link:hover .plans-tab-new-badge,
[data-theme-mode="dark"] .plans-main-tabs .nav-link:focus .plans-tab-new-badge,
[data-theme-mode="dark"] .plans-main-tabs .nav-link.active .plans-tab-new-badge {
    color: #ffffff;
    background: #e35d6a;
    border-color: #ea868f;
}

.plans-main-tab-content {
    min-width: 0;
}

/* Nested billing-scope tabs need the same hide/show contract as Bootstrap tab-content */
#account-plans-root .plans-main-tab-content > .tab-pane:not(.active) {
    display: none !important;
}

#account-plans-root .plans-main-tab-content > .tab-pane.fade {
    transition: none !important;
}

.plans-billing-hybrid-note {
    display: block;
    margin-top: 0.2rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    line-height: 1.3;
}

[data-theme-mode="dark"] .plans-billing-hybrid-note {
    color: #c7cbd3;
}

.plans-plan-empty {
    padding: 1rem 0.25rem;
}

#plans-main-billing-pane .plans-billing-summary {
    margin-bottom: 0 !important;
}

.plans-billing-summary-metrics {
    row-gap: 0.7rem !important;
}

.plans-billing-trunks-table-wrap {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.65rem;
    overflow: hidden;
}

[data-theme-mode="dark"] .plans-billing-trunks-table-wrap {
    border-color: rgba(255, 255, 255, 0.12);
}

.plans-billing-trunks-table {
    margin-bottom: 0 !important;
    font-size: 0.84rem;
}

.plans-billing-trunks-table thead th {
    background: rgba(148, 163, 184, 0.12);
    color: #4b5563;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom-color: rgba(148, 163, 184, 0.22) !important;
    padding: 0.55rem 0.75rem;
}

[data-theme-mode="dark"] .plans-billing-trunks-table thead th {
    background: rgba(255, 255, 255, 0.04);
    color: #c7cbd3;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.plans-billing-trunks-table tbody td {
    padding: 0.55rem 0.75rem;
    vertical-align: top;
    color: #374151;
    border-top-color: rgba(148, 163, 184, 0.16) !important;
}

[data-theme-mode="dark"] .plans-billing-trunks-table tbody td {
    color: #e5e7eb;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.plans-billing-trunks-table .plans-billing-trunk-identity {
    color: #111827;
    font-size: 0.88rem;
    word-break: break-word;
}

[data-theme-mode="dark"] .plans-billing-trunks-table .plans-billing-trunk-identity {
    color: #f6f7fb;
}

.plans-billing-trunks-table .plans-billing-trunk-amount {
    min-width: 11rem;
}

.plans-billing-trunks-table .plans-billing-trunk-next,
.plans-billing-trunks-table .plans-billing-trunk-state {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .plans-billing-trunks-table thead {
        display: none;
    }

    .plans-billing-trunks-table,
    .plans-billing-trunks-table tbody,
    .plans-billing-trunks-table tr,
    .plans-billing-trunks-table td {
        display: block;
        width: 100%;
    }

    .plans-billing-trunks-table tr {
        padding: 0.65rem 0.75rem;
        border-top: 1px solid rgba(148, 163, 184, 0.16);
    }

    [data-theme-mode="dark"] .plans-billing-trunks-table tr {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .plans-billing-trunks-table tr:first-child {
        border-top: 0;
    }

    .plans-billing-trunks-table td {
        border: 0 !important;
        padding: 0.15rem 0 !important;
    }

    .plans-billing-trunks-table .plans-billing-trunk-amount,
    .plans-billing-trunks-table .plans-billing-trunk-next,
    .plans-billing-trunks-table .plans-billing-trunk-state {
        white-space: normal;
        min-width: 0;
    }
}

.plans-plan-tabs {
    border-bottom-color: rgba(148, 163, 184, 0.28);
    gap: 0.35rem;
}

.plans-plan-tabs .nav-link {
    color: #4b5563;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
}

[data-theme-mode="dark"] .plans-plan-tabs .nav-link {
    color: #c7cbd3;
}

.plans-plan-tabs .nav-link:hover,
.plans-plan-tabs .nav-link:focus {
    color: #7c3aed;
    border-bottom-color: rgba(124, 58, 237, 0.5);
}

.plans-plan-tabs .nav-link.active {
    color: #6d28d9;
    background: transparent;
    border-color: transparent;
    border-bottom-color: #8b5cf6;
}

[data-theme-mode="dark"] .plans-plan-tabs .nav-link.active {
    color: #c4b5fd;
    background: transparent;
    border-bottom-color: #a78bfa;
}

.plans-plan-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 0.6rem;
    background: #f8f9fa;
}

[data-theme-mode="dark"] .plans-plan-section-heading {
    border-color: rgba(255, 255, 255, 0.12);
    background: #161616;
}

.plans-plan-section-title {
    color: #1f2937;
    font-size: 1rem;
    font-weight: 700;
}

[data-theme-mode="dark"] .plans-plan-section-title {
    color: #f6f7fb;
}

.plans-plan-section-description {
    color: #4b5563;
    font-size: 0.875rem;
}

[data-theme-mode="dark"] .plans-plan-section-description {
    color: #c7cbd3;
}

.plans-plan-scope-badge {
    display: inline-block;
    margin-bottom: 0.45rem;
    padding: 0.3rem 0.55rem;
    color: #5b21b6;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

[data-theme-mode="dark"] .plans-plan-scope-badge {
    color: #ddd6fe;
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(196, 181, 253, 0.35);
}

.plans-plan-scope-badge--account {
    color: #374151;
    background: rgba(107, 114, 128, 0.12);
    border-color: rgba(107, 114, 128, 0.28);
}

[data-theme-mode="dark"] .plans-plan-scope-badge--account {
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.plans-plan-billing-context,
.plans-plan-channel-note {
    color: #4b5563;
    font-size: 0.8rem;
    line-height: 1.45;
}

[data-theme-mode="dark"] .plans-plan-billing-context,
[data-theme-mode="dark"] .plans-plan-channel-note {
    color: #c7cbd3;
}

#account-plans-root .plans-billing-label {
    color: #4b5563;
    font-weight: 600;
}

[data-theme-mode="dark"] #account-plans-root .plans-billing-label {
    color: #c7cbd3;
}

#account-plans-root .plans-billing-value {
    color: #1f2937;
    font-weight: 700;
}

[data-theme-mode="dark"] #account-plans-root .plans-billing-value {
    color: #f6f7fb;
}

#account-plans-root .plans-billing-trunk-row {
    color: #374151;
}

#account-plans-root .plans-billing-trunks-table .plans-billing-trunk-row {
    display: table-row !important;
}

[data-theme-mode="dark"] #account-plans-root .plans-billing-trunk-row {
    color: #e5e7eb;
    border-top-color: rgba(255, 255, 255, 0.14);
}

.plans-billing-trunk-main,
.plans-billing-trunk-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    min-width: 0;
}

.plans-billing-trunk-details {
    justify-content: flex-end;
    color: #4b5563;
    font-size: 0.8rem;
    text-align: right;
}

[data-theme-mode="dark"] .plans-billing-trunk-details {
    color: #c7cbd3;
}

.plans-billing-trunk-type {
    display: inline-block;
    color: #6d28d9;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .plans-billing-trunk-type {
    color: #c4b5fd;
}

.plans-billing-trunk-identity {
    color: #1f2937;
    overflow-wrap: anywhere;
}

[data-theme-mode="dark"] .plans-billing-trunk-identity {
    color: #f6f7fb;
}

.plans-billing-trunk-state {
    color: #4b5563;
    font-size: 0.8rem;
}

[data-theme-mode="dark"] .plans-billing-trunk-state {
    color: #c7cbd3;
}

@media (max-width: 767.98px) {
    .plans-billing-trunk-details {
        justify-content: flex-start;
        text-align: left;
    }
}

/* Plans card header: title + current plan side-by-side */
.plans-card-header {
    row-gap: 0.45rem;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.plans-card-header .card-title {
    font-size: 1.05rem;
}

.plans-card-header .fs-14 {
    font-size: 0.8rem !important;
}

.plan-welcome-title {
    font-size: 1.1rem !important;
    line-height: 1.25;
}

.plan-welcome-subtitle {
    font-size: 0.8rem !important;
}

.plans-header-title {
    flex: 0 1 auto;
    max-width: 22rem;
}

.plans-header-summary {
    flex: 1 1 16rem;
    min-width: 14rem;
    max-width: 42rem;
}

.plans-summary-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    min-width: 0;
}

.plans-summary-identity {
    flex: 1 1 auto;
    min-width: 0;
}

.plans-summary-fee {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .plans-header-title {
        max-width: none;
        flex: 1 1 100%;
    }

    .plans-header-summary {
        max-width: none;
        order: 3;
        flex-basis: 100%;
    }
}

/* Stack identity + fee only on very narrow viewports */
@media (max-width: 359.98px) {
    .plans-summary-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .plans-summary-fee {
        margin-left: 0;
        width: 100%;
    }

    .plans-summary-fee .plan-fee-capsule {
        display: block;
        width: 100%;
    }
}

/* Summary Panel fixes for dark mode */
.plans-summary-panel {
    background: #f8f9fa !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

[data-theme-mode="dark"] .plans-summary-panel {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.plans-summary-panel .plans-summary-eyebrow {
    font-size: 0.65rem;
    line-height: 1.2;
}

.plans-summary-panel .plan-welcome-title {
    color: #111827 !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

[data-theme-mode="dark"] .plans-summary-panel .plan-welcome-title {
    color: #ffffff !important;
}

.plans-summary-panel .plan-welcome-subtitle {
    color: #4b5563 !important;
    font-size: 0.78rem;
    line-height: 1.3;
}

[data-theme-mode="dark"] .plans-summary-panel .plan-welcome-subtitle {
    color: #cccccc !important;
}

.plans-summary-panel .plan-welcome-subtitle strong {
    color: #111827 !important;
}

[data-theme-mode="dark"] .plans-summary-panel .plan-welcome-subtitle strong {
    color: #ffffff !important;
}

.plans-summary-panel .plan-fee-value {
    color: #111827 !important;
}

[data-theme-mode="dark"] .plans-summary-panel .plan-fee-value {
    color: #ffffff !important;
}

.plans-grandfathered-notice {
    background: rgba(23, 162, 184, 0.1);
    border: 1px solid rgba(23, 162, 184, 0.25);
    color: var(--bs-body-color, #212529);
}

[data-theme-mode="dark"] .plans-grandfathered-notice {
    background: rgba(23, 162, 184, 0.12);
    border-color: rgba(23, 162, 184, 0.35);
    color: #e5e7eb;
}

[data-theme-mode="dark"] .plans-grandfathered-notice .small {
    color: #d1d5db;
}

.plans-grandfathered-notice-link {
    color: #0d6efd;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.plans-grandfathered-notice-link:hover,
.plans-grandfathered-notice-link:focus {
    color: #0a58ca;
}

[data-theme-mode="dark"] .plans-grandfathered-notice-link {
    color: #6ea8fe;
}

[data-theme-mode="dark"] .plans-grandfathered-notice-link:hover,
[data-theme-mode="dark"] .plans-grandfathered-notice-link:focus {
    color: #9ec5fe;
}

/* 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;
}

/* SIP trunk manage-channels panel */
.plans-manage-channels-panel {
    border: 1px solid rgba(139, 92, 246, 0.28);
    background:
        linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(220, 53, 69, 0.04) 45%, rgba(22, 22, 22, 0.02) 100%),
        #161616;
    scroll-margin-top: 5.5rem;
    overflow: hidden;
    box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.55);
}

[data-theme-mode="dark"] .plans-manage-channels-panel {
    border-color: rgba(139, 92, 246, 0.34);
    background:
        linear-gradient(135deg, rgba(139, 92, 246, 0.14) 0%, rgba(220, 53, 69, 0.05) 42%, rgba(16, 16, 16, 0.85) 100%),
        #161616;
}

.plans-manage-channels-panel--focus {
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.45), 0 10px 28px -16px rgba(0, 0, 0, 0.55);
}

.plans-manage-channels-title {
    color: var(--bs-heading-color, #172033);
    font-weight: 700;
}

[data-theme-mode="dark"] .plans-manage-channels-title {
    color: #f6f7fb;
}

/* On-plan channel upgrade promo (Crackers / Crazy 5) — mirrors sip-ad / bolt-on promo language */
.plans-channels-upgrade-promo {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(139, 92, 246, 0.22);
    background: linear-gradient(120deg, rgba(139, 92, 246, 0.22) 0%, rgba(124, 58, 237, 0.12) 55%, rgba(220, 53, 69, 0.08) 100%);
}

[data-theme-mode="dark"] .plans-channels-upgrade-promo {
    border-bottom-color: rgba(139, 92, 246, 0.28);
    background: linear-gradient(120deg, rgba(139, 92, 246, 0.28) 0%, rgba(91, 33, 182, 0.18) 50%, rgba(220, 53, 69, 0.1) 100%);
}

.plans-channels-upgrade-promo-glow {
    position: absolute;
    top: -60%;
    right: -20%;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.28) 0%, transparent 68%);
    pointer-events: none;
    animation: plans-channels-promo-pulse 5s ease-in-out infinite;
}

@keyframes plans-channels-promo-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .plans-channels-upgrade-promo-glow {
        animation: none;
    }
}

.plans-channels-upgrade-promo-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
}

.plans-channels-upgrade-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #f6f7fb;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plans-channels-upgrade-promo-title {
    color: #f6f7fb;
    font-weight: 750;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.plans-channels-upgrade-promo-text {
    color: rgba(246, 247, 251, 0.82);
    font-size: 0.875rem;
    line-height: 1.45;
    max-width: 46rem;
}

.plans-channels-upgrade-promo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.plans-channels-upgrade-promo-cta:hover,
.plans-channels-upgrade-promo-cta:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45);
    transform: translateY(-1px);
    outline: none;
}

.plans-channels-upgrade-promo-cta:focus-visible {
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.45), 0 6px 20px rgba(139, 92, 246, 0.45);
}

.plans-channels-upgrade-promo-cta:disabled,
.plans-channels-upgrade-promo--capped .plans-channels-upgrade-promo-cta {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.plans-channels-pack-buttons--promo-focus {
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.45);
    border-radius: 0.85rem;
    transition: box-shadow 0.25s ease;
}

.plans-channels-metric {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    min-height: 4.25rem;
}

[data-theme-mode="dark"] .plans-channels-metric {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.plans-channels-metric-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b3b3b3;
    margin-bottom: 0.25rem;
}

.plans-channels-metric-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bs-heading-color, #172033);
    font-variant-numeric: tabular-nums;
}

[data-theme-mode="dark"] .plans-channels-metric-value {
    color: #f6f7fb;
}

.plans-channels-addon-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 0.65rem;
}

[data-theme-mode="dark"] .plans-channels-addon-row {
    background: rgba(0, 0, 0, 0.18);
}

.plans-channels-empty {
    padding: 0.75rem 0.25rem;
}

.plans-channels-legacy-badge {
    background: rgba(234, 179, 8, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(234, 179, 8, 0.35);
    font-weight: 600;
}

.plans-channels-add-btn {
    min-height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
}

.plans-channels-pack-fee {
    opacity: 0.85;
    font-size: 0.85em;
}

.plans-channels-qty-input {
    max-width: 6.5rem;
}

/* 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;
    }
}

/* Plans summary panel layouts */
.plan-avatar-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a78bfa;
    font-size: 0.95rem;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.1);
}

.plan-fee-capsule {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
    min-width: 0;
    max-width: 15rem;
}

[data-theme-mode="dark"] .plan-fee-capsule {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.plans-summary-panel .plan-fee-capsule {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme-mode="dark"] .plans-summary-panel .plan-fee-capsule {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.plan-fee-label {
    display: block;
    font-size: 0.62rem;
    color: #b3b3b3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1px;
    line-height: 1.2;
}

.plan-fee-value {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.25;
    word-break: break-word;
}

.plans-section-divider {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 600;
    color: #b3b3b3;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.letter-spacing-05 {
    letter-spacing: 0.05em;
}

/* Modal Styling */
.modal-content.plans-confirm-modal-content {
    background-color: #161616 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.8) !important;
    border-radius: 1.25rem !important;
}

.plans-confirm-modal-content .modal-header {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 1.25rem 1.5rem !important;
}

.plans-confirm-modal-content .modal-body {
    padding: 1.5rem !important;
}

.plans-confirm-modal-content .modal-footer {
    background-color: #1a1a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 1rem 1.5rem !important;
}

.plans-confirm-summary {
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.plans-confirm-channel-packs {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.75rem;
    padding: 0.85rem 0.95rem;
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="dark"] .plans-confirm-channel-packs {
    background: rgba(0, 0, 0, 0.18);
    border-color: rgba(255, 255, 255, 0.1);
}

.plans-confirm-pack-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.plans-confirm-pack-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.plans-confirm-pack-qty-btn {
    min-width: 2.5rem;
    min-height: 2.5rem;
}

.plans-confirm-channel-packs-summary {
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Skeleton animation */
.skeleton-summary-panel {
    height: 100px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.25rem;
    margin-bottom: 1.5rem;
}

.plans-shared-notes {
    margin-top: 0.5rem !important;
    padding-top: 0.4rem !important;
}

.plans-shared-notes-para {
    font-size: 0.7rem;
    line-height: 1.35;
}

@media (min-width: 992px) and (max-height: 960px) {
    .plans-shared-notes {
        margin-top: 0.35rem !important;
        padding-top: 0.3rem !important;
    }

    .plans-shared-notes-para {
        font-size: 0.65rem;
        line-height: 1.3;
    }
}

.skeleton-plan-card {
    height: 420px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
}

.skeleton-summary-panel, .skeleton-plan-card {
    animation: plansSkeletonPulse 1.5s infinite ease-in-out;
}

@keyframes plansSkeletonPulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { opacity: 0.6; }
}

/* ============================================================================
   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;
}

html[data-theme-mode="dark"] .modal .form-label {
    color: #ffffff !important;
}

[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-secondary:hover {
    background-color: #2a2a2a;
    border-color: #444;
    color: #ffffff;
}

[data-theme-mode="dark"] .btn-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-warning {
    border-color: #ffc107;
    color: #ffc107;
}

[data-theme-mode="dark"] .btn-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 !important;
    display: inline-block;
    vertical-align: middle;
    z-index: auto;
}

/* 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: 995 !important;
    /* Above local panels, below Bootstrap overlays */
    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 */
    max-width: min(320px, calc(100vw - 2rem));
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Show on Hover */
.custom-kb-tooltip-wrapper:hover,
.custom-kb-tooltip-wrapper:focus-within {
    z-index: 995 !important;
}

.custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content {
    visibility: visible;
    opacity: 1;
}

.table-responsive:has(.custom-kb-tooltip-wrapper),
.card:has(.custom-kb-tooltip-wrapper),
.card-body:has(.custom-kb-tooltip-wrapper),
.modal-content:has(.custom-kb-tooltip-wrapper),
.modal-body:has(.custom-kb-tooltip-wrapper),
.tab-pane:has(.custom-kb-tooltip-wrapper) {
    overflow: visible !important;
}

/* 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;
    position: relative;
    padding-left: 3rem !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 {
    float: none;
    left: 1rem;
    margin: 0;
    position: absolute;
    top: 1.35rem;
}

/* Label takes full width for better click area */
.twofa-destination-option .form-check-label {
    cursor: pointer;
    margin-left: 0;
}

/* 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;
    position: relative;
    padding-left: 3rem !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 {
    float: none;
    left: 1rem;
    margin: 0;
    position: absolute;
    top: 1.35rem;
}

/* Label takes full width for better click area */
.twofa-method-card .form-check-label {
    cursor: pointer;
    margin-left: 0;
}

/* 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 — scoped to the settings card (not viewport-fixed; avoids HTMX/tab swap ghosts) */
.twofa-settings-card {
    position: relative;
}

.twofa-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
    backdrop-filter: blur(4px);
    border-radius: inherit;
}

.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-primary, #0d6efd) !important;
    border-width: 2px !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 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: #4da3ff !important;
    background: #1a1a1a;
    box-shadow: 0 2px 8px rgba(77, 163, 255, 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);
}

/* 2FA Account Security Redesign */
.twofa-page-header {
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.10), rgba(13, 110, 253, 0.02)),
        #f8f9fa;
}

.twofa-header-icon,
.twofa-intro-icon,
.twofa-summary-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.12);
    border: 1px solid rgba(13, 110, 253, 0.20);
    font-size: 1.25rem;
}

.twofa-eyebrow,
.twofa-section-kicker {
    color: #0d6efd;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.twofa-status-pill {
    color: #ffffff !important;
    background-color: #198754 !important;
    border: none !important;
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    font-weight: 600;
}

.twofa-intro-panel,
.twofa-summary-card,
.twofa-detail-panel,
.twofa-workflow-panel {
    border: 1px solid #dee2e6;
    border-radius: 1rem;
    background: #f8f9fa;
}

.twofa-intro-panel,
.twofa-workflow-panel {
    padding: 1.25rem;
    background: #ffffff;
}

.twofa-summary-card {
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.04);
}

.twofa-summary-card-primary {
    border-color: #0d6efd !important;
    background: #f0f7ff !important;
}

.twofa-summary-icon-muted {
    color: #495057;
    background: #f1f3f5;
    border-color: #dee2e6;
}

.twofa-summary-value {
    max-width: 100%;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
}

.twofa-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.twofa-detail-panel {
    overflow: hidden;
    background: #f8f9fa !important;
}

.twofa-active-dot {
    width: 0.55rem;
    height: 0.55rem;
    display: inline-block;
    border-radius: 999px;
    background: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.14);
}

.twofa-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.twofa-btn {
    min-height: 2.5rem;
    border-radius: 0.65rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}

.twofa-settings-card .twofa-btn-action {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

.twofa-settings-card .twofa-btn-action:hover,
.twofa-settings-card .twofa-btn-action:focus-visible {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: #ffffff !important;
}

.twofa-settings-card .twofa-btn-neutral {
    background-color: #495057 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

.twofa-settings-card .twofa-btn-neutral:hover,
.twofa-settings-card .twofa-btn-neutral:focus-visible {
    background-color: #3d444a !important;
    border-color: #3d444a !important;
    color: #ffffff !important;
}

.twofa-settings-card .twofa-btn-cancel {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.twofa-settings-card .twofa-btn-cancel:hover,
.twofa-settings-card .twofa-btn-cancel:focus-visible {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
    color: #ffffff !important;
}

.twofa-settings-card .twofa-btn:disabled {
    opacity: 0.65;
}

.twofa-btn-sm {
    min-height: 2.125rem;
    font-size: 0.84rem;
}

.twofa-method-card,
.twofa-destination-option {
    border-radius: 0.875rem !important;
}

[data-theme-mode="dark"] .twofa-page-header {
    background:
        linear-gradient(135deg, rgba(77, 163, 255, 0.12), rgba(13, 13, 13, 0.96)),
        #0d0d0d;
}

[data-theme-mode="dark"] .twofa-header-icon,
[data-theme-mode="dark"] .twofa-intro-icon,
[data-theme-mode="dark"] .twofa-summary-icon {
    color: #4da3ff;
    background: rgba(77, 163, 255, 0.12);
    border-color: rgba(77, 163, 255, 0.26);
}

[data-theme-mode="dark"] .twofa-summary-icon-muted {
    color: #cccccc;
    background: #202020;
    border-color: #3a3a3a;
}

[data-theme-mode="dark"] .twofa-eyebrow,
[data-theme-mode="dark"] .twofa-section-kicker {
    color: #4da3ff;
}

[data-theme-mode="dark"] .twofa-status-pill {
    color: #ffffff !important;
    background-color: #198754 !important;
    border: none !important;
}

[data-theme-mode="dark"] .twofa-intro-panel,
[data-theme-mode="dark"] .twofa-summary-card,
[data-theme-mode="dark"] .twofa-detail-panel,
[data-theme-mode="dark"] .twofa-workflow-panel {
    background: #161616 !important;
    border-color: #333333 !important;
}

[data-theme-mode="dark"] .twofa-summary-card-primary {
    background: #151e2e !important;
    border-color: #0d6efd !important;
}

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

[data-theme-mode="dark"] .twofa-detail-panel {
    background: #161616 !important;
}

[data-theme-mode="dark"] .twofa-active-dot {
    background: #4da3ff;
    box-shadow: 0 0 0 0.25rem rgba(77, 163, 255, 0.18);
}

[data-theme-mode="dark"] .twofa-settings-card .twofa-btn-action {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .twofa-settings-card .twofa-btn-action:hover,
[data-theme-mode="dark"] .twofa-settings-card .twofa-btn-action:focus-visible {
    background-color: #2b7fff !important;
    border-color: #2b7fff !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .twofa-settings-card .twofa-btn-neutral {
    background-color: #5c636a !important;
    border-color: #5c636a !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .twofa-settings-card .twofa-btn-neutral:hover,
[data-theme-mode="dark"] .twofa-settings-card .twofa-btn-neutral:focus-visible {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .twofa-settings-card .twofa-btn-cancel {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .twofa-settings-card .twofa-btn-cancel:hover,
[data-theme-mode="dark"] .twofa-settings-card .twofa-btn-cancel:focus-visible {
    background-color: #e55361 !important;
    border-color: #e55361 !important;
    color: #ffffff !important;
}

@media (max-width: 575.98px) {
    .twofa-section-heading,
    .twofa-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .twofa-section-heading .btn,
    .twofa-actions .btn {
        width: 100%;
    }

    .twofa-intro-panel,
    .twofa-workflow-panel {
        padding: 1rem;
    }
}

/* ========================================
   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-light {
    color: #ffffff;
    border-color: #333;
}

[data-theme-mode="dark"] #crazyai-stats-modal .btn-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 portal theme support
   Overrides styles.css plugin rules (!important) so
   dropdowns follow html[data-theme-mode] on toggle.
   ============================================ */

.choices.is-invalid {
    border-color: var(--bs-danger, #ef4444) !important;
}

[data-theme-mode="light"] .choices {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

[data-theme-mode="light"] .choices.is-focused,
[data-theme-mode="light"] .choices:focus {
    border-color: rgba(99, 102, 241, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

[data-theme-mode="light"] .choices__inner {
    background-color: #ffffff !important;
    border: none !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .choices__input {
    background-color: #ffffff !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .choices__input::placeholder {
    color: #64748b !important;
}

[data-theme-mode="light"] .choices__list--dropdown,
[data-theme-mode="light"] .choices__list[aria-expanded] {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .choices__list--dropdown .choices__item,
[data-theme-mode="light"] .choices__item--selectable,
[data-theme-mode="light"] .choices__item--choice {
    color: #172033 !important;
}

[data-theme-mode="light"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-theme-mode="light"] .choices__item--selectable.is-highlighted {
    background-color: rgba(99, 102, 241, 0.12) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .choices__item--choice.is-selected {
    background-color: rgba(99, 102, 241, 0.08) !important;
    color: #4338ca !important;
}

[data-theme-mode="light"] .choices__placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

[data-theme-mode="light"] .choices[data-type*="select-one"] .choices__input {
    background-color: #ffffff !important;
    border-block-end-color: rgba(15, 23, 42, 0.12) !important;
    color: #172033 !important;
}

[data-theme-mode="dark"] .choices {
    background-color: #161616 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme-mode="dark"] .choices.is-focused,
[data-theme-mode="dark"] .choices:focus {
    border-color: rgba(129, 140, 248, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

[data-theme-mode="dark"] .choices__inner {
    background-color: #161616 !important;
    border: none !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .choices__input {
    background-color: #161616 !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .choices__input::placeholder {
    color: #8e8e8e !important;
}

[data-theme-mode="dark"] .choices__list--dropdown,
[data-theme-mode="dark"] .choices__list[aria-expanded] {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .choices__list--dropdown .choices__item,
[data-theme-mode="dark"] .choices__item--selectable,
[data-theme-mode="dark"] .choices__item--choice {
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-theme-mode="dark"] .choices__item--selectable.is-highlighted,
[data-theme-mode="dark"] .choices__item--selectable:hover {
    background-color: #2a2a2a !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .choices__item--choice.is-selected {
    background-color: #2a2a2a !important;
    color: #d4d4d8 !important;
}

[data-theme-mode="dark"] .choices__placeholder {
    color: #8e8e8e !important;
    opacity: 1 !important;
}

[data-theme-mode="dark"] .choices[data-type*="select-one"] .choices__input {
    background-color: #161616 !important;
    border-block-end-color: rgba(255, 255, 255, 0.12) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .choices__button {
    background-color: transparent !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f6f7fb !important;
    opacity: 0.7 !important;
}

[data-theme-mode="dark"] .choices__button:hover {
    opacity: 1 !important;
    color: #ef4444 !important;
}

[data-theme-mode="dark"] .choices.is-disabled .choices__inner,
[data-theme-mode="dark"] .choices.is-disabled .choices__input {
    background-color: #121212 !important;
    cursor: not-allowed !important;
    user-select: none !important;
}

[data-theme-mode="dark"] .choices.is-disabled .choices__item {
    color: #737373 !important;
}

[data-theme-mode="dark"] .choices.is-loading .choices__inner::after {
    border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) transparent !important;
}

[data-theme-mode="dark"] .choices__item--disabled {
    color: #737373 !important;
}

[data-theme-mode="dark"] .choices.is-invalid {
    border-color: #ef4444 !important;
}

[data-theme-mode="light"] .choices__button {
    background-color: transparent !important;
    border-left: 1px solid rgba(15, 23, 42, 0.12) !important;
    opacity: 0.65 !important;
}

[data-theme-mode="light"] .choices__button:hover {
    opacity: 1 !important;
    color: #ef4444 !important;
}

[data-theme-mode="light"] .choices.is-disabled .choices__inner,
[data-theme-mode="light"] .choices.is-disabled .choices__input {
    background-color: #f1f5f9 !important;
    cursor: not-allowed !important;
    opacity: 0.75 !important;
}

[data-theme-mode="light"] .choices.is-disabled .choices__item {
    color: #94a3b8 !important;
}

[data-theme-mode="light"] .choices.is-loading .choices__inner::after {
    border-color: rgba(15, 23, 42, 0.12) rgba(15, 23, 42, 0.12) rgba(15, 23, 42, 0.12) transparent !important;
}

[data-theme-mode="light"] .choices__item--disabled {
    color: #94a3b8 !important;
}

[data-theme-mode="light"] .choices.is-invalid {
    border-color: #ef4444 !important;
}

/*
 * Choices select-one: wrapped native <select> must not paint a second border
 * once PortalSelectChoices replaces the closed-state UI (.choices__inner / shell).
 */
.choices[data-type*="select-one"] > select.form-select,
.choices[data-type*="select-one"] select.form-select.choices__input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/*
 * Native <select class="form-select"> — closed state is themed below; the open
 * option list is OS-rendered and cannot follow portal light/dark mode. For fully
 * themed dropdown panels use Choices.js via PortalSelectChoices
 * (assets/js/portal-select-choices.js).
 */
[data-theme-mode="light"] select.form-select,
[data-theme-mode="light"] .form-select {
    color-scheme: light;
}

[data-theme-mode="dark"] select.form-select,
[data-theme-mode="dark"] .form-select {
    color-scheme: dark;
}

/*
 * Portal: Choices dropdown panels inside modals — fixed stacking layer.
 * Coordinates are applied in assets/js/portal-select-choices.js on showDropdown.
 */
.modal .choices.is-open .choices__list--dropdown,
.modal .choices.is-open .choices__list[aria-expanded],
.offcanvas .choices.is-open .choices__list--dropdown,
.offcanvas .choices.is-open .choices__list[aria-expanded],
.rb-modern-modal .choices.is-open .choices__list--dropdown,
.rb-modern-modal .choices.is-open .choices__list[aria-expanded],
.ann-modern-modal .choices.is-open .choices__list--dropdown,
.ann-modern-modal .choices.is-open .choices__list[aria-expanded],
.tc-modern-modal .choices.is-open .choices__list--dropdown,
.tc-modern-modal .choices.is-open .choices__list[aria-expanded],
.ivr-modern-modal .choices.is-open .choices__list--dropdown,
.ivr-modern-modal .choices.is-open .choices__list[aria-expanded],
.queues-modern-modal .choices.is-open .choices__list--dropdown,
.queues-modern-modal .choices.is-open .choices__list[aria-expanded],
.ssg-modal .choices.is-open .choices__list--dropdown,
.ssg-modal .choices.is-open .choices__list[aria-expanded],
.wholesale-modern-modal .choices.is-open .choices__list--dropdown,
.wholesale-modern-modal .choices.is-open .choices__list[aria-expanded],
.wholesale-carriers-new-modal .choices.is-open .choices__list--dropdown,
.wholesale-carriers-new-modal .choices.is-open .choices__list[aria-expanded],
.choices__list--dropdown[data-portal-modal-dropdown="true"],
.choices__list[aria-expanded][data-portal-modal-dropdown="true"] {
    position: fixed !important;
    z-index: calc(var(--bs-modal-zindex, 1055) + 20) !important;
}

/* Bootstrap dropdown menus inside visible modals/offcanvas — above modal content */
.modal.show .dropdown-menu.show,
.offcanvas.show .dropdown-menu.show {
    z-index: calc(var(--bs-modal-zindex, 1055) + 15) !important;
}

[data-theme-mode="light"] .flatpickr-calendar {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .flatpickr-day {
    color: #172033 !important;
}

[data-theme-mode="light"] .flatpickr-day:hover,
[data-theme-mode="light"] .flatpickr-day:focus {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: transparent !important;
}

[data-theme-mode="light"] .flatpickr-day.selected,
[data-theme-mode="light"] .flatpickr-day.startRange,
[data-theme-mode="light"] .flatpickr-day.endRange {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

[data-theme-mode="light"] .flatpickr-day.today {
    border-color: rgba(99, 102, 241, 0.45) !important;
}

[data-theme-mode="light"] .flatpickr-weekday {
    color: #64748b !important;
}

[data-theme-mode="light"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme-mode="light"] .flatpickr-current-month input.cur-year {
    background: #ffffff !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme-mode="light"] .flatpickr-months .flatpickr-next-month svg {
    fill: #64748b !important;
}

[data-theme-mode="light"] .flatpickr-time input,
[data-theme-mode="light"] .flatpickr-am-pm {
    color: #172033 !important;
}

[data-theme-mode="light"] .dropdown-menu,
[data-theme-mode="light"] .main-header-dropdown {
    background-color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #172033 !important;
    box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.1) !important;
}

[data-theme-mode="light"] .dropdown-menu .dropdown-item,
[data-theme-mode="light"] .main-header-dropdown .dropdown-item {
    color: #172033 !important;
}

[data-theme-mode="light"] .dropdown-menu .dropdown-item:not(.active):hover,
[data-theme-mode="light"] .dropdown-menu .dropdown-item:not(.active):focus,
[data-theme-mode="light"] .main-header-dropdown .dropdown-item:not(.active):hover,
[data-theme-mode="light"] .main-header-dropdown .dropdown-item:not(.active):focus {
    background-color: rgba(99, 102, 241, 0.08) !important;
    color: #4338ca !important;
}

[data-theme-mode="light"] .dropdown-header,
[data-theme-mode="light"] .dropdown-item-text {
    color: #64748b !important;
}

[data-theme-mode="dark"] .dropdown-menu,
[data-theme-mode="dark"] .main-header-dropdown {
    background-color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .dropdown-menu .dropdown-item,
[data-theme-mode="dark"] .main-header-dropdown .dropdown-item {
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .dropdown-menu .dropdown-item:not(.active):hover,
[data-theme-mode="dark"] .dropdown-menu .dropdown-item:not(.active):focus,
[data-theme-mode="dark"] .main-header-dropdown .dropdown-item:not(.active):hover,
[data-theme-mode="dark"] .main-header-dropdown .dropdown-item:not(.active):focus {
    background-color: #2a2a2a !important;
    color: #f6f7fb !important;
}

/* ==========================================================================
   Portal shell surfaces — theme-aware backgrounds (FOUC + toggle sync)
   Do NOT override #sidebar / .app-sidebar / .card here — Xintra --menu-bg /
   --custom-white (≈ #19191c) remain the chrome tokens.
   ========================================================================== */
html[data-theme-mode="light"] body,
html[data-theme-mode="light"] .page,
html[data-theme-mode="light"] .app-content,
html[data-theme-mode="light"] .main-content,
html[data-theme-mode="light"] #htmx-content {
    background-color: var(--default-body-bg-color, #f9fafc);
    color: var(--default-text-color, #172033);
}

html[data-theme-mode="dark"],
html[data-theme-mode="dark"] body,
html[data-theme-mode="dark"] .page,
html[data-theme-mode="dark"] .app-content,
html[data-theme-mode="dark"] .main-content,
html[data-theme-mode="dark"] #htmx-content {
    background-color: #0d0d0d;
    color: var(--default-text-color, #e5e7eb);
}

/* Xintra page loader: disabled by default; never paint --custom-white flash. */
#loader,
[loader="disable"] #loader,
#loader.d-none {
    display: none !important;
}

html[loader="enable"] #loader:not(.d-none) {
    display: flex !important;
}

html[data-theme-mode="dark"] #loader {
    background-color: #0d0d0d !important;
}

html[data-theme-mode="light"] #loader {
    background-color: #f9fafc !important;
}

/*
 * Keep HTMX swap/settle surfaces on theme bg (no transparent→white paint).
 * Must stay scoped to #htmx-content — unscoped .htmx-added also matches the
 * OOB-swapped #sidebar and flashes the side menu to the content shell color.
 */
html[data-theme-mode="dark"] #htmx-content.htmx-swapping,
html[data-theme-mode="dark"] #htmx-content.htmx-settling,
html[data-theme-mode="dark"] #htmx-content.htmx-added {
    background-color: #0d0d0d !important;
    opacity: 1 !important;
    transition: none !important;
}

html[data-theme-mode="light"] #htmx-content.htmx-swapping,
html[data-theme-mode="light"] #htmx-content.htmx-settling,
html[data-theme-mode="light"] #htmx-content.htmx-added {
    background-color: var(--default-body-bg-color, #f9fafc) !important;
}

#sidebar.htmx-added,
#sidebar.htmx-swapping,
#sidebar.htmx-settling,
.app-sidebar.htmx-added,
.app-sidebar.htmx-swapping,
.app-sidebar.htmx-settling {
    background: var(--menu-bg) !important;
    background-color: var(--menu-bg) !important;
    opacity: 1 !important;
    transition: none !important;
}

/*
 * Soft-nav grey flash: Xintra `.placeholder { background: var(--gray-7) }` → #ababba,
 * Bootstrap placeholder-glow dips opacity to 0.2, and prior slate overlays (L≈46) still
 * read as a flash over #0d0d0d. Keep bars on raised panel #161616 (L≈22), no animation.
 */
html[data-theme-mode="dark"] .placeholder,
html[data-theme-mode="dark"] .placeholder-glow .placeholder,
html[data-theme-mode="dark"] .placeholder-wave .placeholder,
html[data-theme-mode="dark"] .ent-page-container .placeholder,
html[data-theme-mode="dark"] .ent-page-container .placeholder-glow .placeholder,
html[data-theme-mode="dark"] .enterprise-dashboard-loading .placeholder,
html[data-theme-mode="dark"] .enterprise-panel-loading .placeholder,
html[data-theme-mode="dark"] .ent-page-container .ent-skeleton-block,
html[data-theme-mode="dark"] .ent-page-container .ent-skeleton-icon,
html[data-theme-mode="dark"] .hst-page-container .hst-skeleton-block,
html[data-theme-mode="dark"] .hst-page-container .hst-skeleton-icon,
html[data-theme-mode="dark"] .ent-skeleton-row,
html[data-theme-mode="dark"] .hst-skeleton-row {
    background-color: #161616 !important;
    opacity: 1 !important;
    animation: none !important;
}

/* ==========================================================================
   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 !important;
    display: inline-block;
    vertical-align: middle;
    z-index: auto;
    /* 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: 995 !important;
    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;
    max-width: min(320px, calc(100vw - 2rem));
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Modifier to align tooltip to the right edge (expand to the left) */
.custom-kb-tooltip-right .custom-kb-tooltip-content {
    left: auto;
    right: 0;
    transform: none;
}

.custom-kb-tooltip-right .custom-kb-tooltip-content::after {
    left: auto;
    right: 12px; /* point towards the center of a typical small action button */
    margin-left: 0;
}

.custom-kb-tooltip-wrapper:hover,
.custom-kb-tooltip-wrapper:focus-within {
    z-index: 995 !important;
}

.custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.table-responsive:has(.custom-kb-tooltip-wrapper),
.card:has(.custom-kb-tooltip-wrapper),
.card-body:has(.custom-kb-tooltip-wrapper),
.modal-content:has(.custom-kb-tooltip-wrapper),
.modal-body:has(.custom-kb-tooltip-wrapper),
.tab-pane:has(.custom-kb-tooltip-wrapper) {
    overflow: visible !important;
}

.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 BACKGROUND tooltips when ANY modal or wholesale drawer is open to prevent bleed-through */
/* Per docs/tooltips.md: only hide on :hover, and re-enable inside modals/drawers */
body.modal-open .custom-kb-tooltip-wrapper,
body:has([class*="wholesale-"][class*="-drawer"].open) .custom-kb-tooltip-wrapper {
    z-index: auto !important;
}

body.modal-open .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
body.modal-open .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
body:has([class*="wholesale-"][class*="-drawer"].open) .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
body:has([class*="wholesale-"][class*="-drawer"].open) .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Re-enable CSS tooltips INSIDE the currently shown modal/drawer only */
body.modal-open .modal.show .custom-kb-tooltip-wrapper,
body.modal-open [class*="wholesale-"][class*="-drawer"].open .custom-kb-tooltip-wrapper,
body:has([class*="wholesale-"][class*="-drawer"].open) [class*="wholesale-"][class*="-drawer"].open .custom-kb-tooltip-wrapper {
    z-index: auto;
}

body.modal-open .modal.show .custom-kb-tooltip-wrapper:hover,
body.modal-open .modal.show .custom-kb-tooltip-wrapper:focus-within,
body.modal-open [class*="wholesale-"][class*="-drawer"].open .custom-kb-tooltip-wrapper:hover,
body.modal-open [class*="wholesale-"][class*="-drawer"].open .custom-kb-tooltip-wrapper:focus-within,
body:has([class*="wholesale-"][class*="-drawer"].open) [class*="wholesale-"][class*="-drawer"].open .custom-kb-tooltip-wrapper:hover,
body:has([class*="wholesale-"][class*="-drawer"].open) [class*="wholesale-"][class*="-drawer"].open .custom-kb-tooltip-wrapper:focus-within {
    z-index: 995 !important;
}

body.modal-open .modal.show .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
body.modal-open .modal.show .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
body.modal-open [class*="wholesale-"][class*="-drawer"].open .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
body.modal-open [class*="wholesale-"][class*="-drawer"].open .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
body:has([class*="wholesale-"][class*="-drawer"].open) [class*="wholesale-"][class*="-drawer"].open .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
body:has([class*="wholesale-"][class*="-drawer"].open) [class*="wholesale-"][class*="-drawer"].open .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Active Bootstrap overlays outrank tooltip hover/focus affordances. */
body:has(.dropdown-menu.show) .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
body:has(.dropdown-menu.show) .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
body:has(.offcanvas.show) .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
body:has(.offcanvas.show) .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Premium select overlay tooltip trigger suppression */
.rg-edit-container .mb-3:has(> select.rg-form-select:focus) > .rg-field-tooltip,
.rg-edit-container .mb-3:has(> .choices.is-open) > .rg-field-tooltip,
.ann-page-container .mb-3:has(> select:focus) > .ann-field-tooltip,
.ann-page-container .mb-3:has(> .choices.is-open) > .ann-field-tooltip,
.rb-edit-container .mb-3:has(> select.rb-form-select:focus) > .rb-field-tooltip,
.rb-edit-container .mb-3:has(> .choices.is-open) > .rb-field-tooltip,
body:has(.tc-page-container select:focus) .tc-floating-tooltip,
body:has(.tc-modern-modal select:focus) .tc-floating-tooltip,
body:has(#tc-create-drawer select:focus) .tc-floating-tooltip,
body:has(#tc-edit-modal select:focus) .tc-floating-tooltip,
body:has(#tc-add-rule-modal select:focus) .tc-floating-tooltip,
body:has(#tc-add-holiday-modal select:focus) .tc-floating-tooltip,
body:has(.tc-page-container .choices.is-open) .tc-floating-tooltip,
body:has(.tc-modern-modal .choices.is-open) .tc-floating-tooltip,
body:has(#tc-create-drawer .choices.is-open) .tc-floating-tooltip,
body:has(#tc-edit-modal .choices.is-open) .tc-floating-tooltip,
body:has(#tc-add-rule-modal .choices.is-open) .tc-floating-tooltip,
body:has(#tc-add-holiday-modal .choices.is-open) .tc-floating-tooltip {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body:has(select.rg-form-select:focus) .rg-floating-tooltip,
body:has(.rg-edit-container .choices.is-open) .rg-floating-tooltip,
body:has(select.rb-form-select:focus) .rb-floating-tooltip,
body:has(.rb-edit-container .choices.is-open) .rb-floating-tooltip,
body:has(.ann-page-container select:focus) .ann-floating-tooltip,
body:has(.ann-page-container .choices.is-open) .ann-floating-tooltip {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* End premium select overlay tooltip trigger suppression */

/* HTMX Compatibility: Ensure tooltips are visible when no modals/drawers are open */
body:not(.modal-open):not(:has([class*="wholesale-"][class*="-drawer"].open)) .custom-kb-tooltip-wrapper {
    visibility: visible;
    opacity: 1;
}

/* Sticky header must cover idle tooltip triggers while page content scrolls beneath it.
   styles.css sets .app-header to z-index 100; legacy wrapper z-index 990/1080 exceeded that. */
.app-header {
    z-index: 100 !important;
}

/* Idle wrappers (including harmful inline z-index) stay under the sticky header */
.custom-kb-tooltip-wrapper:not(:hover):not(:focus-within):not(.rg-tooltip-active):not(.ann-tooltip-active):not(.rb-tooltip-active):not(.tc-tooltip-active):not(.ivr-tooltip-active):not(.hst-tooltip-active):not(.plans-tooltip-active):not(.ent-tooltip-active) {
    z-index: auto !important;
}

/* Porting page: restore high stacking only while the tooltip is active */
.porting-create-page-container .custom-kb-tooltip-wrapper:hover,
.porting-create-page-container .custom-kb-tooltip-wrapper:focus-within {
    z-index: 9998 !important;
}



/* ==========================================================================
   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;
    z-index: 1080;
}

.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: normal;
    overflow-wrap: break-word;
    max-width: min(240px, calc(100vw - 2rem));
    z-index: 1090;
    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: 1091;
    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;
}

.crazyai-uq-tooltip:hover,
.crazyai-uq-tooltip:focus-within {
    z-index: 1100;
}

/* 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; zero template margin-block gap */
[data-nav-layout="vertical"] .app-sidebar.crazytel-compact-sidebar .side-menu__item,
.crazytel-compact-sidebar .side-menu__item {
    padding: 0.32rem 0.75rem !important;
    min-height: auto !important;
    margin-block: 0 !important;
}

/* Compact category headers - tighter section breaks */
.crazytel-compact-sidebar .slide__category {
    padding: 0.3rem 0.75rem 0.05rem !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.45px !important;
    line-height: 1.2 !important;
}

/* First category - no top margin */
.crazytel-compact-sidebar .main-menu > .slide__category:first-child {
    margin-top: 0 !important;
    padding-top: 0.2rem !important;
}

/* Category header sits flush above its first menu row */
.crazytel-compact-sidebar .main-menu > .slide__category + .slide {
    margin-top: 0 !important;
}

/* Compact slide items */
.crazytel-compact-sidebar .slide {
    margin: 0 !important;
    padding: 0 0.25rem !important;
}

/* Compact icons - slightly smaller */
.crazytel-compact-sidebar .side-menu__item > .side-menu__icon,
.crazytel-compact-sidebar .side-menu__item > svg.side-menu__icon {
    width: 1.2rem !important;
    height: 1.2rem !important;
    min-width: 1.2rem !important;
    margin-inline-end: 0.45rem !important;
}

/* Compact labels */
.crazytel-compact-sidebar .side-menu__label {
    font-size: 0.8125rem !important;
    line-height: 1.25 !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.4rem !important;
    margin-top: 0 !important;
}

.crazytel-compact-sidebar .slide-menu.child1 .side-menu__item,
.crazytel-compact-sidebar .slide-menu.child2 .side-menu__item {
    padding: 0.22rem 0.65rem !important;
    font-size: 0.78rem !important;
}

/* Submenu label header - more compact */
.crazytel-compact-sidebar .side-menu__label1 {
    padding: 0.2rem 0.65rem !important;
    font-size: 0.72rem !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
}

/* Compact dropdown angle icons */
.crazytel-compact-sidebar .side-menu__angle {
    font-size: 0.85rem !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.25rem 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;
}

.crazytel-sidebar-partner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    margin-left: auto;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.18);
    color: #8b5cf6;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}

[data-theme-mode="dark"] .crazytel-sidebar-partner-badge {
    background: rgba(139, 92, 246, 0.22);
    color: #c4b5fd;
}

.app-sidebar .side-menu__item {
    display: flex;
    align-items: center;
}

/* ============================================
   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        */
/* ========================================== */

/* ========================================== */
/* CrazyAI Email History Page - Blue Theme    */
/* ========================================== */

/* Flatpickr Calendar Styling - Blue Theme */
.email-history-container ~ .flatpickr-calendar,
body > .flatpickr-calendar.email-history-calendar {
    z-index: 99999 !important;
    background: #000000 !important;
    border-color: #333 !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-months,
body > .flatpickr-calendar.email-history-calendar .flatpickr-months {
    background: #000000 !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-month,
body > .flatpickr-calendar.email-history-calendar .flatpickr-month {
    background: #000000 !important;
    color: #ffffff !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-current-month,
body > .flatpickr-calendar.email-history-calendar .flatpickr-current-month {
    color: #ffffff !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-monthDropdown-months,
body > .flatpickr-calendar.email-history-calendar .flatpickr-monthDropdown-months {
    background: #000000 !important;
    color: #ffffff !important;
}

.email-history-container ~ .flatpickr-calendar .cur-year,
body > .flatpickr-calendar.email-history-calendar .cur-year {
    color: #ffffff !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-prev-month,
.email-history-container ~ .flatpickr-calendar .flatpickr-next-month,
body > .flatpickr-calendar.email-history-calendar .flatpickr-prev-month,
body > .flatpickr-calendar.email-history-calendar .flatpickr-next-month {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-prev-month:hover,
.email-history-container ~ .flatpickr-calendar .flatpickr-next-month:hover,
body > .flatpickr-calendar.email-history-calendar .flatpickr-prev-month:hover,
body > .flatpickr-calendar.email-history-calendar .flatpickr-next-month:hover {
    color: #0d6efd !important;
    fill: #0d6efd !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-prev-month svg,
.email-history-container ~ .flatpickr-calendar .flatpickr-next-month svg,
body > .flatpickr-calendar.email-history-calendar .flatpickr-prev-month svg,
body > .flatpickr-calendar.email-history-calendar .flatpickr-next-month svg {
    fill: #ffffff !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-weekdays,
body > .flatpickr-calendar.email-history-calendar .flatpickr-weekdays {
    background: #000000 !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-weekday,
body > .flatpickr-calendar.email-history-calendar .flatpickr-weekday {
    background: #000000 !important;
    color: #999999 !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-days,
body > .flatpickr-calendar.email-history-calendar .flatpickr-days {
    background: #0a0a0a !important;
    border-color: #333 !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-day,
body > .flatpickr-calendar.email-history-calendar .flatpickr-day {
    color: #ffffff !important;
    border-color: transparent !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-day:hover,
body > .flatpickr-calendar.email-history-calendar .flatpickr-day:hover {
    background: #333333 !important;
    border-color: #333333 !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-day.selected,
.email-history-container ~ .flatpickr-calendar .flatpickr-day.selected:hover,
body > .flatpickr-calendar.email-history-calendar .flatpickr-day.selected,
body > .flatpickr-calendar.email-history-calendar .flatpickr-day.selected:hover {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-day.today,
body > .flatpickr-calendar.email-history-calendar .flatpickr-day.today {
    border-color: #0d6efd !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-day.today:hover,
body > .flatpickr-calendar.email-history-calendar .flatpickr-day.today:hover {
    background: #0d6efd !important;
    color: #ffffff !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-day.prevMonthDay,
.email-history-container ~ .flatpickr-calendar .flatpickr-day.nextMonthDay,
body > .flatpickr-calendar.email-history-calendar .flatpickr-day.prevMonthDay,
body > .flatpickr-calendar.email-history-calendar .flatpickr-day.nextMonthDay {
    color: #666666 !important;
}

.email-history-container ~ .flatpickr-calendar .flatpickr-day.disabled,
body > .flatpickr-calendar.email-history-calendar .flatpickr-day.disabled {
    color: #444444 !important;
}

/* Make sure the alt input (visible one) is clickable */
.email-history-container input.flatpickr-input[readonly] {
    cursor: pointer !important;
    background-color: inherit;
}

/* Quick Select Buttons - Blue Theme */
.email-history-quick-btn {
    background-color: transparent;
    border: 1px solid #0d6efd;
    color: #0d6efd;
    transition: all 0.2s ease;
}

.email-history-quick-btn:hover {
    background-color: rgba(13, 110, 253, 0.1);
    border-color: #0d6efd;
    color: #3d8bfd;
}

.email-history-quick-btn.active,
.email-history-quick-btn:active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .email-history-quick-btn {
    background-color: transparent;
    border-color: #0d6efd;
    color: #3d8bfd;
}

[data-theme-mode="dark"] .email-history-quick-btn:hover {
    background-color: rgba(13, 110, 253, 0.15);
    border-color: #3d8bfd;
    color: #6ea8fe;
}

[data-theme-mode="dark"] .email-history-quick-btn.active,
[data-theme-mode="dark"] .email-history-quick-btn:active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

/* Date picker inputs */
.email-history-date-input,
.email-history-date-input + .flatpickr-input,
.email-history-container .flatpickr-input {
    cursor: pointer !important;
}

.email-history-date-icon {
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-history-date-icon:hover {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

[data-theme-mode="dark"] .email-history-date-icon:hover {
    background-color: rgba(13, 110, 253, 0.2);
    color: #3d8bfd;
}

/* Filter dropdown styling */
.email-history-filter-select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

[data-theme-mode="dark"] .email-history-filter-select:focus {
    background-color: #111111;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Checkbox styling */
.email-history-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.email-history-checkbox:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Stat cards */
.email-history-stat-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.email-history-stat-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

.email-history-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Row hover and selected indicator */
.email-history-row {
    transition: background-color 0.15s ease;
}

.email-history-row:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

.email-history-row.selected {
    background-color: rgba(13, 110, 253, 0.08);
}

/* Table styling */
.email-history-table th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    border-bottom: 1px solid #333 !important;
    padding: 12px 16px;
}

.email-history-table td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #222 !important;
}

[data-theme-mode="dark"] .email-history-table th,
[data-theme-mode="dark"] .email-history-table td {
    border-color: #333 !important;
}

/* Select all checkbox header */
.email-history-select-all-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Preview styling */
.email-history-preview {
    color: #999;
    font-size: 0.85rem;
    white-space: normal;
    word-break: break-word;
}

/* Trigger type badges */
.email-history-badge-callback {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

.email-history-badge-voicemail {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
}

.email-history-badge-missed-call {
    background-color: #fbbf24 !important;
    color: #000000 !important;
}

.email-history-badge-call-end {
    background-color: #22c55e !important;
    color: #ffffff !important;
}

.email-history-badge-after-hours {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

.email-history-badge-default {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

/* Status badges */
.email-history-badge-sent {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

.email-history-badge-failed {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .email-history-table th:nth-child(5),
    .email-history-table td:nth-child(5) {
        display: none;
    }
}

/* Delete Modal Dark Theme */
#email-history-delete-modal .modal-content {
    background-color: #1a1a1a;
    border: 1px solid #333;
}

#email-history-delete-modal .modal-header {
    background-color: #1a1a1a;
    border-bottom: none;
}

#email-history-delete-modal .modal-title {
    color: #ffffff;
}

#email-history-delete-modal .modal-body {
    background-color: #1a1a1a;
    color: #ffffff;
}

#email-history-delete-modal .modal-body p {
    color: #ffffff;
}

#email-history-delete-modal .modal-body .text-warning {
    color: #ffc107 !important;
}

#email-history-delete-modal .modal-footer {
    background-color: #1a1a1a;
    border-top: none;
}

#email-history-delete-modal .btn-close {
    filter: invert(1);
}

/* ========================================== */
/* Email History Detail Modal - Blue Theme    */
/* ========================================== */

/* Modal structure */
.email-history-modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background-color: #1a1a1a;
}

.email-history-modal-header {
    background: #000000;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #333;
}

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

.email-history-modal-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
}

.email-history-modal-close {
    filter: invert(1);
    opacity: 0.7;
}

.email-history-modal-close:hover {
    opacity: 1;
}

.email-history-modal-body {
    background: #1a1a1a;
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.email-history-modal-body::-webkit-scrollbar {
    width: 8px;
}

.email-history-modal-body::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

.email-history-modal-body::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
    border: 2px solid #1a1a1a;
}

.email-history-modal-body::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.email-history-modal-footer {
    border-top: 1px solid #333;
    padding: 0.75rem 1rem;
    background-color: #1a1a1a;
}

/* Info Section */
.email-history-info-section {
    background: #111111;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #333;
}

.email-history-info-item {
    padding: 0.25rem 0.5rem;
}

.email-history-info-item strong {
    color: #ffffff;
}

.email-history-info-item small {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Status section */
.email-history-status-section {
    background: #0a0a0a;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #222;
}

/* Trigger type badge */
.email-history-trigger-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0.1) 100%);
    color: #60a5fa;
    border: 1px solid rgba(13, 110, 253, 0.3);
}

.email-history-trigger-badge.callback {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(220, 53, 69, 0.1) 100%);
    color: #f87171;
    border-color: rgba(220, 53, 69, 0.3);
}

.email-history-trigger-badge.voicemail {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

.email-history-trigger-badge.missed-call {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

.email-history-trigger-badge.call-end {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

/* Data items */
.email-history-data-item {
    padding: 0.5rem 0.75rem;
    background: #0a0a0a;
    border-radius: 6px;
    border: 1px solid #222;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.email-history-data-item strong {
    color: #ffffff;
}

/* Empty state */
.email-history-empty-state {
    padding: 1.5rem 1rem;
    text-align: center;
}

.email-history-empty-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.05));
    border-radius: 50%;
    margin-bottom: 0.75rem;
}

.email-history-empty-icon-wrapper i {
    font-size: 1.75rem;
    color: #0d6efd;
}

.email-history-empty-title {
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.email-history-empty-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* Body scroll lock when modal is open */
body.email-history-modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* Fullscreen Transcript Overlay */
.email-history-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    background: rgba(0, 0, 0, 0.98);
    z-index: 999999;
    transform: none;
    margin: 0;
    padding: 0;
}

.email-history-fullscreen-overlay[style*="display: block"],
.email-history-fullscreen-overlay.is-visible {
    display: flex !important;
    flex-direction: column !important;
}

.email-history-fullscreen-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1rem 2rem;
    flex: 1 1 auto;
    box-sizing: border-box;
}

.email-history-fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #1a1a1a;
    border-radius: 12px 12px 0 0;
    border: 1px solid #333;
    border-bottom: none;
    flex-shrink: 0;
}

.email-history-fullscreen-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: #111111;
    border: 1px solid #333;
    border-radius: 0 0 12px 12px;
    padding: 1.5rem;
}

.email-history-fullscreen-body .crazyai-modern-chat-container {
    min-height: calc(100vh - 150px);
    height: auto;
    max-height: none;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1rem;
}

.email-history-fullscreen-body::-webkit-scrollbar {
    width: 10px;
}

.email-history-fullscreen-body::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 5px;
}

.email-history-fullscreen-body::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 5px;
    border: 2px solid #1a1a1a;
}

.email-history-fullscreen-body::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Expand button styling */
#email-history-expand-transcript-btn {
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
    border-color: rgba(255,255,255,0.4);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

#email-history-expand-transcript-btn:hover {
    background-color: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.6);
    color: #ffffff;
}

/* Responsive modal adjustments */
@media (max-width: 991.98px) {
    .email-history-modal-body {
        max-height: calc(100vh - 200px);
    }
}

@media (max-width: 767.98px) {
    .email-history-modal-body {
        max-height: calc(100vh - 180px);
    }
    
    .email-history-info-section .row {
        gap: 0.5rem;
    }
    
    #email-history-detail-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
}

@media (max-width: 575.98px) {
    .email-history-modal-body {
        max-height: calc(100vh - 160px);
        padding: 1rem;
    }
    
    #email-history-detail-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }
    
    #email-history-detail-modal .modal-content {
        border-radius: 0;
        height: 100%;
    }
    
    .email-history-modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .email-history-modal-footer .btn {
        flex: 1 1 auto;
        min-width: 100px;
    }
}

/* Email Detail Info Cards */
.email-history-detail-info-card {
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.email-history-detail-info-card:hover {
    border-color: #0d6efd;
}

.email-history-detail-info-label {
    color: #999;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.email-history-detail-info-value {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Email Detail Transcript Section */
.email-history-detail-transcript-section {
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 8px;
    margin-top: 1rem;
}

.email-history-detail-transcript-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #333;
}

.email-history-detail-transcript-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.email-history-detail-transcript-title i {
    color: #0d6efd;
}

.email-history-detail-transcript-body {
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.email-history-detail-transcript-body::-webkit-scrollbar {
    width: 6px;
}

.email-history-detail-transcript-body::-webkit-scrollbar-track {
    background: transparent;
}

.email-history-detail-transcript-body::-webkit-scrollbar-thumb {
    background: rgba(13, 110, 253, 0.3);
    border-radius: 3px;
}

.email-history-detail-transcript-body::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 110, 253, 0.5);
}

/* Email Detail Callback Request Section */
.email-history-detail-callback-section {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(10, 88, 202, 0.05) 100%);
    border: 1px solid rgba(13, 110, 253, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.email-history-detail-callback-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.email-history-detail-callback-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
}

.email-history-detail-callback-title {
    color: #0d6efd;
    font-weight: 600;
    font-size: 0.9rem;
}

.email-history-detail-callback-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.email-history-detail-callback-item {
    flex: 1 1 200px;
}

.email-history-detail-callback-label {
    color: #999;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.email-history-detail-callback-value {
    color: #ffffff;
    font-weight: 500;
}

/* Email Detail Status Badges */
.email-history-detail-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.email-history-detail-badge-sent {
    background-color: #28a745;
    color: #ffffff;
}

.email-history-detail-badge-failed {
    background-color: #dc3545;
    color: #ffffff;
}

.email-history-detail-badge-callback {
    background-color: #dc3545;
    color: #ffffff;
}

.email-history-detail-badge-voicemail {
    background-color: #8b5cf6;
    color: #ffffff;
}

.email-history-detail-badge-missed-call {
    background-color: #fbbf24;
    color: #000000;
}

/* Email Detail Loading State */
.email-history-detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #999;
}

.email-history-detail-loading .spinner-border {
    color: #0d6efd;
}

/* Email Detail Error State */
.email-history-detail-error {
    text-align: center;
    padding: 2rem;
}

.email-history-detail-error i {
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

/* Email Detail Empty Transcript */
.email-history-detail-empty-transcript {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #666;
}

.email-history-detail-empty-transcript i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

/* ========================================== */
/* End Email History Styles                   */
/* ==========================================  */


/* ========================================================================= */
/* SMS Logs — Sent / Received / Troubleshooting pages                         */
/* Shared styles for: sms/logs-sent.php, sms/logs-received.php,               */
/*                    sms/logs-errors.php + drivers from assets/js/sms-logs.js*/
/* All classes prefixed with .sms-logs-* to avoid collisions.                 */
/* ========================================================================= */

.sms-logs-container {
    padding: 1.25rem;
}

.sms-logs-did-wrap {
    max-width: 420px;
}

.sms-logs-card {
    background: var(--bs-card-bg, #fff);
    border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0, 0, 0, .125));
    border-radius: var(--bs-card-border-radius, .375rem);
    transition: box-shadow .2s ease;
}

[data-theme-mode="dark"] .sms-logs-card {
    background: #1a1a1a;
    border-color: #2d2d2d;
    color: #e0e0e0;
}

.sms-logs-table-wrap {
    overflow-x: auto;
}

.sms-logs-table {
    width: 100%;
    border-collapse: collapse;
}

.sms-logs-bulk-toolbar {
    min-height: 2rem;
}

.sms-logs-select-cell {
    width: 3rem;
}

.sms-logs-table .sms-logs-select-cell {
    padding-left: .75rem;
    padding-right: .75rem;
}

.sms-logs-table th {
    background-color: var(--bs-gray-100);
    padding: .75rem 1rem;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-gray-600);
    border-bottom: 2px solid var(--bs-border-color);
    text-align: left;
    white-space: nowrap;
}

[data-theme-mode="dark"] .sms-logs-table th {
    background-color: #2d2d2d;
    color: #adb5bd;
    border-color: #404040;
}

.sms-logs-table td {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: middle;
}

[data-theme-mode="dark"] .sms-logs-table td {
    border-color: #2d2d2d;
}

.sms-logs-table tbody tr {
    transition: background-color .15s ease;
    cursor: pointer;
    outline-offset: -2px;
}

.sms-logs-table tbody tr:hover {
    background-color: var(--bs-gray-100);
}

.sms-logs-table tbody tr:focus-visible {
    outline: 2px solid var(--bs-primary, #0ea5e9);
    background-color: rgba(14, 165, 233, .07);
}

.sms-logs-table tbody tr.sms-logs-row-selected {
    background-color: rgba(13, 110, 253, .08);
}

[data-theme-mode="dark"] .sms-logs-table tbody tr:hover {
    background-color: #262626;
}

[data-theme-mode="dark"] .sms-logs-table tbody tr:focus-visible {
    background-color: rgba(14, 165, 233, .15);
}

[data-theme-mode="dark"] .sms-logs-table tbody tr.sms-logs-row-selected {
    background-color: rgba(13, 110, 253, .18);
}

/* Message column layout */
.sms-logs-message-cell {
    max-width: 420px;
}

.sms-logs-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Inline error line under the snippet for failed outbounds */
.sms-logs-error-line {
    font-size: .75rem;
    color: var(--bs-danger, #ef4444);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .4rem;
    background: rgba(239, 68, 68, .08);
    border-radius: .25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme-mode="dark"] .sms-logs-error-line {
    background: rgba(239, 68, 68, .15);
}

/* Unread dot for inbound messages */
.sms-logs-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-primary, #0ea5e9);
    margin-right: .4rem;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .18);
}

.sms-logs-email-reply-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0ea5e9;
    margin-left: .35rem;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .18);
}

/* Contact name badge (phone column) */
.sms-logs-name-badge {
    background: var(--bs-gray-100, #f5f5f5);
    color: var(--bs-gray-800, #343a40);
    border: 1px solid var(--bs-border-color, #dee2e6);
    font-weight: 500;
    font-size: .72rem;
    padding: .2rem .45rem;
}

[data-theme-mode="dark"] .sms-logs-name-badge {
    background: #2d2d2d;
    color: #e0e0e0;
    border-color: #404040;
}

/* Status badges */
.sms-logs-badge {
    display: inline-block;
    padding: .28rem .55rem;
    border-radius: .3rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1;
}

.sms-logs-badge-sent      { background: rgba(14, 165, 233, .12); color: #0ea5e9; }
.sms-logs-badge-delivered { background: rgba(16, 185, 129, .12); color: #10b981; }
.sms-logs-badge-failed    { background: rgba(239,  68,  68, .12); color: #ef4444; }
.sms-logs-badge-queued    { background: rgba(245, 158,  11, .12); color: #f59e0b; }
.sms-logs-badge-received  { background: rgba(139,  92, 246, .12); color: #8b5cf6; }

/* Copied confirmation flash */
.sms-logs-copied {
    border-color: var(--bs-success, #10b981) !important;
    color: var(--bs-success, #10b981) !important;
}

/* -------------------------- Drawer ------------------------------- */

.sms-logs-drawer {
    width: 560px;
    max-width: 100vw;
}

@media (max-width: 768px) {
    .sms-logs-drawer {
        width: 100%;
    }
}

.sms-logs-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.sms-logs-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

[data-theme-mode="dark"] .sms-logs-section {
    border-color: #2d2d2d;
}

.sms-logs-section-title {
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-gray-600, #6c757d);
    font-size: .75rem;
    letter-spacing: .05em;
    margin-bottom: .85rem;
}

.sms-logs-field-label {
    color: var(--bs-gray-600, #6c757d);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .15rem;
}

.sms-logs-field-value {
    font-weight: 500;
    font-size: .9rem;
    word-break: break-word;
}

.sms-logs-body-wrap {
    margin-top: .75rem;
}

.sms-logs-body-text {
    background: var(--bs-gray-100, #f8f9fa);
    padding: 2rem 1rem 1rem;
    border-radius: .375rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .8125rem;
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme-mode="dark"] .sms-logs-body-text {
    background: #111;
    border-color: #2d2d2d;
    color: #e0e0e0;
}

/* Stepper */
.sms-logs-stepper {
    position: relative;
    padding-left: 20px;
}

.sms-logs-stepper::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: var(--bs-border-color);
}

[data-theme-mode="dark"] .sms-logs-stepper::before {
    background: #404040;
}

.sms-logs-step {
    position: relative;
    margin-bottom: 1.25rem;
}

.sms-logs-step:last-child {
    margin-bottom: 0;
}

.sms-logs-step-indicator {
    position: absolute;
    left: -20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-gray-400, #ced4da);
    top: 5px;
    border: 2px solid var(--bs-card-bg, #fff);
}

[data-theme-mode="dark"] .sms-logs-step-indicator {
    background: #6c757d;
    border-color: #1a1a1a;
}

.sms-logs-step.active .sms-logs-step-indicator {
    background: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .2);
}

.sms-logs-step.failed .sms-logs-step-indicator {
    background: #ef4444;
}

.sms-logs-step.success .sms-logs-step-indicator {
    background: #10b981;
}

.sms-logs-step-content {
    padding-left: 10px;
}

.sms-logs-step-title {
    font-weight: 600;
    margin-bottom: .15rem;
    display: flex;
    align-items: center;
    gap: .15rem;
}

.sms-logs-step-time {
    font-size: .72rem;
    color: var(--bs-gray-500, #adb5bd);
}

.sms-logs-step-detail {
    font-size: .8125rem;
    color: var(--bs-gray-700, #495057);
    margin-top: .25rem;
    padding: .4rem .5rem;
    background: var(--bs-gray-100, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .25rem;
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme-mode="dark"] .sms-logs-step-detail {
    background: #111;
    color: #adb5bd;
    border-color: #2d2d2d;
}

/* Forward attempts */
.sms-logs-fwd-card {
    overflow: hidden;
}

.sms-logs-fwd-kv {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
    padding: .15rem 0;
    border-bottom: 1px dashed var(--bs-border-color, #e9ecef);
    flex-wrap: wrap;
}

.sms-logs-fwd-kv:last-of-type {
    border-bottom: 0;
}

[data-theme-mode="dark"] .sms-logs-fwd-kv {
    border-color: #2d2d2d;
}

.sms-logs-fwd-k {
    color: var(--bs-gray-600, #6c757d);
}

.sms-logs-fwd-v {
    font-weight: 500;
    word-break: break-all;
    text-align: right;
}

.sms-logs-fwd-excerpt summary {
    cursor: pointer;
    user-select: none;
}

.sms-logs-code-block {
    background: var(--bs-gray-100, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .25rem;
    padding: .5rem .65rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .75rem;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme-mode="dark"] .sms-logs-code-block {
    background: #111;
    color: #adb5bd;
    border-color: #2d2d2d;
}

/* Technical metadata */
.sms-logs-metadata {
    background: var(--bs-gray-100, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    padding: .6rem .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .75rem;
}

[data-theme-mode="dark"] .sms-logs-metadata {
    background: #111;
    color: #e0e0e0;
    border-color: #2d2d2d;
}

.sms-logs-meta-row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .15rem 0;
    flex-wrap: wrap;
}

.sms-logs-meta-k {
    color: var(--bs-gray-600, #6c757d);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .7rem;
}

.sms-logs-meta-v {
    font-weight: 500;
    word-break: break-all;
    text-align: right;
}

/* Delivery lifecycle modal */
.sms-logs-lifecycle-modal {
    --sms-logs-lifecycle-ok: #10b981;
    --sms-logs-lifecycle-info: #0ea5e9;
    --sms-logs-lifecycle-warning: #f59e0b;
    --sms-logs-lifecycle-danger: #ef4444;
    --sms-logs-lifecycle-dark: #1a1a1a;
    --sms-logs-lifecycle-darker: #0d0d0d;
    --sms-logs-lifecycle-border: #333;
    --sms-logs-lifecycle-text-muted: #6c757d;
}

.sms-logs-lifecycle-modal .modal-content {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .9rem;
    overflow: hidden;
    box-shadow: 0 1.1rem 2.6rem rgba(0, 0, 0, .28);
}

.sms-logs-lifecycle-modal .spinner-border.text-primary {
    color: var(--sms-logs-lifecycle-info) !important;
}

.sms-logs-lifecycle-modal .sms-logs-badge-sent,
.sms-logs-lifecycle-modal .sms-logs-badge-queued,
.sms-logs-lifecycle-modal .sms-logs-badge-received {
    background: rgba(14, 165, 233, .12);
    color: #0369a1;
}

.sms-logs-lifecycle-modal .sms-logs-badge-delivered {
    background: rgba(16, 185, 129, .12);
    color: #047857;
}

.sms-logs-lifecycle-modal .sms-logs-badge-failed {
    background: rgba(220, 53, 69, .14);
    color: #dc3545;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-modal .sms-logs-badge-sent,
[data-theme-mode="dark"] .sms-logs-lifecycle-modal .sms-logs-badge-queued,
[data-theme-mode="dark"] .sms-logs-lifecycle-modal .sms-logs-badge-received {
    color: #38bdf8;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-modal .sms-logs-badge-delivered {
    color: #34d399;
}

.sms-logs-lifecycle-modal .modal-header {
    background: var(--bs-card-bg, #fff);
}

.sms-logs-lifecycle-modal .modal-body {
    background: var(--bs-body-bg, #fff);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-modal .modal-content {
    background: var(--sms-logs-lifecycle-dark);
    border-color: var(--sms-logs-lifecycle-border);
    color: #ffffff;
    --sms-logs-lifecycle-text-muted: #aeb7c4;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-modal .modal-header {
    background: var(--sms-logs-lifecycle-darker);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-modal .modal-body {
    background: var(--sms-logs-lifecycle-dark);
}

.sms-logs-lifecycle-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-hero {
    border-color: #2d2d2d;
}

.sms-logs-lifecycle-eyebrow {
    color: var(--sms-logs-lifecycle-text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-modal .sms-logs-section-title {
    color: #b7c0cc;
}

.sms-logs-lifecycle-route {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .2rem;
    color: var(--bs-heading-color, #212529);
    font-size: clamp(1rem, 2vw, 1.28rem);
    font-weight: 800;
    word-break: break-word;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-route {
    color: #f8f9fa;
}

.sms-logs-lifecycle-summary {
    max-width: 56rem;
    margin: .45rem 0 0;
    color: var(--sms-logs-lifecycle-text-muted);
    font-size: .85rem;
}

.sms-logs-lifecycle-terminal {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    padding: .45rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sms-logs-lifecycle-terminal.is-terminal {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.sms-logs-lifecycle-terminal.is-live {
    color: #0369a1;
    background: rgba(14, 165, 233, .12);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-terminal.is-terminal {
    color: #34d399;
    background: rgba(16, 185, 129, .14);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-terminal.is-live {
    color: #38bdf8;
    background: rgba(14, 165, 233, .14);
}

.sms-logs-lifecycle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .75fr);
    gap: 1.25rem;
    align-items: start;
}

.sms-logs-lifecycle-main,
.sms-logs-lifecycle-side {
    min-width: 0;
}

.sms-logs-lifecycle-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.sms-logs-lifecycle-stats .sms-logs-section-title {
    grid-column: 1 / -1;
    margin-bottom: .1rem;
}

.sms-logs-lifecycle-stat {
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .75rem;
    background: var(--bs-card-bg, #fff);
}

.sms-logs-lifecycle-stat i {
    color: var(--sms-logs-lifecycle-info);
    font-size: 1.05rem;
}

.sms-logs-lifecycle-stat span {
    display: block;
    margin-top: .2rem;
    color: var(--sms-logs-lifecycle-text-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sms-logs-lifecycle-stat strong {
    display: block;
    margin-top: .1rem;
    overflow: hidden;
    color: var(--bs-heading-color, #212529);
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-stat {
    background: #101214;
    border-color: var(--sms-logs-lifecycle-border);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-stat strong {
    color: #f8f9fa;
}

.sms-logs-lifecycle-billing {
    font-size: .85rem;
}

.sms-logs-lifecycle-billing.is-posted {
    color: #047857;
}

.sms-logs-lifecycle-billing.is-pending {
    color: #0369a1;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-billing.is-posted {
    color: #34d399;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-billing.is-pending {
    color: #38bdf8;
}

.sms-logs-lifecycle-timeline {
    position: relative;
    display: grid;
    gap: .75rem;
    padding-left: 1.15rem;
}

.sms-logs-lifecycle-timeline::before {
    content: '';
    position: absolute;
    top: .65rem;
    bottom: .65rem;
    left: .34rem;
    width: 2px;
    border-radius: 999px;
    background: var(--bs-border-color, #dee2e6);
}

.sms-logs-lifecycle-step {
    position: relative;
}

.sms-logs-lifecycle-step-marker {
    position: absolute;
    top: .8rem;
    left: -1.1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--bs-body-bg, #fff);
    border-radius: 50%;
    color: #fff;
    font-size: .72rem;
    background: var(--sms-logs-lifecycle-info);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .18);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-step-marker {
    border-color: var(--sms-logs-lifecycle-dark);
}

.sms-logs-lifecycle-step.is-complete .sms-logs-lifecycle-step-marker {
    background: var(--sms-logs-lifecycle-ok);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
}

.sms-logs-lifecycle-step.is-warning .sms-logs-lifecycle-step-marker {
    background: var(--sms-logs-lifecycle-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

.sms-logs-lifecycle-step.is-failed .sms-logs-lifecycle-step-marker {
    background: var(--sms-logs-lifecycle-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .13);
}

.sms-logs-lifecycle-step-card {
    padding: .85rem .95rem;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .88);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-step-card {
    background: #101214;
    border-color: var(--sms-logs-lifecycle-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.sms-logs-lifecycle-step-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.sms-logs-lifecycle-step-title {
    color: var(--bs-heading-color, #212529);
    font-weight: 800;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-step-title {
    color: #f8f9fa;
}

.sms-logs-lifecycle-step-time {
    color: var(--sms-logs-lifecycle-text-muted);
    font-size: .75rem;
}

.sms-logs-lifecycle-step-index {
    color: #8d96a3;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.sms-logs-lifecycle-step-detail {
    margin-top: .55rem;
    color: var(--bs-body-color, #343a40);
    font-size: .83rem;
    line-height: 1.5;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-step-detail {
    color: #e0e0e0;
}

.sms-logs-lifecycle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .65rem;
}

.sms-logs-lifecycle-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .25rem .45rem;
    border: 1px solid rgba(108, 117, 125, .22);
    border-radius: 999px;
    background: rgba(33, 37, 41, .035);
    color: var(--bs-body-color, #343a40);
    font-size: .72rem;
    overflow-wrap: anywhere;
}

.sms-logs-lifecycle-chip span {
    color: var(--sms-logs-lifecycle-text-muted);
    font-weight: 800;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-chip {
    background: rgba(14, 165, 233, .08);
    border-color: rgba(56, 189, 248, .24);
    color: #e7edf5;
}

.sms-logs-lifecycle-forwarding {
    margin-top: 1rem;
}

.sms-logs-lifecycle-related {
    margin-top: 1rem;
}

.sms-logs-lifecycle-forward-route {
    padding: .7rem;
    border: 1px solid rgba(108, 117, 125, .22);
    border-radius: .7rem;
    background: rgba(14, 165, 233, .05);
}

.sms-logs-lifecycle-related-card {
    padding: .7rem;
    border: 1px solid rgba(16, 185, 129, .22);
    border-radius: .7rem;
    background: rgba(16, 185, 129, .05);
}

.sms-logs-lifecycle-forward-route + .sms-logs-lifecycle-forward-route,
.sms-logs-lifecycle-related-card + .sms-logs-lifecycle-related-card {
    margin-top: .6rem;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-forward-route {
    background: rgba(14, 165, 233, .08);
    border-color: rgba(56, 189, 248, .2);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-related-card {
    background: rgba(16, 185, 129, .08);
    border-color: rgba(52, 211, 153, .22);
}

.sms-logs-lifecycle-forward-head,
.sms-logs-lifecycle-related-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
    color: var(--bs-heading-color, #212529);
    font-size: .82rem;
    font-weight: 800;
}

.sms-logs-lifecycle-forward-head span,
.sms-logs-lifecycle-related-head span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.sms-logs-lifecycle-forward-head strong,
.sms-logs-lifecycle-related-head strong {
    flex-shrink: 0;
    color: var(--sms-logs-lifecycle-text-muted);
    font-size: .72rem;
    text-align: right;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-forward-head,
[data-theme-mode="dark"] .sms-logs-lifecycle-related-head {
    color: #eef3f8;
}

.sms-logs-lifecycle-forward-detail,
.sms-logs-lifecycle-related-detail {
    margin-top: .35rem;
    color: var(--sms-logs-lifecycle-text-muted);
    font-size: .76rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sms-logs-lifecycle-related-line {
    display: grid;
    grid-template-columns: minmax(5.5rem, .6fr) minmax(0, 1fr);
    gap: .5rem;
    padding-top: .2rem;
}

.sms-logs-lifecycle-related-line span {
    color: var(--sms-logs-lifecycle-text-muted);
    font-weight: 800;
}

.sms-logs-lifecycle-related-line strong {
    color: var(--bs-heading-color, #212529);
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-related-line strong {
    color: #eef3f8;
}

.sms-logs-lifecycle-step-uuid,
.sms-logs-lifecycle-meta {
    margin-top: .65rem;
    padding: .55rem .65rem;
    border-radius: .6rem;
    background: rgba(33, 37, 41, .04);
    color: var(--bs-secondary-color, #6c757d);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .72rem;
    word-break: break-all;
}

.sms-logs-lifecycle-meta {
    margin-top: 0;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-step-uuid,
[data-theme-mode="dark"] .sms-logs-lifecycle-meta {
    background: #101214;
    color: #d5dbe4;
    border: 1px solid var(--sms-logs-lifecycle-border);
}

.sms-logs-lifecycle-meta .sms-logs-meta-row {
    display: grid;
    grid-template-columns: minmax(7rem, .55fr) minmax(0, 1fr);
    align-items: start;
}

.sms-logs-lifecycle-meta .sms-logs-meta-v {
    min-width: 0;
    text-align: right;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-meta .sms-logs-meta-k {
    color: var(--sms-logs-lifecycle-text-muted);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-meta .sms-logs-meta-v {
    color: #eef3f8;
}

.sms-logs-lifecycle-timing {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .45rem;
}

.sms-logs-lifecycle-timing span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .18rem .42rem;
    border-radius: 999px;
    background: rgba(14, 165, 233, .1);
    color: #0369a1;
    font-size: .72rem;
    font-weight: 700;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-timing span {
    color: #38bdf8;
    background: rgba(14, 165, 233, .12);
}

.sms-logs-lifecycle-raw-detail {
    margin-top: .55rem;
    padding: .55rem .65rem;
    border-left: 3px solid rgba(14, 165, 233, .72);
    border-radius: .45rem;
    background: rgba(14, 165, 233, .08);
    color: var(--bs-body-color, #343a40);
    font-size: .8rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-raw-detail {
    color: #edf4fb;
    background: rgba(14, 165, 233, .12);
}

.sms-logs-lifecycle-json-detail {
    margin-top: .6rem;
    border: 1px solid rgba(108, 117, 125, .28);
    border-radius: .65rem;
    overflow: hidden;
}

.sms-logs-lifecycle-json-detail summary {
    cursor: pointer;
    padding: .5rem .65rem;
    color: var(--sms-logs-lifecycle-text-muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sms-logs-lifecycle-json-detail pre {
    margin: 0;
    max-height: 13rem;
    padding: .7rem;
    background: #0d0d0d;
    color: #f8f9fa;
    font-size: .72rem;
    line-height: 1.45;
    overflow: auto;
}

.sms-logs-lifecycle-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    margin-top: .65rem;
}

.sms-logs-lifecycle-field {
    min-width: 0;
    padding: .48rem .58rem;
    border: 1px solid rgba(108, 117, 125, .24);
    border-radius: .55rem;
    background: rgba(33, 37, 41, .035);
}

[data-theme-mode="dark"] .sms-logs-lifecycle-field {
    background: #15181b;
    border-color: var(--sms-logs-lifecycle-border);
}

.sms-logs-lifecycle-field span {
    display: block;
    color: var(--sms-logs-lifecycle-text-muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.sms-logs-lifecycle-field strong {
    display: block;
    margin-top: .12rem;
    color: var(--bs-heading-color, #212529);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .73rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

[data-theme-mode="dark"] .sms-logs-lifecycle-field strong {
    color: #e0e0e0;
}

@media (max-width: 768px) {
    .sms-logs-lifecycle-hero {
        flex-direction: column;
    }

    .sms-logs-lifecycle-grid {
        grid-template-columns: 1fr;
    }

    .sms-logs-lifecycle-field-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .sms-logs-lifecycle-stats {
        grid-template-columns: 1fr;
    }
}

/* ========================================== */
/* End SMS Logs Styles                        */
/* ========================================== */

/* ==========================================================================
   SMS Page Banners (Unified Info Design)
   ========================================================================== */
.sms-page-banner {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(14, 165, 233, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 0.75rem;
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    max-width: 800px;
}
.sms-page-banner .banner-icon {
    width: 38px; height: 38px;
    min-width: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #0ea5e9);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.35);
}
.sms-page-banner .banner-title {
    font-weight: 600;
    color: var(--bs-heading-color);
    margin: 0;
    font-size: 0.95rem;
}
.sms-page-banner .banner-sub {
    margin: 0;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}
[data-theme-mode="dark"] .sms-page-banner {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(14, 165, 233, 0.10));
    border-color: #2a2a4a;
}
[data-theme-mode="dark"] .sms-page-banner .banner-title {
    color: #f3f4f6;
}
[data-theme-mode="dark"] .sms-page-banner .banner-sub {
    color: #9ca3af;
}
[data-theme-mode="dark"] .sms-page-banner .banner-sub strong {
    color: #e2e8f0;
}


/* CrazyPBX Extensions management */
.crazypbx-extensions-page-container {
    --cpe-card: rgba(255, 255, 255, 0.94);
    --cpe-card-strong: #ffffff;
    --cpe-border: rgba(15, 23, 42, 0.1);
    --cpe-text: #172033;
    --cpe-muted: #64748b;
    --cpe-red: #f43f5e;
    --cpe-cyan: #06b6d4;
    --cpe-green: #10b981;
    color: var(--cpe-text);
    padding: 0.65rem 0 1.25rem;
}

.crazypbx-extensions-card,
.crazypbx-extensions-modal-panel {
    background: var(--cpe-card);
    border: 1px solid var(--cpe-border);
    border-radius: 1.15rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.crazypbx-extensions-modal-panel {
    --cpe-card: rgba(255, 255, 255, 0.94);
    --cpe-card-strong: #ffffff;
    --cpe-border: rgba(15, 23, 42, 0.1);
    --cpe-text: #172033;
    --cpe-muted: #64748b;
    --cpe-red: #f43f5e;
    --cpe-cyan: #06b6d4;
    --cpe-green: #10b981;
}

.crazypbx-extensions-hero {
    align-items: center;
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 0.75rem;
    padding: 1.25rem 1.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.2);
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

[data-theme-mode="dark"] .crazypbx-extensions-hero {
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.crazypbx-extensions-hero-bg-icon {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    font-size: 8rem;
    opacity: 0.1;
    pointer-events: none;
}

.crazypbx-extensions-hero-copy,
.crazypbx-extensions-hero-actions {
    position: relative;
    z-index: 1;
}

.crazypbx-extensions-kicker,
.crazypbx-extensions-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 800;
    gap: 0.35rem;
}

.crazypbx-extensions-kicker {
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 0.24rem 0.52rem;
    text-transform: uppercase;
}

.crazypbx-extensions-title {
    font-size: clamp(1.05rem, 2.1vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0.35rem 0 0.18rem;
}

.crazypbx-extensions-subtitle {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0;
    max-width: 38rem;
}

.crazypbx-extensions-hero-actions,
.crazypbx-extensions-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.crazypbx-extensions-btn,
.crazypbx-extensions-icon-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.85rem;
    display: inline-flex;
    font-weight: 800;
    gap: 0.4rem;
    justify-content: center;
}

.crazypbx-extensions-btn {
    border-radius: 0.7rem;
    font-size: 0.72rem;
    min-height: 2rem;
    padding: 0.42rem 0.72rem;
}

.crazypbx-extensions-btn-primary {
    background: #ffffff;
    color: #d9254a;
}

.crazypbx-extensions-btn-success {
    background: #22c55e;
    color: #ffffff;
}

.crazypbx-extensions-btn-success:hover {
    background: #16a34a;
    color: #ffffff;
}

.crazypbx-extensions-btn-danger {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #ffffff;
}

.crazypbx-extensions-btn-danger:hover {
    background: linear-gradient(135deg, #fb7185, #f43f5e);
    color: #ffffff;
}

.crazypbx-extensions-btn-ghost {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

[data-theme-mode="light"] .crazypbx-extensions-btn-ghost {
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    border-color: rgba(59, 130, 246, 0.45);
    color: #1d4ed8;
}

[data-theme-mode="light"] .crazypbx-extensions-btn-ghost:hover,
[data-theme-mode="light"] .crazypbx-extensions-btn-ghost:focus-visible {
    background: linear-gradient(135deg, #60a5fa, #8b5cf6);
    border-color: rgba(124, 58, 237, 0.7);
    color: #ffffff;
}

.crazypbx-extensions-stats,
.crazypbx-extensions-toolbar,
.crazypbx-extensions-form-grid,
.crazypbx-extensions-modal-grid,
.crazypbx-extensions-switches,
.crazypbx-extensions-permission-grid {
    display: grid;
    gap: 0.8rem;
}

.crazypbx-extensions-stats {
    gap: 0.55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0.55rem 0 0.85rem;
}

.crazypbx-extensions-stats .crazypbx-extensions-card {
    align-items: center;
    border-radius: 0.85rem;
    display: grid;
    gap: 0.38rem 0.65rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: initial;
    min-height: 3.1rem;
    padding: 0.65rem 0.75rem;
}

.crazypbx-extensions-stat-card {
    --cpe-stat-accent: var(--cpe-cyan);
    --cpe-stat-bg: rgba(6, 182, 212, 0.12);
}

.crazypbx-extensions-stat-card.is-total {
    --cpe-stat-accent: #818cf8;
    --cpe-stat-bg: rgba(129, 140, 248, 0.14);
}

.crazypbx-extensions-stat-card.is-online {
    --cpe-stat-accent: #10b981;
    --cpe-stat-bg: rgba(16, 185, 129, 0.14);
}

.crazypbx-extensions-stat-card.is-voicemail {
    --cpe-stat-accent: #0ea5e9;
    --cpe-stat-bg: rgba(14, 165, 233, 0.14);
}

.crazypbx-extensions-stat-card.is-dnd {
    --cpe-stat-accent: #f97316;
    --cpe-stat-bg: rgba(249, 115, 22, 0.14);
}

.crazypbx-extensions-stat-icon {
    align-items: center;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cpe-stat-accent) 18%, transparent), transparent),
        var(--cpe-stat-bg);
    border: 1px solid color-mix(in srgb, var(--cpe-stat-accent) 35%, transparent);
    border-radius: 0.65rem;
    color: var(--cpe-stat-accent);
    display: inline-flex;
    font-size: 1rem;
    height: 2.05rem;
    justify-content: center;
    width: 2.05rem;
}

.crazypbx-extensions-card {
    padding: 1rem;
}

.crazypbx-extensions-table-card {
    padding: 0;
}

.crazypbx-extensions-stat-label {
    align-self: center;
    color: var(--cpe-muted);
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.crazypbx-extensions-card strong {
    display: block;
    font-size: 1.65rem;
    letter-spacing: -0.04em;
}

.crazypbx-extensions-stats .crazypbx-extensions-card strong {
    background: color-mix(in srgb, var(--cpe-stat-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cpe-stat-accent) 22%, var(--cpe-border));
    border-radius: 0.65rem;
    color: var(--cpe-text);
    font-size: 1.15rem;
    line-height: 1;
    min-width: 2.15rem;
    padding: 0.38rem 0.48rem;
    text-align: center;
}

.crazypbx-extensions-toolbar {
    align-items: center;
    grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto;
    padding: 1rem;
}

.crazypbx-extensions-input,
.crazypbx-extensions-select {
    background: var(--cpe-card-strong);
    border: 1px solid var(--cpe-border);
    border-radius: 0.9rem;
    color: var(--cpe-text);
    min-height: 2.6rem;
    padding: 0.6rem 0.85rem;
    width: 100%;
}

.crazypbx-extensions-inline-help,
.crazypbx-extensions-label-row {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.crazypbx-extensions-inline-help {
    color: var(--cpe-muted);
    font-size: 0.82rem;
    font-weight: 800;
    justify-content: flex-end;
}

.crazypbx-extensions-field-label > .crazypbx-extensions-label-row {
    color: var(--cpe-red);
    margin-bottom: 0.35rem;
}

.crazypbx-extensions-table-wrap {
    overflow-x: auto;
}

.crazypbx-extensions-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 780px;
    width: 100%;
}

.crazypbx-extensions-table th,
.crazypbx-extensions-table td {
    border-bottom: 1px solid var(--cpe-border);
    padding: 0.82rem 0.75rem;
    vertical-align: middle;
}

.crazypbx-extensions-table th {
    color: var(--cpe-muted);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crazypbx-extensions-avatar {
    background:
        linear-gradient(135deg, rgba(244, 63, 94, 0.95), rgba(10, 10, 10, 0.98));
    border: 1px solid rgba(244, 63, 94, 0.36);
    border-radius: 0.8rem;
    box-shadow: 0 0.55rem 1.15rem rgba(244, 63, 94, 0.18);
    color: #ffffff;
    display: inline-grid;
    height: 2.15rem;
    place-items: center;
    width: 2.15rem;
}

.crazypbx-extensions-ext {
    align-items: center;
    display: flex;
    font-weight: 800;
    gap: 0.65rem;
}

.crazypbx-extensions-badge {
    font-size: 0.76rem;
    padding: 0.32rem 0.58rem;
}

.crazypbx-extensions-badge-online {
    background: rgba(16, 185, 129, 0.13);
    color: #047857;
}

.crazypbx-extensions-badge-offline {
    background: rgba(100, 116, 139, 0.14);
    color: #64748b;
}

.crazypbx-extensions-badge-danger {
    background: rgba(244, 63, 94, 0.12);
    color: #be123c;
}

.crazypbx-extensions-badge-info {
    background: rgba(6, 182, 212, 0.12);
    color: #0284c7;
}

.crazypbx-extensions-icon-btn {
    background: var(--cpe-card-strong);
    color: var(--cpe-text);
    height: 2.1rem;
    width: 2.1rem;
}

.crazypbx-extensions-empty,
.crazypbx-extensions-loading {
    color: var(--cpe-muted);
    padding: 2rem;
    text-align: center;
}

.crazypbx-announcements-page-container .crazypbx-extensions-table th,
.crazypbx-announcements-page-container .crazypbx-extensions-table td {
    font-size: 0.78rem;
    padding: 0.56rem 0.62rem;
}

.crazypbx-announcements-page-container .crazypbx-extensions-table th {
    font-size: 0.62rem;
    letter-spacing: 0.075em;
}

.crazypbx-announcements-page-container .crazypbx-extensions-avatar {
    border-radius: 0.65rem;
    height: 1.8rem;
    width: 1.8rem;
}

.crazypbx-announcements-page-container .crazypbx-extensions-ext {
    font-size: 0.82rem;
    gap: 0.5rem;
}

.crazypbx-announcements-page-container .crazypbx-extensions-badge {
    font-size: 0.68rem;
    padding: 0.22rem 0.46rem;
}

.crazypbx-announcements-name,
.crazypbx-announcements-description {
    display: block;
    line-height: 1.25;
}

.crazypbx-announcements-name {
    color: var(--cpe-text);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.crazypbx-announcements-description {
    color: var(--cpe-muted);
    font-size: 0.72rem;
    font-weight: 500;
    margin-top: 0.18rem;
}

.crazypbx-extensions-notice,
.crazypbx-extensions-availability,
.crazypbx-extensions-warning {
    border-radius: 0.9rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
}

.crazypbx-extensions-notice {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(6, 182, 212, 0.12)),
        rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(16, 185, 129, 0.28);
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.1);
    color: #064e3b;
    display: none;
    font-size: 0.9rem;
    font-weight: 800;
    gap: 0.7rem;
    line-height: 1.35;
    padding: 0.85rem 1rem;
    transform: translateY(-4px);
}

.crazypbx-extensions-notice.is-visible {
    animation: crazypbxExtensionsNoticeIn 180ms ease-out;
    display: flex;
}

.crazypbx-extensions-notice::before {
    align-items: center;
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border-radius: 999px;
    color: #ffffff;
    content: "\2713";
    display: inline-flex;
    flex: 0 0 1.65rem;
    font-size: 0.9rem;
    height: 1.65rem;
    justify-content: center;
    line-height: 1;
    width: 1.65rem;
}

.crazypbx-extensions-notice.is-error {
    background:
        linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(249, 115, 22, 0.1)),
        rgba(255, 255, 255, 0.92);
    border-color: rgba(244, 63, 94, 0.3);
    color: #881337;
}

.crazypbx-extensions-notice.is-error::before {
    background: linear-gradient(135deg, #f43f5e, #fb7185);
    content: "!";
    font-weight: 900;
}

.crazypbx-extensions-notice-link {
    color: inherit;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.crazypbx-extensions-notice-link:hover,
.crazypbx-extensions-notice-link:focus-visible {
    color: #9f1239;
    outline: none;
}

[data-theme-mode="dark"] .crazypbx-extensions-notice-link:hover,
[data-theme-mode="dark"] .crazypbx-extensions-notice-link:focus-visible {
    color: #fecdd3;
}

@keyframes crazypbxExtensionsNoticeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(-4px);
    }
}

/*
 * Availability strip: default filled state must lose to .is-error / .is-success / etc.
 * Use .class:not(:empty) (0,3,1) so semantic states override the neutral strip (0,2,1).
 */
.crazypbx-extensions-availability:not(:empty) {
    background: rgba(30, 41, 59, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #f1f5f9;
    font-weight: 600;
}

.crazypbx-extensions-availability.is-loading:not(:empty) {
    background: rgba(30, 58, 138, 0.45);
    border-color: rgba(147, 197, 253, 0.45);
    color: #dbeafe;
}

.crazypbx-extensions-availability.is-success:not(:empty),
.crazypbx-extensions-availability.is-available:not(:empty) {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.5), rgba(21, 128, 61, 0.42));
    border: 1px solid rgba(134, 239, 172, 0.5);
    color: #ecfdf5;
}

.crazypbx-extensions-availability.is-error:not(:empty),
.crazypbx-extensions-availability.is-conflict:not(:empty) {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.58), rgba(127, 29, 29, 0.52));
    border: 1px solid rgba(252, 165, 165, 0.55);
    color: #ffffff;
}

.crazypbx-extensions-availability.is-error:not(:empty) a,
.crazypbx-extensions-availability.is-conflict:not(:empty) a {
    color: #fecaca;
    text-decoration: underline;
}

.crazypbx-extensions-warning {
    background: rgba(220, 38, 38, 0.85);
    border: 1px solid rgba(220, 38, 38, 0.5);
    color: #ffffff;
    font-weight: 500;
}

.crazypbx-extensions-warning strong {
    color: #ffffff;
    font-weight: 700;
}

[data-theme-mode="light"] .crazypbx-extensions-warning {
    background: rgba(220, 38, 38, 0.9);
    border-color: rgba(220, 38, 38, 0.6);
}

.crazypbx-extensions-tooltip-wrap {
    align-items: center;
    display: inline-flex;
    position: relative;
}

.crazypbx-extensions-tooltip-icon {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.28);
    border-radius: 999px;
    color: #0284c7;
    cursor: help;
    display: inline-grid;
    font-size: 0.72rem;
    font-weight: 900;
    height: 1.15rem;
    outline: none;
    place-items: center;
    width: 1.15rem;
}

.crazypbx-extensions-tooltip-panel {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.85rem;
    bottom: calc(100% + 0.55rem);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 600;
    left: 50%;
    line-height: 1.4;
    opacity: 0;
    padding: 0.72rem 0.82rem;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    visibility: hidden;
    width: min(20rem, 82vw);
    z-index: 9999;
}

.crazypbx-extensions-tooltip-panel.is-fixed {
    bottom: auto;
    left: 0;
    max-width: calc(100vw - 2rem);
    position: fixed;
    top: 0;
    transform: none;
    /* Keep fixed tooltips above sticky modal footers, tables, cards, and dropdowns. */
    z-index: 9999;
}

.crazypbx-extensions-tooltip-panel::after {
    border: 0.42rem solid transparent;
    border-top-color: #111827;
    content: "";
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
}

.crazypbx-extensions-tooltip-wrap:hover .crazypbx-extensions-tooltip-panel,
.crazypbx-extensions-tooltip-icon:focus + .crazypbx-extensions-tooltip-panel,
.crazypbx-extensions-tooltip-icon:focus-visible + .crazypbx-extensions-tooltip-panel,
.crazypbx-extensions-tooltip-panel.is-active {
    opacity: 1;
    visibility: visible;
}

/* CrazyPBX Manual Switches — compact dial help (single short band, grid of codes) */
.crazypbx-manual-switches-dial-help {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cpe-red) 8%, transparent), color-mix(in srgb, var(--cpe-cyan) 8%, transparent)),
        color-mix(in srgb, var(--cpe-muted) 6%, var(--cpe-card));
    border: 1px solid var(--cpe-border, rgba(148, 163, 184, 0.35));
    border-radius: 0.65rem;
    color: var(--cpe-text);
}

.crazypbx-manual-switches-dial-help-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.5rem;
    row-gap: 0.25rem;
}

.crazypbx-manual-switches-dial-help-title {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cpe-text);
    margin: 0;
}

.crazypbx-manual-switches-dial-help-hint {
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--cpe-muted);
}

.crazypbx-manual-switches-dial-help-hint code {
    font-size: 0.85em;
    padding: 0 0.2rem;
    color: var(--cpe-text);
    background: color-mix(in srgb, var(--cpe-cyan) 10%, transparent);
    border-radius: 0.2rem;
}

.crazypbx-manual-switches-dial-help-more {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--cpe-muted);
}

.crazypbx-manual-switches-dial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.2rem 0.6rem;
    align-items: baseline;
    font-size: 0.75rem;
    line-height: 1.3;
}

.crazypbx-manual-switches-dial-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
    min-width: 0;
}

.crazypbx-manual-switches-dial-k {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cpe-muted);
}

.crazypbx-manual-switches-dial-code {
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
    font-size: 0.75rem;
    padding: 0.12rem 0.32rem;
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--cpe-cyan) 14%, var(--cpe-card-strong));
    border: 1px solid color-mix(in srgb, var(--cpe-cyan) 25%, var(--cpe-border));
    color: var(--cpe-text);
    white-space: nowrap;
}

.crazypbx-manual-switches-dial-code .crazypbx-manual-switches-dial-placeholder {
    color: var(--cpe-cyan);
    font-weight: 700;
}

.crazypbx-manual-switches-context-msg:empty {
    display: none;
}

.crazypbx-manual-switches-context-msg .alert {
    margin-bottom: 0;
}

[data-theme-mode="dark"] .crazypbx-manual-switches-dial-help {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cpe-red) 12%, transparent), color-mix(in srgb, var(--cpe-cyan) 10%, transparent)),
        color-mix(in srgb, var(--cpe-card-strong) 88%, transparent);
    border-color: var(--cpe-border);
}

#crazypbx-manual-switches-editor-modal .modal-footer {
    background: var(--cpe-card);
    border-top: 1px solid var(--cpe-border) !important;
    bottom: 0;
    flex-shrink: 0;
    padding: 0.75rem 1.1rem 1rem;
    position: sticky;
    z-index: 2;
}

.crazypbx-extensions-modal-panel {
    color: var(--cpe-text);
}

.crazypbx-extensions-modal-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--cpe-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.1rem;
}

.crazypbx-extensions-modal-kicker {
    color: var(--cpe-red);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
}

.crazypbx-extensions-modal-head .modal-title {
    color: var(--cpe-text);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.crazypbx-extensions-modal-body {
    max-height: calc(100vh - 14.5rem);
    overflow-y: auto;
    padding: 0.55rem 1.1rem 1rem;
}

.crazypbx-extensions-modal-body::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.crazypbx-extensions-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.crazypbx-extensions-modal-body::-webkit-scrollbar-thumb {
    background: var(--cpe-border);
    border-radius: 3px;
}

.crazypbx-extensions-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--cpe-muted);
}

#crazypbx-extensions-editor-modal .modal-footer,
#crazypbx-ring-groups-editor-modal .modal-footer {
    background: var(--cpe-card);
    border-top: 1px solid var(--cpe-border) !important;
    bottom: 0;
    flex-shrink: 0;
    padding: 0.75rem 1.1rem 1rem;
    position: sticky;
    z-index: 2;
}

.crazypbx-extensions-tabs {
    background:
        linear-gradient(135deg, rgba(244, 63, 94, 0.08), rgba(6, 182, 212, 0.08)),
        rgba(100, 116, 139, 0.06);
    border: 1px solid var(--cpe-border);
    border-radius: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
    padding: 0.35rem;
}

.crazypbx-extensions-tab {
    align-items: center;
    --cpe-tab-color: var(--cpe-red);
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid transparent;
    border-radius: 0.78rem;
    color: var(--cpe-muted);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 800;
    gap: 0.35rem;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.45rem 0.7rem;
    position: relative;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.crazypbx-extensions-tab:nth-child(2) {
    --cpe-tab-color: #f97316;
}

.crazypbx-extensions-tab:nth-child(3) {
    --cpe-tab-color: #8b5cf6;
}

.crazypbx-extensions-tab:nth-child(4) {
    --cpe-tab-color: #0ea5e9;
}

.crazypbx-extensions-tab:nth-child(5) {
    --cpe-tab-color: #10b981;
}

.crazypbx-extensions-tab:nth-child(6) {
    --cpe-tab-color: #eab308;
}

.crazypbx-extensions-tab:nth-child(7) {
    --cpe-tab-color: #ef4444;
}

.crazypbx-extensions-tab:nth-child(8) {
    --cpe-tab-color: #14b8a6;
}

.crazypbx-extensions-tab i {
    color: var(--cpe-tab-color);
    font-size: 0.98rem;
    line-height: 1;
}

.crazypbx-extensions-tab:hover,
.crazypbx-extensions-tab:focus-visible {
    background: rgba(255, 255, 255, 0.84);
    border-color: color-mix(in srgb, var(--cpe-tab-color) 42%, transparent);
    color: var(--cpe-text);
    outline: none;
    transform: translateY(-1px);
}

.crazypbx-extensions-tab.is-active {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cpe-tab-color) 18%, #ffffff), rgba(255, 255, 255, 0.96));
    border-color: color-mix(in srgb, var(--cpe-tab-color) 46%, transparent);
    box-shadow: 0 0.55rem 1.3rem color-mix(in srgb, var(--cpe-tab-color) 18%, transparent);
    color: var(--cpe-text);
}

.crazypbx-extensions-availability:empty {
    display: none;
}

.crazypbx-extensions-tab-panel:not(.is-active) {
    display: none;
}

.crazypbx-extensions-modal-grid {
    grid-template-columns: 1fr;
}

.crazypbx-extensions-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crazypbx-extensions-field-label {
    align-content: start;
    display: grid;
    font-weight: 700;
    gap: 0;
    justify-items: stretch;
}

/* Space between stacked controls (e.g. destination select + custom input); no gap before help text */
.crazypbx-extensions-field-label > :where(.crazypbx-extensions-input, .crazypbx-extensions-select, .crazypbx-extensions-destination-control):not(:has(+ .crazypbx-extensions-help)) {
    margin-bottom: 0.35rem;
}

.crazypbx-extensions-required {
    color: var(--cpe-red);
    font-weight: 900;
}

.crazypbx-extensions-required.is-hidden {
    display: none;
}

.crazypbx-extensions-help {
    box-sizing: border-box;
    color: var(--cpe-muted);
    display: block;
    font-size: 0.76rem;
    line-height: 1.35;
    margin-inline: 0;
    margin-top: 0;
    max-width: 100%;
    padding-inline-start: 0;
    text-align: start;
    width: 100%;
}

#crazypbx-extensions-tab-destinations .crazypbx-extensions-help {
    background: rgba(100, 116, 139, 0.06);
    border-left: 2px solid rgba(100, 116, 139, 0.2);
    border-radius: 0.55rem;
    color: rgba(100, 116, 139, 0.82);
    display: block;
    font-size: 0.69rem;
    font-weight: 500;
    line-height: 1.25;
    margin-top: 0;
    padding: 0.35rem 0.48rem;
}

#crazypbx-extensions-tab-destinations .crazypbx-extensions-field-label {
    gap: 0;
}

[data-theme-mode="dark"] #crazypbx-extensions-tab-destinations .crazypbx-extensions-help {
    background: rgba(255, 255, 255, 0.025);
    border-left-color: rgba(255, 255, 255, 0.1);
    color: rgba(161, 161, 170, 0.68);
}

.crazypbx-extensions-setting-section {
    border-top: 1px solid var(--cpe-border);
    padding-top: 0.85rem;
}

.crazypbx-extensions-setting-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.crazypbx-extensions-section-title {
    align-items: center;
    display: flex;
    font-size: 0.92rem;
    font-weight: 800;
    gap: 0.45rem;
    margin: 0 0 0.7rem;
}

.crazypbx-extensions-switches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crazypbx-extensions-switch,
.crazypbx-extensions-permission {
    border: 1px solid var(--cpe-border);
    border-radius: 0.8rem;
    font-weight: 700;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
}

.crazypbx-extensions-switch {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.crazypbx-extensions-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crazypbx-extensions-permission {
    align-items: flex-start;
    background: rgba(6, 182, 212, 0.05);
    display: flex;
}

.crazypbx-extensions-permission input {
    margin-top: 0.15rem;
}

.crazypbx-extensions-domain-readonly {
    align-items: center;
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid var(--cpe-border);
    border-radius: 0.9rem;
    color: var(--cpe-muted);
    display: flex;
    font-weight: 700;
    min-height: 2.6rem;
    overflow-wrap: anywhere;
    padding: 0.6rem 0.85rem;
}

.crazypbx-extensions-destination-control {
    display: grid;
    gap: 0.45rem;
    position: relative;
}

.crazypbx-extensions-select-native-hidden {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

/* ── Global fix: stop scrollable modals clipping destination dropdowns ── */
/* When any CrazyPBX destination picker is open, the Bootstrap scrollable-
   modal's overflow:auto on .modal-body and overflow:hidden on .modal-content
   would clip the absolutely-positioned menu.  Override both ancestors while
   a dropdown is active so the menu can escape the scroll container. */
.modal-dialog-scrollable .modal-content:has(.crazypbx-extensions-destination-enhanced.is-open),
.modal-dialog-scrollable .modal-body:has(.crazypbx-extensions-destination-enhanced.is-open) {
    overflow: visible !important;
}

.crazypbx-extensions-destination-enhanced {
    position: relative;
}

.crazypbx-extensions-destination-button {
    align-items: center;
    background: var(--cpe-card-strong);
    border: 1px solid var(--cpe-border);
    border-radius: 0.9rem;
    color: var(--cpe-text);
    display: flex;
    font-weight: 800;
    justify-content: space-between;
    min-height: 2.3rem;
    padding: 0.45rem 0.72rem;
    text-align: left;
    width: 100%;
}

.crazypbx-extensions-destination-button i {
    color: var(--cpe-muted);
    font-size: 1.05rem;
}

.crazypbx-extensions-destination-menu {
    background: var(--cpe-card-strong);
    border: 1px solid var(--cpe-border);
    border-radius: 0.95rem;
    box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.28);
    display: none;
    left: 0;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.55rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 9999;
}

.crazypbx-extensions-destination-enhanced.is-open .crazypbx-extensions-destination-menu {
    display: block;
}

#crazypbx-announcements-editor-modal .crazypbx-extensions-modal-panel,
#crazypbx-announcements-editor-modal .crazypbx-extensions-modal-body {
    overflow: visible;
}

#crazypbx-announcements-editor-modal .crazypbx-extensions-destination-control,
#crazypbx-announcements-editor-modal .crazypbx-extensions-destination-enhanced.is-open {
    z-index: 2000;
}

#crazypbx-announcements-editor-modal .crazypbx-extensions-destination-enhanced.is-open .crazypbx-extensions-destination-menu {
    z-index: 2001;
}

.crazypbx-extensions-destination-menu-bucket {
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(100, 116, 139, 0.05));
    border: 1px solid var(--cpe-border);
    border-radius: 0.8rem;
    color: var(--cpe-text);
    display: grid;
    font-size: 0.76rem;
    font-weight: 900;
    gap: 0.18rem;
    letter-spacing: 0.02em;
    margin: 0.2rem 0 0.45rem;
    padding: 0.58rem 0.7rem;
    text-transform: uppercase;
}

.crazypbx-extensions-destination-menu-bucket > span {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
}

.crazypbx-extensions-destination-menu-bucket i {
    font-size: 1rem;
}

.crazypbx-extensions-destination-menu-bucket small {
    color: var(--cpe-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}

.crazypbx-extensions-destination-menu-bucket.is-sip {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.14), rgba(6, 182, 212, 0.04));
    border-color: rgba(6, 182, 212, 0.24);
    color: #0891b2;
}

.crazypbx-extensions-destination-menu-bucket.is-pbx {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.13), rgba(100, 116, 139, 0.05));
    border-color: rgba(99, 102, 241, 0.22);
    color: #818cf8;
}

.crazypbx-extensions-destination-menu-bucket.is-quick {
    background: rgba(100, 116, 139, 0.12);
    color: var(--cpe-muted);
}

.crazypbx-extensions-destination-menu-group {
    align-items: center;
    background: transparent;
    color: color-mix(in srgb, var(--cpe-muted) 88%, transparent);
    display: flex;
    font-size: 0.66rem;
    font-weight: 900;
    gap: 0.35rem;
    letter-spacing: 0.08em;
    margin: 0.38rem 0 0.2rem;
    padding: 0.28rem 0.55rem;
    text-transform: uppercase;
}

.crazypbx-extensions-destination-menu-group i {
    font-size: 0.9rem;
    opacity: 0.72;
}

.crazypbx-extensions-destination-option {
    align-items: center;
    background: rgba(100, 116, 139, 0.045);
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0.72rem;
    color: var(--cpe-text);
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 1.7rem minmax(0, 1fr) auto;
    min-height: 2.45rem;
    margin: 0.18rem 0;
    padding: 0.42rem 0.62rem;
    position: relative;
    text-align: left;
    width: 100%;
}

.crazypbx-extensions-destination-option-icon {
    align-items: center;
    background: rgba(100, 116, 139, 0.12);
    border-radius: 0.55rem;
    color: var(--cpe-muted);
    display: inline-flex;
    height: 1.7rem;
    justify-content: center;
    width: 1.7rem;
}

.crazypbx-extensions-destination-option-name {
    font-size: 0.82rem;
    font-weight: 760;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crazypbx-extensions-destination-option:hover,
.crazypbx-extensions-destination-option[aria-selected="true"] {
    background: rgba(100, 116, 139, 0.12);
}

.crazypbx-extensions-destination-option[aria-selected="true"] {
    border-left-color: var(--cpe-cyan);
    color: var(--cpe-text);
    font-weight: 900;
}

.crazypbx-extensions-destination-option.is-sip[aria-selected="true"] {
    border-left-color: #0891b2;
}

.crazypbx-extensions-destination-option.is-pbx[aria-selected="true"] {
    border-left-color: #818cf8;
}

.crazypbx-extensions-destination-option[aria-selected="true"] .crazypbx-extensions-destination-option-icon {
    background: rgba(6, 182, 212, 0.14);
    color: #0891b2;
}

.crazypbx-extensions-destination-option[aria-selected="true"]::after {
    align-self: center;
    color: var(--cpe-muted);
    content: "\2713";
    font-size: 0.78rem;
    font-weight: 900;
}

.crazypbx-extensions-custom-destination {
    display: none;
}

.crazypbx-extensions-custom-destination.is-visible {
    display: block;
}

.crazypbx-extensions-qr-modal-dialog {
    max-width: 860px !important;
}

.crazypbx-extensions-qr-prompt {
    color: #a1a1aa;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 0.55rem;
}

.crazypbx-extensions-qr-prompt strong {
    color: #f4f4f5;
    font-weight: 700;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-prompt {
    color: #64748b;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-prompt strong {
    color: #1e293b;
}

.crazypbx-extensions-qr-confirm-btn {
    align-items: center;
    background: #dc2626;
    border: none;
    border-radius: 0.55rem;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    transition: background 150ms ease;
}

.crazypbx-extensions-qr-confirm-btn:hover,
.crazypbx-extensions-qr-confirm-btn:focus-visible {
    background: #b91c1c;
}

.crazypbx-extensions-qr-confirm-btn:active {
    background: #991b1b;
}

.crazypbx-extensions-qr-confirm-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.crazypbx-extensions-qr-action-area {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.5rem 0;
    text-align: center;
}

.crazypbx-extensions-qr-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    color: rgba(161, 161, 170, 0.75);
    font-size: 0.78rem;
    font-weight: 500;
    margin: 0;
    padding-top: 0.85rem;
    text-align: center;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-footer {
    border-top-color: rgba(15, 23, 42, 0.06);
    color: rgba(100, 116, 139, 0.85);
}

.crazypbx-extensions-qr-hero {
    align-items: flex-start;
    background: rgba(24, 24, 27, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid #f59e0b;
    border-radius: 0.55rem;
    color: rgba(244, 244, 245, 0.9);
    display: flex;
    font-size: 0.82rem;
    font-weight: 500;
    gap: 0.65rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.85rem;
}

.crazypbx-extensions-qr-hero > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.crazypbx-extensions-qr-hero::before {
    align-items: center;
    background: #f59e0b;
    border-radius: 999px;
    color: #1f1f22;
    content: "!";
    display: inline-flex;
    flex: 0 0 1.25rem;
    font-size: 0.75rem;
    font-weight: 900;
    height: 1.25rem;
    justify-content: center;
    line-height: 1;
    margin-top: 0.05rem;
    width: 1.25rem;
}

.crazypbx-extensions-qr-hero strong {
    color: #fbbf24;
    font-weight: 700;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-hero {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.06);
    border-left-color: #f59e0b;
    color: #475569;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-hero strong {
    color: #92400e;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-hero::before {
    background: #f59e0b;
    color: #ffffff;
}

.crazypbx-extensions-qr-image {
    border-radius: 0.9rem;
    display: block;
    margin: 0 auto;
    max-width: 220px;
    width: 100%;
}

.crazypbx-extensions-qr-card {
    background: rgba(24, 24, 27, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
}

.crazypbx-extensions-qr-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.crazypbx-extensions-qr-visual {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.25rem;
}

.crazypbx-extensions-qr-info {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.crazypbx-extensions-qr-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.crazypbx-extensions-qr-note {
    color: rgba(161, 161, 170, 0.85);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-note {
    color: rgba(100, 116, 139, 0.9);
}

.crazypbx-extensions-qr-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.crazypbx-extensions-qr-detail-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #d4d4d8;
    white-space: nowrap;
}

.crazypbx-extensions-qr-detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ff4770;
    word-break: break-all;
    text-align: right;
}

.crazypbx-extensions-qr-detail-value-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.crazypbx-extensions-qr-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    color: #a1a1aa;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.crazypbx-extensions-qr-copy-btn:hover,
.crazypbx-extensions-qr-copy-btn:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    outline: none;
}

.crazypbx-extensions-qr-copy-btn.is-copied {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.45);
    color: #22c55e;
}

.crazypbx-extensions-qr-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.crazypbx-extensions-qr-btn,
.crazypbx-extensions-qr-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.crazypbx-extensions-qr-btn {
    background: linear-gradient(135deg, #ff1744, #dc2626);
}

.crazypbx-extensions-qr-btn:hover,
.crazypbx-extensions-qr-btn:focus-visible {
    background: linear-gradient(135deg, #ff4770, #ff1744);
    color: #ffffff;
    outline: none;
}

.crazypbx-extensions-qr-btn-secondary {
    background: linear-gradient(135deg, #7c3aed, #6366f1);
}

.crazypbx-extensions-qr-btn-secondary:hover,
.crazypbx-extensions-qr-btn-secondary:focus-visible {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #ffffff;
    outline: none;
}

.crazypbx-extensions-is-hidden {
    display: none !important;
}

@media (min-width: 576px) {
    .crazypbx-extensions-qr-inner {
        flex-direction: row;
        align-items: flex-start;
    }

    .crazypbx-extensions-qr-visual {
        padding: 1.5rem;
    }

    .crazypbx-extensions-qr-image {
        max-width: 240px;
    }
}

[data-theme-mode="light"] .crazypbx-extensions-qr-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme-mode="light"] .crazypbx-extensions-qr-visual {
    background: #f4f4f5;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-detail-row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme-mode="light"] .crazypbx-extensions-qr-detail-label {
    color: #3f3f46;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-detail-value {
    color: #dc2626;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-copy-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #71717a;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-copy-btn:hover,
[data-theme-mode="light"] .crazypbx-extensions-qr-copy-btn:focus-visible {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
    color: #18181b;
}

[data-theme-mode="light"] .crazypbx-extensions-qr-copy-btn.is-copied {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #15803d;
}

.crazypbx-extensions-form-grid .wide,
.crazypbx-extensions-switches.wide {
    grid-column: 1 / -1;
}

/* CrazyPBX Speed Dials management reuses the Extensions workspace primitives. */
.crazypbx-speed-dials-page-container {
    --cpe-card: rgba(255, 255, 255, 0.94);
    --cpe-card-strong: #ffffff;
    --cpe-border: rgba(15, 23, 42, 0.1);
    --cpe-text: #172033;
    --cpe-muted: #64748b;
    --cpe-red: #f43f5e;
    --cpe-cyan: #06b6d4;
    --cpe-green: #10b981;
    color: var(--cpe-text);
    padding: 0.65rem 0 1.25rem;
}

.crazypbx-speed-dials-page-container .crazypbx-extensions-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Prevent long Name / Description strings from blowing out the table. */
.crazypbx-speed-dials-page-container .crazypbx-extensions-table {
    table-layout: fixed;
    min-width: 620px;
}

/* Column widths: Code | Name | Destination | Description | Actions */
.crazypbx-speed-dials-page-container .crazypbx-extensions-table th:nth-child(1),
.crazypbx-speed-dials-page-container .crazypbx-extensions-table td:nth-child(1) { width: 12%; }
.crazypbx-speed-dials-page-container .crazypbx-extensions-table th:nth-child(2),
.crazypbx-speed-dials-page-container .crazypbx-extensions-table td:nth-child(2) { width: 22%; }
.crazypbx-speed-dials-page-container .crazypbx-extensions-table th:nth-child(3),
.crazypbx-speed-dials-page-container .crazypbx-extensions-table td:nth-child(3) { width: 24%; }
.crazypbx-speed-dials-page-container .crazypbx-extensions-table th:nth-child(4),
.crazypbx-speed-dials-page-container .crazypbx-extensions-table td:nth-child(4) { width: 30%; }
.crazypbx-speed-dials-page-container .crazypbx-extensions-table th:nth-child(5),
.crazypbx-speed-dials-page-container .crazypbx-extensions-table td:nth-child(5) { width: 12%; }

/* Truncate Name (col 2), Destination (col 3), and Description (col 4) with ellipsis */
.crazypbx-speed-dials-page-container .crazypbx-extensions-table td:nth-child(2),
.crazypbx-speed-dials-page-container .crazypbx-extensions-table td:nth-child(3),
.crazypbx-speed-dials-page-container .crazypbx-extensions-table td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crazypbx-speed-dials-page-container .crazypbx-extensions-btn-danger {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #ffffff;
}

.crazypbx-speed-dials-page-container .crazypbx-extensions-notice:not(:empty) {
    animation: crazypbxExtensionsNoticeIn 180ms ease-out;
    display: flex;
}

.crazypbx-speed-dials-page-container .crazypbx-extensions-notice.is-danger,
.crazypbx-speed-dials-page-container .crazypbx-extensions-notice.is-error {
    background:
        linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(249, 115, 22, 0.1)),
        rgba(255, 255, 255, 0.92);
    border-color: rgba(244, 63, 94, 0.3);
    color: #881337;
}

.crazypbx-speed-dials-page-container .crazypbx-extensions-notice.is-danger::before,
.crazypbx-speed-dials-page-container .crazypbx-extensions-notice.is-error::before {
    background: linear-gradient(135deg, #f43f5e, #fb7185);
    content: "!";
    font-weight: 900;
}

.crazypbx-speed-dials-page-container .crazypbx-extensions-notice.is-info::before {
    background: linear-gradient(135deg, #06b6d4, #38bdf8);
    content: "i";
    font-weight: 900;
}

/* Scrollable modal otherwise clips the destination picker (same pattern as announcements editor). */
#crazypbx-speed-dials-editor-modal .crazypbx-extensions-modal-panel,
#crazypbx-speed-dials-editor-modal .crazypbx-extensions-modal-body {
    overflow: visible;
}

#crazypbx-speed-dials-editor-modal .crazypbx-extensions-destination-control,
#crazypbx-speed-dials-editor-modal .crazypbx-extensions-destination-enhanced.is-open {
    z-index: 2000;
}

#crazypbx-speed-dials-editor-modal .crazypbx-extensions-destination-enhanced.is-open .crazypbx-extensions-destination-menu {
    z-index: 2001;
}

[data-theme-mode="dark"] .crazypbx-extensions-page-container {
    --cpe-card: rgba(27, 27, 31, 0.92);
    --cpe-card-strong: rgba(18, 18, 22, 0.95);
    --cpe-border: rgba(255, 255, 255, 0.09);
    --cpe-text: #f4f4f5;
    --cpe-muted: #a1a1aa;
}

[data-theme-mode="dark"] .crazypbx-extensions-modal-panel {
    --cpe-card: rgba(27, 27, 31, 0.92);
    --cpe-card-strong: rgba(18, 18, 22, 0.95);
    --cpe-border: rgba(255, 255, 255, 0.09);
    --cpe-text: #f4f4f5;
    --cpe-muted: #a1a1aa;
}

[data-theme-mode="dark"] .crazypbx-speed-dials-page-container {
    --cpe-card: rgba(27, 27, 31, 0.92);
    --cpe-card-strong: rgba(18, 18, 22, 0.95);
    --cpe-border: rgba(255, 255, 255, 0.09);
    --cpe-text: #f4f4f5;
    --cpe-muted: #a1a1aa;
}

[data-theme-mode="dark"] .crazypbx-speed-dials-page-container .crazypbx-extensions-notice.is-danger,
[data-theme-mode="dark"] .crazypbx-speed-dials-page-container .crazypbx-extensions-notice.is-error {
    background:
        linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(249, 115, 22, 0.12)),
        rgba(24, 12, 16, 0.96);
    border-color: rgba(251, 113, 133, 0.36);
    color: #ffe4e6;
}

[data-theme-mode="dark"] .crazypbx-extensions-tab {
    background: rgba(255, 255, 255, 0.045);
}

[data-theme-mode="dark"] .crazypbx-extensions-tab:hover,
[data-theme-mode="dark"] .crazypbx-extensions-tab:focus-visible {
    background: rgba(255, 255, 255, 0.075);
}

[data-theme-mode="dark"] .crazypbx-extensions-tab.is-active {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--cpe-tab-color) 22%, rgba(24, 24, 27, 0.96)), rgba(24, 24, 27, 0.92));
}

[data-theme-mode="dark"] .crazypbx-extensions-notice {
    background:
        linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.14)),
        rgba(12, 19, 18, 0.96);
    border-color: rgba(45, 212, 191, 0.34);
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.34);
    color: #d1fae5;
}

[data-theme-mode="dark"] .crazypbx-extensions-notice.is-error {
    background:
        linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(249, 115, 22, 0.12)),
        rgba(24, 12, 16, 0.96);
    border-color: rgba(251, 113, 133, 0.36);
    color: #ffe4e6;
}

[data-theme-mode="dark"] .crazypbx-extensions-badge-online {
    color: #34d399;
}

[data-theme-mode="dark"] .crazypbx-extensions-badge-offline {
    color: #cbd5e1;
}

@media (max-width: 991.98px) {
    .crazypbx-extensions-hero,
    .crazypbx-extensions-toolbar,
    .crazypbx-extensions-form-grid,
    .crazypbx-extensions-switches,
    .crazypbx-extensions-permission-grid {
        grid-template-columns: 1fr;
    }

    .crazypbx-extensions-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crazypbx-extensions-hero-actions,
    .crazypbx-extensions-inline-help {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .crazypbx-extensions-page-container,
    .crazypbx-speed-dials-page-container {
        padding-top: 0.5rem;
    }

    .crazypbx-extensions-hero,
    .crazypbx-extensions-card,
    .crazypbx-extensions-modal-panel {
        border-radius: 0.95rem;
    }

    .crazypbx-extensions-btn {
        width: 100%;
    }

    .crazypbx-extensions-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crazypbx-extensions-tab {
        width: 100%;
    }

    .crazypbx-extensions-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crazypbx-extensions-stats .crazypbx-extensions-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.45rem;
    }

    .crazypbx-extensions-stats .crazypbx-extensions-card strong {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* CrazyPBX Auto Attendants: compact IVR-specific polish while reusing Extension components. */
.crazypbx-auto-attendants-page-container .crazypbx-extensions-table th,
.crazypbx-auto-attendants-page-container .crazypbx-extensions-table td {
    padding-block: 0.62rem;
    vertical-align: middle;
}

.crazypbx-auto-attendants-name {
    color: var(--cpe-text);
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
}

.crazypbx-auto-attendants-menu-summary {
    color: var(--cpe-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    min-width: 9rem;
}

.crazypbx-auto-attendants-options {
    display: grid;
    gap: 0.75rem;
}

.crazypbx-auto-attendants-option-row {
    align-items: start;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--cpe-border);
    border-radius: 1rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(6.5rem, 0.45fr) minmax(16rem, 1fr) auto;
    padding: 0.8rem;
}

.crazypbx-auto-attendants-option-row .crazypbx-extensions-icon-btn {
    margin-top: 1.65rem;
}

/* Destination overflow is now handled globally by the :has(.is-open) rule
   above .crazypbx-extensions-destination-enhanced.  The z-index here is a
   safety net so the open picker still stacks above sibling option rows. */
#crazypbx-auto-attendants-editor-modal .crazypbx-extensions-destination-enhanced.is-open {
    z-index: 2000;
}

#crazypbx-auto-attendants-editor-modal .crazypbx-extensions-destination-enhanced.is-open .crazypbx-extensions-destination-menu {
    z-index: 2001;
}

@media (max-width: 767.98px) {
    .crazypbx-auto-attendants-option-row {
        grid-template-columns: 1fr;
    }

    .crazypbx-auto-attendants-option-row .crazypbx-extensions-icon-btn {
        margin-top: 0;
        width: 100%;
    }
}

/* CrazyPBX Call Queues: compact queue-specific polish while reusing Extension components. */
.crazypbx-call-queues-page-container .crazypbx-extensions-table th,
.crazypbx-call-queues-page-container .crazypbx-extensions-table td {
    padding-block: 0.62rem;
    vertical-align: middle;
}

.crazypbx-call-queues-name {
    color: var(--cpe-text);
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
}

.crazypbx-call-queues-agents {
    display: grid;
    gap: 0.75rem;
}

.crazypbx-call-queues-agent-row {
    align-items: start;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--cpe-border);
    border-radius: 1rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(11rem, 1fr) repeat(4, minmax(5rem, 0.52fr)) minmax(10rem, 0.9fr) auto;
    padding: 0.8rem;
}

.crazypbx-call-queues-agent-flags,
.crazypbx-extensions-switch-row {
    color: var(--cpe-muted);
    display: grid;
    font-size: 0.74rem;
    font-weight: 700;
    gap: 0.35rem;
}

.crazypbx-extensions-switch-row {
    align-items: center;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--cpe-border);
    border-radius: 0.9rem;
    grid-template-columns: auto 1fr;
    min-height: 2.6rem;
    padding: 0.6rem 0.85rem;
}

.crazypbx-call-queues-agent-flags label {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    line-height: 1.15;
}

.crazypbx-call-queues-agent-row .crazypbx-extensions-icon-btn {
    margin-top: 1.65rem;
}

#crazypbx-call-queues-editor-modal .crazypbx-extensions-destination-enhanced.is-open {
    z-index: 2000;
}

#crazypbx-call-queues-editor-modal .crazypbx-extensions-destination-enhanced.is-open .crazypbx-extensions-destination-menu {
    z-index: 2001;
}

@media (max-width: 1199.98px) {
    .crazypbx-call-queues-agent-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crazypbx-call-queues-agent-row .crazypbx-extensions-icon-btn {
        margin-top: 0;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .crazypbx-call-queues-agent-row {
        grid-template-columns: 1fr;
    }
}

/* CrazyPBX Ring Groups: compact member editor using the shared Extensions system. */
.crazypbx-ring-groups-page-container .crazypbx-extensions-table th,
.crazypbx-ring-groups-page-container .crazypbx-extensions-table td {
    padding-block: 0.62rem;
    vertical-align: middle;
}

.crazypbx-ring-groups-name {
    color: var(--cpe-text);
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
}

.crazypbx-ring-groups-members {
    display: grid;
    gap: 0.75rem;
}

.crazypbx-ring-groups-member-row {
    align-items: start;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--cpe-border);
    border-radius: 1rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(8rem, 0.75fr) minmax(11rem, 1fr) minmax(10rem, 1fr) minmax(9rem, 0.85fr) minmax(5rem, 0.4fr) auto;
    padding: 0.8rem;
}

.crazypbx-ring-groups-member-row .crazypbx-extensions-icon-btn {
    margin-top: 1.65rem;
}

.crazypbx-ring-groups-member-hints {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

#crazypbx-ring-groups-editor-modal .crazypbx-extensions-destination-enhanced.is-open {
    z-index: 2000;
}

#crazypbx-ring-groups-editor-modal .crazypbx-extensions-destination-enhanced.is-open .crazypbx-extensions-destination-menu {
    z-index: 2001;
}

@media (max-width: 1199.98px) {
    .crazypbx-ring-groups-member-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crazypbx-ring-groups-member-row .crazypbx-extensions-icon-btn {
        margin-top: 0;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .crazypbx-ring-groups-member-row {
        grid-template-columns: 1fr;
    }

    .crazypbx-ring-groups-member-hints {
        justify-content: flex-start;
    }
}

/* CrazyPBX Time Switches — rule editor + tooltip / scroll stacking */
.crazypbx-ts-page-container .crazypbx-extensions-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

.crazypbx-ts-rule-card {
    border: 1px solid var(--cpe-border, rgba(148, 163, 184, 0.35));
    border-radius: 1rem;
    position: relative;
    z-index: 1;
}

/* Add rule — stays neutral on click (no primary / error-red active state) */
#crazypbx-ts-editor-modal .crazypbx-ts-add-rule-btn {
    background-color: transparent;
    border-color: rgba(148, 163, 184, 0.55);
    color: var(--cpe-text, var(--bs-body-color));
}

#crazypbx-ts-editor-modal .crazypbx-ts-add-rule-btn:hover {
    background-color: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.55);
    color: #15803d;
}

#crazypbx-ts-editor-modal .crazypbx-ts-add-rule-btn:focus-visible {
    border-color: rgba(34, 197, 94, 0.65);
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.18);
    color: #15803d;
}

#crazypbx-ts-editor-modal .crazypbx-ts-add-rule-btn:active {
    background-color: rgba(148, 163, 184, 0.14) !important;
    border-color: rgba(148, 163, 184, 0.65) !important;
    color: var(--cpe-text, var(--bs-body-color)) !important;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-add-rule-btn:hover {
    color: #86efac;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-add-rule-btn:active {
    background-color: rgba(148, 163, 184, 0.16) !important;
    border-color: rgba(203, 213, 225, 0.4) !important;
    color: #e2e8f0 !important;
}

/* Weekday toggle chips — custom pills (avoid global .btn-secondary !important) */
#crazypbx-ts-editor-modal .crazypbx-ts-days-row {
    gap: 0.35rem;
}

#crazypbx-ts-editor-modal .crazypbx-ts-days-label {
    flex: 0 0 auto;
    min-width: 2.25rem;
}

#crazypbx-ts-editor-modal .crazypbx-ts-day-chip {
    align-items: center;
    background-color: rgba(148, 163, 184, 0.08);
    border: 1px dashed rgba(100, 116, 139, 0.55);
    border-radius: 999px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 500;
    justify-content: center;
    letter-spacing: 0.01em;
    line-height: 1;
    margin: 0;
    min-height: 2rem;
    min-width: 2.65rem;
    opacity: 0.82;
    padding: 0.42rem 0.55rem;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        color 0.15s ease,
        opacity 0.15s ease;
    user-select: none;
}

#crazypbx-ts-editor-modal .crazypbx-ts-day-chip:hover:not(.is-active) {
    background-color: rgba(148, 163, 184, 0.14);
    border-color: rgba(100, 116, 139, 0.75);
    color: #334155;
    opacity: 1;
}

#crazypbx-ts-editor-modal .crazypbx-ts-day-chip:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.22);
    outline: none;
}

#crazypbx-ts-editor-modal .crazypbx-ts-day-chip.is-active {
    background-color: rgba(34, 197, 94, 0.24);
    border: 1px solid #16a34a;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.18);
    color: #14532d;
    font-weight: 800;
    opacity: 1;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-day-chip:not(.is-active) {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: #71717a;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-day-chip:hover:not(.is-active) {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.28);
    color: #a1a1aa;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-day-chip.is-active {
    background-color: rgba(34, 197, 94, 0.42) !important;
    border-color: #4ade80 !important;
    box-shadow:
        0 0 0 1px rgba(74, 222, 128, 0.28),
        0 0.35rem 0.75rem rgba(34, 197, 94, 0.16);
    color: #ecfdf5 !important;
    font-weight: 800;
    opacity: 1 !important;
}

/* Weekly / span time inputs — filled value must match start field contrast */
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-time,
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-datetime,
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card input.flatpickr-input.crazypbx-ts-fp-time,
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card input.flatpickr-input.crazypbx-ts-fp-datetime {
    color: var(--cpe-text, #172033) !important;
    -webkit-text-fill-color: var(--cpe-text, #172033) !important;
    opacity: 1 !important;
}

#crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-time:placeholder-shown,
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-datetime:placeholder-shown,
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card input.flatpickr-input.crazypbx-ts-fp-time:placeholder-shown,
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card input.flatpickr-input.crazypbx-ts-fp-datetime:placeholder-shown {
    color: var(--cpe-muted, #64748b) !important;
    -webkit-text-fill-color: var(--cpe-muted, #64748b) !important;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-time,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-datetime,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card input.flatpickr-input.crazypbx-ts-fp-time,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card input.flatpickr-input.crazypbx-ts-fp-datetime {
    color: var(--cpe-text, #f4f4f5) !important;
    -webkit-text-fill-color: var(--cpe-text, #f4f4f5) !important;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-time:placeholder-shown,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-datetime:placeholder-shown,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card input.flatpickr-input.crazypbx-ts-fp-time:placeholder-shown,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card input.flatpickr-input.crazypbx-ts-fp-datetime:placeholder-shown {
    color: var(--cpe-muted, #a1a1aa) !important;
    -webkit-text-fill-color: var(--cpe-muted, #a1a1aa) !important;
}

#crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-time::placeholder,
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-datetime::placeholder {
    color: var(--cpe-muted, #64748b);
    opacity: 1;
}

#crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-time:-webkit-autofill,
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-time:-webkit-autofill:focus,
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-datetime:-webkit-autofill,
#crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-datetime:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cpe-text, #172033) !important;
    box-shadow: 0 0 0 1000px var(--cpe-card-strong, #ffffff) inset !important;
    transition: background-color 99999s ease-out 0s;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-time:-webkit-autofill,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-time:-webkit-autofill:focus,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-datetime:-webkit-autofill,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .crazypbx-ts-rule-card .crazypbx-ts-fp-datetime:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cpe-text, #f4f4f5) !important;
    box-shadow: 0 0 0 1000px var(--cpe-card-strong, #161616) inset !important;
}

.crazypbx-ts-context-msg .alert {
    border-radius: 0.75rem;
}

#crazypbx-ts-editor-modal .crazypbx-extensions-tooltip-panel.is-fixed.is-active,
#crazypbx-ts-delete-modal .crazypbx-extensions-tooltip-panel.is-fixed.is-active {
    z-index: 9999;
}

#crazypbx-ts-editor-modal .modal-dialog {
    z-index: 1056;
}

#crazypbx-ts-editor-modal .crazypbx-extensions-destination-enhanced.is-open {
    z-index: 9998;
}

#crazypbx-ts-editor-modal .crazypbx-extensions-destination-enhanced.is-open .crazypbx-extensions-destination-menu {
    z-index: 9999;
}

/* Flatpickr for time-switch rules is appended to the modal root to escape the scrollable body. */
.crazypbx-ts-rule-card .flatpickr-calendar {
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.18);
    margin-top: 0.25rem;
}

.crazypbx-ts-rule-card .flatpickr-wrapper {
    display: block;
    width: 100%;
}

#crazypbx-ts-editor-modal .crazypbx-ts-flatpickr-calendar,
body > .crazypbx-ts-flatpickr-calendar {
    box-shadow: 0 0.65rem 1.8rem rgba(0, 0, 0, 0.24);
    z-index: 11000 !important;
}

#crazypbx-ts-editor-modal .crazypbx-ts-flatpickr-calendar.open,
body > .crazypbx-ts-flatpickr-calendar.open {
    z-index: 11000 !important;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-calendar,
[data-theme-mode="dark"] body > .crazypbx-ts-flatpickr-calendar {
    background: #1e1e1e;
    border-color: #3f3f46;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
    color: #e4e4e7;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-day {
    color: #e4e4e7;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-day:hover,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-day:focus {
    background: #3f3f46;
    border-color: #52525b;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-day.selected,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-day.startRange,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-day.endRange {
    background: #22c55e;
    border-color: #16a34a;
    color: #052e16;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-months .flatpickr-month,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-current-month input.cur-year {
    color: #f4f4f5;
    fill: #f4f4f5;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-weekdays {
    color: #a1a1aa;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-time {
    border-color: #3f3f46;
}

[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-time input,
[data-theme-mode="dark"] #crazypbx-ts-editor-modal .flatpickr-am-pm {
    color: #e4e4e7;
}

.crazypbx-ts-dial-help {
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid var(--cpe-border, rgba(148, 163, 184, 0.25));
    border-radius: 1rem;
}

.crazypbx-ts-dial-help-top {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
}

.crazypbx-ts-dial-help-title {
    font-weight: 700;
}

/* ── CrazyPBX Sounds module ─────────────────────────────────────────────── */

/* Page container — scoped typography */
.crazypbx-sounds-page-container {
    container-type: inline-size;
}

/* Category filter tabs */
.crazypbx-sounds-filter-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    justify-content: space-between;
}

.crazypbx-sounds-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.crazypbx-sounds-tab {
    background: rgba(148, 163, 184, 0.07);
    border: 1px solid var(--cpe-border, rgba(148, 163, 184, 0.2));
    border-radius: 0.55rem;
    color: var(--cpe-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 0.79rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.4rem 0.85rem;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
    white-space: nowrap;
}

.crazypbx-sounds-tab:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.35);
    color: var(--cpe-text, #e2e8f0);
}

.crazypbx-sounds-tab.is-active {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.55);
    color: #a5b4fc;
    font-weight: 600;
}

/* Search input */
.crazypbx-sounds-search-input {
    min-width: 200px;
    width: 230px;
}

/* Category badges */
.crazypbx-sounds-badge {
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

.crazypbx-sounds-badge.is-music {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
}

.crazypbx-sounds-badge.is-announcements {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}

.crazypbx-sounds-badge.is-ivr {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
}

.crazypbx-sounds-badge.is-voicemail {
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
}

.crazypbx-sounds-badge.is-ringtones {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.crazypbx-sounds-badge.is-other {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
}

/* Table cell typography */
.crazypbx-sounds-name {
    font-size: 0.88rem;
}

.crazypbx-sounds-description {
    font-size: 0.82rem;
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* Row actions */
/* Danger variant for shared icon-btn — used by sounds delete action */
.crazypbx-extensions-icon-btn-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* File drop area */
.crazypbx-sounds-file-area {
    position: relative;
}

.crazypbx-sounds-file-input {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
    cursor: pointer;
}

.crazypbx-sounds-file-label {
    align-items: center;
    background: rgba(148, 163, 184, 0.05);
    border: 2px dashed var(--cpe-border, rgba(148, 163, 184, 0.25));
    border-radius: 0.7rem;
    color: var(--cpe-text-muted, #94a3b8);
    cursor: pointer;
    display: flex;
    font-size: 0.87rem;
    gap: 0.5rem;
    justify-content: center;
    min-height: 56px;
    padding: 0.75rem 1rem;
    transition: background 0.14s, border-color 0.14s;
    width: 100%;
}

.crazypbx-sounds-file-area:hover .crazypbx-sounds-file-label,
.crazypbx-sounds-file-input:focus + .crazypbx-sounds-file-label {
    background: rgba(99, 102, 241, 0.07);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

/* Delete confirmation warning box */
.crazypbx-sounds-delete-warning {
    align-items: flex-start;
    background: rgba(239, 68, 68, 0.07);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 0.75rem;
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
}

.crazypbx-sounds-delete-warning-icon {
    color: #f87171;
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1.4;
}

/* Player wrap */
.crazypbx-sounds-player-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.crazypbx-sounds-audio-element {
    border-radius: 0.6rem;
    width: 100%;
}

.crazypbx-sounds-player-hint {
    font-size: 0.82rem;
    margin: 0;
}

/* Modal overflow — prevent tooltip/dropdown clipping */
#crazypbx-sounds-editor-modal .crazypbx-extensions-modal-panel,
#crazypbx-sounds-editor-modal .crazypbx-extensions-modal-body {
    overflow: visible;
}

#crazypbx-sounds-upload-modal .crazypbx-extensions-modal-panel,
#crazypbx-sounds-upload-modal .crazypbx-extensions-modal-body {
    overflow: visible;
}

/* Tooltip z-index within modals */
#crazypbx-sounds-editor-modal .crazypbx-extensions-tooltip-panel,
#crazypbx-sounds-upload-modal .crazypbx-extensions-tooltip-panel,
#crazypbx-sounds-delete-modal .crazypbx-extensions-tooltip-panel {
    z-index: 2100;
}

/* Status notice visibility helper */
.crazypbx-extensions-notice {
    display: none;
    font-size: 0.86rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.55rem;
}

.crazypbx-extensions-notice.is-visible {
    display: block;
}

.crazypbx-extensions-notice.is-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.crazypbx-extensions-notice.is-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
}

/* CrazyPBX Settings Management */
.crazypbx-settings-page-container {
    overflow: visible;
}

.crazypbx-settings-hero {
    overflow: visible;
}

.crazypbx-settings-stats .crazypbx-extensions-card strong {
    font-size: 0.98rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crazypbx-settings-layout {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
}

.crazypbx-settings-card {
    overflow: visible;
}

.crazypbx-settings-card-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--cpe-border);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin: -0.1rem -0.1rem 0.85rem;
    padding-bottom: 0.75rem;
}

.crazypbx-settings-card-head h3 {
    color: var(--cpe-text);
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: -0.02em;
    margin: 0;
}

.crazypbx-settings-kicker {
    color: var(--cpe-red);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    margin: 0 0 0.18rem;
    text-transform: uppercase;
}

.crazypbx-settings-form {
    display: grid;
    gap: 0.8rem;
}

.crazypbx-settings-two-col {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crazypbx-settings-status-toggle {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(100, 116, 139, 0.08), rgba(15, 23, 42, 0.02)),
        var(--cpe-card-strong);
    border: 1px solid var(--cpe-border);
    border-radius: 1rem;
    cursor: pointer;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 4.55rem;
    padding: 0.78rem 0.85rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.crazypbx-settings-status-toggle:hover,
.crazypbx-settings-status-toggle:focus-within {
    border-color: color-mix(in srgb, var(--cpe-cyan) 40%, var(--cpe-border));
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--cpe-cyan) 13%, transparent);
    transform: translateY(-1px);
}

.crazypbx-settings-status-toggle.is-active {
    background:
        linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(6, 182, 212, 0.06)),
        var(--cpe-card-strong);
    border-color: color-mix(in srgb, var(--cpe-green) 36%, var(--cpe-border));
}

.crazypbx-settings-status-copy {
    align-items: center;
    display: flex;
    gap: 0.7rem;
    min-width: 0;
}

.crazypbx-settings-status-copy strong {
    color: var(--cpe-text);
    display: block;
    font-size: 0.88rem;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.crazypbx-settings-status-copy small {
    color: var(--cpe-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0.12rem;
}

.crazypbx-settings-status-icon {
    align-items: center;
    background: rgba(100, 116, 139, 0.13);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 0.75rem;
    color: var(--cpe-muted);
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.15rem;
    justify-content: center;
    width: 2.15rem;
}

.crazypbx-settings-status-toggle.is-active .crazypbx-settings-status-icon {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.28);
    color: #059669;
}

.crazypbx-settings-toggle-input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.crazypbx-settings-toggle-control {
    align-items: center;
    background: rgba(100, 116, 139, 0.24);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 999px;
    display: inline-flex;
    height: 1.75rem;
    padding: 0.18rem;
    transition: background 160ms ease, border-color 160ms ease;
    width: 3.05rem;
}

.crazypbx-settings-toggle-control span {
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 0.25rem 0.55rem rgba(15, 23, 42, 0.18);
    display: block;
    height: 1.28rem;
    transition: transform 160ms ease;
    width: 1.28rem;
}

.crazypbx-settings-toggle-input:checked + .crazypbx-settings-toggle-control {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    border-color: rgba(16, 185, 129, 0.55);
}

.crazypbx-settings-toggle-input:checked + .crazypbx-settings-toggle-control span {
    transform: translateX(1.28rem);
}

.crazypbx-settings-status-pill {
    background: rgba(100, 116, 139, 0.13);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 999px;
    color: var(--cpe-muted);
    font-size: 0.72rem;
    font-weight: 850;
    min-width: 4.6rem;
    padding: 0.34rem 0.58rem;
    text-align: center;
}

.crazypbx-settings-status-toggle.is-active .crazypbx-settings-status-pill {
    background: rgba(16, 185, 129, 0.13);
    border-color: rgba(16, 185, 129, 0.26);
    color: #059669;
}

.crazypbx-settings-recording {
    border: 1px solid var(--cpe-border);
    border-radius: 1rem;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0.85rem;
}

.crazypbx-settings-recording legend {
    color: var(--cpe-red);
    float: none;
    font-size: 0.78rem;
    font-weight: 850;
    margin: 0;
    padding: 0 0.35rem;
    width: auto;
}

.crazypbx-settings-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.crazypbx-settings-save-state,
.crazypbx-settings-field-message {
    color: var(--cpe-muted);
    display: block;
    font-size: 0.76rem;
    font-weight: 750;
    min-height: 1rem;
}

.crazypbx-settings-save-state.is-success,
.crazypbx-settings-field-message.is-success {
    color: #059669;
}

.crazypbx-settings-save-state.is-error,
.crazypbx-settings-field-message.is-error {
    color: #e11d48;
}

.crazypbx-settings-save-state.is-loading {
    color: var(--cpe-muted);
}

.crazypbx-settings-load-message {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(244, 63, 94, 0.04)),
        var(--cpe-card);
    border: 1px solid var(--cpe-border);
    border-radius: 0.9rem;
    color: var(--cpe-muted);
    display: none;
    font-size: 0.84rem;
    font-weight: 800;
    gap: 0.45rem;
    margin: 0 0 0.8rem;
    padding: 0.75rem 0.85rem;
}

.crazypbx-settings-load-message:not(:empty) {
    display: flex;
}

.crazypbx-settings-load-message.is-error {
    background: rgba(244, 63, 94, 0.08);
    color: #be123c;
}

.crazypbx-settings-details {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.crazypbx-settings-details > div {
    background: color-mix(in srgb, var(--cpe-card-strong) 82%, transparent);
    border: 1px solid var(--cpe-border);
    border-radius: 0.8rem;
    padding: 0.62rem 0.7rem;
}

.crazypbx-settings-details dt {
    color: var(--cpe-muted);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    margin: 0 0 0.18rem;
    text-transform: uppercase;
}

.crazypbx-settings-details dd {
    color: var(--cpe-text);
    font-size: 0.82rem;
    font-weight: 760;
    margin: 0;
    overflow-wrap: anywhere;
}
.crazypbx-settings-aside-col {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.crazypbx-settings-pricing-card {
    background: var(--cpe-card);
    border: 1px solid var(--cpe-border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.crazypbx-settings-pricing-card strong {
    display: inline !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    font-weight: 850 !important;
}

.crazypbx-settings-pricing-card:hover {
    border-color: rgba(244, 63, 94, 0.3);
    box-shadow: 0 20px 50px rgba(244, 63, 94, 0.05);
}

.crazypbx-recording-pricing-ad .pricing-ad-price {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--cpe-red);
    text-shadow: 0 2px 10px rgba(244, 63, 94, 0.15);
}

.crazypbx-recording-pricing-ad ul {
    list-style: none;
    padding-left: 0;
    margin: 1.2rem 0 0;
}

.crazypbx-recording-pricing-ad li {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cpe-text);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.crazypbx-recording-pricing-ad li:last-child {
    margin-bottom: 0;
}

[data-theme-mode="dark"] .crazypbx-settings-pricing-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme-mode="dark"] .crazypbx-settings-pricing-card:hover {
    border-color: rgba(244, 63, 94, 0.4);
    background: rgba(255, 255, 255, 0.04);
}

.crazypbx-recording-pricing-box {
    border: 1px solid var(--cpe-border);
    background: rgba(244, 63, 94, 0.04);
    border-radius: 0.85rem;
    padding: 0.85rem;
    margin: 0.8rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.crazypbx-recording-pricing-box strong {
    display: inline !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    font-weight: 850 !important;
}

.crazypbx-recording-pricing-box-details {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.crazypbx-recording-pricing-box-title {
    font-size: 0.84rem !important;
    font-weight: 850;
    color: var(--cpe-text);
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.crazypbx-recording-pricing-box-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
}

.crazypbx-recording-pricing-box-list li {
    font-size: 0.74rem;
    color: var(--cpe-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
}

.crazypbx-recording-pricing-box-price {
    text-align: right;
}

.crazypbx-recording-pricing-box-value {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--cpe-red);
    line-height: 1;
    display: block;
}

.crazypbx-recording-pricing-box-label {
    font-size: 0.65rem;
    color: var(--cpe-muted);
    font-weight: 800;
    text-transform: uppercase;
    display: block;
}

[data-theme-mode="dark"] .crazypbx-recording-pricing-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.crazypbx-settings-modal-panel {
    overflow: visible;
}

.crazypbx-settings-feature-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    overflow: visible;
}

.crazypbx-settings-feature-section h6 {
    color: var(--cpe-red);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.crazypbx-settings-feature-list {
    display: grid;
    gap: 0.45rem;
}

.crazypbx-settings-feature-list > div {
    align-items: center;
    background: rgba(100, 116, 139, 0.07);
    border: 1px solid var(--cpe-border);
    border-radius: 0.75rem;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: auto 1fr;
    padding: 0.5rem 0.65rem;
}

.crazypbx-settings-feature-list code {
    background: rgba(15, 23, 42, 0.08);
    border-radius: 0.5rem;
    color: var(--cpe-red);
    display: inline-block;
    font-weight: 850;
    padding: 0.24rem 0.42rem;
}

.crazypbx-settings-page-container .crazypbx-extensions-tooltip-panel.is-fixed.is-active,
#crazypbx-settings-feature-codes-modal .crazypbx-extensions-tooltip-panel.is-fixed.is-active {
    z-index: 9999;
}

[data-theme-mode="dark"] .crazypbx-settings-load-message {
    background:
        linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(244, 63, 94, 0.08)),
        rgba(255, 255, 255, 0.045);
}

[data-theme-mode="dark"] .crazypbx-settings-details > div,
[data-theme-mode="dark"] .crazypbx-settings-feature-list > div {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme-mode="dark"] .crazypbx-settings-feature-list code {
    background: rgba(239, 68, 68, 0.15);
    color: #fda4af;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

[data-theme-mode="dark"] .crazypbx-settings-feature-list span {
    color: #f1f5f9;
}

@media (max-width: 767.98px) {
    .crazypbx-settings-feature-body {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .crazypbx-settings-feature-section + .crazypbx-settings-feature-section {
        margin-top: 1rem;
    }
}

@media (max-width: 991.98px) {
    .crazypbx-settings-layout,
    .crazypbx-settings-two-col,
    .crazypbx-settings-recording {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .crazypbx-settings-card-head,
    .crazypbx-settings-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .crazypbx-settings-status-toggle {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .crazypbx-settings-status-pill {
        justify-self: start;
    }

    .crazypbx-settings-feature-list > div {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }
}

/* CrazyPBX Toolbox Management */
.crazypbx-toolbox-page-container {
    padding: 1.25rem;
}

.crazypbx-toolbox-hero {
    align-items: center;
    background:
        radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--cpe-cyan, #06b6d4) 18%, transparent), transparent 32%),
        var(--cpe-card, #ffffff);
    border: 1px solid var(--cpe-border, rgba(148, 163, 184, 0.25));
    border-radius: 1.15rem;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
    color: var(--cpe-text, #172033);
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    overflow: visible;
    padding: 1.15rem;
}

[data-theme-mode="dark"] .crazypbx-toolbox-hero {
    background:
        radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--cpe-cyan, #06b6d4) 22%, transparent), transparent 32%),
        linear-gradient(135deg, rgba(24, 24, 27, 0.98), rgba(39, 39, 42, 0.82));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}

[data-theme-mode="dark"] .crazypbx-toolbox-stat-card {
    background: linear-gradient(135deg, rgba(24, 24, 27, 0.98), rgba(39, 39, 42, 0.92));
    border: 1px solid rgba(161, 161, 170, 0.32);
}

[data-theme-mode="dark"] .crazypbx-toolbox-card {
    background: linear-gradient(135deg, rgba(24, 24, 27, 0.96), rgba(9, 9, 11, 0.98));
    border: 1px solid rgba(161, 161, 170, 0.35);
    border-radius: 1.15rem;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

[data-theme-mode="dark"] .crazypbx-toolbox-table-wrap {
    border: 1px solid rgba(161, 161, 170, 0.35);
    border-radius: 0.85rem;
}

[data-theme-mode="dark"] .crazypbx-toolbox-table th {
    background: rgba(48, 48, 55, 0.96);
    border-bottom: 1px solid rgba(161, 161, 170, 0.35);
}

[data-theme-mode="dark"] .crazypbx-toolbox-filter-grid .crazypbx-extensions-field-label {
    background: rgba(48, 48, 55, 0.96);
    border: 1px solid rgba(161, 161, 170, 0.45);
    border-radius: 0.75rem;
}

[data-theme-mode="dark"] .crazypbx-toolbox-filter-grid .crazypbx-extensions-input,
[data-theme-mode="dark"] .crazypbx-toolbox-filter-grid .crazypbx-extensions-select {
    background: rgba(9, 9, 11, 0.94);
    border: 1px solid rgba(161, 161, 170, 0.46);
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme-mode="dark"] .crazypbx-toolbox-filter-grid .crazypbx-extensions-input:focus,
[data-theme-mode="dark"] .crazypbx-toolbox-filter-grid .crazypbx-extensions-select:focus {
    border-color: rgba(6, 182, 212, 0.78);
    box-shadow: 0 0 0 0.18rem rgba(6, 182, 212, 0.18);
}

.crazypbx-toolbox-hero-copy {
    max-width: 760px;
}

.crazypbx-toolbox-kicker,
.crazypbx-toolbox-section-kicker {
    align-items: center;
    color: var(--cpe-cyan, #06b6d4);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 800;
    gap: 0.35rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.crazypbx-toolbox-title {
    color: var(--cpe-text, #172033);
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0.35rem 0 0.35rem;
}

.crazypbx-toolbox-subtitle,
.crazypbx-toolbox-card-head p {
    color: var(--cpe-muted, #64748b);
    font-size: 0.92rem;
    margin: 0;
}

.crazypbx-toolbox-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.crazypbx-toolbox-stats {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    margin-bottom: 0.65rem;
}

.crazypbx-toolbox-stat-card {
    align-items: center;
    display: grid;
    gap: 0.1rem 0.5rem;
    grid-template-columns: auto 1fr;
    overflow: visible;
    padding: 0.48rem 0.58rem;
}

.crazypbx-toolbox-stat-icon {
    align-items: center;
    background: color-mix(in srgb, var(--cpe-text, #172033) 8%, transparent);
    border-radius: 0.55rem;
    color: var(--cpe-muted, #64748b);
    display: inline-flex;
    font-size: 0.95rem;
    grid-row: span 2;
    height: 1.85rem;
    justify-content: center;
    width: 1.85rem;
}

.crazypbx-toolbox-stat-card.is-live .crazypbx-toolbox-stat-icon {
    background: color-mix(in srgb, var(--cpe-green, #10b981) 14%, transparent);
    color: var(--cpe-green, #10b981);
}

.crazypbx-toolbox-stat-card.is-online .crazypbx-toolbox-stat-icon {
    background: color-mix(in srgb, var(--cpe-cyan, #06b6d4) 14%, transparent);
    color: var(--cpe-cyan, #06b6d4);
}

.crazypbx-toolbox-stat-card.is-auth .crazypbx-toolbox-stat-icon {
    background: color-mix(in srgb, #a855f7 14%, transparent);
    color: #a855f7;
}

.crazypbx-toolbox-stat-label {
    color: var(--cpe-muted, #64748b);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-transform: uppercase;
}

.crazypbx-toolbox-stat-card strong {
    color: var(--cpe-text, #172033);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
}

.crazypbx-toolbox-notice {
    margin-bottom: 0.85rem;
}

.crazypbx-toolbox-card {
    overflow: visible;
    padding: 1rem;
}

.crazypbx-toolbox-card-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.crazypbx-toolbox-card-head h3 {
    align-items: center;
    color: var(--cpe-text, #172033);
    display: flex;
    flex-wrap: wrap;
    font-size: 1.08rem;
    font-weight: 850;
    gap: 0.45rem;
    margin: 0.25rem 0 0.15rem;
}

.crazypbx-toolbox-poll-pill {
    align-items: center;
    background: color-mix(in srgb, var(--cpe-cyan, #06b6d4) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cpe-cyan, #06b6d4) 22%, transparent);
    border-radius: 999px;
    color: var(--cpe-cyan, #06b6d4);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 800;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
}

.crazypbx-toolbox-table-wrap {
    border: 1px solid var(--cpe-border, rgba(148, 163, 184, 0.25));
    border-radius: 0.85rem;
    overflow-x: auto;
    overflow-y: visible;
}

.crazypbx-toolbox-table {
    border-collapse: collapse;
    min-width: 780px;
    width: 100%;
}

.crazypbx-toolbox-table th {
    background: color-mix(in srgb, var(--cpe-card-strong, #ffffff) 50%, transparent);
    border-bottom: 1px solid var(--cpe-border, rgba(148, 163, 184, 0.25));
    color: var(--cpe-muted, #64748b);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    padding: 0.78rem 0.85rem;
    text-align: left;
    text-transform: uppercase;
}

.crazypbx-toolbox-table td {
    border-top: 1px solid var(--cpe-border, rgba(148, 163, 184, 0.25));
    color: var(--cpe-text, #172033);
    font-size: 0.88rem;
    padding: 0.78rem 0.85rem;
    vertical-align: middle;
}

.crazypbx-toolbox-muted-cell {
    color: var(--cpe-muted, #64748b) !important;
}

.crazypbx-toolbox-badge {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.28rem 0.58rem;
}

.crazypbx-toolbox-badge.is-success {
    background: color-mix(in srgb, var(--cpe-green, #10b981) 14%, transparent);
    color: color-mix(in srgb, var(--cpe-green, #10b981) 90%, #000);
}

[data-theme-mode="dark"] .crazypbx-toolbox-badge.is-success {
    color: #86efac;
}

.crazypbx-toolbox-badge.is-warning {
    background: color-mix(in srgb, var(--cpe-amber, #f59e0b) 14%, transparent);
    color: color-mix(in srgb, var(--cpe-amber, #f59e0b) 90%, #000);
}

[data-theme-mode="dark"] .crazypbx-toolbox-badge.is-warning {
    color: #fcd34d;
}

.crazypbx-toolbox-badge.is-danger {
    background: color-mix(in srgb, var(--cpe-red, #f43f5e) 14%, transparent);
    color: color-mix(in srgb, var(--cpe-red, #f43f5e) 90%, #000);
}

[data-theme-mode="dark"] .crazypbx-toolbox-badge.is-danger {
    color: #fca5a5;
}

.crazypbx-toolbox-badge.is-info {
    background: color-mix(in srgb, var(--cpe-cyan, #06b6d4) 14%, transparent);
    color: color-mix(in srgb, var(--cpe-cyan, #06b6d4) 90%, #000);
}

[data-theme-mode="dark"] .crazypbx-toolbox-badge.is-info {
    color: #93c5fd;
}

.crazypbx-toolbox-badge.is-secondary {
    background: color-mix(in srgb, var(--cpe-muted, #64748b) 14%, transparent);
    color: var(--cpe-muted, #64748b);
}

[data-theme-mode="dark"] .crazypbx-toolbox-badge.is-secondary {
    color: #cbd5e1;
}

.crazypbx-toolbox-loading,
.crazypbx-toolbox-empty {
    color: var(--cpe-muted, #64748b) !important;
    text-align: center;
}

.crazypbx-toolbox-empty {
    padding: 2rem !important;
}

.crazypbx-toolbox-empty i,
.crazypbx-toolbox-empty strong,
.crazypbx-toolbox-empty span {
    display: block;
}

.crazypbx-toolbox-empty i {
    color: var(--cpe-cyan, #06b6d4);
    font-size: 1.7rem;
    margin-bottom: 0.4rem;
}

.crazypbx-toolbox-empty strong {
    color: var(--cpe-text, #172033);
    margin-bottom: 0.15rem;
}

.crazypbx-toolbox-tooltip-panel {
    z-index: 9999 !important;
}

.crazypbx-toolbox-head-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.crazypbx-toolbox-filter-grid {
    align-items: end;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
    margin-bottom: 0.85rem;
}

.crazypbx-toolbox-filter-actions {
    display: flex;
    gap: 0.5rem;
}

.crazypbx-toolbox-row-action {
    background: color-mix(in srgb, var(--cpe-cyan, #06b6d4) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cpe-cyan, #06b6d4) 26%, transparent);
    border-radius: 999px;
    color: var(--cpe-cyan, #06b6d4);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.32rem 0.65rem;
}

.crazypbx-toolbox-row-action:hover,
.crazypbx-toolbox-row-action:focus {
    background: color-mix(in srgb, var(--cpe-cyan, #06b6d4) 18%, transparent);
}

[data-theme-mode="dark"] .crazypbx-toolbox-row-action:hover,
[data-theme-mode="dark"] .crazypbx-toolbox-row-action:focus {
    color: #99f6e4;
}

.crazypbx-toolbox-modal-panel {
    overflow: visible;
}

.crazypbx-toolbox-help-section {
    margin-bottom: 1rem;
}

.crazypbx-toolbox-help-section h6 {
    color: var(--cpe-text, #172033);
    font-weight: 850;
    margin-bottom: 0.4rem;
}

.crazypbx-toolbox-help-section p {
    color: var(--cpe-muted, #64748b);
    margin-bottom: 0;
}

.crazypbx-toolbox-help-list {
    display: grid;
    gap: 0.65rem;
}

.crazypbx-toolbox-help-list > div {
    align-items: flex-start;
    background: color-mix(in srgb, var(--cpe-card-strong, #ffffff) 50%, transparent);
    border: 1px solid var(--cpe-border, rgba(148, 163, 184, 0.25));
    border-radius: 0.75rem;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 155px 1fr;
    padding: 0.75rem;
}

[data-theme-mode="dark"] .crazypbx-toolbox-help-list > div {
    background: rgba(15, 23, 42, 0.42);
}

.crazypbx-toolbox-inline-tip {
    align-items: flex-start;
    background: color-mix(in srgb, var(--cpe-cyan, #06b6d4) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cpe-cyan, #06b6d4) 22%, transparent);
    border-radius: 0.8rem;
    color: var(--cpe-cyan, #06b6d4);
    display: flex;
    gap: 0.6rem;
    padding: 0.85rem;
}

[data-theme-mode="dark"] .crazypbx-toolbox-inline-tip {
    color: #99f6e4;
}

.crazypbx-toolbox-details-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crazypbx-toolbox-detail-field {
    background: color-mix(in srgb, var(--cpe-card-strong, #ffffff) 50%, transparent);
    border: 1px solid var(--cpe-border, rgba(148, 163, 184, 0.25));
    border-radius: 0.75rem;
    min-width: 0;
    padding: 0.75rem;
}

[data-theme-mode="dark"] .crazypbx-toolbox-detail-field {
    background: rgba(15, 23, 42, 0.42);
}

.crazypbx-toolbox-detail-field.is-wide {
    grid-column: 1 / -1;
}

.crazypbx-toolbox-detail-field span {
    color: var(--cpe-muted, #64748b);
    display: block;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.crazypbx-toolbox-detail-field strong {
    color: var(--cpe-text, #172033);
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .crazypbx-toolbox-page-container {
        padding: 0.85rem;
    }

    .crazypbx-toolbox-hero,
    .crazypbx-toolbox-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .crazypbx-toolbox-hero-actions {
        justify-content: flex-start;
    }

    .crazypbx-toolbox-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crazypbx-toolbox-filter-grid,
    .crazypbx-toolbox-details-grid,
    .crazypbx-toolbox-help-list > div {
        grid-template-columns: 1fr;
    }

    .crazypbx-toolbox-filter-actions,
    .crazypbx-toolbox-head-actions {
        justify-content: flex-start;
    }
}

/* CrazyPBX Plan Management */
.crazypbx-plan-management-page-container {
    --cppm-accent: #e11d48;
    --cppm-accent-soft: rgba(225, 29, 72, 0.14);
    --cppm-card: rgba(255, 255, 255, 0.94);
    --cppm-border: rgba(148, 163, 184, 0.28);
    --cppm-text: #18181b;
    --cppm-muted: #71717a;
    color: var(--cppm-text);
    padding: 1.25rem;
}

[data-theme-mode="dark"] .crazypbx-plan-management-page-container {
    --cppm-card: rgba(24, 24, 27, 0.92);
    --cppm-border: rgba(161, 161, 170, 0.28);
    --cppm-text: #f4f4f5;
    --cppm-muted: #a1a1aa;
}

.crazypbx-plan-management-hero {
    align-items: stretch;
    background:
        radial-gradient(circle at 12% 18%, rgba(225, 29, 72, 0.18), transparent 28%),
        linear-gradient(135deg, var(--cppm-card), rgba(248, 250, 252, 0.72));
    border: 1px solid var(--cppm-border);
    border-radius: 1.35rem;
    box-shadow: 0 18px 45px rgba(24, 24, 27, 0.1);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 1.25rem;
}

[data-theme-mode="dark"] .crazypbx-plan-management-hero {
    background:
        radial-gradient(circle at 12% 18%, rgba(225, 29, 72, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(24, 24, 27, 0.98), rgba(39, 39, 42, 0.82));
}

.crazypbx-plan-management-kicker,
.crazypbx-plan-management-modal-kicker {
    align-items: center;
    color: var(--cppm-accent);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    gap: 0.4rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.crazypbx-plan-management-hero h2 {
    color: var(--cppm-text);
    font-size: clamp(1.35rem, 2.5vw, 2.05rem);
    font-weight: 850;
    margin: 0.35rem 0;
}

.crazypbx-plan-management-hero p {
    color: var(--cppm-muted);
    margin: 0;
    max-width: 58rem;
}

.crazypbx-plan-management-hero-status {
    background: rgba(225, 29, 72, 0.1);
    border: 1px solid rgba(225, 29, 72, 0.2);
    border-radius: 1rem;
    display: grid;
    min-width: min(100%, 18rem);
    padding: 1rem;
}

.crazypbx-plan-management-hero-status span,
.crazypbx-plan-management-hero-status small {
    color: var(--cppm-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.crazypbx-plan-management-hero-status strong {
    color: var(--cppm-text);
    font-size: 1rem;
}

.crazypbx-plan-management-page-message,
.crazypbx-plan-management-inline-message,
.crazypbx-plan-management-modal-message {
    display: none;
}

.crazypbx-plan-management-page-message.is-visible,
.crazypbx-plan-management-inline-message.is-visible,
.crazypbx-plan-management-modal-message.is-visible {
    border-radius: 0.85rem;
    display: block;
    font-size: 0.86rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.85rem;
}

.crazypbx-plan-management-page-message.is-error,
.crazypbx-plan-management-inline-message.is-error,
.crazypbx-plan-management-modal-message.is-error {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.28);
    color: #fecaca;
}

.crazypbx-plan-management-page-message.is-success,
.crazypbx-plan-management-inline-message.is-success,
.crazypbx-plan-management-modal-message.is-success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #bbf7d0;
}

.crazypbx-plan-management-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crazypbx-plan-management-card {
    background: linear-gradient(180deg, var(--cppm-card), rgba(248, 250, 252, 0.88));
    border: 1px solid var(--cppm-border);
    border-radius: 1.15rem;
    box-shadow: 0 16px 38px rgba(24, 24, 27, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.05rem;
    position: relative;
}

[data-theme-mode="dark"] .crazypbx-plan-management-card {
    background: linear-gradient(180deg, rgba(24, 24, 27, 0.98), rgba(9, 9, 11, 0.96));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.crazypbx-plan-management-card.is-current {
    border-color: rgba(34, 197, 94, 0.72);
    box-shadow: 0 20px 52px rgba(34, 197, 94, 0.18);
}

.crazypbx-plan-management-card-badge {
    background: linear-gradient(135deg, #22c55e, #15803d);
    border-radius: 999px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.32rem 0.65rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.crazypbx-plan-management-card-head {
    align-items: center;
    color: var(--cppm-muted);
    display: flex;
    font-size: 0.78rem;
    font-weight: 800;
    gap: 0.45rem;
    justify-content: space-between;
    text-transform: uppercase;
}

.crazypbx-plan-management-card.is-current .crazypbx-plan-management-card-head {
    padding-right: 7.75rem;
}

.crazypbx-plan-management-card-head > span:first-child {
    min-width: 0;
}

.crazypbx-plan-management-card-head .crazypbx-plan-management-tooltip-wrap {
    flex: 0 0 auto;
    margin-left: 0.35rem;
}

.crazypbx-plan-management-card h3 {
    color: var(--cppm-text);
    font-size: 1rem;
    font-weight: 800;
    margin: 0.8rem 0 0.5rem;
}

.crazypbx-plan-management-price {
    align-items: baseline;
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.crazypbx-plan-management-price strong {
    color: var(--cppm-text);
    font-size: 2rem;
    line-height: 1;
}

.crazypbx-plan-management-price span {
    color: var(--cppm-muted);
    font-size: 0.8rem;
}

.crazypbx-plan-management-list {
    display: grid;
    gap: 0.48rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.crazypbx-plan-management-list li {
    align-items: flex-start;
    color: var(--cppm-text);
    display: flex;
    font-size: 0.86rem;
    gap: 0.42rem;
}

.crazypbx-plan-management-list i,
.crazypbx-plan-management-cis i {
    color: var(--cppm-accent);
}

.crazypbx-plan-management-divider {
    background: var(--cppm-border);
    height: 1px;
    margin: 0.9rem 0;
}

.crazypbx-plan-management-card h4 {
    color: var(--cppm-text);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.crazypbx-plan-management-cis {
    color: var(--cppm-text);
    display: inline-flex;
    font-size: 0.82rem;
    gap: 0.35rem;
    margin: 0.95rem 0;
    text-decoration: underline;
    text-underline-offset: 0.16rem;
}

.crazypbx-plan-management-action,
.crazypbx-plan-management-primary-btn,
.crazypbx-plan-management-secondary-btn {
    align-items: center;
    border: 0;
    border-radius: 0.8rem;
    display: inline-flex;
    font-weight: 800;
    gap: 0.4rem;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.7rem 0.95rem;
}

.crazypbx-plan-management-action,
.crazypbx-plan-management-primary-btn {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
    margin-top: auto;
}

.crazypbx-plan-management-secondary-btn {
    background: rgba(148, 163, 184, 0.15);
    color: var(--cppm-text);
}

.crazypbx-plan-management-action:disabled {
    cursor: not-allowed;
    filter: grayscale(0.35);
    opacity: 0.76;
}

.crazypbx-plan-management-note {
    align-items: flex-start;
    background: rgba(225, 29, 72, 0.09);
    border: 1px solid rgba(225, 29, 72, 0.18);
    border-radius: 1rem;
    color: var(--cppm-muted);
    display: flex;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
}

.crazypbx-plan-management-note p {
    margin: 0;
}

.crazypbx-plan-management-modal-panel {
    background: var(--cppm-card, #18181b);
    border: 1px solid var(--cppm-border, rgba(161, 161, 170, 0.28));
    border-radius: 1.15rem;
    color: var(--cppm-text, #f4f4f5);
    overflow: visible;
}

.crazypbx-plan-management-modal-head,
.crazypbx-plan-management-modal-body,
.crazypbx-plan-management-modal-footer {
    padding: 1rem;
}

.crazypbx-plan-management-modal-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--cppm-border, rgba(161, 161, 170, 0.28));
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.crazypbx-plan-management-confirm-summary {
    background: rgba(225, 29, 72, 0.1);
    border: 1px solid rgba(225, 29, 72, 0.22);
    border-radius: 0.9rem;
    display: grid;
    margin-bottom: 0.8rem;
    padding: 0.85rem;
}

.crazypbx-plan-management-confirm-summary span,
.crazypbx-plan-management-confirm-summary small,
.crazypbx-plan-management-modal-help {
    color: var(--cppm-muted, #a1a1aa);
}

.crazypbx-plan-management-confirm-summary strong {
    color: var(--cppm-text, #f4f4f5);
}

.crazypbx-plan-management-modal-footer {
    border-top: 1px solid var(--cppm-border, rgba(161, 161, 170, 0.28));
}

.crazypbx-plan-management-tooltip-wrap {
    display: inline-flex;
    overflow: visible;
    position: relative;
}

.crazypbx-plan-management-tooltip-icon {
    align-items: center;
    background: rgba(225, 29, 72, 0.15);
    border: 1px solid rgba(225, 29, 72, 0.24);
    border-radius: 999px;
    color: var(--cppm-accent);
    cursor: help;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 900;
    height: 1.25rem;
    justify-content: center;
    width: 1.25rem;
}

.crazypbx-plan-management-tooltip-panel {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.75rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    color: #f8fafc;
    display: none;
    font-size: 0.78rem;
    line-height: 1.45;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: 0.65rem 0.75rem;
    position: fixed;
    width: max-content;
    z-index: 9999;
}

.crazypbx-plan-management-tooltip-panel.is-active {
    display: block;
}

@media (max-width: 1200px) {
    .crazypbx-plan-management-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .crazypbx-plan-management-page-container {
        padding: 0.85rem;
    }

    .crazypbx-plan-management-hero {
        flex-direction: column;
    }

    .crazypbx-plan-management-grid {
        grid-template-columns: 1fr;
    }
}

/* Products Balance History */
.products-balance-history-shell {
    padding: 1.25rem 0 0;
}

.products-balance-history-shell,
.products-balance-history-card,
.products-balance-history-card .card-body,
.products-balance-history-table-wrap {
    overflow: visible;
}

.products-balance-history-hero {
    --products-bh-hero-surface: #ffffff;
    --products-bh-hero-border: rgba(225, 29, 72, 0.16);
    --products-bh-hero-text: #172033;
    --products-bh-hero-muted: #64748b;
    --products-bh-hero-accent: #be123c;
    --products-bh-hero-pill-bg: rgba(225, 29, 72, 0.08);
    --products-bh-hero-pill-border: rgba(225, 29, 72, 0.16);
    --products-bh-hero-pill-text: #be123c;
    background:
        radial-gradient(circle at top right, rgba(225, 29, 72, 0.1), transparent 34%),
        var(--products-bh-hero-surface);
    border: 1px solid var(--products-bh-hero-border);
    border-radius: 0.95rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    color: var(--products-bh-hero-text);
    overflow: hidden;
    padding: 1.15rem 1.25rem;
    position: relative;
}

[data-theme-mode="dark"] .products-balance-history-hero {
    --products-bh-hero-surface: transparent;
    --products-bh-hero-border: rgba(244, 63, 94, 0.2);
    --products-bh-hero-text: #f4f4f5;
    --products-bh-hero-muted: rgba(255, 255, 255, 0.74);
    --products-bh-hero-accent: rgba(255, 255, 255, 0.68);
    --products-bh-hero-pill-bg: rgba(255, 255, 255, 0.1);
    --products-bh-hero-pill-border: rgba(255, 255, 255, 0.16);
    --products-bh-hero-pill-text: rgba(255, 255, 255, 0.88);
    background:
        radial-gradient(circle at top right, rgba(225, 29, 72, 0.16), transparent 34%),
        linear-gradient(135deg, #18181b 0%, #0f0f0f 56%, #241316 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.products-balance-history-hero-content {
    position: relative;
    z-index: 1;
}

.products-balance-history-eyebrow,
.products-balance-history-section-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.products-balance-history-eyebrow {
    color: var(--products-bh-hero-accent);
}

.products-balance-history-section-label {
    color: #e11d48;
}

.products-balance-history-copy {
    color: var(--products-bh-hero-muted);
    max-width: 760px;
}

.products-balance-history-account-pill {
    align-items: center;
    background: var(--products-bh-hero-pill-bg);
    border: 1px solid var(--products-bh-hero-pill-border);
    border-radius: 999px;
    color: var(--products-bh-hero-pill-text);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
}

.products-balance-history-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.95rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

[data-theme-mode="dark"] .products-balance-history-card {
    background: rgba(24, 24, 27, 0.96);
    border-color: rgba(161, 161, 170, 0.16);
}

.products-balance-history-status {
    align-items: center;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    color: #64748b;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
}

.products-balance-history-status.is-success {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.24);
    color: #16a34a;
}

.products-balance-history-status.is-error {
    background: rgba(225, 29, 72, 0.12);
    border-color: rgba(225, 29, 72, 0.24);
    color: #e11d48;
}

.products-balance-history-status.is-loading {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.24);
    color: #2563eb;
}

.products-balance-history-filter-head-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.products-balance-history-filter-toggle {
    font-weight: 700;
}

.products-balance-history-filters {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.products-balance-history-field {
    min-width: 0;
}

.products-balance-history-field-wide {
    grid-column: span 2;
}

.products-balance-history-field .form-label {
    align-items: center;
    display: inline-flex;
    font-weight: 700;
    gap: 0.35rem;
}

.products-balance-history-field-error {
    color: #e11d48;
    font-size: 0.78rem;
    margin-top: 0.32rem;
    min-height: 1rem;
}

.products-balance-history-actions {
    align-items: end;
    display: flex;
    gap: 0.5rem;
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.products-balance-history-tooltip-anchor {
    align-items: center;
    border-radius: 999px;
    color: #e11d48;
    cursor: help;
    display: inline-flex;
    font-size: 0.95rem;
    outline: none;
}

.products-balance-history-tooltip-anchor:focus-visible {
    box-shadow: 0 0 0 0.16rem rgba(225, 29, 72, 0.22);
}

.products-balance-history-tooltip {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.75rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    color: #f8fafc;
    font-size: 0.78rem;
    line-height: 1.45;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: 0.65rem 0.75rem;
    position: fixed;
    width: max-content;
    z-index: 9999;
}

.products-balance-history-inline-alert {
    border-radius: 0.75rem;
    font-size: 0.88rem;
    margin-bottom: 0.85rem;
    padding: 0.75rem 0.85rem;
}

.products-balance-history-inline-alert-error {
    background: rgba(225, 29, 72, 0.1);
    border: 1px solid rgba(225, 29, 72, 0.2);
    color: #e11d48;
}

.products-balance-history-summary {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.4rem 0.75rem;
}

.products-balance-history-summary.is-credit {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.24);
    color: #16a34a;
}

.products-balance-history-summary.is-charge {
    background: rgba(225, 29, 72, 0.1);
    border-color: rgba(225, 29, 72, 0.18);
    color: #e11d48;
}

.products-balance-history-table-wrap {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.8rem;
}

.products-balance-history-table {
    min-width: 760px;
}

.products-balance-history-table th {
    color: #64748b;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.products-balance-history-date,
.products-balance-history-balance,
.products-balance-history-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.products-balance-history-description {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.products-balance-history-description span {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.products-balance-history-value {
    font-weight: 800;
}

.products-balance-history-value.is-credit {
    color: #16a34a;
}

.products-balance-history-value.is-charge {
    color: #e11d48;
}

.products-balance-history-loading,
.products-balance-history-empty {
    align-items: center;
    color: #64748b;
    display: flex;
    gap: 0.55rem;
    justify-content: center;
    min-height: 7rem;
    padding: 1.25rem;
    text-align: center;
}

.products-balance-history-empty {
    flex-direction: column;
}

.products-balance-history-empty i {
    color: #e11d48;
    font-size: 1.6rem;
}

.products-balance-history-empty strong {
    color: #334155;
}

[data-theme-mode="dark"] .products-balance-history-empty strong {
    color: #f4f4f5;
}

.products-balance-history-pagination {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.products-balance-history-page {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.products-balance-history-modal {
    z-index: 1085;
}

.products-balance-history-detail-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.products-balance-history-detail-list div {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.75rem;
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem 0.8rem;
}

.products-balance-history-detail-list dt {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.products-balance-history-detail-list dd {
    margin: 0;
}

@media (max-width: 1199.98px) {
    .products-balance-history-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .products-balance-history-hero {
        padding: 1rem;
    }

    .products-balance-history-account-pill,
    .products-balance-history-status,
    .products-balance-history-summary {
        justify-content: center;
        width: 100%;
    }

    .products-balance-history-filter-head-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .products-balance-history-filters {
        grid-template-columns: 1fr;
    }

    .products-balance-history-field-wide {
        grid-column: span 1;
    }

    .products-balance-history-actions,
    .products-balance-history-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .products-balance-history-actions .btn,
    .products-balance-history-pagination .btn {
        width: 100%;
    }

    .products-balance-history-table-wrap {
        overflow-x: auto;
    }
}

/* Global Button Color Overrides */
.btn-success {
    background-color: #15803d !important;
    border-color: #15803d !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: #166534 !important;
    border-color: #166534 !important;
    color: #fff !important;
}

.btn-success {
    color: #15803d !important;
    border-color: #15803d !important;
    background-color: transparent !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: #15803d !important;
    border-color: #15803d !important;
    color: #fff !important;
}

.btn-warning {
    background-color: #ea580c !important;
    border-color: #ea580c !important;
    color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: #c2410c !important;
    border-color: #c2410c !important;
    color: #fff !important;
}

.btn-warning {
    color: #ea580c !important;
    border-color: #ea580c !important;
    background-color: transparent !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: #ea580c !important;
    border-color: #ea580c !important;
    color: #fff !important;
}




/* UNIFIED CRAZYPBX HERO (Added for Red Theme) */
.crazypbx-shared-hero {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem 1.75rem !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.2) !important;
}

[data-theme-mode="dark"] .crazypbx-shared-hero {
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.crazypbx-shared-hero-bg-icon {
    position: absolute !important;
    right: 5% !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(-10deg) !important;
    font-size: 8rem !important;
    opacity: 0.1 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    color: white !important;
}

.crazypbx-shared-hero > div,
.crazypbx-shared-hero > form,
.crazypbx-shared-hero > span,
.crazypbx-shared-hero > button,
.crazypbx-shared-hero > i:not(.crazypbx-shared-hero-bg-icon) {
    position: relative;
    z-index: 1;
}

/* Enforce white/light text for everything inside the hero */
.crazypbx-shared-hero h1,
.crazypbx-shared-hero h2,
.crazypbx-shared-hero h3,
.crazypbx-shared-hero h4,
.crazypbx-shared-hero h5,
.crazypbx-shared-hero h6,
.crazypbx-shared-hero [class$="-title"] {
    color: white !important;
}

.crazypbx-shared-hero p,
.crazypbx-shared-hero [class$="-subtitle"] {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Unify kicker and badge styles to contrast gracefully with the red gradient */
.crazypbx-shared-hero [class$="-kicker"],
.crazypbx-shared-hero [class*="-badge"] {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.crazypbx-shared-hero [class$="-kicker"] *,
.crazypbx-shared-hero [class*="-badge"] * {
    color: white !important;
}

/* Number Manager shared hero (blue theme) */
.number-manager-shared-hero {
    align-items: center;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
    border: none;
    border-radius: 0.75rem;
    padding: 1.25rem 1.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0.75rem;
}

[data-theme-mode="dark"] .number-manager-shared-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.number-manager-shared-hero-bg-icon {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    font-size: 8rem;
    opacity: 0.1;
    pointer-events: none;
    color: white;
}

.number-manager-hero-copy,
.number-manager-hero-actions {
    position: relative;
    z-index: 1;
}

.number-manager-kicker,
.number-manager-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 800;
    gap: 0.35rem;
}

.number-manager-kicker {
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 0.24rem 0.52rem;
    text-transform: uppercase;
}

.number-manager-title {
    font-size: clamp(1.05rem, 2.1vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0.35rem 0 0.18rem;
    color: white;
}

.number-manager-subtitle {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0;
    max-width: 38rem;
}

.number-manager-hero-actions,
.number-manager-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.number-manager-btn,
.number-manager-icon-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.85rem;
    display: inline-flex;
    font-weight: 800;
    gap: 0.4rem;
    justify-content: center;
}

.number-manager-btn {
    border-radius: 0.7rem;
    font-size: 0.72rem;
    min-height: 2rem;
    padding: 0.42rem 0.72rem;
}

.number-manager-btn-primary {
    background: #ffffff;
    color: #2563eb;
}

.number-manager-btn-primary:hover {
    background: #f1f5f9;
    color: #1d4ed8;
}

.number-manager-btn-ghost {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.number-manager-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.number-manager-stats-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0.75rem;
}

@media (max-width: 991.98px) {
    .number-manager-shared-hero {
        grid-template-columns: 1fr;
    }

    .number-manager-hero-actions,
    .number-manager-inline-help {
        justify-content: flex-start;
    }

    .number-manager-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .number-manager-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .number-manager-shared-hero {
        border-radius: 0.95rem;
    }

    .number-manager-btn {
        width: 100%;
    }
}

/* Premium Voicemail shared hero (purple theme) */
.voicemail-shared-hero {
    align-items: center;
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 0.75rem;
    padding: 1.25rem 1.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0.75rem;
}

[data-theme-mode="dark"] .voicemail-shared-hero {
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.voicemail-shared-hero-bg-icon {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    font-size: 8rem;
    opacity: 0.1;
    pointer-events: none;
    color: white;
}

.voicemail-hero-copy,
.voicemail-hero-actions {
    position: relative;
    z-index: 1;
}

.voicemail-kicker {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 800;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 0.24rem 0.52rem;
    text-transform: uppercase;
}

.voicemail-title {
    font-size: clamp(1.05rem, 2.1vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0.35rem 0 0.18rem;
    color: white;
}

.voicemail-subtitle {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0;
    max-width: 38rem;
}

.voicemail-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.voicemail-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    display: inline-flex;
    font-weight: 800;
    gap: 0.4rem;
    justify-content: center;
    font-size: 0.72rem;
    min-height: 2rem;
    padding: 0.42rem 0.72rem;
    text-decoration: none;
}

.voicemail-btn-primary {
    background: #ffffff;
    color: #7c3aed;
}

.voicemail-btn-primary:hover {
    background: #f1f5f9;
    color: #6d28d9;
}

.voicemail-btn-ghost {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.voicemail-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .voicemail-shared-hero {
        grid-template-columns: 1fr;
    }

    .voicemail-hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .voicemail-btn {
        width: 100%;
    }
}

/* UNIFIED PORTING HERO (Blue Theme) */
.porting-shared-hero {
    align-items: center;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
    border: none;
    border-radius: 0.75rem;
    padding: 1.25rem 1.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0.75rem;
}

[data-theme-mode="dark"] .porting-shared-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.porting-shared-hero-bg-icon {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    font-size: 8rem;
    opacity: 0.1;
    pointer-events: none;
    color: white;
}

.porting-hero-copy,
.porting-hero-actions {
    position: relative;
    z-index: 1;
}

.porting-kicker {
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.62rem;
    font-weight: 800;
    gap: 0.35rem;
    letter-spacing: 0.06em;
    padding: 0.24rem 0.52rem;
    text-transform: uppercase;
}

.porting-title {
    font-size: clamp(1.05rem, 2.1vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0.35rem 0 0.18rem;
    color: white;
}

.porting-subtitle {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0;
    max-width: 38rem;
}

.porting-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.porting-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    gap: 0.4rem;
    justify-content: center;
    min-height: 2rem;
    padding: 0.42rem 0.72rem;
}

.porting-btn-primary {
    background: #ffffff;
    color: #2563eb;
}

.porting-btn-primary:hover {
    background: #f1f5f9;
    color: #1d4ed8;
}

.porting-btn-ghost {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.porting-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .porting-shared-hero {
        grid-template-columns: 1fr;
    }

    .porting-hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .porting-shared-hero {
        border-radius: 0.95rem;
    }

    .porting-btn {
        width: 100%;
    }
}

/* CrazyFax settings resources */
.crazyfax-settings-layout,
.crazyfax-settings-page-container {
    position: relative;
}

.crazyfax-settings-page-container {
    padding: 1.25rem;
}

.crazyfax-settings-page-container .fax-page-card,
.crazyfax-settings-page-container .crazyfax-settings-card {
    background: var(--bs-card-bg, #ffffff);
    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);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.crazyfax-settings-page-container .fax-page-card:hover,
.crazyfax-settings-page-container .crazyfax-settings-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.crazyfax-settings-page-container .fax-hero-card,
.fax-delivery-container .fax-hero-card,
.fax-jobs-container .fax-hero-card,
.fax-send-container .fax-hero-card,
.crazyfax-resource-modal .fax-hero-card {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border: none;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.2);
    color: #ffffff;
    overflow: hidden;
}

.crazyfax-settings-page-container .fax-hero-bg-icon,
.fax-delivery-container .fax-hero-bg-icon,
.fax-jobs-container .fax-hero-bg-icon,
.fax-send-container .fax-hero-bg-icon,
.crazyfax-resource-modal .fax-hero-bg-icon {
    font-size: 8rem;
    opacity: 0.1;
    pointer-events: none;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    z-index: 0;
}

.crazyfax-settings-page-container .fax-hero-kicker,
.fax-delivery-container .fax-hero-kicker,
.fax-jobs-container .fax-hero-kicker,
.fax-send-container .fax-hero-kicker,
.crazyfax-resource-modal .fax-hero-kicker {
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 0.45rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.85rem;
    text-transform: uppercase;
}

.crazyfax-settings-page-container .fax-hero-card h2,
.crazyfax-settings-page-container .fax-hero-card p,
.fax-delivery-container .fax-hero-card h2,
.fax-delivery-container .fax-hero-card p,
.fax-jobs-container .fax-hero-card h2,
.fax-jobs-container .fax-hero-card p,
.fax-send-container .fax-hero-card h2,
.fax-send-container .fax-hero-card p,
.crazyfax-resource-modal .modal-title,
.crazyfax-resource-modal .modal-header p {
    color: #ffffff !important;
}

.crazyfax-resource-modal .modal-header p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.crazyfax-settings-page-container .fax-tab-header-icon {
    align-items: center;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 0.5rem;
    color: #7c3aed;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.crazyfax-settings-page-container .btn-fax-action,
.crazyfax-settings-page-container .btn-fax-outline,
.fax-delivery-container .btn-fax-action,
.fax-jobs-container .btn-fax-action,
.fax-send-container .btn-fax-action,
.crazyfax-resource-modal .btn-fax-action,
.crazyfax-resource-modal .btn-fax-outline {
    border-radius: var(--bs-btn-border-radius, 0.375rem);
    font-weight: 600;
    padding: var(--bs-btn-padding-y, 0.375rem) var(--bs-btn-padding-x, 0.75rem);
    width: auto;
}

.crazyfax-settings-page-container .btn-fax-action,
.fax-delivery-container .btn-fax-action,
.fax-jobs-container .btn-fax-action,
.fax-send-container .btn-fax-action,
.crazyfax-resource-modal .btn-fax-action {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border: 1px solid transparent;
    color: #ffffff;
    transition: all 0.2s ease;
}

.crazyfax-settings-page-container .btn-fax-action:hover,
.crazyfax-settings-page-container .btn-fax-action:focus,
.fax-delivery-container .btn-fax-action:hover,
.fax-delivery-container .btn-fax-action:focus,
.fax-jobs-container .btn-fax-action:hover,
.fax-jobs-container .btn-fax-action:focus,
.fax-send-container .btn-fax-action:hover,
.fax-send-container .btn-fax-action:focus,
.crazyfax-resource-modal .btn-fax-action:hover,
.crazyfax-resource-modal .btn-fax-action:focus {
    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
}

.crazyfax-settings-page-container .crazyfax-change-plan-btn {
    background: #0d6efd;
    border: 1px solid #0d6efd;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.2s ease;
}

.crazyfax-settings-page-container .crazyfax-change-plan-btn:hover,
.crazyfax-settings-page-container .crazyfax-change-plan-btn:focus {
    background: #0b5ed7;
    border-color: #0a58ca;
    color: #ffffff;
    transform: translateY(-1px);
}

.crazyfax-settings-page-container .btn-fax-outline,
.crazyfax-resource-modal .btn-fax-outline {
    border: 1px solid #4f46e5;
    color: #ffffff;
    background: #4f46e5;
    transition: all 0.2s ease;
}

.crazyfax-settings-page-container .btn-fax-outline:hover,
.crazyfax-resource-modal .btn-fax-outline:hover {
    background: #4338ca;
    color: #ffffff;
}

.crazyfax-settings-page-container .crazyfax-service-context {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.24);
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.12);
    color: var(--bs-body-color);
    transition: all 0.2s ease;
}

.crazyfax-settings-page-container .crazyfax-service-context .bg-icon {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.22);
    color: #ffffff;
}

.crazyfax-settings-page-container .crazyfax-service-context .text-muted,
.crazyfax-settings-page-container .crazyfax-service-context strong {
    color: var(--bs-body-color) !important;
}

.crazyfax-settings-page-container .crazyfax-service-context-label {
    color: var(--bs-secondary-color) !important;
}

.crazyfax-settings-page-container .btn-fax-context-action {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.36);
    color: #a78bfa;
    transition: all 0.2s ease;
}

.crazyfax-settings-page-container .btn-fax-context-action:hover,
.crazyfax-settings-page-container .btn-fax-context-action:focus {
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(167, 139, 250, 0.7);
    color: #c4b5fd;
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .fax-page-card,
[data-theme-mode="dark"] .crazyfax-settings-page-container .crazyfax-settings-card {
    background: #1a1a1a;
    border-color: #333333;
    color: #e0e0e0;
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .fax-page-card:hover,
[data-theme-mode="dark"] .crazyfax-settings-page-container .crazyfax-settings-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .fax-hero-card,
[data-theme-mode="dark"] .fax-delivery-container .fax-hero-card,
[data-theme-mode="dark"] .fax-jobs-container .fax-hero-card,
[data-theme-mode="dark"] .fax-send-container .fax-hero-card,
[data-theme-mode="dark"] .crazyfax-resource-modal .fax-hero-card {
    background: linear-gradient(135deg, #3730a3 0%, #5b21b6 100%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .fax-tab-header-icon {
    background: rgba(124, 58, 237, 0.2);
    color: #a78bfa;
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .crazyfax-service-context {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(167, 139, 250, 0.28);
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.16);
    color: #e0e0e0;
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .crazyfax-service-context .text-muted,
[data-theme-mode="dark"] .crazyfax-settings-page-container .crazyfax-service-context strong {
    color: #ffffff !important;
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .crazyfax-service-context-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .btn-fax-action,
[data-theme-mode="dark"] .fax-delivery-container .btn-fax-action,
[data-theme-mode="dark"] .fax-jobs-container .btn-fax-action,
[data-theme-mode="dark"] .fax-send-container .btn-fax-action,
[data-theme-mode="dark"] .crazyfax-resource-modal .btn-fax-action {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
    color: #ffffff;
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .btn-fax-action:hover,
[data-theme-mode="dark"] .crazyfax-settings-page-container .btn-fax-action:focus,
[data-theme-mode="dark"] .fax-delivery-container .btn-fax-action:hover,
[data-theme-mode="dark"] .fax-delivery-container .btn-fax-action:focus,
[data-theme-mode="dark"] .fax-jobs-container .btn-fax-action:hover,
[data-theme-mode="dark"] .fax-jobs-container .btn-fax-action:focus,
[data-theme-mode="dark"] .fax-send-container .btn-fax-action:hover,
[data-theme-mode="dark"] .fax-send-container .btn-fax-action:focus,
[data-theme-mode="dark"] .crazyfax-resource-modal .btn-fax-action:hover,
[data-theme-mode="dark"] .crazyfax-resource-modal .btn-fax-action:focus {
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
    box-shadow: 0 4px 12px rgba(91, 33, 182, 0.4);
    color: #ffffff;
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .btn-fax-outline,
[data-theme-mode="dark"] .crazyfax-resource-modal .btn-fax-outline {
    border-color: #a78bfa;
    color: #a78bfa;
}

[data-theme-mode="dark"] .crazyfax-settings-page-container .btn-fax-outline:hover,
[data-theme-mode="dark"] .crazyfax-resource-modal .btn-fax-outline:hover {
    background: rgba(167, 139, 250, 0.1);
    color: #a78bfa;
}

.crazyfax-settings-card {
    overflow: visible;
}

.crazyfax-settings-card .tab-pane.fade {
    transition: none;
}

.crazyfax-resource-panel {
    position: relative;
}

.crazyfax-table-responsive {
    overflow: visible !important;
}

.crazyfax-resource-table thead th {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .crazyfax-resource-table thead th {
    color: #ffffff;
}

.crazyfax-inline-message {
    align-items: flex-start;
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 0.9rem;
    display: flex;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: rgba(124, 58, 237, 0.08);
    color: var(--bs-body-color);
}

.crazyfax-inline-message.is-error {
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(244, 63, 94, 0.24);
    color: #f43f5e;
}

.crazyfax-inline-message.is-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.24);
    color: #10b981;
}

.crazyfax-inline-message.is-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.24);
    color: #f59e0b;
}

.crazyfax-field-message {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    margin-top: 0.3rem;
    min-height: 1rem;
}

.crazyfax-field-message.is-error {
    color: #f43f5e;
}

.crazyfax-field-message.is-success {
    color: #10b981;
}

/* CrazyFax dashboard metric numbers — dark ink in light mode, gradient accents in dark */
.fax-stat-value {
    color: #172033;
    background: none;
    -webkit-text-fill-color: #172033;
    background-clip: border-box;
    -webkit-background-clip: border-box;
}

[data-theme-mode="light"] .fax-stat-label {
    color: #64748b !important;
}

[data-theme-mode="dark"] .fax-stat-value--sent {
    background: linear-gradient(135deg, #ffffff, #a5b4fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[data-theme-mode="dark"] .fax-stat-value--received {
    background: linear-gradient(135deg, #ffffff, #86efac);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[data-theme-mode="dark"] .fax-stat-value--pages {
    background: linear-gradient(135deg, #ffffff, #93c5fd);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[data-theme-mode="dark"] .fax-stat-value--failed {
    background: linear-gradient(135deg, #fca5a5, #f87171);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.fax-empty-heading {
    color: #172033;
    font-weight: 700;
}

[data-theme-mode="dark"] .fax-empty-heading {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.crazyfax-empty-state {
    align-items: center;
    border: 1px dashed rgba(124, 58, 237, 0.25);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: center;
    min-height: 12rem;
    padding: 2rem;
    text-align: center;
}

.crazyfax-empty-state i {
    color: #7c3aed;
    font-size: 2.3rem;
}

.crazyfax-empty-state h6 {
    font-weight: 800;
    margin: 0;
}

.crazyfax-empty-state p {
    color: var(--bs-secondary-color);
    margin: 0;
}

.crazyfax-empty-state.is-compact {
    min-height: 10rem;
    padding: 1.5rem;
}

.crazyfax-service-context {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 1rem;
    padding: 1rem;
}

.crazyfax-service-context-icon,
.crazyfax-service-card-icon {
    align-items: center;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border-radius: 0.9rem;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.22);
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.25rem;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.crazyfax-service-card {
    align-items: flex-start;
    background: var(--bs-card-bg);
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 1rem;
    display: flex;
    gap: 1rem;
    height: 100%;
    padding: 1rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.crazyfax-service-card:hover {
    border-color: rgba(124, 58, 237, 0.32);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.crazyfax-service-card-body {
    min-width: 0;
    width: 100%;
}

.crazyfax-service-card h6 {
    font-weight: 800;
}

.crazyfax-service-meta {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crazyfax-service-meta dt {
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .crazyfax-service-meta dt {
    color: #ffffff;
}

.crazyfax-service-meta dd {
    font-size: 0.86rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-crazyfax-select-service].is-selected {
    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.2);
}

.crazyfax-switch-row {
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 0.8rem;
    padding: 0.85rem 0.85rem 0.85rem 2.8rem;
}

.crazyfax-status-toggle:checked {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
}

.crazyfax-status-toggle:not(:checked) {
    background-color: #f43f5e !important;
    border-color: #f43f5e !important;
}

.crazyfax-action-tooltip-panel.is-fixed.is-active,
.crazyfax-settings-page-container .custom-kb-tooltip-content,
.crazyfax-resource-modal .custom-kb-tooltip-content {
    z-index: 9999;
}

.crazyfax-action-tooltip-panel.is-fixed.is-active {
    position: fixed;
}

.crazyfax-resource-modal .crazyfax-action-tooltip-panel.is-fixed.is-active {
    background-clip: padding-box;
    max-width: calc(100vw - 1rem);
    overflow-wrap: break-word;
    pointer-events: auto !important;
    visibility: visible !important;
    white-space: normal !important;
    z-index: 1300 !important;
    opacity: 1 !important;
}

.crazyfax-resource-modal .crazyfax-action-tooltip-panel.is-fixed.is-below::after {
    bottom: auto !important;
    top: -12px !important;
    border-color: transparent transparent #000000 transparent !important;
}

.crazyfax-resource-modal,
#crazyfax-confirm-delete-modal {
    z-index: 10050 !important;
}

.crazyfax-resource-modal .modal-dialog,
#crazyfax-confirm-delete-modal .modal-dialog {
    position: relative;
    z-index: 10051;
}

body:has(.crazyfax-resource-modal.show) .modal-backdrop,
body:has(#crazyfax-confirm-delete-modal.show) .modal-backdrop {
    z-index: 10040 !important;
}

.crazyfax-resource-modal .crazyfax-action-tooltip-panel.is-fixed.is-active {
    z-index: 10070 !important;
}

.crazyfax-resource-modal .modal-content {
    border-radius: 1rem;
    display: flex;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: visible;
}

.crazyfax-resource-modal .modal-content > .crazyfax-resource-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.crazyfax-resource-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.crazyfax-resource-modal .modal-footer {
    background: var(--bs-modal-bg);
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
    gap: 0.5rem;
    margin-top: 0;
    padding-top: 0.75rem !important;
}

[data-theme-mode="dark"] .crazyfax-resource-modal .modal-footer {
    background: #1a1a1a;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.35);
}

[data-theme-mode="dark"] .crazyfax-inline-message:not(.is-error):not(.is-success):not(.is-warning) {
    background: rgba(124, 58, 237, 0.14);
    border-color: rgba(167, 139, 250, 0.22);
    color: #e9d5ff;
}

[data-theme-mode="dark"] .crazyfax-empty-state,
[data-theme-mode="dark"] .crazyfax-switch-row,
[data-theme-mode="dark"] .crazyfax-service-context,
[data-theme-mode="dark"] .crazyfax-service-card {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme-mode="dark"] .crazyfax-empty-state p,
[data-theme-mode="dark"] .crazyfax-empty-state.text-muted,
[data-theme-mode="dark"] .crazyfax-empty-state .text-muted,
[data-theme-mode="dark"] .crazyfax-settings-page-container .text-muted,
[data-theme-mode="dark"] .crazyfax-settings-card .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme-mode="dark"] .crazyfax-empty-state h6 {
    color: #ffffff !important;
}

/* =========================================================================
   CrazyFax Resource Modal – Light Mode Text Visibility
   The inline <style> blocks in modal PHP files scope white text to dark mode.
   These rules serve as a global safety net for light mode readability.
   ========================================================================= */
[data-theme-mode="light"] .crazyfax-resource-modal .modal-body {
    background: var(--bs-modal-bg, #ffffff) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .crazyfax-resource-modal .modal-body label,
[data-theme-mode="light"] .crazyfax-resource-modal .modal-body .form-label {
    color: #475569 !important;
}

[data-theme-mode="light"] .crazyfax-resource-modal .modal-body .form-control,
[data-theme-mode="light"] .crazyfax-resource-modal .modal-body .form-select {
    color: #172033 !important;
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme-mode="light"] .crazyfax-resource-modal .modal-body .form-control::placeholder {
    color: #94a3b8 !important;
}

[data-theme-mode="light"] .crazyfax-resource-modal .modal-body .form-control:disabled,
[data-theme-mode="light"] .crazyfax-resource-modal .modal-body .form-control[readonly],
[data-theme-mode="light"] .crazyfax-resource-modal .modal-body .form-select:disabled {
    color: #697386 !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
}

[data-theme-mode="light"] .crazyfax-resource-modal .modal-body .form-text,
[data-theme-mode="light"] .crazyfax-resource-modal .modal-body .text-muted {
    color: #697386 !important;
}

[data-theme-mode="light"] .crazyfax-resource-modal .modal-body h6 {
    color: #172033 !important;
}

[data-theme-mode="light"] .crazyfax-resource-modal .modal-body p {
    color: #334155 !important;
}

[data-theme-mode="light"] .crazyfax-resource-modal .modal-body .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-theme-mode="light"] .crazyfax-resource-modal .modal-footer {
    background: var(--bs-modal-bg, #ffffff) !important;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.06);
}

.crazyfax-settings-page-container .nav-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.crazyfax-settings-page-container .nav-link {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .crazyfax-settings-page-container {
        padding: 0.75rem;
    }

    .crazyfax-resource-modal .modal-dialog {
        margin: 0.5rem;
    }

    .crazyfax-resource-modal .modal-content {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .crazyfax-resource-modal .modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .crazyfax-resource-modal .modal-footer .btn {
        width: 100%;
    }

    .crazyfax-resource-table {
        min-width: 680px;
    }

    .crazyfax-service-card {
        flex-direction: column;
    }

    .crazyfax-service-meta {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Global Badge Overrides - Solid Colors Only
   Enforces solid backgrounds for all badges, overriding subtle/transparent classes.
   ========================================================================== */

/* Primary */
.badge.bg-primary-subtle, .badge.bg-primary-transparent, .badge.bg-primary {
    background-color: var(--bs-primary, #0d6efd) !important;
    color: #ffffff !important;
}

/* Secondary */
.badge.bg-secondary-subtle, .badge.bg-secondary-transparent, .badge.bg-secondary {
    background-color: var(--bs-secondary, #6c757d) !important;
    color: #ffffff !important;
}

/* Success */
.badge.bg-success-subtle, .badge.bg-success-transparent, .badge.bg-success {
    background-color: var(--bs-success, #198754) !important;
    color: #ffffff !important;
}

/* Danger */
.badge.bg-danger-subtle, .badge.bg-danger-transparent, .badge.bg-danger {
    background-color: var(--bs-danger, #dc3545) !important;
    color: #ffffff !important;
}

/* Warning */
.badge.bg-warning-subtle, .badge.bg-warning-transparent, .badge.bg-warning {
    background-color: var(--bs-warning, #ffc107) !important;
    color: #000000 !important;
}

/* Info */
.badge.bg-info-subtle, .badge.bg-info-transparent, .badge.bg-info {
    background-color: var(--bs-info, #0dcaf0) !important;
    color: #000000 !important;
}

/* Dark */
.badge.bg-dark-subtle, .badge.bg-dark-transparent, .badge.bg-dark {
    background-color: var(--bs-dark, #212529) !important;
    color: #ffffff !important;
}

/* Light */
.badge.bg-light-subtle, .badge.bg-light-transparent, .badge.bg-light {
    background-color: var(--bs-light, #f8f9fa) !important;
    color: #000000 !important;
}

/* CrazyPBX Porting Badges */
.crazypbx-porting-badge.is-success {
    background-color: var(--bs-success, #198754) !important;
    color: #ffffff !important;
}
.crazypbx-porting-badge.is-warning {
    background-color: var(--bs-warning, #ffc107) !important;
    color: #000000 !important;
}
.crazypbx-porting-badge.is-danger {
    background-color: var(--bs-danger, #dc3545) !important;
    color: #ffffff !important;
}
.crazypbx-porting-badge.is-info, 
.crazypbx-porting-badge.is-secondary {
    background-color: var(--bs-secondary, #6c757d) !important;
    color: #ffffff !important;
}

/* 
 * Global Modal Stacking Fix 
 * Ensures all modals and their backdrops overlay everything else on the page, 
 * including elements with transform/hover induced high z-indexes (like cards).
 */
.modal-backdrop {
    z-index: 9999990 !important;
}
.modal {
    z-index: 9999995 !important;
}
.wholesale-trunks-drawer-body,
.wholesale-carrier-trunks-drawer-body,
[class*="wholesale-"][class*="-drawer"],
[class*="wholesale-"][class*="-drawer-body"] {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

.wholesale-trunks-drawer,
.wholesale-carrier-trunks-drawer {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

[class*="wholesale-"][class*="-drawer"] .custom-kb-tooltip-content {
    max-width: 320px;
}

/* Global Wholesale Drawer Elevation Fix */
[class*="wholesale-"][class*="-drawer"] {
    z-index: 999990 !important;
}
[class*="wholesale-"][class*="-drawer-overlay"] {
    z-index: 999980 !important;
}

/* Carrier trunk detail — SIP registration gateways */
.wct-registrations-panel {
    padding: 0.25rem 0 0.5rem;
}

.wct-registrations-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0.75rem 0 0.5rem;
}

.wct-registrations-table th,
.wct-registrations-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.wct-registrations-table td:nth-child(2),
.wct-registrations-table td:nth-child(3) {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wct-registrations-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
}

.wct-registrations-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.025);
    padding: 0.875rem;
    margin-bottom: 0.75rem;
}

.wct-registrations-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.wct-registrations-card-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.wct-registrations-card-body {
    display: grid;
    gap: 0.625rem;
}

.wct-registrations-empty-state {
    margin-top: 0.5rem;
}

.wct-registrations-ops-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.5rem;
}

[data-theme-mode="light"] .wct-registrations-ops-list li {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.wct-registrations-status-table tr.wct-registrations-status-ok {
    background: rgba(34, 197, 94, 0.08);
}

.wct-registrations-status-table tr.wct-registrations-status-error {
    background: rgba(239, 68, 68, 0.08);
}

[data-theme-mode="dark"] .wct-registrations-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="light"] .wct-registrations-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 767.98px) {
    .wct-registrations-intro {
        width: 100%;
    }
}

/* 
 * Safe Tooltip Alignment in Wholesale Drawers
 * Default tooltips in wholesale drawer bodies to flow inwards/to the right (left-aligned)
 * to prevent clipping on the left edge.
 */
[class*="wholesale-"][class*="-drawer-body"] .custom-kb-tooltip-content {
    left: -10px !important;
    right: auto !important;
    transform: none !important;
}
[class*="wholesale-"][class*="-drawer-body"] .custom-kb-tooltip-content::after {
    left: 16px !important;
    right: auto !important;
    margin-left: 0 !important;
}

/* 
 * Automatically align tooltips to the left (expanding to the right) if they are 
 * located on the right side of any wholesale drawer body to prevent horizontal clipping.
 */
[class*="wholesale-"][class*="-drawer-body"] .d-flex .form-check:nth-child(n+2) .custom-kb-tooltip-content,
[class*="wholesale-"][class*="-drawer-body"] .d-flex .custom-kb-tooltip-wrapper:nth-child(n+2) .custom-kb-tooltip-content,
[class*="wholesale-"][class*="-drawer-body"] .row [class*="col-"]:nth-child(n+2) .custom-kb-tooltip-content {
    left: auto !important;
    right: -10px !important;
    transform: none !important;
}
[class*="wholesale-"][class*="-drawer-body"] .d-flex .form-check:nth-child(n+2) .custom-kb-tooltip-content::after,
[class*="wholesale-"][class*="-drawer-body"] .d-flex .custom-kb-tooltip-wrapper:nth-child(n+2) .custom-kb-tooltip-content::after,
[class*="wholesale-"][class*="-drawer-body"] .row [class*="col-"]:nth-child(n+2) .custom-kb-tooltip-content::after {
    left: auto !important;
    right: 16px !important;
    margin-left: 0 !important;
}

/* ── Wholesale Modern Modals ── */
.wholesale-modern-modal {
    border-radius: 0.5rem;
}

/* Wholesale Compact Form styling inside modals to reduce size and increase neatness */
.wholesale-compact-form .form-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.25rem !important;
}

.wholesale-compact-form .form-control,
.wholesale-compact-form .form-select {
    padding: 0.38rem 0.65rem !important;
    font-size: 0.82rem !important;
    border-radius: 6px !important;
    min-height: auto !important;
}

.wholesale-compact-form .row {
    --bs-gutter-x: 0.75rem !important;
}

.wholesale-compact-form .mb-3 {
    margin-bottom: 0.6rem !important;
}

.wholesale-compact-form .wct-registrations-section-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    margin-top: 0.6rem !important;
    margin-bottom: 0.35rem !important;
}

.wholesale-compact-form .form-text.fs-12 {
    font-size: 0.72rem !important;
    margin-top: 0.2rem !important;
}

.wholesale-compact-form .wct-registrations-advanced-toggle {
    margin-top: 0.4rem !important;
    font-size: 0.78rem !important;
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

.wholesale-compact-form .wct-registrations-advanced-toggle:hover {
    text-decoration: underline !important;
}

[data-theme-mode="dark"] .wholesale-modern-modal {
    background-color: #161616;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-theme-mode="dark"] .wholesale-modern-modal .modal-header,
[data-theme-mode="dark"] .wholesale-modern-modal .modal-footer {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Wholesale Modern Modal File Input Styling */
.wholesale-modern-modal input[type="file"].form-control {
    align-items: center;
    display: flex;
    min-height: 42px;
    padding: 0.28rem;
}

.wholesale-modern-modal input[type="file"].form-control::file-selector-button {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.375rem !important;
    color: #334155 !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    margin: 0 0.75rem 0 0 !important;
    min-height: 30px !important;
    padding: 0.36rem 0.75rem !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.wholesale-modern-modal input[type="file"].form-control::-webkit-file-upload-button {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.375rem !important;
    color: #334155 !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    margin: 0 0.75rem 0 0 !important;
    min-height: 30px !important;
    padding: 0.36rem 0.75rem !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.wholesale-modern-modal input[type="file"].form-control:hover::file-selector-button,
.wholesale-modern-modal input[type="file"].form-control:focus::file-selector-button {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.wholesale-modern-modal input[type="file"].form-control:hover::-webkit-file-upload-button,
.wholesale-modern-modal input[type="file"].form-control:focus::-webkit-file-upload-button {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Dark mode overrides for file inputs in modern modals */
[data-theme-mode="dark"] .wholesale-modern-modal input[type="file"].form-control {
    background-color: #111111 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eeeeee !important;
}

[data-theme-mode="dark"] .wholesale-modern-modal input[type="file"].form-control::file-selector-button {
    background: rgba(47, 125, 246, 0.14) !important;
    border: 1px solid rgba(47, 125, 246, 0.34) !important;
    color: #bfdbfe !important;
}

[data-theme-mode="dark"] .wholesale-modern-modal input[type="file"].form-control::-webkit-file-upload-button {
    background: rgba(47, 125, 246, 0.14) !important;
    border: 1px solid rgba(47, 125, 246, 0.34) !important;
    color: #bfdbfe !important;
}

[data-theme-mode="dark"] .wholesale-modern-modal input[type="file"].form-control:hover::file-selector-button,
[data-theme-mode="dark"] .wholesale-modern-modal input[type="file"].form-control:focus::file-selector-button {
    background: rgba(47, 125, 246, 0.22) !important;
    border-color: rgba(47, 125, 246, 0.54) !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .wholesale-modern-modal input[type="file"].form-control:hover::-webkit-file-upload-button,
[data-theme-mode="dark"] .wholesale-modern-modal input[type="file"].form-control:focus::-webkit-file-upload-button {
    background: rgba(47, 125, 246, 0.22) !important;
    border-color: rgba(47, 125, 246, 0.54) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Call Attempt & LCR Visualizer CSS (Dark Mode Slate Glassmorphism first)
   ========================================================================== */
.wca-drilldown-container {
    padding: 0.25rem;
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, sans-serif);
}

.wca-summary-card {
    background: rgba(29, 35, 48, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme-mode="dark"] .wca-summary-card {
    background: rgba(22, 27, 38, 0.85);
    border-color: rgba(255, 255, 255, 0.06);
}

.wca-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
}

@media (max-width: 576px) {
    .wca-info-grid {
        grid-template-columns: 1fr;
    }
}

.wca-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wca-info-label {
    font-size: 0.6875rem;
    color: #8a99ad;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.wca-info-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #f3f4f6;
}

.wca-badge-mono {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.25rem;
    color: #e5e7eb;
}

/* Timeline/Stepper styles */
.wca-timeline {
    position: relative;
    padding-left: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.wca-timeline-line {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 9px;
    width: 2px;
    background: rgba(255, 255, 255, 0.09);
    z-index: 1;
}

.wca-timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
    z-index: 2;
}

.wca-timeline-item:last-child {
    margin-bottom: 0;
}

.wca-timeline-node {
    position: absolute;
    left: -2rem;
    top: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid #555;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: bold;
    color: #fff;
    transition: all 0.2s ease-in-out;
}

/* Leg card styles */
.wca-leg-card {
    background: rgba(29, 35, 48, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.wca-leg-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Leg status specific classes */
.wca-state-completed .wca-timeline-node {
    background: hsl(142, 70%, 45%) !important;
    border-color: hsl(142, 70%, 45%) !important;
}
.wca-state-completed .wca-leg-card {
    border-left: 4px solid hsl(142, 70%, 45%) !important;
    background: rgba(34, 197, 94, 0.05) !important;
}

.wca-state-failed .wca-timeline-node {
    background: hsl(350, 80%, 55%) !important;
    border-color: hsl(350, 80%, 55%) !important;
}
.wca-state-failed .wca-leg-card {
    border-left: 4px solid hsl(350, 80%, 55%) !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

.wca-state-skipped {
    opacity: 0.7;
}
.wca-state-skipped .wca-timeline-node {
    background: #22252a !important;
    border-color: hsl(215, 15%, 55%) !important;
    color: hsl(215, 15%, 55%) !important;
}
.wca-state-skipped .wca-leg-card {
    border-left: 4px solid hsl(215, 15%, 55%) !important;
    background: rgba(100, 116, 139, 0.03) !important;
}

.wca-state-selected .wca-timeline-node {
    background: hsl(210, 100%, 56%) !important;
    border-color: hsl(210, 100%, 56%) !important;
    animation: wca-pulse 2s infinite;
}
.wca-state-selected .wca-leg-card {
    border-left: 4px solid hsl(210, 100%, 56%) !important;
    background: rgba(59, 130, 246, 0.06) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}

.wca-state-candidate .wca-timeline-node {
    background: #2b303b !important;
    border-color: #5d6680 !important;
}
.wca-state-candidate .wca-leg-card {
    border-left: 4px solid #5d6680 !important;
}

@keyframes wca-pulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.wca-leg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wca-leg-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #f3f4f6;
}

.wca-leg-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
    font-size: 0.78rem;
    color: #cbd5e1;
}

@media (max-width: 576px) {
    .wca-leg-details {
        grid-template-columns: 1fr;
    }
}

.wca-warning-banner {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    color: #fca5a5;
    font-size: 0.78rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.wca-warning-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.wca-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wca-pill-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.wca-pill-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.wca-pill-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.wca-pill-grey {
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

[data-theme-mode="dark"] .wca-leg-card {
    background: rgba(22, 27, 38, 0.6);
}

.wca-state-attempted .wca-timeline-node {
    background: hsl(38, 92%, 50%) !important;
    border-color: hsl(38, 92%, 50%) !important;
}
.wca-state-attempted .wca-leg-card {
    border-left: 4px solid hsl(38, 92%, 50%) !important;
    background: rgba(245, 158, 11, 0.06) !important;
}

.wca-attribution-card {
    background: rgba(29, 35, 48, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.wca-attribution-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wca-attribution-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1.25rem;
}

@media (max-width: 576px) {
    .wca-attribution-grid {
        grid-template-columns: 1fr;
    }
}

.wca-attribution-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wca-attribution-label {
    font-size: 0.6875rem;
    color: #8a99ad;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.wca-attribution-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #f3f4f6;
}

.wca-attribution-mismatch {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.375rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #fcd34d;
}

.wca-lcr-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1rem 0 0.5rem;
    color: #b3b3b3;
}

.wca-lcr-section-excluded {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 0.5rem;
    background: rgba(100, 116, 139, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.wca-excluded-leg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8125rem;
}

.wca-excluded-leg:last-child {
    border-bottom: none;
}

.wca-excluded-leg-title {
    color: #d1d5db;
}

.wca-excluded-leg-reason {
    color: #9ca3af;
    font-size: 0.75rem;
}

.wca-failover-timeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0 0 1rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.75rem;
}

.wca-failover-step {
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    color: #e5e7eb;
}

.wca-failover-step--ok {
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.wca-failover-step--fail {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

.wca-failover-step--cdr {
    background: rgba(139, 92, 246, 0.12);
    color: #c4b5fd;
}

.wca-failover-arrow {
    color: #6b7280;
}

.wca-info-tip {
    cursor: help;
    opacity: 0.75;
}

/* ==========================================================================
   Carrier Gateway Health Status Badges & Tooltip Explicit Contrast Overrides
   ========================================================================== */

/* Premium custom health badge styles in dark/light mode */
.health-badge-up {
    background-color: rgba(34, 197, 94, 0.1) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}

.health-badge-down {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.health-badge-unknown {
    background-color: rgba(148, 163, 184, 0.1) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

/* Badge dot styling with desaturated glow */
.health-dot-up {
    background-color: #22c55e !important;
    color: #22c55e !important;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.health-dot-down {
    background-color: #ef4444 !important;
    color: #ef4444 !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

.health-dot-unknown {
    background-color: #94a3b8 !important;
    color: #94a3b8 !important;
}

/* Force high-contrast text visibility inside custom tooltips */
.custom-kb-tooltip-content,
.custom-kb-tooltip-content div,
.custom-kb-tooltip-content span,
.custom-kb-tooltip-content p {
    color: #ffffff !important;
}

/* Keep gold/amber for keepalive state header */
.custom-kb-tooltip-content strong,
.custom-kb-tooltip-content strong span,
.custom-kb-tooltip-content strong * {
    color: #ffd700 !important;
}

/* Keep muted styling for footers */
.custom-kb-tooltip-content .tooltip-footer,
.custom-kb-tooltip-content .tooltip-footer * {
    color: #aaaaaa !important;
}

/* Specific text highlight overrides inside tooltip */
.custom-kb-tooltip-content .text-success {
    color: #22c55e !important;
}

.custom-kb-tooltip-content .text-danger {
    color: #ef4444 !important;
}

.custom-kb-tooltip-content .text-muted {
    color: #aaaaaa !important;
}

/* Wholesale account detail — rate deck updates */
.wholesale-account-detail-rdu-filter {
    min-width: 11rem;
}

.wholesale-account-detail-rdu-summary-pill {
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.28);
    color: #c4b5fd;
    font-weight: 500;
}

.wholesale-account-detail-rdu-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.wholesale-account-detail-rdu-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
}

.wholesale-account-detail-rdu-card-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.wholesale-account-detail-rdu-card-meta {
    margin-bottom: 0.75rem;
}

.wholesale-account-detail-rdu-trunk-table thead th {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #b3b3b3;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wholesale-account-detail-rdu-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wholesale-account-detail-rdu-badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.wholesale-account-detail-rdu-badge-pending {
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

.wholesale-account-detail-rdu-badge-active {
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
}

.wholesale-account-detail-rdu-badge-replaced,
.wholesale-account-detail-rdu-badge-superseded {
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #cbd5e1;
}

.wholesale-account-detail-rdu-badge-approval {
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}

.wholesale-account-detail-rdu-badge-approved {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #86efac;
}

.wholesale-account-detail-rdu-badge-auto {
    background: rgba(20, 184, 166, 0.14);
    border: 1px solid rgba(20, 184, 166, 0.32);
    color: #5eead4;
}

.wholesale-account-detail-rdu-badge-rejected {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.32);
    color: #fca5a5;
}

.wholesale-account-detail-rdu-badge-archive {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.28);
    color: #7dd3fc;
}

.wholesale-account-detail-rdu-badge-ack {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #86efac;
}

.wholesale-account-detail-rdu-badge-suspended {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #fca5a5;
}

.wholesale-account-detail-rdu-badge-waiting {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #fcd34d;
}

.wholesale-account-detail-rdu-detail-block {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.4rem;
    padding: 0.65rem 0.75rem;
}

@media (max-width: 767.98px) {
    .wholesale-account-detail-rdu-card-head {
        flex-direction: column;
    }

    .wholesale-account-detail-rdu-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .wholesale-account-detail-rdu-actions .btn {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   Wholesale Admin — instant navigation + async loading states
   ========================================================================== */
.wholesale-admin-nav-loading-host {
    position: relative;
}

.wholesale-admin-nav-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 13, 13, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
}

.wholesale-admin-nav-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(26, 26, 26, 0.92);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.wholesale-admin-nav-overlay-text {
    font-size: 0.875rem;
    color: #b3b3b3;
}

.wholesale-admin-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10050;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.wholesale-admin-nav-progress.is-active {
    opacity: 1;
}

.wholesale-admin-nav-progress-bar {
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.15), #8b5cf6, rgba(139, 92, 246, 0.15));
    animation: wholesaleAdminNavProgress 0.9s ease-in-out infinite;
}

@keyframes wholesaleAdminNavProgress {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

.wholesale-admin-loading-row,
.wholesale-admin-panel-loading {
    min-height: 3.5rem;
}

.wholesale-admin-kpi-loading {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

[data-theme-mode="dark"] .wholesale-admin-nav-overlay-card {
    background: rgba(22, 22, 22, 0.96);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme-mode="dark"] .wholesale-admin-nav-overlay-text {
    color: #b3b3b3;
}

.wholesale-billing-nav-card {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 16px;
    color: #f6f7fb;
    transition: border-color 0.15s ease;
}

.wholesale-billing-nav-card:hover,
.wholesale-billing-nav-card:focus-visible {
    border-color: rgba(255, 255, 255, 0.18);
    color: #f6f7fb;
}

.wholesale-billing-nav-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #0d9488;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.wholesale-billing-money {
    font-variant-numeric: tabular-nums;
}

.wholesale-billing-money--credit {
    color: #22c55e;
}

[data-theme-mode="light"] .wholesale-billing-nav-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    color: #161616;
}

[data-theme-mode="light"] .wholesale-billing-nav-card:hover,
[data-theme-mode="light"] .wholesale-billing-nav-card:focus-visible {
    border-color: rgba(0, 0, 0, 0.16);
    color: #161616;
}

/* Carrier trunk feature switch cards (Block Fake Ringing) */
.wholesale-trunk-feature-switch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(100, 116, 139, 0.25);
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
    cursor: pointer;
}

.wholesale-trunk-feature-switch-card.is-active {
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.12), 0 0 18px rgba(139, 92, 246, 0.1);
}

.wholesale-trunk-feature-switch-copy {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0.5rem;
}

.wholesale-trunk-feature-switch-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.wholesale-trunk-feature-switch-desc {
    margin: 0.375rem 0 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    line-height: 1.45;
}

.wholesale-trunk-feature-switch-tag {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.22);
}

.wholesale-trunk-feature-switch-control {
    flex: 0 0 auto;
}

.wholesale-trunk-feature-switch-control .form-check-input {
    width: 2.75rem;
    height: 1.375rem;
    cursor: pointer;
    transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out, transform 200ms ease-in-out;
}

.wholesale-trunk-feature-switch-control .form-check-input:checked {
    background-color: #6366f1;
    border-color: #6366f1;
}

.wholesale-fake-ringing-blocked-badge {
    background: rgba(249, 115, 22, 0.14);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.28);
    font-weight: 600;
}

[data-theme-mode="dark"] .wholesale-trunk-feature-switch-card {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.025);
}

[data-theme-mode="dark"] .wholesale-trunk-feature-switch-card.is-active {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.16), 0 0 22px rgba(139, 92, 246, 0.14);
}

[data-theme-mode="dark"] .wholesale-trunk-feature-switch-title {
    color: #f6f7fb;
}

[data-theme-mode="dark"] .wholesale-trunk-feature-switch-desc {
    color: #b3b3b3;
}

@media (max-width: 575.98px) {
    .wholesale-trunk-feature-switch-card {
        flex-direction: column;
        align-items: stretch;
    }

    .wholesale-trunk-feature-switch-control {
        align-self: flex-end;
    }
}

/* Wholesale ASR circuit breaker collapsed trunk form section */
.wholesale-asr-cb-section-toggle {
    border: 0;
    cursor: pointer;
    color: inherit;
}
.wholesale-asr-cb-section-toggle:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
.wholesale-asr-cb-chevron {
    transition: transform 0.15s ease;
}
.wholesale-asr-cb-section-toggle[aria-expanded="true"] .wholesale-asr-cb-chevron {
    transform: rotate(180deg);
}

/* Wholesale daily spend — 180 fake ringing block metrics */
.wholesale-spend-blocked180 {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    white-space: nowrap;
}

.wholesale-spend-blocked180-count {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.wholesale-spend-blocked180--none {
    color: var(--bs-secondary-color);
}

.wholesale-spend-blocked180--low {
    color: #64748b;
}

.wholesale-spend-blocked180--medium {
    color: #d97706;
}

.wholesale-spend-blocked180--high {
    color: #dc2626;
    font-weight: 600;
}

.wholesale-spend-blocked180-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.wholesale-spend-blocked180-kpi {
    padding: 0.85rem 1rem;
    border-radius: var(--bs-card-border-radius, 0.375rem);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
    background: var(--bs-card-bg, #fff);
    height: 100%;
}

.wholesale-spend-blocked180-kpi-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.35rem;
}

.wholesale-spend-blocked180-kpi-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.wholesale-spend-blocked180-kpi-sub {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    margin-top: 0.15rem;
}

.wholesale-spend-blocked180-kpi-delta {
    font-size: 0.72rem;
    margin-top: 0.35rem;
    color: var(--bs-secondary-color);
}

.wholesale-spend-blocked180-delta-up {
    color: #dc2626;
}

.wholesale-spend-blocked180-delta-down {
    color: #16a34a;
}

.wholesale-spend-blocked180-kpi.wholesale-spend-blocked180--low {
    border-color: rgba(100, 116, 139, 0.25);
}

.wholesale-spend-blocked180-kpi.wholesale-spend-blocked180--medium {
    border-color: rgba(217, 119, 6, 0.35);
    background: rgba(217, 119, 6, 0.04);
}

.wholesale-spend-blocked180-kpi.wholesale-spend-blocked180--high {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.05);
}

[data-theme-mode="dark"] .wholesale-spend-blocked180-kpi {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .wholesale-spend-blocked180--low {
    color: #94a3b8;
}

[data-theme-mode="dark"] .wholesale-spend-blocked180--medium {
    color: #fbbf24;
}

[data-theme-mode="dark"] .wholesale-spend-blocked180--high {
    color: #f87171;
}

[data-theme-mode="dark"] .wholesale-spend-blocked180-kpi.wholesale-spend-blocked180--medium {
    background: rgba(251, 191, 36, 0.06);
    border-color: rgba(251, 191, 36, 0.28);
}

[data-theme-mode="dark"] .wholesale-spend-blocked180-kpi.wholesale-spend-blocked180--high {
    background: rgba(248, 113, 113, 0.08);
    border-color: rgba(248, 113, 113, 0.3);
}

/* Rate deck lifecycle badges and banners */
.wholesale-rate-deck-badge-deleted {
    background: rgba(100, 116, 139, 0.18);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.25);
}

.wholesale-rate-deck-badge-banned {
    background: rgba(217, 119, 6, 0.15);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.28);
}

.wholesale-rate-deck-badge-in-use {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.wholesale-rate-deck-badge-unassigned {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.18);
}

.wholesale-rate-deck-lifecycle-banner {
    border: 1px solid rgba(217, 119, 6, 0.28);
    background: rgba(217, 119, 6, 0.08);
    color: inherit;
    border-radius: 0.375rem;
}

.wholesale-rate-deck-lifecycle-banner--deleted {
    border-color: rgba(100, 116, 139, 0.28);
    background: rgba(100, 116, 139, 0.08);
}

[data-theme-mode="dark"] .wholesale-rate-deck-badge-deleted {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.22);
}

[data-theme-mode="dark"] .wholesale-rate-deck-badge-banned {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.22);
}

[data-theme-mode="dark"] .wholesale-rate-deck-badge-in-use {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.22);
}

[data-theme-mode="dark"] .wholesale-rate-deck-badge-unassigned {
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.16);
}

.wholesale-rate-deck-badge-generated {
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.wholesale-rate-deck-badge-regenerated {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.22);
    text-decoration: none;
}

.wholesale-rate-deck-badge-regenerated:hover {
    color: #6d28d9;
    text-decoration: none;
}

.wholesale-rate-deck-badge-uploaded {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.18);
}

[data-theme-mode="dark"] .wholesale-rate-deck-badge-generated {
    background: rgba(148, 163, 184, 0.08);
    color: #b3b3b3;
    border-color: rgba(148, 163, 184, 0.16);
}

[data-theme-mode="dark"] .wholesale-rate-deck-badge-regenerated {
    background: rgba(139, 92, 246, 0.14);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.28);
}

[data-theme-mode="dark"] .wholesale-rate-deck-badge-uploaded {
    background: rgba(148, 163, 184, 0.08);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.16);
}

[data-theme-mode="dark"] .wholesale-rate-deck-lifecycle-banner {
    background: rgba(251, 191, 36, 0.06);
    border-color: rgba(251, 191, 36, 0.2);
}

[data-theme-mode="dark"] .wholesale-rate-deck-lifecycle-banner--deleted {
    background: rgba(148, 163, 184, 0.06);
    border-color: rgba(148, 163, 184, 0.18);
}

.wholesale-rate-deck-action-tooltip.custom-kb-tooltip-wrapper {
    display: inline-block;
    vertical-align: middle;
}

.wholesale-rdr-container .table-responsive,
.wholesale-rdr-card .table-responsive,
.wholesale-rate-decks-container .table-responsive {
    overflow: visible !important;
}

.wholesale-rdr-table td.text-end .wholesale-rate-deck-action-tooltip .custom-kb-tooltip-content,
.wholesale-rate-decks-table td.text-end .wholesale-rate-deck-action-tooltip .custom-kb-tooltip-content {
    width: min(320px, calc(100vw - 2rem));
}

/* Rate deck rates — CRUD drawer (hidden until .open; never in document flow) */
.wholesale-rdr-drawer:not(.open),
.wholesale-rdr-drawer-overlay:not(.open) {
    display: none !important;
}

.wholesale-rdr-drawer.open {
    position: fixed;
    top: 0;
    right: 0;
    width: 640px;
    max-width: 100vw;
    height: 100vh;
    background: var(--bs-body-bg, #fff);
    border-left: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
    z-index: 10000001;
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.wholesale-rdr-drawer-overlay.open {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000000;
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.wholesale-rdr-drawer-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.wholesale-rdr-drawer-body {
    padding: 1.25rem;
    flex: 1;
    overflow-y: auto;
}

.wholesale-rdr-drawer-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

[data-theme-mode="dark"] .wholesale-rdr-drawer {
    background: #1a1a1a;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme-mode="dark"] .wholesale-rdr-drawer-header,
[data-theme-mode="dark"] .wholesale-rdr-drawer-footer {
    border-color: #333;
}

@media (max-width: 768px) {
    .wholesale-rdr-drawer.open {
        width: 100vw;
        right: 0;
    }

    .wholesale-rdr-search-group {
        max-width: 100%;
        width: 100%;
    }
}

/* Rate decks list table — compact layout */
.wholesale-rate-decks-table {
    table-layout: fixed;
    width: 100%;
}

.wholesale-rate-decks-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #697386);
    vertical-align: middle;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    white-space: nowrap;
}

.wholesale-rate-decks-table tbody td {
    vertical-align: middle;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.wholesale-rate-decks-table .wholesale-rate-decks-col-id {
    width: 3.25rem;
}

.wholesale-rate-decks-table .wholesale-rate-decks-col-name {
    width: 22%;
    white-space: normal;
}

.wholesale-rate-decks-table .wholesale-rate-decks-col-category {
    width: 8%;
    white-space: normal;
}

.wholesale-rate-decks-table .wholesale-rate-decks-col-currency {
    width: 4.25rem;
}

.wholesale-rate-decks-table .wholesale-rate-decks-col-rates {
    width: 4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wholesale-rate-decks-table .wholesale-rate-decks-col-status {
    width: 6.5rem;
}

.wholesale-rate-decks-table .wholesale-rate-decks-col-trunks {
    width: 7.5rem;
    white-space: normal;
    font-size: 0.8125rem;
}

.wholesale-rate-decks-table .wholesale-rate-decks-col-updated {
    width: 10.5rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #697386);
    white-space: nowrap;
}

.wholesale-rate-decks-table .wholesale-rate-decks-col-actions {
    width: 11.5rem;
}

.wholesale-rate-decks-name-cell {
    min-width: 0;
    max-width: 100%;
}

.wholesale-rate-decks-name-primary {
    display: block;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wholesale-rate-decks-name-file {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--bs-secondary-color, #697386);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wholesale-rate-decks-trunk-cell {
    line-height: 1.35;
}

.wholesale-rate-decks-trunk-link {
    color: inherit;
    text-decoration: none;
}

.wholesale-rate-decks-trunk-link:hover {
    text-decoration: underline;
    color: #8b5cf6;
}

.wholesale-rate-decks-actions {
    flex-wrap: nowrap !important;
    justify-content: flex-end;
}

.wholesale-rate-decks-actions .btn {
    min-width: 2rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.wholesale-rate-decks-card .wholesale-rate-decks-toolbar-filters {
    border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}

[data-theme-mode="dark"] .wholesale-rate-decks-card .wholesale-rate-decks-toolbar-filters {
    border-top-color: rgba(255, 255, 255, 0.09);
}

.wholesale-rate-decks-group-header {
    background: rgba(0, 0, 0, 0.02) !important;
}

.wholesale-rate-decks-group-header td {
    font-size: 0.8125rem;
    font-weight: 600;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.wholesale-rate-decks-group-header--customer .wholesale-rate-decks-group-title {
    color: #15803d;
}

.wholesale-rate-decks-group-header--carrier .wholesale-rate-decks-group-title {
    color: #0e7490;
}

.wholesale-rate-decks-table tbody tr.wholesale-rate-decks-group-header:hover td {
    background: inherit !important;
}

.wholesale-rate-decks-data-row--customer td:first-child {
    border-left: 3px solid rgba(34, 197, 94, 0.45);
}

.wholesale-rate-decks-data-row--carrier td:first-child {
    border-left: 3px solid rgba(6, 182, 212, 0.45);
}

[data-theme-mode="dark"] .wholesale-rate-decks-group-header {
    background: rgba(255, 255, 255, 0.025) !important;
}

[data-theme-mode="dark"] .wholesale-rate-decks-group-header td {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

[data-theme-mode="dark"] .wholesale-rate-decks-group-header--customer .wholesale-rate-decks-group-title {
    color: #4ade80;
}

[data-theme-mode="dark"] .wholesale-rate-decks-group-header--carrier .wholesale-rate-decks-group-title {
    color: #67e8f9;
}

[data-theme-mode="dark"] .wholesale-rate-decks-data-row--customer td:first-child {
    border-left-color: rgba(34, 197, 94, 0.35);
}

[data-theme-mode="dark"] .wholesale-rate-decks-data-row--carrier td:first-child {
    border-left-color: rgba(6, 182, 212, 0.35);
}

@media (max-width: 992px) {
    .wholesale-rate-decks-table {
        table-layout: auto;
    }

    .wholesale-rate-decks-table .wholesale-rate-decks-col-name {
        min-width: 10rem;
    }
}

/* Rate Decks page layout, drawer, and tabs */
.wholesale-rate-decks-container {
    padding: 1.25rem;
}

.wholesale-rate-decks-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);
}

.wholesale-rate-decks-drawer {
    position: fixed;
    top: 0;
    right: -640px;
    width: 640px;
    max-width: 100vw;
    height: 100vh;
    background: var(--bs-body-bg, #fff);
    border-left: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
    z-index: 1060;
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.wholesale-rate-decks-drawer.open {
    right: 0;
}

.wholesale-rate-decks-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1055;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.wholesale-rate-decks-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.wholesale-rate-decks-drawer-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.wholesale-rate-decks-drawer-body {
    padding: 1.25rem;
    flex: 1;
    overflow-y: auto;
}

.wholesale-rate-decks-drawer-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.wholesale-rate-decks-search-group {
    max-width: 280px;
}

.wholesale-rate-decks-container .nav-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wholesale-rate-decks-container .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: #697386;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.wholesale-rate-decks-container .nav-tabs .nav-link.active {
    color: #8b5cf6;
    border-bottom-color: #8b5cf6;
    background: transparent;
}

.wholesale-rate-decks-container .nav-tabs .nav-link:hover:not(.active) {
    color: #eeeeee;
}

/* Tab panes — instant swap; avoid fade/stacking that leaves dim overlays visible */
.wholesale-rate-decks-container #rateDecksTabsContent > .tab-pane {
    animation: none;
}

.wholesale-rate-decks-container #rateDecksTabsContent > .tab-pane:not(.active) {
    display: none !important;
}

[data-theme-mode="dark"] .wholesale-rate-decks-card,
[data-theme-mode="dark"] .wholesale-rate-decks-drawer {
    background: #1a1a1a;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme-mode="dark"] .wholesale-rate-decks-drawer-header,
[data-theme-mode="dark"] .wholesale-rate-decks-drawer-footer {
    border-color: #333;
}

[data-theme-mode="dark"] .wholesale-rate-decks-container {
    color: #e0e0e0;
}

[data-theme-mode="dark"] .wholesale-rate-decks-container .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.015);
}

[data-theme-mode="dark"] .wholesale-rate-decks-container .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Rate decks secondary tab tables (audit trail, import logs) */
.wholesale-rate-decks-tab-table {
    width: 100%;
}

.wholesale-rate-decks-tab-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #697386);
    vertical-align: middle;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    white-space: nowrap;
}

.wholesale-rate-decks-tab-table tbody td {
    vertical-align: middle;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    border-color: var(--bs-border-color, rgba(0, 0, 0, 0.125));
}

[data-theme-mode="dark"] .wholesale-rate-decks-tab-table thead th {
    color: #b3b3b3;
    border-color: rgba(255, 255, 255, 0.09);
}

[data-theme-mode="dark"] .wholesale-rate-decks-tab-table tbody td {
    color: #eeeeee;
    border-color: rgba(255, 255, 255, 0.09);
    background-color: transparent;
}

[data-theme-mode="dark"] .wholesale-rate-decks-container .wholesale-rate-decks-tab-table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
    --bs-table-color-type: inherit;
    background-color: rgba(255, 255, 255, 0.015);
    color: #eeeeee;
}

[data-theme-mode="dark"] .wholesale-rate-decks-container .wholesale-rate-decks-tab-table.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: transparent;
    background-color: rgba(255, 255, 255, 0.04);
    color: #eeeeee;
}

#wholesale-rate-decks-rates-modal .modal-body.wholesale-rdr-container {
    padding-top: 1rem;
}

/* Rates modal — grow to fit wide tables, scroll only when viewport-bound */
#wholesale-rate-decks-rates-modal .wholesale-rate-decks-rates-modal-dialog {
    width: fit-content;
    max-width: min(calc(100vw - 1.5rem), 90rem);
    min-width: min(100%, 20rem);
    margin-left: auto;
    margin-right: auto;
}

#wholesale-rate-decks-rates-modal .modal-content {
    overflow-x: auto;
    max-width: min(calc(100vw - 1.5rem), 90rem);
}

#wholesale-rate-decks-rates-modal .wholesale-rdr-card .table-responsive {
    overflow: visible !important;
}

#wholesale-rate-decks-rates-modal .wholesale-rdr-table {
    width: max-content;
    min-width: 100%;
}

.wholesale-rdr-table th,
.wholesale-rdr-table td {
    white-space: nowrap;
}

.wholesale-rdr-table td:first-child {
    font-variant-numeric: tabular-nums;
}

.wholesale-rdr-search-group {
    max-width: 280px;
}

#wholesale-rate-decks-bulk-assign-modal .modal-body {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
}

@media (max-width: 768px) {
    .wholesale-rate-decks-drawer {
        width: 100vw;
        right: -100vw;
    }

    .wholesale-rate-decks-search-group {
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================================================
   Generate Rate Deck — prefix rules + form layout
   ============================================================================ */

.wholesale-rate-deck-generate-container {
    padding: 1.25rem;
}

.wholesale-rate-deck-generate-card {
    background: var(--bs-card-bg, #fff);
    border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color, rgba(0, 0, 0, .125));
    border-radius: var(--bs-card-border-radius, 0.375rem);
}

.wholesale-rate-deck-generate-card-header {
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
}

.wholesale-rate-deck-generate-layout-wrap {
    overflow: hidden;
}

.wholesale-rate-deck-generate-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

.wholesale-rate-deck-generate-sidebar {
    display: none;
}

.wholesale-rate-deck-generate-main {
    min-width: 0;
}

.wholesale-rate-deck-generate-main-head,
.wholesale-rate-deck-generate-main-body {
    padding: 1rem 1.25rem;
}

.wholesale-rate-deck-generate-main-head {
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
}

@media (min-width: 1200px) {
    .wholesale-rate-deck-generate-layout {
        grid-template-columns: minmax(15rem, 17.5rem) minmax(0, 1fr);
    }

    .wholesale-rate-deck-generate-sidebar {
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
        background: rgba(255, 255, 255, 0.015);
    }

    .wholesale-rate-deck-generate-sidebar-head,
    .wholesale-rate-deck-generate-sidebar-body {
        padding: 1rem 1.25rem;
    }

    .wholesale-rate-deck-generate-sidebar-head {
        border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    }

    .wholesale-rate-deck-generate-sidebar-title {
        font-size: 0.8125rem;
        font-weight: 600;
    }
}

.wholesale-rate-deck-generate-flow-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wholesale-rate-deck-generate-flow-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.wholesale-rate-deck-generate-flow-list p {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.wholesale-rate-deck-generate-flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
    flex-shrink: 0;
}

.wholesale-rate-deck-generate-step-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}

.wholesale-rate-deck-generate-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    flex-shrink: 0;
}

.wholesale-rate-deck-generate-section {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
}

.wholesale-rate-deck-generate-section:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.wholesale-rate-deck-generate-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0;
}

.wholesale-rate-deck-generate-field-group {
    height: 100%;
    padding: 0.875rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.02);
}

.wholesale-rate-deck-generate-field-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.625rem;
}

.wholesale-rate-deck-generate-sources-block.was-invalid .wholesale-rate-deck-generate-sources-invalid {
    display: block;
}

.wholesale-rate-deck-generate-sources-invalid {
    display: none;
}

.wholesale-rate-deck-generate-sources-panel {
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.02);
    max-height: 18rem;
    overflow: auto;
    width: 100%;
    min-width: 0;
}

.wholesale-rate-deck-generate-sources-panel.is-invalid {
    border-color: var(--bs-danger, #ef4444);
}

.wholesale-rate-deck-generate-sources-toolbar {
    flex-shrink: 0;
}

.wholesale-rate-deck-generate-sources-count-badge {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    font-weight: 500;
}

.wholesale-rate-deck-generate-sources-groups {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    width: 100%;
    min-width: 0;
}

.wholesale-rate-deck-generate-sources-group {
    width: 100%;
    min-width: 0;
}

.wholesale-rate-deck-generate-sources-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wholesale-rate-deck-generate-sources-group-title {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0;
    color: var(--bs-body-color, inherit);
}

.wholesale-rate-deck-generate-sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
}

.wholesale-rate-deck-generate-source-cell {
    min-width: 0;
    display: flex;
}

.wholesale-rate-deck-generate-source-check.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    padding-left: 0.75rem;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .125));
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    min-height: 3.25rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wholesale-rate-deck-generate-source-check.form-check:hover {
    border-color: rgba(139, 92, 246, 0.35);
}

.wholesale-rate-deck-generate-source-check.form-check:has(.wholesale-rate-deck-generate-source-input:checked) {
    border-color: rgba(139, 92, 246, 0.55);
    background: rgba(139, 92, 246, 0.08);
}

.wholesale-rate-deck-generate-source-check .form-check-input {
    float: none !important;
    margin-left: 0 !important;
    margin-top: 0.15rem;
    position: static;
    flex-shrink: 0;
}

.wholesale-rate-deck-generate-source-check-label.form-check-label {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    padding-left: 0;
    cursor: pointer;
}

.wholesale-rate-deck-generate-source-check-name {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.wholesale-rate-deck-generate-source-check-meta {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.wholesale-rate-deck-generate-sources-empty {
    padding: 1rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

.wholesale-rate-deck-generate-help {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

.wholesale-rate-deck-generate-info-banner {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.1);
}

.wholesale-rate-deck-generate-prefix-empty:not(.d-none) + .wholesale-rate-deck-generate-prefix-rules:empty {
    display: none;
}

.wholesale-rate-deck-generate-prefix-rule-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.375rem;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
}

.wholesale-rate-deck-generate-prefix-rule-card[data-pricing-mode="fixed"] .wholesale-rate-deck-generate-prefix-margin-fields {
    opacity: 0.5;
}

.wholesale-rate-deck-generate-prefix-pricing-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.wholesale-rate-deck-generate-prefix-pricing-fieldset legend {
    float: none;
    width: auto;
}

.wholesale-rate-deck-generate-prefix-rule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.wholesale-rate-deck-generate-prefix-rule-title {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0;
}

.wholesale-rate-deck-generate-prefix-overlap-badge,
.wholesale-rate-deck-generate-prefix-source-badge,
.wholesale-rate-deck-generate-prefix-fixed-badge {
    font-size: 0.75rem;
}

.wholesale-rate-deck-generate-prefix-sources {
    min-height: 6.5rem;
}

.wholesale-rate-deck-generate-actions {
    gap: 0.5rem;
}

.wholesale-tooltip-trigger {
    line-height: 1;
    vertical-align: baseline;
}

@media (max-width: 767.98px) {
    .wholesale-rate-deck-generate-prefix-panel {
        display: none;
    }

    .wholesale-rate-deck-generate-prefix-panel.is-open {
        display: block;
    }

    .wholesale-rate-deck-generate-actions {
        flex-direction: column;
        align-items: stretch !important;
    }

    .wholesale-rate-deck-generate-actions .btn,
    .wholesale-rate-deck-generate-actions .dropdown {
        width: 100%;
    }

    .wholesale-rate-deck-generate-actions .dropdown .dropdown-toggle {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .wholesale-rate-deck-generate-prefix-panel {
        display: block !important;
    }
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-card {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.12);
    color: #eeeeee;
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-sidebar {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.09);
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-main-head,
[data-theme-mode="dark"] .wholesale-rate-deck-generate-sidebar-head {
    border-color: rgba(255, 255, 255, 0.09);
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-container {
    color: #eeeeee;
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-section {
    border-color: rgba(255, 255, 255, 0.09);
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-field-group,
[data-theme-mode="dark"] .wholesale-rate-deck-generate-sources-panel {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.09);
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-source-check.form-check {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.09);
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-source-check.form-check:has(.wholesale-rate-deck-generate-source-input:checked) {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.45);
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-help {
    color: #b3b3b3;
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-prefix-rule-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .wholesale-rate-deck-generate-info-banner {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #eeeeee;
}

/* Rate deck regenerate modal and detail settings */
.wholesale-rate-deck-regenerate-dialog {
    max-width: 720px;
}

.wholesale-rate-deck-regenerate-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .wholesale-rate-deck-regenerate-settings-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.wholesale-rate-deck-regenerate-dl {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

.wholesale-rate-deck-regenerate-dl dt {
    color: var(--bs-secondary-color, #697386);
    margin: 0;
    font-weight: 500;
}

.wholesale-rate-deck-regenerate-dl dd {
    margin: 0;
}

.wholesale-rate-deck-regenerate-settings-panel {
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.125));
    border-radius: 0.375rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
}

.wholesale-rate-deck-regenerate-prefix-table thead th {
    font-size: 0.75rem;
    white-space: nowrap;
}

.wholesale-rate-deck-regenerate-lineage-banner,
.wholesale-rate-deck-regenerate-success-banner {
    border-radius: 0.375rem;
}

.wholesale-rate-deck-regenerate-success-content p:last-of-type {
    margin-bottom: 0;
}

.wholesale-rate-deck-regenerate-footer {
    position: sticky;
    bottom: 0;
    background: inherit;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .wholesale-rate-deck-regenerate-detail-collapse:not(.show) {
        display: none;
    }

    .wholesale-rate-deck-regenerate-detail-collapse.show {
        display: block;
    }

    #wholesale-rdr-generation-settings-collapse.collapse:not(.show) {
        display: none;
    }
}

[data-theme-mode="dark"] .wholesale-rate-deck-regenerate-settings-panel {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .wholesale-rate-deck-regenerate-dl dt {
    color: #b3b3b3;
}

[data-theme-mode="dark"] .wholesale-rate-deck-regenerate-lineage-banner {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.22);
    color: #eeeeee;
}

/* Rate deck bulk replace wizard */
.wholesale-rate-deck-replace-dialog {
    max-width: 720px;
}

.wholesale-rate-deck-replace-step {
    display: none;
}

.wholesale-rate-deck-replace-step.active {
    display: block;
}

.wholesale-rate-deck-replace-steps-nav .nav-link {
    color: var(--bs-secondary-color, #697386);
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
}

.wholesale-rate-deck-replace-steps-nav .nav-link.active {
    color: #8b5cf6;
    font-weight: 600;
}

.wholesale-rate-deck-replace-preview-summary {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.wholesale-rate-deck-replace-skipped-table-wrap {
    max-height: 220px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.375rem;
}

.wholesale-rate-deck-replace-footer {
    position: sticky;
    bottom: 0;
    background: inherit;
    z-index: 1;
}

.wholesale-rate-deck-regenerate-success-actions .form-check-label {
    font-size: 0.8125rem;
}

[data-theme-mode="dark"] .wholesale-rate-deck-replace-preview-summary {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.09);
}

[data-theme-mode="dark"] .wholesale-rate-deck-replace-skipped-table-wrap {
    border-color: rgba(255, 255, 255, 0.09);
}

/* Wholesale manual balance GST controls */
.wholesale-balance-gst-panel {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.09) !important;
}

.wholesale-balance-gst-preview {
    margin-top: 0.5rem;
}

.wholesale-balance-gst-badge {
    font-size: 0.6875rem;
    font-weight: 600;
}

.wholesale-balance-gst-settled-icon {
    color: #8b5cf6;
    cursor: help;
}

[data-theme-mode="dark"] .wholesale-balance-gst-panel {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.09) !important;
}

/* Premium Ad-Style Buy Number Button */
.ad-buy-number-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    padding: 0.45rem 0.85rem !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.ad-buy-number-btn:hover {
    background: linear-gradient(135deg, #9b6ef7 0%, #8b4efc 100%) !important;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.45), 0 0 8px rgba(139, 92, 246, 0.2) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.ad-buy-number-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25) !important;
}

.ad-buy-number-btn i {
    font-size: 0.95rem !important;
    line-height: 1 !important;
}

.ad-buy-number-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    ) !important;
    transition: none !important;
}

.ad-buy-number-btn:hover::after {
    left: 100% !important;
    transition: left 0.6s ease-in-out !important;
}

/* ==========================================================================
   GLOBAL TOGGLE AND SOLID BUTTON STYLES (CRAZYTEL STANDARD)
   ========================================================================== */

/* Ensure proper gap between switch toggles and labels */
.form-switch {
    padding-left: 3.25em;
}
.form-switch .form-check-input {
    margin-left: -3.25em;
}

/* All form switch toggles: green when checked (enabled), red when unchecked (disabled) */
.form-switch .form-check-input,
[data-theme-mode="dark"] .form-switch .form-check-input {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:checked,
[data-theme-mode="dark"] .form-switch .form-check-input:checked {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3) !important;
}

/* Ensure all outline buttons are solid color with white text */
.btn-primary,
[data-theme-mode="dark"] .btn-primary {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: #ffffff !important;
}
.btn-primary:hover,
[data-theme-mode="dark"] .btn-primary:hover {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
    color: #ffffff !important;
}

.btn-secondary,
[data-theme-mode="dark"] .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}
.btn-secondary:hover,
[data-theme-mode="dark"] .btn-secondary:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #ffffff !important;
}

.btn-success,
[data-theme-mode="dark"] .btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    color: #ffffff !important;
}
.btn-success:hover,
[data-theme-mode="dark"] .btn-success:hover {
    background-color: #157347 !important;
    border-color: #146c43 !important;
    color: #ffffff !important;
}

.btn-danger,
[data-theme-mode="dark"] .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}
.btn-danger:hover,
[data-theme-mode="dark"] .btn-danger:hover {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
    color: #ffffff !important;
}

.btn-warning,
[data-theme-mode="dark"] .btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #ffffff !important;
}
.btn-warning:hover,
[data-theme-mode="dark"] .btn-warning:hover {
    background-color: #ffca2c !important;
    border-color: #ffc720 !important;
    color: #ffffff !important;
}

.btn-info text-white,
[data-theme-mode="dark"] .btn-info text-white {
    background-color: #0dcaf0 !important;
    border-color: #0dcaf0 !important;
    color: #ffffff !important;
}
.btn-info text-white:hover,
[data-theme-mode="dark"] .btn-info text-white:hover {
    background-color: #31d2f2 !important;
    border-color: #25cff2 !important;
    color: #ffffff !important;
}

.btn-light,
[data-theme-mode="dark"] .btn-light {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}
.btn-light:hover,
[data-theme-mode="dark"] .btn-light:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #ffffff !important;
}

.btn-dark,
[data-theme-mode="dark"] .btn-dark {
    background-color: #212529 !important;
    border-color: #212529 !important;
    color: #ffffff !important;
}
.btn-dark:hover,
[data-theme-mode="dark"] .btn-dark:hover {
    background-color: #1c1f23 !important;
    border-color: #1a1e21 !important;
    color: #ffffff !important;
}

/* Premium Ring Groups — subnav, quickstart, inbound routing, tooltips */
.rg-subnav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rg-subnav-link {
    align-items: center;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid var(--rg-border, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    color: var(--rg-muted, #b3b3b3);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 600;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.rg-subnav-link:hover {
    border-color: rgba(139, 92, 246, 0.35);
    color: var(--rg-ink, #f6f7fb);
}

.rg-subnav-link.is-active {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.45);
    color: #a78bfa;
}

/* Recording Box — advertisement-style table empty states */
.rb-empty-state-cell {
    border-bottom: 0 !important;
    padding: 1.25rem 1rem !important;
    vertical-align: middle;
}

.rb-empty-state {
    position: relative;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.28) 0%, rgba(244, 63, 94, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    margin: 0.35rem auto;
    max-width: 34rem;
}

.rb-empty-state--compact {
    max-width: 28rem;
}

.rb-empty-state-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
    animation: rgAdGlowRotate 8s linear infinite;
}

.rb-empty-state-inner {
    position: relative;
    z-index: 2;
    background: var(--rb-panel, #161616);
    border-radius: 0.95rem;
    padding: 1.35rem 1.25rem;
    text-align: center;
}

.rb-empty-state-inner::after {
    content: '';
    position: absolute;
    bottom: -24px;
    right: -24px;
    width: 96px;
    height: 96px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.rb-empty-state-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 0.85rem;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.22) 0%, rgba(244, 63, 94, 0.08) 100%);
    border: 1px solid rgba(236, 72, 153, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f472b6;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.18);
}

.rb-empty-state-icon i {
    font-size: 1.35rem;
    line-height: 1;
}

.rb-empty-state-title {
    color: var(--rb-ink, #f6f7fb);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
}

.rb-empty-state-message {
    color: var(--rb-muted, #b3b3b3);
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 26rem;
}

.rb-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.rb-empty-state-actions .btn {
    min-height: 2.5rem;
    min-width: 2.75rem;
}

[data-theme-mode="light"] .rb-empty-state-inner {
    background: var(--rb-panel, #fff);
}

[data-theme-mode="light"] .rb-empty-state-title {
    color: var(--rb-ink, #172033);
}

@media (max-width: 575.98px) {
    .rb-empty-state-cell {
        padding: 0.85rem 0.5rem !important;
    }

    .rb-empty-state-inner {
        padding: 1.1rem 0.85rem;
    }

    .rb-empty-state-icon {
        width: 46px;
        height: 46px;
    }

    .rb-empty-state-title {
        font-size: 0.95rem;
    }

    .rb-empty-state-message {
        font-size: 0.85rem;
    }
}

/* Recording Box — pink subnav (mirrors ring-groups subnav) */
.rb-subnav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rb-subnav-link {
    align-items: center;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid var(--rb-border, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    color: var(--rb-muted, #b3b3b3);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.rb-subnav-link:hover {
    border-color: rgba(236, 72, 153, 0.35);
    color: var(--rb-ink, #f6f7fb);
}

.rb-subnav-link.is-active {
    background: rgba(236, 72, 153, 0.12);
    border-color: rgba(236, 72, 153, 0.45);
    color: #f472b6;
}

.rb-subnav-link i {
    color: inherit;
    font-size: 0.95em;
    line-height: 1;
}

[data-theme-mode="dark"] .rb-subnav-link:not(.is-active) {
    background: rgba(255, 255, 255, 0.03);
    color: var(--rb-muted, #b3b3b3);
}

[data-theme-mode="dark"] .rb-subnav-link.is-active {
    color: #f472b6;
}

/* Recording Box — setup guide trigger + modal */
.rb-quickstart-bar {
    background: var(--rb-panel, #161616);
    border: 1px solid var(--rb-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.65rem;
    overflow: hidden;
}

.rb-quickstart-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    text-align: left;
    width: 100%;
}

.rb-quickstart-trigger:hover {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme-mode="dark"] .rb-quickstart-trigger:hover {
    background: rgba(255, 255, 255, 0.025);
}

.rb-quickstart-trigger:focus-visible {
    outline: 2px solid rgba(236, 72, 153, 0.55);
    outline-offset: -2px;
}

.rb-quickstart-trigger-icon {
    align-items: center;
    background: rgba(236, 72, 153, 0.12);
    border-radius: 0.45rem;
    color: #f472b6;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.95rem;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.rb-quickstart-trigger-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.rb-quickstart-trigger-title {
    color: var(--rb-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
}

.rb-quickstart-trigger-meta {
    color: var(--rb-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.2;
}

.rb-quickstart-trigger-action {
    align-items: center;
    color: var(--rb-muted, #b3b3b3);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.2rem;
    white-space: nowrap;
}

.rb-quickstart-chevron {
    color: #f472b6;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.rb-quickstart-trigger:hover .rb-quickstart-chevron,
.rb-quickstart-trigger:focus-visible .rb-quickstart-chevron {
    transform: translateX(2px);
}

.rb-quickstart-modal-body {
    padding-top: 0.25rem !important;
}

.rb-quickstart-modal-intro {
    color: var(--rb-muted, #b3b3b3) !important;
    font-size: 0.875rem;
    line-height: 1.45;
}

.rb-quickstart-grid {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rb-quickstart-item {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--rb-border, rgba(255, 255, 255, 0.07));
    border-radius: 0.45rem;
    display: flex;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
}

.rb-quickstart-item-num {
    align-items: center;
    background: rgba(236, 72, 153, 0.14);
    border-radius: 999px;
    color: #f9a8d4;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 800;
    height: 1.25rem;
    justify-content: center;
    line-height: 1;
    margin-top: 0.05rem;
    width: 1.25rem;
}

.rb-quickstart-item-copy {
    min-width: 0;
}

.rb-quickstart-item-title {
    color: var(--rb-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.1rem;
}

.rb-quickstart-item-detail {
    color: var(--rb-muted, #b3b3b3);
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 0;
}

.rb-quickstart-tip {
    align-items: center;
    color: var(--rb-muted, #b3b3b3);
    display: flex;
    font-size: 0.82rem;
    gap: 0.35rem;
    line-height: 1.35;
    margin: 0.75rem 0 0;
}

.rb-quickstart-tip i {
    color: #f472b6;
    flex-shrink: 0;
    font-size: 0.85rem;
}

[data-theme-mode="dark"] .rb-quickstart-trigger-title {
    color: var(--rb-ink, #f6f7fb);
}

[data-theme-mode="dark"] .rb-quickstart-trigger-meta,
[data-theme-mode="dark"] .rb-quickstart-trigger-action {
    color: var(--rb-muted, #b3b3b3);
}

[data-theme-mode="dark"] .rb-quickstart-item-title {
    color: var(--rb-ink, #f6f7fb);
}

[data-theme-mode="dark"] .rb-quickstart-item-detail,
[data-theme-mode="dark"] .rb-quickstart-tip {
    color: var(--rb-muted, #b3b3b3);
}

@media (max-width: 767.98px) {
    .rb-quickstart-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rb-quickstart-trigger-action .rb-quickstart-action-label {
        display: none;
    }
}

/* Recording Box — inbound routing (Number Manager) collapsible card */
.rb-inbound-routing-card {
    overflow: hidden;
}

.rb-inbound-routing-card .rb-inbound-routing-steps li {
    line-height: 1.45;
}

.rb-inbound-routing-help {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--rb-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.55rem;
    padding: 0.75rem 0.85rem;
}

.rb-inbound-routing-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    text-align: left;
    width: 100%;
}

.rb-inbound-routing-trigger:hover {
    background: rgba(255, 255, 255, 0.025);
}

.rb-inbound-routing-trigger:focus-visible {
    outline: 2px solid rgba(236, 72, 153, 0.55);
    outline-offset: -2px;
}

.rb-inbound-routing-trigger-icon {
    align-items: center;
    background: rgba(236, 72, 153, 0.12);
    border-radius: 0.45rem;
    color: #f472b6;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.95rem;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.rb-inbound-routing-trigger-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.1rem;
    justify-content: center;
    min-width: 0;
}

.rb-inbound-routing-trigger-title {
    align-items: center;
    color: var(--rb-ink, #f6f7fb);
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    font-weight: 700;
    gap: 0.25rem;
    line-height: 1.25;
}

.rb-inbound-routing-trigger-meta {
    color: var(--rb-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.25;
}

.rb-inbound-routing-trigger-action {
    align-items: center;
    color: var(--rb-muted, #b3b3b3);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.25rem;
    white-space: nowrap;
}

.rb-inbound-routing-chevron {
    color: #f472b6;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.rb-inbound-routing-trigger[aria-expanded="true"] .rb-inbound-routing-chevron {
    transform: rotate(180deg);
}

[data-theme-mode="dark"] .rb-inbound-routing-trigger-title {
    color: var(--rb-ink, #f6f7fb);
}

[data-theme-mode="dark"] .rb-inbound-routing-trigger-meta,
[data-theme-mode="dark"] .rb-inbound-routing-trigger-action {
    color: var(--rb-muted, #b3b3b3);
}

.rg-quickstart-bar {
    background: var(--rg-panel, #161616);
    border: 1px solid var(--rg-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.65rem;
    overflow: hidden;
}

.rg-quickstart-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    text-align: left;
    width: 100%;
}

.rg-quickstart-trigger:hover {
    background: rgba(255, 255, 255, 0.025);
}

.rg-quickstart-trigger:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.55);
    outline-offset: -2px;
}

.rg-quickstart-trigger-icon {
    align-items: center;
    background: rgba(139, 92, 246, 0.12);
    border-radius: 0.45rem;
    color: #a78bfa;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.95rem;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.rg-quickstart-trigger-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.rg-quickstart-trigger-title {
    color: var(--rg-ink, #f6f7fb);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}

.rg-quickstart-trigger-meta {
    color: var(--rg-muted, #b3b3b3);
    font-size: 0.72rem;
    line-height: 1.2;
}

.rg-quickstart-trigger-action {
    align-items: center;
    color: var(--rg-muted, #b3b3b3);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 0.2rem;
    white-space: nowrap;
}

.rg-quickstart-chevron {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.rg-quickstart-trigger[aria-expanded="true"] .rg-quickstart-chevron {
    transform: rotate(180deg);
}

.rg-quickstart-body-inner {
    border-top: 1px solid var(--rg-border, rgba(255, 255, 255, 0.09));
    padding: 0.65rem 0.75rem 0.75rem;
}

.rg-quickstart-grid {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rg-quickstart-item {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--rg-border, rgba(255, 255, 255, 0.07));
    border-radius: 0.45rem;
    display: flex;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
}

.rg-quickstart-item-num {
    align-items: center;
    background: rgba(139, 92, 246, 0.14);
    border-radius: 999px;
    color: #c4b5fd;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    height: 1.25rem;
    justify-content: center;
    line-height: 1;
    margin-top: 0.05rem;
    width: 1.25rem;
}

.rg-quickstart-item-copy {
    min-width: 0;
}

.rg-quickstart-item-title {
    color: var(--rg-ink, #f6f7fb);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.1rem;
}

.rg-quickstart-item-detail {
    color: var(--rg-muted, #b3b3b3);
    font-size: 0.7rem;
    line-height: 1.35;
    margin: 0;
}

.rg-quickstart-tip {
    align-items: center;
    color: var(--rg-muted, #b3b3b3);
    display: flex;
    font-size: 0.7rem;
    gap: 0.35rem;
    line-height: 1.35;
    margin: 0.55rem 0 0;
}

.rg-quickstart-tip i {
    color: #a78bfa;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.rg-inline-feedback {
    font-size: 0.82rem;
    min-height: 1.25rem;
}

.rg-inbound-routing-card .rg-inbound-routing-steps li {
    line-height: 1.45;
}

.rg-inbound-routing-help {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--rg-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.55rem;
    padding: 0.75rem 0.85rem;
}

.rg-inbound-routing-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    text-align: left;
    width: 100%;
}

.rg-inbound-routing-trigger:hover {
    background: rgba(255, 255, 255, 0.025);
}

.rg-inbound-routing-trigger:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.55);
    outline-offset: -2px;
}

.rg-inbound-routing-trigger-icon {
    align-items: center;
    background: rgba(59, 130, 246, 0.12);
    border-radius: 0.45rem;
    color: #60a5fa;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.95rem;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.rg-inbound-routing-trigger-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.rg-inbound-routing-trigger-title {
    color: var(--rg-ink, #f6f7fb);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}

.rg-inbound-routing-trigger-meta {
    color: var(--rg-muted, #b3b3b3);
    font-size: 0.72rem;
    line-height: 1.2;
}

.rg-inbound-routing-trigger-action {
    align-items: center;
    color: var(--rg-muted, #b3b3b3);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 0.2rem;
    white-space: nowrap;
}

.rg-inbound-routing-chevron {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.rg-inbound-routing-trigger[aria-expanded="true"] .rg-inbound-routing-chevron {
    transform: rotate(180deg);
}

.rg-edit-container .rg-field-tooltip,
.rg-dashboard-container .rg-field-tooltip,
.rg-calls-container .rg-field-tooltip,
.rg-stats-container .rg-field-tooltip,
.rg-usage-container .rg-field-tooltip,
.rg-ann-container .rg-field-tooltip,
.rg-recordings-container .rg-field-tooltip {
    vertical-align: middle;
}

.rg-table th {
    white-space: nowrap;
}

.rg-table th .custom-kb-tooltip-wrapper {
    margin-left: 0.15rem;
}

/* Fixed-position tooltips (ring-groups-tooltips.js) — suppress clipped CSS hover panels */
.rg-dashboard-container .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.rg-dashboard-container .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
.rg-edit-container .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.rg-edit-container .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
.rg-calls-container .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.rg-calls-container .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
.rg-stats-container .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.rg-stats-container .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
.rg-usage-container .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.rg-usage-container .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
.rg-ann-container .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.rg-ann-container .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
.rg-recordings-container .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.rg-recordings-container .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#modal-create-ring-group .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#modal-create-ring-group .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#modal-add-member .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#modal-add-member .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#modal-call-detail .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#modal-call-detail .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content {
    visibility: hidden !important;
    opacity: 0 !important;
}

.rg-floating-tooltip {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: calc(100vw - 1.5rem) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1200 !important;
}

body.modal-open .rg-floating-tooltip,
body:has([class*="wholesale-"][class*="-drawer"].open) .rg-floating-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
}

.modal.show .rg-floating-tooltip {
    z-index: 1305 !important;
}

.rg-floating-tooltip[data-rg-tooltip-placement="bottom"]::after {
    top: auto !important;
    bottom: 100% !important;
    border-color: transparent transparent #000000 transparent !important;
}

[data-theme-mode="dark"] .rg-floating-tooltip[data-rg-tooltip-placement="bottom"]::after {
    border-color: transparent transparent #101010 transparent !important;
}

/* Ring group modals use global .modal / .modal-backdrop stacking (main.css § Global Modal Stacking Fix). */

.rg-dashboard-container .table-responsive,
.rg-edit-container .table-responsive,
.rg-calls-container .table-responsive,
.rg-stats-container .table-responsive,
.rg-usage-container .table-responsive,
.rg-ann-container .table-responsive,
.rg-recordings-container .table-responsive,
.rg-dashboard-container .card.rg-card,
.rg-edit-container .card.rg-card,
.rg-calls-container .card.rg-card,
.rg-stats-container .card.rg-card,
.rg-usage-container .card.rg-card,
.rg-ann-container .card.rg-card,
.rg-recordings-container .card.rg-card,
.rg-edit-container .tab-pane,
#modal-create-ring-group .modal-body,
#modal-add-member .modal-body,
#modal-call-detail .modal-body {
    overflow: visible !important;
}

.rg-dashboard-container,
.rg-edit-container,
.rg-calls-container,
.rg-stats-container,
.rg-usage-container,
.rg-ann-container,
.rg-recordings-container {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    .rg-dashboard-container,
    .rg-edit-container,
    .rg-calls-container,
    .rg-stats-container,
    .rg-usage-container,
    .rg-ann-container,
    .rg-recordings-container {
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    .rg-dashboard-container,
    .rg-dashboard-container .card.rg-card {
        overflow-x: hidden;
    }

    .rg-dashboard-container .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

.rg-dashboard-container thead th,
.rg-edit-container thead th,
.rg-calls-container thead th,
.rg-stats-container thead th,
.rg-usage-container thead th,
.rg-ann-container thead th,
.rg-recordings-container thead th {
    position: relative;
    overflow: visible !important;
}

.rg-dashboard-container .custom-kb-tooltip-wrapper.rg-tooltip-active,
.rg-edit-container .custom-kb-tooltip-wrapper.rg-tooltip-active,
.rg-calls-container .custom-kb-tooltip-wrapper.rg-tooltip-active,
.rg-stats-container .custom-kb-tooltip-wrapper.rg-tooltip-active,
.rg-usage-container .custom-kb-tooltip-wrapper.rg-tooltip-active,
.rg-ann-container .custom-kb-tooltip-wrapper.rg-tooltip-active,
.rg-recordings-container .custom-kb-tooltip-wrapper.rg-tooltip-active,
#modal-create-ring-group .custom-kb-tooltip-wrapper.rg-tooltip-active,
#modal-add-member .custom-kb-tooltip-wrapper.rg-tooltip-active,
#modal-call-detail .custom-kb-tooltip-wrapper.rg-tooltip-active {
    z-index: 1200 !important;
}

/* Fixed-position tooltips (announcement-tooltips.js) — suppress clipped CSS hover panels */
.ann-page-container .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.ann-page-container .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#ann-create-drawer .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#ann-create-drawer .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#ann-add-schedule-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#ann-add-schedule-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#ann-add-holiday-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#ann-add-holiday-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#ann-call-timeline-drawer .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#ann-call-timeline-drawer .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#ann-delete-box-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#ann-delete-box-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#ann-delete-recording-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#ann-delete-recording-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#ann-delete-holiday-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#ann-delete-holiday-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#ann-create-success-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#ann-create-success-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content {
    visibility: hidden !important;
    opacity: 0 !important;
}

.ann-floating-tooltip {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: calc(100vw - 1.5rem) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1200 !important;
}

body.modal-open .ann-floating-tooltip,
body:has([class*="wholesale-"][class*="-drawer"].open) .ann-floating-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
}

.modal.show .ann-floating-tooltip {
    z-index: 1305 !important;
}

.offcanvas.show .ann-floating-tooltip {
    z-index: 1105 !important;
}

.ann-floating-tooltip[data-ann-tooltip-placement="bottom"]::after {
    top: auto !important;
    bottom: 100% !important;
    border-color: transparent transparent #000000 transparent !important;
}

[data-theme-mode="dark"] .ann-floating-tooltip[data-ann-tooltip-placement="bottom"]::after {
    border-color: transparent transparent #101010 transparent !important;
}

.ann-page-container .table-responsive,
.ann-page-container .ann-panel-card,
.ann-page-container .tab-pane,
#ann-create-drawer .offcanvas-body,
#ann-add-schedule-modal .modal-body,
#ann-add-holiday-modal .modal-body {
    overflow: visible !important;
}

.ann-page-container .custom-kb-tooltip-wrapper.ann-tooltip-active,
#ann-create-drawer .custom-kb-tooltip-wrapper.ann-tooltip-active,
#ann-add-schedule-modal .custom-kb-tooltip-wrapper.ann-tooltip-active,
#ann-add-holiday-modal .custom-kb-tooltip-wrapper.ann-tooltip-active,
#ann-call-timeline-drawer .custom-kb-tooltip-wrapper.ann-tooltip-active,
#ann-delete-box-modal .custom-kb-tooltip-wrapper.ann-tooltip-active,
#ann-delete-recording-modal .custom-kb-tooltip-wrapper.ann-tooltip-active,
#ann-delete-holiday-modal .custom-kb-tooltip-wrapper.ann-tooltip-active,
#ann-create-success-modal .custom-kb-tooltip-wrapper.ann-tooltip-active {
    z-index: 1200 !important;
}

.rg-howto-card {
    background: rgba(139, 92, 246, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 0.65rem;
    padding: 0.85rem;
}

.rg-howto-card-title {
    color: var(--rg-ink, #f6f7fb);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.rg-howto-card ul {
    color: var(--rg-muted, #b3b3b3);
    font-size: 0.76rem;
    margin-bottom: 0;
    padding-left: 1.1rem;
}

.rg-help-text {
    color: var(--rg-muted, #b3b3b3);
    font-size: 0.76rem;
    margin-top: 0.35rem;
}

.rg-form-label {
    color: var(--rg-muted, #b3b3b3);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .rg-subnav-link span {
        font-size: 0.72rem;
    }

    .rg-quickstart-grid {
        grid-template-columns: 1fr;
    }

    .rg-quickstart-trigger-action span:not(.rg-quickstart-chevron) {
        display: none;
    }
}

@media (min-width: 992px) {
    .rg-quickstart-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rg-quickstart-item:last-child {
        grid-column: span 1;
    }
}

/* Premium Advertisement-style Toggle Cards */
.rg-ad-toggle-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

[data-theme-mode="dark"] .rg-ad-toggle-card {
    background: rgba(255, 255, 255, 0.012);
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.rg-ad-toggle-card:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(139, 92, 246, 0.25) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.rg-ad-icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.rg-ad-icon-missed {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
}

.rg-ad-icon-noanswer {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.rg-ad-icon-suppress {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
}

.rg-ad-toggle-card:hover .rg-ad-icon-wrapper {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.rg-card-header-gradient {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.06) 0%, transparent 100%) !important;
}

/* Shine effect for premium ad-style cards */
.rg-ad-toggle-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.03),
        transparent
    );
    transform: skewX(-25deg);
    transition: none;
}

.rg-ad-toggle-card:hover::after {
    left: 150%;
    transition: left 0.8s ease-in-out;
}

/* Call Simulator UI Styles */
#modal-call-simulator {
    --rg-panel: #161616;
    --rg-panel-strong: #101010;
    --rg-border: rgba(255, 255, 255, 0.09);
    --rg-ink: #f6f7fb;
    --rg-muted: #b3b3b3;
    --rg-shadow: none;
    --rg-accent: #8b5cf6;
    --rg-green: #22c55e;
    --rg-red: #ef4444;
    --rg-amber: #f59e0b;
}

#modal-call-simulator .text-white {
    color: var(--rg-ink) !important;
}

#modal-call-simulator .rg-form-control,
#modal-call-simulator .rg-form-select {
    width: 100% !important;
    min-width: 0 !important;
}

/* Custom premium style for simulator preset buttons (no-red rule) */
#modal-call-simulator .btn.btn-secondary {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--rg-ink) !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

#modal-call-simulator .btn.btn-secondary:hover {
    background-color: rgba(139, 92, 246, 0.1) !important;
    border-color: var(--rg-accent) !important;
    color: #ffffff !important;
}

/* Simulator footer close uses btn-secondary (no-red rule — danger reserved for delete/remove) */
#modal-call-simulator .modal-footer .btn.btn-secondary {
    font-size: 0.875rem !important;
    padding: 0.35rem 0.85rem !important;
}

.simulator-flow-container {
    overflow-x: auto;
}

.sim-flow-node {
    background: var(--rg-panel);
    border: 1px solid var(--rg-border);
    border-radius: 0.75rem;
    padding: 0.85rem;
    width: 170px;
    min-height: 115px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: var(--rg-shadow);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.sim-flow-node.flow-active {
    border-color: var(--rg-accent) !important;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.04) !important;
}

.sim-flow-node.flow-bypassed {
    opacity: 0.35;
    border-style: dashed;
    background: rgba(255, 255, 255, 0.005) !important;
}

.sim-flow-node .node-icon {
    font-size: 1.6rem;
    color: var(--rg-muted);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sim-flow-node.flow-active .node-icon {
    color: var(--rg-accent);
}

.sim-flow-node .node-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--rg-ink);
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.sim-flow-node .node-desc {
    font-size: 0.72rem;
    color: var(--rg-muted);
    line-height: 1.3;
    word-break: break-word;
}

.sim-flow-connector {
    height: 2px;
    background: var(--rg-border);
    flex-grow: 1;
    min-width: 15px;
    max-width: 40px;
    align-self: center;
    transition: all 0.3s ease;
}

.sim-flow-connector.active-connector {
    background: var(--rg-accent);
}

.sim-flow-connector-vertical {
    width: 2px;
    height: 20px;
    background: var(--rg-border);
    align-self: center;
    transition: all 0.3s ease;
}

.sim-flow-connector-vertical.active-connector {
    background: var(--rg-accent);
}

#simulator-trace-logs li {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
    position: relative;
    color: var(--rg-ink);
}

#simulator-trace-logs li::before {
    content: '➔';
    position: absolute;
    left: 0;
    color: var(--rg-accent);
}

#simulator-trace-logs li.trace-success::before {
    content: '✓';
    color: var(--rg-green);
}

#simulator-trace-logs li.trace-warning::before {
    content: '⚠';
    color: var(--rg-amber);
}

#simulator-trace-logs li.trace-danger::before {
    content: '✗';
    color: var(--rg-red);
}

.sim-member-row {
    font-size: 0.8rem;
}

.sim-member-row.sim-member-ringing {
    background: rgba(34, 197, 94, 0.05);
    border-left: 2px solid var(--rg-green);
}

.voice-route-deprecation-modal .modal-dialog {
    max-width: 650px !important;
}

.voice-route-deprecation-modal .modal-content {
    position: relative;
    border-radius: 1.25rem;
    padding: 1px; /* Gradient border container */
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(239, 68, 68, 0.08) 50%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    border: none !important;
}

.voice-route-deprecation-ad-glow {
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.voice-route-deprecation-ad-content {
    position: relative;
    z-index: 2;
    background: #161616;
    border-radius: 1.2rem;
    padding: 2.25rem !important;
}

.voice-route-deprecation-ad-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(239, 68, 68, 0.08) 100%);
    border: 1px solid rgba(139, 92, 246, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a78bfa;
}

.voice-route-deprecation-ad-icon i {
    font-size: 1.5rem !important;
}

.badge-shutdown-alert {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #ef4444 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

.voice-route-deprecation-modal .modal-title {
    color: #ffffff !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
}

.voice-route-deprecation-modal .voice-route-deprecation-modal-lead {
    color: #f6f7fb !important;
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
}

.voice-route-deprecation-modal .voice-route-deprecation-modal-desc {
    color: #b3b3b3 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.voice-route-deprecation-features {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 1.25rem !important;
}

.voice-route-deprecation-features h4 {
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

.voice-route-deprecation-features strong {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.voice-route-deprecation-features p {
    color: #b3b3b3 !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
}

.voice-route-deprecation-modal .btn-premium-vm {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.voice-route-deprecation-modal .btn-premium-vm:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45) !important;
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
}

.voice-route-deprecation-modal .btn-premium-vm:active {
    transform: translateY(1px) !important;
}

.voice-route-deprecation-modal .btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f6f7fb !important;
    background: rgba(255, 255, 255, 0.02) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.voice-route-deprecation-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.text-violet {
    color: #a78bfa !important;
}

[data-theme-mode="dark"] .voice-route-deprecation-modal .modal-content {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(239, 68, 68, 0.08) 50%, rgba(255, 255, 255, 0.03) 100%);
}

/* Global Dark Theme Text Readability Fixes */
[data-theme-mode="dark"] .table {
    --bs-table-color: #eeeeee;
    color: var(--bs-table-color);
}
[data-theme-mode="dark"] .table > :not(caption) > * > * {
    color: var(--bs-table-color);
}
[data-theme-mode="dark"] .text-white {
    color: #eeeeee !important;
}
[data-theme-mode="dark"] .text-muted {
    color: #b3b3b3 !important;
}

/* Announcements: beat global .table / .table-dark white-bg and .text-white after global dark fixes */
[data-theme-mode="dark"] .ann-page-container .table,
[data-theme-mode="dark"] .ann-page-container .ann-table,
[data-theme-mode="dark"] .ann-page-container .ann-table.table,
[data-theme-mode="dark"] .ann-page-container .table.ann-table,
[data-theme-mode="dark"] .ann-page-container .ann-table.table-dark,
[data-theme-mode="dark"] .ann-page-container .table.ann-table.table-dark {
    --bs-table-bg: var(--ann-panel) !important;
    --bs-table-color: var(--ann-ink) !important;
    --bs-body-bg: var(--ann-panel) !important;
    background-color: var(--ann-panel) !important;
    color: var(--ann-ink) !important;
}

[data-theme-mode="dark"] .ann-page-container .table > :not(caption) > * > *,
[data-theme-mode="dark"] .ann-page-container .ann-table > :not(caption) > * > *,
[data-theme-mode="dark"] .ann-page-container .table.ann-table > :not(caption) > * > * {
    --bs-table-bg: var(--ann-panel) !important;
    --bs-table-color: var(--ann-ink) !important;
    --bs-body-bg: var(--ann-panel) !important;
    --bs-table-accent-bg: var(--ann-panel) !important;
    --bs-table-bg-state: var(--ann-panel) !important;
    background-color: var(--ann-panel) !important;
    box-shadow: none !important;
    color: var(--ann-ink) !important;
}

[data-theme-mode="dark"] .ann-page-container .card.ann-panel-card,
[data-theme-mode="dark"] .ann-page-container .ann-panel-card,
[data-theme-mode="dark"] .ann-page-container .ann-panel-card .card-header,
[data-theme-mode="dark"] .ann-page-container .ann-panel-card .ann-panel-card-header,
[data-theme-mode="dark"] .ann-page-container .ann-panel-card .ann-table-card-header,
[data-theme-mode="dark"] .ann-page-container .ann-panel-card .card-body,
[data-theme-mode="dark"] .ann-page-container .ann-panel-card .table-responsive,
[data-theme-mode="dark"] .ann-page-container .table-responsive {
    background: var(--ann-panel) !important;
    background-color: var(--ann-panel) !important;
    border-color: var(--ann-border) !important;
    color: var(--ann-ink) !important;
}

[data-theme-mode="dark"] .ann-page-container .text-white {
    color: var(--ann-ink) !important;
}

[data-theme-mode="dark"] .ann-page-container .ann-table thead th,
[data-theme-mode="dark"] .ann-page-container .table.ann-table thead th {
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--ann-muted) !important;
}

[data-theme-mode="dark"] .ann-page-container .ann-table tbody tr:hover > *,
[data-theme-mode="dark"] .ann-page-container .table.ann-table tbody tr:hover > * {
    --bs-table-accent-bg: rgba(234, 179, 8, 0.04) !important;
    --bs-table-bg-state: rgba(234, 179, 8, 0.04) !important;
    background-color: rgba(234, 179, 8, 0.04) !important;
    box-shadow: none !important;
    color: var(--ann-ink) !important;
}

/* Extracted from products/index.php */
.customer-products-dashboard {
    --cp-surface: #ffffff;
    --cp-surface-strong: #f8f9fa;
    --cp-border: rgba(0, 0, 0, 0.12);
    --cp-text: #172033;
    --cp-muted: #64748b;
    color: var(--cp-text);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 1.5rem;
}

[data-theme-mode="dark"] .customer-products-dashboard {
    --cp-surface: #161616;
    --cp-surface-strong: #1a1a1a;
    --cp-border: rgba(255, 255, 255, 0.09);
    --cp-text: #f6f7fb;
    --cp-muted: #b3b3b3;
}

.customer-products-dashboard.cp-dashboard-fit {
    overflow: hidden;
}

.cp-dashboard-fit-shell {
    overflow: hidden;
    width: 100%;
}

.cp-dashboard-fit-content {
    transform-origin: top left;
    width: 100%;
    will-change: transform;
    padding-bottom: 32px !important;
}

@media (max-width: 991.98px) {
    .customer-products-dashboard.cp-dashboard-fit {
        overflow: visible;
    }

    .cp-dashboard-fit-shell {
        height: auto !important;
        overflow: visible;
    }

    .cp-dashboard-fit-content {
        transform: none !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
}

.cp-card {
    position: relative;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    background: var(--cp-surface);
    box-shadow: none;
}

[data-theme-mode="dark"] .cp-card {
    background: var(--cp-surface);
}

.cp-hero {
    padding: 1.25rem 1.5rem;
    background: var(--cp-surface);
    color: var(--cp-text);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--cp-border);
    box-shadow: none;
}

[data-theme-mode="dark"] .cp-hero {
    background: var(--cp-surface);
}

.cp-hero::before {
    display: none;
}

.cp-hero-content {
    position: relative;
    z-index: 1;
}

.cp-hero-title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
    text-wrap: balance;
}

.cp-hero-lead {
    color: var(--cp-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    max-width: 65ch;
}

.cp-update-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.28);
    border-radius: 8px;
    margin-top: 0;
    max-width: 50rem;
}

[data-theme-mode="dark"] .cp-update-banner {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.35);
}

.cp-update-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    background: transparent;
    color: #dc3545;
    border-radius: 0;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

[data-theme-mode="dark"] .cp-update-icon {
    color: #f87171;
}

.cp-update-text {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--cp-text);
}

.cp-update-text strong {
    color: var(--cp-text);
    font-weight: 700;
    margin-right: 0.25rem;
}

.cp-update-text a {
    color: #dc3545;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.cp-update-text a:hover,
.cp-update-text a:focus-visible {
    color: #b02a37;
    text-decoration-thickness: 2px;
}

[data-theme-mode="dark"] .cp-update-text a {
    color: #f87171;
}

[data-theme-mode="dark"] .cp-update-text a:hover,
[data-theme-mode="dark"] .cp-update-text a:focus-visible {
    color: #fca5a5;
}

.cp-simple-guide-trigger {
    align-items: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(129, 140, 248, 0.36);
    border-radius: 1rem;
    color: var(--cp-text);
    display: inline-flex;
    gap: 0.75rem;
    max-width: 31rem;
    padding: 0.8rem 1rem;
    text-align: left;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.cp-simple-guide-trigger:hover,
.cp-simple-guide-trigger:focus-visible {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.23), rgba(139, 92, 246, 0.18));
    border-color: rgba(129, 140, 248, 0.58);
    color: var(--cp-text);
    outline: none;
    transform: translateY(-1px);
}

.cp-simple-guide-trigger-icon {
    align-items: center;
    background: rgba(129, 140, 248, 0.18);
    border-radius: 0.75rem;
    color: #818cf8;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.25rem;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.cp-simple-guide-trigger strong,
.cp-simple-guide-trigger small {
    display: block;
}

.cp-simple-guide-trigger small {
    color: var(--cp-muted);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 0.1rem;
}

.cp-simple-guide-modal {
    background: var(--cp-surface-strong);
    border: 1px solid var(--cp-border);
    color: var(--cp-text);
}

.cp-simple-guide-modal .modal-header {
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.18), transparent 17rem);
    border-bottom: 1px solid var(--cp-border);
}

.cp-simple-guide-kicker {
    color: #6366f1;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .cp-simple-guide-kicker {
    color: #a5b4fc;
}

.cp-simple-guide-lead,
.cp-simple-guide-step p,
.cp-simple-guide-summary {
    color: var(--cp-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.cp-simple-guide-summary,
.cp-simple-guide-step {
    background: rgba(99, 102, 241, 0.055);
    border: 1px solid var(--cp-border);
    border-radius: 1rem;
}

.cp-simple-guide-summary {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
}

.cp-simple-guide-summary > i {
    align-items: center;
    background: rgba(99, 102, 241, 0.16);
    border-radius: 0.7rem;
    color: #6366f1;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.cp-simple-guide-step {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
}

.cp-simple-guide-step > span {
    align-items: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 900;
    height: 1.65rem;
    justify-content: center;
    width: 1.65rem;
}

.cp-simple-guide-step h3 {
    color: var(--cp-text);
    font-size: 0.98rem;
    font-weight: 900;
    margin-bottom: 0.35rem;
}

.cp-simple-guide-step p {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .cp-simple-guide-trigger {
        width: 100%;
    }

    .cp-simple-guide-summary,
    .cp-simple-guide-step {
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .cp-simple-guide-trigger {
        width: 100%;
    }

    .cp-simple-guide-summary,
    .cp-simple-guide-step {
        flex-direction: column;
    }
}

.ssg-modal {
    background: #121212;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem !important;
    color: var(--cp-text, #f6f7fb);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.ssg-modal .input-group-text {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--cp-muted, #b3b3b3) !important;
}

.ssg-modal .modal-header {
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.12), transparent 22rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.15rem 1.5rem 0.75rem 1.5rem;
}

.ssg-kicker {
    color: #818cf8;
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.ssg-lead,
.ssg-copy,
.ssg-note {
    color: var(--cp-muted, #a3a3a3);
    font-size: 0.85rem;
    line-height: 1.45;
}

.ssg-note {
    color: var(--cp-muted, #8e8e8e);
    font-size: 0.8rem;
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--cp-border, rgba(255, 255, 255, 0.08));
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
}

.ssg-step-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.85rem;
    letter-spacing: -0.01em;
}

/* Stepper Component */
.ssg-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 0.75rem 1.15rem;
    position: relative;
}

.ssg-stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
    text-align: center;
}

.ssg-step-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border: 2px solid rgba(255, 255, 255, 0.08);
    color: var(--cp-muted, #8e8e8e);
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ssg-step-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cp-muted, #8e8e8e);
    margin-top: 0.35rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.ssg-stepper-line {
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    flex-grow: 1;
    margin: 0 -0.5rem;
    margin-top: -1.1rem;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Stepper Active/Completed States */
.ssg-stepper-step.active .ssg-step-icon {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: #818cf8;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.45);
}

.ssg-stepper-step.active .ssg-step-label {
    color: #ffffff;
    font-weight: 800;
}

.ssg-stepper-step.completed .ssg-step-icon {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.ssg-stepper-step.completed .ssg-step-label {
    color: #22c55e;
}

@media (max-width: 767.98px) {
    .ssg-step-label {
        display: none;
    }
    .ssg-stepper-line {
        margin-top: 0;
    }
    .ssg-stepper {
        padding: 0.75rem;
    }
    .ssg-step-icon {
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
    }
}

/* Sleek Progress Bar (Fallback/Hidden) */
.ssg-progress {
    margin-bottom: 1.25rem;
}

.ssg-progress-label {
    color: var(--cp-muted, #b3b3b3);
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.ssg-progress-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    height: 0.35rem;
    overflow: hidden;
}

.ssg-progress-fill {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transition: transform 0.25s ease;
}

/* Redesigned Cards */
.ssg-summary-card,
.ssg-credentials-card,
.ssg-confirm-card {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    display: flex;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
}

.ssg-summary-card > i {
    color: #818cf8;
    flex: 0 0 auto;
    font-size: 1.25rem;
    background: rgba(99, 102, 241, 0.1);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssg-checklist {
    color: var(--cp-text, #f6f7fb);
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0.85rem 0;
    padding-left: 1.25rem;
}

.ssg-checklist li {
    margin-bottom: 0.5rem;
}

/* Card-Style Radio Selectors */
.ssg-choice-group {
    display: grid;
    gap: 0.75rem;
}

.ssg-choice-group-inline {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.ssg-choice-card {
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    color: var(--cp-text, #f6f7fb);
    cursor: pointer;
    display: flex;
    padding: 0.85rem 1.15rem;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ssg-choice-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.btn-check:checked + .ssg-choice-card {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.15);
}

.ssg-card-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--cp-muted, #8e8e8e);
    margin-right: 1rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.btn-check:checked + .ssg-choice-card .ssg-card-icon {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.ssg-card-content {
    flex-grow: 1;
    min-width: 0;
}

.ssg-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.ssg-card-desc {
    font-size: 0.8rem;
    color: var(--cp-muted, #8e8e8e);
    margin-bottom: 0;
    line-height: 1.4;
}

.ssg-card-badge {
    font-size: 1.25rem;
    color: #818cf8;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
    margin-left: 0.75rem;
}

.btn-check:checked + .ssg-choice-card .ssg-card-badge {
    opacity: 1;
    transform: scale(1);
}

/* Form Fields & Inputs */
.ssg-input-container {
    margin-bottom: 1rem;
}

.ssg-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cp-muted, #8e8e8e);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ssg-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.ssg-input-icon {
    position: absolute;
    left: 0.85rem;
    color: var(--cp-muted, #8e8e8e);
    font-size: 1rem;
    pointer-events: none;
    z-index: 3;
}

.ssg-input {
    padding-left: 2.5rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 0.75rem !important;
    height: 2.75rem !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

.ssg-input:focus {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(129, 140, 248, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

.ssg-input::placeholder {
    color: var(--cp-muted, #a3a3a3) !important;
    opacity: 1;
}

.form-select.ssg-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238e8e8e'%3e%3cpath d='M12 16L6 10H18L12 16Z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.25rem !important;
    padding-right: 2.5rem !important;
}

/* SSG wizard: always-dark modal — Choices dropdowns match ssg-input surfaces */
.ssg-modal .ssg-input-wrapper .choices {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin-bottom: 0 !important;
    /* Theme-mode .choices shell border stacks with __inner ssg-input border — keep one layer */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ssg-modal .ssg-input-wrapper .choices.is-focused,
.ssg-modal .ssg-input-wrapper .choices.is-open {
    border: none !important;
    box-shadow: none !important;
}

.ssg-modal .ssg-input-wrapper .choices__inner {
    min-height: 2.75rem !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0.75rem !important;
    color: #ffffff !important;
}

/* PortalSelectChoices wraps the native <select> inside .choices — not a sibling */
.ssg-modal .ssg-input-wrapper .choices .choices__list--single {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    min-width: 0;
    width: 100%;
}

.ssg-modal .ssg-input-wrapper .choices .choices__list--single .choices__item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SSG number step: state column fits full labels e.g. "QLD (07)" without clipping */
.ssg-buy-filters-row.ssg-buy-filters-geo .ssg-buy-geo-col-state .ssg-input-wrapper .choices {
    min-width: 8.5rem;
    max-width: 10rem;
}

.ssg-buy-filters-row.ssg-buy-filters-geo #ssg-buy-region-wrap .ssg-input-wrapper .choices {
    width: 100%;
    max-width: none;
}

.ssg-modal .ssg-input-wrapper .choices .choices__list--dropdown .choices__item {
    white-space: nowrap;
}

.ssg-modal .ssg-input-wrapper .choices.is-focused .choices__inner,
.ssg-modal .ssg-input-wrapper .choices.is-open .choices__inner {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(129, 140, 248, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/*
 * SSG wizard: scrollable modal + open Choices dropdown.
 * Dropdown coordinates are fixed in portal-select-choices.js — do not set
 * overflow:visible on modal-content/body/rows (that paints body content over
 * the footer and blocks clicks on lower fields like ssg-voicemail-timeout).
 */
.modal-dialog-scrollable .modal-content:has(.choices.is-open) {
    overflow: hidden;
}

.ssg-modal .modal-body {
    position: relative;
    z-index: 1;
    padding-bottom: 2.5rem;
}

.ssg-modal .modal-footer {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
}

.ssg-modal .ssg-input-wrapper .choices {
    position: relative;
    z-index: 1;
}

.ssg-modal .ssg-input-wrapper .choices.is-open,
.ssg-modal .ssg-input-wrapper .choices.is-focused {
    z-index: 6;
    border: none !important;
    box-shadow: none !important;
}

.ssg-modal .choices__list--dropdown,
.ssg-modal .choices__list[aria-expanded] {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f6f7fb !important;
}

.ssg-modal .choices__list--dropdown .choices__item,
.ssg-modal .choices__item--selectable,
.ssg-modal .choices__item--choice {
    color: #f6f7fb !important;
}

.ssg-modal .choices__list--dropdown .choices__item--selectable.is-highlighted,
.ssg-modal .choices__item--selectable.is-highlighted {
    background-color: #2a2a2a !important;
    color: #f6f7fb !important;
}

.ssg-modal .choices__item--choice.is-selected {
    background-color: #2a2a2a !important;
    color: #d4d4d8 !important;
}

.ssg-modal .choices[data-type*="select-one"]::after {
    border-color: #8e8e8e transparent transparent !important;
    right: 1rem !important;
}

.ssg-input[type="file"] {
    padding-top: 0.5rem !important;
}

.ssg-input::file-selector-button {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--cp-text, #f6f7fb) !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.25rem 0.75rem !important;
    margin-right: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.ssg-input::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.ssg-input::-webkit-file-upload-button {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--cp-text, #f6f7fb) !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.25rem 0.75rem !important;
    margin-right: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.ssg-input::-webkit-file-upload-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.ssg-input-help {
    font-size: 0.8rem;
    color: var(--cp-muted, #8e8e8e);
}

.ssg-checkbox-container {
    display: flex;
    align-items: flex-start;
    padding-left: 0;
}

.ssg-checkbox {
    margin-left: 0 !important;
    margin-top: 0.25rem !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    border-radius: 0.35rem !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ssg-checkbox:checked {
    background-color: #6366f1 !important;
    border-color: #818cf8 !important;
}

/* Search Results Grid/Table */
.ssg-buy-results {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.85rem;
    max-height: 15rem;
    overflow: auto;
    background: rgba(255, 255, 255, 0.01);
}

.ssg-buy-results table {
    width: 100%;
    border-collapse: collapse;
}

.ssg-buy-results th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--cp-muted, #8e8e8e);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ssg-buy-results td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.9rem;
    color: #ffffff;
}

.ssg-buy-results tr:last-child td {
    border-bottom: none;
}

.ssg-buy-results tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.ssg-empty {
    color: var(--cp-muted, #8e8e8e);
    font-size: 0.88rem;
    padding: 1.5rem 0;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.01);
}

/* Confirm Card */
.ssg-confirm-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: rgba(34, 197, 94, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #22c55e;
    flex-shrink: 0;
}

/* Complete Status Cards */
.ssg-complete-status {
    align-items: center;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(129, 140, 248, 0.2);
    border-radius: 0.75rem;
    display: flex;
    font-size: 0.88rem;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    color: #ffffff;
}

.ssg-complete-status > i {
    color: #818cf8;
    flex: 0 0 auto;
    font-size: 1.35rem;
    background: rgba(99, 102, 241, 0.12);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Review Step */
.ssg-review-list {
    flex: 1 1 auto;
    margin: 0;
    width: 100%;
}

.ssg-review-row {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    margin-bottom: 0.75rem;
}

.ssg-review-row:last-child {
    margin-bottom: 0;
}

.ssg-review-row dt {
    color: var(--cp-muted, #8e8e8e);
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ssg-review-row dd {
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0;
}

/* QR Wrapper */
.ssg-qr-wrapper {
    background: #ffffff;
    padding: 0.75rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    display: inline-block;
}

.ssg-qr-img {
    background: #fff;
    border-radius: 0.5rem;
    max-width: 140px;
    width: 100%;
    display: block;
}

/* Working Overlay */
.ssg-working {
    align-items: center;
    color: var(--cp-muted, #8e8e8e);
    display: flex;
    font-size: 0.88rem;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
    display: inline-flex;
}

/* Search Button */
.ssg-search-btn {
    height: 3rem !important;
    border-radius: 0.75rem !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Custom Modal Button Overrides to prevent Red/Danger styling */
.ssg-modal .btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 0.75rem !important;
    padding: 0.6rem 1.5rem !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
    transition: all 0.2s ease !important;
}

.ssg-modal .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.45) !important;
    transform: translateY(-1px) !important;
}

.ssg-modal .btn-primary:active:not(:disabled) {
    transform: translateY(0) !important;
}

.ssg-modal .btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 0.75rem !important;
    padding: 0.6rem 1.5rem !important;
    transition: all 0.2s ease !important;
}

.ssg-modal .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.ssg-modal .btn-primary {
    border: 1px solid rgba(129, 140, 248, 0.4) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 0.75rem !important;
    padding: 0.6rem 1.5rem !important;
    transition: all 0.2s ease !important;
}

.ssg-modal .btn-primary:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(129, 140, 248, 0.6) !important;
    color: #ffffff !important;
}

/* SSG Wizard Light Mode Overrides */
[data-theme-mode="light"] .ssg-modal {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    color: #172033;
}

[data-theme-mode="light"] .ssg-modal .input-group-text {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #697386 !important;
}

[data-theme-mode="light"] .ssg-modal .modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme-mode="light"] .ssg-lead,
[data-theme-mode="light"] .ssg-copy,
[data-theme-mode="light"] .ssg-note {
    color: #697386;
}

[data-theme-mode="light"] .ssg-note {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme-mode="light"] .ssg-step-title {
    color: #172033;
}

[data-theme-mode="light"] .ssg-stepper {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme-mode="light"] .ssg-step-icon {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    color: #697386;
}

[data-theme-mode="light"] .ssg-step-label {
    color: #697386;
}

[data-theme-mode="light"] .ssg-stepper-line {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme-mode="light"] .ssg-stepper-step.active .ssg-step-label {
    color: #172033;
}

[data-theme-mode="light"] .ssg-progress-label {
    color: #697386;
}

[data-theme-mode="light"] .ssg-progress-track {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme-mode="light"] .ssg-summary-card,
[data-theme-mode="light"] .ssg-credentials-card,
[data-theme-mode="light"] .ssg-confirm-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme-mode="light"] .ssg-checklist {
    color: #172033;
}

[data-theme-mode="light"] .ssg-choice-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    color: #172033;
}

[data-theme-mode="light"] .ssg-choice-card:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme-mode="light"] .ssg-card-icon {
    background: rgba(0, 0, 0, 0.04);
    color: #697386;
}

[data-theme-mode="light"] .ssg-card-title {
    color: #172033;
}

[data-theme-mode="light"] .ssg-card-desc {
    color: #697386;
}

[data-theme-mode="light"] .ssg-field-label {
    color: #697386;
}

[data-theme-mode="light"] .ssg-input {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .ssg-input:focus {
    background: #ffffff !important;
}

[data-theme-mode="light"] .ssg-input::placeholder {
    color: #a3a3a3 !important;
}

[data-theme-mode="light"] .ssg-input-icon {
    color: #697386;
}

[data-theme-mode="light"] .ssg-modal .ssg-input-wrapper .choices__inner {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .ssg-modal .ssg-input-wrapper .choices.is-focused .choices__inner,
[data-theme-mode="light"] .ssg-modal .ssg-input-wrapper .choices.is-open .choices__inner {
    background: #ffffff !important;
}

[data-theme-mode="light"] .ssg-modal .choices__list--dropdown,
[data-theme-mode="light"] .ssg-modal .choices__list[aria-expanded] {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .ssg-modal .choices__list--dropdown .choices__item,
[data-theme-mode="light"] .ssg-modal .choices__item--selectable,
[data-theme-mode="light"] .ssg-modal .choices__item--choice {
    color: #172033 !important;
}

[data-theme-mode="light"] .ssg-modal .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-theme-mode="light"] .ssg-modal .choices__item--selectable.is-highlighted {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .ssg-modal .choices__item--choice.is-selected {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #697386 !important;
}

[data-theme-mode="light"] .ssg-input::file-selector-button {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .ssg-input::file-selector-button:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

[data-theme-mode="light"] .ssg-input::-webkit-file-upload-button {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .ssg-input::-webkit-file-upload-button:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

[data-theme-mode="light"] .ssg-checkbox {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

[data-theme-mode="light"] .ssg-buy-results {
    border-color: rgba(0, 0, 0, 0.1);
    background: #ffffff;
}

[data-theme-mode="light"] .ssg-buy-results th {
    background: rgba(0, 0, 0, 0.03);
    color: #697386;
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme-mode="light"] .ssg-buy-results td {
    border-bottom-color: rgba(0, 0, 0, 0.06);
    color: #172033;
}

[data-theme-mode="light"] .ssg-buy-results tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme-mode="light"] .ssg-empty {
    color: #697386;
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
}

[data-theme-mode="light"] .ssg-working {
    color: #697386;
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme-mode="light"] .ssg-modal .btn-secondary {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #172033 !important;
}

[data-theme-mode="light"] .ssg-modal .btn-secondary:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme-mode="light"] .ssg-complete-status {
    color: #172033;
}

[data-theme-mode="light"] .ssg-review-row dd {
    color: #172033;
}

@media print {
    body.ssg-print-active > :not(.ssg-print-wrapper) {
        display: none !important;
    }

    body.ssg-print-active .ssg-print-wrapper,
    body.ssg-print-active .ssg-print-wrapper * {
        visibility: visible !important;
    }

    .ssg-print-container {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
}

.ssg-print-container {
    color: #111;
    font-family: Inter, system-ui, sans-serif;
    padding: 1.5rem;
}

.ssg-print-header,
.ssg-print-qr-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.ssg-print-table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%;
}

.ssg-print-table td {
    border-bottom: 1px solid #ddd;
    padding: 0.45rem 0.25rem;
    vertical-align: top;
}

.ssg-print-table td:first-child {
    color: #555;
    width: 38%;
}

.ssg-print-qr-row img {
    max-width: 150px;
}

.ssg-print-warning {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 0.35rem;
    padding: 0.65rem 0.75rem;
}

.cp-stat-card {
    padding: 1rem 1.25rem;
    height: 100%;
}

.cp-dashboard-summary {
    border-radius: 12px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    overflow: hidden;
}

.cp-balance-panel {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme-mode="dark"] .cp-balance-panel {
    background: rgba(0, 0, 0, 0.2);
}

.cp-balance-amount {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--cp-text);
    margin: 0.5rem 0;
}

.cp-services-panel {
    border-left: 1px solid var(--cp-border);
}

.cp-dash-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.1rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.cp-dash-icon.is-sip { background: rgba(41, 98, 255, 0.15); color: #2962ff; }
.cp-dash-icon.is-pbx { background: rgba(220, 53, 69, 0.15); color: #dc3545; }
.cp-dash-icon.is-sim { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
.cp-dash-icon.is-nbn { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.cp-dash-icon.is-num { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.cp-service-cell {
    border-color: var(--cp-border) !important;
    border-bottom: 1px solid var(--cp-border);
    border-right: 1px solid var(--cp-border);
}

.cp-service-empty {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme-mode="dark"] .cp-service-empty {
    background: rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
    .cp-services-panel .row > div:nth-child(3n) { border-right: none !important; }
    .cp-services-panel .row > div:nth-last-child(-n+3) { border-bottom: none !important; }
}

@media (max-width: 767.98px) {
    .cp-services-panel .row > div:nth-child(2n) { border-right: none !important; }
    .cp-services-panel .row > div:nth-last-child(-n+2) { border-bottom: none !important; }
    
    .cp-services-panel {
        border-left: none;
        border-top: 1px solid var(--cp-border);
    }
}

.cp-stat-glyph {
    font-size: 1rem;
    color: var(--cp-muted);
    flex-shrink: 0;
}

.cp-stat-content {
    min-width: 0;
}

.cp-stat-label {
    color: var(--cp-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cp-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.25rem;
    color: var(--cp-text);
}

.cp-stat-meta {
    color: var(--cp-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Product card styles for CrazyAI and SMS (matches main/index.php product cards) */
.cp-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;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    height: 100%;
    overflow: hidden;
}

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

.cp-product-card:hover,
.cp-product-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: inherit;
}

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

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

.cp-product-card:hover .cp-product-icon {
    transform: scale(1.1);
}

.cp-product-icon.is-ai {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.cp-product-icon.is-sms {
    background: linear-gradient(135deg, #10b981, #06b6d4);
}

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

.cp-product-icon.is-fax {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.cp-product-icon.is-sip {
    background: linear-gradient(135deg, #2962ff, #00b0ff);
}

.cp-product-icon.is-number-manager {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.cp-product-icon.is-announcement {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
}

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

.cp-product-title-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

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

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

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

.cp-product-btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    border: 2px solid #007bff;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
}

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

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

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

@media (max-width: 768px) {
    .cp-product-card {
        margin-bottom: 1rem;
    }
    .cp-product-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    .cp-product-title {
        font-size: 1.125rem;
    }
    .cp-product-desc {
        font-size: 0.9375rem;
    }
}

.cp-action-card {
    position: relative;
    isolation: isolate;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--cp-border);
    border-radius: 1.25rem;
    background: var(--cp-surface-strong);
    color: var(--cp-text);
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    min-height: 12.5rem;
}

[data-theme-mode="dark"] .cp-action-card {
    background: var(--cp-surface-strong);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.24);
}

.cp-action-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.35rem;
    opacity: 0.9;
    z-index: -1;
}

.cp-action-card.is-ai::before {
    background: linear-gradient(180deg, #ec4899, #8b5cf6);
}

.cp-action-card.is-sms::before {
    background: linear-gradient(180deg, #10b981, #06b6d4);
}

.cp-action-card:hover,
.cp-action-card:focus-visible {
    border-color: rgba(99, 102, 241, 0.36);
    color: var(--cp-text);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}

.cp-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    color: #ffffff;
}

.cp-action-card.is-ai .cp-action-icon {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    box-shadow: 0 12px 24px rgba(236, 72, 153, 0.25);
}

.cp-action-card.is-sms .cp-action-icon {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    box-shadow: 0 12px 24px rgba(16, 185, 129, 0.25);
}

.cp-action-title {
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 0.35rem;
}

.cp-action-desc {
    color: var(--cp-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 1.25rem;
}

.cp-action-btn {
    margin-top: auto;
    font-weight: 800;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 160ms ease;
}

.cp-action-btn.is-ai {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}
.cp-action-card:hover .cp-action-btn.is-ai {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #ffffff;
}

.cp-action-btn.is-sms {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}
.cp-action-card:hover .cp-action-btn.is-sms {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .cp-hero {
        margin-bottom: 1rem !important;
        padding: 1rem 1.15rem !important;
    }

    .cp-stat-card {
        padding: 0.9rem 1rem !important;
    }

    .cp-product-card {
        margin-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    .cp-hero {
        margin-bottom: 1rem !important;
        padding: 1.15rem 1.35rem !important;
    }

    .cp-stat-card {
        padding: 1rem 1.15rem !important;
    }

    .cp-product-card {
        margin-bottom: 0;
    }
}

.cp-loading {
    animation: cp-shimmer 1.2s linear infinite;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.16), rgba(148, 163, 184, 0.32), rgba(148, 163, 184, 0.16));
    background-size: 200% 100%;
    border-radius: 0.35rem;
    color: transparent;
    display: inline-block;
    min-width: 5rem;
}

@keyframes cp-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

[data-theme-mode="dark"] .cp-action-btn.is-ai {
    background: rgba(236, 72, 153, 0.18);
    color: #f472b6;
}
[data-theme-mode="dark"] .cp-action-btn.is-sms {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

/* Portal default modern modal — Operational Red header (features without a dedicated accent) */
.portal-modern-modal {
    background: var(--bs-card-bg, #fff) !important;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12)) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
    color: var(--bs-heading-color, #172033) !important;
}

[data-theme-mode="dark"] .portal-modern-modal {
    background: #161616 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: #f6f7fb !important;
    box-shadow: none;
}

.portal-modern-modal .modal-header,
.portal-modern-modal .offcanvas-header {
    background: linear-gradient(90deg, #b02a37 0%, #dc3545 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.portal-modern-modal.portal-modern-modal--danger .modal-header,
.portal-modern-modal.portal-modern-modal--danger .offcanvas-header {
    background: linear-gradient(90deg, rgba(127, 29, 29, 0.85) 0%, rgba(185, 28, 28, 0.65) 100%) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.portal-modern-modal .modal-title,
.portal-modern-modal .offcanvas-title {
    color: #f6f7fb !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.portal-modern-modal .modal-title.text-danger {
    color: #fecaca !important;
}

.portal-modern-modal .modal-title i,
.portal-modern-modal .offcanvas-title i {
    color: #fecdd3 !important;
    font-size: 1.2rem !important;
    vertical-align: middle;
}

.portal-modern-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.2);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.portal-modern-modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.portal-modern-modal .modal-body,
.portal-modern-modal .offcanvas-body {
    padding: 1.5rem !important;
    background: var(--bs-body-bg, #fff) !important;
    color: inherit !important;
}

[data-theme-mode="dark"] .portal-modern-modal .modal-body,
[data-theme-mode="dark"] .portal-modern-modal .offcanvas-body {
    background: #161616 !important;
    color: #f6f7fb !important;
}

.portal-modern-modal .modal-footer {
    background: var(--bs-body-bg, #fff) !important;
    border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12)) !important;
    padding: 1rem 1.5rem !important;
}

[data-theme-mode="dark"] .portal-modern-modal .modal-footer {
    background: #161616 !important;
    border-top-color: rgba(255, 255, 255, 0.09) !important;
}

/* Recording Box — pink theme (portal product card + modern modals) */
.cp-product-icon.is-recording-box {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(244, 63, 94, 0.08));
    color: #ec4899;
}

.rb-modern-modal {
    background: var(--rb-panel) !important;
    border: 1px solid var(--rb-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
    color: var(--rb-ink) !important;
}

.rb-modern-modal .modal-header,
.rb-modern-modal .offcanvas-header {
    background: linear-gradient(90deg, #be185d 0%, #ec4899 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.rb-modern-modal.rb-modern-modal--danger .modal-header {
    background: linear-gradient(90deg, rgba(127, 29, 29, 0.85) 0%, rgba(185, 28, 28, 0.65) 100%) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.rb-modern-modal .modal-title,
.rb-modern-modal .offcanvas-title {
    color: #f6f7fb !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.rb-modern-modal .modal-title.text-danger {
    color: #fca5a5 !important;
}

.rb-modern-modal .modal-title i,
.rb-modern-modal .offcanvas-title i {
    color: #fce7f3 !important;
    font-size: 1.2rem !important;
    vertical-align: middle;
}

.rb-modern-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.2);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.rb-modern-modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.rb-modern-modal .modal-body,
.rb-modern-modal .offcanvas-body {
    padding: 1.5rem !important;
    background: var(--rb-panel) !important;
    color: var(--rb-ink) !important;
}

.rb-modern-modal .bg-light-subtle {
    background-color: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid var(--rb-border) !important;
}

.rb-modern-modal .form-label,
.rb-modern-modal .rb-form-label,
.rb-modern-modal .rg-form-label {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--rb-muted) !important;
    margin-bottom: 0.5rem !important;
}

.rb-modern-modal .form-control,
.rb-modern-modal .form-select,
.rb-modern-modal .rb-form-control,
.rb-modern-modal .rb-form-select,
.rb-modern-modal .rg-form-control,
.rb-modern-modal .rg-form-select {
    background-color: var(--rb-panel-strong) !important;
    border: 1px solid var(--rb-border) !important;
    color: var(--rb-ink) !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    padding: 0.55rem 0.8rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

.rb-modern-modal .form-control::placeholder {
    color: var(--rb-muted) !important;
}

.rb-modern-modal .form-control:hover,
.rb-modern-modal .form-select:hover {
    border-color: rgba(236, 72, 153, 0.35) !important;
    background-color: var(--rb-panel-strong) !important;
}

.rb-modern-modal .form-control:focus,
.rb-modern-modal .form-select:focus {
    background-color: var(--rb-panel-strong) !important;
    border-color: #ec4899 !important;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2) !important;
    color: var(--rb-ink) !important;
}

.rb-modern-modal .form-control:disabled,
.rb-modern-modal .form-select:disabled {
    background-color: rgba(15, 23, 42, 0.04) !important;
    border-color: var(--rb-border) !important;
    color: var(--rb-muted) !important;
    opacity: 0.6;
}

.rb-modern-modal .rb-help-text,
.rb-modern-modal .rg-help-text,
.rb-modern-modal .text-muted {
    color: var(--rb-muted) !important;
}

.rb-modern-modal h6.text-muted {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #db2777 !important;
    margin-bottom: 1rem !important;
}

.rb-modern-modal .modal-footer {
    background: var(--rb-panel) !important;
    border-top: 1px solid var(--rb-border) !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.rb-modern-modal .btn-secondary {
    border: 1px solid var(--rb-border) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.rb-modern-modal .btn-secondary:hover {
    background: rgba(236, 72, 153, 0.08) !important;
    border-color: rgba(236, 72, 153, 0.35) !important;
    color: var(--rb-ink) !important;
}

.rb-modern-modal .btn-primary {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.rb-modern-modal .btn-primary:hover {
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.4) !important;
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #f472b6 0%, #db2777 100%) !important;
}

.rb-modern-modal .btn-primary:active {
    transform: translateY(1px) !important;
}

.rb-modern-modal .btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}

.rb-modern-modal .btn-secondary:hover,
.rb-modern-modal .btn-secondary:focus {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

.rb-modern-modal .btn-danger {
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}

[data-theme-mode="dark"] .rb-modern-modal {
    background: #161616 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.75) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .rb-modern-modal .modal-body,
[data-theme-mode="dark"] .rb-modern-modal .offcanvas-body {
    background: #161616 !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .rb-modern-modal .bg-light-subtle {
    background-color: rgba(255, 255, 255, 0.025) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme-mode="dark"] .rb-modern-modal .form-label,
[data-theme-mode="dark"] .rb-modern-modal .rb-form-label,
[data-theme-mode="dark"] .rb-modern-modal .rg-form-label {
    color: #b3b3b3 !important;
}

[data-theme-mode="dark"] .rb-modern-modal .form-control,
[data-theme-mode="dark"] .rb-modern-modal .form-select,
[data-theme-mode="dark"] .rb-modern-modal .rb-form-control,
[data-theme-mode="dark"] .rb-modern-modal .rb-form-select,
[data-theme-mode="dark"] .rb-modern-modal .rg-form-control,
[data-theme-mode="dark"] .rb-modern-modal .rg-form-select {
    background-color: #1a1a1c !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #eeeeee !important;
}

[data-theme-mode="dark"] .rb-modern-modal .form-control:hover,
[data-theme-mode="dark"] .rb-modern-modal .form-select:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: #1f1f22 !important;
}

[data-theme-mode="dark"] .rb-modern-modal .form-control:focus,
[data-theme-mode="dark"] .rb-modern-modal .form-select:focus {
    background-color: #1d1d1f !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .rb-modern-modal .form-control:disabled,
[data-theme-mode="dark"] .rb-modern-modal .form-select:disabled {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
    color: #697386 !important;
}

[data-theme-mode="dark"] .rb-modern-modal .rb-help-text,
[data-theme-mode="dark"] .rb-modern-modal .rg-help-text,
[data-theme-mode="dark"] .rb-modern-modal .text-muted {
    color: #b3b3b3 !important;
}

[data-theme-mode="dark"] .rb-modern-modal h6.text-muted {
    color: #f9a8d4 !important;
}

[data-theme-mode="dark"] .rb-modern-modal .modal-footer {
    background: #161616 !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme-mode="dark"] .rb-modern-modal .btn-secondary {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #b3b3b3 !important;
}

[data-theme-mode="dark"] .rb-modern-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

[data-theme-mode="light"] .rb-modern-modal {
    background: var(--rb-panel, #ffffff) !important;
    border-color: var(--rb-border, rgba(0, 0, 0, 0.12)) !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    color: var(--rb-ink, #172033) !important;
}

[data-theme-mode="light"] .rb-modern-modal .modal-body,
[data-theme-mode="light"] .rb-modern-modal .offcanvas-body,
[data-theme-mode="light"] .rb-modern-modal .modal-footer {
    background: var(--rb-panel, #ffffff) !important;
    color: var(--rb-ink, #172033) !important;
}

[data-theme-mode="light"] .rb-modern-modal .modal-footer {
    border-top-color: var(--rb-border, rgba(0, 0, 0, 0.12)) !important;
}

[data-theme-mode="light"] .rb-modern-modal .form-label,
[data-theme-mode="light"] .rb-modern-modal .rb-form-label,
[data-theme-mode="light"] .rb-modern-modal .rg-form-label {
    color: var(--rb-muted, #697386) !important;
}

[data-theme-mode="light"] .rb-modern-modal .form-control,
[data-theme-mode="light"] .rb-modern-modal .form-select,
[data-theme-mode="light"] .rb-modern-modal .rb-form-control,
[data-theme-mode="light"] .rb-modern-modal .rb-form-select,
[data-theme-mode="light"] .rb-modern-modal .rg-form-control,
[data-theme-mode="light"] .rb-modern-modal .rg-form-select {
    background-color: var(--rb-panel-strong, #ffffff) !important;
    border-color: var(--rb-border, rgba(0, 0, 0, 0.12)) !important;
    color: var(--rb-ink, #172033) !important;
}

[data-theme-mode="light"] .rb-modern-modal .form-control:focus,
[data-theme-mode="light"] .rb-modern-modal .form-select:focus {
    background-color: var(--rb-panel-strong, #ffffff) !important;
    color: var(--rb-ink, #172033) !important;
}

[data-theme-mode="light"] .rb-modern-modal .rb-help-text,
[data-theme-mode="light"] .rb-modern-modal .rg-help-text,
[data-theme-mode="light"] .rb-modern-modal .text-muted {
    color: var(--rb-muted, #697386) !important;
}

[data-theme-mode="light"] .rb-modern-modal .btn-close {
    filter: none;
    opacity: 0.55;
}

[data-theme-mode="light"] .rb-modern-modal .btn-close:hover {
    opacity: 0.85;
}

/* Premium Ring Groups modern modal (purple accent) */
.rg-modern-modal {
    background: var(--rg-panel) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
    color: var(--rg-ink) !important;
}
.rg-modern-modal .modal-header,
.rg-modern-modal .offcanvas-header {
    background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}
.rg-modern-modal.rg-modern-modal--danger .modal-header {
    background: linear-gradient(90deg, rgba(127, 29, 29, 0.85) 0%, rgba(185, 28, 28, 0.65) 100%) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.25) !important;
}
.rg-modern-modal .modal-title,
.rg-modern-modal .offcanvas-title {
    color: #f6f7fb !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}
.rg-modern-modal .modal-title.text-danger {
    color: #fca5a5 !important;
}
.rg-modern-modal .modal-title i,
.rg-modern-modal .offcanvas-title i {
    color: #ddd6fe !important;
    font-size: 1.2rem !important;
    vertical-align: middle;
}
.rg-modern-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.2);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.rg-modern-modal .btn-close:hover {
    opacity: 0.85;
    transform: rotate(90deg);
}
.rg-modern-modal .modal-body,
.rg-modern-modal .offcanvas-body {
    background: var(--rg-panel-strong) !important;
    padding: 1.5rem !important;
    color: var(--rg-ink) !important;
}
.rg-modern-modal .modal-footer {
    background: var(--rg-panel-strong) !important;
    border-top: 1px solid var(--rg-border) !important;
    padding: 1.25rem 1.5rem !important;
}
.rg-modern-modal .btn-secondary {
    background-color: transparent !important;
    border: 1px solid var(--rg-border) !important;
    color: var(--rg-muted) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}
.rg-modern-modal .btn-secondary:hover,
.rg-modern-modal .btn-secondary:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--rg-ink) !important;
}
.rg-modern-modal .btn-primary {
    background-color: var(--rg-accent) !important;
    border-color: var(--rg-accent) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}
.rg-modern-modal .btn-primary:hover,
.rg-modern-modal .btn-primary:focus {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
}
.rg-modern-modal .btn-danger {
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}

[data-theme-mode="dark"] .rg-modern-modal {
    background: #161616 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.75) !important;
    color: #f6f7fb !important;
}
[data-theme-mode="dark"] .rg-modern-modal .modal-body,
[data-theme-mode="dark"] .rg-modern-modal .offcanvas-body {
    background: #161616 !important;
    color: #f6f7fb !important;
}
[data-theme-mode="dark"] .rg-modern-modal .modal-footer {
    background: #161616 !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme-mode="dark"] .rg-modern-modal .btn-secondary {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #b3b3b3 !important;
}
[data-theme-mode="dark"] .rg-modern-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}
[data-theme-mode="light"] .rg-modern-modal {
    background: var(--rg-panel, #ffffff) !important;
    border-color: var(--rg-border, rgba(0, 0, 0, 0.12)) !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    color: var(--rg-ink, #172033) !important;
}
[data-theme-mode="light"] .rg-modern-modal .modal-body,
[data-theme-mode="light"] .rg-modern-modal .offcanvas-body,
[data-theme-mode="light"] .rg-modern-modal .modal-footer {
    background: var(--rg-panel, #ffffff) !important;
    color: var(--rg-ink, #172033) !important;
}
[data-theme-mode="light"] .rg-modern-modal .modal-footer {
    border-top-color: var(--rg-border, rgba(0, 0, 0, 0.12)) !important;
}
[data-theme-mode="light"] .rg-modern-modal .btn-secondary {
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #4e5968 !important;
}
[data-theme-mode="light"] .rg-modern-modal .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.02) !important;
    color: #172033 !important;
}

/* Recharge Disclaimer Alert */
.recharge-disclaimer-alert {
    background-color: #b91c1c !important;
    border-color: #991b1b !important;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    font-size: 0.95rem !important;
}
.recharge-disclaimer-alert .small {
    font-size: inherit !important;
}
.recharge-disclaimer-alert a {
    color: #ffffff !important;
    text-decoration: underline;
    font-weight: 600;
}
.recharge-disclaimer-alert a:hover {
    color: #fecaca !important;
}
.recharge-disclaimer-alert .alert-icon {
    font-size: 1.35rem;
    color: #ffffff !important;
    flex-shrink: 0;
}

/* ==========================
   Premium Time Conditions — green accent theme
   (mirrors Recording Box / Announcements patterns)
   ========================== */

.tc-page-container,
#tc-create-drawer,
#tc-add-rule-modal,
#tc-add-holiday-modal,
#tc-delete-modal,
#tc-quickstart-modal,
.tc-modern-modal {
    --tc-ink: var(--bs-heading-color, #172033);
    --tc-muted: var(--bs-secondary-color, #697386);
    --tc-panel: var(--bs-card-bg, #fff);
    --tc-panel-strong: var(--bs-body-bg, #fff);
    --tc-border: var(--bs-border-color, rgba(0, 0, 0, 0.12));
    --tc-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
    --tc-accent: #22c55e;
    --tc-accent-hover: #16a34a;
    --tc-accent-light: rgba(34, 197, 94, 0.12);
    --tc-accent-soft: #86efac;
    --tc-green: #22c55e;
    --tc-red: #ef4444;
    --tc-amber: #f59e0b;
}

[data-theme-mode="dark"] .tc-page-container,
[data-theme-mode="dark"] #tc-create-drawer,
[data-theme-mode="dark"] #tc-add-rule-modal,
[data-theme-mode="dark"] #tc-add-holiday-modal,
[data-theme-mode="dark"] #tc-delete-modal,
[data-theme-mode="dark"] #tc-quickstart-modal,
[data-theme-mode="dark"] .tc-modern-modal {
    --tc-ink: #f6f7fb;
    --tc-muted: #b3b3b3;
    --tc-panel: #161616;
    --tc-panel-strong: #101010;
    --tc-border: rgba(255, 255, 255, 0.09);
    --tc-shadow: none;
}

/* Modern modal / offcanvas (green header) */
.tc-modern-modal {
    background: var(--tc-panel) !important;
    border: 1px solid var(--tc-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
    color: var(--tc-ink) !important;
}

.tc-modern-modal .modal-header,
.tc-modern-modal .offcanvas-header {
    background: linear-gradient(90deg, #15803d 0%, #22c55e 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.tc-modern-modal .modal-title,
.tc-modern-modal .offcanvas-title {
    color: #f6f7fb !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.tc-modern-modal .modal-title i,
.tc-modern-modal .offcanvas-title i {
    color: #dcfce7 !important;
    font-size: 1.2rem !important;
    vertical-align: middle;
}

.tc-modern-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.2);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tc-modern-modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.tc-modern-modal .modal-body,
.tc-modern-modal .offcanvas-body {
    padding: 1.5rem !important;
    background: var(--tc-panel) !important;
    color: var(--tc-ink) !important;
}

.tc-modern-modal .modal-footer {
    background: var(--tc-panel) !important;
    border-top: 1px solid var(--tc-border) !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.tc-modern-modal .form-label,
.tc-modern-modal .tc-form-label {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--tc-muted) !important;
    margin-bottom: 0.5rem !important;
}

.tc-modern-modal .form-control,
.tc-modern-modal .form-select {
    background-color: var(--tc-panel-strong) !important;
    border: 1px solid var(--tc-border) !important;
    color: var(--tc-ink) !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    padding: 0.55rem 0.8rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

.tc-modern-modal .form-control::placeholder {
    color: var(--tc-muted) !important;
}

.tc-modern-modal .form-control:hover,
.tc-modern-modal .form-select:hover {
    border-color: var(--tc-border) !important;
    background-color: var(--tc-panel-strong) !important;
}

.tc-modern-modal .form-control:focus,
.tc-modern-modal .form-select:focus {
    background-color: var(--tc-panel-strong) !important;
    border-color: var(--tc-accent) !important;
    box-shadow: 0 0 0 3px var(--tc-accent-light) !important;
    color: var(--tc-ink) !important;
}

.tc-modern-modal .btn-primary {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tc-modern-modal .btn-primary:hover {
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.4) !important;
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #34d399 0%, #16a34a 100%) !important;
}

.tc-modern-modal .btn-primary:active {
    transform: translateY(1px) !important;
}

.tc-modern-modal .btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}

.tc-modern-modal .btn-secondary:hover,
.tc-modern-modal .btn-secondary:focus {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

.tc-modern-modal .btn-secondary {
    border: 1px solid var(--tc-border) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.tc-modern-modal .btn-secondary:hover {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: var(--tc-ink) !important;
}

.tc-modern-modal .btn-danger {
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}

.tc-modern-modal .text-muted {
    color: var(--tc-muted) !important;
}

[data-theme-mode="dark"] .tc-modern-modal {
    background: #161616 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.75) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .tc-modern-modal .modal-body,
[data-theme-mode="dark"] .tc-modern-modal .offcanvas-body {
    background: #161616 !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .tc-modern-modal .modal-footer {
    background: #161616 !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme-mode="dark"] .tc-modern-modal .form-label,
[data-theme-mode="dark"] .tc-modern-modal .tc-form-label {
    color: #b3b3b3 !important;
}

[data-theme-mode="dark"] .tc-modern-modal .form-control,
[data-theme-mode="dark"] .tc-modern-modal .form-select {
    background-color: #1a1a1c !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #eeeeee !important;
}

[data-theme-mode="dark"] .tc-modern-modal .form-control:hover,
[data-theme-mode="dark"] .tc-modern-modal .form-select:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: #1f1f22 !important;
}

[data-theme-mode="dark"] .tc-modern-modal .form-control:focus,
[data-theme-mode="dark"] .tc-modern-modal .form-select:focus {
    background-color: #1d1d1f !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .tc-modern-modal .btn-secondary {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #b3b3b3 !important;
}

[data-theme-mode="dark"] .tc-modern-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .tc-modern-modal .text-muted {
    color: #b3b3b3 !important;
}

[data-theme-mode="light"] .tc-modern-modal {
    background: var(--tc-panel, #ffffff) !important;
    border-color: var(--tc-border, rgba(0, 0, 0, 0.12)) !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    color: var(--tc-ink, #172033) !important;
}

[data-theme-mode="light"] .tc-modern-modal .modal-body,
[data-theme-mode="light"] .tc-modern-modal .offcanvas-body,
[data-theme-mode="light"] .tc-modern-modal .modal-footer {
    background: var(--tc-panel, #ffffff) !important;
    color: var(--tc-ink, #172033) !important;
}

[data-theme-mode="light"] .tc-modern-modal .modal-footer {
    border-top-color: var(--tc-border, rgba(0, 0, 0, 0.12)) !important;
}

[data-theme-mode="light"] .tc-modern-modal .form-label,
[data-theme-mode="light"] .tc-modern-modal .tc-form-label {
    color: var(--tc-muted, #697386) !important;
}

[data-theme-mode="light"] .tc-modern-modal .form-control,
[data-theme-mode="light"] .tc-modern-modal .form-select {
    background-color: var(--tc-panel-strong, #ffffff) !important;
    border-color: var(--tc-border, rgba(0, 0, 0, 0.12)) !important;
    color: var(--tc-ink, #172033) !important;
}

[data-theme-mode="light"] .tc-modern-modal .form-control:focus,
[data-theme-mode="light"] .tc-modern-modal .form-select:focus {
    background-color: var(--tc-panel-strong, #ffffff) !important;
    color: var(--tc-ink, #172033) !important;
}

[data-theme-mode="light"] .tc-modern-modal .form-control:hover,
[data-theme-mode="light"] .tc-modern-modal .form-select:hover {
    border-color: rgba(0, 0, 0, 0.25) !important;
    background-color: var(--tc-panel-strong, #ffffff) !important;
}

[data-theme-mode="light"] .tc-modern-modal .text-muted {
    color: var(--tc-muted, #697386) !important;
}

.tc-page-container .form-control,
.tc-page-container .form-select {
    background-color: var(--tc-panel-strong) !important;
    border: 1px solid var(--tc-border) !important;
    color: var(--tc-ink) !important;
}

.tc-page-container .form-control:focus,
.tc-page-container .form-select:focus {
    background-color: var(--tc-panel-strong) !important;
    border-color: var(--tc-accent) !important;
    box-shadow: 0 0 0 3px var(--tc-accent-light) !important;
    color: var(--tc-ink) !important;
}

.tc-page-container .form-control::placeholder {
    color: var(--tc-muted) !important;
}

/* Subnav — spacing mirrors ann-page-container / ann-subnav */
.tc-page-container .tc-subnav {
    margin-bottom: 1rem;
}

.tc-page-container .tc-subnav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-page-container .tc-subnav-link {
    align-items: center;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid var(--tc-border, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    color: var(--tc-muted, #b3b3b3);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.tc-page-container .tc-subnav-link:hover {
    border-color: rgba(34, 197, 94, 0.35);
    color: var(--tc-ink, #f6f7fb);
}

.tc-page-container .tc-subnav-link.is-active {
    background: rgba(34, 197, 94, 0.28);
    border-color: rgba(34, 197, 94, 0.55);
    color: #f6f7fb;
}

.tc-page-container .tc-subnav-link i {
    color: inherit;
    font-size: 0.95em;
    line-height: 1;
}

[data-theme-mode="dark"] .tc-page-container .tc-subnav-link:not(.is-active) {
    background: rgba(255, 255, 255, 0.03);
    color: var(--tc-muted, #b3b3b3);
}

[data-theme-mode="dark"] .tc-page-container .tc-subnav-link.is-active {
    color: #f6f7fb;
}

.tc-page-container .btn-primary {
    background: linear-gradient(135deg, var(--tc-accent), #86efac) !important;
    border-color: var(--tc-accent) !important;
    color: #101010 !important;
}

.tc-page-container .btn-primary:hover,
.tc-page-container .btn-primary:focus {
    background: linear-gradient(135deg, var(--tc-accent-hover), #4ade80) !important;
    border-color: var(--tc-accent-hover) !important;
    color: #101010 !important;
}

/* Badges */
.tc-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--tc-border);
    color: var(--tc-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

/* Chips */
.tc-rule-chip,
.tc-holiday-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--tc-border);
    margin-bottom: 0.5rem;
    transition: border-color 0.2s ease;
}

.tc-rule-chip:hover,
.tc-holiday-chip:hover {
    border-color: rgba(34, 197, 94, 0.25);
}

/* Day chips */
.tc-day-chip-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--tc-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--tc-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.tc-day-chip-label:hover {
    border-color: rgba(34, 197, 94, 0.35);
    color: var(--tc-ink);
}

.tc-day-chip {
    appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
}

.tc-day-chip-label:has(.tc-day-chip:checked) {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.55);
    color: #34d399;
}

/* Table */
.tc-page-container .tc-table {
    --bs-table-bg: var(--tc-panel) !important;
    --bs-table-color: var(--tc-ink) !important;
    --bs-table-border-color: var(--tc-border) !important;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.03) !important;
    --bs-table-hover-bg: rgba(34, 197, 94, 0.06) !important;
    --bs-table-hover-color: var(--tc-ink) !important;
    background-color: var(--tc-panel) !important;
    border-color: var(--tc-border) !important;
    color: var(--tc-ink) !important;
    margin-bottom: 0;
}

.tc-page-container .tc-table > :not(caption) > * > * {
    --bs-table-bg: var(--tc-panel) !important;
    --bs-table-color: var(--tc-ink) !important;
    --bs-body-bg: var(--tc-panel) !important;
    background-color: var(--tc-panel) !important;
    border-color: var(--tc-border) !important;
    box-shadow: none !important;
    color: var(--tc-ink) !important;
}

.tc-page-container .tc-table thead th {
    background: rgba(0, 0, 0, 0.06) !important;
    border-bottom: 2px solid var(--tc-border) !important;
    color: var(--tc-muted) !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .tc-page-container .tc-table thead th {
    background: rgba(255, 255, 255, 0.02) !important;
}

.tc-page-container .tc-table tbody tr {
    border-bottom: 1px solid var(--tc-border);
}

.tc-page-container .tc-table tbody tr:hover > * {
    --bs-table-accent-bg: rgba(34, 197, 94, 0.04) !important;
    --bs-table-bg-state: rgba(34, 197, 94, 0.04) !important;
    background-color: rgba(34, 197, 94, 0.04) !important;
    box-shadow: none !important;
    color: var(--tc-ink) !important;
}

/* Card header */
.tc-table-card-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--tc-border);
    padding: 0.85rem 1.15rem;
}

.tc-table-card-header .card-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--tc-ink);
    font-size: 0.95rem;
    font-weight: 700;
}

/* Metrics */
.tc-metric-value {
    color: var(--tc-ink);
    font-size: clamp(1.4rem, 2.5vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0.25rem 0 0.15rem;
}

.tc-metric-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 1px solid var(--tc-border);
    color: #101010 !important;
    background: linear-gradient(135deg, var(--tc-accent), #86efac) !important;
    border-color: var(--tc-accent) !important;
}

.tc-usage-summary-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--tc-border);
    border-radius: 0.65rem;
    padding: 0.75rem 0.85rem;
    height: 100%;
}

/* Empty state */
.tc-empty-state {
    position: relative;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.28) 0%, rgba(16, 185, 129, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    margin: 0.35rem auto;
    max-width: 34rem;
}

.tc-empty-state-inner {
    position: relative;
    z-index: 2;
    background: var(--tc-panel, #161616);
    border-radius: 0.95rem;
    padding: 1.35rem 1.25rem;
    text-align: center;
}

.tc-empty-state-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 0.85rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.22) 0%, rgba(16, 185, 129, 0.08) 100%);
    border: 1px solid rgba(34, 197, 94, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #86efac;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.18);
}

.tc-empty-state-icon i {
    font-size: 1.35rem;
    line-height: 1;
}

.tc-empty-state-title {
    color: var(--tc-ink, #f6f7fb);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
}

.tc-empty-state-message {
    color: var(--tc-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 26rem;
}

/* Hero */
/* Dashboard hero panel */
.tc-dashboard-hero {
    background: var(--tc-panel);
    border: 1px solid var(--tc-border);
    border-radius: 0.85rem;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--tc-shadow);
    display: block;
    width: 100%;
}

.tc-hero-account {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tc-page-container {
    padding: 0.5rem 0.75rem 2.5rem;
    position: relative;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    .tc-page-container {
        overflow-x: hidden;
    }
}

.tc-page-container .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.tc-page-container .card.tc-card,
.tc-page-container .table-responsive {
    overflow: visible !important;
}

.tc-page-container .tc-table tbody td {
    font-size: 0.875rem;
    padding: 0.65rem 0.85rem;
    vertical-align: middle;
}

.tc-page-container .tc-table thead th {
    padding: 0.65rem 0.85rem;
}

.tc-page-container .tc-field-tooltip,
.tc-modern-modal .tc-field-tooltip {
    vertical-align: middle;
}

.tc-page-container .tc-table th {
    white-space: nowrap;
}

.tc-page-container .tc-table th .custom-kb-tooltip-wrapper {
    margin-left: 0.15rem;
}

.tc-modern-modal .modal-body,
.tc-modern-modal .offcanvas-body,
#tc-edit-modal .tab-pane {
    overflow: visible !important;
}

/* Fixed-position tooltips (time-conditions-tooltips.js) — suppress clipped CSS hover panels */
.tc-page-container .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.tc-page-container .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#tc-create-drawer .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#tc-create-drawer .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#tc-edit-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#tc-edit-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#tc-add-rule-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#tc-add-rule-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#tc-add-holiday-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#tc-add-holiday-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content {
    visibility: hidden !important;
    opacity: 0 !important;
}

.tc-floating-tooltip {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: calc(100vw - 1.5rem) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1200 !important;
}

body.modal-open .tc-floating-tooltip,
body:has([class*="wholesale-"][class*="-drawer"].open) .tc-floating-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
}

.modal.show .tc-floating-tooltip {
    z-index: 1305 !important;
}

.offcanvas.show .tc-floating-tooltip {
    z-index: 1105 !important;
}

.tc-floating-tooltip[data-tc-tooltip-placement="bottom"]::after {
    top: auto !important;
    bottom: 100% !important;
    border-color: transparent transparent #000000 transparent !important;
}

[data-theme-mode="dark"] .tc-floating-tooltip[data-tc-tooltip-placement="bottom"]::after {
    border-color: transparent transparent #101010 transparent !important;
}

.tc-page-container .table-responsive,
.tc-page-container .card.tc-card,
.tc-page-container .tab-pane,
#tc-create-drawer .offcanvas-body,
#tc-edit-modal .modal-body,
#tc-add-rule-modal .modal-body,
#tc-add-holiday-modal .modal-body {
    overflow: visible !important;
}

.tc-page-container .custom-kb-tooltip-wrapper.tc-tooltip-active,
#tc-create-drawer .custom-kb-tooltip-wrapper.tc-tooltip-active,
#tc-edit-modal .custom-kb-tooltip-wrapper.tc-tooltip-active,
#tc-add-rule-modal .custom-kb-tooltip-wrapper.tc-tooltip-active,
#tc-add-holiday-modal .custom-kb-tooltip-wrapper.tc-tooltip-active {
    z-index: 1200 !important;
}

.tc-empty-state-cell {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.tc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--tc-accent-light);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: var(--tc-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tc-hero-title {
    color: var(--tc-ink);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0.5rem 0 0.25rem;
}

.tc-hero-copy {
    color: var(--tc-muted);
    font-size: 0.875rem;
    max-width: 42rem;
    margin-bottom: 0.35rem;
}

.tc-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--tc-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--tc-ink);
    font-size: 0.875rem;
    font-weight: 600;
}

.tc-hero-search {
    background: #1a1a1c !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #eeeeee !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
}

.tc-hero-search:focus {
    background-color: #1d1d1f !important;
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
    color: #ffffff !important;
}

/* Hero two-column layout — content left, compact CTAs right (md+) */
.tc-dashboard-hero .tc-hero-layout-row {
    --tc-hero-layout-gap: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: var(--tc-hero-layout-gap);
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .tc-dashboard-hero .tc-hero-layout-row {
        --tc-hero-layout-gap: 1rem;
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: center;
    }

    .tc-dashboard-hero .tc-hero-layout-row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: none;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    .tc-dashboard-hero .tc-hero-layout-row {
        --tc-hero-layout-gap: 1.25rem;
    }
}

/* Hero side CTA column — stacked compact cards on md+ */
.tc-hero-side-ctas {
    width: 100%;
}

.tc-ad-cta-card--compact {
    border-radius: 0.85rem;
}

.tc-ad-cta-card--compact .tc-ad-cta-content {
    padding: 0.65rem 0.75rem;
}

.tc-ad-cta-card--compact .tc-ad-cta-icon {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.9rem;
    border-radius: 0.5rem;
}

.tc-ad-cta-card--compact .tc-ad-cta-eyebrow {
    margin-bottom: 0.2rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.58rem;
}

.tc-ad-cta-card--compact .tc-ad-cta-title {
    font-size: 0.82rem;
    margin-bottom: 0.1rem;
    line-height: 1.2;
}

.tc-ad-cta-card--compact .tc-ad-cta-desc {
    font-size: 0.72rem;
    line-height: 1.35;
    margin-bottom: 0.2rem;
}

.tc-ad-cta-card--compact .tc-ad-cta-action {
    font-size: 0.72rem;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    gap: 0.3rem;
}

@media (min-width: 768px) {
    .tc-hero-side-ctas {
        gap: 0.55rem !important;
    }

    .tc-hero-side-ctas .tc-ad-cta-card--compact .tc-ad-cta-content {
        padding: 0.6rem 0.7rem;
    }

    .tc-hero-side-ctas .tc-ad-cta-card--compact .tc-ad-cta-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.85rem;
    }

    .tc-hero-side-ctas .tc-ad-cta-card--compact .tc-ad-cta-title {
        font-size: 0.8rem;
    }

    .tc-hero-side-ctas .tc-ad-cta-card--compact .tc-ad-cta-desc {
        font-size: 0.7rem;
    }

    .tc-hero-side-ctas .tc-ad-cta-card--compact .tc-ad-cta-action {
        font-size: 0.7rem;
        margin-top: 0.4rem;
        padding-top: 0.4rem;
    }
}

/* CTA cards */
.tc-ad-cta-card {
    position: relative;
    border-radius: 1.25rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(16, 185, 129, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.tc-ad-cta-card:hover,
.tc-ad-cta-card:focus-visible {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5) 0%, rgba(16, 185, 129, 0.2) 50%, rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 0 20px 32px -8px rgba(0, 0, 0, 0.6), 0 0 15px rgba(34, 197, 94, 0.15);
    outline: none;
}

.tc-ad-cta-glow {
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle, rgba(134, 239, 172, 0.12) 0%, transparent 68%);
    pointer-events: none;
    z-index: 1;
}

.tc-ad-cta-content {
    position: relative;
    z-index: 2;
    border-radius: 0.95rem;
    padding: 1.1rem 1.15rem;
    background: var(--tc-panel);
    border: 1px solid var(--tc-border);
}

.tc-ad-cta-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #101010;
    font-size: 1.2rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.85), #86efac);
    border: 1px solid rgba(34, 197, 94, 0.35);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
    transition: transform 0.25s ease;
}

.tc-ad-cta-card:hover .tc-ad-cta-icon {
    transform: scale(1.05);
}

.tc-ad-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--tc-accent-light);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: var(--tc-accent-soft);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tc-ad-cta-title {
    margin: 0 0 0.3rem;
    color: var(--tc-ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.tc-ad-cta-desc {
    margin: 0;
    color: var(--tc-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.tc-ad-cta-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tc-border);
    color: var(--tc-accent);
    font-size: 0.875rem;
    font-weight: 700;
}

.tc-ad-cta-action i {
    color: inherit;
    transition: transform 0.2s ease;
}

.tc-ad-cta-card:hover .tc-ad-cta-action i {
    transform: translateX(3px);
}

/* Quickstart */
.tc-quickstart-modal-body {
    padding: 1.5rem;
}

.tc-quickstart-modal-intro {
    color: var(--tc-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.tc-quickstart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 1rem 0;
}

@media (min-width: 576px) {
    .tc-quickstart-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tc-quickstart-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--tc-border);
    transition: border-color 0.2s ease;
}

.tc-quickstart-item:hover {
    border-color: rgba(34, 197, 94, 0.25);
}

.tc-quickstart-item-num {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 800;
    color: #101010;
    background: linear-gradient(135deg, var(--tc-accent), #86efac);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
}

.tc-quickstart-item-title {
    color: var(--tc-ink);
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.tc-quickstart-item-detail {
    color: var(--tc-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 0;
}

.tc-quickstart-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.55rem;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.15);
    color: var(--tc-muted);
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0;
}

.tc-quickstart-tip i {
    color: var(--tc-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Card */
.tc-page-container .card.tc-card,
.tc-modern-modal .card.tc-card {
    background: var(--tc-panel) !important;
    border: 1px solid var(--tc-border) !important;
    border-radius: 0.85rem;
    box-shadow: var(--tc-shadow);
    color: var(--tc-ink);
}

.tc-page-container .card.tc-card .card-header,
.tc-modern-modal .card.tc-card .card-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--tc-border);
    color: var(--tc-ink);
}

.tc-page-container .card.tc-card .card-body,
.tc-modern-modal .card.tc-card .card-body {
    background: var(--tc-panel);
    color: var(--tc-ink);
}

/* Simulator */
.tc-simulator-matched {
    color: var(--tc-accent-soft);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.tc-simulator-default {
    color: var(--tc-muted);
    font-size: 0.875rem;
}

/* Form label helper */
.tc-form-label {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b3b3b3;
    margin-bottom: 0.5rem;
}

/* Light mode overrides */
[data-theme-mode="light"] .tc-empty-state-inner {
    background: var(--tc-panel, #fff);
}

[data-theme-mode="light"] .tc-empty-state-title {
    color: var(--tc-ink, #172033);
}

[data-theme-mode="light"] .tc-ad-cta-content {
    background: var(--tc-panel, #fff);
}

[data-theme-mode="light"] .tc-quickstart-item {
    background: rgba(0, 0, 0, 0.01);
}

/* Mobile */
@media (max-width: 575.98px) {
    .tc-empty-state-inner {
        padding: 1.1rem 0.85rem;
    }
    .tc-empty-state-icon {
        width: 44px;
        height: 44px;
    }
    .tc-empty-state-title {
        font-size: 0.95rem;
    }
    .tc-empty-state-message {
        font-size: 0.85rem;
    }
    .tc-hero-title {
        font-size: 1.35rem;
    }
    .tc-ad-cta-card {
        border-radius: 1rem;
    }
    .tc-ad-cta-content {
        padding: 0.9rem;
    }
    .tc-ad-cta-icon {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1rem;
    }
}
/* Time Conditions — pricing page (scoped under tc-page-container) */

.tc-page-container[data-tc-page="pricing"] .tc-panel-card {
    background: var(--tc-panel);
    border: 1px solid var(--tc-border);
    border-radius: 0.85rem;
    box-shadow: var(--tc-shadow);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero {
    background: var(--tc-panel);
    border: 1px solid var(--tc-border);
    border-radius: 0.85rem;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--tc-shadow);
}
.tc-page-container[data-tc-page="pricing"] .tc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem 0.28rem 0.45rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tc-page-container[data-tc-page="pricing"] .tc-eyebrow i {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: #4ade80;
    background: rgba(34, 197, 94, 0.18);
}
.tc-page-container[data-tc-page="pricing"] .tc-hero-title {
    color: var(--tc-ink);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0.55rem 0 0.35rem;
}
.tc-page-container[data-tc-page="pricing"] .tc-hero-copy {
    color: var(--tc-muted);
    font-size: 0.85rem;
    max-width: 42rem;
    line-height: 1.55;
}
.tc-page-container[data-tc-page="pricing"] .tc-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.32rem 0.7rem 0.32rem 0.45rem;
    border: 1px solid var(--tc-border);
    border-radius: 999px;
    color: var(--tc-ink);
    font-size: 0.72rem;
    font-weight: 650;
    background: rgba(255, 255, 255, 0.03);
}
.tc-page-container[data-tc-page="pricing"] .tc-hero-pill:nth-child(1) {
    border-color: rgba(5, 150, 105, 0.35);
    background: rgba(5, 150, 105, 0.1);
}
.tc-page-container[data-tc-page="pricing"] .tc-hero-pill:nth-child(2) {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.1);
}
.tc-page-container[data-tc-page="pricing"] .tc-hero-pill:nth-child(3) {
    border-color: rgba(8, 145, 178, 0.35);
    background: rgba(8, 145, 178, 0.1);
}
.tc-page-container[data-tc-page="pricing"] .tc-hero-pill i {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: inherit !important;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
}
.tc-page-container[data-tc-page="pricing"] .tc-hero-pill:nth-child(1) i {
    color: var(--tc-accent) !important;
    background: rgba(5, 150, 105, 0.14);
}
.tc-page-container[data-tc-page="pricing"] .tc-hero-pill:nth-child(2) i {
    color: #4ade80 !important;
    background: rgba(34, 197, 94, 0.18);
}
.tc-page-container[data-tc-page="pricing"] .tc-hero-pill:nth-child(3) i {
    color: #06b6d4 !important;
    background: rgba(8, 145, 178, 0.14);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-accent {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 700;
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    letter-spacing: -0.01em;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-card {
    text-align: center;
    padding: 1.5rem 1.25rem;
    border-radius: 0.85rem;
    border: none;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 10px 28px rgba(34, 197, 94, 0.28);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.85rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-card-icon i {
    color: #ffffff;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-card-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.5rem;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-price {
    color: #ffffff;
    font-size: clamp(2.5rem, 6vw, 3.25rem);
    font-weight: 850;
    letter-spacing: -0.06em;
    line-height: 1;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-currency {
    font-size: 0.55em;
    vertical-align: super;
    font-weight: 700;
    color: #ffffff;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-period {
    font-size: 0.35em;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-card-note {
    margin-top: 0.65rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card {
    border: 1px solid var(--tc-border);
    border-radius: 0.85rem;
    padding: 1.25rem;
    background: var(--tc-panel);
    box-shadow: var(--tc-shadow);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, 0.35);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card--subscription { border-top: 3px solid var(--tc-accent); }
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card--sms { border-top: 3px solid #ec4899; }
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card--forward { border-top: 3px solid var(--tc-amber); }
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.85rem;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-icon.is-blue {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-icon.is-pink {
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-icon.is-amber {
    background: rgba(245, 158, 11, 0.12);
    color: var(--tc-amber);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-icon i {
    color: inherit;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-title {
    color: var(--tc-ink);
    font-size: 1.05rem;
    font-weight: 750;
    margin-bottom: 0.5rem;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-amount {
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -0.03em;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-unit {
    font-size: 0.8rem;
    font-weight: 500;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-rate {
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    text-align: center;
    border: 1px solid rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.08);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card--subscription .tc-pricing-card-rate {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card--sms .tc-pricing-card-rate {
    background: rgba(236, 72, 153, 0.08);
    border-color: rgba(236, 72, 153, 0.25);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card--forward .tc-pricing-card-rate {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
}
.tc-pricing-card-rate .tc-pricing-card-amount,
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-rate .tc-pricing-card-unit {
    color: var(--tc-ink);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-card-lead {
    font-size: 0.825rem;
    color: var(--tc-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--tc-muted);
    line-height: 1.45;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-feature-list li > i {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    background: rgba(34, 197, 94, 0.12);
    color: var(--tc-green) !important;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-feature-warn-icon {
    background: rgba(245, 158, 11, 0.12) !important;
    color: var(--tc-amber) !important;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-feature-list strong {
    color: var(--tc-ink);
    font-weight: 650;
}
.tc-page-container[data-tc-page="pricing"] .tc-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #4ade80;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-example-table-wrap {
    border: 1px solid var(--tc-border);
    border-radius: 0.65rem;
    overflow: hidden;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-example-table > :not(caption) > * > * {
    background: var(--tc-panel);
    color: var(--tc-ink);
    border-color: var(--tc-border);
    font-size: 0.82rem;
    vertical-align: middle;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-example-table thead th {
    background: var(--tc-panel-strong);
    color: var(--tc-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--tc-muted);
    background: var(--tc-panel);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-left: 3px solid var(--tc-accent);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-callout strong {
    color: var(--tc-ink);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-callout a {
    color: #4ade80;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}
.tc-pricing-callout a:hover,
.tc-page-container[data-tc-page="pricing"] .tc-pricing-callout a:focus-visible {
    color: var(--tc-accent);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-callout--info {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.35);
    border-left-color: var(--tc-accent);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-callout--tip {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.35);
    border-left-color: var(--tc-amber);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-callout-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-callout-icon i {
    color: inherit;
}
.tc-pricing-callout--info .tc-pricing-callout-icon,
.tc-page-container[data-tc-page="pricing"] .tc-pricing-callout--tip .tc-pricing-callout-icon {
    background: rgba(34, 197, 94, 0.12);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-callout--tip .tc-pricing-callout-icon {
    color: var(--tc-amber);
    background: rgba(245, 158, 11, 0.12);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-table-wrap {
    border: 1px solid var(--tc-border);
    border-radius: 0.65rem;
    overflow: hidden;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-table > :not(caption) > * > * {
    background: var(--tc-panel);
    color: var(--tc-ink);
    border-color: var(--tc-border);
    font-size: 0.82rem;
    vertical-align: middle;
    padding: 0.75rem 1rem;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-table thead th {
    background: var(--tc-panel-strong);
    color: var(--tc-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-faq-item {
    border: 1px solid var(--tc-border);
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--tc-panel-strong);
    height: 100%;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-faq-q {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--tc-ink);
    margin-bottom: 0.45rem;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-faq-q i {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-faq-a {
    font-size: 0.82rem;
    color: var(--tc-muted);
    line-height: 1.5;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-cta {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 0.85rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 28px rgba(34, 197, 94, 0.24);
}
.tc-pricing-cta .tc-hero-copy,
.tc-page-container[data-tc-page="pricing"] .tc-pricing-cta h3 {
    color: #ffffff !important;
}
.tc-pricing-cta .btn.btn-primary,
.tc-page-container[data-tc-page="pricing"] .tc-pricing-cta a.btn.btn-primary {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--tc-accent) !important;
}
.tc-pricing-cta .btn.btn-primary:hover,
.tc-pricing-cta .btn.btn-primary:focus,
.tc-pricing-cta a.btn.btn-primary:hover,
.tc-page-container[data-tc-page="pricing"] .tc-pricing-cta a.btn.btn-primary:focus {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    color: #16a34a !important;
}
.tc-pricing-cta .btn.btn-primary i,
.tc-page-container[data-tc-page="pricing"] .tc-pricing-cta a.btn.btn-primary i {
    color: var(--tc-accent) !important;
}
.tc-pricing-cta .btn.btn-primary:hover i,
.tc-page-container[data-tc-page="pricing"] .tc-pricing-cta a.btn.btn-primary:hover i {
    color: #16a34a !important;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-cta .btn-secondary {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-cta .btn-secondary i {
    color: #ffffff !important;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-page-end {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--tc-border);
    opacity: 1;
}
[data-theme-mode="dark"] .tc-pricing-page-end .tc-page-container[data-tc-page="pricing"] {
    border-top-color: rgba(255, 255, 255, 0.12);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-breadcrumb .breadcrumb-item a {
    color: var(--tc-muted);
    text-decoration: none;
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-breadcrumb .breadcrumb-item a:hover {
    color: var(--tc-ink);
}
.tc-page-container[data-tc-page="pricing"] .tc-pricing-breadcrumb .breadcrumb-item.active {
    color: var(--tc-ink);
}
@media (max-width: 575.98px) {
.tc-page-container[data-tc-page="pricing"] .tc-pricing-hero-card {
        margin-top: 0.5rem;
    }
}

/* ==========================
   Premium IVR — teal accent theme
   (mirrors Ring Groups / Recording Box / Time Conditions patterns)
   ========================== */

.ivr-page-container,
.ivr-dashboard-container,
.ivr-edit-container,
.ivr-calls-container,
.ivr-recordings-container,
.ivr-stats-container,
.ivr-usage-container,
.ivr-pricing-container,
#modal-create-ivr,
#modal-create-ivr-inline,
#modal-delete-ivr-confirm,
#modal-ivr-menu-option,
#modal-ivr-call-detail,
#modal-ivr-upload-recording,
.ivr-modern-modal {
    --ivr-ink: var(--bs-heading-color, #172033);
    --ivr-muted: var(--bs-secondary-color, #697386);
    --ivr-panel: var(--bs-card-bg, #fff);
    --ivr-panel-strong: var(--bs-body-bg, #fff);
    --ivr-border: var(--bs-border-color, rgba(0, 0, 0, 0.12));
    --ivr-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
    --ivr-accent: #14b8a6;
    --ivr-accent-hover: #0d9488;
    --ivr-accent-light: rgba(20, 184, 166, 0.12);
    --ivr-accent-soft: #5eead4;
    --ivr-green: #22c55e;
    --ivr-red: #ef4444;
    --ivr-amber: #f59e0b;
    --primary-rgb: 20, 184, 166;
    --secondary-rgb: 100, 116, 139;
    --primary-color: #14b8a6;
    --primary-border: #14b8a6;
    --primary05: rgba(20, 184, 166, 0.5);
}

[data-theme-mode="dark"] .ivr-page-container,
[data-theme-mode="dark"] .ivr-dashboard-container,
[data-theme-mode="dark"] .ivr-edit-container,
[data-theme-mode="dark"] .ivr-calls-container,
[data-theme-mode="dark"] .ivr-recordings-container,
[data-theme-mode="dark"] .ivr-stats-container,
[data-theme-mode="dark"] .ivr-usage-container,
[data-theme-mode="dark"] .ivr-pricing-container,
[data-theme-mode="dark"] #modal-create-ivr,
[data-theme-mode="dark"] #modal-create-ivr-inline,
[data-theme-mode="dark"] #modal-delete-ivr-confirm,
[data-theme-mode="dark"] #modal-ivr-menu-option,
[data-theme-mode="dark"] #modal-ivr-call-detail,
[data-theme-mode="dark"] #modal-ivr-upload-recording,
[data-theme-mode="dark"] .ivr-modern-modal {
    --ivr-ink: #f6f7fb;
    --ivr-muted: #b3b3b3;
    --ivr-panel: #161616;
    --ivr-panel-strong: #101010;
    --ivr-border: rgba(255, 255, 255, 0.09);
    --ivr-shadow: none;
    --ivr-accent-soft: #5eead4;
}

[class^="ivr-"] .btn.btn-primary,
[class*=" ivr-"] .btn.btn-primary,
[id^="modal-ivr"] .btn.btn-primary,
[id^="modal-create-ivr"] .btn.btn-primary,
#modal-delete-ivr-confirm .btn.btn-primary {
    background-color: var(--ivr-accent) !important;
    border-color: var(--ivr-accent) !important;
    color: #ffffff !important;
}

[class^="ivr-"] .btn.btn-primary:hover,
[class^="ivr-"] .btn.btn-primary:focus,
[class*=" ivr-"] .btn.btn-primary:hover,
[class*=" ivr-"] .btn.btn-primary:focus,
[id^="modal-ivr"] .btn.btn-primary:hover,
[id^="modal-ivr"] .btn.btn-primary:focus,
[id^="modal-create-ivr"] .btn.btn-primary:hover,
[id^="modal-create-ivr"] .btn.btn-primary:focus,
#modal-delete-ivr-confirm .btn.btn-primary:hover,
#modal-delete-ivr-confirm .btn.btn-primary:focus {
    background-color: var(--ivr-accent-hover) !important;
    border-color: var(--ivr-accent-hover) !important;
    color: #ffffff !important;
}

[class^="ivr-"] .btn.btn-secondary,
[class*=" ivr-"] .btn.btn-secondary,
[id^="modal-ivr"] .btn.btn-secondary,
[id^="modal-create-ivr"] .btn.btn-secondary,
#modal-delete-ivr-confirm .btn.btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
}

[class^="ivr-"] .btn.btn-secondary:hover,
[class^="ivr-"] .btn.btn-secondary:focus,
[class*=" ivr-"] .btn.btn-secondary:hover,
[class*=" ivr-"] .btn.btn-secondary:focus,
[id^="modal-ivr"] .btn.btn-secondary:hover,
[id^="modal-ivr"] .btn.btn-secondary:focus,
[id^="modal-create-ivr"] .btn.btn-secondary:hover,
[id^="modal-create-ivr"] .btn.btn-secondary:focus,
#modal-delete-ivr-confirm .btn.btn-secondary:hover,
#modal-delete-ivr-confirm .btn.btn-secondary:focus {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

[class^="ivr-"] .text-white,
[class*=" ivr-"] .text-white,
[id^="modal-ivr"] .text-white,
[id^="modal-create-ivr"] .text-white,
#modal-delete-ivr-confirm .text-white {
    color: var(--ivr-ink) !important;
}

.ivr-page-container,
.ivr-dashboard-container,
.ivr-edit-container,
.ivr-calls-container,
.ivr-recordings-container,
.ivr-stats-container,
.ivr-usage-container,
.ivr-pricing-container {
    position: relative;
}

/* Subnav — horizontal pills */
.ivr-subnav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ivr-subnav-link {
    align-items: center;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid var(--ivr-border, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    color: var(--ivr-muted, #b3b3b3);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ivr-subnav-link:hover {
    border-color: rgba(20, 184, 166, 0.35);
    color: var(--ivr-ink, #f6f7fb);
}

.ivr-subnav-link.is-active {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.45);
    color: var(--ivr-accent-soft, #5eead4);
}

.ivr-subnav-link i {
    color: inherit;
    font-size: 0.95em;
    line-height: 1;
}

[data-theme-mode="dark"] .ivr-subnav-link:not(.is-active) {
    background: rgba(255, 255, 255, 0.03);
    color: var(--ivr-muted, #b3b3b3);
}

[data-theme-mode="dark"] .ivr-subnav-link.is-active {
    color: #5eead4;
}

/* Self-route repair banner (IVR cannot destination to itself) */
.ivr-self-route-banner {
    border-left: 3px solid var(--ivr-amber, #f59e0b);
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.35);
    color: var(--ivr-ink, #f6f7fb);
}
.ivr-self-route-banner .ivr-self-route-banner-inner {
    line-height: 1.45;
}
.ivr-self-route-banner i {
    color: var(--ivr-amber, #f59e0b);
    margin-top: 0.1rem;
}
[data-theme-mode="light"] .ivr-self-route-banner {
    color: #422006;
    background: rgba(245, 158, 11, 0.12);
}

/* Empty state — advertisement-style (mirrors rb-empty-state) */
.ivr-empty-state {
    position: relative;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.28) 0%, rgba(45, 212, 191, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    margin: 0.35rem auto;
    max-width: 34rem;
    text-align: center;
}

.ivr-empty-state-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
    animation: rgAdGlowRotate 8s linear infinite;
}

.ivr-empty-state-icon {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 1.35rem auto 0.85rem;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.22) 0%, rgba(45, 212, 191, 0.08) 100%);
    border: 1px solid rgba(20, 184, 166, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ivr-accent-soft, #5eead4);
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.18);
}

.ivr-empty-state-icon i {
    font-size: 1.35rem;
    line-height: 1;
}

.ivr-empty-state-title {
    position: relative;
    z-index: 2;
    color: var(--ivr-ink, #f6f7fb);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
    padding: 0 1.25rem;
}

.ivr-empty-state-message {
    position: relative;
    z-index: 2;
    color: var(--ivr-muted, #b3b3b3);
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0 auto 1rem;
    max-width: 26rem;
    padding: 0 1.25rem;
}

.ivr-empty-state-actions {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0 1.25rem 1.25rem;
}

.ivr-empty-state .btn {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

.ivr-empty-state::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: 0.95rem;
    background: var(--ivr-panel, #161616);
    pointer-events: none;
}

[data-theme-mode="light"] .ivr-empty-state::after {
    background: var(--ivr-panel, #fff);
}

/* Hero metrics row */
.ivr-hero-metrics {
    display: contents;
}

.ivr-metric-card,
.ivr-dashboard-container .metric-card,
.ivr-stats-container .metric-card,
.ivr-usage-container .metric-card {
    background: var(--ivr-panel);
    border: 1px solid var(--ivr-border);
    border-radius: 0.85rem;
    padding: 1rem;
    height: 100%;
    position: relative;
    box-shadow: var(--ivr-shadow);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ivr-metric-card:hover,
.ivr-dashboard-container .metric-card:hover,
.ivr-stats-container .metric-card:hover,
.ivr-usage-container .metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.3);
}

.ivr-metric-label,
.ivr-dashboard-container .metric-label,
.ivr-stats-container .metric-label,
.ivr-usage-container .metric-label {
    color: var(--ivr-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ivr-metric-value,
.ivr-dashboard-container .metric-value,
.ivr-stats-container .metric-value,
.ivr-usage-container .metric-value {
    color: var(--ivr-ink);
    font-size: 1.85rem;
    font-weight: 850;
    letter-spacing: -0.05em;
    margin: 0.25rem 0;
}

.ivr-metric-icon,
.ivr-dashboard-container .metric-icon-solid,
.ivr-stats-container .metric-icon-solid,
.ivr-usage-container .metric-icon-solid {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--ivr-accent), #2dd4bf);
}

/* Cards & panels */
.ivr-card {
    background: var(--ivr-panel);
    border: 1px solid var(--ivr-border);
    border-radius: 0.85rem;
    box-shadow: var(--ivr-shadow);
}

.ivr-dashboard-hero {
    background: var(--ivr-panel);
    border: 1px solid var(--ivr-border);
    border-radius: 0.85rem;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--ivr-shadow);
}

.ivr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--ivr-accent-light);
    color: var(--ivr-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .ivr-eyebrow {
    color: var(--ivr-accent-soft);
}

.ivr-hero-title {
    color: var(--ivr-ink);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0.5rem 0 0.25rem;
}

.ivr-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--ivr-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--ivr-ink);
    font-size: 0.72rem;
    font-weight: 600;
}

/* Forms */
.ivr-form-label {
    color: var(--ivr-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.ivr-form-control,
.ivr-form-select {
    background-color: var(--ivr-panel-strong) !important;
    border: 1px solid var(--ivr-border) !important;
    color: var(--ivr-ink) !important;
    font-size: 0.85rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.45rem;
}

.ivr-form-control:focus,
.ivr-form-select:focus {
    border-color: var(--ivr-accent) !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.25) !important;
}

.ivr-help-text {
    font-size: 0.76rem;
    color: var(--ivr-muted);
    margin-top: 0.35rem;
}

.btn-ivr-save {
    background: var(--ivr-accent);
    color: #fff;
    font-weight: 600;
    border: none;
}

.btn-ivr-save:hover,
.btn-ivr-save:focus {
    background: var(--ivr-accent-hover);
    color: #fff;
}

/* Edit tabs */
.ivr-nav-tabs {
    border-bottom: 1px solid var(--ivr-border);
    gap: 0.25rem;
}

.ivr-nav-tabs .nav-link {
    color: var(--ivr-muted);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: transparent;
    transition: all 0.2s ease;
}

.ivr-nav-tabs .nav-link:hover {
    color: var(--ivr-ink);
    border-bottom-color: rgba(20, 184, 166, 0.4);
}

.ivr-nav-tabs .nav-link.active {
    color: var(--ivr-accent) !important;
    border-bottom-color: var(--ivr-accent);
    background: transparent;
}

[data-theme-mode="dark"] .ivr-nav-tabs .nav-link.active {
    color: var(--ivr-accent-soft) !important;
    border-bottom-color: rgba(20, 184, 166, 0.55);
}

/* Tables */
.ivr-dashboard-container .table-responsive,
.ivr-calls-container .table-responsive,
.ivr-recordings-container .table-responsive,
.ivr-usage-container .table-responsive {
    border-radius: 0.65rem;
    border: 1px solid var(--ivr-border);
    background: var(--ivr-panel);
}

.ivr-table {
    --bs-table-bg: var(--ivr-panel) !important;
    --bs-table-color: var(--ivr-ink) !important;
    --bs-table-border-color: var(--ivr-border) !important;
    --bs-table-hover-bg: rgba(20, 184, 166, 0.04) !important;
    --bs-table-hover-color: var(--ivr-ink) !important;
    background-color: var(--ivr-panel) !important;
    border-color: var(--ivr-border) !important;
    color: var(--ivr-ink) !important;
    margin-bottom: 0;
}

.ivr-table th {
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--ivr-muted) !important;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--ivr-border) !important;
    padding: 0.85rem 1rem;
}

[data-theme-mode="dark"] .ivr-table th {
    background: rgba(255, 255, 255, 0.02) !important;
}

.ivr-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--ivr-border);
    vertical-align: middle;
    color: var(--ivr-ink);
    font-size: 0.85rem;
}

.ivr-table tbody tr:hover > * {
    background-color: rgba(20, 184, 166, 0.04) !important;
}

.ivr-calls-container .ivr-table tbody tr {
    cursor: pointer;
}

/* Call status badges */
.ivr-badge-status,
.badge-status {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-block;
}

.ivr-badge-status.completed,
.badge-status.completed {
    background: rgba(34, 197, 94, 0.15);
    color: var(--ivr-green);
}

.ivr-badge-status.abandoned,
.badge-status.abandoned {
    background: rgba(156, 163, 175, 0.15);
    color: var(--ivr-muted);
}

.ivr-badge-status.failed,
.badge-status.failed {
    background: rgba(239, 68, 68, 0.15);
    color: var(--ivr-red);
}

.ivr-badge-status.navigating,
.ivr-badge-status.routing,
.ivr-badge-status.received,
.badge-status.navigating,
.badge-status.routing,
.badge-status.received {
    background: var(--ivr-accent-light);
    color: var(--ivr-accent);
}

[data-theme-mode="dark"] .ivr-badge-status.navigating,
[data-theme-mode="dark"] .ivr-badge-status.routing,
[data-theme-mode="dark"] .ivr-badge-status.received,
[data-theme-mode="dark"] .badge-status.navigating,
[data-theme-mode="dark"] .badge-status.routing,
[data-theme-mode="dark"] .badge-status.received {
    color: var(--ivr-accent-soft);
}

/* Status dots & feature badges */
.ivr-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
}

.ivr-status-dot.active {
    background-color: var(--ivr-green);
}

.ivr-status-dot.inactive {
    background-color: var(--ivr-red);
}

.ivr-feature-badge,
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ivr-feature-badge.enabled,
.feature-badge.enabled {
    background-color: rgba(34, 197, 94, 0.15);
    color: var(--ivr-green);
}

.ivr-feature-badge.disabled,
.feature-badge.disabled {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--ivr-muted);
}

/* Menu builder — surface ladder, teal accent, readable labels */
.ivr-menu-tree,
.ivr-menu-tree-shell {
    min-height: 200px;
}

.ivr-menu-tree {
    display: flex;
    flex-direction: column;
}

.ivr-menu-branch {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 0.75rem;
}

.ivr-menu-children {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--ivr-border);
}

.ivr-menu-node {
    background: var(--ivr-panel);
    border: 1px solid var(--ivr-border);
    border-radius: 0.75rem;
    margin-bottom: 0;
    padding: 1rem 1.1rem 1.05rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: relative;
}

.ivr-menu-children > .ivr-menu-branch > .ivr-menu-node::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 2rem;
    width: 1.5rem;
    height: 2px;
    background: var(--ivr-border);
}

.ivr-menu-node:hover {
    border-color: rgba(20, 184, 166, 0.28);
}

.ivr-menu-node.ivr-menu-node--active {
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.12);
}

.ivr-menu-node__header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.ivr-menu-node__heading {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.ivr-menu-node__title {
    color: var(--ivr-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.ivr-menu-node__alert {
    color: var(--ivr-amber);
    font-size: 0.875rem;
    line-height: 1.4;
}

.ivr-menu-node__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ivr-menu-node__fields {
    margin-bottom: 0.85rem;
}

.ivr-menu-node .ivr-menu-field-label {
    color: var(--ivr-muted);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.4rem;
    text-transform: none;
}

.ivr-menu-greeting-picked {
    color: var(--ivr-muted);
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0.35rem 0 0;
}

.ivr-menu-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.ivr-menu-options-empty {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--ivr-border);
    border-radius: 0.55rem;
    color: var(--ivr-muted);
    font-size: 0.875rem;
    line-height: 1.45;
    padding: 0.75rem 0.85rem;
}

.ivr-menu-option-row {
    align-items: center;
    background: var(--ivr-panel-strong);
    border: 1px solid var(--ivr-border);
    border-radius: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ivr-menu-option-row:hover {
    background: rgba(20, 184, 166, 0.04);
    border-color: rgba(20, 184, 166, 0.22);
}

.ivr-menu-option-main {
    align-items: center;
    display: flex;
    flex: 1 1 12rem;
    gap: 0.7rem;
    min-width: 0;
}

.ivr-menu-option-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ivr-menu-option-action {
    color: var(--ivr-ink);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.ivr-menu-option-meta {
    color: var(--ivr-muted);
    font-size: 0.875rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ivr-menu-option-disabled {
    color: var(--ivr-muted);
    font-size: 0.8125rem;
    font-style: italic;
}

.ivr-menu-option-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ivr-dtmf-key {
    align-items: center;
    background: var(--ivr-accent-light);
    border: 1px solid rgba(20, 184, 166, 0.35);
    border-radius: 0.45rem;
    color: var(--ivr-accent);
    display: inline-flex;
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
    min-height: 2.25rem;
    min-width: 2.25rem;
    padding: 0.2rem 0.55rem;
}

[data-theme-mode="dark"] .ivr-menu-node {
    background: #161616;
}

[data-theme-mode="dark"] .ivr-menu-option-row {
    background: #101010;
}

[data-theme-mode="dark"] .ivr-menu-option-row:hover {
    background: rgba(20, 184, 166, 0.06);
}

[data-theme-mode="dark"] .ivr-menu-options-empty {
    background: rgba(255, 255, 255, 0.015);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme-mode="dark"] .ivr-dtmf-key {
    color: var(--ivr-accent-soft);
}

[data-theme-mode="dark"] .ivr-menu-node .ivr-form-control,
[data-theme-mode="dark"] .ivr-menu-node .ivr-form-select {
    background-color: #101010 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .ivr-menu-node .ivr-form-control:focus,
[data-theme-mode="dark"] .ivr-menu-node .ivr-form-select:focus {
    border-color: var(--ivr-accent) !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.22) !important;
}

@media (max-width: 575.98px) {
    .ivr-menu-node__actions,
    .ivr-menu-option-actions {
        width: 100%;
    }

    .ivr-menu-node__actions .btn,
    .ivr-menu-option-actions .btn {
        flex: 1 1 auto;
    }
}

/* Schedule & holidays */
.ivr-schedule-shell {
    min-height: 200px;
}

.ivr-schedule-rule-row,
.ivr-schedule-rule-card {
    background: var(--ivr-panel-strong);
    border: 1px solid var(--ivr-border) !important;
    border-radius: 0.65rem !important;
    transition: border-color 0.2s ease;
}

.ivr-schedule-rule-row:hover,
.ivr-schedule-rule-card:hover {
    border-color: rgba(20, 184, 166, 0.25) !important;
}

.ivr-holiday-row,
#ivr-holidays-table tbody tr {
    transition: background 0.2s ease;
}

.ivr-holiday-row:hover,
#ivr-holidays-table tbody tr:hover {
    background: rgba(20, 184, 166, 0.04);
}

/* Inbound routing card */
.ivr-inbound-routing-card .ivr-inbound-routing-steps li {
    line-height: 1.45;
}

.ivr-inbound-routing-help {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ivr-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.55rem;
    padding: 0.75rem 0.85rem;
}

.ivr-inbound-routing-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    min-height: 2.75rem;
    padding: 0.75rem 1rem;
    text-align: left;
    width: 100%;
}

.ivr-inbound-routing-trigger:hover {
    background: rgba(255, 255, 255, 0.025);
}

.ivr-inbound-routing-trigger:focus-visible {
    outline: 2px solid rgba(20, 184, 166, 0.55);
    outline-offset: -2px;
}

.ivr-inbound-routing-trigger-icon {
    align-items: center;
    background: var(--ivr-accent-light);
    border-radius: 0.45rem;
    color: var(--ivr-accent);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.95rem;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

[data-theme-mode="dark"] .ivr-inbound-routing-trigger-icon {
    color: var(--ivr-accent-soft);
}

.ivr-inbound-routing-trigger-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ivr-inbound-routing-trigger-title {
    color: var(--ivr-ink, #f6f7fb);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}

.ivr-inbound-routing-trigger-meta {
    color: var(--ivr-muted, #b3b3b3);
    font-size: 0.72rem;
    line-height: 1.2;
}

.ivr-inbound-routing-trigger-action {
    align-items: center;
    color: var(--ivr-muted, #b3b3b3);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    gap: 0.2rem;
    white-space: nowrap;
}

.ivr-inbound-routing-chevron {
    color: var(--ivr-accent-soft, #5eead4);
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.ivr-inbound-routing-trigger[aria-expanded="true"] .ivr-inbound-routing-chevron {
    transform: rotate(180deg);
}

/* Setup guide */
.ivr-quickstart-bar {
    background: var(--ivr-panel, #161616);
    border: 1px solid var(--ivr-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.65rem;
    overflow: hidden;
}

.ivr-quickstart-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    text-align: left;
    width: 100%;
}

.ivr-quickstart-trigger:hover {
    background: rgba(255, 255, 255, 0.025);
}

.ivr-quickstart-trigger:focus-visible {
    outline: 2px solid rgba(20, 184, 166, 0.55);
    outline-offset: -2px;
}

.ivr-quickstart-trigger-icon {
    align-items: center;
    background: var(--ivr-accent-light);
    border-radius: 0.45rem;
    color: var(--ivr-accent-soft, #5eead4);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.95rem;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.ivr-quickstart-trigger-title {
    color: var(--ivr-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
}

.ivr-quickstart-trigger-meta {
    color: var(--ivr-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.2;
}

.ivr-quickstart-trigger-action {
    align-items: center;
    color: var(--ivr-muted, #b3b3b3);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.2rem;
    white-space: nowrap;
}

.ivr-quickstart-chevron {
    color: var(--ivr-accent-soft, #5eead4);
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.ivr-quickstart-trigger[aria-expanded="true"] .ivr-quickstart-chevron {
    transform: rotate(180deg);
}

.ivr-quickstart-body-inner {
    border-top: 1px solid var(--ivr-border, rgba(255, 255, 255, 0.09));
    padding: 0.65rem 0.75rem 0.75rem;
}

.ivr-quickstart-grid {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ivr-quickstart-item {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ivr-border, rgba(255, 255, 255, 0.07));
    border-radius: 0.45rem;
    display: flex;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
}

.ivr-quickstart-item-num {
    align-items: center;
    background: rgba(20, 184, 166, 0.14);
    border-radius: 999px;
    color: var(--ivr-accent-soft, #5eead4);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    height: 1.25rem;
    justify-content: center;
    line-height: 1;
    margin-top: 0.05rem;
    width: 1.25rem;
}

.ivr-quickstart-item-title {
    color: var(--ivr-ink, #f6f7fb);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.1rem;
}

.ivr-quickstart-item-detail {
    color: var(--ivr-muted, #b3b3b3);
    font-size: 0.7rem;
    line-height: 1.35;
    margin: 0;
}

.ivr-quickstart-tip {
    align-items: center;
    color: var(--ivr-muted, #b3b3b3);
    display: flex;
    font-size: 0.7rem;
    gap: 0.35rem;
    line-height: 1.35;
    margin: 0.55rem 0 0;
}

.ivr-quickstart-tip i {
    color: var(--ivr-accent-soft, #5eead4);
    flex-shrink: 0;
    font-size: 0.85rem;
}

/* Dashboard CTA */
.ivr-ad-cta-card {
    position: relative;
    border-radius: 1.25rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.3) 0%, rgba(244, 63, 94, 0.1) 50%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.ivr-ad-cta-content {
    position: relative;
    z-index: 2;
    background: var(--ivr-panel);
    border-radius: 1.2rem;
    padding: 1.5rem;
}

.ivr-ad-cta-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(45, 212, 191, 0.08) 100%);
    border: 1px solid rgba(20, 184, 166, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ivr-accent);
    flex-shrink: 0;
}

[data-theme-mode="dark"] .ivr-ad-cta-icon {
    color: var(--ivr-accent-soft);
}

.ivr-ad-cta-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ivr-ink);
}

.ivr-ad-cta-desc {
    font-size: 0.85rem;
    color: var(--ivr-muted);
    line-height: 1.45;
}

.ivr-ad-cta-btn {
    background: linear-gradient(135deg, var(--ivr-accent) 0%, var(--ivr-accent-hover) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600;
}

.ivr-schedule-howto-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    counter-reset: ivr-schedule-howto;
}

.ivr-schedule-howto-list li {
    counter-increment: ivr-schedule-howto;
    display: grid;
    grid-template-columns: 1.35rem 1fr;
    column-gap: 0.65rem;
    row-gap: 0.15rem;
    align-items: start;
    color: var(--ivr-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.45;
}

.ivr-schedule-howto-list li::before {
    content: counter(ivr-schedule-howto);
    grid-row: 1 / span 2;
    align-self: start;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.14);
    border: 1px solid rgba(20, 184, 166, 0.28);
    color: var(--ivr-accent-soft, #5eead4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.ivr-schedule-howto-list li strong {
    grid-column: 2;
    color: var(--ivr-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
}

.ivr-schedule-howto-list li span {
    grid-column: 2;
    color: var(--ivr-muted, #b3b3b3);
}

.ivr-schedule-howto-list li em {
    font-style: normal;
    color: var(--ivr-accent-soft, #5eead4);
    font-weight: 600;
}

.ivr-schedule-rule-types dt {
    margin-top: 0.15rem;
}

.ivr-summary-banner,
.summary-banner {
    background: var(--ivr-accent-light);
    border: 1px solid rgba(20, 184, 166, 0.35);
    border-radius: 0.85rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Pricing page */
.ivr-pricing-hero {
    background: var(--ivr-panel);
    border: 1px solid var(--ivr-border);
    border-radius: 0.85rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--ivr-shadow);
}

.ivr-pricing-hero-accent {
    color: var(--ivr-accent);
    background: var(--ivr-accent-light);
    padding: 0.15rem 0.6rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

[data-theme-mode="dark"] .ivr-pricing-hero-accent {
    color: var(--ivr-accent-soft);
}

.ivr-pricing-card {
    background: var(--ivr-panel);
    border: 1px solid var(--ivr-border);
    border-radius: 0.85rem;
    padding: 1.25rem;
    height: 100%;
    box-shadow: var(--ivr-shadow);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.ivr-pricing-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.35);
}

.ivr-pricing-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    background: var(--ivr-accent-light);
    color: var(--ivr-accent);
}

[data-theme-mode="dark"] .ivr-pricing-card-icon {
    color: var(--ivr-accent-soft);
}

.ivr-pricing-card-title {
    color: var(--ivr-ink);
    font-size: 1.05rem;
    font-weight: 750;
    margin-bottom: 0.5rem;
}

.ivr-pricing-card-rate {
    font-size: 1.5rem;
    font-weight: 850;
    color: var(--ivr-ink);
    margin-bottom: 0.75rem;
    letter-spacing: -0.03em;
}

.ivr-pricing-card-rate-unit {
    font-size: 0.8rem;
    color: var(--ivr-muted);
    font-weight: normal;
}

.ivr-pricing-card-lead {
    font-size: 0.825rem;
    color: var(--ivr-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.ivr-pricing-card-features {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 0.78rem;
}

.ivr-pricing-card-features li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--ivr-muted);
    line-height: 1.45;
}

.ivr-pricing-card-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--ivr-green);
    font-weight: bold;
}

.ivr-pricing-table-wrap {
    border-radius: 0.65rem;
    border: 1px solid var(--ivr-border);
    overflow: hidden;
}

.ivr-pricing-table th {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ivr-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ivr-border);
    padding: 0.75rem 1rem;
}

[data-theme-mode="dark"] .ivr-pricing-table th {
    background: rgba(255, 255, 255, 0.02);
}

.ivr-pricing-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ivr-border);
    vertical-align: middle;
    color: var(--ivr-ink);
    font-size: 0.825rem;
}

.ivr-pricing-table tr:last-child td {
    border-bottom: 0;
}

/* Modern modal — teal header */
.ivr-modern-modal {
    background: var(--ivr-panel) !important;
    border: 1px solid var(--ivr-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
    color: var(--ivr-ink) !important;
}

.ivr-modern-modal .modal-header,
.ivr-modern-modal .offcanvas-header {
    background: linear-gradient(90deg, #0d9488 0%, #14b8a6 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.ivr-modern-modal.ivr-modern-modal--danger .modal-header {
    background: linear-gradient(90deg, rgba(127, 29, 29, 0.85) 0%, rgba(185, 28, 28, 0.65) 100%) !important;
    border-bottom: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.ivr-modern-modal .modal-title,
.ivr-modern-modal .offcanvas-title {
    color: #f6f7fb !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.ivr-modern-modal .modal-title.text-danger {
    color: #fca5a5 !important;
}

.ivr-modern-modal .modal-title i,
.ivr-modern-modal .offcanvas-title i {
    color: #ccfbf1 !important;
    font-size: 1.2rem !important;
    vertical-align: middle;
}

.ivr-modern-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.2);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ivr-modern-modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.ivr-modern-modal .modal-body,
.ivr-modern-modal .offcanvas-body {
    padding: 1.5rem !important;
    background: var(--ivr-panel) !important;
    color: var(--ivr-ink) !important;
}

.ivr-modern-modal .bg-light-subtle {
    background-color: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid var(--ivr-border) !important;
}

.ivr-modern-modal .form-label,
.ivr-modern-modal .ivr-form-label {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--ivr-muted) !important;
    margin-bottom: 0.5rem !important;
}

.ivr-modern-modal .form-control,
.ivr-modern-modal .form-select,
.ivr-modern-modal .ivr-form-control,
.ivr-modern-modal .ivr-form-select {
    background-color: var(--ivr-panel-strong) !important;
    border: 1px solid var(--ivr-border) !important;
    color: var(--ivr-ink) !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    padding: 0.55rem 0.8rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

.ivr-modern-modal .form-control::placeholder {
    color: var(--ivr-muted) !important;
}

.ivr-modern-modal .form-control:hover,
.ivr-modern-modal .form-select:hover {
    border-color: rgba(20, 184, 166, 0.35) !important;
    background-color: var(--ivr-panel-strong) !important;
}

.ivr-modern-modal .form-control:focus,
.ivr-modern-modal .form-select:focus {
    background-color: var(--ivr-panel-strong) !important;
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2) !important;
    color: var(--ivr-ink) !important;
}

.ivr-modern-modal .form-control:disabled,
.ivr-modern-modal .form-select:disabled {
    background-color: rgba(15, 23, 42, 0.04) !important;
    border-color: var(--ivr-border) !important;
    color: var(--ivr-muted) !important;
    opacity: 0.6;
}

.ivr-modern-modal .ivr-help-text,
.ivr-modern-modal .text-muted {
    color: var(--ivr-muted) !important;
}

.ivr-modern-modal h6.text-muted {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #0d9488 !important;
    margin-bottom: 1rem !important;
}

.ivr-modern-modal .modal-footer {
    background: var(--ivr-panel) !important;
    border-top: 1px solid var(--ivr-border) !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.ivr-modern-modal .btn-secondary {
    border: 1px solid var(--ivr-border) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.ivr-modern-modal .btn-secondary:hover {
    background: rgba(20, 184, 166, 0.08) !important;
    border-color: rgba(20, 184, 166, 0.35) !important;
    color: var(--ivr-ink) !important;
}

.ivr-modern-modal .btn-primary {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ivr-modern-modal .btn-primary:hover {
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.4) !important;
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%) !important;
}

.ivr-modern-modal .btn-primary:active {
    transform: translateY(1px) !important;
}

.ivr-modern-modal .btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}

.ivr-modern-modal .btn-secondary:hover,
.ivr-modern-modal .btn-secondary:focus {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

.ivr-modern-modal .btn-danger {
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}

[data-theme-mode="dark"] .ivr-modern-modal {
    background: #161616 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.75) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .modal-body,
[data-theme-mode="dark"] .ivr-modern-modal .offcanvas-body {
    background: #161616 !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .bg-light-subtle {
    background-color: rgba(255, 255, 255, 0.025) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .form-label,
[data-theme-mode="dark"] .ivr-modern-modal .ivr-form-label {
    color: #b3b3b3 !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .form-control,
[data-theme-mode="dark"] .ivr-modern-modal .form-select,
[data-theme-mode="dark"] .ivr-modern-modal .ivr-form-control,
[data-theme-mode="dark"] .ivr-modern-modal .ivr-form-select {
    background-color: #1a1a1c !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #eeeeee !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .form-control:hover,
[data-theme-mode="dark"] .ivr-modern-modal .form-select:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: #1f1f22 !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .form-control:focus,
[data-theme-mode="dark"] .ivr-modern-modal .form-select:focus {
    background-color: #1d1d1f !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .form-control:disabled,
[data-theme-mode="dark"] .ivr-modern-modal .form-select:disabled {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
    color: #697386 !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .ivr-help-text,
[data-theme-mode="dark"] .ivr-modern-modal .text-muted {
    color: #b3b3b3 !important;
}

[data-theme-mode="dark"] .ivr-modern-modal h6.text-muted {
    color: #5eead4 !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .modal-footer {
    background: #161616 !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .btn-secondary {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #b3b3b3 !important;
}

[data-theme-mode="dark"] .ivr-modern-modal .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* Sidebar submenu tint */
.app-sidebar .crazytel-submenu-icon--ivr {
    color: #14b8a6 !important;
}

[data-theme-mode="dark"] .app-sidebar .crazytel-submenu-icon--ivr {
    color: #5eead4 !important;
}

.ivr-inline-feedback {
    font-size: 0.82rem;
    min-height: 1.25rem;
}

@media (max-width: 767.98px) {
    .ivr-quickstart-grid {
        grid-template-columns: 1fr;
    }

    .ivr-subnav-link span {
        display: none;
    }

    .ivr-subnav-link {
        padding: 0.35rem 0.55rem;
    }
}

@media (max-width: 575.98px) {
    .ivr-empty-state-icon {
        width: 46px;
        height: 46px;
    }

    .ivr-empty-state-title {
        font-size: 0.95rem;
    }

    .ivr-empty-state-message {
        font-size: 0.85rem;
    }

    .ivr-ad-cta-content {
        padding: 1.1rem;
    }
}

/* Crazytel Simple Setup Guide Sidebar Promo
   Last <li> in the scrollable menu, immediately after Report Bug.
   Kill the Xintra 5rem sidebar footer padding / 100vh overflow that clipped it. */
[data-nav-layout="vertical"] .app-sidebar.crazytel-compact-sidebar .main-sidebar {
    padding-block-end: 0.35rem !important;
    height: calc(100vh - 4.25rem) !important;
    max-height: calc(100vh - 4.25rem) !important;
}

[data-nav-layout="vertical"] .app-sidebar.crazytel-compact-sidebar .main-sidebar .simplebar-content {
    padding-bottom: 0.35rem !important;
}

@media (max-width: 991.98px) {
    [data-nav-layout="vertical"] .app-sidebar.crazytel-compact-sidebar .main-sidebar {
        height: 100% !important;
        max-height: 100% !important;
        margin-block-start: 0 !important;
    }
}

.crazytel-sidebar-ssg-promo-item {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0.5rem 0.15rem;
}

.crazytel-sidebar-ssg-promo {
    position: relative;
    flex-shrink: 0;
    margin: 0;
    background: linear-gradient(135deg, #151124 0%, #0d0a16 100%);
    border: 1px solid #3d2572;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    animation: ssgPromoSlideUp 0.55s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes ssgPromoSlideUp {
    0% {
        transform: translateY(12px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.crazytel-sidebar-ssg-promo.dismissing {
    animation: ssgPromoDismiss 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
}

@keyframes ssgPromoDismiss {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(8px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crazytel-sidebar-ssg-promo,
    .crazytel-sidebar-ssg-promo.dismissing {
        animation: none;
        transition: none;
    }
}

.crazytel-sidebar-ssg-promo-dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crazytel-sidebar-ssg-promo-dismiss:hover {
    color: #ffffff;
    transform: scale(1.1);
}

.crazytel-sidebar-ssg-promo-dismiss:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
    border-radius: 8px;
    color: #ffffff;
}

.crazytel-sidebar-ssg-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c09aff;
    background: #251844;
    padding: 3px 8px;
    border-radius: 20px;
    margin-bottom: 6px;
    border: 1px solid #4a2f7c;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.15);
}

.crazytel-sidebar-ssg-promo-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    padding-right: 1.75rem;
    text-wrap: balance;
}

.crazytel-sidebar-ssg-promo-text {
    font-size: 0.7rem;
    color: #b0aec4;
    margin-bottom: 10px;
    line-height: 1.4;
}

.crazytel-sidebar-ssg-promo-btn {
    width: 100%;
    min-height: 40px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border: 1px solid #9061f9;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.crazytel-sidebar-ssg-promo-btn:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
    transform: translateY(-1.5px);
    border-color: #a78bfa;
}

.crazytel-sidebar-ssg-promo-btn:active {
    transform: translateY(0);
}

.crazytel-sidebar-ssg-promo-btn:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}

/* Hide when body has .sidenav-toggled */
body.sidenav-toggled .crazytel-sidebar-ssg-promo,
body.sidenav-toggled .crazytel-sidebar-ssg-promo-item,
/* Hide when html has data-toggled matching closed/close states */
html[data-toggled="icon-click-closed"] .crazytel-sidebar-ssg-promo,
html[data-toggled="icon-click-closed"] .crazytel-sidebar-ssg-promo-item,
html[data-toggled="icon-hover-closed"] .crazytel-sidebar-ssg-promo,
html[data-toggled="icon-hover-closed"] .crazytel-sidebar-ssg-promo-item,
html[data-toggled="icon-overlay-close"] .crazytel-sidebar-ssg-promo,
html[data-toggled="icon-overlay-close"] .crazytel-sidebar-ssg-promo-item,
html[data-toggled="double-menu-close"] .crazytel-sidebar-ssg-promo,
html[data-toggled="double-menu-close"] .crazytel-sidebar-ssg-promo-item,
html[data-toggled="detached-close"] .crazytel-sidebar-ssg-promo,
html[data-toggled="detached-close"] .crazytel-sidebar-ssg-promo-item,
html[data-toggled="close-menu-close"] .crazytel-sidebar-ssg-promo,
html[data-toggled="close-menu-close"] .crazytel-sidebar-ssg-promo-item,
html[data-toggled="icon-text-close"] .crazytel-sidebar-ssg-promo,
html[data-toggled="icon-text-close"] .crazytel-sidebar-ssg-promo-item,
html[data-toggled="close"] .crazytel-sidebar-ssg-promo,
html[data-toggled="close"] .crazytel-sidebar-ssg-promo-item {
    display: none !important;
}

@media (max-width: 991.98px) {
    .crazytel-sidebar-ssg-promo-item {
        padding: 0.3rem 0.45rem 0.1rem;
    }

    .crazytel-sidebar-ssg-promo {
        padding: 11px;
    }
}

/* Premium Queues */
.queues-dashboard-container,
.queues-edit-container,
.queues-recordings-container,
.queues-calls-container,
.queues-stats-container,
.queues-wb-tv,
.queues-usage-container,
.queues-pricing-container,
.queues-modern-modal {
    --queues-ink: var(--bs-heading-color, #172033);
    --queues-muted: var(--bs-secondary-color, #697386);
    --queues-panel: var(--bs-card-bg, #fff);
    --queues-panel-strong: var(--bs-body-bg, #fff);
    --queues-border: var(--bs-border-color, rgba(0, 0, 0, .12));
    --queues-accent: #84cc16;
    --queues-accent-2: #bef264;
    --queues-accent-light: rgba(132, 204, 22, .14);
    --queues-green: #22c55e;
    --queues-red: #ef4444;
    --queues-amber: #f59e0b;
    --queues-shadow: 0 .45rem 1.2rem rgba(15, 23, 42, .08);
}
[data-theme-mode="dark"] .queues-dashboard-container,
[data-theme-mode="dark"] .queues-edit-container,
[data-theme-mode="dark"] .queues-recordings-container,
[data-theme-mode="dark"] .queues-calls-container,
[data-theme-mode="dark"] .queues-stats-container,
[data-theme-mode="dark"] .queues-wb-tv,
[data-theme-mode="dark"] .queues-usage-container,
[data-theme-mode="dark"] .queues-pricing-container,
[data-theme-mode="dark"] .queues-modern-modal {
    --queues-ink: #f6f7fb;
    --queues-muted: #b3b3b3;
    --queues-panel: #161616;
    --queues-panel-strong: #101010;
    --queues-border: rgba(255,255,255,.1);
    --queues-shadow: none;
}

[class^="queues-"] .text-white,
[class*=" queues-"] .text-white,
[id^="queues-"] .text-white,
#modal-create-queue .text-white,
.queues-modern-modal .text-white,
.queues-card .text-white,
.queues-routing-card .text-white,
.queues-stat-card .text-white {
    color: var(--queues-ink) !important;
}

[class^="queues-"] .text-muted,
[class*=" queues-"] .text-muted,
[id^="queues-"] .text-muted,
#modal-create-queue .text-muted,
.queues-modern-modal .text-muted,
.queues-card .text-muted,
.queues-routing-card .text-muted,
.queues-stat-card .text-muted {
    color: var(--queues-muted) !important;
}
.queues-dashboard-hero,
.queues-card,
.queues-stat-card,
.queues-routing-card {
    background: var(--queues-panel);
    border: 1px solid var(--queues-border);
    border-radius: .9rem;
    box-shadow: var(--queues-shadow);
    color: var(--queues-ink);
}
.queues-dashboard-hero { padding: 1.25rem; overflow: hidden; position: relative; }
.queues-routing-card { padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.queues-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .65rem; border-radius: 999px; background: var(--queues-accent-light); color: var(--queues-accent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.queues-hero-title { color: var(--queues-ink); font-weight: 850; letter-spacing: -.03em; margin: .55rem 0 .25rem; }
.queues-hero-pill { display: inline-flex; align-items: center; gap: .4rem; min-height: 1.85rem; padding: .28rem .6rem; border: 1px solid var(--queues-border); border-radius: 999px; color: var(--queues-ink); font-size: .76rem; font-weight: 700; }
.queues-ad-cta-card { position: relative; border-radius: 1.25rem; padding: 1px; background: var(--queues-border); box-shadow: 0 12px 24px -10px rgba(0,0,0,.50); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; }
.queues-ad-cta-card:hover { transform: translateY(-2px); background: rgba(132,204,22,.35); box-shadow: 0 20px 32px -8px rgba(0,0,0,.60), 0 0 15px rgba(132,204,22,.10); }
.queues-ad-cta-glow { display: none; }
.queues-ad-cta-content { position: relative; z-index: 2; border-radius: 1.2rem; background: var(--queues-panel); border: 1px solid var(--queues-border); padding: 1.1rem 1.15rem; }
.queues-ad-cta-icon { width: 2.6rem; height: 2.6rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; color: #172006; background: linear-gradient(135deg, var(--queues-accent), var(--queues-accent-2)); font-size: 1.25rem; }
.queues-ad-cta-title { color: var(--queues-ink); font-weight: 800; font-size: 1rem; }
.queues-ad-cta-desc { color: var(--queues-muted); font-size: .88rem; }
.queues-ad-cta-btn,
.queues-ad-cta-btn.btn.btn-primary,
.queues-dashboard-container .btn.btn-primary,
.queues-edit-container .btn.btn-primary,
.queues-recordings-container .btn.btn-primary,
.queues-calls-container .btn.btn-primary,
.queues-stats-container .btn.btn-primary,
.queues-usage-container .btn.btn-primary,
.queues-pricing-container .btn.btn-primary,
.queues-modern-modal .btn-primary,
.queues-modern-modal .btn.btn-primary { background: linear-gradient(135deg, var(--queues-accent), #4d7c0f) !important; background-color: var(--queues-accent) !important; border-color: transparent !important; color: #172006 !important; font-weight: 800; }
.queues-stat-card { padding: 1rem; height: 100%; }
.queues-metric-label { color: var(--queues-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.queues-metric-value { color: var(--queues-ink); font-size: 1.85rem; font-weight: 850; letter-spacing: -.04em; margin: .25rem 0; }
.queues-table { color: var(--queues-ink); }
.queues-table th { color: var(--queues-muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--queues-border); background: rgba(15, 23, 42, 0.04); padding: .85rem 1rem; }
[data-theme-mode="dark"] .queues-table th { background: rgba(255,255,255,.025); }
.queues-table td { color: var(--queues-ink); border-bottom: 1px solid var(--queues-border); vertical-align: middle; padding: .85rem 1rem; font-size: .88rem; }
.queues-status-dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; margin-right: .35rem; }
.queues-status-dot.active { background: var(--queues-green); }
.queues-status-dot.inactive { background: var(--queues-red); }
.queues-form-label { color: var(--queues-muted); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .4rem; }
.queues-form-control,
.queues-form-select { background-color: var(--queues-panel-strong) !important; border: 1px solid var(--queues-border) !important; color: var(--queues-ink) !important; border-radius: .5rem; color-scheme: light; min-height: 2.35rem; }
[data-theme-mode="dark"] .queues-form-control,
[data-theme-mode="dark"] .queues-form-select { color-scheme: dark; }
.queues-form-control:focus,
.queues-form-select:focus { border-color: var(--queues-accent) !important; box-shadow: 0 0 0 .2rem rgba(132,204,22,.22) !important; }
.queues-inline-feedback { padding: .6rem .75rem; border-radius: .55rem; background: rgba(15, 23, 42, 0.04); border: 1px solid var(--queues-border); font-size: .88rem; }
[data-theme-mode="dark"] .queues-inline-feedback { background: rgba(255,255,255,.035); }
.queues-field-tooltip { margin-left: .2rem; vertical-align: middle; }
.queues-hybrid-blf-copy-group .queues-form-control {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: .02em;
}
.queues-hybrid-blf-copy-btn {
    min-width: 2.5rem;
    min-height: 2.35rem;
}
.queues-hybrid-blf-off {
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--queues-muted) !important;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    gap: 0.5rem;
    width: 100%;
    transition: all 0.2s ease-in-out;
}
.queues-hybrid-blf-off::before {
    content: "\f219";
    font-family: "remixicon" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.1rem;
    color: #ef4444;
    opacity: 0.85;
}
.queues-hybrid-blf-warn {
    padding: .55rem .7rem;
    border-radius: .55rem;
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .1);
}
.queues-hybrid-blf-preview {
    word-break: break-all;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 0.5rem;
    gap: 0.5rem;
    width: 100%;
    transition: all 0.2s ease-in-out;
}
.queues-hybrid-blf-preview-off {
    color: var(--queues-muted) !important;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.12);
}
.queues-hybrid-blf-preview-off::before {
    content: "\f219";
    font-family: "remixicon" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.1rem;
    color: #ef4444;
    opacity: 0.85;
}
.queues-hybrid-blf-preview-active {
    color: var(--queues-ink) !important;
    background-color: rgba(132, 204, 22, 0.06);
    border: 1px solid rgba(132, 204, 22, 0.25);
}
.queues-hybrid-blf-preview-active::before {
    content: "\f218";
    font-family: "remixicon" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.1rem;
    color: var(--queues-accent);
}
.queues-dashboard-container .custom-kb-tooltip-content,
.queues-edit-container .custom-kb-tooltip-content,
.queues-recordings-container .custom-kb-tooltip-content,
.queues-modern-modal .custom-kb-tooltip-content { max-width: min(320px, calc(100vw - 2rem)); white-space: normal !important; z-index: 1095 !important; }
.queues-nav-tabs { border-bottom: 1px solid var(--queues-border); gap: .25rem; }
.queues-nav-tabs .nav-link { color: var(--queues-muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.queues-nav-tabs .nav-link.active { color: var(--queues-accent) !important; border-bottom-color: var(--queues-accent); background: transparent; }
.queues-subnav-list { list-style: none; padding: 0; margin: 0; display: flex; gap: .45rem; flex-wrap: wrap; }
.queues-subnav-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--queues-border); color: var(--queues-muted); text-decoration: none; font-size: .84rem; font-weight: 800; }
.queues-subnav-link:hover,
.queues-subnav-link.is-active { color: var(--queues-accent); background: var(--queues-accent-light); border-color: rgba(132,204,22,.35); }
[data-theme-mode="dark"] .queues-subnav-link.is-active { color: #f6f7fb; background: rgba(132,204,22,.18); }
.queues-empty-state { border: 1px dashed var(--queues-border); border-radius: 1rem; padding: 1.25rem; text-align: center; background: var(--queues-panel); }
.queues-empty-state-icon { color: var(--queues-accent); font-size: 2rem; }
.queues-empty-state-title { color: var(--queues-ink); font-size: 1rem; font-weight: 800; margin: .4rem 0 .2rem; }
.queues-empty-state-message { color: var(--queues-muted); font-size: .9rem; margin-bottom: .8rem; }
.queues-modern-modal {
    background: var(--queues-panel);
    border: 1px solid var(--queues-border);
    border-radius: 1rem;
    color: var(--queues-ink);
    overflow: hidden;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .35);
}
.queues-modern-modal .modal-header {
    background: var(--queues-panel-strong);
    border-bottom: 1px solid var(--queues-border);
    color: var(--queues-ink);
}
.queues-modern-modal .modal-title {
    color: var(--queues-ink);
    font-weight: 850;
    letter-spacing: -.02em;
}
.queues-modern-modal .modal-body {
    background: var(--queues-panel);
}
.queues-modern-modal .modal-footer {
    background: var(--queues-panel-strong);
    border-top: 1px solid var(--queues-border);
}
[data-theme-mode="dark"] .queues-modern-modal .modal-header,
[data-theme-mode="dark"] .queues-modern-modal .modal-footer {
    background: #1f1f1f;
    color: #f6f7fb;
}
[data-theme-mode="dark"] .queues-modern-modal .modal-title {
    color: #f6f7fb;
}
.queues-modern-modal .btn-secondary,
.queues-modern-modal .btn.btn-secondary,
.queues-dashboard-container .btn.queues-btn-delete,
.queues-edit-container .btn.queues-btn-delete,
.queues-recordings-container .btn.queues-btn-delete {
    background: rgba(255,255,255,.055) !important;
    border-color: var(--queues-border) !important;
    color: var(--queues-ink) !important;
    font-weight: 750;
}
.queues-modern-modal .btn.btn-secondary:hover,
.queues-modern-modal .btn.btn-secondary:focus {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(132,204,22,.35) !important;
    color: var(--queues-accent) !important;
}
.queues-dashboard-container .btn.queues-btn-delete,
.queues-edit-container .btn.queues-btn-delete,
.queues-recordings-container .btn.queues-btn-delete {
    border-color: var(--queues-border) !important;
    color: #ffffff !important;
}
.queues-modern-modal .btn-close {
    filter: none;
    opacity: .65;
}
[data-theme-mode="dark"] .queues-modern-modal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: .8;
}
.queues-btn-delete {
    border-color: var(--queues-border) !important;
    color: #ffffff !important;
}
.queues-btn-delete:hover,
.queues-btn-delete:focus {
    border-color: rgba(239,68,68,.5) !important;
    color: #ef4444 !important;
    background: rgba(239,68,68,.1) !important;
}
.queues-btn-edit {
    background-color: #e2e8f0 !important;
    border-color: var(--queues-border) !important;
    color: var(--queues-ink) !important;
}
.queues-btn-edit:hover,
.queues-btn-edit:focus {
    background-color: #cbd5e1 !important;
    border-color: rgba(132, 204, 22, 0.35) !important;
    color: var(--queues-ink) !important;
}
[data-theme-mode="dark"] .queues-btn-edit {
    background-color: #3d4451 !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #f6f7fb !important;
}
[data-theme-mode="dark"] .queues-btn-edit:hover,
[data-theme-mode="dark"] .queues-btn-edit:focus {
    background-color: #4b5563 !important;
    border-color: rgba(255,255,255,.2) !important;
    color: #ffffff !important;
}
.queues-detail-field { margin-bottom: .75rem; }
.queues-detail-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--queues-muted); margin-bottom: .2rem; }
.queues-detail-value { font-size: .875rem; color: var(--queues-ink); }
.queues-detail-divider { border-color: var(--queues-border); margin: 1rem 0; }
.queues-activity-list { max-height: 280px; overflow-y: auto; }
.queues-activity-event { padding: .35rem 0; border-bottom: 1px solid var(--queues-border); font-size: .8125rem; }
.queues-activity-event:last-child { border-bottom: none; }
.queues-activity-time { color: var(--queues-muted); }
.queues-activity-type { color: var(--queues-ink); }
@media (max-width: 575.98px) { .queues-dashboard-hero, .queues-card .card-body, .queues-routing-card { padding: 1rem; } .queues-subnav-list { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; } .queues-subnav-link { white-space: nowrap; } }
.queues-pricing-table-wrap {
    border-radius: .65rem;
    border: 1px solid var(--queues-border);
    overflow: hidden;
}
.queues-edit-stage { position: relative; min-height: 12rem; }
.queues-edit-loading-card { border: 1px solid var(--queues-border); }
.queues-edit-loading-title { font-weight: 700; letter-spacing: -.01em; }
.queues-edit-content--loading {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
}
.queues-edit-content--ready {
    visibility: visible;
    pointer-events: auto;
    position: static;
    opacity: 1;
    transition: opacity .18s ease;
}
.queues-edit-loading.is-hidden { display: none !important; }
@keyframes queues-edit-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.queues-edit-skeleton-head,
.queues-edit-skeleton-label,
.queues-edit-skeleton-field {
    border-radius: .5rem;
    background: linear-gradient(90deg, rgba(148,163,184,.16) 25%, rgba(148,163,184,.28) 50%, rgba(148,163,184,.16) 75%);
    background-size: 200% 100%;
    animation: queues-edit-skeleton-shimmer 1.5s infinite;
}
.queues-edit-skeleton-head { height: 1.35rem; width: 42%; max-width: 16rem; }
.queues-edit-skeleton-label { height: .72rem; width: 38%; margin-bottom: .45rem; }
.queues-edit-skeleton-field { height: 2.35rem; width: 100%; }
[data-theme-mode="dark"] .queues-edit-skeleton-head,
[data-theme-mode="dark"] .queues-edit-skeleton-label,
[data-theme-mode="dark"] .queues-edit-skeleton-field {
    background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 75%);
    background-size: 200% 100%;
}

/* Premium Queues — Quickstart / Setup Guide */
.queues-quickstart-bar {
    background: var(--queues-panel, #161616);
    border: 1px solid var(--queues-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.65rem;
    overflow: hidden;
}

.queues-quickstart-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.65rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    text-align: left;
    width: 100%;
}

.queues-quickstart-trigger:hover {
    background: rgba(132, 204, 22, 0.04);
}

.queues-quickstart-trigger:focus-visible {
    outline: 2px solid rgba(132, 204, 22, 0.55);
    outline-offset: -2px;
}

.queues-quickstart-trigger-icon {
    align-items: center;
    background: rgba(132, 204, 22, 0.12);
    border-radius: 0.45rem;
    color: var(--queues-accent, #84cc16);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.95rem;
    height: 1.75rem;
    justify-content: center;
    width: 1.75rem;
}

.queues-quickstart-trigger-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.queues-quickstart-trigger-title {
    color: var(--queues-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
}

.queues-quickstart-trigger-meta {
    color: var(--queues-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.2;
}

.queues-quickstart-trigger-action {
    align-items: center;
    color: var(--queues-muted, #b3b3b3);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.2rem;
    white-space: nowrap;
}

.queues-quickstart-chevron {
    color: var(--queues-accent, #84cc16);
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.queues-quickstart-trigger:hover .queues-quickstart-chevron,
.queues-quickstart-trigger:focus-visible .queues-quickstart-chevron {
    transform: translateX(2px);
}

.queues-quickstart-modal-body {
    padding-top: 0.25rem !important;
}

.queues-quickstart-modal-intro {
    color: var(--queues-muted, #b3b3b3) !important;
    font-size: 0.875rem;
    line-height: 1.45;
}

.queues-quickstart-grid {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.queues-quickstart-item {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--queues-border, rgba(255, 255, 255, 0.07));
    border-radius: 0.45rem;
    display: flex;
    gap: 0.45rem;
    padding: 0.45rem 0.55rem;
}

.queues-quickstart-item-num {
    align-items: center;
    background: rgba(132, 204, 22, 0.14);
    border-radius: 999px;
    color: var(--queues-accent, #84cc16);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 800;
    height: 1.25rem;
    justify-content: center;
    line-height: 1;
    margin-top: 0.05rem;
    width: 1.25rem;
}

.queues-quickstart-item-copy {
    min-width: 0;
}

.queues-quickstart-item-title {
    color: var(--queues-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.1rem;
}

.queues-quickstart-item-detail {
    color: var(--queues-muted, #b3b3b3);
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 0;
}

.queues-quickstart-tip {
    align-items: center;
    color: var(--queues-muted, #b3b3b3);
    display: flex;
    font-size: 0.82rem;
    gap: 0.35rem;
    line-height: 1.35;
    margin: 0.75rem 0 0;
}

.queues-quickstart-tip i {
    color: var(--queues-accent, #84cc16);
    flex-shrink: 0;
    font-size: 0.85rem;
}

[data-theme-mode="dark"] .queues-quickstart-trigger-title {
    color: var(--queues-ink, #f6f7fb);
}

[data-theme-mode="dark"] .queues-quickstart-trigger-meta,
[data-theme-mode="dark"] .queues-quickstart-trigger-action {
    color: var(--queues-muted, #b3b3b3);
}

[data-theme-mode="dark"] .queues-quickstart-item-title {
    color: var(--queues-ink, #f6f7fb);
}

[data-theme-mode="dark"] .queues-quickstart-item-detail,
[data-theme-mode="dark"] .queues-quickstart-tip {
    color: var(--queues-muted, #b3b3b3);
}

@media (max-width: 767.98px) {
    .queues-quickstart-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .queues-quickstart-trigger-action .queues-quickstart-action-label {
        display: none;
    }
}

/* Premium DID Routing Selector Styling */
#premium-did-routing-container .form-select {
    width: 100% !important;
    min-width: 100% !important;
    font-size: 0.85rem !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 0.45rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238b5cf6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    padding-right: 2.5rem !important;
}

[data-theme-mode="dark"] #premium-did-routing-container .form-select {
    background-color: #1a1b1f !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    color-scheme: dark;
}

[data-theme-mode="dark"] #premium-did-routing-container .form-select:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.28) !important;
}

[data-theme-mode="dark"] #premium-did-routing-container .form-select:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25) !important;
    outline: none !important;
}

[data-theme-mode="dark"] #premium-did-routing-container .form-select:disabled {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

[data-theme-mode="dark"] #premium-did-routing-container .form-select option {
    background-color: #161616 !important;
    color: #ffffff !important;
}

[data-theme-mode="light"] #premium-did-routing-container .form-select {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: #172033 !important;
    color-scheme: light;
}

[data-theme-mode="light"] #premium-did-routing-container .form-select:hover:not(:disabled) {
    border-color: rgba(99, 102, 241, 0.35) !important;
}

[data-theme-mode="light"] #premium-did-routing-container .form-select:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
    outline: none !important;
}

[data-theme-mode="light"] #premium-did-routing-container .form-select:disabled {
    background-color: #f1f5f9 !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: #94a3b8 !important;
}

[data-theme-mode="light"] #premium-did-routing-container .form-select option {
    background-color: #ffffff !important;
    color: #172033 !important;
}

/* Account Balance Negative/Positive Styling */
.crazytel-balance-negative {
    color: #dc3545 !important;
    font-weight: 700 !important;
}

[data-theme-mode="dark"] .crazytel-balance-negative {
    color: #ff6b6b !important;
}

.crazytel-balance-positive {
    color: inherit;
}

/* Red-and-White Exclamation Icon badge */
.crazytel-balance-neg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #dc3545;
    color: #ffffff !important;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 900;
    vertical-align: middle;
    margin-right: 0.35rem;
    line-height: 1;
    font-family: system-ui, -apple-system, sans-serif;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.4);
    text-shadow: none !important;
}

[data-theme-mode="dark"] .crazytel-balance-neg-icon {
    background-color: #ff6b6b;
    color: #ffffff !important;
    box-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
}

/* Light theme overrides for SIM card pages */
html[data-theme-mode="light"] .simcard-service-card {
    background: linear-gradient(145deg, #ffffff, #f8f9ff) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme-mode="light"] .simcard-service-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.12) !important;
}

html[data-theme-mode="light"] .simcard-modern-phone-number {
    color: #1e293b !important;
}

html[data-theme-mode="light"] .simcard-modern-price {
    color: #1e293b !important;
}

html[data-theme-mode="light"] .simcard-modern-usage-percentage {
    color: #1e293b !important;
}

html[data-theme-mode="light"] .simcard-modern-usage-bar-container {
    background: #f1f5f9 !important;
}

html[data-theme-mode="light"] .simcard-modern-btn-secondary {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

html[data-theme-mode="light"] .simcard-modern-btn-secondary:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

html[data-theme-mode="light"] .crazytel-sim-dashboard-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme-mode="light"] .crazytel-sim-dashboard-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme-mode="light"] .crazytel-data-usage-bar {
    background: #e2e8f0 !important;
}

/* Signup Portal */
.signup-portal-body {
    min-height: 100vh;
    height: auto !important;
    overflow: auto !important;
    background-attachment: fixed !important;
    background:
        radial-gradient(circle at top left, rgba(220, 53, 69, 0.22), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.18), transparent 32rem),
        #101010;
    color: #f6f7fb;
}

.signup-portal-shell {
    width: min(1320px, calc(100% - 2rem));
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.35fr);
    gap: 1.5rem;
    align-items: center;
    padding: 2rem 0;
}

.signup-portal-hero-card,
.signup-portal-panel,
.signup-portal-complete-card {
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.94), rgba(16, 16, 16, 0.97));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(18px);
}

.signup-portal-hero-card {
    min-height: 680px;
    border-radius: 28px;
    padding: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.signup-portal-hero-card::after {
    content: "";
    position: absolute;
    inset: auto -30% -35% 5%;
    height: 360px;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.28), rgba(139, 92, 246, 0.18));
    filter: blur(42px);
    transform: rotate(-12deg);
}

.signup-portal-logo {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    position: relative;
    z-index: 1;
}

.signup-portal-logo img {
    max-width: 190px;
    height: auto;
}

.signup-portal-kicker,
.signup-portal-eyebrow {
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 800;
}

.signup-portal-hero h1 {
    position: relative;
    z-index: 1;
    margin: auto 0 1rem;
    font-size: clamp(2.2rem, 4.2vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #f8fafc;
}

.signup-portal-hero p {
    position: relative;
    z-index: 1;
    max-width: 36rem;
    color: #cbd5e1;
    font-size: 1.02rem;
}

.signup-portal-hero-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.85rem;
}

.signup-portal-hero-list div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #e5e7eb;
}

.signup-portal-hero-list .signup-portal-visual-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.09);
}

.signup-portal-visual-icon::after {
    display: none !important;
}

.signup-portal-visual-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}

.signup-portal-visual-icon i {
    font-size: 1.2rem;
    color: inherit;
    line-height: 1;
}

.signup-portal-hero-list .signup-portal-visual-icon i {
    font-size: 1.1rem;
}

.signup-portal-card-grid .signup-portal-visual-icon i {
    font-size: 1.35rem;
}

.signup-portal-notice .signup-portal-visual-icon i {
    font-size: 1rem;
}

.signup-portal-complete-icon .signup-portal-visual-icon i {
    font-size: 1.8rem;
    color: #22c55e;
}

.signup-portal-complete-grid .signup-portal-visual-icon i {
    font-size: 1.1rem;
}

.signup-portal-panel {
    border-radius: 28px;
    padding: clamp(1.25rem, 2.6vw, 2.25rem);
}

.signup-portal-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.35rem;
}

.signup-portal-panel-header h2 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    letter-spacing: -0.035em;
}

.signup-portal-panel-header p {
    margin: 0.25rem 0 0;
    color: #b8beca;
}

.signup-portal-login-link {
    color: #f87171;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 700;
}

.signup-portal-login-link:hover {
    color: #fca5a5;
}

.signup-portal-steps {
    list-style: none;
    padding: 0.75rem;
    margin: 0 0 1.35rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
}

.signup-portal-steps li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    border-radius: 13px;
    color: #9ca3af;
    font-weight: 700;
    font-size: 0.83rem;
}

.signup-portal-steps span {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.signup-portal-steps li.is-active,
.signup-portal-steps li.is-complete {
    color: #fff;
    background: rgba(34, 197, 94, 0.18);
}

.signup-portal-steps li.is-active span,
.signup-portal-steps li.is-complete span {
    background: #22c55e;
}

.signup-portal-step {
    display: none;
    min-height: 360px;
}

.signup-portal-step.is-active {
    display: block;
    animation: signupPortalFade 0.22s ease;
}

@keyframes signupPortalFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.signup-portal-form .form-label {
    color: #f1f5f9;
    font-weight: 700;
}

.signup-portal-form .form-control,
.signup-portal-form .form-select {
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background-color: #171717 !important;
    color: #f8fafc !important;
}

.signup-portal-form .form-control:focus,
.signup-portal-form .form-select:focus {
    border-color: rgba(248, 113, 113, 0.75);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.18);
}

.signup-portal-form .form-text {
    color: #a8b0be;
}

.signup-portal-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.signup-portal-card-grid article,
.signup-portal-notice,
.signup-portal-option-grid label,
.signup-portal-review,
.signup-portal-review-list div,
.signup-portal-complete-grid div {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    border-radius: 18px;
}

.signup-portal-card-grid article {
    padding: 1.15rem;
}

.signup-portal-card-grid .signup-portal-visual-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    margin-bottom: 0.9rem;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.09);
    font-size: 1.25rem;
}

.signup-portal-card-grid h3 {
    font-size: 1rem;
    color: #f8fafc;
    margin-bottom: 0.4rem;
}

.signup-portal-card-grid p,
.signup-portal-notice p {
    color: #b8beca;
    margin: 0;
}

.signup-portal-notice {
    margin-top: 1rem;
    padding: 1rem;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.signup-portal-notice .signup-portal-visual-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex: 0 0 34px;
    background: rgba(255, 255, 255, 0.09);
    color: #e2e8f0;
}

.signup-portal-check {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 1rem;
    color: #e5e7eb;
    cursor: pointer;
}

.signup-portal-check input,
.signup-portal-option-grid input {
    margin-top: 0.2rem;
    accent-color: #dc3545;
}

.signup-portal-terms-link {
    color: #f87171;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.signup-portal-terms-link:hover,
.signup-portal-terms-link:focus {
    color: #fca5a5;
}

.signup-portal-terms-modal {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.98), rgba(16, 16, 16, 0.99));
    color: #e5e7eb;
}

.signup-portal-terms-modal .modal-header,
.signup-portal-terms-modal .modal-footer {
    border-color: rgba(255, 255, 255, 0.1);
}

.signup-portal-terms-modal .modal-title {
    color: #f8fafc;
    font-weight: 800;
}

.signup-portal-terms-modal-subtitle {
    color: #a8b0be;
    font-size: 0.88rem;
    margin-top: 0.35rem;
}

.signup-portal-terms-modal .modal-body {
    font-size: 0.9rem;
    line-height: 1.6;
}

.signup-portal-terms-modal .modal-body h3,
.signup-portal-terms-modal .modal-body h5 {
    color: #f8fafc;
    margin-top: 1.25rem;
}

.signup-portal-terms-modal .modal-body h3:first-child {
    margin-top: 0;
}

.signup-portal-terms-emergency {
    color: #f87171 !important;
}

.signup-portal-terms-loading {
    color: #b8beca;
}

.signup-portal-footer {
    margin-top: 1.25rem;
    text-align: center;
    color: #8b93a1;
    font-size: 0.8rem;
}

.signup-portal-address-disclaimer {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-top: 0.75rem;
    padding: 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #b8beca;
    font-size: 0.85rem;
}

.signup-portal-address-disclaimer i {
    color: #f87171;
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

.signup-portal-address-disclaimer p {
    margin: 0;
}

.signup-portal-password-wrap {
    position: relative;
}

.signup-portal-password-wrap .form-control {
    padding-right: 2.75rem;
}

.signup-portal-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #a8b0be;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.signup-portal-password-toggle:hover,
.signup-portal-password-toggle:focus {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.06);
}

.signup-portal-password-strength {
    margin-top: 0.55rem;
}

.signup-portal-password-strength-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.signup-portal-password-strength-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #dc3545;
    transition: width 0.2s ease, background 0.2s ease;
}

.signup-portal-password-strength-bar span.is-medium {
    background: #f59e0b;
}

.signup-portal-password-strength-bar span.is-strong {
    background: #22c55e;
}

.signup-portal-password-strength-text {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #a8b0be;
}

.signup-portal-password-reqs {
    list-style: none;
    padding: 0;
    margin: 0.55rem 0 0;
    display: grid;
    gap: 0.25rem;
}

.signup-portal-password-reqs li {
    font-size: 0.8rem;
    color: #8b93a1;
}

.signup-portal-password-reqs li::before {
    content: "○ ";
}

.signup-portal-password-reqs li.is-met {
    color: #86efac;
}

.signup-portal-password-reqs li.is-met::before {
    content: "✓ ";
}

.signup-portal-reference-box {
    margin: 1.25rem 0;
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
}

.signup-portal-reference-label {
    display: block;
    color: #a8b0be;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.signup-portal-reference-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.signup-portal-reference-value code {
    color: #f8fafc;
    font-size: 1.1rem;
    word-break: break-all;
}

.signup-portal-complete-steps {
    margin: 1.5rem 0;
    text-align: left;
}

.signup-portal-complete-steps h2 {
    font-size: 1.05rem;
    color: #f8fafc;
    margin-bottom: 0.85rem;
}

.signup-portal-complete-steps ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.signup-portal-complete-steps li {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.signup-portal-complete-steps strong {
    display: block;
    color: #fff;
    margin-bottom: 0.2rem;
}

.signup-portal-complete-steps span {
    color: #b8beca;
    font-size: 0.88rem;
}

.signup-portal-complete-notice {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.1);
    color: #fde68a;
    text-align: left;
}

.signup-portal-complete-notice p {
    margin: 0;
    font-size: 0.88rem;
}

.signup-portal-complete-support {
    color: #b8beca;
    font-size: 0.88rem;
    margin-bottom: 1.25rem;
}

.signup-portal-id-complete-shell {
    width: min(920px, calc(100% - 2rem));
}

.signup-portal-id-complete-lead {
    color: #e2e8f0;
    font-size: 1.05rem;
    font-weight: 600;
}

.signup-portal-id-complete-grid {
    margin: 1.5rem 0;
    text-align: left;
}

.signup-portal-complete-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.65rem;
}

.signup-portal-complete-checklist li {
    position: relative;
    padding: 0.75rem 1rem 0.75rem 2.35rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 0.9rem;
}

.signup-portal-complete-checklist li::before {
    content: "\eb7b";
    font-family: "remixicon";
    position: absolute;
    left: 0.85rem;
    top: 0.78rem;
    color: #4ade80;
    font-size: 1rem;
    line-height: 1;
}

.signup-portal-complete-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.signup-portal-complete-btn-secondary {
    font-weight: 700;
    border-color: rgba(255, 255, 255, 0.28);
    color: #f8fafc;
}

.signup-portal-complete-btn-secondary:hover,
.signup-portal-complete-btn-secondary:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
}

.signup-portal-fraud-loading,
.signup-portal-fraud-error {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.signup-portal-fraud-loading {
    color: #a8b0be;
}

.signup-portal-fraud-error {
    color: #f87171;
    font-weight: 600;
}

/* Signup Fraud Promo Card - Advertisement Style */
.signup-fraud-promo-card {
    margin-top: 1rem;
    padding: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.12), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(220, 53, 69, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(8px);
    transition: transform 0.22s ease, border-color 0.22s ease;
}

.signup-fraud-promo-card:hover {
    border-color: rgba(220, 53, 69, 0.5);
}

.signup-fraud-promo-header {
    display: flex;
    gap: 0.95rem;
    align-items: flex-start;
}

.signup-fraud-promo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(220, 53, 69, 0.16);
    color: #ef4444;
    flex-shrink: 0;
    font-size: 1.35rem;
}

.signup-fraud-promo-header h4 {
    margin: 0 0 0.25rem 0;
    color: #f8fafc;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: left;
}

.signup-fraud-promo-header p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.88rem;
    line-height: 1.45;
    text-align: left;
}

.signup-fraud-promo-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.signup-fraud-promo-btn-primary {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    font-weight: 800;
    padding: 0.5rem 1.15rem;
    border-radius: 10px;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.signup-fraud-promo-btn-primary:hover {
    filter: brightness(1.1);
}

.signup-fraud-promo-btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
    font-weight: 700;
    padding: 0.5rem 1.15rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.signup-fraud-promo-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

.signup-portal-address-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.08);
}

.signup-portal-address-selected-text {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: #e5e7eb;
    font-size: 0.9rem;
}

.signup-portal-address-selected-text i {
    color: #4ade80;
    margin-top: 0.1rem;
}

.signup-portal-option-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}

.signup-portal-option-grid label {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    color: #d8dde6;
}

.signup-portal-option-grid strong {
    display: block;
    color: #fff;
}

.signup-portal-alert {
    padding: 0.95rem 1rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(248, 113, 113, 0.35);
    background: rgba(220, 53, 69, 0.12);
    color: #fecaca;
}

.signup-portal-alert-success {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.12);
    color: #bbf7d0;
}

.signup-portal-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.signup-portal-actions .btn,
.signup-portal-complete-btn,
.signup-portal-complete-btn-secondary {
    min-height: 46px;
    border-radius: 12px;
    padding-inline: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.signup-portal-actions .btn,
.signup-portal-complete-btn {
    font-weight: 800;
}

.signup-portal-actions .btn-primary,
.signup-portal-complete-btn {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    border-color: #16a34a !important;
    color: #fff !important;
}

.signup-portal-address-results {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 260px;
    overflow: auto;
    padding: 0.45rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #181818;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.38);
}

.signup-portal-address-results button {
    width: 100%;
    display: block;
    padding: 0.7rem 0.8rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #f8fafc;
    text-align: left;
}

.signup-portal-address-results button:hover {
    background: rgba(220, 53, 69, 0.16);
}

.signup-portal-address-results button:focus {
    background: rgba(220, 53, 69, 0.24);
    outline: 2px solid rgba(248, 113, 113, 0.75);
    outline-offset: -2px;
}

.signup-portal-address-empty {
    padding: 0.75rem;
    color: #cbd5e1;
}

.signup-portal-review h3 {
    color: #f8fafc;
}

.signup-portal-review {
    padding: 1.25rem;
}

.signup-portal-review > p {
    color: #b8beca;
}

.signup-portal-review-list {
    display: grid;
    gap: 0.75rem;
}

.signup-portal-review-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
}

.signup-portal-review-list span {
    color: #a8b0be;
}

.signup-portal-review-list strong {
    color: #f8fafc;
    text-align: right;
}

.signup-portal-complete-shell {
    min-height: 100vh;
    width: min(760px, calc(100% - 2rem));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.signup-portal-complete-card {
    width: 100%;
    border-radius: 28px;
    padding: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}

.signup-portal-complete-icon {
    width: 88px;
    height: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0 1.25rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

.signup-portal-complete-icon .signup-portal-visual-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
}

.signup-portal-complete-icon .signup-portal-visual-icon::after {
    background: linear-gradient(135deg, #86efac, #22c55e);
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.58);
}

.signup-portal-complete-card h1 {
    color: #f8fafc;
    font-size: clamp(1.6rem, 5vw, 2.25rem);
    letter-spacing: -0.04em;
}

.signup-portal-complete-card p {
    color: #cbd5e1;
}

.signup-portal-complete-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.signup-portal-complete-grid div {
    padding: 1rem;
}

.signup-portal-complete-grid .signup-portal-visual-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 12px;
    background: rgba(220, 53, 69, 0.14);
    color: #f87171;
}

.signup-portal-complete-grid strong,
.signup-portal-complete-grid span {
    display: block;
}

.signup-portal-complete-grid strong {
    color: #fff;
    margin: 0.35rem 0;
}

.signup-portal-complete-grid span {
    color: #a8b0be;
}

.signup-portal-footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.85rem;
    color: #94a3b8;
}

@media (max-width: 991.98px) {
    .signup-portal-shell {
        grid-template-columns: 1fr;
    }

    .signup-portal-hero-card {
        min-height: auto;
    }

    .signup-portal-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .signup-portal-shell {
        width: min(100% - 1rem, 680px);
        padding: 0.5rem 0;
    }

    .signup-portal-panel,
    .signup-portal-hero-card,
    .signup-portal-complete-card {
        border-radius: 20px;
    }

    .signup-portal-panel-header,
    .signup-portal-actions,
    .signup-portal-review-list div {
        flex-direction: column;
    }

    .signup-portal-login-link {
        white-space: normal;
    }

    .signup-portal-steps {
        grid-template-columns: repeat(5, 1fr) !important;
        padding: 0.5rem;
        gap: 0.25rem;
    }

    .signup-portal-steps li {
        font-size: 0 !important;
        justify-content: center;
        padding-left: 0;
        min-height: 36px;
        border-radius: 10px;
    }

    .signup-portal-steps span {
        margin: 0;
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
    }

    .signup-portal-card-grid article {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.85rem;
        border-radius: 14px;
    }

    .signup-portal-card-grid .signup-portal-visual-icon {
        margin-bottom: 0;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .signup-portal-card-grid h3 {
        margin-bottom: 0.2rem;
        font-size: 0.95rem;
    }

    .signup-portal-card-grid p {
        font-size: 0.85rem;
    }

    .signup-portal-notice {
        padding: 0.85rem;
        gap: 0.75rem;
        border-radius: 14px;
    }

    .signup-portal-notice p {
        font-size: 0.85rem;
    }

    .signup-portal-option-grid,
    .signup-portal-complete-grid,
    .signup-portal-id-complete-grid {
        grid-template-columns: 1fr;
    }

    .signup-portal-complete-actions {
        flex-direction: column;
    }

    .signup-portal-complete-actions .btn {
        width: 100%;
    }

    .signup-portal-actions .btn {
        width: 100%;
    }
}

/* ----------------------------------------------------
   Member Availability Schedule Modal Polishing Styles
   ---------------------------------------------------- */
.rg-modern-modal .form-control,
.rg-modern-modal .form-select,
.rg-modern-modal .rg-form-control,
.rg-modern-modal .rg-form-select {
    background-color: #101010 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: #f6f7fb !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    padding: 0.55rem 0.8rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

.rg-modern-modal .form-select,
.rg-modern-modal .rg-form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238b5cf6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    padding-right: 2.5rem !important;
}

.rg-modern-modal .form-control::placeholder {
    color: #b3b3b3 !important;
}

.rg-modern-modal .form-control:hover,
.rg-modern-modal .form-select:hover {
    border-color: rgba(139, 92, 246, 0.35) !important;
    background-color: #101010 !important;
}

.rg-modern-modal .form-control:focus,
.rg-modern-modal .form-select:focus {
    background-color: #101010 !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
    color: #f6f7fb !important;
}

.rg-modern-modal .form-control:disabled,
.rg-modern-modal .form-select:disabled {
    background-color: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #697386 !important;
    opacity: 0.6;
}

.rg-modern-modal .day-chip {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: transparent !important;
    color: #b3b3b3 !important;
    margin: 2px !important;
    cursor: pointer !important;
}

.rg-modern-modal .day-chip:hover:not(:disabled) {
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: #ffffff !important;
}

.rg-modern-modal .day-chip.active {
    background: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    color: #ffffff !important;
}

.rg-modern-modal .day-chip:disabled {
    opacity: 0.2 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    cursor: not-allowed !important;
}

.rg-modern-modal #btn-add-schedule-window {
    background: transparent !important;
    border: 1px dashed rgba(139, 92, 246, 0.4) !important;
    color: #8b5cf6 !important;
    width: 100%;
    padding: 0.6rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    margin-top: 0.5rem !important;
}

.rg-modern-modal #btn-add-schedule-window:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.08) !important;
    border-color: #8b5cf6 !important;
    color: #ffffff !important;
}

.rg-modern-modal #table-schedule-windows th {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #b3b3b3 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 0.75rem !important;
}

.rg-modern-modal #table-schedule-windows td {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    vertical-align: middle !important;
}

.rg-modern-modal .modal-footer .btn {
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
    font-weight: 600 !important;
}

/* International SMS Settings */
.intl-sms-page-container {
    --intl-sms-ink: var(--bs-heading-color, #172033);
    --intl-sms-muted: var(--bs-secondary-color, #697386);
    --intl-sms-panel: var(--bs-card-bg, #fff);
    --intl-sms-border: var(--bs-border-color, rgba(15, 23, 42, 0.12));
    --intl-sms-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
    --intl-sms-accent: #60a5fa;
    --intl-sms-accent-soft: rgba(96, 165, 250, 0.12);
    --intl-sms-warn: #f59e0b;
    --intl-sms-danger: #ef4444;
    --intl-sms-ok: #22c55e;
    color: var(--intl-sms-ink);
    padding-bottom: 1rem;
}

[data-theme-mode="dark"] .intl-sms-page-container {
    --intl-sms-ink: #f6f7fb;
    --intl-sms-muted: #b3b3b3;
    --intl-sms-panel: #161616;
    --intl-sms-border: rgba(255, 255, 255, 0.09);
    --intl-sms-shadow: none;
}

.intl-sms-hero,
.intl-sms-card {
    background: var(--intl-sms-panel);
    border: 1px solid var(--intl-sms-border);
    border-radius: 0.85rem;
    box-shadow: var(--intl-sms-shadow);
}

.intl-sms-hero {
    padding: 1.1rem 1.15rem;
}

.intl-sms-hero-eyebrow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.intl-sms-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--intl-sms-accent-soft);
    color: var(--intl-sms-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.intl-sms-coming-soon-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    border: none;
    background: #db2777;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    flex-shrink: 0;
}

[data-theme-mode="dark"] .intl-sms-coming-soon-badge {
    background: #db2777;
    color: #ffffff;
}

.intl-sms-coming-soon-detail {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.55rem;
    color: var(--intl-sms-muted);
    line-height: 1.45;
}

.intl-sms-coming-soon-detail i {
    color: var(--intl-sms-accent);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

[data-theme-mode="dark"] .intl-sms-coming-soon-detail i {
    color: #93c5fd;
}

.intl-sms-hero-title {
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0.55rem 0 0.35rem;
    color: var(--intl-sms-ink);
}

.intl-sms-hero-copy {
    color: var(--intl-sms-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.intl-sms-hero-status {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--intl-sms-border);
    background: rgba(96, 165, 250, 0.06);
}

.intl-sms-status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-top: 0.35rem;
    flex: 0 0 auto;
    background: var(--intl-sms-muted);
}

.intl-sms-status-dot.is-on {
    background: var(--intl-sms-ok);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

.intl-sms-status-dot.is-off {
    background: var(--intl-sms-danger);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.intl-sms-status-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--intl-sms-ink);
}

.intl-sms-card-header {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--intl-sms-border);
}

.intl-sms-card-body {
    padding: 1rem;
}

.intl-sms-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--intl-sms-ink);
}

.intl-sms-form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--intl-sms-ink);
}

.intl-sms-helper {
    color: var(--intl-sms-muted);
}

.intl-sms-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.intl-sms-switch .form-check-input {
    width: 2.75rem;
    height: 1.45rem;
    cursor: pointer;
}

.intl-sms-switch .form-check-input:checked {
    background-color: var(--intl-sms-accent);
    border-color: var(--intl-sms-accent);
}

.intl-sms-switch-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--intl-sms-ink);
    margin-left: 0.35rem;
}

.intl-sms-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    font-size: 0.72rem;
    font-weight: 700;
}

[data-theme-mode="dark"] .intl-sms-lock-badge {
    color: #fbbf24;
}

.intl-sms-callout {
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
    font-size: 0.84rem;
    line-height: 1.45;
    border: 1px solid var(--intl-sms-border);
}

.intl-sms-callout--muted {
    background: rgba(107, 114, 128, 0.08);
    color: var(--intl-sms-muted);
}

.intl-sms-callout--ok {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: var(--intl-sms-ink);
}

.intl-sms-callout--warn {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.28);
    color: var(--intl-sms-ink);
}

.intl-sms-callout--danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.28);
    color: var(--intl-sms-ink);
}

.intl-sms-dest-cap-preview--blocked {
    color: #b91c1c;
    font-weight: 600;
}

[data-theme-mode="dark"] .intl-sms-dest-cap-preview--blocked {
    color: #f87171;
}

.intl-sms-pricing-notice,
#intl-sms-sim-pricing-notice,
#intl-sms-pricing-notice-footer {
    font-size: 0.875rem;
    line-height: 1.5;
}

.intl-sms-inline-feedback {
    padding: 0.55rem 0.7rem;
    border-radius: 0.55rem;
    font-size: 0.84rem;
    line-height: 1.4;
}

.intl-sms-inline-feedback--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #b91c1c;
}

[data-theme-mode="dark"] .intl-sms-inline-feedback--error {
    color: #fca5a5;
}

.intl-sms-inline-feedback--ok {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #15803d;
}

[data-theme-mode="dark"] .intl-sms-inline-feedback--ok {
    color: #86efac;
}

.intl-sms-page-alert {
    border-radius: 0.75rem;
    font-size: 0.88rem;
}

.intl-sms-progress {
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.2);
    overflow: hidden;
}

[data-theme-mode="dark"] .intl-sms-progress {
    background: rgba(100, 116, 139, 0.25);
}

.intl-sms-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--intl-sms-accent);
    transition: width 0.25s ease, background-color 0.25s ease;
}

.intl-sms-progress-bar.is-warn {
    background: var(--intl-sms-warn);
}

.intl-sms-progress-bar.is-danger {
    background: var(--intl-sms-danger);
}

.intl-sms-sim-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.intl-sms-sim-field-input {
    flex: 1 1 12rem;
    min-width: 0;
}

.intl-sms-sim-field-action {
    flex: 1 1 100%;
}

.intl-sms-sim-submit-btn {
    min-height: 44px;
    width: 100%;
}

@media (min-width: 576px) {
    .intl-sms-sim-field-action {
        flex: 0 0 auto;
    }

    .intl-sms-sim-submit-btn {
        width: auto;
        min-width: 8.5rem;
    }
}

.intl-sms-sim-combobox {
    position: relative;
}

.intl-sms-sim-suggestions {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    max-height: min(16rem, 50vh);
    overflow-y: auto;
    border: 1px solid var(--intl-sms-border);
    border-radius: 0.65rem;
    background: var(--intl-sms-panel);
    box-shadow: var(--intl-sms-shadow);
}

.intl-sms-sim-suggestions[hidden] {
    display: none !important;
}

.intl-sms-sim-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    color: var(--intl-sms-ink);
    min-height: 44px;
}

.intl-sms-sim-suggestion:hover,
.intl-sms-sim-suggestion.is-active {
    background: var(--intl-sms-accent-soft);
}

.intl-sms-sim-suggestion-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.intl-sms-sim-suggestion-name {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.intl-sms-sim-suggestion-meta {
    font-size: 0.75rem;
    color: var(--intl-sms-muted);
    white-space: nowrap;
}

.intl-sms-sim-suggestion-rate {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--intl-sms-ink);
    white-space: nowrap;
    flex-shrink: 0;
}

.intl-sms-sim-suggestion-empty {
    padding: 0.65rem 0.75rem;
    font-size: 0.82rem;
    color: var(--intl-sms-muted);
}

[data-theme-mode="dark"] .intl-sms-sim-suggestions {
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.45);
}

.intl-sms-sim-combobox .form-control:focus {
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.12);
}

.intl-sms-sim-result {
    padding: 0.85rem;
    border: 1px solid var(--intl-sms-border);
    border-radius: 0.75rem;
    background: rgba(96, 165, 250, 0.04);
}

.intl-sms-sim-result-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.intl-sms-country-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    vertical-align: middle;
}

.intl-sms-country-flag .iti__flag-box {
    display: inline-block;
    width: 20px;
}

.intl-sms-country-flag .iti__flag {
    display: inline-block;
    transform: scale(1.15);
    transform-origin: center center;
}

[data-theme-mode="dark"] .intl-sms-country-flag .iti__flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.intl-sms-metric {
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--intl-sms-border);
    border-radius: 0.6rem;
    background: var(--intl-sms-panel);
    height: 100%;
}

.intl-sms-metric-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--intl-sms-muted);
    margin-bottom: 0.15rem;
}

.intl-sms-metric-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--intl-sms-ink);
}

.intl-sms-pricing-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--intl-sms-muted);
    border-bottom-color: var(--intl-sms-border);
}

.intl-sms-pricing-table td {
    vertical-align: middle;
    font-size: 0.88rem;
    border-bottom-color: var(--intl-sms-border);
    color: var(--intl-sms-ink);
}

.intl-sms-pricing-card {
    padding: 0.75rem;
    border: 1px solid var(--intl-sms-border);
    border-radius: 0.75rem;
    background: var(--intl-sms-panel);
    margin-bottom: 0.55rem;
}

.intl-sms-pricing-card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
}

.intl-sms-pricing-card-rate {
    font-size: 1rem;
    font-weight: 700;
    color: var(--intl-sms-ink);
}

.intl-sms-skeleton-block {
    display: grid;
    gap: 0.55rem;
}

.intl-sms-skeleton-line {
    height: 0.85rem;
    border-radius: 0.4rem;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.15) 25%, rgba(148, 163, 184, 0.28) 50%, rgba(148, 163, 184, 0.15) 75%);
    background-size: 200% 100%;
    animation: intlSmsSkeletonShimmer 1.2s ease-in-out infinite;
}

.intl-sms-skeleton-line--lg {
    height: 1.25rem;
    width: 70%;
}

.intl-sms-skeleton-line--sm {
    width: 45%;
}

@keyframes intlSmsSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[data-theme-mode="dark"] .intl-sms-skeleton-line {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
}

.intl-sms-inline-feedback[hidden],
.intl-sms-page-alert[hidden] {
    display: none !important;
}

.intl-sms-pricing-cards {
    display: grid;
    gap: 0.55rem;
}

.intl-sms-money-input .input-group-text,
.intl-sms-money-input .form-control,
.intl-sms-pricing-search .input-group-text,
.intl-sms-pricing-search .form-control {
    border-color: var(--intl-sms-border);
    background: var(--intl-sms-panel);
    color: var(--intl-sms-ink);
}

.intl-sms-money-input .form-control:focus,
.intl-sms-pricing-search .form-control:focus {
    border-color: rgba(96, 165, 250, 0.45);
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.12);
}

.intl-sms-terms-check {
    align-items: flex-start;
    background: rgba(96, 165, 250, 0.06);
    border: 1px solid var(--intl-sms-border);
    border-radius: 0.65rem;
    color: var(--intl-sms-ink);
    display: flex;
    gap: 0.65rem;
    line-height: 1.45;
    margin: 0;
    min-height: 44px;
    padding: 0.75rem;
}

.intl-sms-terms-check input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.2rem;
    min-height: 1rem;
    min-width: 1rem;
}

.intl-sms-terms-link {
    color: var(--intl-sms-accent);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.intl-sms-terms-link:hover,
.intl-sms-terms-link:focus-visible {
    color: #93c5fd;
}

.intl-sms-terms-modal-body {
    max-height: min(70vh, 32rem);
    overflow-y: auto;
}

.intl-sms-terms-body {
    color: var(--intl-sms-ink);
    font-size: 0.875rem;
    line-height: 1.55;
}

.intl-sms-terms-heading {
    color: var(--intl-sms-ink);
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

.intl-sms-terms-heading:first-child {
    margin-top: 0;
}

.intl-sms-terms-list {
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
}

.intl-sms-terms-list li {
    margin-bottom: 0.35rem;
}

.intl-sms-terms-list li:last-child {
    margin-bottom: 0;
}

[data-theme-mode="dark"] .intl-sms-terms-check {
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 767.98px) {
    .intl-sms-hero-status {
        margin-top: 0.25rem;
    }

    .intl-sms-switch .form-check-input {
        width: 3rem;
        height: 1.55rem;
    }
}

/* Hold Music Generator (music-on-hold) */
.moh-page-container {
    padding: 1.25rem;
}

.moh-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: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.moh-card-header {
    background: linear-gradient(135deg, rgba(240, 244, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.25rem 1.5rem;
    font-weight: 600;
}

.moh-hero-card {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
    color: #f6f7fb;
    border: none;
    border-radius: 0.75rem;
    padding: 1.25rem 1.75rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(91, 33, 182, 0.22);
}

.moh-hero-bg-icon {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    font-size: 7rem;
    opacity: 0.12;
    pointer-events: none;
}

.moh-hero-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.moh-hero-text {
    font-size: 0.875rem;
    color: rgba(246, 247, 251, 0.92);
}

.moh-preset-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.65rem;
}

@media (min-width: 576px) {
    .moh-preset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.moh-preset-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 0.65rem;
    background: rgba(248, 250, 252, 0.9);
    padding: 0.85rem 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.moh-preset-card:hover,
.moh-preset-card:focus-visible {
    border-color: rgba(124, 58, 237, 0.55);
    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.12);
    outline: none;
}

.moh-preset-card.is-selected {
    border-color: #7c3aed;
    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.18);
    background: rgba(237, 233, 254, 0.65);
}

.moh-preset-card-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: inherit;
}

.moh-preset-card-hint {
    font-size: 0.75rem;
    color: #64748b;
}

.moh-input,
.moh-select,
.moh-textarea {
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.moh-textarea {
    resize: vertical;
    min-height: 88px;
}

.moh-price-pill,
.moh-cost-pill,
.moh-style-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.moh-price-pill {
    background: rgba(124, 58, 237, 0.12);
    color: #5b21b6;
}

.moh-cost-pill {
    background: #dcfce7;
    color: #166534;
}

.moh-style-pill {
    background: #eef2ff;
    color: #3730a3;
}

.moh-btn-generate {
    min-height: 44px;
}

.moh-generating-panel,
.moh-recent-result {
    border-radius: 0.65rem;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    padding: 1rem;
}

.moh-audio-player {
    height: 40px;
    border-radius: 999px;
}

.moh-advanced-toggle {
    color: inherit;
}

.moh-advanced-toggle-icon {
    transition: transform 0.15s ease;
}

.moh-advanced-toggle[aria-expanded="true"] .moh-advanced-toggle-icon {
    transform: rotate(180deg);
}

.moh-advanced-options {
    border-top: 1px solid rgba(100, 116, 139, 0.18);
}

.moh-history-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background-color: #f8f9fa;
}

.moh-history-table td {
    padding: 0.95rem 1rem;
    vertical-align: middle;
    font-size: 0.875rem;
}

.moh-history-new-row td {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

.moh-ad-card {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
    color: #f6f7fb;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(91, 33, 182, 0.18);
}

.moh-ad-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.moh-ad-text {
    font-size: 0.8125rem;
    color: rgba(246, 247, 251, 0.92);
}

.moh-ad-highlight {
    color: #fff;
    font-weight: 600;
}

[data-theme-mode="dark"] .moh-card {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .moh-card-header {
    background: linear-gradient(135deg, rgba(40, 40, 48, 0.65) 0%, rgba(26, 26, 26, 0.65) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #f6f7fb;
}

[data-theme-mode="dark"] .moh-hero-card,
[data-theme-mode="dark"] .moh-ad-card {
    background: linear-gradient(135deg, #2e1065 0%, #4c1d95 100%);
}

[data-theme-mode="dark"] .moh-preset-card {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f6f7fb;
}

[data-theme-mode="dark"] .moh-preset-card.is-selected {
    background: rgba(124, 58, 237, 0.18);
    border-color: #a78bfa;
}

[data-theme-mode="dark"] .moh-preset-card-hint {
    color: #b3b3b3;
}

[data-theme-mode="dark"] .moh-input,
[data-theme-mode="dark"] .moh-select,
[data-theme-mode="dark"] .moh-textarea {
    background: #121212;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f6f7fb;
}

[data-theme-mode="dark"] .moh-generating-panel,
[data-theme-mode="dark"] .moh-recent-result {
    background: #121212;
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme-mode="dark"] .moh-history-table th {
    background: #121212;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #b3b3b3;
}

[data-theme-mode="dark"] .moh-history-table td {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #f6f7fb;
}

[data-theme-mode="dark"] .moh-price-pill {
    background: rgba(124, 58, 237, 0.22);
    color: #ddd6fe;
}

[data-theme-mode="dark"] .moh-cost-pill {
    background: rgba(34, 197, 94, 0.16);
    color: #bbf7d0;
}

[data-theme-mode="dark"] .moh-style-pill {
    background: rgba(79, 70, 229, 0.22);
    color: #c7d2fe;
}

/* Hold Music — purple accent scope (matches hero #5b21b6 / #7c3aed) */
.moh-page-container,
#moh-tips-modal,
.moh-modern-modal {
    --moh-accent: #7c3aed;
    --moh-accent-hover: #6d28d9;
    --moh-accent-deep: #5b21b6;
    --moh-accent-light: rgba(124, 58, 237, 0.12);
    --moh-accent-border: rgba(124, 58, 237, 0.28);
    --moh-accent-soft: #ddd6fe;
    --moh-accent-muted: #c4b5fd;
    --moh-ink: var(--bs-heading-color, #172033);
    --moh-muted: var(--bs-secondary-color, #697386);
    --moh-panel: var(--bs-card-bg, #fff);
    --moh-panel-strong: var(--bs-body-bg, #fff);
    --moh-border: var(--bs-border-color, rgba(0, 0, 0, 0.12));
}

[data-theme-mode="dark"] .moh-page-container,
[data-theme-mode="dark"] #moh-tips-modal,
[data-theme-mode="dark"] .moh-modern-modal {
    --moh-ink: #f6f7fb;
    --moh-muted: #b3b3b3;
    --moh-panel: #161616;
    --moh-panel-strong: #121212;
    --moh-border: rgba(255, 255, 255, 0.12);
}

.moh-page-container .text-primary {
    color: var(--moh-accent) !important;
}

.moh-page-container .btn.btn-primary,
.moh-page-container .btn-primary {
    background-color: var(--moh-accent) !important;
    border-color: var(--moh-accent) !important;
    color: #ffffff !important;
}

.moh-page-container .btn.btn-primary:hover,
.moh-page-container .btn.btn-primary:focus,
.moh-page-container .btn-primary:hover,
.moh-page-container .btn-primary:focus {
    background-color: var(--moh-accent-hover) !important;
    border-color: var(--moh-accent-hover) !important;
    color: #ffffff !important;
}

.moh-page-container .btn.btn-outline-primary,
.moh-page-container .btn-outline-primary {
    color: var(--moh-accent-deep) !important;
    border-color: rgba(124, 58, 237, 0.45) !important;
    background-color: transparent !important;
}

.moh-page-container .btn.btn-outline-primary:hover,
.moh-page-container .btn.btn-outline-primary:focus,
.moh-page-container .btn-outline-primary:hover,
.moh-page-container .btn-outline-primary:focus {
    background-color: var(--moh-accent-light) !important;
    border-color: var(--moh-accent) !important;
    color: var(--moh-accent-deep) !important;
}

.moh-page-container #moh-custom-toggle {
    color: var(--moh-accent);
}

.moh-page-container #moh-custom-toggle:hover,
.moh-page-container #moh-custom-toggle:focus-visible {
    color: var(--moh-accent-deep);
    outline: none;
}

[data-theme-mode="dark"] .moh-page-container .text-primary {
    color: var(--moh-accent-muted) !important;
}

[data-theme-mode="dark"] .moh-page-container #moh-custom-toggle {
    color: var(--moh-accent-muted);
}

[data-theme-mode="dark"] .moh-page-container #moh-custom-toggle:hover,
[data-theme-mode="dark"] .moh-page-container #moh-custom-toggle:focus-visible {
    color: var(--moh-accent-soft);
}

[data-theme-mode="dark"] .moh-page-container .btn.btn-outline-primary,
[data-theme-mode="dark"] .moh-page-container .btn-outline-primary {
    color: var(--moh-accent-soft) !important;
    border-color: rgba(167, 139, 250, 0.45) !important;
}

[data-theme-mode="dark"] .moh-page-container .btn.btn-outline-primary:hover,
[data-theme-mode="dark"] .moh-page-container .btn.btn-outline-primary:focus,
[data-theme-mode="dark"] .moh-page-container .btn-outline-primary:hover,
[data-theme-mode="dark"] .moh-page-container .btn-outline-primary:focus {
    background-color: rgba(124, 58, 237, 0.18) !important;
    border-color: var(--moh-accent-muted) !important;
    color: var(--moh-accent-soft) !important;
}

.moh-promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    background: rgba(124, 58, 237, 0.14);
    color: #5b21b6;
    border: 1px solid rgba(124, 58, 237, 0.28);
    white-space: normal;
}

.moh-promo-badge--on-gradient {
    background: rgba(255, 255, 255, 0.16);
    color: #f6f7fb;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.18);
}

[data-theme-mode="dark"] .moh-promo-badge {
    background: rgba(124, 58, 237, 0.22);
    color: #ddd6fe;
    border-color: rgba(167, 139, 250, 0.35);
}

[data-theme-mode="dark"] .moh-promo-badge--on-gradient {
    background: rgba(255, 255, 255, 0.12);
    color: #f6f7fb;
    border-color: rgba(255, 255, 255, 0.2);
}

.moh-tips-trigger {
    color: #7c3aed;
    font-size: 0.8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.moh-tips-trigger:hover,
.moh-tips-trigger:focus-visible {
    color: #5b21b6;
    text-decoration: underline;
    outline: none;
}

[data-theme-mode="dark"] .moh-tips-trigger {
    color: #c4b5fd;
}

[data-theme-mode="dark"] .moh-tips-trigger:hover,
[data-theme-mode="dark"] .moh-tips-trigger:focus-visible {
    color: #ddd6fe;
}

.moh-tips-example-copy:hover,
.moh-tips-example-copy:focus-visible {
    border-color: rgba(124, 58, 237, 0.45) !important;
    background: rgba(124, 58, 237, 0.08) !important;
    color: #5b21b6 !important;
    outline: none;
}

[data-theme-mode="dark"] .moh-tips-example-copy:hover,
[data-theme-mode="dark"] .moh-tips-example-copy:focus-visible {
    border-color: rgba(167, 139, 250, 0.45) !important;
    background: rgba(124, 58, 237, 0.18) !important;
    color: #ddd6fe !important;
}

.moh-wait-icon-wrap {
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.35);
}

.moh-wait-wave-bar {
    background: #a78bfa;
}

/* Hold Music modern modal (purple accent — not rb-modern-modal pink) */
.moh-modern-modal {
    background: var(--moh-panel) !important;
    border: 1px solid var(--moh-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden;
    color: var(--moh-ink) !important;
}

.moh-modern-modal .modal-header,
.moh-modern-modal .offcanvas-header {
    background: linear-gradient(90deg, #5b21b6 0%, #7c3aed 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.moh-modern-modal .modal-title,
.moh-modern-modal .offcanvas-title {
    color: #f6f7fb !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.moh-modern-modal .modal-title i,
.moh-modern-modal .offcanvas-title i {
    color: #ddd6fe !important;
    font-size: 1.2rem !important;
    vertical-align: middle;
}

.moh-modern-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.2);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.moh-modern-modal .btn-close:hover {
    opacity: 0.85;
    transform: rotate(90deg);
}

.moh-modern-modal .modal-body,
.moh-modern-modal .offcanvas-body {
    background: var(--moh-panel) !important;
    padding: 1.5rem !important;
    color: var(--moh-ink) !important;
}

.moh-modern-modal .modal-footer {
    background: var(--moh-panel) !important;
    border-top: 1px solid var(--moh-border) !important;
    padding: 1.25rem 1.5rem !important;
}

.moh-modern-modal .btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}

.moh-modern-modal .btn-secondary:hover,
.moh-modern-modal .btn-secondary:focus {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

.moh-modern-modal .btn-primary {
    background-color: var(--moh-accent) !important;
    border-color: var(--moh-accent) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.25rem !important;
}

.moh-modern-modal .btn-primary:hover,
.moh-modern-modal .btn-primary:focus {
    background-color: var(--moh-accent-hover) !important;
    border-color: var(--moh-accent-hover) !important;
}

[data-theme-mode="dark"] .moh-modern-modal {
    background: #161616 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.75) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .moh-modern-modal .modal-body,
[data-theme-mode="dark"] .moh-modern-modal .offcanvas-body {
    background: #161616 !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .moh-modern-modal .modal-footer {
    background: #161616 !important;
    border-top-color: rgba(255, 255, 255, 0.09) !important;
}

/* Gold Numbers modern modal (gold accent — not rb-modern-modal pink) */
.gn-modern-modal {
    --gn-modal-panel: #ffffff;
    --gn-modal-panel-strong: #f8f9fa;
    --gn-modal-ink: #172033;
    --gn-modal-muted: #697386;
    --gn-modal-border: rgba(0, 0, 0, 0.12);
    --gn-modal-accent: #d4a017;
    --gn-modal-accent-hover: #c9a227;
    --gn-modal-accent-light: rgba(212, 160, 23, 0.15);
    background: var(--gn-modal-panel) !important;
    border: 1px solid var(--gn-modal-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12) !important;
    color: var(--gn-modal-ink) !important;
    overflow: hidden;
}

.gn-modern-modal .modal-header,
.gn-modern-modal .offcanvas-header {
    background: linear-gradient(90deg, #9a7209 0%, #d4a017 55%, #c9a227 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.gn-modern-modal .modal-title,
.gn-modern-modal .offcanvas-title {
    color: #f6f7fb !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.gn-modern-modal .modal-title i,
.gn-modern-modal .offcanvas-title i {
    color: #fef3c7 !important;
    font-size: 1.2rem !important;
    vertical-align: middle;
}

.gn-modern-modal .gn-detail-modal-subtitle {
    color: rgba(246, 247, 251, 0.82) !important;
    margin-top: 0.2rem;
}

.gn-modern-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.2);
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gn-modern-modal .btn-close:hover {
    opacity: 0.85;
    transform: rotate(90deg);
}

.gn-modern-modal .modal-body,
.gn-modern-modal .offcanvas-body {
    background: var(--gn-modal-panel) !important;
    color: var(--gn-modal-ink) !important;
    padding: 1.5rem !important;
}

.gn-modern-modal .modal-footer {
    background: var(--gn-modal-panel) !important;
    border-top: 1px solid var(--gn-modal-border) !important;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem !important;
}

.gn-modern-modal .btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.55rem 1.25rem !important;
}

.gn-modern-modal .btn-secondary:hover,
.gn-modern-modal .btn-secondary:focus {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}

.gn-modern-modal .btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--gn-modal-border) !important;
    border-radius: 8px !important;
    color: var(--gn-modal-ink) !important;
    font-weight: 600 !important;
    padding: 0.55rem 1.25rem !important;
}

.gn-modern-modal .btn-outline-secondary:hover,
.gn-modern-modal .btn-outline-secondary:focus {
    background-color: rgba(212, 160, 23, 0.08) !important;
    border-color: rgba(212, 160, 23, 0.45) !important;
    color: var(--gn-modal-accent) !important;
}

.gn-modern-modal .btn-primary {
    background-color: var(--gn-modal-accent) !important;
    border-color: var(--gn-modal-accent) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.55rem 1.25rem !important;
}

.gn-modern-modal .btn-primary:hover,
.gn-modern-modal .btn-primary:focus {
    background-color: var(--gn-modal-accent-hover) !important;
    border-color: var(--gn-modal-accent-hover) !important;
    color: #ffffff !important;
}

[data-theme-mode="dark"] .gn-modern-modal {
    --gn-modal-panel: #161616;
    --gn-modal-panel-strong: #101010;
    --gn-modal-ink: #f6f7fb;
    --gn-modal-muted: #b3b3b3;
    --gn-modal-border: rgba(255, 255, 255, 0.09);
    background: #161616 !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.75) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .gn-modern-modal .modal-body,
[data-theme-mode="dark"] .gn-modern-modal .offcanvas-body {
    background: #161616 !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .gn-modern-modal .modal-footer {
    background: #161616 !important;
    border-top-color: rgba(255, 255, 255, 0.09) !important;
}

[data-theme-mode="dark"] .gn-modern-modal .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f6f7fb !important;
}

[data-theme-mode="dark"] .gn-modern-modal .btn-outline-secondary:hover,
[data-theme-mode="dark"] .gn-modern-modal .btn-outline-secondary:focus {
    background-color: rgba(212, 160, 23, 0.12) !important;
    border-color: rgba(212, 160, 23, 0.45) !important;
    color: #fbbf24 !important;
}

[data-theme-mode="light"] .gn-modern-modal .modal-body,
[data-theme-mode="light"] .gn-modern-modal .offcanvas-body,
[data-theme-mode="light"] .gn-modern-modal .modal-footer {
    background: #ffffff !important;
}

[data-theme-mode="light"] .gn-modern-modal .modal-footer {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* Gold Numbers (Premium Mobile Numbers) */
/* Gold Numbers Premium Hero (Red/Crimson/Burgundy Theme) */
.gn-hero {
    background: linear-gradient(135deg, #4c0519 0%, #991b1b 50%, #dc3545 100%) !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.25) !important;
    border-left: 4px solid #d4a017 !important;
}

[data-theme-mode="dark"] .gn-hero {
    background: linear-gradient(135deg, #2d0612 0%, #7f1d1d 50%, #b02a37 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.gn-hero .number-manager-shared-hero-bg-icon {
    color: #d4a017 !important;
    opacity: 0.08 !important;
}

.gn-hero .number-manager-kicker {
    background: rgba(212, 160, 23, 0.15) !important;
    color: #facc15 !important;
    border: 1px solid rgba(212, 160, 23, 0.3) !important;
}

.gn-hero .number-manager-kicker i {
    color: #facc15 !important;
}

.gn-hero .number-manager-btn-ghost:hover {
    background: rgba(212, 160, 23, 0.15) !important;
    border-color: rgba(212, 160, 23, 0.5) !important;
    color: #facc15 !important;
}

.gn-hero .number-manager-btn-ghost:hover i {
    color: #facc15 !important;
}

.gn-page-wrapper {
    padding: 0 0 1.25rem;
}

.gn-page-container {
    --gn-ink: var(--bs-heading-color, #172033);
    --gn-muted: var(--bs-secondary-color, #697386);
    --gn-panel: var(--bs-card-bg, #fff);
    --gn-border: var(--bs-border-color, rgba(0, 0, 0, 0.12));
    --gn-shadow: 0 0.45rem 1.2rem rgba(15, 23, 42, 0.08);
    --gn-gold: #d4a017;
    --gn-gold-hover: #b8860b;
    --gn-gold-soft: rgba(212, 160, 23, 0.12);
    --gn-silver: #94a3b8;
    --gn-lucky: #8b5cf6;
}

[data-theme-mode="dark"] .gn-page-container {
    --gn-ink: #f6f7fb;
    --gn-muted: #b3b3b3;
    --gn-panel: rgba(22, 22, 22, 0.65);
    --gn-border: rgba(255, 255, 255, 0.08);
    --gn-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.gn-page-feedback {
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.65rem;
    font-size: 0.875rem;
}

.gn-page-feedback--success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #15803d;
}

.gn-page-feedback--error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #b91c1c;
}

.gn-page-feedback--info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #1d4ed8;
}

[data-theme-mode="dark"] .gn-page-feedback--success {
    color: #86efac;
}

[data-theme-mode="dark"] .gn-page-feedback--error {
    color: #fca5a5;
}

[data-theme-mode="dark"] .gn-page-feedback--info {
    color: #93c5fd;
}

/* Your holds panel (account-owned reserved numbers — not catalog browse) */
.gn-holds-panel {
    background: var(--gn-panel);
    border: 1px solid var(--gn-border);
    border-radius: 1rem;
    box-shadow: var(--gn-shadow);
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.25rem 1.25rem;
}

[data-theme-mode="dark"] .gn-holds-panel {
    background: rgba(22, 22, 22, 0.85);
    border-color: rgba(212, 160, 23, 0.22);
    box-shadow: none;
}

.gn-holds-header {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.gn-holds-header-copy {
    min-width: 0;
}

.gn-holds-feedback {
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.85rem;
    padding: 0.55rem 0.75rem;
}

.gn-holds-feedback--success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #15803d;
}

.gn-holds-feedback--error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #b91c1c;
}

.gn-holds-feedback--info {
    background: rgba(212, 160, 23, 0.12);
    border: 1px solid rgba(212, 160, 23, 0.28);
    color: #92400e;
}

[data-theme-mode="dark"] .gn-holds-feedback--success {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
}

[data-theme-mode="dark"] .gn-holds-feedback--error {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

[data-theme-mode="dark"] .gn-holds-feedback--info {
    background: rgba(212, 160, 23, 0.14);
    border-color: rgba(212, 160, 23, 0.4);
    color: #fbbf24;
}

.gn-holds-list {
    display: grid;
    gap: 0.85rem;
}

.gn-holds-loading,
.gn-holds-empty {
    color: var(--gn-muted);
    padding: 1.25rem 0.5rem;
    text-align: center;
}

.gn-holds-empty-title {
    color: var(--gn-ink);
    font-weight: 600;
    margin: 0 0 0.35rem;
}

.gn-holds-empty-copy {
    margin: 0 0 0.85rem;
}

.gn-hold-card {
    background: var(--gn-panel);
    border: 1px solid var(--gn-border);
    border-radius: 0.85rem;
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
}

[data-theme-mode="dark"] .gn-hold-card {
    background: #101010;
    border-color: rgba(255, 255, 255, 0.09);
}

.gn-hold-card-top {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: space-between;
}

.gn-hold-card-number {
    color: var(--gn-ink);
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', var(--bs-font-monospace), monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.gn-hold-card-meta {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    min-width: 0;
}

.gn-holds-panel,
.gn-hold-card,
.gn-holds-list {
    max-width: 100%;
    min-width: 0;
}

.gn-page-wrapper,
.gn-page-container {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.gn-hold-card-field {
    min-width: 0;
}

.gn-hold-card-label {
    align-items: center;
    color: var(--gn-muted);
    display: inline-flex;
    font-size: 0.625rem;
    font-weight: 700;
    gap: 0.15rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.gn-hold-card-value {
    color: var(--gn-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.gn-hold-card-countdown {
    color: #b45309;
    font-variant-numeric: tabular-nums;
}

[data-theme-mode="dark"] .gn-hold-card-countdown {
    color: #fbbf24;
}

.gn-hold-card-countdown.is-urgent {
    color: #b91c1c;
}

[data-theme-mode="dark"] .gn-hold-card-countdown.is-urgent {
    color: #fca5a5;
}

.gn-hold-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 100%;
}

.gn-hold-card-actions .btn {
    min-height: 2.75rem;
}

.gn-hold-card-actions .gn-hold-purchase-btn {
    flex: 1 1 auto;
    min-width: 0;
}

@media (min-width: 768px) {
    .gn-hold-card {
        align-items: center;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto;
    }

    .gn-hold-card-actions {
        justify-content: flex-end;
    }
}

.gn-layout {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
}

.gn-filters-card,
.gn-main-panel {
    background: var(--gn-panel);
    border: 1px solid var(--gn-border);
    border-radius: 1rem;
    box-shadow: var(--gn-shadow);
    transition: all 0.3s ease;
}

[data-theme-mode="dark"] .gn-filters-card,
[data-theme-mode="dark"] .gn-main-panel {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.gn-filters-card {
    padding: 1.5rem;
    position: sticky;
    top: 1rem;
}

.gn-filters-title,
.gn-panel-title {
    color: var(--gn-ink);
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}

.gn-panel-subtitle {
    color: var(--gn-muted);
    margin: 0.15rem 0 0;
}

.gn-filter-group + .gn-filter-group {
    margin-top: 1.25rem;
}

.gn-filter-label {
    color: var(--gn-muted);
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
    opacity: 0.85;
}

.gn-filter-input {
    font-size: 0.875rem;
}

.gn-tier-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gn-tier-tab {
    align-items: center;
    background: transparent;
    border: 1px solid var(--gn-border);
    border-radius: 999px;
    color: var(--gn-ink);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 2.5rem;
    min-width: 2.5rem;
    padding: 0.35rem 0.85rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gn-tier-tab:hover {
    border-color: rgba(212, 160, 23, 0.4);
    color: var(--gn-gold);
    background: rgba(212, 160, 23, 0.05);
}

.gn-tier-tab.is-active {
    background: var(--gn-gold-soft);
    border-color: rgba(212, 160, 23, 0.45);
    color: var(--gn-gold);
}

[data-theme-mode="dark"] .gn-tier-tab[data-gn-tier="gold"].is-active {
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.2) 0%, rgba(212, 160, 23, 0.05) 100%);
    border-color: #fbbf24;
    color: #fbbf24;
    box-shadow: 0 0 15px rgba(212, 160, 23, 0.15);
}

[data-theme-mode="dark"] .gn-tier-tab[data-gn-tier="silver"].is-active {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.2) 0%, rgba(148, 163, 184, 0.05) 100%);
    border-color: #cbd5e1;
    color: #cbd5e1;
    box-shadow: 0 0 15px rgba(148, 163, 184, 0.1);
}

[data-theme-mode="dark"] .gn-tier-tab[data-gn-tier="lucky_8"].is-active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-color: #a78bfa;
    color: #a78bfa;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

.gn-price-range-row {
    align-items: center;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.gn-price-range-sep {
    color: var(--gn-muted);
    font-size: 0.875rem;
}

.gn-filter-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* Premium Filter Buttons */
.gn-btn-apply {
    background: linear-gradient(135deg, #4c0519 0%, #991b1b 50%, #dc3545 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.45) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border-radius: 8px !important;
}

.gn-btn-apply:hover,
.gn-btn-apply:focus {
    background: linear-gradient(135deg, #991b1b 0%, #dc3545 50%, #facc15 100%) !important;
    border-color: #facc15 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35), 0 0 8px rgba(212, 160, 23, 0.2) !important;
    transform: translateY(-1px);
}

.gn-btn-apply:active {
    transform: translateY(1px);
    box-shadow: none !important;
}

[data-theme-mode="dark"] .gn-btn-apply {
    background: linear-gradient(135deg, #2d0612 0%, #7f1d1d 50%, #b02a37 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.3) !important;
}

[data-theme-mode="dark"] .gn-btn-apply:hover,
[data-theme-mode="dark"] .gn-btn-apply:focus {
    background: linear-gradient(135deg, #7f1d1d 0%, #b02a37 50%, #d4a017 100%) !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(212, 160, 23, 0.25) !important;
}

.gn-btn-clear {
    background-color: transparent !important;
    border: 1px solid var(--gn-border) !important;
    color: var(--gn-muted) !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border-radius: 8px !important;
}

.gn-btn-clear:hover,
.gn-btn-clear:focus {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--gn-muted) !important;
    color: var(--gn-ink) !important;
}

[data-theme-mode="dark"] .gn-btn-clear:hover,
[data-theme-mode="dark"] .gn-btn-clear:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.gn-main-panel {
    min-width: 0;
    padding: 1.5rem;
}

.gn-toolbar {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.gn-toolbar-copy {
    min-width: 0;
}

.gn-sort-select {
    max-width: 12rem;
    min-width: 10rem;
}

[data-theme-mode="dark"] .gn-sort-select {
    background-color: rgba(16, 16, 16, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f6f7fb !important;
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

[data-theme-mode="dark"] .gn-sort-select:focus {
    border-color: rgba(212, 160, 23, 0.5) !important;
    box-shadow: 0 0 12px rgba(212, 160, 23, 0.15) !important;
}

.gn-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.gn-grid-loading,
.gn-empty-state {
    color: var(--gn-muted);
    grid-column: 1 / -1;
    padding: 2rem 1rem;
    text-align: center;
}

.gn-empty-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.65;
}

.gn-empty-title {
    color: var(--gn-ink);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.gn-empty-copy {
    color: var(--gn-muted);
    margin: 0;
}

/* Card Design Upgrades */
.gn-card {
    background: var(--gn-panel);
    border: 1px solid var(--gn-border);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 100%;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Card Hover Lift & Glow & Sweep */
.gn-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 1;
}

.gn-card:hover::after {
    left: 150%;
    transition: left 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gn-card:hover {
    transform: translateY(-5px) scale(1.015);
}

/* Gold Cards */
.gn-card--gold {
    border-color: rgba(212, 160, 23, 0.28);
}

[data-theme-mode="dark"] .gn-card--gold {
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.05) 0%, rgba(22, 22, 22, 0.75) 100%);
    border-color: rgba(212, 160, 23, 0.25);
}

[data-theme-mode="dark"] .gn-card--gold:hover {
    border-color: rgba(212, 160, 23, 0.7);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.55), 0 0 20px 0 rgba(212, 160, 23, 0.18);
}

/* Silver Cards */
.gn-card--silver {
    border-color: rgba(148, 163, 184, 0.32);
}

[data-theme-mode="dark"] .gn-card--silver {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.05) 0%, rgba(22, 22, 22, 0.75) 100%);
    border-color: rgba(148, 163, 184, 0.2);
}

[data-theme-mode="dark"] .gn-card--silver:hover {
    border-color: rgba(148, 163, 184, 0.65);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.55), 0 0 20px 0 rgba(148, 163, 184, 0.12);
}

/* Lucky 8 Cards */
.gn-card--lucky_8 {
    border-color: rgba(139, 92, 246, 0.28);
}

[data-theme-mode="dark"] .gn-card--lucky_8 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(22, 22, 22, 0.75) 100%);
    border-color: rgba(139, 92, 246, 0.22);
}

[data-theme-mode="dark"] .gn-card--lucky_8:hover {
    border-color: rgba(139, 92, 246, 0.65);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.55), 0 0 20px 0 rgba(139, 92, 246, 0.18);
}

.gn-card-header {
    align-items: flex-start;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
}

.gn-card-number {
    color: var(--gn-ink);
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', var(--bs-font-monospace), monospace;
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-wrap: balance;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Beautiful custom badges with subtle inner glow */
.gn-tier-badge {
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.65rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.gn-tier-badge--gold {
    background: rgba(212, 160, 23, 0.14);
    border: 1px solid rgba(212, 160, 23, 0.35);
    color: #b8860b;
}

.gn-tier-badge--silver {
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #64748b;
}

.gn-tier-badge--lucky_8 {
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #7c3aed;
}

[data-theme-mode="dark"] .gn-tier-badge--gold {
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.18) 0%, rgba(154, 114, 9, 0.3) 100%);
    border: 1px solid rgba(212, 160, 23, 0.55);
    box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.12), 0 2px 8px rgba(212, 160, 23, 0.2);
    color: #fbbf24;
}

[data-theme-mode="dark"] .gn-tier-badge--silver {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.18) 0%, rgba(71, 85, 105, 0.3) 100%);
    border: 1px solid rgba(148, 163, 184, 0.5);
    box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.12), 0 2px 8px rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
}

[data-theme-mode="dark"] .gn-tier-badge--lucky_8 {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(91, 33, 182, 0.3) 100%);
    border: 1px solid rgba(139, 92, 246, 0.5);
    box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.12), 0 2px 8px rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

[data-theme-mode="dark"] .gn-card {
    background: rgba(22, 22, 22, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.08);
}

.gn-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 2.75rem;
}

.gn-card-pattern,
.gn-card-lucky {
    -webkit-box-orient: vertical;
    color: var(--gn-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin: 0;
    overflow: hidden;
}

.gn-card-lucky {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

/* Fading divider for pricing section */
.gn-card-pricing {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent) 1;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
    padding-top: 0.85rem;
}

.gn-card-price-col {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gn-card-price-label {
    color: var(--gn-muted);
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
}

.gn-card-price-value {
    color: var(--gn-ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Outstanding tier-specific colors for crisp values */
.gn-card--gold .gn-card-price-value {
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.2);
}

.gn-card--silver .gn-card-price-value {
    color: #e2e8f0;
    text-shadow: 0 0 10px rgba(226, 232, 240, 0.15);
}

.gn-card--lucky_8 .gn-card-price-value {
    color: #c4b5fd;
    text-shadow: 0 0 10px rgba(196, 181, 253, 0.2);
}

/* Action button designs with gorgeous transitions */
.gn-card-action {
    background: transparent;
    border-radius: 999px !important;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-top: 0.15rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.85rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    letter-spacing: 0.02em;
}

/* Fallback card action */
[data-theme-mode="dark"] .gn-card-action {
    background: rgba(212, 160, 23, 0.05);
    border: 1px solid rgba(212, 160, 23, 0.4);
    color: #fbbf24;
}

[data-theme-mode="dark"] .gn-card-action:hover,
[data-theme-mode="dark"] .gn-card-action:focus {
    background: linear-gradient(135deg, #d4a017 0%, #fbbf24 100%);
    border-color: #fbbf24;
    color: #101010;
    box-shadow: 0 4px 15px rgba(212, 160, 23, 0.45);
    transform: translateY(-1px);
}

/* Tier specific card actions on gold cards */
[data-theme-mode="dark"] .gn-card--gold .gn-card-action {
    background: rgba(212, 160, 23, 0.05);
    border: 1px solid rgba(212, 160, 23, 0.4);
    color: #fbbf24;
}

[data-theme-mode="dark"] .gn-card--gold .gn-card-action:hover,
[data-theme-mode="dark"] .gn-card--gold .gn-card-action:focus {
    background: linear-gradient(135deg, #d4a017 0%, #fbbf24 100%);
    border-color: #fbbf24;
    color: #101010;
    box-shadow: 0 4px 15px rgba(212, 160, 23, 0.45);
}

/* Tier specific card actions on silver cards */
[data-theme-mode="dark"] .gn-card--silver .gn-card-action {
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #cbd5e1;
}

[data-theme-mode="dark"] .gn-card--silver .gn-card-action:hover,
[data-theme-mode="dark"] .gn-card--silver .gn-card-action:focus {
    background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
    border-color: #cbd5e1;
    color: #101010;
    box-shadow: 0 4px 15px rgba(148, 163, 184, 0.35);
}

/* Tier specific card actions on lucky 8 cards */
[data-theme-mode="dark"] .gn-card--lucky_8 .gn-card-action {
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
}

[data-theme-mode="dark"] .gn-card--lucky_8 .gn-card-action:hover,
[data-theme-mode="dark"] .gn-card--lucky_8 .gn-card-action:focus {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    border-color: #a78bfa;
    color: #101010;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.gn-card-action:focus-visible {
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.35);
    outline: none;
}

.gn-pagination {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.gn-detail-modal-header-text {
    min-width: 0;
    padding-right: 0.75rem;
}

.gn-detail-modal-subtitle {
    color: var(--gn-muted);
}

.gn-detail-loading {
    color: var(--gn-muted);
    padding: 1.5rem 0;
    text-align: center;
}

.gn-detail-hero {
    background: var(--gn-modal-panel-strong, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--gn-border);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
}

.gn-detail-number {
    color: var(--gn-ink);
    font-size: clamp(1.35rem, 3vw, 1.65rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-wrap: balance;
}

.gn-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.gn-detail-section-title {
    color: var(--gn-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 0.65rem;
    text-transform: uppercase;
}

.gn-detail-fees-panel,
.gn-detail-meta-panel {
    background: var(--gn-modal-panel-strong, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--gn-border);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.95rem 1.15rem;
}

.gn-detail-fees {
    display: grid;
    gap: 0;
    margin: 0;
}

.gn-detail-fee-row {
    align-items: center;
    border-top: 1px solid var(--gn-border);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.65rem 0;
}

.gn-detail-fee-row:first-child {
    border-top: none;
    padding-top: 0;
}

.gn-detail-fee-row:last-child {
    padding-bottom: 0;
}

.gn-detail-fee-row dt {
    color: var(--gn-muted);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.gn-detail-fee-row dd {
    color: var(--gn-ink);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.gn-detail-fee-row--emphasis {
    background: rgba(212, 160, 23, 0.08);
    border-radius: 0.5rem;
    border-top: none;
    margin: 0.15rem 0;
    padding: 0.75rem 0.65rem;
}

.gn-detail-fee-row--emphasis dt {
    color: var(--gn-ink);
    font-weight: 700;
}

.gn-detail-fee-row--emphasis dd {
    color: var(--gn-gold);
    font-size: 1.05rem;
}

.gn-detail-meta-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gn-detail-meta-block--full {
    grid-column: 1 / -1;
}

.gn-detail-meta-label {
    color: var(--gn-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.gn-detail-meta-value {
    color: var(--gn-ink);
    margin: 0;
}

.gn-detail-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.gn-detail-category-pill {
    background: rgba(212, 160, 23, 0.1);
    border: 1px solid rgba(212, 160, 23, 0.28);
    border-radius: 999px;
    color: var(--gn-ink);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
}

.gn-detail-modal-footer {
    flex-wrap: wrap;
    justify-content: flex-end;
}

[data-theme-mode="dark"] .gn-detail-hero,
[data-theme-mode="dark"] .gn-detail-fees-panel,
[data-theme-mode="dark"] .gn-detail-meta-panel {
    background: #101010;
    border-color: rgba(255, 255, 255, 0.09);
}

[data-theme-mode="dark"] .gn-detail-fee-row {
    border-top-color: rgba(255, 255, 255, 0.09);
}

[data-theme-mode="dark"] .gn-detail-fee-row--emphasis {
    background: rgba(212, 160, 23, 0.12);
}

[data-theme-mode="dark"] .gn-detail-category-pill {
    background: rgba(212, 160, 23, 0.12);
    border-color: rgba(212, 160, 23, 0.32);
    color: #f6f7fb;
}

.gn-hold-notice {
    margin: 1rem 0 0;
    padding: 0.65rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(212, 160, 23, 0.35);
    background: rgba(212, 160, 23, 0.1);
    color: var(--gn-ink, #1f2937);
    line-height: 1.45;
}

[data-theme-mode="dark"] .gn-hold-notice {
    border-color: rgba(212, 160, 23, 0.4);
    background: rgba(212, 160, 23, 0.14);
    color: #f6f7fb;
}

.gn-inline-feedback {
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.gn-inline-feedback--success {
    color: #15803d;
}

.gn-inline-feedback--error {
    color: #b91c1c;
}

.gn-inline-feedback--info {
    color: var(--gn-muted);
}

[data-theme-mode="dark"] .gn-inline-feedback--success {
    color: #86efac;
}

[data-theme-mode="dark"] .gn-inline-feedback--error {
    color: #fca5a5;
}

.gn-recharge-link {
    color: #1d4ed8;
    text-decoration: underline;
    font-weight: 600;
}

.gn-recharge-link:hover {
    color: #1e40af;
}

[data-theme-mode="dark"] .gn-recharge-link {
    color: #93c5fd;
}

[data-theme-mode="dark"] .gn-recharge-link:hover {
    color: #bfdbfe;
}

/* Keep hold/detail tooltips above modal chrome */
body.modal-open .gn-modern-modal .custom-kb-tooltip-wrapper {
    position: relative !important;
    z-index: auto;
}

body.modal-open .gn-modern-modal .custom-kb-tooltip-content {
    position: fixed !important;
    z-index: 2000 !important;
    pointer-events: none;
}

.app-sidebar .crazytel-submenu-icon--gold-numbers {
    color: #d4a017;
}

@media (min-width: 576px) {
    .gn-grid {
        gap: 1rem 1.15rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .gn-grid {
        gap: 1.15rem 1.25rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .gn-layout {
        grid-template-columns: 1fr;
    }

    .gn-filters-card {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .gn-toolbar {
        display: block;
    }

    .gn-sort-select {
        margin-top: 0.65rem;
        max-width: none;
        width: 100%;
    }

    .gn-modern-modal .modal-header,
    .gn-modern-modal .modal-body,
    .gn-modern-modal .modal-footer {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .gn-detail-meta-grid {
        grid-template-columns: 1fr;
    }

    .gn-detail-modal-footer {
        justify-content: stretch;
    }

    .gn-detail-modal-footer .btn {
        flex: 1 1 auto;
        min-width: calc(50% - 0.25rem);
    }

    .gn-detail-modal-footer .btn[data-bs-dismiss="modal"] {
        flex-basis: 100%;
    }
}

/* ==========================================================================
   Premium AI Bridge — feature styles
   Bridges inbound calls to an AI provider SIPS URI.
   Pricing: $0.0025 per minute inbound.
   Follows the dark-theme design rules: neutral off-black surfaces, red/purple
   accents (no navy/blue fills), low-opacity light borders, WCAG-AA contrast.
   Reuses the --rb-panel / --rb-ink tokens established by Recording Box.
   ========================================================================== */

.pab-dashboard-container,
.pab-edit-container,
.pab-holidays-container,
.pab-calls-container,
.pab-stats-container,
.pab-usage-container {
    --pab-ink: var(--bs-heading-color, #172033);
    --pab-muted: var(--bs-secondary-color, #697386);
    --pab-panel: var(--bs-card-bg, #ffffff);
    --pab-panel-strong: var(--bs-body-bg, #ffffff);
    --pab-border: var(--bs-border-color, rgba(0, 0, 0, 0.12));
    --pab-accent: #8b5cf6;
    --pab-accent-strong: #7c3aed;
    --pab-accent-light: rgba(139, 92, 246, 0.12);
    --pab-green: #22c55e;
    --pab-red: #ef4444;
    --pab-amber: #f59e0b;
    /* DESIGN.md radius scale: sm=4px, md=8px, lg=12px */
    --pab-radius-sm: 0.25rem;
    --pab-radius-md: 0.5rem;
    --pab-radius-lg: 0.75rem;
    color: var(--pab-ink);
}

[data-theme-mode="dark"] .pab-dashboard-container,
[data-theme-mode="dark"] .pab-edit-container,
[data-theme-mode="dark"] .pab-holidays-container,
[data-theme-mode="dark"] .pab-calls-container,
[data-theme-mode="dark"] .pab-stats-container,
[data-theme-mode="dark"] .pab-usage-container {
    --pab-ink: #f6f7fb;
    --pab-muted: #b3b3b3;
    --pab-panel: #161616;
    --pab-panel-strong: #101010;
    --pab-border: rgba(255, 255, 255, 0.10);
}

.pab-page-title {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pab-ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pab-page-subtitle {
    color: var(--pab-muted);
    font-size: 0.95rem;
}

.pab-back-link {
    color: var(--pab-muted);
    font-size: 0.88rem;
    text-decoration: none;
}

.pab-back-link:hover {
    color: var(--pab-accent);
    text-decoration: underline;
}

.pab-muted {
    color: var(--pab-muted);
}

/* Hero / header */
.pab-hero {
    background: var(--pab-panel);
    border: 1px solid var(--pab-border);
    border-radius: var(--pab-radius-lg);
    padding: 1.25rem;
}

.pab-hero-copy {
    min-width: 0;
    flex: 1 1 16rem;
}

.pab-pricing-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--pab-accent-light);
    border: 1px solid rgba(139, 92, 246, 0.28);
    line-height: 1.2;
}

.pab-pricing-pill-amount {
    color: var(--pab-ink);
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.pab-pricing-pill-unit {
    color: var(--pab-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

/* Cards */
.pab-card {
    background: var(--pab-panel);
    border: 1px solid var(--pab-border);
    border-radius: var(--pab-radius-lg);
    overflow: hidden;
}

.pab-card-header {
    padding: 0.7rem 1.15rem;
    border-bottom: 1px solid var(--pab-border);
}

.pab-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--pab-ink);
}

.pab-card-body {
    padding: 1rem 1.15rem;
}

.pab-section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--pab-ink);
    margin: 0 0 0.35rem;
}

.pab-divider {
    border: 0;
    border-top: 1px solid var(--pab-border);
    margin: 1rem 0;
    opacity: 1;
}

/* Settings option cards — subtle grouping for toggle+help pairs (e.g. Caller ID) */
.pab-settings-option-card {
    padding: 0.65rem 0.85rem;
    background: var(--pab-panel-strong);
    border: 1px solid var(--pab-border);
    border-radius: var(--pab-radius-md);
    height: 100%;
}

/* Field row layout — flex-based, fields sized to purpose not grid fractions */
.pab-field-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.pab-field-grow {
    flex: 1 1 0;
    min-width: 0;
}

.pab-field-fixed {
    flex: 0 0 auto;
    min-width: 0;
}

.pab-field-auto {
    flex: 0 1 auto;
    min-width: 0;
}

/* Inline switch — vertically aligns the toggle with sibling inputs */
.pab-switch-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    min-height: calc(0.85rem * 1.4 + 0.6rem); /* match input height */
}

.pab-switch-inline .form-check-input {
    margin-top: 0;
}

.pab-switch-inline .form-check-label {
    font-size: 0.85rem;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Form controls */
.pab-form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--pab-ink);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pab-edit-container .pab-form-control,
.pab-edit-container .pab-form-select,
.pab-holidays-container .pab-form-control,
.pab-holidays-container .pab-form-select,
.pab-form-control,
.pab-form-select {
    background-color: var(--pab-panel-strong);
    border: 1px solid var(--pab-border);
    color: var(--pab-ink);
    border-radius: var(--pab-radius-md);
    font-size: 0.85rem !important;
    padding: 0.3rem 0.6rem !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}

.pab-edit-container .pab-form-control:focus,
.pab-edit-container .pab-form-select:focus,
.pab-form-control:focus,
.pab-form-select:focus {
    border-color: var(--pab-accent);
    box-shadow: 0 0 0 0.18rem var(--pab-accent-light);
    background-color: var(--pab-panel-strong);
    color: var(--pab-ink);
}

.pab-form-control::placeholder {
    color: var(--pab-muted);
    opacity: 0.85;
}

/* Invalid-field highlight (cleared on first input). */
.pab-form-control.pab-field-invalid,
.pab-form-select.pab-field-invalid {
    border-color: var(--pab-red);
    box-shadow: 0 0 0 0.18rem rgba(239, 68, 68, 0.18);
}

.pab-readonly {
    background-color: var(--pab-panel) !important;
    color: var(--pab-muted) !important;
    opacity: 1;
}

.pab-help-text {
    font-size: 0.8rem;
    color: var(--pab-muted);
    margin-top: 0.15rem;
}

/* Switches */
.pab-switch .form-check-input {
    width: 2.2em;
    height: 1.2em;
    cursor: pointer;
}

.pab-switch .form-check-input:checked {
    background-color: var(--pab-accent);
    border-color: var(--pab-accent);
}

.pab-switch .form-check-input:focus {
    border-color: var(--pab-accent);
    box-shadow: 0 0 0 0.18rem var(--pab-accent-light);
}

/* Buttons — primary/secondary must not be danger-styled (gold standard) */
.pab-btn-primary {
    background-color: var(--pab-accent);
    border-color: var(--pab-accent);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.3rem 0.85rem;
}

.pab-btn-primary:hover {
    background-color: var(--pab-accent-strong);
    border-color: var(--pab-accent-strong);
    color: #ffffff;
}

.pab-btn-secondary {
    background-color: transparent;
    border-color: var(--pab-border);
    color: var(--pab-ink);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.3rem 0.85rem;
}

.pab-btn-secondary:hover {
    background-color: var(--pab-accent-light);
    border-color: var(--pab-accent);
    color: var(--pab-ink);
}

.pab-btn-danger {
    background-color: transparent;
    border-color: var(--pab-red);
    color: var(--pab-red);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.3rem 0.85rem;
}

.pab-btn-danger:hover {
    background-color: var(--pab-red);
    border-color: var(--pab-red);
    color: #ffffff;
}

.pab-btn-icon {
    font-weight: 700;
    margin-right: 0.2rem;
}

.pab-link {
    color: var(--pab-accent);
    text-decoration: none;
    font-weight: 600;
}

.pab-link:hover {
    color: var(--pab-accent-strong);
    text-decoration: underline;
}

/* Badges */
.pab-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: capitalize;
    vertical-align: middle;
}

/* The beta badge reuses the shared .portal-premium-beta-badge defined at the top
   of this file (identical gradient across Voicemail / Ring Groups / etc.). */

.pab-badge-enabled {
    background: rgba(34, 197, 94, 0.16);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.32);
}

[data-theme-mode="dark"] .pab-badge-enabled {
    color: #4ade80;
}

.pab-badge-disabled {
    background: rgba(107, 114, 128, 0.18);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.32);
}

[data-theme-mode="dark"] .pab-badge-disabled {
    color: #9ca3af;
}

.pab-badge-connected,
.pab-badge-active {
    background: rgba(34, 197, 94, 0.16);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.32);
}

[data-theme-mode="dark"] .pab-badge-connected,
[data-theme-mode="dark"] .pab-badge-active {
    color: #4ade80;
}

.pab-badge-neutral {
    background: rgba(107, 114, 128, 0.18);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.32);
}

[data-theme-mode="dark"] .pab-badge-neutral {
    color: #d1d5db;
    background: rgba(156, 163, 175, 0.16);
}

.pab-badge-danger {
    background: rgba(239, 68, 68, 0.16);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.32);
}

/* Tables */
.pab-table {
    color: var(--pab-ink);
    margin-bottom: 0;
    font-size: 0.9rem;
}

.pab-table thead th {
    color: var(--pab-muted);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--pab-border);
    padding: 0.7rem 0.85rem;
}

.pab-table tbody td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--pab-border);
    vertical-align: middle;
}

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

.pab-table tbody tr:hover {
    background-color: var(--pab-accent-light);
}

.pab-col-name,
.pab-col-status,
.pab-col-dest,
.pab-col-transport,
.pab-col-updated {
    white-space: nowrap;
}

/* Empty / error states — neutral on-brand panel, no decorative gradient.
   (rb-empty-state is Recording Box's pink-gradient branded state; AI Bridge
   uses its own neutral surface per PRODUCT.md "no neon/purple/blue gradients".) */
.pab-empty-state,
.pab-error-state {
    text-align: center;
    padding: 2.5rem 1.25rem;
    color: var(--pab-muted);
    background: var(--pab-panel);
    border: 1px solid var(--pab-border);
    border-radius: var(--pab-radius-lg);
    margin: 0.5rem auto;
    max-width: 34rem;
}

.pab-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.pab-empty-title {
    color: var(--pab-ink);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.pab-empty-text {
    color: var(--pab-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.pab-error-icon {
    color: var(--pab-red);
}

/* Inline feedback */
.pab-inline-feedback {
    padding: 0.7rem 1rem;
    border-radius: var(--pab-radius-md);
    font-size: 0.88rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.pab-inline-error {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.32);
    color: #dc2626;
}

[data-theme-mode="dark"] .pab-inline-error {
    color: #fca5a5;
}

.pab-inline-success {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.32);
    color: #16a34a;
}

[data-theme-mode="dark"] .pab-inline-success {
    color: #4ade80;
}

.pab-loading {
    padding: 0.7rem 1rem;
    color: var(--pab-muted);
    font-size: 0.88rem;
}

.pab-copy-feedback {
    font-size: 0.875rem;
    color: #16a34a;
    margin-top: 0.35rem;
}

[data-theme-mode="dark"] .pab-copy-feedback {
    color: #4ade80;
}

/* Tabs */
.pab-tabs {
    border-bottom: 1px solid var(--pab-border);
}

.pab-tab-link {
    color: var(--pab-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
}

.pab-tab-link:hover {
    color: var(--pab-ink);
}

.pab-tab-link.active {
    color: var(--pab-accent);
    border-bottom-color: var(--pab-accent);
    background: transparent;
}

/* Modals (rb-modern-modal reuse) */
.pab-modal-content {
    background: var(--pab-panel);
    border: 1px solid var(--pab-border);
    border-radius: var(--pab-radius-lg);
    color: var(--pab-ink);
}

.pab-modal-header {
    border-bottom: 1px solid var(--pab-border);
    padding: 1rem 1.25rem;
}

.pab-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pab-ink);
}

.pab-modal-body {
    padding: 1.25rem;
    color: var(--pab-ink);
}

.pab-modal-footer {
    border-top: 1px solid var(--pab-border);
    padding: 0.85rem 1.25rem;
}



/* Detail grid + timeline */
.pab-detail-grid {
    font-size: 0.88rem;
    margin-bottom: 0;
}

.pab-detail-label {
    color: var(--pab-muted);
    font-weight: 600;
    font-size: 0.875rem;
}

.pab-detail-value {
    color: var(--pab-ink);
}

.pab-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.pab-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--pab-border);
}

.pab-timeline-item {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.6rem;
    font-size: 0.875rem;
    color: var(--pab-ink);
}

.pab-timeline-item::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 0.65rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pab-muted);
    border: 2px solid var(--pab-panel);
}

.pab-timeline-bridge::before {
    background: var(--pab-green);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.pab-timeline-time {
    display: block;
    color: var(--pab-muted);
    font-size: 0.875rem;
    margin-bottom: 0.1rem;
}

.pab-timeline-type {
    font-weight: 700;
    color: var(--pab-ink);
    text-transform: capitalize;
}

.pab-timeline-msg {
    color: var(--pab-muted);
    display: block;
    font-size: 0.875rem;
}

/* Stats grid */
.pab-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
}

.pab-stat-card {
    background: var(--pab-panel-strong);
    border: 1px solid var(--pab-border);
    border-radius: var(--pab-radius-md);
    padding: 0.85rem 1rem;
}

.pab-stat-label {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pab-muted);
    margin-bottom: 0.25rem;
}

.pab-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pab-ink);
}

/* Filter bar */
.pab-filter-bar {
    background: var(--pab-panel);
    border: 1px solid var(--pab-border);
    border-radius: var(--pab-radius-md);
    padding: 0.85rem;
}

/* Tooltip icon + floating tooltip */
.pab-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--pab-accent-light);
    color: var(--pab-accent);
    font-size: 0.875rem;
    font-weight: 800;
    cursor: help;
    user-select: none;
    border: 1px solid var(--pab-border);
}

.pab-tooltip-icon:hover,
.pab-tooltip-icon:focus {
    background: var(--pab-accent);
    color: #ffffff;
    outline: 0;
}

.pab-tooltip-floating {
    position: fixed;
    z-index: 1080;
    max-width: 320px;
    padding: 0.6rem 0.8rem;
    background: var(--pab-panel-strong, #161616);
    color: var(--pab-ink, #f6f7fb);
    border: 1px solid var(--pab-border, rgba(255, 255, 255, 0.10));
    border-radius: var(--pab-radius-md);
    font-size: 0.875rem;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
}

.pab-tooltip-floating.pab-tooltip-visible {
    opacity: 1;
    visibility: visible;
}

/* Beta / promotional callout — mirrors the *-pricing-callout pattern (accent-bordered
   info box with icon + heading + body). Uses the violet PAB accent. */
.pab-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: var(--pab-radius-lg);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--pab-muted);
    background: var(--pab-accent-light);
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-left: 3px solid var(--pab-accent);
}

.pab-callout strong {
    color: var(--pab-ink);
}

.pab-callout a {
    color: var(--pab-accent);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.pab-callout a:hover,
.pab-callout a:focus-visible {
    color: var(--pab-accent-strong);
}

.pab-callout-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--pab-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--pab-accent);
    background: rgba(139, 92, 246, 0.16);
}

.pab-callout-body {
    flex: 1;
    min-width: 0;
}

.pab-callout-title {
    color: var(--pab-ink);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pab-callout-text {
    color: var(--pab-muted);
    font-size: 0.875rem;
    margin: 0;
}

.pab-callout--pricing {
    margin-top: 0.15rem;
}

/* "Not working? Contact support" card — below the table. */
.pab-support-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1.1rem 1.25rem;
    background: var(--pab-panel);
    border: 1px solid var(--pab-border);
    border-radius: var(--pab-radius-lg);
}

.pab-support-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--pab-radius-md);
    background: rgba(239, 68, 68, 0.12);
    color: var(--pab-red);
    flex-shrink: 0;
}

.pab-support-card-body {
    flex: 1;
    min-width: 0;
}

.pab-support-card-title {
    color: var(--pab-ink);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.pab-support-card-text {
    color: var(--pab-muted);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

.pab-support-card-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pab-support-card-btn {
    flex-shrink: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 575.98px) {
    .pab-support-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .pab-support-card-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .pab-support-card-btn {
        flex: 1;
        justify-content: center;
    }
}

/* Setup guide ("How to") — compact hero link + modal. */
.pab-hero-actions {
    flex-wrap: wrap;
}

.pab-quickstart-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 0;
    padding: 0.4rem 0.2rem;
    color: var(--pab-muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.pab-quickstart-link:hover,
.pab-quickstart-link:focus-visible {
    color: var(--pab-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    outline: 0;
}

.pab-quickstart-link svg {
    flex-shrink: 0;
}

.pab-quickstart-modal-body {
    padding: 1.25rem;
}

.pab-quickstart-modal-intro {
    font-size: 0.9rem;
}

.pab-quickstart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.pab-quickstart-item {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--pab-panel-strong);
    border: 1px solid var(--pab-border);
    border-radius: var(--pab-radius-md);
}

.pab-quickstart-item-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--pab-accent-light);
    color: var(--pab-accent);
    font-size: 0.875rem;
    font-weight: 800;
    flex-shrink: 0;
}

.pab-whybridge-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--pab-accent-light);
    color: var(--pab-accent);
    flex-shrink: 0;
}

.pab-quickstart-item-copy {
    min-width: 0;
}

.pab-quickstart-item-title {
    color: var(--pab-ink);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.pab-quickstart-item-detail {
    color: var(--pab-muted);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

.pab-quickstart-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--pab-accent-light);
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: var(--pab-radius-md);
    color: var(--pab-muted);
    font-size: 0.875rem;
}

.pab-quickstart-tip svg {
    color: var(--pab-accent);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

@media (max-width: 767.98px) {
    .pab-quickstart-grid {
        grid-template-columns: 1fr;
    }
    .pab-quickstart-trigger-action .pab-quickstart-action-label {
        display: none;
    }
}

/* Responsive: tighten table columns + hero on small screens */
@media (max-width: 575.98px) {
    .pab-page-title {
        font-size: 1.2rem;
    }
    .pab-card-body,
    .pab-hero {
        padding: 0.85rem;
    }
    .pab-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* DID Pricing */
.did-pricing-page-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.did-pricing-hero .number-manager-kicker i {
    color: #fca5a5;
}

.did-pricing-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0 1.5rem;
}

.did-pricing-inline-message {
    border-radius: 0.6rem;
    font-size: 0.9rem;
    min-height: 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
}

.did-pricing-inline-message.is-error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.42);
    color: #fca5a5;
}

.did-pricing-inline-message.is-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.did-pricing-billing-sync {
    align-items: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 0.85rem;
    color: #e4e4e7;
    display: flex;
    flex-direction: row;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
}

.did-pricing-billing-sync-icon {
    align-items: center;
    background: rgba(59, 130, 246, 0.18);
    border-radius: 999px;
    color: #60a5fa;
    display: flex;
    flex-shrink: 0;
    font-size: 1.25rem;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.did-pricing-billing-sync-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.4;
    min-width: 0;
}

.did-pricing-billing-sync-body strong {
    color: #f6f7fb;
    font-size: 0.92rem;
    font-weight: 700;
}

.did-pricing-billing-sync-text {
    color: #b3b3b3;
    font-size: 0.82rem;
}

[data-theme-mode="light"] .did-pricing-billing-sync {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
    border-color: rgba(59, 130, 246, 0.2);
    color: #27272a;
}

[data-theme-mode="light"] .did-pricing-billing-sync-icon {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

[data-theme-mode="light"] .did-pricing-billing-sync-body strong {
    color: #18181b;
}

[data-theme-mode="light"] .did-pricing-billing-sync-text {
    color: #52525b;
}

@media (max-width: 575.98px) {
    .did-pricing-billing-sync {
        align-items: flex-start;
        flex-direction: column;
    }
}

.did-pricing-card {
    background-color: rgba(24, 24, 27, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0.85rem;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.did-pricing-card-head {
    margin-bottom: 0.85rem;
}

.did-pricing-card-title {
    align-items: center;
    color: #f6f7fb;
    display: flex;
    font-size: 1.05rem;
    font-weight: 700;
    gap: 0.45rem;
    margin: 0 0 0.25rem;
}

.did-pricing-card-title i {
    color: #a78bfa;
}

.did-pricing-card-sub {
    color: #b3b3b3;
    font-size: 0.85rem;
    margin: 0;
}

.did-pricing-table {
    border-color: rgba(161, 161, 170, 0.18);
    margin-bottom: 0;
}

.did-pricing-table > :not(caption) > * > * {
    background-color: transparent;
    border-color: rgba(161, 161, 170, 0.16);
    color: #e4e4e7;
    font-size: 0.9rem;
    padding: 0.7rem 0.8rem;
    vertical-align: middle;
}

.did-pricing-table thead th {
    background: rgba(139, 92, 246, 0.18);
    color: #ede9fe;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.did-pricing-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.did-pricing-cell-label {
    white-space: normal;
}

.did-pricing-cell-label strong {
    color: #f6f7fb;
    display: inline-block;
    font-weight: 600;
    margin-right: 0.4rem;
}

.did-pricing-country-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #d4d4d8;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    text-transform: uppercase;
}

.did-pricing-cell-fee {
    color: #e4e4e7;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.did-pricing-cell-fee-monthly {
    color: #86efac;
}

.did-pricing-cell-fee-port {
    color: #a5b4fc;
}

.did-pricing-empty-row td {
    color: #b3b3b3;
    font-size: 0.88rem;
    padding: 1.4rem 0.8rem;
    text-align: center;
}

.did-pricing-skeleton-row td {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    padding: 0.85rem 0.8rem;
}

.did-pricing-skeleton-line {
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.25) 25%, rgba(100, 116, 139, 0.45) 37%, rgba(100, 116, 139, 0.25) 63%);
    background-size: 400% 100%;
    border-radius: 0.4rem;
    display: inline-block;
    flex: 0 0 38%;
    height: 0.85rem;
    animation: did-pricing-skeleton 1.4s ease infinite;
}

.did-pricing-skeleton-text {
    color: #b3b3b3;
    font-size: 0.82rem;
}

@keyframes did-pricing-skeleton {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.did-pricing-footnote {
    align-items: flex-start;
    color: #b3b3b3;
    display: flex;
    font-size: 0.8rem;
    gap: 0.4rem;
    line-height: 1.45;
    margin: 0.85rem 0 0;
}

.did-pricing-footnote i {
    color: #a78bfa;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

[data-theme-mode="light"] .did-pricing-card {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

[data-theme-mode="light"] .did-pricing-card-title {
    color: #18181b;
}

[data-theme-mode="light"] .did-pricing-card-sub,
[data-theme-mode="light"] .did-pricing-footnote,
[data-theme-mode="light"] .did-pricing-skeleton-text,
[data-theme-mode="light"] .did-pricing-empty-row td {
    color: #52525b;
}

[data-theme-mode="light"] .did-pricing-table > :not(caption) > * > * {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.1);
    color: #27272a;
}

[data-theme-mode="light"] .did-pricing-table thead th {
    background: rgba(139, 92, 246, 0.12);
    color: #4c1d95;
}

[data-theme-mode="light"] .did-pricing-row:hover {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme-mode="light"] .did-pricing-cell-label strong {
    color: #18181b;
}

[data-theme-mode="light"] .did-pricing-country-badge {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: #52525b;
}

[data-theme-mode="light"] .did-pricing-cell-fee {
    color: #27272a;
}

[data-theme-mode="light"] .did-pricing-cell-fee-monthly {
    color: #15803d;
}

[data-theme-mode="light"] .did-pricing-cell-fee-port {
    color: #4338ca;
}

[data-theme-mode="light"] .did-pricing-inline-message.is-error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
    color: #b91c1c;
}

[data-theme-mode="light"] .did-pricing-inline-message.is-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.35);
    color: #15803d;
}

@media (max-width: 575.98px) {
    .did-pricing-card {
        padding: 0.85rem;
    }
    .did-pricing-table > :not(caption) > * > * {
        font-size: 0.82rem;
        padding: 0.6rem 0.55rem;
    }
    .did-pricing-skeleton-line {
        flex-basis: 60%;
    }
    .did-pricing-refresh-btn,
    .did-pricing-card .btn,
    #did-pricing-refresh-btn {
        min-height: 44px;
    }
}
/* End DID Pricing */


/* Products Active Subscriptions */
.products-subscriptions-shell {
    padding: 1.25rem 0 0;
}

.products-subscriptions-shell,
.products-subscriptions-card,
.products-subscriptions-card .card-body,
.products-subscriptions-table-wrap {
    overflow: visible;
}

.products-subscriptions-hero {
    --products-sub-hero-surface: #ffffff;
    --products-sub-hero-border: rgba(20, 184, 166, 0.18);
    --products-sub-hero-text: #172033;
    --products-sub-hero-muted: #64748b;
    --products-sub-hero-accent: #0f766e;
    --products-sub-hero-pill-bg: rgba(20, 184, 166, 0.1);
    --products-sub-hero-pill-border: rgba(20, 184, 166, 0.2);
    --products-sub-hero-pill-text: #0f766e;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.12), transparent 34%),
        var(--products-sub-hero-surface);
    border: 1px solid var(--products-sub-hero-border);
    border-radius: 0.95rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    color: var(--products-sub-hero-text);
    overflow: hidden;
    padding: 1.15rem 1.25rem;
    position: relative;
}

[data-theme-mode="dark"] .products-subscriptions-hero {
    --products-sub-hero-surface: transparent;
    --products-sub-hero-border: rgba(45, 212, 191, 0.2);
    --products-sub-hero-text: #f4f4f5;
    --products-sub-hero-muted: rgba(255, 255, 255, 0.74);
    --products-sub-hero-accent: rgba(255, 255, 255, 0.68);
    --products-sub-hero-pill-bg: rgba(255, 255, 255, 0.1);
    --products-sub-hero-pill-border: rgba(255, 255, 255, 0.16);
    --products-sub-hero-pill-text: rgba(255, 255, 255, 0.88);
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.18), transparent 34%),
        linear-gradient(135deg, #18181b 0%, #0f0f0f 56%, #13201e 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.products-subscriptions-hero-content {
    position: relative;
    z-index: 1;
}

.products-subscriptions-eyebrow,
.products-subscriptions-section-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.products-subscriptions-eyebrow {
    color: var(--products-sub-hero-accent);
}

.products-subscriptions-section-label {
    color: #0f766e;
}

.products-subscriptions-copy {
    color: var(--products-sub-hero-muted);
    max-width: 760px;
}

.products-subscriptions-account-pill {
    align-items: center;
    background: var(--products-sub-hero-pill-bg);
    border: 1px solid var(--products-sub-hero-pill-border);
    border-radius: 999px;
    color: var(--products-sub-hero-pill-text);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
}

.products-subscriptions-summary-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.95rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

[data-theme-mode="dark"] .products-subscriptions-summary-card {
    background: rgba(24, 24, 27, 0.96);
    border-color: rgba(161, 161, 170, 0.16);
}

.products-subscriptions-summary-icon {
    align-items: center;
    border-radius: 0.75rem;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.35rem;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.products-subscriptions-summary-icon.is-count {
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
}

.products-subscriptions-summary-icon.is-monthly {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.products-subscriptions-summary-icon.is-next {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

[data-theme-mode="dark"] .products-subscriptions-summary-icon.is-count {
    background: rgba(45, 212, 191, 0.14);
    color: #5eead4;
}

[data-theme-mode="dark"] .products-subscriptions-summary-icon.is-monthly {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

[data-theme-mode="dark"] .products-subscriptions-summary-icon.is-next {
    background: rgba(129, 140, 248, 0.16);
    color: #a5b4fc;
}

.products-subscriptions-summary-label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.products-subscriptions-summary-value {
    color: #172033;
    font-variant-numeric: tabular-nums;
}

[data-theme-mode="dark"] .products-subscriptions-summary-value {
    color: #f4f4f5;
}

.products-subscriptions-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.95rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

[data-theme-mode="dark"] .products-subscriptions-card {
    background: rgba(24, 24, 27, 0.96);
    border-color: rgba(161, 161, 170, 0.16);
}

.products-subscriptions-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.products-subscriptions-actions {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.products-subscriptions-print-btn {
    --products-sub-print-bg: rgba(15, 118, 110, 0.08);
    --products-sub-print-border: rgba(15, 118, 110, 0.28);
    --products-sub-print-text: #0f766e;
    --products-sub-print-hover-bg: rgba(15, 118, 110, 0.14);
    --products-sub-print-hover-border: rgba(15, 118, 110, 0.4);
    align-items: center;
    background: var(--products-sub-print-bg);
    border: 1px solid var(--products-sub-print-border);
    border-radius: 0.55rem;
    color: var(--products-sub-print-text);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 650;
    gap: 0.4rem;
    letter-spacing: 0.01em;
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
        color 160ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.products-subscriptions-print-btn i {
    font-size: 0.95rem;
    line-height: 1;
}

.products-subscriptions-print-btn:hover,
.products-subscriptions-print-btn:focus-visible {
    background: var(--products-sub-print-hover-bg);
    border-color: var(--products-sub-print-hover-border);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    color: var(--products-sub-print-text);
}

.products-subscriptions-print-btn:focus-visible {
    outline: 2px solid rgba(15, 118, 110, 0.45);
    outline-offset: 2px;
}

.products-subscriptions-print-btn:disabled,
.products-subscriptions-print-btn.is-printing {
    cursor: not-allowed;
    opacity: 0.72;
    box-shadow: none;
}

[data-theme-mode="dark"] .products-subscriptions-print-btn {
    --products-sub-print-bg: rgba(45, 212, 191, 0.1);
    --products-sub-print-border: rgba(45, 212, 191, 0.28);
    --products-sub-print-text: #5eead4;
    --products-sub-print-hover-bg: rgba(45, 212, 191, 0.16);
    --products-sub-print-hover-border: rgba(45, 212, 191, 0.42);
}

[data-theme-mode="dark"] .products-subscriptions-print-btn:hover,
[data-theme-mode="dark"] .products-subscriptions-print-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.14);
}

[data-theme-mode="dark"] .products-subscriptions-print-btn:focus-visible {
    outline-color: rgba(45, 212, 191, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .products-subscriptions-print-btn {
        transition: none;
    }
}

.products-subscriptions-status {
    align-items: center;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    color: #64748b;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
}

.products-subscriptions-status.is-success {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.24);
    color: #16a34a;
}

.products-subscriptions-status.is-error {
    background: rgba(225, 29, 72, 0.12);
    border-color: rgba(225, 29, 72, 0.24);
    color: #e11d48;
}

.products-subscriptions-status.is-loading {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.24);
    color: #2563eb;
}

.products-subscriptions-inline-alert {
    border-radius: 0.75rem;
    font-size: 0.88rem;
    margin-bottom: 0.85rem;
    padding: 0.75rem 0.85rem;
}

.products-subscriptions-inline-alert-error {
    background: rgba(225, 29, 72, 0.1);
    border: 1px solid rgba(225, 29, 72, 0.2);
    color: #e11d48;
}

.products-subscriptions-table-wrap {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.8rem;
    overflow-x: auto;
}

.products-subscriptions-table {
    min-width: 640px;
}

.products-subscriptions-table th {
    color: #64748b;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.products-subscriptions-plan {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.products-subscriptions-plan span,
.products-subscriptions-service {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
}

.products-subscriptions-service {
    font-variant-numeric: tabular-nums;
}

.products-subscriptions-qty,
.products-subscriptions-money,
.products-subscriptions-billing-day,
.products-subscriptions-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.products-subscriptions-money {
    font-weight: 700;
}

.products-subscriptions-loading,
.products-subscriptions-empty {
    align-items: center;
    color: #64748b;
    display: flex;
    gap: 0.55rem;
    justify-content: center;
    min-height: 7rem;
    padding: 1.25rem;
    text-align: center;
}

.products-subscriptions-empty {
    flex-direction: column;
}

.products-subscriptions-empty i {
    color: #0f766e;
    font-size: 1.6rem;
}

.products-subscriptions-empty strong {
    color: #334155;
}

[data-theme-mode="dark"] .products-subscriptions-empty strong {
    color: #f4f4f5;
}

@media (max-width: 767.98px) {
    .products-subscriptions-hero {
        padding: 1rem;
    }

    .products-subscriptions-account-pill,
    .products-subscriptions-status,
    .products-subscriptions-toolbar {
        justify-content: center;
        width: 100%;
    }

    .products-subscriptions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .products-subscriptions-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .products-subscriptions-print-btn,
    .products-subscriptions-refresh,
    #products-subscriptions-refresh,
    #products-subscriptions-print {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }
}
/* End Products Active Subscriptions */

/* ==========================================================================
   Products Dashboard v2 (products/index2.php) — rail + workspace app shell
   Scoped to .cp2-dashboard, every class prefixed cp2-.
   ========================================================================== */
.cp2-dashboard {
    --cp2-surface: #ffffff;
    --cp2-surface-raised: #f8f9fa;
    --cp2-surface-nest: #f1f3f5;
    --cp2-border: rgba(0, 0, 0, 0.12);
    --cp2-border-strong: rgba(0, 0, 0, 0.2);
    --cp2-text: #172033;
    --cp2-muted: #5b6472;
    --cp2-accent: #dc3545;
    color: var(--cp2-text);
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0 0.5rem;
}

.cp2-dashboard.cp2-dashboard-fit {
    overflow: hidden;
}

.cp2-dashboard.cp2-dashboard-fit.cp2-dashboard-fit--scroll {
    overflow: visible;
}

.cp2-dashboard.cp2-dashboard-fit.cp2-dashboard-fit--scroll .cp2-dashboard-fit-shell {
    height: auto !important;
    overflow: visible;
}

.cp2-dashboard.cp2-dashboard-fit.cp2-dashboard-fit--scroll .cp2-dashboard-fit-content {
    transform: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

.cp2-dashboard-fit-shell {
    overflow: hidden;
    width: 100%;
}

.cp2-dashboard-fit-content {
    transform-origin: top left;
    width: 100%;
    will-change: transform;
}

@media (max-width: 991.98px) {
    .cp2-dashboard.cp2-dashboard-fit {
        overflow: visible;
    }

    .cp2-dashboard-fit-shell {
        height: auto !important;
        overflow: visible;
    }

    .cp2-dashboard-fit-content {
        transform: none !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
}

[data-theme-mode="dark"] .cp2-dashboard {
    --cp2-surface: #161616;
    --cp2-surface-raised: #1c1c1c;
    --cp2-surface-nest: #101010;
    --cp2-border: rgba(255, 255, 255, 0.09);
    --cp2-border-strong: rgba(255, 255, 255, 0.16);
    --cp2-text: #f6f7fb;
    --cp2-muted: #b3b3b3;
}

/* --- Shell: rail + workspace --------------------------------------------- */
.cp2-shell {
    display: grid;
    grid-template-columns: minmax(14.5rem, 16rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.cp2-rail {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: sticky;
    top: 0.5rem;
}

/* --- Rail: identity chip --------------------------------------------------- */
.cp2-rail-account {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cp2-border);
    border-radius: 10px;
    background: var(--cp2-surface);
}

.cp2-rail-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
    background: var(--cp2-accent);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.cp2-rail-account strong,
.cp2-rail-account small {
    display: block;
    line-height: 1.25;
}

.cp2-rail-account-meta {
    min-width: 0;
    flex: 1 1 auto;
}

.cp2-rail-account strong {
    overflow: hidden;
    color: var(--cp2-text);
    font-size: 0.8125rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp2-rail-account small,
.cp2-rail-account-code {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--cp2-muted);
    font-size: 0.7rem;
}

.cp2-account-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--cp2-muted);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease;
}

.cp2-account-copy-btn:hover,
.cp2-account-copy-btn:focus-visible {
    color: var(--cp2-text);
    background: var(--cp2-surface-nest);
    outline: none;
}

.cp2-account-copy-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.28);
}

.cp2-account-copy-btn.is-copied {
    color: #16a34a;
}

[data-theme-mode="dark"] .cp2-account-copy-btn.is-copied {
    color: #4ade80;
}

/* --- Rail: balance card ----------------------------------------------------- */
.cp2-rail-balance {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--cp2-border);
    border-radius: 10px;
    background: var(--cp2-surface);
}

.cp2-rail-balance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.cp2-rail-balance-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--cp2-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.cp2-live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #15803d;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .cp2-live {
    color: #4ade80;
}

.cp2-live-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    animation: cp2-live-pulse 2.4s ease-in-out infinite;
}

@keyframes cp2-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.cp2-rail-balance-amount {
    min-height: 1.6rem;
    margin-bottom: 0.1rem;
    color: var(--cp2-text);
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.cp2-rail-balance-amount.is-negative {
    color: #dc3545;
}

[data-theme-mode="dark"] .cp2-rail-balance-amount.is-negative {
    color: #f87171;
}

.cp2-balance-neg-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    background: #dc3545;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: 0.2rem;
}

[data-theme-mode="dark"] .cp2-balance-neg-mark {
    background: #f87171;
    color: #101010;
}

.cp2-rail-balance-updated {
    margin-bottom: 0.4rem;
    color: var(--cp2-muted);
    font-size: 0.6875rem;
}

.cp2-recharge-btn {
    width: 100%;
    min-height: 32px;
    justify-content: center;
    font-size: 0.8125rem;
}

/* --- Rail: service health list ---------------------------------------------- */
.cp2-rail-health {
    padding: 0.5rem 0.75rem 0.2rem;
    border: 1px solid var(--cp2-border);
    border-radius: 10px;
    background: var(--cp2-surface);
}

.cp2-rail-health-title {
    margin: 0 0 0.35rem;
    color: var(--cp2-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cp2-health-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp2-health-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0;
    border-bottom: 1px solid var(--cp2-border);
}

.cp2-health-row:last-child {
    border-bottom: 0;
}

.cp2-health-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.85rem;
}

.cp2-health-icon.is-sip { background: #2962ff; }
.cp2-health-icon.is-hybrid { background: #14b8a6; }
.cp2-health-icon.is-pbx { background: #dc3545; }
.cp2-health-icon.is-num { background: #7c3aed; }
.cp2-health-icon.is-sim { background: #0d9488; }
.cp2-health-icon.is-nbn { background: #16a34a; }

.cp2-health-copy {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    min-width: 0;
}

.cp2-health-label {
    overflow: hidden;
    color: var(--cp2-muted);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp2-health-copy strong {
    overflow: hidden;
    color: var(--cp2-text);
    font-size: 0.78125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp2-health-copy small {
    overflow: hidden;
    color: var(--cp2-muted);
    font-size: 0.65rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Skeleton loaders ----------------------------------------------------- */
.cp2-skeleton {
    display: inline-block;
    width: 3.5rem;
    height: 1.1rem;
    overflow: hidden;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.22), rgba(100, 116, 139, 0.38), rgba(100, 116, 139, 0.22));
    background-size: 200% 100%;
    color: transparent;
    vertical-align: middle;
    animation: cp2-skeleton-sweep 1.2s linear infinite;
}

.cp2-skeleton-lg {
    width: 7rem;
    height: 1.9rem;
    border-radius: 6px;
}

.cp2-skeleton-sm {
    width: 2.75rem;
    height: 0.85rem;
}

@keyframes cp2-skeleton-sweep {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* --- Main workspace --------------------------------------------------------- */
.cp2-main-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cp2-main-head-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 1 auto;
    max-width: 32rem;
    min-width: 0;
    padding-top: 0.1rem;
}

.cp2-main-title {
    margin: 0 0 0.15rem;
    color: var(--cp2-text);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-wrap: balance;
}

.cp2-main-lead {
    margin: 0;
    color: var(--cp2-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
    max-width: 42ch;
}

/* --- Promo card: wider beside welcome so it stays short ---------------------- */
.cp2-promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "top cta"
        "text text";
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.2rem;
    flex: 0 1 34rem;
    margin-left: auto;
    min-width: 22rem;
    max-width: 38rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--cp2-border);
    border-radius: 10px;
    background: var(--cp2-surface-nest);
}

.cp2-promo-top {
    grid-area: top;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.cp2-promo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 6px;
    background: var(--cp2-accent);
    color: #ffffff;
    font-size: 0.75rem;
}

.cp2-promo-title {
    overflow: hidden;
    color: var(--cp2-text);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp2-promo-text {
    grid-area: text;
    margin: 0;
    color: var(--cp2-muted);
    font-size: 0.7rem;
    line-height: 1.3;
}

.cp2-promo-text strong {
    color: var(--cp2-text);
}

.cp2-promo-cta {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    justify-self: end;
    min-height: 24px;
    padding: 0 0.55rem;
    border: 1px solid var(--cp2-accent);
    border-radius: 999px;
    color: var(--cp2-accent);
    font-size: 0.625rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 160ms ease, color 160ms ease;
}

.cp2-promo-cta:hover,
.cp2-promo-cta:focus-visible {
    background: var(--cp2-accent);
    color: #ffffff;
    outline: none;
}

.cp2-promo-cta:focus-visible {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3);
}

[data-theme-mode="dark"] .cp2-promo-cta {
    border-color: rgba(220, 53, 69, 0.55);
    color: #f28b94;
}

[data-theme-mode="dark"] .cp2-promo-cta:hover,
[data-theme-mode="dark"] .cp2-promo-cta:focus-visible {
    background: var(--cp2-accent);
    color: #ffffff;
}

.cp2-promo-cta i {
    font-size: 0.8125rem;
}

/* --- Filter row: category chips + search share one line ------------------ */
.cp2-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.55rem;
}

.cp2-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    width: min(100%, 14rem);
    min-height: 32px;
    padding: 0 0.6rem;
    border: 1px solid var(--cp2-border);
    border-radius: 6px;
    background: var(--cp2-surface);
    color: var(--cp2-muted);
    cursor: text;
}

.cp2-search:focus-within {
    border-color: rgba(220, 53, 69, 0.55);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.18);
}

.cp2-search > i {
    font-size: 0.875rem;
}

.cp2-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cp2-text);
    font-size: 0.8125rem;
}

.cp2-search input::placeholder {
    color: var(--cp2-muted);
    opacity: 1;
}

.cp2-search kbd {
    padding: 0.08rem 0.35rem;
    border: 1px solid var(--cp2-border-strong);
    border-radius: 4px;
    background: var(--cp2-surface-nest);
    color: var(--cp2-muted);
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 700;
    box-shadow: none;
}

/* --- Category filter chips --------------------------------------------------- */
.cp2-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.cp2-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 28px;
    padding: 0 0.65rem;
    border: 1px solid var(--cp2-border);
    border-radius: 999px;
    background: var(--cp2-surface);
    color: var(--cp2-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.cp2-chip:hover {
    border-color: var(--cp2-border-strong);
    color: var(--cp2-text);
}

.cp2-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3);
}

.cp2-chip > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--cp2-surface-nest);
    color: var(--cp2-muted);
    font-size: 0.65rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cp2-chip.is-active {
    border-color: var(--cp2-accent);
    background: var(--cp2-accent);
    color: #ffffff;
}

.cp2-chip.is-active > span {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* --- Bento product grid ------------------------------------------------------ */
.cp2-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 0.55rem;
}

.cp2-tile {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--cp2-border);
    border-radius: 10px;
    background: var(--cp2-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.cp2-tile:hover,
.cp2-tile:focus-visible {
    border-color: var(--cp2-border-strong);
    background: var(--cp2-surface-raised);
    color: inherit;
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

[data-theme-mode="dark"] .cp2-tile:hover,
[data-theme-mode="dark"] .cp2-tile:focus-visible {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.cp2-tile:focus-visible {
    border-color: rgba(220, 53, 69, 0.55);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.cp2-tile--feature {
    grid-column: span 2;
}

.cp2-tile[hidden] {
    display: none;
}

.cp2-tile-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.cp2-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: #ffffff;
    font-size: 1rem;
}

.cp2-tile--feature .cp2-tile-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9px;
    font-size: 1.15rem;
}

.cp2-tile-icon.is-sip { background: #2962ff; }
.cp2-tile-icon.is-hybrid { background: #14b8a6; }
.cp2-tile-icon.is-number-manager { background: #7c3aed; }
.cp2-tile-icon.is-pbx { background: #dc3545; }
.cp2-tile-icon.is-sms { background: #0d9488; }
.cp2-tile-icon.is-ai { background: #db2777; }
.cp2-tile-icon.is-fax { background: #ea580c; }
.cp2-tile-icon.is-announcement { background: #a16207; }
.cp2-tile-icon.is-recording-box { background: #e11d48; }
.cp2-tile-icon.is-voicemail { background: #4338ca; }
.cp2-tile-icon.is-ring-groups { background: #6d28d9; }
.cp2-tile-icon.is-queues { background: #3f6212; }
.cp2-tile-icon.is-ivr { background: #0e7490; }
.cp2-tile-icon.is-ai-bridge { background: #a21caf; }
.cp2-tile-icon.is-time-conditions { background: #15803d; }

.cp2-tile-live {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.02rem;
    flex-shrink: 0;
}

.cp2-tile-live-value {
    color: var(--cp2-text);
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.cp2-tile-live-label {
    color: var(--cp2-muted);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cp2-tile-title {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.15rem;
    color: var(--cp2-text);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.cp2-tile--feature .cp2-tile-title {
    font-size: 1rem;
}

.cp2-tile-desc {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 auto;
    color: var(--cp2-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cp2-tile--feature .cp2-tile-desc {
    -webkit-line-clamp: 2;
    max-width: 46ch;
}

.cp2-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
    color: var(--cp2-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.cp2-tile:hover .cp2-tile-cta,
.cp2-tile:focus-visible .cp2-tile-cta {
    color: var(--cp2-accent);
}

[data-theme-mode="dark"] .cp2-tile:hover .cp2-tile-cta,
[data-theme-mode="dark"] .cp2-tile:focus-visible .cp2-tile-cta {
    color: #f28b94;
}

.cp2-tile-cta i {
    font-size: 0.875rem;
    transition: transform 160ms ease;
}

.cp2-tile:hover .cp2-tile-cta i,
.cp2-tile:focus-visible .cp2-tile-cta i {
    transform: translateX(3px);
}

.cp2-beta {
    display: inline-flex;
    align-items: center;
    min-height: 1.1rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    color: #6d28d9;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

[data-theme-mode="dark"] .cp2-beta {
    background: rgba(139, 92, 246, 0.22);
    color: #c4b5fd;
}

/* --- Filter empty state --------------------------------------------------- */
.cp2-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 11rem;
    margin-top: 1rem;
    border: 1px dashed var(--cp2-border-strong);
    border-radius: 12px;
    color: var(--cp2-muted);
    text-align: center;
    padding: 1.5rem;
}

.cp2-empty[hidden] {
    display: none;
}

.cp2-empty i {
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
}

.cp2-empty strong {
    margin-bottom: 0.15rem;
    color: var(--cp2-text);
    font-size: 0.875rem;
}

.cp2-empty span {
    font-size: 0.8125rem;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1199.98px) {
    .cp2-bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cp2-tile--feature {
        grid-column: span 3;
    }
}

@media (max-width: 991.98px) {
    .cp2-shell {
        grid-template-columns: 1fr;
    }

    .cp2-main-head {
        flex-direction: column;
    }

    .cp2-promo {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
    }

    .cp2-rail {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cp2-rail-account {
        flex: 1 1 100%;
    }

    .cp2-rail-balance,
    .cp2-rail-health {
        flex: 1 1 16rem;
    }

    .cp2-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cp2-tile--feature {
        grid-column: span 2;
    }
}

@media (max-width: 767.98px) {
    .cp2-dashboard {
        padding-top: 0.85rem;
    }

    .cp2-main-title {
        font-size: 1.35rem;
    }

    .cp2-rail-balance,
    .cp2-rail-health {
        flex: 1 1 100%;
    }

    .cp2-search {
        width: 100%;
    }

    .cp2-search kbd {
        display: none;
    }

    .cp2-bento {
        grid-template-columns: 1fr;
    }

    .cp2-tile--feature {
        grid-column: span 1;
    }

    .cp2-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .cp2-filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .cp2-chip {
        flex-shrink: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp2-skeleton,
    .cp2-live-dot {
        animation: none;
    }

    .cp2-tile,
    .cp2-tile-cta i,
    .cp2-chip {
        transition: none;
    }

    .cp2-tile:hover,
    .cp2-tile:focus-visible {
        transform: none;
    }
}
/* End Products Dashboard v2 */

/* --- Hybrid SIP Trunks Promo Banner --- */
.cp2-hybrid-promo {
    margin-top: 0.55rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(13, 148, 136, 0.02) 100%), var(--cp2-surface);
    border: 1px solid rgba(20, 184, 166, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}

[data-theme-mode="dark"] .cp2-hybrid-promo {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(16, 16, 16, 0.6) 100%), var(--cp2-surface);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cp2-hybrid-promo:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 12px 30px rgba(20, 184, 166, 0.15);
}

[data-theme-mode="dark"] .cp2-hybrid-promo:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 25px rgba(20, 184, 166, 0.15);
}

.cp2-hybrid-promo-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.08) 0%, transparent 65%);
    animation: cp2-promo-pulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes cp2-promo-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.cp2-hybrid-promo-left {
    position: relative;
    z-index: 2;
}

.cp2-hybrid-promo-right {
    position: relative;
    z-index: 2;
}

.cp2-hybrid-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.5rem;
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.3);
    color: #0d9488;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}

[data-theme-mode="dark"] .cp2-hybrid-promo-eyebrow {
    color: #5eead4;
}

.cp2-hybrid-promo-title {
    font-size: 1.2rem;
    font-weight: 850;
    letter-spacing: -0.04em;
    color: var(--cp2-text);
    margin: 0 0 0.15rem 0;
    line-height: 1.1;
}

.cp2-hybrid-promo-tagline {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0d9488;
    margin-bottom: 0.25rem;
}

[data-theme-mode="dark"] .cp2-hybrid-promo-tagline {
    color: #5eead4;
}

.cp2-hybrid-promo-desc {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--cp2-muted);
    margin-bottom: 0;
}

.cp2-hybrid-promo-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.45rem;
}

.cp2-hybrid-promo-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cp2-text);
}

.cp2-hybrid-promo-price strong {
    font-weight: 800;
    font-size: 0.95rem;
}

.cp2-hybrid-promo-price span {
    font-size: 0.75rem;
    color: var(--cp2-muted);
    font-weight: 500;
}

.cp2-hybrid-promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.78125rem;
    text-decoration: none;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    border: none;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(20, 184, 166, 0.25);
}

.cp2-hybrid-promo-btn:hover {
    background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
    box-shadow: 0 5px 14px rgba(20, 184, 166, 0.4);
    transform: translateY(-1px);
}

.cp2-hybrid-promo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
}

.cp2-hybrid-promo-card {
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

[data-theme-mode="dark"] .cp2-hybrid-promo-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.cp2-hybrid-promo-card:hover {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(20, 184, 166, 0.25);
    transform: translateX(3px);
}

[data-theme-mode="dark"] .cp2-hybrid-promo-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(20, 184, 166, 0.35);
}

.cp2-hybrid-promo-card-icon {
    font-size: 1.25rem;
    color: #0d9488;
    background: rgba(20, 184, 166, 0.1);
    border-radius: 8px;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-theme-mode="dark"] .cp2-hybrid-promo-card-icon {
    color: #5eead4;
    background: rgba(20, 184, 166, 0.15);
}

.cp2-hybrid-promo-card-content {
    min-width: 0;
}

.cp2-hybrid-promo-card-title {
    font-weight: 700;
    font-size: 0.875rem;
    margin: 0 0 0.15rem 0;
    color: var(--cp2-text);
}

.cp2-hybrid-promo-card-desc {
    font-size: 0.78rem;
    color: var(--cp2-muted);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 1199.98px) {
    .cp2-hybrid-promo {
        gap: 0.85rem;
    }
}

@media (max-width: 991.98px) {
    .cp2-hybrid-promo {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .cp2-hybrid-promo {
        padding: 0.65rem 0.75rem;
    }

    .cp2-hybrid-promo-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Hybrid SIP Trunks (staff preview) ------------------------------------ */
.crazytel-sidebar-text-badge,
.crazytel-sidebar-hybrid-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.45rem;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    flex-shrink: 0;
}

.crazytel-sidebar-text-badge {
    background: rgba(148, 163, 184, 0.18);
    color: #94a3b8;
}

.crazytel-sidebar-hybrid-badge {
    background: rgba(20, 184, 166, 0.16);
    color: #0d9488;
}

[data-theme-mode="dark"] .crazytel-sidebar-hybrid-badge {
    background: rgba(20, 184, 166, 0.22);
    color: #5eead4;
}

.portal-premium-hybrid-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(20, 184, 166, 0.22);
    flex-shrink: 0;
}

[data-theme-mode="dark"] .portal-premium-hybrid-badge {
    background: linear-gradient(135deg, #0f766e, #0d9488);
    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.28);
}

.portal-premium-ai-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #d946ef);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(217, 70, 239, 0.22);
    flex-shrink: 0;
}

[data-theme-mode="dark"] .portal-premium-ai-badge {
    background: linear-gradient(135deg, #6d28d9, #c026d3);
    box-shadow: 0 8px 20px rgba(192, 38, 211, 0.28);
}

.hst-page-container {
    --hst-surface: #161616;
    --hst-surface-raised: #1a1a1a;
    --hst-border: rgba(255, 255, 255, 0.09);
    --hst-ink: #f6f7fb;
    --hst-muted: #b3b3b3;
    --hst-accent: #14b8a6;
    --hst-accent-deep: #0d9488;
    --hst-card-border: rgba(20, 184, 166, 0.38);
    color: var(--hst-ink);
}

[data-theme-mode="light"] .hst-page-container {
    --hst-surface: #ffffff;
    --hst-surface-raised: #f8fafc;
    --hst-border: rgba(15, 23, 42, 0.1);
    --hst-ink: #0f172a;
    --hst-muted: #64748b;
    --hst-card-border: rgba(13, 148, 136, 0.35);
}

.hst-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    color: var(--hst-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hst-hero-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--hst-ink);
    text-wrap: balance;
}

.hst-muted {
    color: var(--hst-muted);
}

.hst-hero-pill,
.hst-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--hst-border);
    background: var(--hst-surface);
    color: var(--hst-ink);
    font-size: 0.875rem;
}

.hst-hero-pill strong {
    color: var(--hst-ink);
    font-weight: 700;
}

.hst-status-chip {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.28);
    color: #0d9488;
    font-weight: 700;
}

[data-theme-mode="dark"] .hst-status-chip {
    color: #5eead4;
}

/* --- Hybrid SIP Trunks — Dashboard shell -------------------------------- */
.hst-dashboard-page .hst-hero-title {
    font-size: 1.28rem;
}

.hst-dashboard-page .hst-eyebrow {
    margin-bottom: 0.15rem;
}

.hst-dashboard-hero {
    position: relative;
    overflow: hidden;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--hst-border);
    background:
        linear-gradient(145deg, rgba(20, 184, 166, 0.1), transparent 48%),
        var(--hst-surface);
}

.hst-dashboard-hero__lead {
    max-width: 42rem;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.hst-dashboard-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.hst-dashboard-cta,
.hst-dashboard-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.hst-dashboard-cta-secondary {
    border-color: var(--hst-border) !important;
    color: var(--hst-ink) !important;
    background: transparent;
}

.hst-dashboard-cta-secondary:hover,
.hst-dashboard-cta-secondary:focus-visible {
    border-color: rgba(20, 184, 166, 0.45) !important;
    color: var(--hst-accent) !important;
    background: rgba(20, 184, 166, 0.08);
}

/* Segmented ops panels — one bordered container per section, hairline-divided cells */
.hst-ops-panel {
    border: 1px solid var(--hst-border);
    border-radius: 12px;
    background: var(--hst-surface);
    overflow: hidden;
}

.hst-ops-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.65rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--hst-border);
    background: var(--hst-surface-raised);
}

.hst-ops-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--hst-ink);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.hst-ops-panel__title > i {
    color: var(--hst-accent);
    font-size: 0.95rem;
}

.hst-ops-panel .alert {
    margin: 0.75rem 0.9rem;
}

.hst-ops-panel__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.25rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--hst-border);
    background: var(--hst-surface-raised);
}

/* Stat line — 4 cells divided by hairlines instead of separate cards */
.hst-statline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hst-stat-cell {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border-left: 1px solid var(--hst-border);
}

.hst-stat-cell:first-child {
    border-left: 0;
}

.hst-stat-cell__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 7px;
    color: #ffffff;
    font-size: 0.9rem;
    background: #0d9488;
}

.hst-stat-cell__icon--teal { background: #0d9488; }
.hst-stat-cell__icon--blue { background: #2962ff; }
.hst-stat-cell__icon--violet { background: #7c3aed; }
.hst-stat-cell__icon--orange { background: #ea580c; }
.hst-stat-cell__icon--pink { background: #db2777; }
.hst-stat-cell__icon--amber { background: #a16207; }
.hst-stat-cell__icon--rose { background: #e11d48; }
.hst-stat-cell__icon--green { background: #16a34a; }

.hst-stat-cell__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.hst-stat-cell__label {
    color: var(--hst-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hst-stat-cell__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.45rem;
    min-width: 0;
}

.hst-stat-cell__value {
    color: var(--hst-ink);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.hst-stat-cell.is-warning .hst-stat-cell__value {
    color: #f59e0b;
}

.hst-stat-cell.is-success .hst-stat-cell__value {
    color: #22c55e;
}

.hst-stat-cell__note {
    min-width: 0;
    color: var(--hst-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.hst-stat-cell__note strong {
    color: var(--hst-ink);
    font-weight: 600;
}

.hst-stat-cell--skeleton {
    min-height: 3rem;
}

.hst-stat-cell--skeleton .hst-stat-cell__body {
    gap: 0.3rem;
}

/* Inline stats — quiet label/value pairs in panel foot */
.hst-inline-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.hst-inline-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.3rem;
    color: #ffffff;
    font-size: 0.72rem;
    background: #0d9488;
}

.hst-inline-stat__icon--teal { background: #0d9488; }
.hst-inline-stat__icon--blue { background: #2962ff; }
.hst-inline-stat__icon--violet { background: #7c3aed; }
.hst-inline-stat__icon--orange { background: #ea580c; }
.hst-inline-stat__icon--pink { background: #db2777; }
.hst-inline-stat__icon--amber { background: #a16207; }
.hst-inline-stat__icon--rose { background: #e11d48; }
.hst-inline-stat__icon--green { background: #16a34a; }

.hst-inline-stat__label {
    color: var(--hst-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.hst-inline-stat__value {
    color: var(--hst-ink);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Direction proportion bar (call activity foot) */
.hst-direction {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.hst-direction-bar {
    display: flex;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(100, 116, 139, 0.28);
}

.hst-direction-seg {
    display: block;
    height: 100%;
}

.hst-direction-seg--in { background: #2962ff; }
.hst-direction-seg--out { background: #7c3aed; }
.hst-direction-seg--net { background: #0d9488; }

.hst-direction-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
    color: var(--hst-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.hst-direction-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.hst-direction-legend-item strong {
    color: var(--hst-ink);
    font-weight: 800;
}

.hst-direction-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #64748b;
}

.hst-direction-dot--in { background: #2962ff; }
.hst-direction-dot--out { background: #7c3aed; }
.hst-direction-dot--net { background: #0d9488; }

/* Window toggle — contained segmented control */
.hst-window-toggle {
    padding: 2px;
    border: 1px solid var(--hst-border);
    border-radius: 8px;
    background: var(--hst-surface);
}

[data-theme-mode="dark"] .hst-window-toggle {
    background: #101010;
}

.hst-window-toggle .btn {
    min-height: 28px;
    padding: 0.18rem 0.65rem;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent;
    color: var(--hst-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.hst-window-toggle .btn:hover {
    color: var(--hst-ink);
}

.hst-window-toggle .btn-check:checked + .btn {
    background: rgba(20, 184, 166, 0.16);
    color: #5eead4;
}

[data-theme-mode="light"] .hst-window-toggle .btn-check:checked + .btn {
    color: #0f766e;
}

/* Dashboard body — main column (fleet health + call activity) beside a
   quick-actions sidebar, so the actions rail no longer sits squeezed
   between the two stat panels. */
.hst-dashboard-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    align-items: start;
    gap: 0.5rem;
}

.hst-dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.hst-dashboard-side {
    min-width: 0;
}

/* Quick actions — vertical list inside a sidebar panel */
.hst-qa-list {
    display: flex;
    flex-direction: column;
}

.hst-qa-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.35rem 0.75rem;
    border-top: 1px solid var(--hst-border);
    color: var(--hst-ink);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease-out;
}

.hst-qa-item:first-child {
    border-top: 0;
}

.hst-qa-item:hover,
.hst-qa-item:focus-visible {
    background: var(--hst-surface-raised);
    color: var(--hst-ink);
    outline: none;
}

.hst-qa-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.45rem;
    color: #ffffff;
    font-size: 0.9rem;
    background: #0d9488;
}

.hst-qa-item__icon--manage { background: #0d9488; }
.hst-qa-item__icon--calls { background: #2962ff; }
.hst-qa-item__icon--cdr { background: #7c3aed; }
.hst-qa-item__icon--reg { background: #ea580c; }
.hst-qa-item__icon--rec { background: #db2777; }
.hst-qa-item__icon--moh { background: #a16207; }

.hst-qa-item__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hst-qa-item__go {
    flex-shrink: 0;
    color: var(--hst-muted);
    font-size: 1.05rem;
}

.hst-qa-item:hover .hst-qa-item__go,
.hst-qa-item:focus-visible .hst-qa-item__go {
    color: var(--hst-accent);
}

/* Neutral skeleton bars — match raised panel #161616 (no light slate flash). */
.hst-page-container .hst-skeleton-block {
    background-color: #161616 !important;
    border-radius: 0.35rem;
}

.hst-page-container .hst-skeleton-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.45rem;
    background-color: #161616 !important;
}

[data-theme-mode="light"] .hst-page-container .hst-skeleton-block,
[data-theme-mode="light"] .hst-page-container .hst-skeleton-icon {
    background-color: rgba(100, 116, 139, 0.18) !important;
}

.hst-dashboard-page .hst-hero-pill,
.hst-dashboard-page .hst-status-chip {
    padding: 0.22rem 0.55rem;
    font-size: 0.75rem;
}

.hst-activity-foot {
    column-gap: 2rem;
}

@media (max-width: 1199.98px) {
    .hst-dashboard-hero__actions {
        justify-content: flex-start;
    }

    .hst-dashboard-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .hst-statline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hst-stat-cell:nth-child(odd) {
        border-left: 0;
    }

    .hst-stat-cell:nth-child(n+3) {
        border-top: 1px solid var(--hst-border);
    }
}

@media (max-width: 575.98px) {
    .hst-dashboard-hero {
        padding: 0.85rem;
    }

    .hst-dashboard-cta,
    .hst-dashboard-cta-secondary {
        width: 100%;
    }

    .hst-direction {
        flex-basis: 100%;
    }
}

@media (max-width: 429.98px) {
    .hst-statline {
        grid-template-columns: 1fr;
    }

    .hst-stat-cell {
        border-left: 0;
    }

    .hst-stat-cell:nth-child(n+2) {
        border-top: 1px solid var(--hst-border);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hst-qa-item {
        transition: none;
    }
}

/* Hybrid SIP — teal accent action button (primary CTA / save only) */
.hst-btn-accent {
    background: #0d9488 !important;
    border: 1px solid #14b8a6 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background 160ms ease-out, border-color 160ms ease-out !important;
}

.hst-btn-accent:hover:not(:disabled),
.hst-btn-accent:focus:not(:disabled) {
    background: #14b8a6 !important;
    border-color: #14b8a6 !important;
    color: #ffffff !important;
}

.hst-btn-accent:disabled {
    opacity: 0.55;
    box-shadow: none !important;
}

.hst-placeholder-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    min-height: 12rem;
    border: 1px solid var(--hst-border);
    border-radius: 12px;
    padding: 1.1rem 1.15rem;
    background: var(--hst-surface-raised);
}

.hst-placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: #0d9488;
    color: #ffffff;
    font-size: 1.25rem;
}

.hst-placeholder-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-placeholder-copy {
    max-width: 42rem;
    color: var(--hst-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.hst-placeholder-pill {
    display: inline-flex;
    align-items: center;
    margin-top: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    color: var(--hst-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Hybrid SIP Trunks — SIP vs Hybrid comparison ad --------------------- */
.hst-compare {
    margin-top: 0.25rem;
}

.hst-compare-intro {
    margin: 0 auto 1.15rem;
    max-width: 42rem;
    text-align: center;
}

.hst-compare-heading {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hst-ink);
    text-wrap: balance;
}

.hst-compare-lead {
    color: var(--hst-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

#hst-compare-modal .hst-compare-modal-dialog {
    width: min(96vw, 1400px);
    max-width: 1400px;
}

.hst-compare-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.hst-compare-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem 1.2rem;
    border-radius: 12px;
    border: 1px solid var(--hst-border);
    background: var(--hst-surface);
    min-height: 100%;
}

.hst-compare-card--standard {
    background: var(--hst-surface);
}

.hst-compare-card--hybrid {
    border-color: rgba(20, 184, 166, 0.35);
    background:
        linear-gradient(160deg, rgba(20, 184, 166, 0.12), transparent 45%),
        var(--hst-surface-raised);
    box-shadow: 0 10px 28px rgba(20, 184, 166, 0.08);
}

.hst-compare-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.hst-compare-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    flex-shrink: 0;
    font-size: 1.35rem;
    color: #ffffff;
}

.hst-compare-icon--standard {
    background: #2962ff;
}

.hst-compare-icon--hybrid {
    background: #0d9488;
}

.hst-compare-card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hst-ink);
    text-wrap: balance;
}

.hst-compare-card-tagline {
    margin-top: 0.2rem;
    color: var(--hst-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.hst-compare-card-blurb {
    margin: 0;
    color: var(--hst-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: none;
}

.hst-compare-pbx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.hst-compare-pbx-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(41, 98, 255, 0.28);
    background: rgba(41, 98, 255, 0.1);
    color: #93b4ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

[data-theme-mode="light"] .hst-compare-pbx-chip {
    color: #1d4ed8;
    background: rgba(41, 98, 255, 0.08);
    border-color: rgba(41, 98, 255, 0.22);
}

.hst-compare-cost {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--hst-border);
}

.hst-compare-cost--standard {
    background: rgba(41, 98, 255, 0.08);
    border-color: rgba(41, 98, 255, 0.22);
}

.hst-compare-cost--hybrid {
    background: rgba(20, 184, 166, 0.1);
    border-color: rgba(20, 184, 166, 0.28);
}

.hst-compare-cost-label {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;
}

.hst-compare-cost--standard .hst-compare-cost-label {
    background: rgba(41, 98, 255, 0.18);
    color: #93b4ff;
}

.hst-compare-cost--hybrid .hst-compare-cost-label {
    background: rgba(20, 184, 166, 0.18);
    color: #5eead4;
}

[data-theme-mode="light"] .hst-compare-cost--standard .hst-compare-cost-label {
    color: #1d4ed8;
}

[data-theme-mode="light"] .hst-compare-cost--hybrid .hst-compare-cost-label {
    color: #0f766e;
}

.hst-compare-cost-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    min-width: 0;
}

.hst-compare-cost-price {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--hst-ink);
}

.hst-compare-cost-detail {
    color: var(--hst-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
}

.hst-compare-cost-plus {
    color: var(--hst-ink);
    font-weight: 800;
}

.hst-compare-cost-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.hst-compare-cost--standard .hst-compare-cost-link {
    color: #93b4ff;
}

.hst-compare-cost--hybrid .hst-compare-cost-link {
    color: #5eead4;
}

.hst-compare-cost-link:hover,
.hst-compare-cost-link:focus-visible {
    text-decoration-thickness: 2px;
}

[data-theme-mode="light"] .hst-compare-cost--standard .hst-compare-cost-link {
    color: #1d4ed8;
}

[data-theme-mode="light"] .hst-compare-cost--hybrid .hst-compare-cost-link {
    color: #0f766e;
}

.hst-compare-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hst-compare-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--hst-border);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--hst-ink);
}

.hst-compare-item > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
}

.hst-compare-item--missing {
    background: rgba(148, 163, 184, 0.06);
    color: var(--hst-muted);
}

.hst-compare-item--missing > i {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.hst-compare-item--ok {
    background: rgba(148, 163, 184, 0.08);
}

.hst-compare-item--ok > i {
    background: rgba(100, 116, 139, 0.22);
    color: #94a3b8;
}

.hst-compare-card--standard .hst-compare-item--ok {
    background: rgba(41, 98, 255, 0.08);
    border-color: rgba(41, 98, 255, 0.2);
}

.hst-compare-card--standard .hst-compare-item--ok > i {
    background: rgba(41, 98, 255, 0.2);
    color: #93b4ff;
}

[data-theme-mode="light"] .hst-compare-card--standard .hst-compare-item--ok > i {
    color: #2962ff;
}

.hst-compare-item--ok strong {
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-compare-item--included {
    background: rgba(20, 184, 166, 0.08);
    border-color: rgba(20, 184, 166, 0.22);
}

.hst-compare-item--included > i {
    background: #0d9488;
    color: #ffffff;
}

.hst-compare-item--included strong {
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-compare-charge-note {
    display: block;
    margin-top: 0.15rem;
    color: var(--hst-muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-style: normal;
}

.hst-compare-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.15rem;
}

.hst-compare-vs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--hst-border);
    background: var(--hst-surface-raised);
    color: var(--hst-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

@media (max-width: 991.98px) {
    .hst-compare-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .hst-compare-vs {
        padding: 0.15rem 0;
    }

    .hst-compare-card-blurb {
        max-width: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hst-compare-card--hybrid {
        transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
    }

    .hst-compare-card--hybrid:hover {
        border-color: rgba(20, 184, 166, 0.5);
        box-shadow: 0 12px 32px rgba(20, 184, 166, 0.12);
    }
}

[data-theme-mode="light"] .hst-compare-card--hybrid {
    background:
        linear-gradient(160deg, rgba(20, 184, 166, 0.08), transparent 45%),
        var(--hst-surface-raised);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

[data-theme-mode="light"] .hst-compare-item--missing {
    background: rgba(100, 116, 139, 0.06);
}

[data-theme-mode="light"] .hst-compare-item--included {
    background: rgba(13, 148, 136, 0.07);
}

/* --- Hybrid SIP Trunks — SIP vs Hybrid comparison promo card ---------------- */
.hst-promo-compare-section {
    margin-top: 0.35rem;
}

.hst-promo-compare-card {
    background: var(--hst-surface-raised, #161616) !important;
    border: 1px solid rgba(20, 184, 166, 0.25) !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(20, 184, 166, 0.04) !important;
}

.hst-promo-compare-card:hover,
.hst-promo-compare-card:focus-visible {
    border-color: rgba(20, 184, 166, 0.5) !important;
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.08) !important;
    transform: translateY(-2px);
    outline: none;
}

.hst-promo-compare-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 1rem 1.1rem !important;
}

.hst-promo-compare-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hst-promo-compare-badge-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.hst-promo-compare-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hst-promo-compare-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: #0d9488 !important;
    color: #ffffff !important;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(13, 148, 136, 0.3) !important;
}

.hst-promo-compare-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hst-promo-compare-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hst-ink, #f6f7fb);
    text-wrap: balance;
}

.hst-promo-compare-lead {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.85rem;
    line-height: 1.45;
}

.hst-promo-compare-action {
    margin-top: auto;
    padding-top: 1.25rem;
    width: 100%;
}

/* Product comparison promo: own natural height + centred copy (status cards stay full-height). */
.hst-promo-compare-col {
    align-self: start;
}

.hst-promo-compare-card--centered {
    height: auto;
}

.hst-promo-compare-card--centered .hst-promo-compare-body {
    height: auto;
    justify-content: flex-start;
    padding: 0.7rem 0.8rem !important;
}

.hst-promo-compare-card--centered .hst-promo-compare-content {
    flex: 0 0 auto;
    text-align: center;
}

.hst-promo-compare-card--centered .hst-promo-compare-badge-wrap {
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.35rem !important;
}

.hst-promo-compare-card--centered .hst-promo-compare-title-row {
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.35rem !important;
    gap: 0.4rem !important;
}

.hst-promo-compare-card--centered .hst-promo-compare-icon-box,
.hst-promo-compare-card--centered .hst-promo-premium-icon-box {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
}

.hst-promo-compare-card--centered .hst-promo-compare-title {
    font-size: 1.05rem !important;
}

.hst-promo-compare-card--centered .hst-promo-compare-lead {
    margin-left: auto;
    margin-right: auto;
    max-width: 36rem;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

.hst-promo-compare-card--centered .hst-promo-compare-action {
    margin-top: 0.4rem !important;
    padding-top: 0.25rem !important;
}

.hst-promo-compare-card--centered .hst-promo-compare-btn,
.hst-promo-compare-card--centered .hst-promo-premium-btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.82rem !important;
    border-radius: 6px !important;
}

.hst-promo-compare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    border: none !important;
    color: #ffffff !important;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
    width: 100%;
}

.hst-promo-compare-card:hover .hst-promo-compare-btn {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

[data-theme-mode="light"] .hst-promo-compare-card {
    background: #ffffff !important;
    border-color: rgba(13, 148, 136, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme-mode="light"] .hst-promo-compare-card:hover {
    border-color: rgba(13, 148, 136, 0.4) !important;
    box-shadow: 0 8px 24px rgba(13, 148, 136, 0.08) !important;
}

[data-theme-mode="light"] .hst-promo-compare-badge {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme-mode="light"] .hst-promo-compare-icon-box {
    background: #0d9488 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(13, 148, 136, 0.2) !important;
}

/* --- Hybrid SIP Trunks — Dashboard Status Cards ---------------- */
.hst-dashboard-status-card {
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

.hst-dashboard-status-card--dnd {
    background: linear-gradient(160deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.01) 50%), var(--hst-surface-raised, #161616) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.05) !important;
}

[data-theme-mode="light"] .hst-dashboard-status-card--dnd {
    background: linear-gradient(160deg, rgba(239, 68, 68, 0.06), transparent 45%), #ffffff !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.hst-dashboard-status-card--presence {
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.01) 50%), var(--hst-surface-raised, #161616) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.05) !important;
}

[data-theme-mode="light"] .hst-dashboard-status-card--presence {
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.06), transparent 45%), #ffffff !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

.hst-dashboard-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    margin: 0 auto 0.55rem;
    font-size: 1.3rem;
    line-height: 1;
}

.hst-dashboard-empty-icon--dnd {
    background: #22c55e !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3) !important;
}

.hst-dashboard-empty-icon--presence {
    background: #64748b !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(100, 116, 139, 0.2) !important;
}

[data-theme-mode="light"] .hst-dashboard-empty-icon--dnd {
    background: #22c55e !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2) !important;
}

[data-theme-mode="light"] .hst-dashboard-empty-icon--presence {
    background: #64748b !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(100, 116, 139, 0.15) !important;
}

.hst-icon-box--dnd {
    background: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3) !important;
}

.hst-btn--dnd {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
}

.hst-btn--dnd:hover,
.hst-btn--dnd:focus-visible {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.hst-icon-box--presence {
    background: #ea580c !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3) !important;
}

.hst-btn--presence {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border: none !important;
}

.hst-btn--presence:hover,
.hst-btn--presence:focus-visible {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.hst-dashboard-status-list {
    margin-top: 0.35rem;
    padding-left: 0;
    list-style: none;
    font-size: 0.8rem;
    max-height: 168px;
    overflow-y: auto;
}

/* Keep the Hybrid dashboard first screen in typical laptop viewports */
@media (min-width: 992px) and (max-height: 960px) {
    .hst-dashboard-page.container-fluid {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .hst-dashboard-page .hst-dashboard-hero {
        padding: 0.5rem 0.75rem;
    }

    .hst-dashboard-page .hst-dashboard-hero__lead {
        font-size: 0.74rem;
        line-height: 1.3;
    }

    .hst-dashboard-page .hst-stat-cell {
        padding: 0.45rem 0.65rem;
    }

    .hst-dashboard-page .hst-stat-cell__value {
        font-size: 1.1rem;
    }

    .hst-dashboard-page .hst-qa-item {
        min-height: 34px;
        padding: 0.28rem 0.65rem;
    }

    .hst-dashboard-page .hst-promo-compare-section {
        margin-top: 0.2rem;
    }

    .hst-dashboard-page .hst-promo-compare-card--centered .hst-promo-compare-body,
    .hst-dashboard-page .hst-dashboard-status-card .hst-promo-compare-body {
        padding: 0.6rem 0.7rem !important;
    }

    .hst-dashboard-page .hst-dashboard-empty-icon {
        width: 2.35rem;
        height: 2.35rem;
        margin-bottom: 0.4rem;
        font-size: 1.15rem;
    }

    .hst-dashboard-page .hst-dashboard-status-list {
        max-height: 140px;
        font-size: 0.75rem;
    }
}

.hst-dashboard-status-list::-webkit-scrollbar {
    width: 4px;
}

.hst-dashboard-status-list::-webkit-scrollbar-track {
    background: transparent;
}

.hst-dashboard-status-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.hst-dashboard-status-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme-mode="light"] .hst-dashboard-status-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme-mode="light"] .hst-dashboard-status-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

.hst-dashboard-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hst-dashboard-status-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(2px);
}

.hst-dashboard-status-item:last-child {
    margin-bottom: 0 !important;
}

.hst-dashboard-status-item--link {
    padding: 0 !important;
}

.hst-dashboard-status-item__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: inherit;
    border-radius: inherit;
}

.hst-dashboard-status-item__link:hover,
.hst-dashboard-status-item__link:focus-visible {
    text-decoration: none;
    color: inherit;
}

.hst-dashboard-status-card--dnd .hst-dashboard-status-item--link:hover,
.hst-dashboard-status-card--dnd .hst-dashboard-status-item--link:focus-within {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    transform: translateX(2px);
}

.hst-dashboard-status-card--presence .hst-dashboard-status-item--link:hover,
.hst-dashboard-status-card--presence .hst-dashboard-status-item--link:focus-within {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    transform: translateX(2px);
}

.hst-dashboard-status-card--dnd .hst-dashboard-status-item__link:focus-visible {
    outline: 2px solid rgba(239, 68, 68, 0.55);
    outline-offset: 2px;
}

.hst-dashboard-status-card--presence .hst-dashboard-status-item__link:focus-visible {
    outline: 2px solid rgba(245, 158, 11, 0.6);
    outline-offset: 2px;
}

.hst-dashboard-status-item__name {
    font-weight: 500;
    color: var(--hst-ink, #f6f7fb);
}

.hst-dashboard-status-item__status {
    font-size: 0.75rem;
    flex-shrink: 0;
}

[data-theme-mode="light"] .hst-icon-box--dnd {
    background: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) !important;
}

[data-theme-mode="light"] .hst-icon-box--presence {
    background: #ea580c !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

[data-theme-mode="light"] .hst-dashboard-status-item {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme-mode="light"] .hst-dashboard-status-card--dnd .hst-dashboard-status-item--link:hover,
[data-theme-mode="light"] .hst-dashboard-status-card--dnd .hst-dashboard-status-item--link:focus-within {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
}

[data-theme-mode="light"] .hst-dashboard-status-card--presence .hst-dashboard-status-item--link:hover,
[data-theme-mode="light"] .hst-dashboard-status-card--presence .hst-dashboard-status-item--link:focus-within {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.32) !important;
}

/* --- Hybrid SIP Trunks — Manage list / detail ----------------------------- */
.hst-panel {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.hst-panel--flush {
    padding: 0;
    overflow: hidden;
}

.hst-panel-header {
    border-bottom-color: var(--hst-border) !important;
}

.hst-panel-title,
.hst-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    color: var(--hst-ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.hst-panel-title {
    margin: 0;
}

.hst-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    margin: 0 0 0.85rem;
}

.hst-section-heading .hst-section-title {
    margin: 0;
}

.hst-section-heading__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem 0.65rem;
}

/*
 * Hybrid SIP Trunks — action chip (canonical secondary tool control).
 * Use for section-header actions (Print to PDF, Open library, Refresh tooling, etc.).
 * Do not invent alternate chip styles or fall back to bare Bootstrap btn-secondary for these.
 */
.hst-action-chip {
    --hst-action-chip-bg: var(--hst-surface-raised);
    --hst-action-chip-border: rgba(20, 184, 166, 0.38);
    --hst-action-chip-ink: var(--hst-ink);
    --hst-action-chip-hint: var(--hst-muted);
    --hst-action-chip-icon-bg: #0d9488;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
    border: 1px solid var(--hst-action-chip-border);
    border-radius: 0.65rem;
    background: var(--hst-action-chip-bg);
    color: var(--hst-action-chip-ink);
    box-shadow: none;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease;
}

a.hst-action-chip:hover {
    text-decoration: none;
    color: var(--hst-action-chip-ink);
}

.hst-action-chip:hover,
.hst-action-chip:focus-visible {
    --hst-action-chip-bg: rgba(20, 184, 166, 0.1);
    --hst-action-chip-border: rgba(20, 184, 166, 0.55);
    --hst-action-chip-icon-bg: #14b8a6;
    outline: none;
}

.hst-action-chip:focus-visible {
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.35);
}

.hst-action-chip:active {
    --hst-action-chip-bg: rgba(20, 184, 166, 0.14);
}

.hst-action-chip:disabled,
.hst-action-chip.is-busy,
.hst-action-chip.is-printing {
    cursor: progress;
    pointer-events: none;
    opacity: 0.88;
}

.hst-action-chip__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--hst-action-chip-icon-bg);
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1;
}

.hst-action-chip__icon .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    color: #ffffff;
}

.hst-action-chip__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    min-width: 0;
    padding-right: 0.15rem;
}

.hst-action-chip__label {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--hst-action-chip-ink);
}

.hst-action-chip__hint {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--hst-action-chip-hint);
}

/* Compact single-line chip (icon + label only, no hint row). */
.hst-action-chip--compact {
    min-height: 2.5rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    gap: 0.55rem;
}

.hst-action-chip--compact .hst-action-chip__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    font-size: 1.05rem;
}

.hst-action-chip--compact .hst-action-chip__hint {
    display: none;
}

.hst-connection-print-status {
    max-width: 14rem;
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: right;
    color: var(--hst-muted);
}

.hst-connection-print-status:empty {
    display: none;
}

.hst-connection-print-status--loading {
    color: var(--hst-muted);
}

.hst-connection-print-status--success {
    color: #22c55e;
}

.hst-connection-print-status--error {
    color: #ef4444;
}

[data-theme-mode="light"] .hst-action-chip {
    --hst-action-chip-bg: #ffffff;
    --hst-action-chip-border: rgba(13, 148, 136, 0.35);
    --hst-action-chip-ink: #0f172a;
    --hst-action-chip-hint: #64748b;
    --hst-action-chip-icon-bg: #0d9488;
}

[data-theme-mode="light"] .hst-action-chip:hover,
[data-theme-mode="light"] .hst-action-chip:focus-visible {
    --hst-action-chip-bg: rgba(13, 148, 136, 0.08);
    --hst-action-chip-border: rgba(13, 148, 136, 0.5);
    --hst-action-chip-icon-bg: #0f766e;
}

@media (max-width: 575.98px) {
    .hst-section-heading__actions {
        width: 100%;
        justify-content: stretch;
    }

    .hst-action-chip,
    .hst-connection-print-btn {
        width: 100%;
    }

    .hst-connection-print-status {
        max-width: none;
        width: 100%;
        text-align: left;
    }
}

.hst-form-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--hst-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.hst-form-control,
.hst-input-addon {
    background: var(--hst-surface-raised) !important;
    border-color: var(--hst-border) !important;
    color: var(--hst-ink) !important;
}

.hst-form-select {
    background-color: var(--hst-surface-raised) !important;
    border-color: var(--hst-border) !important;
    color: var(--hst-ink) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2314b8a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    padding-right: 2.5rem !important;
}

[data-theme-mode="light"] .hst-form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%230d9488' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.hst-input-addon {
    color: var(--hst-muted) !important;
}

.hst-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--hst-border);
    color: var(--hst-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.hst-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hst-ink);
    --bs-table-border-color: var(--hst-border);
    color: var(--hst-ink);
}

.hst-table > :not(caption) > * > * {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
}

.hst-table thead th {
    color: var(--hst-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding: 0.35rem 0.5rem;
}

.hst-table tbody td {
    vertical-align: middle;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
}

.hst-table .hst-badge {
    padding: 0.125rem 0.45rem;
    font-size: 0.7rem;
    gap: 0.25rem;
}

.hst-table .hst-row-actions__toggle {
    min-height: 1.65rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
}

.hst-list-username-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.hst-list-username-copy {
    padding: 0.1rem 0.3rem;
    font-size: 0.72rem;
    line-height: 1;
    min-height: 1.25rem;
}

.hst-list-login-host {
    display: block;
    margin-top: 0.1rem;
}

.hst-list-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem !important;
    line-height: 1.2;
    margin-top: 0 !important;
}

.hst-list-login-badge .badge {
    font-size: 0.65rem;
    padding: 0.12rem 0.35rem;
    font-weight: 600;
}

.hst-list-login-badge__btn {
    border: 0;
    cursor: pointer;
    line-height: inherit;
    vertical-align: baseline;
}

.hst-list-login-badge__btn:hover,
.hst-list-login-badge__btn:focus-visible {
    filter: brightness(1.08);
}

.hst-list-login-badge__btn:focus-visible {
    outline: 2px solid var(--hst-accent, #14b8a6);
    outline-offset: 2px;
}

.hst-row-actions-cell {
    white-space: nowrap;
}

.hst-row-actions {
    display: inline-flex;
    justify-content: flex-end;
    position: static;
}

.hst-row-actions--block {
    display: flex;
    width: 100%;
}

.hst-row-actions--block .hst-row-actions__toggle {
    width: 100%;
    justify-content: center;
}

.hst-row-actions__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    font-weight: 600;
}

.hst-row-actions__toggle::after {
    margin-left: 0.15rem;
}

.hst-row-actions__menu {
    min-width: 13.5rem;
    padding: 0.35rem;
    border: 1px solid var(--hst-border);
    border-radius: 0.6rem;
    background: var(--hst-surface-raised, #1a1a1a);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    z-index: 1080;
}

.hst-row-actions__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hst-ink);
    white-space: nowrap;
}

.hst-row-actions__item i {
    font-size: 1rem;
    color: var(--hst-muted);
}

.hst-row-actions__item:hover,
.hst-row-actions__item:focus,
.hst-row-actions__item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--hst-ink);
}

.hst-row-actions__item:hover i,
.hst-row-actions__item:focus i,
.hst-row-actions__item:focus-visible i {
    color: var(--hst-accent, #14b8a6);
}

.hst-row-actions__menu .dropdown-divider {
    margin: 0.3rem 0.35rem;
    border-color: var(--hst-border);
    opacity: 1;
}

.hst-trunk-card__actions {
    margin-top: 0.25rem;
}

[data-theme-mode="light"] .hst-row-actions__menu {
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .hst-row-actions__item:hover,
[data-theme-mode="light"] .hst-row-actions__item:focus,
[data-theme-mode="light"] .hst-row-actions__item:focus-visible {
    background: rgba(15, 23, 42, 0.05);
}

.hst-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    word-break: break-word;
}

.hst-wrap {
    overflow-wrap: anywhere;
}

.hst-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--hst-border);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.hst-badge--ok {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
    color: #16a34a;
}

[data-theme-mode="dark"] .hst-badge--ok {
    color: #4ade80;
}

.hst-badge--off {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.28);
    color: #94a3b8;
}

.hst-badge--neutral {
    background: rgba(255, 255, 255, 0.04);
    color: var(--hst-muted);
}

[data-theme-mode="light"] .hst-badge--neutral {
    background: rgba(15, 23, 42, 0.04);
}

.hst-badge--rec {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
    color: #ef4444;
}

.hst-badge--register {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.28);
    color: #8b5cf6;
}

[data-theme-mode="dark"] .hst-badge--register {
    color: #a78bfa;
}

.hst-badge--ip-auth {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.28);
    color: #f59e0b;
}

[data-theme-mode="dark"] .hst-badge--ip-auth {
    color: #fb923c;
}

/* MicroPOP / Hybrid POP name badges — solid bright fill, white label */
.hst-badge--pop {
    border: none;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Flex badge groups — never set display:flex on <td> (breaks table/colspan layout). */
.hst-overview-dl dd:has(.hst-badge--pop),
.hst-pop-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.hst-badge--pop-nsw-crazyphone { background: #2563eb; }
.hst-badge--pop-melbourne-crazyphone { background: #7c3aed; }
.hst-badge--pop-melbourne-master { background: #e11d48; }
.hst-badge--pop-brisbane { background: #059669; }
.hst-badge--pop-perth { background: #d97706; }
.hst-badge--pop-new-zealand { background: #0d9488; }
.hst-badge--pop-sydney-core { background: #0284c7; }
.hst-badge--pop-uk-london { background: #9333ea; }
.hst-badge--pop-singapore { background: #c026d3; }
.hst-badge--pop-sydney-ipv6 { background: #0891b2; }
.hst-badge--pop-manila { background: #65a30d; }
.hst-badge--pop-los-angeles { background: #ea580c; }
.hst-badge--pop-india { background: #b45309; }

/* Fallback palette for unknown / new MicroPOP hostnames */
.hst-badge--pop-u0 { background: #4f46e5; }
.hst-badge--pop-u1 { background: #db2777; }
.hst-badge--pop-u2 { background: #0f766e; }
.hst-badge--pop-u3 { background: #b91c1c; }
.hst-badge--pop-u4 { background: #a16207; }
.hst-badge--pop-u5 { background: #1d4ed8; }
.hst-badge--pop-u6 { background: #7e22ce; }
.hst-badge--pop-u7 { background: #15803d; }

[data-theme-mode="light"] .hst-badge--pop {
    color: #ffffff;
}

/* SIP transport badges — UDP / TCP / TLS / WSS */
.hst-badge--transport {
    border: none;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hst-badge--transport-udp { background: #d97706; }
.hst-badge--transport-tcp { background: #2563eb; }
.hst-badge--transport-tls { background: #059669; }
.hst-badge--transport-wss,
.hst-badge--transport-ws { background: #dc2626; }

[data-theme-mode="light"] .hst-badge--transport {
    color: #ffffff;
}

/* Registration-event Phase / Reason badges */
.hst-reg-event-tip {
    cursor: help;
    display: inline-flex;
    vertical-align: middle;
}

.hst-badge--reg-phase,
.hst-badge--reg-reason {
    border: none;
    color: #ffffff;
    font-weight: 700;
}

.hst-badge--reg-phase-challenge { background: #d97706; }
.hst-badge--reg-phase-auth { background: #2563eb; }
.hst-badge--reg-phase-result { background: #7c3aed; }
.hst-badge--reg-phase-contact { background: #059669; }
.hst-badge--reg-phase-block { background: #e11d48; }

.hst-badge--reg-reason-registered { background: #16a34a; }
.hst-badge--reg-reason-renewed { background: #0d9488; }
.hst-badge--reg-reason-digest-attempt { background: #4f46e5; }
.hst-badge--reg-reason-digest-challenge { background: #ea580c; }
.hst-badge--reg-reason-bad-password { background: #dc2626; }
.hst-badge--reg-reason-deregistered { background: #9333ea; }

.hst-badge--reg-phase-u-unknown,
.hst-badge--reg-reason-u-unknown,
[class*="hst-badge--reg-phase-u-"],
[class*="hst-badge--reg-reason-u-"] {
    background: #475569;
}

[data-theme-mode="light"] .hst-badge--reg-phase,
[data-theme-mode="light"] .hst-badge--reg-reason {
    color: #ffffff;
}

.hst-empty-state {
    color: var(--hst-muted);
}

.hst-empty-title {
    color: var(--hst-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.hst-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hst-skeleton-row {
    height: 2.75rem;
    border-radius: 8px;
    background: #161616;
    animation: none;
}

html[data-theme-mode="dark"] .hst-skeleton-row {
    background: #161616 !important;
    opacity: 1 !important;
    animation: none !important;
}

[data-theme-mode="light"] .hst-skeleton-row {
    background: rgba(100, 116, 139, 0.18);
    animation: hstSkeletonPulse 1.4s ease-in-out infinite;
}

@keyframes hstSkeletonPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}

.hst-trunk-card {
    background: var(--hst-surface-raised);
    border: 1px solid var(--hst-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.hst-trunk-card:last-child {
    margin-bottom: 0;
}

.hst-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-card-dl {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
}

.hst-card-dl > div {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
}

.hst-card-dl dt {
    margin: 0;
    color: var(--hst-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.hst-card-dl dd {
    margin: 0;
    color: var(--hst-ink);
    font-size: 0.875rem;
}

.hst-back-link {
    color: var(--hst-accent) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.8rem;
}

.hst-back-link:hover {
    text-decoration: underline !important;
}

.hst-detail-nav-row {
    font-size: 0.8rem;
}

.hst-detail-nav-row .hst-eyebrow {
    margin-bottom: 0;
    padding-left: 0.6rem;
    border-left: 1px solid var(--hst-border);
}

.hst-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--hst-border);
    font-size: 0.875rem;
}

.hst-alert--error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.28);
    color: var(--hst-ink);
}

.hst-alert--warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.28);
    color: var(--hst-ink);
}

/* Wider Hybrid create modal so NAT Helper promo + CTAs fit without crowding */
.hst-create-modal-dialog.modal-dialog {
    max-width: min(1040px, calc(100vw - 1.5rem));
    width: min(1040px, calc(100vw - 1.5rem));
}

/* Keep NAT Helper / field tooltips above modal chrome and sibling form rows */
#hst-create-modal .modal-content,
#hst-create-modal .modal-body,
#hst-create-modal .modal-body .hst-create-modal {
    overflow: visible !important;
}

#hst-create-modal .modal-body {
    position: relative;
    z-index: 2;
}

#hst-create-modal .modal-footer {
    position: relative;
    z-index: 1;
}

/* Credentials / manage detail NAT Helper promo (not in a Bootstrap modal) */
.hst-detail-panel:has(#hst-edit-nat-helper-wrap),
#hst-section-connection:has(#hst-edit-nat-helper-wrap) {
    overflow: visible !important;
}

@media (max-width: 767.98px) {
    .hst-create-modal-dialog.modal-dialog {
        max-width: calc(100vw - 1rem);
        width: calc(100vw - 1rem);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Hybrid SIP — NAT Helper advertisement promo (inbound / CGNAT stability tip) */
.hst-nat-ad-card,
.hst-nat-ad-card__inner,
.hst-nat-status-card,
.hst-nat-status-card__inner,
#hst-create-nat-helper-wrap,
#hst-edit-nat-helper-wrap {
    overflow: visible !important;
}

.hst-nat-ad-card .custom-kb-tooltip-wrapper:hover,
.hst-nat-ad-card .custom-kb-tooltip-wrapper:focus-within,
.hst-nat-status-card .custom-kb-tooltip-wrapper:hover,
.hst-nat-status-card .custom-kb-tooltip-wrapper:focus-within {
    z-index: 1080 !important;
}

.hst-nat-ad-card .custom-kb-tooltip-content,
.hst-nat-status-card .custom-kb-tooltip-content {
    z-index: 1080 !important;
    position: absolute;
}

.hst-nat-ad-card {
    position: relative;
    border-radius: 1.25rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.42) 0%, rgba(45, 212, 191, 0.14) 48%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
    overflow: visible;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
}

.hst-nat-ad-card:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.58) 0%, rgba(45, 212, 191, 0.22) 48%, rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 0 20px 32px -8px rgba(0, 0, 0, 0.6), 0 0 18px rgba(20, 184, 166, 0.22);
}

.hst-nat-ad-card__glow {
    position: absolute;
    top: -50%;
    right: -30%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.16) 0%, transparent 68%);
    pointer-events: none;
    z-index: 1;
    /* Orbit once, then fade out and stay gone */
    animation:
        hst-nat-ad-glow-spin 7s linear 1 forwards,
        hst-nat-ad-glow-fade 7s linear 1 forwards;
}

@keyframes hst-nat-ad-glow-spin {
    from { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.06); }
    to { transform: rotate(360deg) scale(1); }
}

@keyframes hst-nat-ad-glow-fade {
    0%,
    75% { opacity: 0.85; }
    100% { opacity: 0; }
}

.hst-nat-ad-card__inner {
    position: relative;
    z-index: 2;
    border-radius: 1.2rem;
    padding: 1.1rem 1.15rem;
    background: var(--hst-surface, #161616);
    border: 1px solid rgba(20, 184, 166, 0.22);
}

.hst-nat-ad-card__icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #5eead4;
    font-size: 1.25rem;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.28) 0%, rgba(13, 148, 136, 0.14) 100%);
    border: 1px solid rgba(20, 184, 166, 0.35);
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.22);
    transition: transform 0.25s ease;
}

.hst-nat-ad-card:hover .hst-nat-ad-card__icon {
    transform: scale(1.06) rotate(4deg);
}

.hst-nat-ad-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.16);
    border: 1px solid rgba(20, 184, 166, 0.32);
    color: #5eead4;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hst-nat-ad-card__title {
    margin: 0;
    color: var(--hst-ink, #f6f7fb);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.hst-nat-ad-card__desc {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.45;
}

.hst-nat-ad-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    border: none !important;
    border-radius: 0.75rem;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hst-nat-ad-card__cta:hover,
.hst-nat-ad-card__cta:focus-visible {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.5);
    outline: none;
}

.hst-nat-ad-card__cta:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.hst-nat-learn-more {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: #5eead4;
    font-size: 0.78rem;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: help;
}

.nat-cgnat-term {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    font-weight: 750;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    cursor: help;
}

.nat-cgnat-term:hover,
.nat-cgnat-term:focus-visible {
    color: var(--hst-accent, #14b8a6);
    outline: none;
}

.nat-cgnat-tooltip {
    display: inline;
    vertical-align: baseline;
}

.nat-cgnat-tooltip:hover,
.nat-cgnat-tooltip:focus-within {
    z-index: 1080 !important;
}

.nat-cgnat-tooltip .custom-kb-tooltip-content {
    z-index: 1080 !important;
    width: min(340px, calc(100vw - 2rem));
}

.hst-nat-learn-more:hover,
.hst-nat-learn-more:focus-visible {
    color: #99f6e4;
    outline: none;
}

.hst-nat-status-card {
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.35) 0%, rgba(20, 184, 166, 0.18) 55%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.45);
}

.hst-nat-status-card__inner {
    border-radius: 0.95rem;
    padding: 0.95rem 1.05rem;
    background: var(--hst-surface, #161616);
    border: 1px solid rgba(34, 197, 94, 0.22);
}

.hst-nat-status-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.28);
    font-size: 1.15rem;
}

.hst-nat-status-card__title {
    color: var(--hst-ink, #f6f7fb);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hst-nat-status-card__text {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.8125rem;
    line-height: 1.45;
    max-width: 36rem;
}

[data-theme-mode="light"] .hst-nat-ad-card__inner,
[data-theme-mode="light"] .hst-nat-status-card__inner {
    background: #ffffff;
}

[data-theme-mode="light"] .hst-nat-ad-card__eyebrow {
    color: #0f766e;
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(13, 148, 136, 0.28);
}

[data-theme-mode="light"] .hst-nat-ad-card__icon,
[data-theme-mode="light"] .hst-nat-learn-more {
    color: #0d9488;
}

[data-theme-mode="light"] .hst-nat-learn-more:hover,
[data-theme-mode="light"] .hst-nat-learn-more:focus-visible {
    color: #0f766e;
}

[data-theme-mode="light"] .hst-nat-ad-card__title,
[data-theme-mode="light"] .hst-nat-status-card__title {
    color: #0f172a;
}

[data-theme-mode="light"] .hst-nat-ad-card__desc,
[data-theme-mode="light"] .hst-nat-status-card__text {
    color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    .hst-nat-ad-card,
    .hst-nat-ad-card:hover,
    .hst-nat-ad-card__glow,
    .hst-nat-ad-card__cta {
        transition: none;
        animation: none;
        transform: none;
    }

    .hst-nat-ad-card__glow {
        opacity: 0;
    }
}

.hst-alert--success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.28);
    color: var(--hst-ink);
}

/* Promo-style status notice (non-error feedback, e.g. "No changes to save") */
.hst-alert--info {
    position: relative;
    overflow: hidden;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem 1.05rem;
    border-color: rgba(20, 184, 166, 0.4);
    background:
        linear-gradient(90deg, rgba(20, 184, 166, 0.22) 0%, transparent 42%),
        linear-gradient(135deg, rgba(20, 184, 166, 0.16) 0%, rgba(13, 148, 136, 0.08) 48%, rgba(22, 22, 22, 0.92) 100%);
    color: var(--hst-ink, #f6f7fb);
    box-shadow: 0 6px 22px rgba(20, 184, 166, 0.1);
    animation: hst-alert-info-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hst-alert--info .hst-alert__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: #0d9488;
    color: #ffffff;
    font-size: 1.2rem;
    box-shadow: 0 0 14px rgba(13, 148, 136, 0.35);
}

.hst-alert--info .hst-alert__copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.hst-alert--info .hst-alert__eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5eead4;
    line-height: 1.2;
}

.hst-alert--info .hst-alert__message {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--hst-ink, #f6f7fb);
    line-height: 1.35;
}

.hst-alert--info .hst-alert__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    background: linear-gradient(90deg, #2dd4bf 0%, #14b8a6 55%, #0d9488 100%);
    animation: hst-alert-info-progress 4.5s linear forwards;
}

@keyframes hst-alert-info-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hst-alert-info-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hst-alert--info {
        animation: none;
    }

    .hst-alert--info .hst-alert__progress {
        animation: none;
        opacity: 0.55;
        transform: scaleX(1);
    }
}

[data-theme-mode="light"] .hst-alert--info {
    border-color: rgba(13, 148, 136, 0.35);
    background:
        linear-gradient(90deg, rgba(20, 184, 166, 0.16) 0%, transparent 42%),
        linear-gradient(135deg, rgba(240, 253, 250, 0.98) 0%, #ffffff 100%);
    color: #0f172a;
    box-shadow: 0 6px 18px rgba(13, 148, 136, 0.08);
}

[data-theme-mode="light"] .hst-alert--info .hst-alert__eyebrow {
    color: #0f766e;
}

[data-theme-mode="light"] .hst-alert--info .hst-alert__message {
    color: #0f172a;
}

.hst-edit-field-wrap,
.hst-edit-toggle,
.hst-edit-cf-mode {
    margin-bottom: 0.85rem;
}

.hst-edit-cf-mode {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hst-border);
}

.hst-edit-cf-mode:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.hst-edit-cf-target,
.hst-edit-cf-timeout,
.hst-edit-moh-custom {
    margin-top: 0.65rem;
}

/* Shared nested feature cards (Call recording, Call forwarding, Internal dialling) */
.hst-feature-card {
    border-radius: 0.75rem;
    border: 1px solid var(--hst-border);
    background: var(--hst-surface-raised);
    padding: 0.9rem 1rem;
}

.hst-feature-card__heading {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hst-muted);
}

[data-theme-mode="dark"] .hst-feature-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.hst-moh-promo {
    border-radius: 0.75rem;
    border: 1px solid rgba(20, 184, 166, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.14), transparent 55%),
        linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(139, 92, 246, 0.06)),
        var(--hst-surface-raised);
    overflow: hidden;
}

.hst-moh-promo-inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
}

.hst-moh-promo-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 184, 166, 0.16);
    color: var(--hst-accent);
    font-size: 1.25rem;
}

.hst-moh-promo-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-moh-promo-text {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--hst-muted);
    line-height: 1.45;
}

.hst-moh-promo-cta {
    text-decoration: none;
}

.hst-moh-promo-secondary {
    color: var(--hst-muted);
    line-height: 1.45;
}

.hst-moh-promo-secondary-link {
    color: var(--hst-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hst-moh-promo-secondary-link:hover {
    color: var(--hst-ink);
}

.hst-recording-feature {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Call recording promo — red accent (distinct from teal Hybrid / blue forwarding) */
.hst-recording-feature__promo {
    margin: 0 0 1rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(220, 53, 69, 0.34);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(239, 68, 68, 0.16), transparent 55%),
        rgba(220, 53, 69, 0.07);
}

.hst-recording-feature__api-box {
    border-color: rgba(220, 53, 69, 0.28);
    background: rgba(16, 16, 16, 0.4);
}

[data-theme-mode="light"] .hst-recording-feature__api-box {
    background: #ffffff;
    border-color: rgba(220, 53, 69, 0.22);
}

.hst-recording-feature__promo-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #b02a37;
    color: #ffffff;
    font-size: 1.15rem;
}

.hst-recording-feature__promo-body {
    flex: 1;
    min-width: 0;
}

.hst-recording-feature__promo-title {
    margin: 0 0 0.3rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--hst-ink);
    line-height: 1.3;
    text-wrap: balance;
}

.hst-recording-feature__promo-text {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    color: var(--hst-ink);
    line-height: 1.45;
}

.hst-recording-feature__benefits {
    display: grid;
    gap: 0.3rem;
}

.hst-recording-feature__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hst-muted);
    line-height: 1.35;
}

.hst-recording-feature__benefits li i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #ef4444;
    font-size: 0.9rem;
}

.hst-recording-feature__toggle-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.hst-recording-feature__skip-internal {
    margin: 0 0 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--hst-border);
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="light"] .hst-recording-feature__skip-internal {
    background: rgba(0, 0, 0, 0.02);
}

.hst-recording-feature__toggle-row--nested {
    margin-bottom: 0.4rem;
}

.hst-recording-feature__skip-help,
.hst-recording-feature__skip-gate {
    line-height: 1.4;
}

.hst-recording-feature__skip-internal .form-check-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.hst-recording-feature__toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hst-ink);
    cursor: pointer;
    flex: 0 1 auto;
    min-width: 0;
}

.hst-recording-feature__toggle-text {
    flex-shrink: 0;
}

.hst-recording-feature__switch {
    flex-shrink: 0;
    padding-left: 2.5em;
    min-height: 1.5rem;
}

.hst-recording-feature__actions {
    margin-bottom: 0.6rem;
}

.hst-recording-feature__action-group {
    display: inline-flex;
    flex-wrap: wrap;
    border-radius: 0.5rem;
    border: 1px solid var(--hst-border);
    overflow: hidden;
    background: var(--hst-surface);
}

.hst-recording-feature__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--hst-ink);
    background: transparent;
    border: none;
    border-right: 1px solid var(--hst-border);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.hst-recording-feature__action-btn:last-child {
    border-right: none;
}

.hst-recording-feature__action-btn:hover,
.hst-recording-feature__action-btn:focus-visible {
    background: rgba(20, 184, 166, 0.1);
    color: var(--hst-accent);
    outline: none;
}

.hst-recording-feature__action-btn i {
    font-size: 1rem;
    color: var(--hst-accent);
}

.hst-recording-feature__hint {
    font-size: 0.8125rem;
    color: var(--hst-muted);
    line-height: 1.4;
}

.hst-recording-feature__hint-link {
    color: var(--hst-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hst-recording-feature__hint-link:hover {
    color: var(--hst-ink);
}

[data-theme-mode="dark"] .hst-recording-feature__action-group {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="dark"] .hst-recording-feature__action-btn {
    border-right-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .hst-recording-feature__action-btn:hover,
[data-theme-mode="dark"] .hst-recording-feature__action-btn:focus-visible {
    background: rgba(20, 184, 166, 0.14);
}

/* Call forwarding feature card — blue accent (keeps teal for other Hybrid cards) */
/* Call forwarding feature card — premium modern style */
.hst-call-forwarding-feature__promo {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: radial-gradient(100% 100% at 100% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 60%), rgba(255, 255, 255, 0.015);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme-mode="light"] .hst-call-forwarding-feature__promo {
    border-color: rgba(37, 99, 235, 0.15);
    background: radial-gradient(100% 100% at 100% 0%, rgba(37, 99, 235, 0.05) 0%, transparent 60%), #f8fafc;
    box-shadow: none;
}

.hst-call-forwarding-feature__promo-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.15);
    color: #3b82f6;
    font-size: 1.25rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

[data-theme-mode="light"] .hst-call-forwarding-feature__promo-icon {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.hst-call-forwarding-feature__promo-body {
    flex: 1;
    min-width: 0;
}

.hst-call-forwarding-feature__promo-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hst-ink);
    line-height: 1.3;
}

.hst-call-forwarding-feature__promo-text {
    margin: 0 0 0.75rem;
    font-size: 0.825rem;
    color: var(--hst-muted);
    line-height: 1.45;
}

.hst-call-forwarding-feature__benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.hst-call-forwarding-feature__benefits li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.775rem;
    font-weight: 500;
    color: var(--hst-muted);
}

.hst-call-forwarding-feature__benefits li i {
    flex-shrink: 0;
    color: #3b82f6;
    font-size: 0.95rem;
}

/* Call forwarding mode cards */
.hst-cf-mode-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 0.85rem;
    transition: all 0.2s ease-in-out;
}

.hst-cf-mode-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.025);
}

.hst-cf-mode-card--active {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(20, 184, 166, 0.28);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .hst-cf-mode-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme-mode="light"] .hst-cf-mode-card:hover {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.14);
}

[data-theme-mode="light"] .hst-cf-mode-card--active {
    background: #f8fafc;
    border-color: rgba(13, 148, 136, 0.35);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.hst-cf-mode-card__icon-wrap {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--hst-muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

[data-theme-mode="light"] .hst-cf-mode-card__icon-wrap {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.08);
}

.hst-cf-mode-card--active .hst-cf-mode-card__icon-wrap {
    background: rgba(20, 184, 166, 0.12);
    color: var(--hst-accent, #14b8a6);
    border-color: rgba(20, 184, 166, 0.25);
}

[data-theme-mode="light"] .hst-cf-mode-card--active .hst-cf-mode-card__icon-wrap {
    background: rgba(13, 148, 136, 0.1);
    color: #0d9488;
    border-color: rgba(13, 148, 136, 0.2);
}

.hst-cf-mode-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hst-ink);
}

.hst-cf-mode-card__desc {
    font-size: 0.8rem;
    color: var(--hst-muted);
    line-height: 1.45;
    margin-top: 0.2rem;
}

.hst-cf-mode-card__nested {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hst-cf-mode-card--active .hst-cf-mode-card__nested {
    display: block;
}

[data-theme-mode="light"] .hst-cf-mode-card__nested {
    border-top-color: rgba(15, 23, 42, 0.06);
}

/* Custom switch overrides to replace ugly red/green defaults in this card */
.hst-cf-mode-card__switch .form-check-input,
[data-theme-mode="dark"] .hst-cf-mode-card__switch .form-check-input {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    cursor: pointer;
    width: 2.5rem;
    height: 1.3rem;
}

.hst-cf-mode-card__switch .form-check-input:checked,
[data-theme-mode="dark"] .hst-cf-mode-card__switch .form-check-input:checked {
    background-color: var(--hst-accent, #14b8a6) !important;
    border-color: var(--hst-accent, #14b8a6) !important;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.35) !important;
}

[data-theme-mode="light"] .hst-cf-mode-card__switch .form-check-input {
    background-color: rgba(15, 23, 42, 0.12) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

[data-theme-mode="light"] .hst-cf-mode-card__switch .form-check-input:checked {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
    box-shadow: 0 0 8px rgba(13, 148, 136, 0.25) !important;
}

/* Nested picks styling */
.hst-call-forwarding-feature .hst-edit-cf-timeout {
    margin-top: 0.75rem;
}

.hst-edit-cf-dest__custom {
    margin-top: 0.55rem;
}

.hst-edit-cf-dest__custom.d-none,
.hst-edit-cf-dest__custom[hidden] {
    display: none !important;
}

/* CF destination Choices panel must open below and not be clipped by feature cards. */
.hst-edit-cf-dest,
.hst-edit-cf-dest .hst-edit-field-wrap,
.hst-call-forwarding-feature .hst-edit-cf-target,
.hst-call-forwarding-feature__card,
.hst-call-forwarding-feature,
.hst-cf-internal-stack {
    overflow: visible;
}

.hst-edit-cf-dest .choices {
    margin-bottom: 0;
}

/* Fixed overlay (set in JS) sits above page chrome / following CF modes. */
.hst-edit-cf-dest .choices__list--dropdown[data-hst-cf-dropdown-overlay="true"],
.hst-edit-cf-dest .choices__list[aria-expanded][data-hst-cf-dropdown-overlay="true"] {
    z-index: 4000 !important;
    overflow-y: auto;
}

/* Number Manager note card */
.hst-call-forwarding-feature__nm-note {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.01);
}

[data-theme-mode="light"] .hst-call-forwarding-feature__nm-note {
    border-color: rgba(15, 23, 42, 0.08);
    background: #f8fafc;
}

.hst-call-forwarding-feature__nm-note-icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    color: var(--hst-muted);
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme-mode="light"] .hst-call-forwarding-feature__nm-note-icon {
    background: #e2e8f0;
    border-color: rgba(15, 23, 42, 0.06);
    color: #64748b;
}

.hst-call-forwarding-feature__nm-note-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.hst-call-forwarding-feature__nm-note-text {
    font-size: 0.8rem;
    color: var(--hst-muted);
    line-height: 1.45;
    margin-bottom: 0;
}

.hst-call-forwarding-feature__nm-note-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    color: var(--hst-ink);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: all 0.2s ease;
}

[data-theme-mode="light"] .hst-call-forwarding-feature__nm-note-link {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
    color: #0f172a;
}

.hst-call-forwarding-feature__nm-note-link:hover,
.hst-call-forwarding-feature__nm-note-link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--hst-ink);
    outline: none;
    text-decoration: none;
}

[data-theme-mode="light"] .hst-call-forwarding-feature__nm-note-link:hover,
[data-theme-mode="light"] .hst-call-forwarding-feature__nm-note-link:focus-visible {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

.hst-call-forwarding-feature__nm-note-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.35);
}

/* CrazyPhone App QR feature card */
.hst-crazyphone-promo-card {
    border-radius: 1rem;
    border: 1px solid rgba(139, 92, 246, 0.18);
    background: 
        radial-gradient(100% 100% at 0% 0%, rgba(139, 92, 246, 0.08) 0%, rgba(219, 39, 119, 0.03) 60%, transparent 100%),
        var(--hst-surface-raised);
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

[data-theme-mode="light"] .hst-crazyphone-promo-card {
    background: 
        radial-gradient(100% 100% at 0% 0%, rgba(139, 92, 246, 0.04) 0%, rgba(219, 39, 119, 0.01) 60%, transparent 100%),
        var(--hst-surface-raised);
    border-color: rgba(139, 92, 246, 0.15);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.04);
}

.hst-crazyphone-promo-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 2.5rem;
    align-items: center;
}

@media (max-width: 991px) {
    .hst-crazyphone-promo-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.hst-crazyphone-promo-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hst-crazyphone-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.28);
    color: #c4b5fd;
    font-size: 0.725rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

[data-theme-mode="light"] .hst-crazyphone-badge {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
    color: #7c3aed;
}

.hst-crazyphone-promo-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--hst-ink);
    line-height: 1.25;
    margin: 0 0 0.75rem;
    letter-spacing: -0.015em;
}

.hst-crazyphone-promo-desc {
    font-size: 0.875rem;
    color: var(--hst-muted);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.hst-crazyphone-promo-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

@media (max-width: 575px) {
    .hst-crazyphone-promo-benefits {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.hst-crazyphone-promo-benefits li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.hst-benefit-icon-wrapper {
    flex-shrink: 0;
    color: #22c55e;
    font-size: 1.15rem;
    line-height: 1;
    margin-top: 0.15rem;
}

.hst-benefit-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hst-benefit-info strong {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--hst-ink);
}

.hst-benefit-info span {
    font-size: 0.775rem;
    color: var(--hst-muted);
    line-height: 1.35;
}

.hst-crazyphone-downloads-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border-radius: 0.5rem;
    background: #8b5cf6;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
    align-self: flex-start;
}

.hst-crazyphone-downloads-trigger-btn:hover {
    background: #7c3aed;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
}

.hst-crazyphone-downloads-trigger-btn:active {
    transform: translateY(0);
}

.hst-crazyphone-promo-qr-zone {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hst-crazyphone-qr-card-container {
    width: 100%;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.85rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

[data-theme-mode="light"] .hst-crazyphone-qr-card-container {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: none;
}

/* Inside QR card */
.hst-crazyphone-qr-placeholder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
}

.hst-crazyphone-qr-placeholder-icon {
    font-size: 2.25rem;
    color: var(--hst-muted);
    margin-bottom: 0.75rem;
    line-height: 1;
}

.hst-crazyphone-qr-placeholder-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin-bottom: 0.5rem;
}

.hst-crazyphone-qr-placeholder-card p {
    font-size: 0.775rem;
    color: var(--hst-muted);
    line-height: 1.45;
    margin-bottom: 1.25rem;
}

.hst-crazyphone-jump-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.hst-crazyphone-qr-feature__hint {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    color: var(--hst-muted);
    line-height: 1.45;
}

.hst-crazyphone-qr-feature__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.hst-crazyphone-qr-feature__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid var(--hst-border);
    background: rgba(255, 255, 255, 0.03);
}

.hst-crazyphone-qr-feature__image {
    width: 220px;
    height: 220px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .hst-crazyphone-qr-feature__visual {
    background: rgba(15, 23, 42, 0.03);
}

.hst-crazyphone-qr-feature__promo--clickable {
    display: block;
}

/* CrazyPhone downloads modal (manage page) */
.hst-crazyphone-downloads-hero {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin: 0 0 1.1rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(139, 92, 246, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(139, 92, 246, 0.14), transparent 55%),
        rgba(139, 92, 246, 0.06);
}

.hst-crazyphone-downloads-hero__icon {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.16);
    color: #a78bfa;
    font-size: 1.2rem;
}

.hst-crazyphone-downloads-hero__title {
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--hst-ink);
    line-height: 1.35;
}

.hst-crazyphone-downloads-hero__text {
    font-size: 0.8125rem;
    color: var(--hst-muted);
    line-height: 1.5;
}

.hst-crazyphone-downloads-section-title {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--hst-ink);
    text-transform: none;
}

.hst-crazyphone-downloads-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

@media (min-width: 480px) {
    .hst-crazyphone-downloads-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.hst-crazyphone-download-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--hst-border);
    border-radius: 0.65rem;
    background: var(--hst-surface-raised);
    color: var(--hst-ink);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    min-height: 44px;
}

.hst-crazyphone-download-card:hover,
.hst-crazyphone-download-card:focus-visible {
    border-color: rgba(139, 92, 246, 0.45);
    color: var(--hst-ink);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
    outline: none;
}

.hst-crazyphone-download-card__icon {
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.hst-crazyphone-download-card__icon.is-android {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

.hst-crazyphone-download-card__icon.is-apple {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

[data-theme-mode="light"] .hst-crazyphone-download-card__icon.is-apple {
    background: rgba(15, 23, 42, 0.08);
    color: #334155;
}

.hst-crazyphone-download-card__info {
    flex: 1;
    min-width: 0;
}

.hst-crazyphone-download-card__info strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.hst-crazyphone-download-card__info span {
    display: block;
    font-size: 0.75rem;
    color: var(--hst-muted);
    font-weight: 600;
}

.hst-crazyphone-download-card__action {
    color: var(--hst-muted);
    font-size: 1.1rem;
    transition: color 160ms ease;
}

.hst-crazyphone-download-card:hover .hst-crazyphone-download-card__action,
.hst-crazyphone-download-card:focus-visible .hst-crazyphone-download-card__action {
    color: var(--hst-ink);
}

.hst-crazyphone-downloads-note {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
    color: var(--hst-ink);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.hst-crazyphone-downloads-note > i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #fbbf24;
    font-size: 1.05rem;
}

.hst-crazyphone-downloads-steps {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.8125rem;
    color: var(--hst-ink);
    line-height: 1.55;
}

.hst-crazyphone-downloads-steps li + li {
    margin-top: 0.45rem;
}

.portal-modern-modal.hst-hybrid-modal.hst-crazyphone-downloads-modal .modal-body {
    padding-top: 1.1rem;
    padding-bottom: 1rem;
}

/* CrazyPhone QR list modal */
.hst-crazyphone-qr-modal__hero {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(20, 184, 166, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
        rgba(20, 184, 166, 0.06);
}

.hst-crazyphone-qr-modal__hero-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.5rem;
    background: rgba(20, 184, 166, 0.16);
    color: var(--hst-accent, #14b8a6);
    font-size: 1.15rem;
}

.hst-crazyphone-qr-modal__hero-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-crazyphone-qr-modal__hero-text {
    font-size: 0.8125rem;
    color: var(--hst-muted);
    line-height: 1.45;
}

.hst-crazyphone-qr-modal__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    border-radius: 0.65rem;
    border: 1px solid var(--hst-border);
    background: var(--hst-surface);
}

.hst-crazyphone-qr-modal__image {
    width: 220px;
    height: 220px;
    max-width: 100%;
    border-radius: 0.5rem;
    background: #ffffff;
}

.hst-crazyphone-qr-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.portal-modern-modal.hst-hybrid-modal.hst-crazyphone-qr-modal .modal-body {
    padding-top: 1.1rem;
    padding-bottom: 1rem;
}

[data-theme-mode="light"] .hst-crazyphone-qr-modal__visual {
    background: #f8fafc;
}

/* URI inbound promo (Extension & URI) — matches hst-moh-promo language, teal only */
.hst-uri-promo {
    border-radius: 0.75rem;
    border: 1px solid rgba(20, 184, 166, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.14), transparent 55%),
        linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.03)),
        var(--hst-surface-raised);
    overflow: hidden;
}

[data-theme-mode="light"] .hst-uri-promo {
    border-color: rgba(13, 148, 136, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
        linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(255, 255, 255, 0.92)),
        #f4f7f7;
}

.hst-uri-promo-inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
}

.hst-uri-promo-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hst-accent-deep, #0d9488);
    color: #ffffff;
    font-size: 1.25rem;
}

.hst-uri-promo-body {
    flex: 1;
    min-width: 0;
}

.hst-uri-promo-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.hst-uri-promo-copy {
    flex: 1 1 14rem;
    min-width: 0;
}

.hst-uri-promo-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hst-ink);
    line-height: 1.3;
    text-wrap: balance;
}

.hst-uri-promo-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--hst-muted);
    line-height: 1.45;
}

.hst-uri-promo-toggle {
    flex: 0 1 auto;
    margin: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(20, 184, 166, 0.22);
    background: rgba(16, 16, 16, 0.35);
}

[data-theme-mode="light"] .hst-uri-promo-toggle {
    border-color: rgba(13, 148, 136, 0.22);
    background: rgba(255, 255, 255, 0.75);
}

.hst-uri-promo-toggle .form-check-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hst-ink);
}

.hst-uri-promo-address {
    margin-top: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(16, 16, 16, 0.45);
}

[data-theme-mode="light"] .hst-uri-promo-address {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.85);
}

.hst-uri-promo-address-label {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hst-muted);
}

.hst-uri-promo-address-row {
    align-items: stretch;
}

.hst-edit-allow-uri .hst-uri-promo-address-input,
.hst-edit-allow-uri .hst-credential-row .hst-form-control,
.hst-edit-webrtc .hst-uri-promo-address-input,
.hst-edit-webrtc .hst-credential-row .hst-form-control {
    field-sizing: normal;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.hst-uri-promo-address-input {
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-color: rgba(20, 184, 166, 0.35) !important;
    background: rgba(10, 10, 10, 0.55) !important;
}

[data-theme-mode="light"] .hst-uri-promo-address-input {
    border-color: rgba(13, 148, 136, 0.35) !important;
    background: #ffffff !important;
    color: #0f172a;
}

.hst-uri-promo-hint {
    margin-top: 0.55rem;
    color: var(--hst-muted);
    line-height: 1.45;
}

.hst-uri-tip {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(16, 16, 16, 0.35);
}

[data-theme-mode="light"] .hst-uri-tip {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.72);
}

.hst-uri-tip__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.45rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #5eead4;
}

.hst-uri-tip__label i {
    font-size: 0.9rem;
}

[data-theme-mode="light"] .hst-uri-tip__label {
    color: #0f766e;
}

.hst-uri-tip__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.hst-uri-tip__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
}

.hst-uri-tip__code {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 1.45rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: rgba(20, 184, 166, 0.14);
    color: #5eead4;
    font-size: 0.8125rem;
    font-weight: 700;
}

[data-theme-mode="light"] .hst-uri-tip__code {
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
}

.hst-uri-tip__title {
    margin: 0;
    flex: 1 1 10rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--hst-ink, #f6f7fb);
}

[data-theme-mode="light"] .hst-uri-tip__title {
    color: #0f172a;
}

.hst-uri-tip__text {
    color: var(--hst-muted, #b3b3b3);
    line-height: 1.45;
}

.hst-uri-tip__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    color: var(--hst-muted, #b3b3b3);
    line-height: 1.4;
}

.hst-uri-tip__meta code {
    color: var(--hst-ink, #f6f7fb);
}

[data-theme-mode="light"] .hst-uri-tip__meta code {
    color: #0f172a;
}

.hst-uri-tip__meta-sep {
    opacity: 0.55;
}

.hst-uri-tip__link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.1rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5eead4;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    min-height: 44px;
    cursor: pointer;
}

.hst-uri-tip__link:hover,
.hst-uri-tip__link:focus-visible {
    color: #99f6e4;
    text-decoration: underline;
    outline: none;
}

[data-theme-mode="light"] .hst-uri-tip__link {
    color: #0f766e;
}

[data-theme-mode="light"] .hst-uri-tip__link:hover,
[data-theme-mode="light"] .hst-uri-tip__link:focus-visible {
    color: #115e59;
}

@media (max-width: 575.98px) {
    .hst-uri-promo-inner {
        flex-direction: column;
    }

    .hst-uri-promo-header {
        flex-direction: column;
    }

    .hst-uri-promo-toggle {
        width: 100%;
    }
}

/* Internal dialling / Extension & URI feature card */
.hst-internal-dialling-feature__promo {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(20, 184, 166, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
        rgba(20, 184, 166, 0.06);
}

.hst-internal-dialling-feature__promo-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 184, 166, 0.16);
    color: var(--hst-accent);
    font-size: 1.05rem;
}

.hst-internal-dialling-feature__promo-text {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--hst-ink);
    line-height: 1.45;
}

.hst-internal-dialling-feature__fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.85rem;
}

.hst-internal-dialling-feature__field {
    flex: 0 1 20rem;
    width: 100%;
    max-width: 22rem;
}

.hst-internal-dialling-feature__fields .hst-edit-field-wrap {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .hst-internal-dialling-feature__field {
        flex: 1 1 100%;
        max-width: none;
    }
}

.hst-moh-page {
    max-width: 100%;
}

.hst-moh-upload-row .hst-moh-upload-btn {
    min-height: calc(1.5em + 0.75rem + 2px);
}

.hst-moh-upload-hint {
    max-width: 42rem;
}

.hst-moh-empty-state,
.hst-rec-empty-state {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.hst-list-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    margin: 0 auto;
    max-width: 34rem;
}

.hst-list-empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    margin: 0 auto 0.15rem;
    background: rgba(20, 184, 166, 0.14);
    border: 1px solid rgba(20, 184, 166, 0.28);
    color: var(--hst-accent);
    font-size: 1.35rem;
    line-height: 1;
}

.hst-list-empty-state-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hst-ink);
    letter-spacing: -0.01em;
}

.hst-list-empty-state-message {
    margin: 0 auto;
    max-width: 28rem;
    color: var(--hst-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Empty state — advertisement-style (Hybrid SIP Trunks) */
.hst-ad-empty-state {
    position: relative;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.28) 0%, rgba(45, 212, 191, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    margin: 0.35rem auto;
    max-width: 34rem;
    text-align: center;
}

.hst-ad-empty-state-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
    animation: rgAdGlowRotate 8s linear infinite;
}

.hst-ad-empty-state-inner {
    position: relative;
    z-index: 2;
    background: var(--hst-surface-raised, #161616);
    border-radius: 0.95rem;
    padding: 1.35rem 1.25rem;
    text-align: center;
}

.hst-ad-empty-state-inner::after {
    content: '';
    position: absolute;
    bottom: -24px;
    right: -24px;
    width: 96px;
    height: 96px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hst-ad-empty-state-icon {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 0.85rem;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.22) 0%, rgba(45, 212, 191, 0.08) 100%);
    border: 1px solid rgba(20, 184, 166, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hst-accent, #14b8a6);
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.18);
}

.hst-ad-empty-state-icon i {
    font-size: 1.35rem;
    line-height: 1;
}

.hst-ad-empty-state-title {
    position: relative;
    z-index: 2;
    color: var(--hst-ink, #f6f7fb);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
    padding: 0 1.25rem;
}

.hst-ad-empty-state-message {
    position: relative;
    z-index: 2;
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 26rem;
}

.hst-ad-empty-state-actions {
    position: relative;
    z-index: 2;
    margin-top: 1.15rem;
}

[data-theme-mode="light"] .hst-ad-empty-state-inner {
    background: #ffffff;
}

[data-theme-mode="light"] .hst-ad-empty-state-title {
    color: #111827;
}

.hst-login-permissions-toggle-all {
    min-height: auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.15s ease;
    text-transform: uppercase;
}

.hst-login-permissions-toggle-all:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

[data-theme-mode="dark"] .hst-login-permissions-toggle-all {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.55);
}

[data-theme-mode="dark"] .hst-login-permissions-toggle-all:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

/* Create-login modal — compact no-trunks promo (reuses hst-calls-live-promo-empty-*) */
.hst-logins-no-trunks-promo__hero {
    padding: 1.35rem 1.15rem;
}

.hst-logins-no-trunks-promo__title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.hst-logins-no-trunks-promo .hst-calls-live-promo-empty-badge {
    margin-bottom: 0.75rem;
}

.hst-logins-no-trunks-promo .hst-calls-live-promo-empty-subtitle {
    font-size: 0.875rem;
    max-width: 28rem;
}

.hst-moh-modal {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    color: var(--hst-ink);
}

.hst-moh-player-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    padding: 0.75rem 1rem;
    background: var(--hst-surface-raised);
    border-top: 1px solid var(--hst-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}

.hst-moh-player-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.hst-moh-player-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hst-ink);
    min-width: 8rem;
}

.hst-moh-player-audio {
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 100%;
    height: 2.25rem;
}

.hst-moh-player-close {
    color: var(--hst-muted);
    padding: 0.25rem;
    line-height: 1;
}

.hst-moh-player-close:hover {
    color: var(--hst-ink);
}

@media (max-width: 575.98px) {
    .hst-moh-promo-inner {
        flex-direction: column;
    }
}

.hst-field-error {
    margin-top: 0.35rem;
    color: #ef4444;
    font-size: 0.8125rem;
}

[data-theme-mode="dark"] .hst-field-error {
    color: #f87171;
}

.hst-edit-field.is-invalid,
.hst-edit-field-wrap .is-invalid {
    border-color: rgba(239, 68, 68, 0.55) !important;
}

.hst-pw-requirements {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--hst-border);
    border-radius: 0.5rem;
    background: var(--hst-surface-raised);
}

.hst-pw-requirements-title {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hst-muted);
}

.hst-pw-requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hst-pw-req-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--hst-muted);
    transition: color 0.15s ease;
}

.hst-pw-req-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
    line-height: 1;
}

.hst-pw-req-item--pending .hst-pw-req-icon {
    color: var(--hst-muted);
    opacity: 0.65;
}

.hst-pw-req-item--pass {
    color: var(--hst-ink);
}

.hst-pw-req-item--pass .hst-pw-req-icon {
    color: var(--hst-accent);
}

.hst-pw-req-item--fail {
    color: #f87171;
}

.hst-pw-req-item--fail .hst-pw-req-icon {
    color: #ef4444;
}

[data-theme-mode="light"] .hst-pw-req-item--fail {
    color: #dc2626;
}

[data-theme-mode="light"] .hst-pw-req-item--fail .hst-pw-req-icon {
    color: #dc2626;
}

.hst-form-check-label {
    color: var(--hst-ink);
    font-size: 0.875rem;
}

.hst-warn-text {
    color: #d97706;
    font-size: 0.875rem;
}

[data-theme-mode="dark"] .hst-warn-text {
    color: #fbbf24;
}

.hst-detail-sections-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .hst-detail-sections-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .hst-detail-sections-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hst-detail-panel {
    margin-bottom: 0;
    height: 100%;
    min-width: 0;
}

.hst-cf-internal-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    min-width: 0;
}

.hst-cf-internal-stack > [data-hst-edit-section] {
    min-width: 0;
}

.hst-edit-actions-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 1rem;
    padding-top: 0.5rem;
}

.hst-edit-actions-bar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.85rem 1rem;
    border: 1px solid var(--hst-border);
    border-radius: 0.5rem;
    background: var(--hst-surface);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.12);
}

[data-theme-mode="dark"] .hst-edit-actions-bar__inner {
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--hst-surface-raised);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
}

[data-hst-edit-section].hst-edit-section--dirty-focus {
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.35);
}

@media (max-width: 575.98px) {
    .hst-edit-actions-bar__inner {
        flex-direction: column;
    }

    .hst-edit-actions-bar__inner .btn {
        width: 100%;
        justify-content: center;
    }
}

.hst-edit-section-actions {
    position: sticky;
    bottom: 0;
    margin-top: 1rem;
    padding-top: 0.75rem;
    z-index: 3;
}

.hst-edit-section-actions__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--hst-border);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        var(--hst-surface) 18%
    );
    border-radius: 0 0 0.5rem 0.5rem;
}

[data-theme-mode="dark"] .hst-edit-section-actions__inner {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        var(--hst-surface-raised) 20%
    );
}

@media (max-width: 575.98px) {
    .hst-edit-section-actions__inner {
        flex-direction: column;
    }

    .hst-edit-section-actions__inner .btn {
        width: 100%;
        justify-content: center;
    }
}

.hst-detail-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.hst-detail-row {
    display: grid;
    grid-template-columns: minmax(8rem, 12.5rem) minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: start;
}

.hst-detail-row dt {
    margin: 0;
    color: var(--hst-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
}

.hst-detail-row dd {
    margin: 0;
    color: var(--hst-ink);
    font-size: 0.875rem;
    min-width: 0;
}

.hst-table thead th .custom-kb-tooltip-wrapper {
    vertical-align: middle;
}

/* Non-modal Hybrid tips mount here (above page chrome). */
#hst-tooltip-layer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 10000020 !important;
    overflow: visible !important;
}

.hst-floating-tooltip {
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: calc(100vw - 1.5rem) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2000 !important;
    /* Do NOT set inset — it overrides inline top/left used for placement. */
}

#hst-tooltip-layer .hst-floating-tooltip {
    position: fixed !important;
}

.hst-login-modal > .hst-floating-tooltip,
.modal-content > .hst-floating-tooltip {
    position: absolute !important;
}

.hst-login-modal.modal-content {
    position: relative !important;
}

body.modal-open .hst-floating-tooltip,
body:has([class*="wholesale-"][class*="-drawer"].open) .hst-floating-tooltip,
#hst-tooltip-layer .hst-floating-tooltip,
.hst-login-modal > .hst-floating-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Login modal + scrollable dialog overflow clips tips; open while active. */
.modal-dialog:has(.hst-login-modal .hst-tooltip-active),
.modal-dialog:has(.hst-login-modal .hst-floating-tooltip),
.hst-login-modal:has(.hst-tooltip-active),
.hst-login-modal:has(.hst-floating-tooltip),
.hst-login-modal:has(.hst-tooltip-active) > form,
.hst-login-modal:has(.hst-floating-tooltip) > form,
.hst-login-modal:has(.hst-tooltip-active) > form > .modal-body,
.hst-login-modal:has(.hst-floating-tooltip) > form > .modal-body {
    overflow: visible !important;
}

/* Suppress clipped CSS-absolute tips inside Hybrid login modals (JS handles them). */
#hst-login-create-modal .custom-kb-tooltip-wrapper:hover > .custom-kb-tooltip-content:not(.hst-floating-tooltip),
#hst-login-create-modal .custom-kb-tooltip-wrapper:focus-within > .custom-kb-tooltip-content:not(.hst-floating-tooltip),
#hst-login-edit-modal .custom-kb-tooltip-wrapper:hover > .custom-kb-tooltip-content:not(.hst-floating-tooltip),
#hst-login-edit-modal .custom-kb-tooltip-wrapper:focus-within > .custom-kb-tooltip-content:not(.hst-floating-tooltip),
#hst-login-disable-modal .custom-kb-tooltip-wrapper:hover > .custom-kb-tooltip-content:not(.hst-floating-tooltip),
#hst-login-disable-modal .custom-kb-tooltip-wrapper:focus-within > .custom-kb-tooltip-content:not(.hst-floating-tooltip) {
    visibility: hidden !important;
    opacity: 0 !important;
}

.offcanvas.show .hst-floating-tooltip {
    z-index: 1105 !important;
}

.hst-floating-tooltip[data-hst-tooltip-placement="bottom"]::after {
    top: auto !important;
    bottom: 100% !important;
    border-color: transparent transparent #000000 transparent !important;
}

[data-theme-mode="dark"] .hst-floating-tooltip[data-hst-tooltip-placement="bottom"]::after {
    border-color: transparent transparent #101010 transparent !important;
}

.hst-page-container .table-responsive:has(.custom-kb-tooltip-wrapper),
.hst-page-container .hst-panel:has(.custom-kb-tooltip-wrapper),
.hst-page-container .hst-detail-panel:has(.custom-kb-tooltip-wrapper) {
    overflow: visible !important;
}

.hst-credential-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.hst-credential-row .hst-form-control {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

.hst-credential-row .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    white-space: nowrap;
}

.hst-credential-row .btn:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

.hst-list-username-copy.btn-sm,
.hst-list-username-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.3rem;
    line-height: 1;
    flex-shrink: 0;
    min-width: 1.5rem;
    min-height: 1.5rem;
    font-size: 0.8rem;
}

.hst-list-username-copy i {
    font-size: 0.8rem;
    line-height: 1;
}

.hst-list-nickname {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.hst-list-nickname--card {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .hst-detail-row,
    .hst-card-dl > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* Hybrid SIP Trunks — Recording Management */
.hst-rec-page {
    position: relative;
    padding-bottom: 4.5rem;
}

.hst-rec-metric-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--hst-surface-raised);
    border: 1px solid var(--hst-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    min-height: 100%;
}

.hst-rec-metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.12);
    color: var(--hst-accent);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.hst-rec-metric-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hst-muted);
}

.hst-rec-metric-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--hst-ink);
    line-height: 1.2;
}

.hst-rec-filters-panel {
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}

.hst-rec-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.hst-rec-filters-bar .hst-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hst-rec-filters-body {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hst-border);
}

.hst-rec-filter-footer {
    border-color: var(--hst-border) !important;
}

.hst-rec-retention-panel-note {
    color: var(--hst-muted, #64748b);
}

.hst-rec-settings-panel {
    padding: 0.85rem 1rem !important;
}

.hst-rec-settings-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.hst-rec-settings-panel .hst-panel-title,
#hst-rec-settings-panel .hst-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.hst-rec-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.85rem 1.25rem;
    align-items: start;
}

.hst-rec-settings-col--retention {
    min-height: 0;
}

.hst-rec-settings-empty {
    border: 1px solid var(--hst-border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    background: rgba(20, 184, 166, 0.06);
}

.hst-rec-settings-empty-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-rec-retention-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.hst-rec-settings-footer {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--hst-border);
}

@media (max-width: 767.98px) {
    .hst-rec-settings-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.hst-rec-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hst-rec-badge--in {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.22);
}

.hst-rec-badge--out {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.22);
}

.hst-rec-badge--internal {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.22);
}

.hst-rec-badge--neutral {
    background: rgba(148, 163, 184, 0.12);
    color: var(--hst-muted);
    border: 1px solid var(--hst-border);
}

.hst-rec-modal {
    background: var(--hst-surface-raised);
    border: 1px solid var(--hst-border);
    color: var(--hst-ink);
}

.hst-rec-detail-dl {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.hst-rec-detail-dl > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.5rem;
}

.hst-rec-detail-dl dt {
    margin: 0;
    color: var(--hst-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.hst-rec-detail-dl dd {
    margin: 0;
    color: var(--hst-ink);
    font-size: 0.875rem;
    word-break: break-word;
}

.hst-rec-detail-meta-col {
    border-color: var(--hst-border) !important;
}

.hst-rec-audit-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hst-rec-audit-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--hst-border);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--hst-ink);
    background: rgba(255, 255, 255, 0.02);
}

.hst-rec-player-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above Bootstrap modal (1055) so playback controls stay reachable. */
    z-index: calc(var(--bs-modal-zindex, 1055) + 10);
    background: var(--hst-surface-raised);
    border-top: 1px solid var(--hst-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.75rem 1rem;
}

.hst-rec-detail-player {
    border-top: 1px solid var(--hst-border);
    padding-top: 1rem;
}

.hst-rec-detail-player__label {
    color: var(--hst-ink);
}

.hst-rec-detail-player__audio {
    height: 40px;
    min-height: 40px;
}

.hst-rec-player-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hst-rec-player-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hst-ink);
    min-width: 8rem;
}

.hst-rec-player-audio {
    flex: 1 1 280px;
    max-width: 520px;
    height: 36px;
}

.hst-rec-player-close {
    color: var(--hst-muted);
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem;
}

.hst-rec-player-close:hover {
    color: var(--hst-accent);
}

@media (max-width: 767.98px) {
    .hst-rec-detail-dl > div {
        grid-template-columns: 1fr;
    }

    .hst-rec-detail-meta-col {
        border-right: 0 !important;
        border-bottom: 1px solid var(--hst-border);
        padding-bottom: 1rem;
        margin-bottom: 0.5rem;
    }
}

.hst-status-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.hst-status-cell .hst-list-enable-switch {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    min-height: auto;
}

/* Hybrid SIP — live telemetry badges / DND / presence (manage + related) */
.hst-list-live-badges,
.hst-live-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.hst-badge--busy {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.3);
    color: #ea580c;
}

[data-theme-mode="dark"] .hst-badge--busy {
    color: #fb923c;
}

.hst-badge--hold {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.3);
    color: #ca8a04;
}

[data-theme-mode="dark"] .hst-badge--hold {
    color: #facc15;
}

.hst-badge--dnd {
    background: rgba(220, 53, 69, 0.14);
    border-color: rgba(220, 53, 69, 0.35);
    color: #b02a37;
}

[data-theme-mode="dark"] .hst-badge--dnd {
    color: #f87171;
}

.hst-presence-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--hst-border);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hst-ink);
}

[data-theme-mode="light"] .hst-presence-chip {
    background: rgba(15, 23, 42, 0.04);
}

.hst-telemetry-presence--available,
.hst-badge.hst-telemetry-presence--available,
.hst-presence-chip.hst-telemetry-presence--available {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
    color: #16a34a;
}

[data-theme-mode="dark"] .hst-telemetry-presence--available,
[data-theme-mode="dark"] .hst-badge.hst-telemetry-presence--available,
[data-theme-mode="dark"] .hst-presence-chip.hst-telemetry-presence--available {
    color: #4ade80;
}

.hst-telemetry-presence--busy { border-color: rgba(249, 115, 22, 0.4); }
.hst-telemetry-presence--dnd { border-color: rgba(239, 68, 68, 0.4); }
.hst-telemetry-presence--away,
.hst-telemetry-presence--unavailable,
.hst-telemetry-presence--unknown { border-color: rgba(148, 163, 184, 0.35); }

/* Hybrid SIP — Overview: Live calls + Identity two-column cards */
.hst-identity-overview {
    min-width: 0;
    border: 0;
    outline: none;
    box-shadow: none;
}

/* Dirty highlight belongs on Trunk Details only — never ring the whole Overview. */
#hst-section-identity.hst-edit-section--dirty-focus {
    box-shadow: none;
}

.hst-identity-live-grid__identity.hst-edit-section--dirty-focus,
.hst-identity-live-grid__identity[data-hst-edit-section].hst-edit-section--dirty-focus {
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.35);
}

.hst-identity-live-grid__calls.hst-panel,
.hst-identity-live-grid__identity.hst-panel {
    border-color: var(--hst-card-border);
}

.hst-trunk-details-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
}

.hst-trunk-details-fields > .hst-edit-field-wrap {
    margin-bottom: 0;
    min-width: 0;
    max-width: 100%;
}

.hst-trunk-details-fields > .hst-edit-field-wrap:nth-child(4) {
    grid-column: span 3;
}

.hst-trunk-details-fields .hst-credential-row {
    width: 100%;
}

.hst-trunk-details-fields .hst-credential-row .hst-form-control {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    field-sizing: normal;
}

.hst-trunk-details-fields .hst-edit-field {
    width: 100%;
    min-width: 0;
    max-width: none;
    field-sizing: normal;
}

.hst-trunk-details-fields .hst-muted {
    max-width: none;
}

.hst-trunk-details-status-row .hst-edit-toggle {
    margin-bottom: 0 !important;
}

.hst-trunk-details-status-row .form-check {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .hst-trunk-details-fields {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .hst-trunk-details-fields > .hst-edit-field-wrap:nth-child(4) {
        grid-column: span 1;
    }
}

.hst-identity-live-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
}

.hst-identity-live-grid__calls,
.hst-identity-live-grid__identity {
    min-width: 0;
    height: 100%;
}

.hst-overview-calls-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100%;
}

.hst-overview-calls-card .hst-overview-calls__body {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    align-content: flex-start;
}

.hst-overview-calls-card .hst-overview-calls__link {
    align-self: flex-start;
    margin-top: 0.15rem;
}

.hst-overview-calls-card .hst-overview-calls-empty {
    flex: 1 1 auto;
}

.hst-overview-calls-empty {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10.5rem;
    padding: 1px;
    border-radius: 0.85rem;
    background: linear-gradient(
        135deg,
        rgba(20, 184, 166, 0.32) 0%,
        rgba(20, 184, 166, 0.08) 45%,
        rgba(255, 255, 255, 0.04) 100%
    );
    overflow: hidden;
}

.hst-overview-calls-empty__glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.1) 0%, transparent 58%);
    pointer-events: none;
    z-index: 1;
}

.hst-overview-calls-empty__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    padding: 1.15rem 1rem 1.25rem;
    border-radius: 0.8rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
        var(--hst-surface, #161616);
}

.hst-overview-calls-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.35rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.24) 0%, rgba(20, 184, 166, 0.08) 100%);
    border: 1px solid rgba(20, 184, 166, 0.32);
    color: var(--hst-accent, #14b8a6);
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.16);
    font-size: 1.4rem;
    line-height: 1;
}

.hst-overview-calls-empty__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hst-ink, #f6f7fb);
}

.hst-overview-calls-empty__message {
    max-width: 18rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--hst-muted, #b3b3b3);
}

.hst-overview-calls-empty__actions {
    margin-top: 0.55rem;
}

.hst-overview-calls-empty__actions .hst-overview-calls__link {
    min-height: 2.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(20, 184, 166, 0.35);
    background: rgba(20, 184, 166, 0.1);
}

.hst-overview-calls-empty__actions .hst-overview-calls__link:hover,
.hst-overview-calls-empty__actions .hst-overview-calls__link:focus-visible {
    background: rgba(20, 184, 166, 0.18);
    text-decoration: none;
}

[data-theme-mode="light"] .hst-overview-calls-empty {
    background: linear-gradient(
        135deg,
        rgba(13, 148, 136, 0.22) 0%,
        rgba(13, 148, 136, 0.06) 45%,
        rgba(15, 23, 42, 0.04) 100%
    );
}

[data-theme-mode="light"] .hst-overview-calls-empty__inner {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.1), transparent 55%),
        #ffffff;
}

[data-theme-mode="light"] .hst-overview-calls-empty__actions .hst-overview-calls__link {
    border-color: rgba(13, 148, 136, 0.3);
    background: rgba(20, 184, 166, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .hst-overview-calls-empty__glow {
        display: none;
    }
}

@media (min-width: 768px) {
    .hst-identity-live-grid--paired {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Hybrid SIP — Overview live ops console (compact PBX glance) */
.hst-overview-ops {
    margin: 0 0 1rem;
    border: 0;
    outline: none;
    box-shadow: none;
}

.hst-overview-console {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 0;
    outline: none;
    box-shadow: none;
}

.hst-ops-console--embedded {
    margin: 0;
    padding: 0;
    border: 0;
}

.hst-overview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "identity actions";
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--hst-card-border, rgba(20, 184, 166, 0.38));
    background: #161616;
}

[data-theme-mode="light"] .hst-overview-hero {
    border-color: var(--hst-card-border, rgba(13, 148, 136, 0.35));
    background: #ffffff;
}

.hst-overview-hero__identity {
    grid-area: identity;
    min-width: 0;
}

.hst-overview-hero__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--hst-ink, #f6f7fb);
    text-wrap: balance;
}

.hst-overview-hero__aor {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--hst-muted, #b3b3b3);
}

.hst-overview-hero__status {
    grid-area: status;
}

.hst-overview-hero__status .hst-live-badge-row {
    gap: 0.3rem;
}

.hst-overview-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.hst-overview-actions__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.75rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #e5e7eb;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

/* Icon accents — align with dashboard quick-action colours */
.hst-overview-actions__link i {
    font-size: 1.05rem;
    line-height: 1;
    transition: color 160ms ease-out;
}

.hst-overview-actions__link--calls i { color: #60a5fa; }
.hst-overview-actions__link--trunk-login i { color: #f472b6; }
.hst-overview-actions__link--cdr i { color: #a78bfa; }
.hst-overview-actions__link--reg i { color: #fb923c; }
.hst-overview-actions__link--logs i { color: #2dd4bf; }
.hst-overview-actions__link--feature-codes i { color: #14b8a6; }
.hst-overview-actions__link--blf i { color: #2dd4bf; }

button.hst-overview-actions__link {
    font: inherit;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.hst-overview-actions__link:hover,
.hst-overview-actions__link:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f6f7fb;
    text-decoration: none;
}

.hst-overview-actions__link--calls:hover i,
.hst-overview-actions__link--calls:focus-visible i { color: #93c5fd; }
.hst-overview-actions__link--trunk-login:hover i,
.hst-overview-actions__link--trunk-login:focus-visible i { color: #f9a8d4; }
.hst-overview-actions__link--cdr:hover i,
.hst-overview-actions__link--cdr:focus-visible i { color: #c4b5fd; }
.hst-overview-actions__link--reg:hover i,
.hst-overview-actions__link--reg:focus-visible i { color: #fdba74; }
.hst-overview-actions__link--logs:hover i,
.hst-overview-actions__link--logs:focus-visible i { color: #5eead4; }
.hst-overview-actions__link--feature-codes:hover i,
.hst-overview-actions__link--feature-codes:focus-visible i { color: #5eead4; }
.hst-overview-actions__link--blf:hover i,
.hst-overview-actions__link--blf:focus-visible i { color: #5eead4; }

[data-theme-mode="light"] .hst-overview-actions__link {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
    color: #334155;
}

[data-theme-mode="light"] .hst-overview-actions__link--calls i { color: #2563eb; }
[data-theme-mode="light"] .hst-overview-actions__link--trunk-login i { color: #db2777; }
[data-theme-mode="light"] .hst-overview-actions__link--cdr i { color: #7c3aed; }
[data-theme-mode="light"] .hst-overview-actions__link--reg i { color: #ea580c; }
[data-theme-mode="light"] .hst-overview-actions__link--logs i { color: #0d9488; }
[data-theme-mode="light"] .hst-overview-actions__link--feature-codes i { color: #0d9488; }
[data-theme-mode="light"] .hst-overview-actions__link--blf i { color: #0f766e; }

[data-theme-mode="light"] .hst-overview-actions__link:hover,
[data-theme-mode="light"] .hst-overview-actions__link:focus-visible {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.hst-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.hst-overview-block {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--hst-card-border, rgba(20, 184, 166, 0.38));
    background: #161616;
}

[data-theme-mode="light"] .hst-overview-block {
    border-color: var(--hst-card-border, rgba(13, 148, 136, 0.35));
    background: #ffffff;
}

.hst-overview-block__title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.55rem;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--hst-ink, #f6f7fb);
}

.hst-overview-block__title i {
    color: var(--hst-muted, #b3b3b3);
    font-size: 1rem;
}

.hst-overview-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.55rem;
}

.hst-overview-block__meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hst-muted, #b3b3b3);
}

.hst-overview-dl {
    display: grid;
    gap: 0.35rem 0;
    margin: 0;
}

.hst-overview-dl > div {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hst-overview-dl > div:last-child {
    border-bottom: 0;
}

[data-theme-mode="light"] .hst-overview-dl > div {
    border-bottom-color: rgba(15, 23, 42, 0.06);
}

.hst-overview-dl dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hst-muted, #b3b3b3);
}

.hst-overview-dl dd {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--hst-ink, #f6f7fb);
    word-break: break-word;
}

.hst-overview-dnd--on {
    border-color: var(--hst-card-border, rgba(20, 184, 166, 0.38));
    background: #1a1214;
}

[data-theme-mode="light"] .hst-overview-dnd--on {
    border-color: var(--hst-card-border, rgba(13, 148, 136, 0.35));
    background: #fff8f8;
}

.hst-overview-dnd__row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hst-overview-dnd__switch {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
}

.hst-overview-dnd__switch .form-check-input {
    width: 2.75rem;
    height: 1.45rem;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.hst-overview-dnd__switch .form-check-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hst-ink, #f6f7fb);
    cursor: pointer;
}

.hst-overview-dnd__mode .hst-form-label {
    margin-bottom: 0.3rem;
}

.hst-overview-dnd__mode .form-select {
    min-height: 2.75rem;
}

.hst-overview-dnd__warn {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid rgba(234, 179, 8, 0.35);
    background: rgba(234, 179, 8, 0.08);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #facc15;
}

[data-theme-mode="light"] .hst-overview-dnd__warn {
    color: #a16207;
    background: rgba(234, 179, 8, 0.1);
}

.hst-overview-dnd__warn i {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.hst-overview-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.35rem 0;
    font-size: 0.875rem;
    color: var(--hst-muted, #b3b3b3);
}

.hst-overview-empty i {
    font-size: 1.15rem;
    opacity: 0.85;
}

.hst-overview-devices__scroll {
    overflow-x: auto;
    max-height: 11rem;
    overflow-y: auto;
}

.hst-overview-devices__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.hst-overview-devices__table th,
.hst-overview-devices__table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    vertical-align: top;
    color: var(--hst-ink, #f6f7fb);
}

.hst-overview-devices__table th {
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--hst-muted, #b3b3b3);
    white-space: nowrap;
}

.hst-overview-devices__table tbody tr:last-child td {
    border-bottom: 0;
}

[data-theme-mode="light"] .hst-overview-devices__table th,
[data-theme-mode="light"] .hst-overview-devices__table td {
    border-bottom-color: rgba(15, 23, 42, 0.06);
}

.hst-overview-devices__ua {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hst-muted, #b3b3b3);
}

.hst-overview-presence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    padding: 0.15rem 0.15rem 0;
}

.hst-overview-presence--in-dnd {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

[data-theme-mode="light"] .hst-overview-presence--in-dnd {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.hst-overview-presence__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--hst-muted, #b3b3b3);
}

.hst-overview-presence__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.hst-overview-calls__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.hst-overview-calls__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 14rem;
    min-width: 0;
}

.hst-overview-call {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="light"] .hst-overview-call {
    border-color: rgba(15, 23, 42, 0.06);
    background: rgba(15, 23, 42, 0.02);
}

.hst-overview-call__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 10rem;
}

.hst-overview-call__peer {
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--hst-ink, #f6f7fb);
}

.hst-overview-call__meta {
    line-height: 1.35;
}

.hst-overview-call__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.hst-overview-calls__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.15rem;
    font-size: 0.8125rem;
    font-weight: 650;
    color: #14b8a6;
    text-decoration: none;
    white-space: nowrap;
}

.hst-overview-calls__link:hover,
.hst-overview-calls__link:focus-visible {
    color: #2dd4bf;
    text-decoration: underline;
}

[data-theme-mode="light"] .hst-overview-calls__link {
    color: #0f766e;
}

@media (max-width: 991.98px) {
    .hst-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .hst-overview-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "identity"
            "actions";
        padding: 0.75rem;
    }

    .hst-overview-actions {
        justify-content: flex-start;
    }

    .hst-overview-dl > div {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hst-overview-actions__link {
        transition: none;
    }
}

.hst-detail-sidenav-group {
    margin: 0.4rem 0 0.15rem;
    padding: 0 0.45rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hst-muted, #b3b3b3);
}

.hst-detail-sidenav > .hst-detail-sidenav-list:first-child + .hst-detail-sidenav-group {
    margin-top: 0.35rem;
}

.hst-dnd-control .hst-inline-feedback {
    font-size: 0.875rem;
}

.hst-inline-feedback--ok {
    color: #16a34a;
}

[data-theme-mode="dark"] .hst-inline-feedback--ok {
    color: #4ade80;
}

.hst-inline-feedback--info {
    color: #0f766e;
}

[data-theme-mode="dark"] .hst-inline-feedback--info {
    color: #5eead4;
}

.hst-inline-feedback--error {
    color: #dc2626;
}

[data-theme-mode="dark"] .hst-inline-feedback--error {
    color: #f87171;
}

.hst-telemetry-unavailable-banner {
    border-radius: 8px;
}

.hst-list-enable-switch .form-check-input {
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Hybrid SIP — shared teal modal chrome (propagation + recording settings; overrides portal Operational Red) */
.hst-hybrid-modal {
    --hst-surface: #ffffff;
    --hst-surface-raised: #f8fafc;
    --hst-border: rgba(15, 23, 42, 0.1);
    --hst-ink: #0f172a;
    --hst-muted: #64748b;
    --hst-accent: #14b8a6;
    --hst-accent-deep: #0d9488;
    background: var(--hst-surface) !important;
    border: 1px solid var(--hst-border) !important;
    color: var(--hst-ink) !important;
}

[data-theme-mode="dark"] .hst-hybrid-modal {
    --hst-surface: #161616;
    --hst-surface-raised: #1a1a1a;
    --hst-border: rgba(255, 255, 255, 0.09);
    --hst-ink: #f6f7fb;
    --hst-muted: #b3b3b3;
    --hst-accent: #14b8a6;
    --hst-accent-deep: #0f766e;
    background: var(--hst-surface) !important;
    border-color: var(--hst-border) !important;
    color: var(--hst-ink) !important;
}

.portal-modern-modal.hst-hybrid-modal .modal-header {
    background: linear-gradient(90deg, var(--hst-accent-deep) 0%, var(--hst-accent) 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.portal-modern-modal.hst-hybrid-modal .modal-title {
    color: #f6f7fb !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.portal-modern-modal.hst-hybrid-modal .modal-title i {
    color: #ccfbf1 !important;
    font-size: 1.25rem !important;
}

.portal-modern-modal.hst-hybrid-modal .modal-body {
    padding: 1.75rem 1.5rem 1.5rem !important;
    background: var(--hst-surface) !important;
    color: var(--hst-ink) !important;
}

.portal-modern-modal.hst-hybrid-modal .modal-footer {
    background: var(--hst-surface) !important;
    border-top: 1px solid var(--hst-border) !important;
    padding: 1rem 1.5rem !important;
}

/* Compact Trunk Login Modal Layout */
#hst-login-create-modal .modal-dialog,
#hst-login-edit-modal .modal-dialog,
.modal-dialog:has(.hst-login-modal) {
    max-width: 920px !important;
    max-height: calc(100vh - 3.5rem) !important;
    height: auto !important;
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
}

/* Form wraps modal-body + modal-footer, breaking Bootstrap's scrollable
   flex chain. Restore it so the body scrolls and footer stays pinned in viewport. */
.hst-login-modal {
    max-height: calc(100vh - 3.5rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.hst-login-modal > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.hst-login-modal > form > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 1rem 1.25rem !important;
}

.hst-login-modal > form > .modal-footer {
    flex: 0 0 auto !important;
    padding: 0.75rem 1.25rem !important;
}

.hst-login-modal .modal-header {
    padding: 0.85rem 1.25rem !important;
    flex: 0 0 auto !important;
}

/* ── Permissions panel wrapper ─────────────────────────────────────────── */
.hst-login-modal .hst-panel {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

[data-theme-mode="dark"] .hst-login-modal .hst-panel {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}

/* "Permissions" heading inside panel */
.hst-login-modal .hst-panel > .d-flex > .hst-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

[data-theme-mode="dark"] .hst-login-modal .hst-panel > .d-flex > .hst-section-title {
    color: rgba(255, 255, 255, 0.45);
}

/* ── Permission group cards ───────────────────────────────────────────── */
.hst-login-modal .hst-login-perm-group {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.75rem 0.85rem 0.65rem;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

[data-theme-mode="dark"] .hst-login-modal .hst-login-perm-group {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
}

.hst-login-modal .hst-login-perm-group:hover {
    background: rgba(20, 184, 166, 0.035);
    border-color: rgba(20, 184, 166, 0.18);
    box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.06);
}

/* ── Category headers inside perm groups ──────────────────────────────── */
.hst-login-modal .hst-login-perm-group > .hst-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #2dd4bf;
    margin-bottom: 0.55rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(45, 212, 191, 0.12);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hst-login-modal .hst-login-perm-group > .hst-section-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.75rem;
    border-radius: 2px;
    background: linear-gradient(180deg, #2dd4bf 0%, rgba(45, 212, 191, 0.35) 100%);
    flex-shrink: 0;
}

[data-theme-mode="dark"] .hst-login-modal .hst-login-perm-group > .hst-section-title {
    color: #5eead4;
    border-bottom-color: rgba(94, 234, 212, 0.1);
}

/* ── Individual toggle rows ───────────────────────────────────────────── */
.hst-login-modal .hst-login-perm-group .form-check.form-switch {
    padding: 0.35rem 0.4rem 0.35rem 2.85em;
    margin: 0;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.hst-login-modal .hst-login-perm-group .form-check.form-switch:hover {
    background: rgba(255, 255, 255, 0.035);
}

[data-theme-mode="dark"] .hst-login-modal .hst-login-perm-group .form-check.form-switch:hover {
    background: rgba(255, 255, 255, 0.04);
}

.hst-login-modal .hst-login-perm-group .form-check.form-switch + .form-check.form-switch {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.hst-login-modal .hst-login-perm-group .form-check-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.4;
}

[data-theme-mode="dark"] .hst-login-modal .hst-login-perm-group .form-check-label {
    color: rgba(255, 255, 255, 0.78);
}

/* Smaller toggles inside perm groups */
.hst-login-modal .hst-login-perm-group .form-check-input {
    width: 2.2em;
    height: 1.15em;
    margin-left: -2.85em;
}

/* ── Permission grid spacing ──────────────────────────────────────────── */
.hst-login-modal .hst-login-perm-group .d-flex.flex-column {
    gap: 0 !important;
}

.portal-modern-modal.hst-hybrid-modal .btn-primary {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease !important;
}

.portal-modern-modal.hst-hybrid-modal .btn-primary:hover:not(:disabled),
.portal-modern-modal.hst-hybrid-modal .btn-primary:focus:not(:disabled) {
    background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%) !important;
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.4) !important;
    color: #ffffff !important;
}

.portal-modern-modal.hst-hybrid-modal .btn-primary:disabled {
    opacity: 0.55;
    box-shadow: none !important;
}

[data-theme-mode="dark"] .portal-modern-modal.hst-hybrid-modal .btn-primary {
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35) !important;
}

[data-theme-mode="dark"] .portal-modern-modal.hst-hybrid-modal .btn-primary:hover:not(:disabled),
[data-theme-mode="dark"] .portal-modern-modal.hst-hybrid-modal .btn-primary:focus:not(:disabled) {
    box-shadow: 0 6px 18px rgba(20, 184, 166, 0.45) !important;
}

/* Create Hybrid trunk modal */
.hst-create-advanced {
    border: 1px solid var(--hst-border);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    background: var(--hst-surface);
}

.hst-create-advanced__summary {
    cursor: pointer;
    color: var(--hst-ink);
    font-size: 0.9rem;
    font-weight: 600;
}

.hst-create-pricing-confirm {
    border: 1px solid var(--hst-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    background: var(--hst-surface-raised);
}

.hst-create-pricing-confirm .form-check-label,
.hst-create-pricing-label {
    color: var(--hst-ink);
    font-size: 0.875rem;
    line-height: 1.45;
}

.hst-create-pricing-label {
    display: inline;
}

.hst-create-pricing-label-text {
    font-weight: inherit;
    color: inherit;
}

.hst-create-pricing-plan-link {
    color: var(--hst-accent, #8b5cf6);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.hst-create-pricing-plan-link:hover,
.hst-create-pricing-plan-link:focus-visible {
    text-decoration-thickness: 2px;
}

.hst-create-pricing-confirm .form-check-input.is-invalid {
    border-color: #ef4444;
}

.hst-create-qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 0.75rem;
    border: 1px solid var(--hst-border);
    border-radius: 12px;
    background: var(--hst-surface);
}

.hst-create-qr-image {
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: #ffffff;
}

.hst-create-billing {
    color: var(--hst-ink);
}

/* Post-save propagation modal — uses shared hst-hybrid-modal chrome */
.portal-modern-modal.hst-hybrid-modal.hst-propagation-modal .modal-body {
    padding: 1.75rem 1.5rem 1.5rem !important;
}

/* Recording settings modal — compact variant on shared teal chrome */
.portal-modern-modal.hst-hybrid-modal.hst-recording-settings-modal .modal-header {
    padding: 0.85rem 1rem !important;
}

.portal-modern-modal.hst-hybrid-modal.hst-recording-settings-modal .modal-title {
    gap: 0.4rem;
    font-size: 1rem !important;
}

.portal-modern-modal.hst-hybrid-modal.hst-recording-settings-modal .modal-title i {
    font-size: 1.1rem !important;
}

.portal-modern-modal.hst-hybrid-modal.hst-recording-settings-modal .modal-body {
    padding: 0.9rem 1rem !important;
}

.portal-modern-modal.hst-hybrid-modal.hst-recording-settings-modal .modal-footer {
    padding: 0.75rem 1rem !important;
}

.hst-recording-settings-identity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

/* Solid bright orange notice — single column text (avoid .hst-alert flex splitting text nodes) */
.hst-recording-settings-off-note {
    display: block;
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    border: none;
    background: #f59e0b;
    color: #1c1917;
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: left;
}

.hst-recording-settings-off-note__text {
    display: block;
    margin: 0;
    color: inherit;
    text-align: left;
}

.hst-recording-settings-off-note strong {
    color: #0c0a09;
    font-weight: 700;
}

[data-theme-mode="dark"] .hst-recording-settings-off-note {
    background: #fb923c;
    color: #1c1917;
}

[data-theme-mode="dark"] .hst-recording-settings-off-note strong {
    color: #0c0a09;
}

.hst-recording-settings-modal .hst-rec-retention-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.portal-modern-modal.hst-hybrid-modal.hst-recording-enable-agreement-modal .modal-header,
.portal-modern-modal.hst-hybrid-modal.hst-ai-enable-agreement-modal .modal-header {
    padding: 1rem 1.25rem !important;
}

.portal-modern-modal.hst-hybrid-modal.hst-recording-enable-agreement-modal .modal-title,
.portal-modern-modal.hst-hybrid-modal.hst-ai-enable-agreement-modal .modal-title {
    font-size: 1rem;
    line-height: 1.35;
}

.hst-recording-agreement-body {
    max-height: min(60vh, 28rem);
    overflow-y: auto;
}

.hst-recording-fact-sheet__heading {
    color: var(--hst-ink);
}

.hst-recording-fact-sheet__list {
    margin: 0;
    padding-left: 1.25rem;
}

.hst-recording-fact-sheet__list li + li {
    margin-top: 0.5rem;
}

.hst-recording-fact-sheet__table-wrap {
    border: 1px solid var(--hst-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.hst-recording-fact-sheet__table {
    margin-bottom: 0;
    color: var(--hst-ink);
}

.hst-recording-fact-sheet__table > :not(caption) > * > * {
    padding: 0.625rem 0.75rem;
    border-color: var(--hst-border);
    vertical-align: top;
}

.hst-recording-fact-sheet__table thead th {
    background: var(--hst-surface-raised);
    color: var(--hst-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.hst-recording-fact-sheet__table tbody td:last-child {
    min-width: 9rem;
}

[data-theme-mode="dark"] .hst-recording-fact-sheet__table thead th {
    background: #1a1a1a;
}

.hst-propagation-message {
    margin: 0 auto;
    max-width: 26rem;
    color: var(--hst-ink);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.hst-propagation-message strong {
    color: var(--hst-accent-deep);
    font-weight: 700;
}

[data-theme-mode="dark"] .hst-propagation-message strong {
    color: #5eead4;
}

.hst-propagation-countdown-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hst-propagation-ring {
    --hst-propagation-pct: 100%;
    position: relative;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, var(--hst-surface) 58%, transparent 59%),
        conic-gradient(var(--hst-accent) var(--hst-propagation-pct), rgba(100, 116, 139, 0.22) 0);
    border: 1px solid rgba(20, 184, 166, 0.32);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.08);
}

[data-theme-mode="dark"] .hst-propagation-ring {
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
}

.hst-propagation-countdown {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--hst-ink);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.hst-propagation-countdown-label {
    color: var(--hst-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hst-propagation-joke-wrap {
    margin: 0 auto;
    max-width: 24rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--hst-surface-raised);
    border: 1px solid var(--hst-border);
}

.hst-propagation-joke {
    color: var(--hst-muted);
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.45;
    min-height: 2.5rem;
}

/* --- Hybrid SIP Trunks — Detail view side navigation --------------------- */

/* Two-column grid: sidebar + sections.
   Keep the sidenav track fixed — never minmax/fr here (portal shell must not leak). */
.hst-detail-layout {
    display: grid;
    grid-template-columns: 13.75rem minmax(0, 1fr); /* 220px */
    gap: 0 1.25rem;
    align-items: start;
    min-height: 0;
    max-width: 100%;
}

/* Allow the sections column to shrink; default min-width:auto lets ApexCharts widen the page */
.hst-detail-layout > .hst-detail-sections-grid,
.hst-detail-layout > #hst-edit-form-sections {
    min-width: 0;
}

/* Override the multi-column sections grid to single column when inside layout */
.hst-detail-layout .hst-detail-sections-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
    max-width: 100%;
}

/* Sidebar panel — dense so the full nav fits a typical viewport */
.hst-detail-sidenav {
    position: sticky;
    top: 4.5rem;
    width: 100%;
    max-width: 13.75rem; /* match grid track; prevent accidental growth */
    box-sizing: border-box;
    max-height: calc(100vh - 5.25rem);
    max-height: calc(100dvh - 5.25rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: 0.75rem;
    padding: 0.3rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.hst-detail-sidenav::-webkit-scrollbar {
    width: 4px;
}

.hst-detail-sidenav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

[data-theme-mode="light"] .hst-detail-sidenav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme-mode="light"] .hst-detail-sidenav {
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* Nav list */
.hst-detail-sidenav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nav link */
.hst-detail-sidenav-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    margin: 0.05rem 0.35rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--hst-muted);
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.75rem;
    cursor: pointer;
}

.hst-detail-sidenav-link i {
    font-size: 0.95rem;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.65;
    transition: opacity 0.18s ease, color 0.18s ease;
}

.hst-detail-sidenav-link:hover {
    color: var(--hst-ink);
    background: rgba(20, 184, 166, 0.06);
    text-decoration: none;
}

.hst-detail-sidenav-link:hover i {
    opacity: 1;
}

.hst-detail-sidenav-link.is-active {
    color: var(--hst-accent);
    background: rgba(20, 184, 166, 0.12);
    font-weight: 600;
}

.hst-detail-sidenav-link.is-active i {
    opacity: 1;
    color: var(--hst-accent);
}

[data-theme-mode="light"] .hst-detail-sidenav-link:hover {
    background: rgba(20, 184, 166, 0.06);
    color: var(--hst-ink);
}

[data-theme-mode="light"] .hst-detail-sidenav-link.is-active {
    background: rgba(20, 184, 166, 0.1);
    color: #0d7d72;
}

[data-theme-mode="light"] .hst-detail-sidenav-link.is-active i {
    color: #0d7d72;
}

button.hst-detail-sidenav-link--button {
    width: calc(100% - 0.9rem);
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

/* Hybrid SIP Trunks — Feature Codes catalog */
.hst-feature-codes-body {
    min-height: 4rem;
}

.hst-feature-codes-toolbar {
    gap: 0.5rem;
}

.hst-feature-codes-catalog-intro {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.hst-feature-codes-modal-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem 1rem;
}

/* Premium search / filter shell — teal Hybrid accent, neutral surfaces */
.hst-feature-codes-filters {
    padding: 0.9rem 1rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(20, 184, 166, 0.22);
    background:
        linear-gradient(105deg, rgba(20, 184, 166, 0.1) 0%, transparent 48%),
        linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
    transition: border-color 0.18s ease, background 0.18s ease;
}

[data-theme-mode="light"] .hst-feature-codes-filters {
    border-color: rgba(13, 148, 136, 0.24);
    background:
        linear-gradient(105deg, rgba(20, 184, 166, 0.08) 0%, transparent 48%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hst-feature-codes-filters.is-filtering {
    border-color: rgba(20, 184, 166, 0.42);
}

[data-theme-mode="light"] .hst-feature-codes-filters.is-filtering {
    border-color: rgba(13, 148, 136, 0.42);
}

.hst-feature-codes-filters__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 0.85rem;
}

.hst-feature-codes-filters__search {
    flex: 1 1 16rem;
    min-width: 0;
}

.hst-feature-codes-filters__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.hst-feature-codes-filters .hst-form-label {
    margin-bottom: 0.4rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.hst-feature-codes-search-group {
    min-height: 44px;
}

.hst-feature-codes-search-group .hst-input-addon {
    color: #5eead4 !important;
    border-color: rgba(20, 184, 166, 0.28) !important;
    background: rgba(20, 184, 166, 0.08) !important;
}

[data-theme-mode="light"] .hst-feature-codes-search-group .hst-input-addon {
    color: #0f766e !important;
    border-color: rgba(13, 148, 136, 0.28) !important;
    background: rgba(13, 148, 136, 0.08) !important;
}

.hst-feature-codes-search-input {
    min-height: 44px;
    border-color: rgba(20, 184, 166, 0.28) !important;
}

.hst-feature-codes-search-input:focus {
    border-color: rgba(20, 184, 166, 0.55) !important;
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.18) !important;
}

[data-theme-mode="light"] .hst-feature-codes-search-input {
    border-color: rgba(13, 148, 136, 0.28) !important;
}

[data-theme-mode="light"] .hst-feature-codes-search-input:focus {
    border-color: rgba(13, 148, 136, 0.55) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.14) !important;
}

.hst-feature-codes-filter-summary {
    margin-top: 0.7rem;
    color: var(--hst-muted, #b3b3b3);
}

.hst-feature-codes-filters.is-filtering .hst-feature-codes-filter-summary {
    color: #99f6e4;
    font-weight: 550;
}

[data-theme-mode="light"] .hst-feature-codes-filters.is-filtering .hst-feature-codes-filter-summary {
    color: #0f766e;
}

@media (max-width: 575.98px) {
    .hst-feature-codes-filters__actions {
        width: 100%;
    }

    .hst-feature-codes-filters__actions .hst-action-chip {
        width: 100%;
        justify-content: flex-start;
    }
}

.hst-feature-codes-group {
    margin-bottom: 1rem;
}

.hst-feature-codes-group:last-child {
    margin-bottom: 0;
}

.hst-feature-codes-group__title {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hst-muted, #b3b3b3);
}

/* Mobile-first: 1 col; md+ denser 2-col grid (modal + dedicated page). */
.hst-feature-codes-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .hst-feature-codes-list {
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem 0.65rem;
    }
}

.hst-feature-codes-list > [role="listitem"] {
    min-width: 0;
    display: flex;
}

.hst-feature-code-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    height: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    background: var(--hst-surface-raised, #1a1a1a);
}

[data-theme-mode="light"] .hst-feature-code-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

.hst-feature-code-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    margin-bottom: 0;
}

.hst-feature-code-card__code {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: rgba(20, 184, 166, 0.14);
    color: #5eead4;
    font-size: 0.8125rem;
    font-weight: 700;
}

[data-theme-mode="light"] .hst-feature-code-card__code {
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
}

.hst-feature-code-card__title {
    margin: 0;
    flex: 1 1 8rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--hst-ink, #f6f7fb);
}

[data-theme-mode="light"] .hst-feature-code-card__title {
    color: #0f172a;
}

.hst-feature-code-card__desc,
.hst-feature-code-card__example,
.hst-feature-code-card__meta {
    margin-top: 0;
    color: var(--hst-muted, #b3b3b3);
    line-height: 1.35;
}

.hst-feature-code-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.hst-feature-code-card__meta {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.hst-feature-code-card__example code {
    color: var(--hst-ink, #f6f7fb);
    word-break: break-word;
}

[data-theme-mode="light"] .hst-feature-code-card__example code {
    color: #0f172a;
}

/* Empty / loading / error hosts stay full-width (outside the card grid). */
.hst-feature-codes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--hst-muted, #b3b3b3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
}

.hst-feature-codes-empty i {
    font-size: 1.75rem;
    opacity: 0.75;
    color: #14b8a6;
}

.hst-feature-codes-empty--filter {
    border-color: rgba(20, 184, 166, 0.22);
    background:
        linear-gradient(180deg, rgba(20, 184, 166, 0.06) 0%, transparent 70%),
        rgba(255, 255, 255, 0.02);
}

[data-theme-mode="light"] .hst-feature-codes-empty {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

[data-theme-mode="light"] .hst-feature-codes-empty--filter {
    border-color: rgba(13, 148, 136, 0.24);
    background:
        linear-gradient(180deg, rgba(20, 184, 166, 0.06) 0%, transparent 70%),
        rgba(15, 23, 42, 0.02);
}

/* ---- Available BLFs (Hybrid nicknames help) ---- */

/* Extension Monitoring callout — premium tip panel */
.hst-blf-ext-monitor {
    margin-top: auto;
    padding: 1rem 1rem 1.05rem;
    border-radius: 12px;
    border: 1px solid rgba(20, 184, 166, 0.28);
    background:
        linear-gradient(105deg, rgba(20, 184, 166, 0.12) 0%, transparent 46%),
        linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

[data-theme-mode="light"] .hst-blf-ext-monitor {
    border-color: rgba(13, 148, 136, 0.28);
    background:
        linear-gradient(105deg, rgba(20, 184, 166, 0.1) 0%, transparent 46%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.hst-blf-ext-monitor__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.hst-blf-ext-monitor__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: #0d9488;
    color: #ffffff;
    font-size: 1.15rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.hst-blf-ext-monitor__intro {
    min-width: 0;
    flex: 1;
}

.hst-blf-ext-monitor__eyebrow {
    display: inline-block;
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5eead4;
    line-height: 1.2;
}

[data-theme-mode="light"] .hst-blf-ext-monitor__eyebrow {
    color: #0f766e;
}

.hst-blf-ext-monitor__title {
    margin: 0 0 0.25rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--hst-ink, #f6f7fb);
    text-wrap: balance;
}

[data-theme-mode="light"] .hst-blf-ext-monitor__title {
    color: #0f172a;
}

.hst-blf-ext-monitor__desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--hst-muted, #b3b3b3);
    max-width: 42ch;
}

[data-theme-mode="light"] .hst-blf-ext-monitor__desc {
    color: #475569;
}

.hst-blf-ext-usernames__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hst-blf-ext-usernames__item {
    margin: 0;
}

.hst-blf-ext-usernames__card {
    padding: 0.7rem 0.75rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    background: var(--hst-surface-raised, #1a1a1a);
    transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hst-blf-ext-usernames__card:hover,
.hst-blf-ext-usernames__card:focus-within {
    border-color: rgba(20, 184, 166, 0.35);
}

[data-theme-mode="light"] .hst-blf-ext-usernames__card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .hst-blf-ext-usernames__card:hover,
[data-theme-mode="light"] .hst-blf-ext-usernames__card:focus-within {
    border-color: rgba(13, 148, 136, 0.4);
}

.hst-blf-ext-usernames__nick {
    margin: 0 0 0.4rem;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--hst-ink, #f6f7fb);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme-mode="light"] .hst-blf-ext-usernames__nick {
    color: #0f172a;
}

.hst-blf-ext-usernames__key-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--hst-muted, #b3b3b3);
}

.hst-blf-ext-usernames__copy .form-control {
    background: #121212;
    border-color: var(--hst-border, rgba(255, 255, 255, 0.09));
    color: var(--hst-ink, #f6f7fb);
}

[data-theme-mode="light"] .hst-blf-ext-usernames__copy .form-control {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.hst-blf-ext-usernames__loading {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    padding: 0.35rem 0;
}

.hst-blf-ext-usernames__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.85rem 0.9rem;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.02);
}

.hst-blf-ext-usernames__empty > i {
    font-size: 1.15rem;
    color: #5eead4;
    margin-bottom: 0.15rem;
}

.hst-blf-ext-usernames__empty-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--hst-ink, #f6f7fb);
}

.hst-blf-ext-usernames__empty-desc {
    font-size: 0.8125rem;
    line-height: 1.45;
}

[data-theme-mode="light"] .hst-blf-ext-usernames__empty {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(15, 23, 42, 0.02);
}

[data-theme-mode="light"] .hst-blf-ext-usernames__empty > i {
    color: #0f766e;
}

[data-theme-mode="light"] .hst-blf-ext-usernames__empty-title {
    color: #0f172a;
}

@media (prefers-reduced-motion: reduce) {
    .hst-blf-ext-usernames__card {
        transition: none;
    }
}

.hst-blf-body {
    min-height: 4rem;
}

.hst-blf-howto {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--hst-ink, #f6f7fb);
    line-height: 1.55;
}

.hst-blf-howto li + li {
    margin-top: 0.35rem;
}

.hst-blf-howto code,
.hst-blf-howto-panel code {
    color: #5eead4;
}

[data-theme-mode="light"] .hst-blf-howto {
    color: #0f172a;
}

[data-theme-mode="light"] .hst-blf-howto code,
[data-theme-mode="light"] .hst-blf-howto-panel code {
    color: #0f766e;
}

.hst-blf-howto-panel {
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    background: rgba(20, 184, 166, 0.06);
}

[data-theme-mode="light"] .hst-blf-howto-panel {
    background: rgba(13, 148, 136, 0.06);
    border-color: rgba(15, 23, 42, 0.1);
}

.hst-blf-howto-panel__title,
.hst-blf-group__title {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hst-muted, #b3b3b3);
}

.hst-blf-group {
    margin-bottom: 0.25rem;
}

.hst-blf-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .hst-blf-list {
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem 0.65rem;
    }
}

.hst-blf-list > [role="listitem"] {
    min-width: 0;
    display: flex;
}

.hst-blf-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    height: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    background: var(--hst-surface-raised, #1a1a1a);
}

[data-theme-mode="light"] .hst-blf-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

.hst-blf-card__title {
    margin: 0 0 0.2rem;
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--hst-ink, #f6f7fb);
}

[data-theme-mode="light"] .hst-blf-card__title {
    color: #0f172a;
}

.hst-blf-card__nick {
    margin-bottom: 0.45rem !important;
}

.hst-blf-card__key-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--hst-muted, #b3b3b3);
}

.hst-blf-copy-group .form-control {
    min-width: 0;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--hst-ink, #f6f7fb);
}

[data-theme-mode="light"] .hst-blf-copy-group .form-control {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.hst-blf-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    white-space: nowrap;
}

.hst-blf-copy-feedback:not(.d-none) {
    margin-top: 0.35rem;
}

.hst-blf-card__actions {
    margin-top: auto;
    padding-top: 0.15rem;
}

.hst-inline-link {
    color: #5eead4;
    text-decoration: none;
}

.hst-inline-link:hover,
.hst-inline-link:focus-visible {
    color: #99f6e4;
    text-decoration: underline;
}

[data-theme-mode="light"] .hst-inline-link {
    color: #0f766e;
}

[data-theme-mode="light"] .hst-inline-link:hover,
[data-theme-mode="light"] .hst-inline-link:focus-visible {
    color: #115e59;
}

.hst-blf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--hst-muted, #b3b3b3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
}

.hst-blf-empty i {
    font-size: 1.75rem;
    opacity: 0.75;
    color: #14b8a6;
}

[data-theme-mode="light"] .hst-blf-empty {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

.hst-blf-promo {
    position: relative;
    border-radius: 1rem;
    padding: 2.25rem 2rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(20, 184, 166, 0.01) 100%);
    border: 1px solid rgba(20, 184, 166, 0.16);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}

[data-theme-mode="light"] .hst-blf-promo {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.06) 0%, rgba(13, 148, 136, 0.01) 100%);
    border-color: rgba(13, 148, 136, 0.18);
    box-shadow: 0 12px 24px -10px rgba(13, 148, 136, 0.12);
}

.hst-blf-promo:hover {
    border-color: rgba(20, 184, 166, 0.3);
    box-shadow: 0 20px 32px -8px rgba(0, 0, 0, 0.5), 0 0 15px rgba(20, 184, 166, 0.05);
}

.hst-blf-promo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.15);
    color: #14b8a6;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

[data-theme-mode="light"] .hst-blf-promo__eyebrow {
    background: rgba(13, 148, 136, 0.1);
    color: #0f766e;
}

.hst-blf-promo__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--hst-ink);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.hst-blf-promo__desc {
    color: var(--hst-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    max-width: 580px;
}

.hst-blf-promo__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.hst-blf-promo__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--hst-ink);
}

.hst-blf-promo__features li i {
    font-size: 1.1rem;
    color: #14b8a6;
    line-height: 1.2;
}

[data-theme-mode="light"] .hst-blf-promo__features li i {
    color: #0d9488;
}

.hst-blf-promo__features li strong {
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-blf-promo__btn.btn.btn-primary {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    background-color: #14b8a6 !important;
    border-color: transparent !important;
    color: #101010 !important;
    font-weight: 700;
    padding: 0.55rem 1.25rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hst-blf-promo__btn.btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3) !important;
    color: #101010 !important;
}

/* BLF Phone Mockup Graphic */
.hst-blf-mockup {
    width: 240px;
    background: #1e1e1e;
    border: 4px solid #2d2d2d;
    border-radius: 1.25rem;
    padding: 0.5rem;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 8px 24px -6px rgba(0, 0, 0, 0.6);
}

[data-theme-mode="light"] .hst-blf-mockup {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 8px 24px -6px rgba(0, 0, 0, 0.1);
}

.hst-blf-mockup__screen {
    background: #0c0a09;
    border-radius: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

[data-theme-mode="light"] .hst-blf-mockup__screen {
    background: #0f172a;
}

.hst-blf-mockup__screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.35rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hst-blf-mockup__screen-header i {
    color: #14b8a6;
}

.hst-blf-mockup__key {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s;
}

.hst-blf-mockup__key:last-child {
    margin-bottom: 0;
}

.hst-blf-mockup__led-container {
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hst-blf-mockup__led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4b5563; /* Grey/Off */
    display: inline-block;
}

.hst-blf-mockup__key.is-active {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}

.hst-blf-mockup__key.is-active .hst-blf-mockup__led {
    background: #ef4444; /* Red / active */
    box-shadow: 0 0 8px #ef4444;
}

@keyframes hstLedPulse {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 4px #ef4444;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
        box-shadow: 0 0 12px 2px #ef4444;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 4px #ef4444;
    }
}

.hst-blf-mockup__led--pulse {
    animation: hstLedPulse 1.4s infinite ease-in-out;
}

.hst-blf-mockup__key-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.hst-blf-mockup__key-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
}

.hst-blf-mockup__key-state {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
}

.hst-blf-mockup__key.is-active .hst-blf-mockup__key-state {
    color: #fca5a5;
    font-weight: 600;
}

/* ---- Responsive: collapse to horizontal scrollable bar ---- */
@media (max-width: 991.98px) {
    .hst-detail-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hst-detail-sidenav {
        position: static;
        max-width: none;
        width: auto;
        max-height: none;
        overflow: visible;
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0;
    }

    .hst-detail-sidenav-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.3rem;
        padding: 0.5rem 0.55rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hst-detail-sidenav-list::-webkit-scrollbar {
        display: none;
    }

    .hst-detail-sidenav-link {
        padding: 0.35rem 0.7rem;
        margin: 0;
        border-radius: 999px;
        font-size: 0.8rem;
        border: 1px solid var(--hst-border);
        background: transparent;
        flex-shrink: 0;
    }

    button.hst-detail-sidenav-link--button {
        width: auto;
    }

    .hst-detail-sidenav-link.is-active {
        border-color: rgba(20, 184, 166, 0.5);
    }
}

/* Hybrid SIP Trunks — manage Operator panels (Live Calls / Registration Logs / CDRs) */
.hst-op-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--hst-muted, #b3b3b3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
}

.hst-op-empty i {
    font-size: 1.75rem;
    opacity: 0.75;
}

[data-theme-mode="light"] .hst-op-empty {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

.hst-op-live-calls-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.hst-op-live-call {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="light"] .hst-op-live-call {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

.hst-op-live-call__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.hst-op-live-call__peer {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hst-ink, #f6f7fb);
}

.hst-op-live-call__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.hst-op-reg-logs-table-wrap {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.65rem;
    overflow: auto;
}

[data-theme-mode="light"] .hst-op-reg-logs-table-wrap {
    border-color: rgba(15, 23, 42, 0.08);
}

.hst-op-reg-logs-table {
    font-size: 0.8125rem;
    --bs-table-bg: transparent;
    --bs-table-color: var(--hst-ink, #f6f7fb);
    --bs-table-border-color: rgba(255, 255, 255, 0.06);
}

.hst-op-reg-logs-table thead th {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--hst-muted, #b3b3b3);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme-mode="light"] .hst-op-reg-logs-table {
    --bs-table-border-color: rgba(15, 23, 42, 0.08);
}

[data-theme-mode="light"] .hst-op-reg-logs-table thead th {
    background: rgba(15, 23, 42, 0.03);
}

.hst-op-reg-logs-table tbody tr:hover {
    background: rgba(20, 184, 166, 0.04);
}

.hst-op-cdr-table tbody tr.hst-op-cdr-row {
    cursor: pointer;
}

.hst-op-cdr-table tbody tr.hst-op-cdr-row:focus-visible {
    outline: 2px solid rgba(20, 184, 166, 0.55);
    outline-offset: -2px;
}

/* Hybrid SIP Trunks — Calls page (live cards + detail timeline) */
.hst-calls-live-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.hst-calls-live-card {
    padding: 0.85rem 1rem;
    border: 1px solid var(--hst-border);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="light"] .hst-calls-live-card {
    background: rgba(15, 23, 42, 0.02);
}

.hst-calls-live-card:hover {
    border-color: rgba(20, 184, 166, 0.35);
}

.hst-calls-history-row {
    cursor: pointer;
}

.hst-calls-history-row:hover {
    background: rgba(20, 184, 166, 0.04);
}

/* Call details modal — meta (left) + event timeline (right); stacks on narrow widths */
.hst-calls-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
    align-items: start;
    min-width: 0;
}

.hst-calls-detail-pane {
    min-width: 0;
}

.hst-calls-detail-pane--timeline {
    border-left: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    padding-left: 1.5rem;
}

[data-theme-mode="light"] .hst-calls-detail-pane--timeline {
    border-left-color: rgba(15, 23, 42, 0.1);
}

/* Dense 2-col field grid inside the left meta pane */
.hst-calls-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.85rem;
    margin: 0;
}

.hst-calls-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.02);
}

.hst-calls-detail-meta-item dt {
    margin: 0;
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.hst-calls-detail-meta-item dd {
    margin: 0;
    color: var(--hst-ink, #f6f7fb);
    font-size: 0.875rem;
    word-break: break-word;
}

[data-theme-mode="light"] .hst-calls-detail-meta-item {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.1);
}

@media (max-width: 991.98px) {
    .hst-calls-detail-layout {
        grid-template-columns: 1fr;
    }

    .hst-calls-detail-pane--timeline {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
        padding-top: 1.25rem;
    }

    [data-theme-mode="light"] .hst-calls-detail-pane--timeline {
        border-top-color: rgba(15, 23, 42, 0.1);
    }
}

@media (max-width: 575.98px) {
    .hst-calls-detail-meta {
        grid-template-columns: 1fr;
    }
}

.hst-calls-timeline {
    position: relative;
    padding-left: 1.15rem;
}

.hst-calls-timeline::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: rgba(100, 116, 139, 0.28);
}

.hst-calls-timeline-item {
    position: relative;
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hst-calls-timeline-item:last-child {
    margin-bottom: 0;
}

.hst-calls-timeline-marker {
    position: absolute;
    left: -1.05rem;
    top: 0.35rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #14b8a6;
    border: 2px solid var(--hst-surface, #161616);
    box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.45);
}

.hst-calls-timeline-body {
    flex: 1;
    min-width: 0;
}

.hst-calls-timeline-detail {
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid var(--hst-border);
    background: rgba(100, 116, 139, 0.12);
    color: var(--hst-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Hybrid SIP Trunks — Premium Features promo card & modal (purple accent) ---------------- */
.hst-promo-premium-card {
    background: var(--hst-surface-raised, #161616) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.04) !important;
}

.hst-promo-premium-card:hover,
.hst-promo-premium-card:focus-visible {
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.08) !important;
    transform: translateY(-2px);
    outline: none;
}

.hst-promo-premium-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: #7c3aed !important;
    color: #ffffff !important;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.3) !important;
}

.hst-promo-premium-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border: none !important;
    color: #ffffff !important;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
    width: 100%;
}

.hst-promo-premium-card:hover .hst-promo-premium-btn {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

[data-theme-mode="light"] .hst-promo-premium-card {
    background: #ffffff !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme-mode="light"] .hst-promo-premium-card:hover {
    border-color: rgba(124, 58, 237, 0.4) !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.08) !important;
}

[data-theme-mode="light"] .hst-promo-premium-icon-box {
    background: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.2) !important;
}

.portal-premium-purple-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.22);
    flex-shrink: 0;
}

[data-theme-mode="dark"] .portal-premium-purple-badge {
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28);
}

.portal-modern-modal.hst-premium-modal .modal-header {
    background: linear-gradient(90deg, #5b21b6 0%, #7c3aed 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.portal-modern-modal.hst-premium-modal .modal-title {
    color: #f6f7fb !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.portal-modern-modal.hst-premium-modal .modal-title i {
    color: #f5f3ff !important;
    font-size: 1.25rem !important;
}

.portal-modern-modal.hst-premium-modal .modal-body {
    padding: 1.75rem 1.5rem 1.5rem !important;
    background: var(--hst-surface, #161616) !important;
    color: var(--hst-ink, #f6f7fb) !important;
}

.portal-modern-modal.hst-premium-modal .modal-footer {
    background: var(--hst-surface, #161616) !important;
    border-top: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09)) !important;
    padding: 1rem 1.5rem !important;
}

.portal-modern-modal.hst-premium-modal .btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

.portal-modern-modal.hst-premium-modal .btn-primary:hover:not(:disabled),
.portal-modern-modal.hst-premium-modal .btn-primary:focus:not(:disabled) {
    background: linear-gradient(135deg, #9065f7 0%, #834bf0 100%) !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
    transform: translateY(-1px);
}

.hst-premium-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.hst-premium-feature-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.hst-premium-feature-item:hover {
    background: rgba(139, 92, 246, 0.04);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

.hst-premium-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.1);
    color: #a855f7;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.hst-premium-feature-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hst-ink, #f6f7fb);
    margin-bottom: 0.5rem;
}

.hst-premium-feature-desc {
    font-size: 0.82rem;
    color: var(--hst-muted, #b3b3b3);
    line-height: 1.4;
    margin-bottom: 1.25rem;
    flex: 1;
}

.hst-premium-feature-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.15);
    color: #c084fc;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    width: 100%;
}

.hst-premium-feature-link:hover {
    background: #7c3aed;
    color: #ffffff;
}

[data-theme-mode="light"] .hst-premium-feature-item {
    background: #f9fafb;
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme-mode="light"] .hst-premium-feature-item:hover {
    background: rgba(124, 58, 237, 0.02);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme-mode="light"] .hst-premium-feature-icon {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
}

[data-theme-mode="light"] .hst-premium-feature-link {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
}

[data-theme-mode="light"] .hst-premium-feature-link:hover {
    background: #7c3aed;
    color: #ffffff;
}

/* --- Hybrid SIP Trunks — Registration telemetry ------------------------- */
.hst-registration-page {
    position: relative;
    padding-block: 0.75rem 1.5rem;
}

.hst-registration-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.hst-registration-refresh-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hst-registration-refresh-control .hst-form-select {
    width: 7.5rem;
}

.hst-registration-statusbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--hst-border);
    border-radius: 10px;
    background: var(--hst-surface-raised);
    color: var(--hst-muted);
    font-size: 0.875rem;
}

.hst-registration-statusbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.hst-registration-statusbar__item > i {
    color: var(--hst-accent);
}

.hst-registration-table {
    min-width: 62rem;
}

.hst-registration-table > :not(caption) > * > * {
    padding: 0.75rem 0.875rem;
}

.hst-registration-table tbody tr:not(.sipreg-detail-row):hover {
    background: rgba(20, 184, 166, 0.045);
}

.hst-registration-table .sipreg-detail-row > td {
    padding: 0;
    background: rgba(20, 184, 166, 0.035);
}

.hst-registration-table__toggle-cell {
    width: 3rem;
    padding-right: 0 !important;
}

.hst-registration-table__name,
.hst-registration-table__secondary {
    color: var(--hst-muted);
}

.hst-registration-table__nowrap {
    white-space: nowrap;
}

.hst-registration-table__aor {
    color: var(--hst-ink);
    font-weight: 700;
}

.hst-registration-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--hst-border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.hst-registration-badge--online {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.hst-registration-badge--offline {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(148, 163, 184, 0.1);
    color: #b3b3b3;
}

[data-theme-mode="light"] .hst-registration-badge--online {
    color: #15803d;
}

[data-theme-mode="light"] .hst-registration-badge--offline {
    color: #475569;
}

.hst-registration-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--hst-muted);
}

.hst-registration-expand:hover,
.hst-registration-expand:focus-visible,
.hst-registration-expand.active {
    border-color: rgba(20, 184, 166, 0.32);
    background: rgba(20, 184, 166, 0.1);
    color: var(--hst-accent);
}

.hst-registration-detail-panel {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--hst-border);
}

.hst-registration-device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.875rem 1.25rem;
}

.hst-registration-device-grid__label {
    margin-bottom: 0.2rem;
    color: var(--hst-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.hst-registration-device-grid__value {
    color: var(--hst-ink);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.hst-registration-device-heading {
    margin-bottom: 0.75rem;
    color: var(--hst-muted);
    font-size: 0.8125rem;
    font-weight: 700;
}

.hst-registration-device-divider {
    margin: 0.875rem 0;
    border-color: var(--hst-border);
    opacity: 1;
}

.hst-registration-detail-message {
    margin: 0;
    color: var(--hst-muted);
    font-size: 0.875rem;
}

.hst-registration-detail-message--error {
    color: #f87171;
}

.hst-registration-filter-grid {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) minmax(8rem, 0.65fr) minmax(11rem, 1fr);
    gap: 0.875rem;
    align-items: end;
}

.hst-registration-selected {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hst-registration-retention-note .hst-alert__progress {
    display: none;
}

.hst-registration-event {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
}

.hst-registration-event--success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.hst-registration-event--attempt {
    background: rgba(139, 92, 246, 0.13);
    color: #c4b5fd;
}

.hst-registration-event--challenged {
    background: rgba(245, 158, 11, 0.13);
    color: #fbbf24;
}

.hst-registration-event--failed {
    background: rgba(239, 68, 68, 0.13);
    color: #f87171;
}

[data-theme-mode="light"] .hst-registration-event--success {
    color: #15803d;
}

[data-theme-mode="light"] .hst-registration-event--attempt {
    color: #6d28d9;
}

[data-theme-mode="light"] .hst-registration-event--challenged {
    color: #a16207;
}

[data-theme-mode="light"] .hst-registration-event--failed {
    color: #b91c1c;
}

@media (max-width: 991.98px) {
    .hst-registration-filter-grid {
        grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.5fr);
    }

    .hst-registration-selected {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .hst-registration-toolbar,
    .hst-registration-refresh-control {
        align-items: stretch;
        width: 100%;
    }

    .hst-registration-toolbar > .btn,
    .hst-registration-toolbar > a.btn {
        justify-content: center;
        min-height: 2.75rem;
        flex: 1 1 10rem;
    }

    .hst-registration-refresh-control {
        flex-direction: column;
    }

    .hst-registration-refresh-control .hst-form-select {
        width: 100%;
        min-height: 2.75rem;
    }

    .hst-registration-statusbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .hst-registration-filter-grid {
        grid-template-columns: 1fr;
    }

    .hst-registration-selected {
        grid-column: auto;
    }

    .hst-registration-device-grid {
        grid-template-columns: 1fr;
    }
}

/* Hybrid SIP Trunks — AI & Transcription */

.hst-ai-page {
    --hst-ai-accent: #c084fc;
    --hst-ai-accent-soft: rgba(192, 132, 252, 0.14);
    --hst-ai-surface: var(--hst-surface, #161616);
    --hst-ai-border: var(--hst-border, rgba(255, 255, 255, 0.09));
}

.hst-ai-scope-bar {
    border-color: rgba(192, 132, 252, 0.28);
}

/* Scope toolbar: row1 labels, row2 equal-height controls, footer helpers */
.hst-ai-scope-bar__grid {
    display: grid;
    grid-template-columns: minmax(12rem, 1.5fr) minmax(9rem, 0.9fr) minmax(10rem, 1.1fr);
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.35rem;
    align-items: end;
}

.hst-ai-scope-bar__label {
    grid-row: 1;
    margin-bottom: 0;
    align-self: end;
    min-height: 1.25rem;
    line-height: 1.25rem;
}

.hst-ai-scope-bar__label--spacer {
    visibility: hidden;
    pointer-events: none;
}



.hst-ai-scope-bar__control {
    grid-row: 2;
    width: 100%;
    min-height: 2.375rem;
}

.hst-ai-scope-bar__status {
    grid-row: 2;
    align-self: center;
    min-height: 2.375rem;
    display: flex;
    align-items: center;
    margin: 0;
}

.hst-ai-scope-bar__footer {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--hst-ai-border, rgba(255, 255, 255, 0.09));
}

.hst-ai-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    border: none;
    background: transparent;
    padding: 0;
    overflow: visible;
    animation: hstFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hst-ai-metric-card {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    min-height: 5.75rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--hst-ai-border);
    border-radius: 0.75rem;
    background: var(--hst-ai-surface);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.hst-ai-metric-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 12% 12%, rgba(var(--card-accent-rgb), 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hst-ai-metric-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--card-accent-rgb), 0.35) !important;
    box-shadow: 0 8px 24px -8px rgba(var(--card-accent-rgb), 0.3);
}

.hst-ai-metric-card:hover::before {
    opacity: 1;
}

/* Card Accent color schemes */
.hst-ai-metric-card:nth-child(1) {
    --card-accent: #c084fc;
    --card-accent-rgb: 192, 132, 252;
}
.hst-ai-metric-card:nth-child(2) {
    --card-accent: #f472b6;
    --card-accent-rgb: 244, 114, 182;
}
.hst-ai-metric-card:nth-child(3) {
    --card-accent: #fbbf24;
    --card-accent-rgb: 251, 191, 36;
}
.hst-ai-metric-card:nth-child(4) {
    --card-accent: #2dd4bf;
    --card-accent-rgb: 45, 212, 191;
}

[data-theme-mode="light"] .hst-ai-metric-card:nth-child(1) {
    --card-accent: #7c3aed;
    --card-accent-rgb: 124, 58, 237;
}
[data-theme-mode="light"] .hst-ai-metric-card:nth-child(2) {
    --card-accent: #db2777;
    --card-accent-rgb: 219, 39, 119;
}
[data-theme-mode="light"] .hst-ai-metric-card:nth-child(3) {
    --card-accent: #d97706;
    --card-accent-rgb: 217, 119, 6;
}
[data-theme-mode="light"] .hst-ai-metric-card:nth-child(4) {
    --card-accent: #0d9488;
    --card-accent-rgb: 13, 148, 136;
}

.hst-ai-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: rgba(var(--card-accent-rgb), 0.12);
    color: var(--card-accent);
    border: 1px solid rgba(var(--card-accent-rgb), 0.2);
    flex: 0 0 auto;
    font-size: 1.2rem;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hst-ai-metric-card:hover .hst-ai-metric-icon {
    transform: scale(1.1);
}

.hst-ai-metric-label {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
}

.hst-ai-metric-value {
    color: var(--hst-ink, #f6f7fb);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Token ratio progress bar */
.hst-ai-ratio-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.65rem;
    width: 100%;
}
[data-theme-mode="light"] .hst-ai-ratio-bar {
    background: rgba(0, 0, 0, 0.08);
}
.hst-ai-ratio-fill {
    height: 100%;
    width: 0%;
    background: var(--card-accent);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Entrance Animation */
@keyframes hstFadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hst-ai-features-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hst-ai-feature-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 9rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--hst-ai-border);
    border-radius: 0.5rem;
    background: var(--hst-ai-surface);
}

.hst-ai-feature-chip__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hst-ink, #f6f7fb);
}

.hst-ai-feature-chip__meta {
    font-size: 0.75rem;
    color: var(--hst-muted, #b3b3b3);
}

.hst-ai-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hst-ai-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.hst-ai-insights-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem;
}

.hst-ai-inline-feedback {
    padding: 0.65rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--hst-ai-border);
    font-size: 0.875rem;
}

.hst-ai-inline-feedback--ok {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
}

.hst-ai-inline-feedback--error {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.hst-ai-empty-state {
    padding: 2rem 1.25rem;
    text-align: center;
}

.hst-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.hst-ai-badge--ok {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

.hst-ai-badge--busy {
    background: var(--hst-ai-accent-soft);
    color: #e9d5ff;
}

.hst-ai-badge--err {
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}

.hst-ai-badge--muted {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
}

.hst-ai-spin {
    animation: hst-ai-spin 0.9s linear infinite;
}

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

.hst-ai-code {
    font-size: 0.8125rem;
    color: #e9d5ff;
}

.hst-ai-detail-tabs .nav-link {
    color: var(--hst-muted, #b3b3b3);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.5rem 0.85rem;
}

.hst-ai-detail-tabs .nav-link.active {
    color: var(--hst-ai-accent);
    background: transparent;
    border-bottom-color: var(--hst-ai-accent);
}

.hst-ai-transcript {
    max-height: 28rem;
    overflow: auto;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--hst-ai-border);
    border-radius: 0.5rem;
    background: #121212;
    color: #f6f7fb;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.hst-ai-insight-section {
    padding: 0.85rem 1rem;
    border: 1px solid var(--hst-ai-border);
    border-radius: 0.5rem;
    background: #121212;
    margin-bottom: 0.75rem;
}

.hst-ai-insight-section:last-child {
    margin-bottom: 0;
}

.hst-ai-insight-section__title {
    margin: 0 0 0.4rem;
    font-size: 0.875rem;
    font-weight: 650;
    color: #e9d5ff;
}

.hst-ai-insight-section__body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #f6f7fb;
    white-space: pre-wrap;
    word-break: break-word;
}

.hst-ai-insight-section__title i {
    color: var(--hst-ai-accent, #c084fc);
    margin-right: 0.15rem;
}

.hst-ai-insight-empty {
    margin: 0;
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.875rem;
}

/* Sentiment insight */
.hst-ai-sentiment-overview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.hst-ai-sentiment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.hst-ai-sentiment-badge--lg {
    padding: 0.4rem 0.85rem;
    font-size: 0.9375rem;
}

.hst-ai-sentiment-badge--sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    flex: 0 0 auto;
}

.hst-ai-sentiment-badge--positive {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

.hst-ai-sentiment-badge--neutral {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

.hst-ai-sentiment-badge--negative {
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}

.hst-ai-sentiment-badge__score {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.hst-ai-sentiment-rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.hst-ai-sentiment-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.hst-ai-sentiment-row__text {
    margin: 0;
    color: #f6f7fb;
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
}

/* Ranked insight lists: Topic Detection / Intent Recognition */
.hst-ai-rank-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.hst-ai-rank-item__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.hst-ai-rank-item__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f6f7fb;
}

.hst-ai-rank-item__pct {
    font-size: 0.75rem;
    color: var(--hst-muted, #b3b3b3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hst-ai-rank-item__bar {
    height: 0.4rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.hst-ai-rank-item__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hst-ai-accent, #c084fc), rgba(192, 132, 252, 0.55));
}

/* Collapsible evidence (source quotes) behind topics / intent / sentiment / entities */
.hst-ai-insight-evidence {
    margin-top: 0.85rem;
}

.hst-ai-insight-evidence summary {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hst-ai-accent, #c084fc);
    list-style: none;
}

.hst-ai-insight-evidence summary::-webkit-details-marker {
    display: none;
}

.hst-ai-insight-evidence summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 0.35rem;
    transition: transform 0.15s ease;
}

.hst-ai-insight-evidence[open] summary::before {
    transform: rotate(90deg);
}

.hst-ai-evidence-rows {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--hst-ai-border, rgba(255, 255, 255, 0.09));
}

.hst-ai-evidence-row__text {
    margin: 0 0 0.35rem;
    color: #f6f7fb;
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.5;
    word-break: break-word;
}

.hst-ai-evidence-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.hst-ai-evidence-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--hst-ai-accent-soft, rgba(192, 132, 252, 0.14));
    color: #e9d5ff;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Entity Detection chips */
.hst-ai-entity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.hst-ai-entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--hst-ai-border, rgba(255, 255, 255, 0.09));
    border-radius: 999px;
    background: var(--hst-ai-surface, #161616);
    font-size: 0.75rem;
    font-weight: 600;
    color: #f6f7fb;
}

.hst-ai-entity-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--hst-ai-accent-soft, rgba(192, 132, 252, 0.14));
    color: #e9d5ff;
    font-size: 0.6875rem;
}

/* Fallback: readable raw JSON for any insight shape we don't render a custom view for */
.hst-ai-insight-raw {
    max-height: 20rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--hst-ai-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.5rem;
    background: #121212;
    color: #f6f7fb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme-mode="light"] .hst-ai-metric-card,
[data-theme-mode="light"] .hst-ai-feature-chip,
[data-theme-mode="light"] .hst-ai-transcript,
[data-theme-mode="light"] .hst-ai-insight-section {
    background: #ffffff;
}

[data-theme-mode="light"] .hst-ai-metric-value,
[data-theme-mode="light"] .hst-ai-insight-section__body,
[data-theme-mode="light"] .hst-ai-transcript {
    color: #0f172a;
}

[data-theme-mode="light"] .hst-ai-code,
[data-theme-mode="light"] .hst-ai-insight-section__title,
[data-theme-mode="light"] .hst-ai-detail-tabs .nav-link.active {
    color: #7c3aed;
}

[data-theme-mode="light"] .hst-ai-sentiment-row__text,
[data-theme-mode="light"] .hst-ai-evidence-row__text,
[data-theme-mode="light"] .hst-ai-rank-item__label,
[data-theme-mode="light"] .hst-ai-entity-chip {
    color: #0f172a;
}

[data-theme-mode="light"] .hst-ai-entity-chip,
[data-theme-mode="light"] .hst-ai-insight-raw {
    background: #ffffff;
}

[data-theme-mode="light"] .hst-ai-insight-raw {
    color: #0f172a;
}

[data-theme-mode="light"] .hst-ai-insight-evidence summary {
    color: #7c3aed;
}

[data-theme-mode="light"] .hst-ai-rank-item__bar {
    background: rgba(100, 116, 139, 0.2);
}

[data-theme-mode="light"] .hst-ai-sentiment-badge--neutral {
    background: rgba(100, 116, 139, 0.16);
    color: #334155;
}

[data-theme-mode="light"] .hst-ai-inline-feedback--ok {
    color: #166534;
}

[data-theme-mode="light"] .hst-ai-inline-feedback--error {
    color: #b91c1c;
}

@media (max-width: 991.98px) {
    .hst-ai-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hst-ai-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .hst-ai-summary-strip {
        grid-template-columns: 1fr;
    }

    .hst-ai-metric-card {
        min-height: 0;
    }

    .hst-ai-settings-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

.hst-ai-intro {
    max-width: 72ch;
    text-wrap: pretty;
}

/* Manage detail — AI Controls benefit-led intro */
.hst-ai-controls-intro {
    --hst-ai-controls-intro-accent: #7c3aed;
    --hst-ai-controls-intro-border: rgba(192, 132, 252, 0.32);
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 0.55rem;
    border: 1px solid var(--hst-ai-controls-intro-border);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(124, 58, 237, 0.16), transparent 55%),
        rgba(124, 58, 237, 0.07);
}

.hst-ai-controls-intro__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hst-ai-controls-intro-accent);
    color: #ffffff;
    font-size: 1.15rem;
}

.hst-ai-controls-intro__body {
    flex: 1;
    min-width: 0;
}

.hst-ai-controls-intro__title {
    margin: 0 0 0.3rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--hst-ink, #f6f7fb);
    line-height: 1.3;
    text-wrap: balance;
}

.hst-ai-controls-intro__text {
    margin: 0 0 0.7rem;
    font-size: 0.8125rem;
    color: var(--hst-ink, #f6f7fb);
    line-height: 1.45;
    max-width: 68ch;
    text-wrap: pretty;
}

.hst-ai-controls-intro__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
}

.hst-ai-controls-intro__chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(16, 16, 16, 0.45);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hst-muted, #b3b3b3);
    line-height: 1.3;
}

.hst-ai-controls-intro__chips li i {
    flex-shrink: 0;
    color: #c084fc;
    font-size: 0.9rem;
}

.hst-ai-controls-intro__prereq {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(192, 132, 252, 0.25);
    background: rgba(16, 16, 16, 0.45);
    font-size: 0.8125rem;
    color: var(--hst-ink, #f6f7fb);
    line-height: 1.4;
}

.hst-ai-controls-intro__prereq > i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #c084fc;
    font-size: 1.05rem;
}

.hst-ai-controls-intro__prereq strong {
    font-weight: 700;
}

/* API Box inside AI controls intro */
.hst-ai-controls-intro__api-box {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(192, 132, 252, 0.2);
    background: rgba(16, 16, 16, 0.35);
}

.hst-ai-controls-intro__api-icon i {
    color: #c084fc;
    font-size: 1.25rem;
}

.hst-ai-controls-intro__api-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hst-ink, #f6f7fb);
}

.hst-ai-controls-intro__api-text {
    font-size: 0.75rem;
    color: var(--hst-muted, #b3b3b3);
    line-height: 1.4;
}

.hst-ai-controls-intro__api-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c084fc;
    text-decoration: none;
    transition: color 0.15s ease;
}

.hst-ai-controls-intro__api-link:hover {
    color: #e9d5ff;
    text-decoration: underline;
}

.hst-ai-controls-intro__api-link i {
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}

.hst-ai-controls-intro__api-link:hover i {
    transform: translateX(2px);
}

.hst-ai-stats-intro {
    max-width: 62ch;
}

.hst-ai-stats-intro__lead {
    font-size: 0.875rem;
    color: var(--hst-muted, #b3b3b3);
    line-height: 1.45;
    text-wrap: pretty;
}

/* Panel chrome only — inner alignment uses .hst-ai-scope-bar__grid */
.hst-ai-scope-bar {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(192, 132, 252, 0.28);
    border-radius: 12px;
    background: var(--hst-surface, #161616);
}

.hst-ai-scope-copy {
    align-self: center;
}

.hst-ai-scope-controls {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(8rem, 0.45fr);
    gap: 0.75rem;
}

.hst-ai-scope-field {
    min-width: 0;
}

.hst-ai-scope-state {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.25rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--hst-ai-border);
    border-radius: 8px;
    background: var(--hst-surface-raised, #1a1a1a);
}

.hst-ai-scope-state__icon,
.hst-ai-account-guidance__icon,
.hst-ai-setting-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9px;
    background: #7c3aed;
    color: #ffffff;
    font-size: 1.1rem;
}

.hst-ai-scope-state strong,
.hst-ai-scope-state span {
    display: block;
}

.hst-ai-scope-state strong {
    color: var(--hst-ink, #f6f7fb);
    font-size: 0.875rem;
}

.hst-ai-scope-state span span {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.75rem;
    line-height: 1.35;
}

.hst-ai-section-head,
.hst-ai-recordings-head,
.hst-ai-detail-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.hst-ai-section-head {
    margin-bottom: 1rem;
}

.hst-ai-recordings-head {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--hst-ai-border);
}

.hst-ai-account-guidance,
.hst-ai-prerequisite {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--hst-ai-border);
    border-radius: 8px;
    background: var(--hst-surface-raised, #1a1a1a);
}

.hst-ai-prerequisite {
    align-items: flex-start;
    border-color: rgba(245, 158, 11, 0.35);
}

.hst-ai-prerequisite > i {
    color: #f59e0b;
    font-size: 1.25rem;
    margin-top: 0.1rem;
}

.hst-ai-prerequisite > div {
    flex: 1 1 auto;
}

.hst-ai-settings-loading {
    padding: 0.5rem 0;
}

.hst-ai-setting-block {
    border: 1px solid var(--hst-ai-border);
    border-radius: 10px;
    background: var(--hst-surface-raised, #1a1a1a);
    overflow: hidden;
}

.hst-ai-setting-block__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem;
    border-bottom: 1px solid var(--hst-ai-border);
}

.hst-ai-setting-block__body {
    padding: 0.9rem;
}

.hst-ai-setting-block .form-switch {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
}

.hst-ai-setting-block .form-switch .form-check-input {
    width: 2.5rem;
    height: 1.35rem;
    cursor: pointer;
}

.hst-ai-feature-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.hst-ai-feature-option {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-height: 3.25rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--hst-ai-border);
    border-radius: 8px;
    background: var(--hst-surface, #161616);
    cursor: pointer;
}

.hst-ai-feature-option:has(input:checked) {
    border-color: rgba(192, 132, 252, 0.48);
}

.hst-ai-feature-option .form-check-input {
    margin-top: 0.2rem;
}

.hst-ai-feature-option span,
.hst-ai-feature-option strong,
.hst-ai-feature-option small {
    display: block;
}

.hst-ai-feature-option strong {
    color: var(--hst-ink, #f6f7fb);
    font-size: 0.8125rem;
}

.hst-ai-feature-option small {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.75rem;
    line-height: 1.35;
}

.hst-ai-settings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--hst-ai-border);
}



.hst-ai-summary-item {
    min-width: 0;
    padding: 0.9rem 1rem;
    border-right: 1px solid var(--hst-ai-border);
}

.hst-ai-summary-item:last-child {
    border-right: 0;
}

.hst-ai-summary-item span,
.hst-ai-summary-item strong {
    display: block;
}

.hst-ai-summary-item span {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
}

.hst-ai-summary-item strong {
    color: var(--hst-ink, #f6f7fb);
    font-size: 1.15rem;
    font-weight: 700;
}

.hst-ai-summary-item--total {
    background: rgba(124, 58, 237, 0.1);
}

.hst-ai-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--hst-ai-border);
    border-radius: 999px;
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.hst-ai-status-badge--ready {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
}

.hst-ai-status-badge--processing {
    border-color: rgba(192, 132, 252, 0.36);
    background: rgba(124, 58, 237, 0.1);
    color: #e9d5ff;
}

.hst-ai-status-badge--failed {
    border-color: rgba(239, 68, 68, 0.38);
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

.hst-ai-status-badge--purged,
.hst-ai-status-badge--neutral {
    background: rgba(148, 163, 184, 0.1);
}

.hst-ai-detail-modal .modal-dialog {
    max-width: 76rem;
}

.hst-ai-detail-context {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.875rem;
}

.hst-ai-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1rem;
}

.hst-ai-detail-section {
    min-width: 0;
}

.hst-ai-detail-section__head {
    align-items: center;
    min-height: 2.75rem;
    margin-bottom: 0.65rem;
}

.hst-ai-transcript {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    white-space: normal;
    font-family: inherit;
}

.hst-ai-transcript--plain {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.hst-ai-transcript--message {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.5;
}

.hst-ai-transcript-line {
    display: grid;
    grid-template-columns: minmax(4.75rem, 5.5rem) minmax(0, 1fr);
    gap: 0.65rem 0.85rem;
    align-items: start;
    padding: 0.15rem 0 0.55rem 0.65rem;
    border-bottom: 1px solid var(--hst-ai-border);
    border-left: 2px solid transparent;
}

.hst-ai-transcript-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.hst-ai-transcript-line--caller {
    border-left-color: rgba(192, 132, 252, 0.55);
}

.hst-ai-transcript-line--callee,
.hst-ai-transcript-line--agent {
    border-left-color: rgba(167, 139, 250, 0.35);
}

.hst-ai-transcript-line__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding-top: 0.1rem;
}

.hst-ai-transcript-line__speaker {
    color: #e9d5ff;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.hst-ai-transcript-line__time {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.hst-ai-transcript-line__text {
    margin: 0;
    color: #f6f7fb;
    font-size: 0.875rem;
    line-height: 1.55;
    word-break: break-word;
}

.hst-ai-transcript-line strong {
    color: #e9d5ff;
    font-size: 0.75rem;
}

.hst-ai-insights-content {
    max-height: 28rem;
    overflow: auto;
}

.hst-ai-insight-section h4 {
    margin: 0 0 0.4rem;
    color: #e9d5ff;
    font-size: 0.875rem;
    font-weight: 650;
    text-transform: capitalize;
}

.hst-ai-insight-section p {
    margin: 0;
    color: var(--hst-ink, #f6f7fb);
    font-size: 0.875rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme-mode="light"] .hst-ai-scope-bar,
[data-theme-mode="light"] .hst-ai-scope-state,
[data-theme-mode="light"] .hst-ai-account-guidance,
[data-theme-mode="light"] .hst-ai-prerequisite,
[data-theme-mode="light"] .hst-ai-setting-block,
[data-theme-mode="light"] .hst-ai-feature-option {
    background: #ffffff;
}

[data-theme-mode="light"] .hst-ai-controls-intro {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(124, 58, 237, 0.08), transparent 55%),
        #f3f4f6;
    border-color: rgba(124, 58, 237, 0.24);
}

[data-theme-mode="light"] .hst-ai-controls-intro__title,
[data-theme-mode="light"] .hst-ai-controls-intro__text,
[data-theme-mode="light"] .hst-ai-controls-intro__prereq {
    color: #1a1a1a;
}

[data-theme-mode="light"] .hst-ai-controls-intro__chips li {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.18);
    color: #4b5563;
}

[data-theme-mode="light"] .hst-ai-controls-intro__chips li i {
    color: #7c3aed;
}

[data-theme-mode="light"] .hst-ai-controls-intro__prereq {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.18);
}

[data-theme-mode="light"] .hst-ai-controls-intro__prereq > i {
    color: #7c3aed;
}

[data-theme-mode="light"] .hst-ai-controls-intro__api-box {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.15);
}

[data-theme-mode="light"] .hst-ai-controls-intro__api-icon i {
    color: #7c3aed;
}

[data-theme-mode="light"] .hst-ai-controls-intro__api-title {
    color: #1a1a1a;
}

[data-theme-mode="light"] .hst-ai-controls-intro__api-text {
    color: #4b5563;
}

[data-theme-mode="light"] .hst-ai-controls-intro__api-link {
    color: #7c3aed;
}

[data-theme-mode="light"] .hst-ai-controls-intro__api-link:hover {
    color: #6d28d9;
}

[data-theme-mode="light"] .hst-ai-stats-intro__lead {
    color: #4b5563;
}

[data-theme-mode="light"] .hst-ai-status-badge--ready {
    color: #166534;
}

[data-theme-mode="light"] .hst-ai-status-badge--processing,
[data-theme-mode="light"] .hst-ai-transcript-line__speaker,
[data-theme-mode="light"] .hst-ai-transcript-line strong,
[data-theme-mode="light"] .hst-ai-insight-section h4 {
    color: #6d28d9;
}

[data-theme-mode="light"] .hst-ai-transcript-line--caller {
    border-left-color: rgba(124, 58, 237, 0.55);
}

[data-theme-mode="light"] .hst-ai-transcript-line--callee,
[data-theme-mode="light"] .hst-ai-transcript-line--agent {
    border-left-color: rgba(124, 58, 237, 0.28);
}

[data-theme-mode="light"] .hst-ai-transcript-line__text {
    color: #0f172a;
}

[data-theme-mode="light"] .hst-ai-transcript--message {
    color: #64748b;
}

[data-theme-mode="light"] .hst-ai-status-badge--failed {
    color: #b91c1c;
}

@media (max-width: 1199.98px) {
    .hst-ai-scope-bar__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr);
    }

    .hst-ai-scope-state {
        grid-column: 1 / -1;
    }

    .hst-ai-summary-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hst-ai-summary-item:nth-child(3) {
        border-right: 0;
    }

    .hst-ai-summary-item:nth-child(n + 4) {
        border-top: 1px solid var(--hst-ai-border);
    }
}

@media (max-width: 767.98px) {
    .hst-ai-scope-bar__grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 0.35rem;
    }

    .hst-ai-scope-bar__label,
    .hst-ai-scope-bar__control,
    .hst-ai-scope-bar__status {
        grid-row: auto;
    }

    .hst-ai-scope-bar__label--spacer {
        display: none;
    }

    .hst-ai-scope-bar__status {
        min-height: 0;
        margin-top: 0.25rem;
    }

    .hst-ai-scope-controls,
    .hst-ai-settings-grid,
    .hst-ai-detail-grid,
    .hst-ai-feature-options,
    .hst-ai-summary-strip {
        grid-template-columns: 1fr;
    }

    .hst-ai-scope-state {
        grid-column: auto;
    }

    .hst-ai-summary-item,
    .hst-ai-summary-item:nth-child(3) {
        border-right: 0;
        border-top: 1px solid var(--hst-ai-border);
    }

    .hst-ai-summary-item:first-child {
        border-top: 0;
    }

    .hst-ai-section-head,
    .hst-ai-recordings-head,
    .hst-ai-detail-section__head,
    .hst-ai-prerequisite {
        flex-direction: column;
        align-items: stretch;
    }

    .hst-ai-controls-intro {
        flex-direction: column;
        gap: 0.65rem;
    }

    .hst-ai-controls-intro__chips {
        gap: 0.35rem;
    }

    .hst-ai-controls-intro__chips li {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: 8.5rem;
    }

    .hst-ai-account-guidance {
        align-items: flex-start;
    }

    .hst-ai-setting-block__head {
        flex-wrap: wrap;
    }

    .hst-ai-setting-block__head .form-switch {
        margin-left: 0 !important;
    }

    .hst-ai-prerequisite .btn,
    .hst-ai-settings-actions .btn,
    .hst-ai-open-detail {
        min-height: 44px;
    }

    .hst-ai-transcript-line {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .hst-ai-transcript-line__meta {
        flex-direction: row;
        align-items: baseline;
        gap: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hst-ai-spin {
        animation: none;
    }
}

/* ==========================================================================
   Hybrid SIP Trunks — Webhooks (manage detail section)
   ========================================================================== */

.hst-webhooks-intro {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

[data-theme-mode="light"] .hst-webhooks-intro {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
}

.hst-webhooks-intro__icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #f87171;
    font-size: 1.15rem;
}

[data-theme-mode="light"] .hst-webhooks-intro__icon {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.hst-webhooks-intro__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f6f7fb;
}

[data-theme-mode="light"] .hst-webhooks-intro__title {
    color: #111827;
}

.hst-webhooks-intro__text {
    font-size: 0.875rem;
    color: #b3b3b3;
}

[data-theme-mode="light"] .hst-webhooks-intro__text {
    color: #4b5563;
}

/* Webhooks sub-tabs: Webhooks (current setup) / Webhook events */
.hst-webhooks-subtabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

[data-theme-mode="light"] .hst-webhooks-subtabs {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
}

.hst-webhooks-subtab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #b3b3b3;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hst-webhooks-subtab:hover {
    color: #f6f7fb;
}

.hst-webhooks-subtab.is-active {
    background: rgba(139, 92, 246, 0.16);
    color: #c4b5fd;
}

[data-theme-mode="light"] .hst-webhooks-subtab {
    color: #4b5563;
}

[data-theme-mode="light"] .hst-webhooks-subtab:hover {
    color: #111827;
}

[data-theme-mode="light"] .hst-webhooks-subtab.is-active {
    background: rgba(139, 92, 246, 0.12);
    color: #6d28d9;
}

.hst-webhooks-subtab:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

/* Webhooks current-setup summary card */
.hst-webhooks-summary-card {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: #161616;
}

[data-theme-mode="light"] .hst-webhooks-summary-card {
    border-color: rgba(15, 23, 42, 0.1);
    background: #ffffff;
}

.hst-webhooks-summary-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.hst-webhooks-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.hst-webhooks-summary-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0.35rem 1rem;
    align-items: start;
}

.hst-webhooks-summary-term {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #b3b3b3;
}

[data-theme-mode="light"] .hst-webhooks-summary-term {
    color: #6b7280;
}

.hst-webhooks-summary-desc {
    min-width: 0;
    font-size: 0.875rem;
    color: #e5e7eb;
}

[data-theme-mode="light"] .hst-webhooks-summary-desc {
    color: #1f2937;
}

.hst-webhooks-summary-url {
    overflow-wrap: anywhere;
}

.hst-webhooks-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.hst-webhooks-summary-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #e5e7eb;
    font-size: 0.75rem;
}

[data-theme-mode="light"] .hst-webhooks-summary-chip {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.04);
    color: #1f2937;
}

.hst-webhooks-event-types {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hst-webhooks-event-types.is-invalid {
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(239, 68, 68, 0.55);
    border-radius: 0.5rem;
}

.hst-webhooks-config-modal .hst-form-control.is-invalid {
    border-color: rgba(239, 68, 68, 0.55) !important;
}

.hst-webhooks-event-group {
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: #161616;
}

[data-theme-mode="light"] .hst-webhooks-event-group {
    border-color: rgba(15, 23, 42, 0.1);
    background: #ffffff;
}

.hst-webhooks-event-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
}

.hst-webhooks-secret-once {
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: 8px;
    background: rgba(234, 179, 8, 0.08);
}

.hst-webhooks-deliveries-table-wrap {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    overflow: auto;
}

[data-theme-mode="light"] .hst-webhooks-deliveries-table-wrap {
    border-color: rgba(15, 23, 42, 0.1);
}

.hst-webhooks-deliveries-table {
    margin: 0;
    min-width: 640px;
}

.hst-webhooks-deliveries-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #b3b3b3;
    border-bottom-color: rgba(255, 255, 255, 0.09);
    white-space: nowrap;
}

[data-theme-mode="light"] .hst-webhooks-deliveries-table thead th {
    color: #6b7280;
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

.hst-webhooks-payload-pre {
    max-height: 22rem;
    overflow: auto;
    padding: 0.85rem 1rem;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: #101010;
    color: #e5e7eb;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre;
}

[data-theme-mode="light"] .hst-webhooks-payload-pre {
    border-color: rgba(15, 23, 42, 0.1);
    background: #f8fafc;
    color: #111827;
}

.hst-webhooks-payload-headers {
    padding-left: 1.1rem;
    color: #b3b3b3;
}

[data-theme-mode="light"] .hst-webhooks-payload-headers {
    color: #4b5563;
}

.hst-webhooks-payload-headers li + li {
    margin-top: 0.35rem;
}

.hst-webhooks-payload-notes {
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

[data-theme-mode="light"] .hst-webhooks-payload-notes {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
}

.hst-webhooks-payload-notes-list {
    padding-left: 1.1rem;
    margin: 0;
    color: #b3b3b3;
    font-size: 0.8125rem;
}

[data-theme-mode="light"] .hst-webhooks-payload-notes-list {
    color: #4b5563;
}

.hst-webhooks-payload-notes-list li + li {
    margin-top: 0.35rem;
}

.hst-webhooks-payload-colours-table {
    margin: 0;
}

.hst-webhooks-payload-colours-table th,
.hst-webhooks-payload-colours-table td {
    font-size: 0.8125rem;
    vertical-align: middle;
    border-color: rgba(255, 255, 255, 0.09);
    color: #e5e7eb;
}

[data-theme-mode="light"] .hst-webhooks-payload-colours-table th,
[data-theme-mode="light"] .hst-webhooks-payload-colours-table td {
    border-color: rgba(15, 23, 42, 0.1);
    color: #111827;
}

.hst-webhooks-payload-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.45rem;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    vertical-align: -0.1rem;
}

[data-theme-mode="light"] .hst-webhooks-payload-swatch {
    border-color: rgba(15, 23, 42, 0.2);
}

@media (max-width: 767.98px) {
    .hst-webhooks-event-grid {
        grid-template-columns: 1fr;
    }

    .hst-webhooks-intro {
        flex-direction: column;
        gap: 0.65rem;
    }

    .hst-webhooks-subtabs {
        display: flex;
        width: 100%;
    }

    .hst-webhooks-subtab {
        flex: 1 1 0;
        justify-content: center;
        min-height: 44px;
    }

    .hst-webhooks-summary-row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    #hst-op-webhooks-configure,
    #hst-op-webhooks-save,
    #hst-op-webhooks-test,
    #hst-op-webhooks-delete,
    #hst-op-webhooks-rotate,
    #hst-op-webhooks-payload,
    #hst-op-webhooks-refresh,
    #hst-op-webhooks-deliveries-refresh {
        min-height: 44px;
    }
}

/* ==========================================================================
   Hybrid SIP Trunks — Account-wide Webhooks list
   ========================================================================== */

.hst-webhooks-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.hst-webhooks-list-table {
    min-width: 920px;
}

.hst-webhooks-list-table > :not(caption) > * > * {
    vertical-align: middle;
}

.hst-webhooks-list-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #b3b3b3;
    border-bottom-color: rgba(255, 255, 255, 0.09);
    white-space: nowrap;
}

[data-theme-mode="light"] .hst-webhooks-list-table thead th {
    color: #6b7280;
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

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

[data-theme-mode="light"] .hst-webhooks-list-table tbody tr:hover {
    background: rgba(15, 23, 42, 0.03);
}

.hst-webhooks-list-aor {
    font-weight: 600;
    color: #f6f7fb;
    word-break: break-all;
}

[data-theme-mode="light"] .hst-webhooks-list-aor {
    color: #111827;
}

.hst-webhooks-list-url,
.hst-webhooks-list-events,
.hst-webhooks-list-format {
    font-size: 0.875rem;
    color: #e5e7eb;
}

[data-theme-mode="light"] .hst-webhooks-list-url,
[data-theme-mode="light"] .hst-webhooks-list-events,
[data-theme-mode="light"] .hst-webhooks-list-format {
    color: #1f2937;
}

.hst-webhooks-list-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
}

.hst-webhooks-list-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.hst-webhooks-list-badge--enabled {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.hst-webhooks-list-badge--disabled {
    color: #d1d5db;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.hst-webhooks-list-badge--circuit {
    color: #fbbf24;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

[data-theme-mode="light"] .hst-webhooks-list-badge--enabled {
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
}

[data-theme-mode="light"] .hst-webhooks-list-badge--disabled {
    color: #4b5563;
    background: rgba(100, 116, 139, 0.1);
}

[data-theme-mode="light"] .hst-webhooks-list-badge--circuit {
    color: #92400e;
    background: rgba(234, 179, 8, 0.14);
}

.hst-webhooks-list-circuit,
.hst-webhooks-list-delivery {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
}

.hst-webhooks-list-circuit--open,
.hst-webhooks-list-delivery--fail {
    color: #fbbf24;
}

.hst-webhooks-list-delivery--ok {
    color: #86efac;
}

[data-theme-mode="light"] .hst-webhooks-list-circuit--open,
[data-theme-mode="light"] .hst-webhooks-list-delivery--fail {
    color: #92400e;
}

[data-theme-mode="light"] .hst-webhooks-list-delivery--ok {
    color: #166534;
}

.hst-webhooks-list-filter-empty {
    color: #b3b3b3;
    font-size: 0.875rem;
}

[data-theme-mode="light"] .hst-webhooks-list-filter-empty {
    color: #4b5563;
}

.hst-webhooks-list-manage-link {
    min-height: 36px;
}

@media (max-width: 767.98px) {
    .hst-webhooks-list-toolbar {
        justify-content: flex-start;
    }

    .hst-webhooks-list-toolbar .btn,
    #hst-webhooks-list-clear-filters,
    .hst-webhooks-list-manage-link {
        min-height: 44px;
    }
}

/* ==========================================================================
   Hybrid SIP Trunks — Webhooks list empty state redesigned (promotional style)
   ========================================================================== */
#hst-webhooks-list-empty.hst-list-empty-state {
    max-width: 1000px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    margin: 1.5rem auto;
}

.hst-webhooks-promo-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hst-webhooks-promo-hero {
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.12), transparent 60%),
                linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(139, 92, 246, 0.04)),
                var(--hst-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
}

[data-theme-mode="light"] .hst-webhooks-promo-hero {
    background: radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.08), transparent 60%),
                linear-gradient(135deg, rgba(20, 184, 166, 0.04), rgba(139, 92, 246, 0.02)),
                #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.hst-webhooks-promo-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.15);
    color: var(--hst-accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

[data-theme-mode="light"] .hst-webhooks-promo-badge {
    background: rgba(20, 184, 166, 0.1);
}

.hst-webhooks-promo-title-main {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--hst-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.hst-webhooks-promo-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--hst-muted);
    max-width: 680px;
    margin-bottom: 0;
}

.hst-webhooks-promo-btn-cta {
    font-weight: 600;
    padding: 0.6rem 1.5rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
    transition: all 0.25s ease-in-out;
}

.hst-webhooks-promo-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}

/* Platform cards */
.hst-webhooks-platform-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--hst-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
    transition: all 0.25s ease-in-out;
}

[data-theme-mode="light"] .hst-webhooks-platform-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

.hst-webhooks-platform-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .hst-webhooks-platform-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.hst-webhooks-platform-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hst-webhooks-platform-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    font-size: 1.25rem;
}

.hst-webhooks-platform-icon.discord {
    background: rgba(88, 101, 242, 0.15);
    color: #5865f2;
}

.hst-webhooks-platform-icon.slack {
    background: rgba(74, 21, 75, 0.15);
    color: #e01e5a;
}

.hst-webhooks-platform-icon.teams {
    background: rgba(98, 100, 167, 0.15);
    color: #6264a7;
}

.hst-webhooks-platform-icon.google-chat {
    background: rgba(15, 157, 88, 0.15);
    color: #0f9d58;
}

.hst-webhooks-platform-icon.custom-http {
    background: rgba(20, 184, 166, 0.15);
    color: var(--hst-accent);
}

.hst-webhooks-platform-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin: 0;
}

.hst-webhooks-platform-card p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--hst-muted);
    margin: 0;
}

/* Specs Section */
.hst-webhooks-specs-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme-mode="light"] .hst-webhooks-specs-panel {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.hst-webhooks-spec-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}

.hst-webhooks-spec-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.12);
    color: var(--hst-accent);
    font-size: 1.1rem;
}

.hst-webhooks-spec-card h5 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin: 0;
}

.hst-webhooks-spec-card p {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--hst-muted);
    margin: 0;
}

/* ==========================================================================
   Hybrid SIP Trunks — Music on Hold list empty state redesigned (promotional style)
   ========================================================================== */
#hst-moh-list-empty.hst-list-empty-state {
    max-width: 1000px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    margin: 1.5rem auto;
}

.hst-moh-promo-empty-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hst-moh-promo-empty-hero {
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.12), transparent 60%),
                linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(139, 92, 246, 0.04)),
                var(--hst-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
}

[data-theme-mode="light"] .hst-moh-promo-empty-hero {
    background: radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.08), transparent 60%),
                linear-gradient(135deg, rgba(20, 184, 166, 0.04), rgba(139, 92, 246, 0.02)),
                #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.hst-moh-promo-empty-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.15);
    color: var(--hst-accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

[data-theme-mode="light"] .hst-moh-promo-empty-badge {
    background: rgba(20, 184, 166, 0.1);
}

.hst-moh-promo-empty-title-main {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--hst-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.hst-moh-promo-empty-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--hst-muted);
    max-width: 680px;
    margin-bottom: 0;
}

.hst-moh-promo-empty-btn-cta,
.hst-moh-promo-empty-btn-secondary {
    font-weight: 600;
    padding: 0.6rem 1.5rem !important;
    border-radius: 8px !important;
    transition: all 0.25s ease-in-out;
}

.hst-moh-promo-empty-btn-cta {
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}

.hst-moh-promo-empty-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}

.hst-moh-promo-empty-btn-secondary:hover {
    transform: translateY(-1px);
}

/* Feature cards */
.hst-moh-promo-empty-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--hst-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
    transition: all 0.25s ease-in-out;
}

[data-theme-mode="light"] .hst-moh-promo-empty-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

.hst-moh-promo-empty-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .hst-moh-promo-empty-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.hst-moh-promo-empty-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hst-moh-promo-empty-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    font-size: 1.25rem;
}

.hst-moh-promo-empty-card-icon.brand {
    background: rgba(20, 184, 166, 0.15);
    color: var(--hst-accent);
}

.hst-moh-promo-empty-card-icon.customer {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.hst-moh-promo-empty-card-icon.formats {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.hst-moh-promo-empty-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin: 0;
}

.hst-moh-promo-empty-card p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--hst-muted);
    margin: 0;
}

/* Specs Section */
.hst-moh-promo-empty-specs {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme-mode="light"] .hst-moh-promo-empty-specs {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.hst-moh-promo-empty-spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}

.hst-moh-promo-empty-spec-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.12);
    color: var(--hst-accent);
    font-size: 1.1rem;
}

.hst-moh-promo-empty-spec-item h5 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin: 0;
}

.hst-moh-promo-empty-spec-item p {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--hst-muted);
    margin: 0;
}

/* ==========================================================================
   Premium AI Bridge — Calls list empty state redesigned (promotional style)
   ========================================================================== */
.pab-calls-container .pab-empty-state {
    display: block !important; /* Managed by d-none toggle on outer container */
    max-width: 1000px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    margin: 1.5rem auto;
}

.pab-calls-promo-empty-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.pab-calls-promo-empty-hero {
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.12), transparent 60%),
                linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(139, 92, 246, 0.04)),
                var(--hst-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
}

[data-theme-mode="light"] .pab-calls-promo-empty-hero {
    background: radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.08), transparent 60%),
                linear-gradient(135deg, rgba(20, 184, 166, 0.04), rgba(139, 92, 246, 0.02)),
                #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.pab-calls-promo-empty-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.15);
    color: var(--hst-accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

[data-theme-mode="light"] .pab-calls-promo-empty-badge {
    background: rgba(20, 184, 166, 0.1);
}

.pab-calls-promo-empty-title-main {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--hst-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.pab-calls-promo-empty-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--hst-muted);
    max-width: 680px;
    margin-bottom: 0;
}

.pab-calls-promo-empty-btn-cta {
    font-weight: 600;
    padding: 0.6rem 1.5rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
    transition: all 0.25s ease-in-out;
}

.pab-calls-promo-empty-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}

/* Feature cards */
.pab-calls-promo-empty-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--hst-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
    transition: all 0.25s ease-in-out;
}

[data-theme-mode="light"] .pab-calls-promo-empty-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

.pab-calls-promo-empty-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .pab-calls-promo-empty-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.pab-calls-promo-empty-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pab-calls-promo-empty-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    font-size: 1.25rem;
}

.pab-calls-promo-empty-card-icon.routing {
    background: rgba(20, 184, 166, 0.15);
    color: var(--hst-accent);
}

.pab-calls-promo-empty-card-icon.transcript {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.pab-calls-promo-empty-card-icon.crm {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.pab-calls-promo-empty-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin: 0;
}

.pab-calls-promo-empty-card p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--hst-muted);
    margin: 0;
}

/* Specs Section */
.pab-calls-promo-empty-specs {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme-mode="light"] .pab-calls-promo-empty-specs {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.pab-calls-promo-empty-spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}

.pab-calls-promo-empty-spec-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.12);
    color: var(--hst-accent);
    font-size: 1.1rem;
}

.pab-calls-promo-empty-spec-item h5 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin: 0;
}

.pab-calls-promo-empty-spec-item p {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--hst-muted);
    margin: 0;
}

/* ==========================================================================
   Hybrid SIP Trunks — Live Calls list empty state redesigned (promotional style)
   ========================================================================== */
#hst-calls-live-empty.hst-list-empty-state {
    max-width: 1000px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    margin: 1.5rem auto;
}

.hst-calls-live-promo-empty-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hst-calls-live-promo-empty-hero {
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.12), transparent 60%),
                linear-gradient(135deg, rgba(20, 184, 166, 0.06), rgba(139, 92, 246, 0.04)),
                var(--hst-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
}

[data-theme-mode="light"] .hst-calls-live-promo-empty-hero {
    background: radial-gradient(120% 140% at 100% 0%, rgba(20, 184, 166, 0.08), transparent 60%),
                linear-gradient(135deg, rgba(20, 184, 166, 0.04), rgba(139, 92, 246, 0.02)),
                #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.hst-calls-live-promo-empty-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.15);
    color: var(--hst-accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

[data-theme-mode="light"] .hst-calls-live-promo-empty-badge {
    background: rgba(20, 184, 166, 0.1);
}

.hst-calls-live-promo-empty-title-main {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--hst-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.hst-calls-live-promo-empty-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--hst-muted);
    max-width: 680px;
    margin-bottom: 0;
}

.hst-calls-live-promo-empty-btn-cta {
    font-weight: 600;
    padding: 0.6rem 1.5rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
    transition: all 0.25s ease-in-out;
}

.hst-calls-live-promo-empty-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
}

/* Feature cards */
.hst-calls-live-promo-empty-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--hst-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
    transition: all 0.25s ease-in-out;
}

[data-theme-mode="light"] .hst-calls-live-promo-empty-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

.hst-calls-live-promo-empty-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .hst-calls-live-promo-empty-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.hst-calls-live-promo-empty-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hst-calls-live-promo-empty-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    font-size: 1.25rem;
}

.hst-calls-live-promo-empty-card-icon.real-time {
    background: rgba(20, 184, 166, 0.15);
    color: var(--hst-accent);
}

.hst-calls-live-promo-empty-card-icon.timeline {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.hst-calls-live-promo-empty-card-icon.control {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.hst-calls-live-promo-empty-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin: 0;
}

.hst-calls-live-promo-empty-card p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--hst-muted);
    margin: 0;
}

/* Specs Section */
.hst-calls-live-promo-empty-specs {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme-mode="light"] .hst-calls-live-promo-empty-specs {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.hst-calls-live-promo-empty-spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}

.hst-calls-live-promo-empty-spec-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.12);
    color: var(--hst-accent);
    font-size: 1.1rem;
}

.hst-calls-live-promo-empty-spec-item h5 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--hst-ink);
    margin: 0;
}

.hst-calls-live-promo-empty-spec-item p {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--hst-muted);
    margin: 0;
}





/* ==========================================================================
   Hybrid SIP Trunks — Call Parking (hst-parking-*)
   ========================================================================== */

.hst-parking-page .hst-parking-tabs {
    border-bottom-color: var(--hst-border, rgba(255, 255, 255, 0.09));
    gap: 0.25rem;
    flex-wrap: wrap;
}

.hst-parking-page .hst-parking-tabs .nav-link {
    color: var(--hst-muted, #b3b3b3);
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
}

.hst-parking-page .hst-parking-tabs .nav-link:hover,
.hst-parking-page .hst-parking-tabs .nav-link:focus-visible {
    color: var(--hst-ink, #f6f7fb);
    border-color: rgba(20, 184, 166, 0.35);
    background: rgba(20, 184, 166, 0.08);
}

.hst-parking-page .hst-parking-tabs .nav-link.active {
    color: var(--hst-ink, #f6f7fb);
    background: var(--hst-surface-raised, #1a1a1a);
    border-color: var(--hst-border, rgba(255, 255, 255, 0.09));
    border-bottom-color: transparent;
}

.hst-parking-metric {
    background: var(--hst-surface-raised, #1a1a1a);
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    border-radius: 8px;
    padding: 0.85rem 1rem;
    min-height: 4.5rem;
}

.hst-parking-metric__label {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.8125rem;
    margin: 0;
}

.hst-parking-metric__value {
    color: var(--hst-ink, #f6f7fb);
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.hst-parking-empty {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border: 1px dashed rgba(20, 184, 166, 0.35);
    border-radius: 10px;
    background: rgba(20, 184, 166, 0.05);
}

.hst-parking-empty__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0d9488;
    color: #fff;
    font-size: 1.25rem;
}

.hst-parking-empty__title {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--hst-ink, #f6f7fb);
    margin: 0 0 0.4rem;
}

.hst-parking-empty__text {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.875rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.hst-parking-wallboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.hst-parking-wallboard__grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.hst-parking-card {
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    border-radius: 10px;
    background: var(--hst-surface, #161616);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 9.5rem;
}

.hst-parking-card--occupied {
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: inset 3px 0 0 #14b8a6;
}

.hst-parking-card--ringing {
    border-color: rgba(234, 179, 8, 0.5);
    box-shadow: inset 3px 0 0 #eab308;
}

.hst-parking-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.hst-parking-card__space-num {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hst-ink, #f6f7fb);
    line-height: 1.1;
}

.hst-parking-card__state {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hst-accent, #14b8a6);
}

.hst-parking-card--ringing .hst-parking-card__state {
    color: #eab308;
}

.hst-parking-card__caller {
    color: var(--hst-ink, #f6f7fb);
    font-size: 0.9375rem;
    font-weight: 550;
    margin: 0.35rem 0 0;
}

.hst-parking-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.45rem;
}

.hst-parking-card__dial code {
    color: var(--hst-accent, #14b8a6);
}

.hst-parking-timer {
    height: 4px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.28);
    overflow: hidden;
    margin: 0.35rem 0 0.15rem;
}

.hst-parking-timer__bar {
    height: 100%;
    background: linear-gradient(90deg, #0d9488, #14b8a6);
    border-radius: inherit;
    transition: width 0.4s ease;
}

.hst-parking-card--ringing .hst-parking-timer__bar {
    background: linear-gradient(90deg, #ca8a04, #eab308);
}

.hst-parking-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    color: var(--hst-muted, #b3b3b3);
}

.hst-parking-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hst-parking-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    display: inline-block;
}

.hst-parking-dot--idle {
    background: rgba(148, 163, 184, 0.55);
}

.hst-parking-dot--occupied {
    background: #14b8a6;
}

.hst-parking-dot--ringing {
    background: #eab308;
}

.hst-parking-dss-grid__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.55rem;
}

.hst-parking-dss {
    appearance: none;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    background: var(--hst-surface, #161616);
    color: var(--hst-ink, #f6f7fb);
    border-radius: 8px;
    min-height: 5.5rem;
    padding: 0.55rem 0.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hst-parking-dss:hover,
.hst-parking-dss:focus-visible {
    border-color: rgba(20, 184, 166, 0.55);
    outline: none;
    background: rgba(20, 184, 166, 0.08);
}

.hst-parking-dss__num {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hst-parking-dss__state,
.hst-parking-dss__dial,
.hst-parking-dss__caller {
    font-size: 0.75rem;
    color: var(--hst-muted, #b3b3b3);
    line-height: 1.3;
}

.hst-parking-dss--idle .hst-parking-dss__state {
    color: #94a3b8;
}

.hst-parking-dss--occupied {
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.15);
}

.hst-parking-dss--occupied .hst-parking-dss__state {
    color: #14b8a6;
    font-weight: 600;
}

.hst-parking-dss--ringing {
    border-color: rgba(234, 179, 8, 0.5);
}

.hst-parking-dss--ringing .hst-parking-dss__state {
    color: #eab308;
    font-weight: 600;
}

.hst-parking-timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hst-parking-timeline__item {
    display: flex;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
}

.hst-parking-timeline__item:last-child {
    border-bottom: 0;
}

.hst-parking-timeline__dot {
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.4rem;
    border-radius: 50%;
    background: #0d9488;
    flex-shrink: 0;
}

.hst-parking-timeline__line {
    color: var(--hst-ink, #f6f7fb);
    font-size: 0.875rem;
}

.hst-parking-stats-window.is-active {
    background: rgba(20, 184, 166, 0.18) !important;
    border-color: rgba(20, 184, 166, 0.55) !important;
    color: var(--hst-ink, #f6f7fb) !important;
}

.hst-parking-help-code {
    border: 1px solid rgba(20, 184, 166, 0.35);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    background: rgba(20, 184, 166, 0.08);
}

.hst-parking-help-code__label {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hst-parking-help-code__code {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hst-accent, #14b8a6);
}

.hst-parking-help-steps {
    padding-left: 1.15rem;
    color: var(--hst-muted, #b3b3b3);
}

.hst-parking-help-steps li + li {
    margin-top: 0.35rem;
}

.hst-parking-tab-content > .tab-pane {
    /* Avoid Bootstrap fade double-paint on data-heavy panes */
    transition: none;
}

[data-theme-mode="light"] .hst-parking-metric,
[data-theme-mode="light"] .hst-parking-card,
[data-theme-mode="light"] .hst-parking-dss {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .hst-parking-empty {
    background: rgba(13, 148, 136, 0.06);
}

[data-theme-mode="light"] .hst-parking-metric__value,
[data-theme-mode="light"] .hst-parking-card__space-num,
[data-theme-mode="light"] .hst-parking-card__caller,
[data-theme-mode="light"] .hst-parking-timeline__line,
[data-theme-mode="light"] .hst-parking-empty__title {
    color: #0f172a;
}

[data-theme-mode="light"] .hst-parking-timer {
    background: rgba(100, 116, 139, 0.22);
}

@media (max-width: 575.98px) {
    .hst-parking-wallboard__grid {
        grid-template-columns: 1fr;
    }

    .hst-parking-dss-grid__inner {
        grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    }
}

/* Create / edit lot modal — intro help blurb */
.hst-parking-lot-intro {
    align-items: flex-start;
    animation: none;
    padding: 0.75rem 0.9rem;
}

.hst-parking-lot-intro__body {
    flex: 1;
    min-width: 0;
}

.hst-parking-lot-intro__lead {
    margin: 0 0 0.55rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--hst-ink, #f6f7fb);
    max-width: 62ch;
    text-wrap: pretty;
}

.hst-parking-lot-intro__rules-label {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5eead4;
    line-height: 1.2;
}

.hst-parking-lot-intro__tips {
    margin: 0;
    padding: 0 0 0 1.1rem;
    list-style: disc;
    max-width: 72ch;
}

.hst-parking-lot-intro__tips li {
    margin: 0 0 0.35rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--hst-muted, #b3b3b3);
    line-height: 1.45;
    text-wrap: pretty;
}

.hst-parking-lot-intro__tips li:last-child {
    margin-bottom: 0;
}

[data-theme-mode="light"] .hst-parking-lot-intro__lead {
    color: #0f172a;
}

[data-theme-mode="light"] .hst-parking-lot-intro__rules-label {
    color: #0f766e;
}

[data-theme-mode="light"] .hst-parking-lot-intro__tips li {
    color: #475569;
}

@media (max-width: 575.98px) {
    .hst-parking-lot-intro {
        flex-direction: column;
        gap: 0.55rem;
    }
}

/* Create / edit lot modal — two-column compact layout.
 * Form wraps .modal-body + .modal-footer, so restore Bootstrap's
 * modal-dialog-scrollable flex chain: body scrolls, footer stays pinned. */
.hst-parking-lot-dialog {
    max-width: min(1100px, calc(100vw - 1.5rem));
}

.hst-parking-lot-dialog .modal-content {
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hst-parking-lot-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.hst-parking-lot-dialog .hst-parking-lot-form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    /* Beat .portal-modern-modal.hst-hybrid-modal .modal-body padding shorthand */
    padding-bottom: 1.75rem !important;
}

.hst-parking-lot-dialog .modal-header,
.hst-parking-lot-dialog .modal-footer {
    flex-shrink: 0;
}

.hst-parking-lot-dialog .modal-footer {
    position: relative;
    z-index: 2;
    margin-top: 0;
}

.hst-parking-lot-form .hst-form-label {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

/* Orbit trunk helper — keep clear of the select / Choices open list */
.hst-parking-lot-orbit-hint {
    display: block;
    margin-top: 0.4rem;
    margin-bottom: 0.15rem;
    line-height: 1.4;
}

.hst-parking-lot-notes-wrap {
    margin-top: 0.15rem;
    padding-bottom: 0.25rem;
}

.hst-parking-lot-hold-input {
    max-width: 7rem;
}

.hst-parking-lot-hold-row.is-nolimit .hst-parking-lot-hold-input,
.hst-parking-lot-hold-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--hst-muted, #b3b3b3);
}

[data-theme-mode="light"] .hst-parking-lot-hold-row.is-nolimit .hst-parking-lot-hold-input,
[data-theme-mode="light"] .hst-parking-lot-hold-input:disabled {
    background-color: rgba(15, 23, 42, 0.06);
    color: #6b7280;
}

.hst-parking-lot-col--orbit {
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hst-parking-lot-col__title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--hst-ink, #f6f7fb);
}

.hst-parking-lot-toggles .form-check-label {
    font-size: 0.875rem;
}

/* CF destination pickers inside parking modal (reuse manage CF overlay CSS). */
.hst-parking-lot-form .hst-edit-cf-dest {
    width: 100%;
}

[data-theme-mode="light"] .hst-parking-lot-col--orbit {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .hst-parking-lot-col__title {
    color: #111827;
}

@media (max-width: 767.98px) {
    .hst-parking-lot-dialog .modal-content {
        max-height: min(94vh, 900px);
    }
}

/* ------------------------------------------------------------------ */
/* Hybrid SIP Trunks — Call Reports (call-stats)                      */
/* ------------------------------------------------------------------ */

.hst-call-stats-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.hst-call-stats-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(20, 184, 166, 0.38);
    background: transparent;
    color: var(--hst-ink, #f6f7fb);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.hst-call-stats-nav-link i {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--hst-accent, #14b8a6);
    transition: color 160ms ease;
}

.hst-call-stats-nav-link:hover,
.hst-call-stats-nav-link:focus-visible {
    background: rgba(20, 184, 166, 0.1);
    border-color: rgba(20, 184, 166, 0.55);
    color: #f6f7fb;
    text-decoration: none;
    outline: none;
}

.hst-call-stats-nav-link:hover i,
.hst-call-stats-nav-link:focus-visible i {
    color: #2dd4bf;
}

.hst-call-stats-nav-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.35);
}

.hst-call-stats-nav-link:active {
    background: rgba(20, 184, 166, 0.16);
    border-color: var(--hst-accent, #14b8a6);
}

[data-theme-mode="light"] .hst-call-stats-nav-link {
    border-color: rgba(13, 148, 136, 0.35);
    background: #ffffff;
    color: #0f172a;
}

[data-theme-mode="light"] .hst-call-stats-nav-link i {
    color: #0d9488;
}

[data-theme-mode="light"] .hst-call-stats-nav-link:hover,
[data-theme-mode="light"] .hst-call-stats-nav-link:focus-visible {
    background: rgba(13, 148, 136, 0.08);
    border-color: rgba(13, 148, 136, 0.5);
    color: #0f172a;
}

[data-theme-mode="light"] .hst-call-stats-nav-link:hover i,
[data-theme-mode="light"] .hst-call-stats-nav-link:focus-visible i {
    color: #0f766e;
}

@media (max-width: 575.98px) {
    .hst-call-stats-nav {
        justify-content: flex-start;
    }

    .hst-call-stats-nav-link {
        flex: 1 1 auto;
    }
}

.hst-call-stats-filters {
    padding: 0.75rem 0.9rem;
}

.hst-call-stats-filters__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
}

.hst-call-stats-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.35rem 0.65rem 0.35rem 0.35rem;
    border: 1px solid rgba(20, 184, 166, 0.35);
    border-radius: 0.65rem;
    background: var(--hst-surface-raised, #1a1a1a);
    color: var(--hst-ink, #f6f7fb);
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.hst-call-stats-filters__toggle:hover,
.hst-call-stats-filters__toggle:focus-visible {
    border-color: rgba(20, 184, 166, 0.6);
    background: rgba(20, 184, 166, 0.08);
    outline: none;
}

.hst-call-stats-filters__toggle-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0d9488;
    color: #ffffff;
    font-size: 1.05rem;
}

.hst-call-stats-filters__toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.hst-call-stats-filters__toggle-label {
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;
}

.hst-call-stats-filters__summary {
    font-size: 0.75rem;
    color: var(--hst-muted, #b3b3b3);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}

.hst-call-stats-filters__chevron {
    color: var(--hst-muted, #b3b3b3);
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 160ms ease;
}

.hst-call-stats-filters.is-expanded .hst-call-stats-filters__chevron {
    transform: rotate(180deg);
}

.hst-call-stats-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
}

.hst-call-stats-filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.hst-call-stats-filter-chip--active,
.hst-call-stats-filter-chip--locked {
    border-color: rgba(20, 184, 166, 0.45);
    background: rgba(13, 148, 136, 0.14);
    color: var(--hst-ink, #f6f7fb);
}

.hst-call-stats-filters__body {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
}

.hst-call-stats-filters__grid .hst-form-label {
    margin-bottom: 0.3rem;
}

.hst-call-stats-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    padding-top: 0.25rem;
}

.hst-call-stats-filters__apply,
.hst-call-stats-filters__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

.hst-call-stats-filters__preset {
    min-height: 36px;
}

.hst-call-stats-locked-trunk {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    width: 100%;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(20, 184, 166, 0.35);
    background: rgba(13, 148, 136, 0.1);
    color: var(--hst-ink, #f6f7fb);
    font-size: 0.875rem;
}

.hst-op-call-stats-mount .hst-call-stats-suite {
    margin-top: 0.15rem;
}

[data-theme-mode="light"] .hst-call-stats-filters__toggle {
    background: #ffffff;
    border-color: rgba(13, 148, 136, 0.35);
    color: #111827;
}

[data-theme-mode="light"] .hst-call-stats-filters__toggle:hover,
[data-theme-mode="light"] .hst-call-stats-filters__toggle:focus-visible {
    background: rgba(13, 148, 136, 0.08);
}

[data-theme-mode="light"] .hst-call-stats-filters__summary {
    color: #6b7280;
}

[data-theme-mode="light"] .hst-call-stats-filter-chip {
    background: #f3f4f6;
    border-color: rgba(15, 23, 42, 0.1);
    color: #4b5563;
}

[data-theme-mode="light"] .hst-call-stats-filter-chip--active,
[data-theme-mode="light"] .hst-call-stats-filter-chip--locked {
    background: rgba(13, 148, 136, 0.12);
    border-color: rgba(13, 148, 136, 0.45);
    color: #0f172a;
}

[data-theme-mode="light"] .hst-call-stats-locked-trunk {
    background: rgba(13, 148, 136, 0.08);
    color: #0f172a;
}

.hst-call-stats-page .hst-call-stats-weekday-chips,
.hst-call-stats-suite .hst-call-stats-weekday-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.hst-call-stats-weekday-chip {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    background: var(--hst-surface-raised, #1a1a1a);
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.hst-call-stats-weekday-chip:hover,
.hst-call-stats-weekday-chip:focus-visible {
    border-color: rgba(20, 184, 166, 0.55);
    color: var(--hst-ink, #f6f7fb);
    outline: none;
}

.hst-call-stats-weekday-chip.is-active,
.hst-call-stats-weekday-chip[aria-pressed="true"] {
    background: rgba(13, 148, 136, 0.18);
    border-color: rgba(20, 184, 166, 0.7);
    color: var(--hst-ink, #f6f7fb);
}

[data-theme-mode="light"] .hst-call-stats-weekday-chip {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #6b7280;
}

[data-theme-mode="light"] .hst-call-stats-weekday-chip.is-active,
[data-theme-mode="light"] .hst-call-stats-weekday-chip[aria-pressed="true"] {
    background: rgba(13, 148, 136, 0.12);
    border-color: rgba(13, 148, 136, 0.55);
    color: #0f172a;
}

.hst-call-stats-page,
.hst-call-stats-suite,
.hst-op-call-stats-mount {
    max-width: 100%;
    min-width: 0;
}

.hst-call-stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.hst-call-stats-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.55rem;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    background: var(--hst-surface-raised, #1a1a1a);
    min-height: 4.5rem;
}

[data-theme-mode="light"] .hst-call-stats-kpi-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

.hst-call-stats-kpi-card__icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    background: #0d9488;
}

.hst-call-stats-kpi-card__icon--teal { background: #0d9488; }
.hst-call-stats-kpi-card__icon--green { background: #16a34a; }
.hst-call-stats-kpi-card__icon--orange { background: #ea580c; }
.hst-call-stats-kpi-card__icon--rose { background: #e11d48; }
.hst-call-stats-kpi-card__icon--amber { background: #a16207; }
.hst-call-stats-kpi-card__icon--violet { background: #7c3aed; }
.hst-call-stats-kpi-card__icon--blue { background: #2962ff; }

.hst-call-stats-kpi-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.hst-call-stats-kpi-card__label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.05rem;
    font-size: 0.8125rem;
    color: var(--hst-muted, #b3b3b3);
    font-weight: 500;
}

.hst-call-stats-kpi-card__label .custom-kb-tooltip-wrapper .ri-question-line {
    font-size: 0.9rem;
}

.hst-call-stats-kpi-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.05rem;
}

.hst-call-stats-kpi-meta-sep {
    white-space: pre;
}

.hst-call-stats-kpi-card__value {
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--hst-ink, #f6f7fb);
    line-height: 1.25;
    word-break: break-word;
}

[data-theme-mode="light"] .hst-call-stats-kpi-card__value {
    color: #111827;
}

.hst-call-stats-tabs .nav-link {
    color: var(--hst-muted, #b3b3b3);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.65rem 0.9rem;
}

.hst-call-stats-tabs .nav-link:hover,
.hst-call-stats-tabs .nav-link:focus-visible {
    color: var(--hst-ink, #f6f7fb);
}

.hst-call-stats-tabs .nav-link.active {
    color: #14b8a6;
    background: transparent;
    border-bottom-color: #14b8a6;
}

.hst-call-stats-chart {
    min-height: 280px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.hst-call-stats-chart--pie {
    min-height: 300px;
}

/* ApexCharts default legend uses overflow:auto and often paints a useless bottom scrollbar */
.hst-call-stats-page .apexcharts-canvas,
.hst-call-stats-suite .apexcharts-canvas {
    max-width: 100% !important;
}

.hst-call-stats-page .apexcharts-legend,
.hst-call-stats-suite .apexcharts-legend {
    overflow: visible;
    flex-wrap: wrap;
    max-width: 100%;
}

.hst-call-stats-page .apexcharts-svg,
.hst-call-stats-suite .apexcharts-svg {
    max-width: 100%;
}

.hst-call-stats-page .hst-call-stats-trunk-link,
.hst-call-stats-suite .hst-call-stats-trunk-link {
    color: #14b8a6;
    text-decoration: none;
    font-weight: 600;
}

.hst-call-stats-page .hst-call-stats-trunk-link:hover,
.hst-call-stats-page .hst-call-stats-trunk-link:focus-visible,
.hst-call-stats-suite .hst-call-stats-trunk-link:hover,
.hst-call-stats-suite .hst-call-stats-trunk-link:focus-visible {
    color: #2dd4bf;
    text-decoration: underline;
}

.hst-call-stats-rank-select {
    min-width: 11rem;
    max-width: 16rem;
}

.hst-call-stats-rank-col {
    width: 3rem;
}

.hst-call-stats-rank {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--hst-muted, #b3b3b3);
}

.hst-call-stats-rank--top,
.hst-call-stats-rank-badge {
    color: #f6f7fb;
}

.hst-call-stats-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d9488, #14b8a6);
    font-size: 0.75rem;
    font-weight: 700;
}

.hst-call-stats-staff-row--top {
    background: rgba(20, 184, 166, 0.08);
}

.hst-call-stats-best-staff {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(20, 184, 166, 0.35);
    background: rgba(13, 148, 136, 0.12);
}

.hst-call-stats-best-staff__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    background: #0d9488;
    color: #f6f7fb;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.hst-call-stats-best-staff__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hst-muted, #b3b3b3);
}

.hst-call-stats-best-staff__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hst-ink, #f6f7fb);
    line-height: 1.3;
}

.hst-call-stats-best-staff__why {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--hst-muted, #b3b3b3);
}

[data-theme-mode="light"] .hst-call-stats-staff-row--top {
    background: rgba(13, 148, 136, 0.08);
}

[data-theme-mode="light"] .hst-call-stats-best-staff {
    background: rgba(13, 148, 136, 0.08);
    color: #0f172a;
}

[data-theme-mode="light"] .hst-call-stats-best-staff__name {
    color: #0f172a;
}

[data-theme-mode="light"] .hst-call-stats-rank-badge {
    color: #ffffff;
}

@media (max-width: 575.98px) {
    .hst-call-stats-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hst-call-stats-filters__summary {
        max-width: 11rem;
    }

    .hst-call-stats-filters__apply,
    .hst-call-stats-filters__reset {
        flex: 1 1 auto;
    }

    .hst-call-stats-best-staff {
        flex-direction: column;
    }
}

/* ==========================================================================
   SMS Center + Hybrid — SIP SIMPLE Message History
   ========================================================================== */

.sms-simple-page-container {
    --sms-simple-surface: #161616;
    --sms-simple-raised: #1a1a1a;
    --sms-simple-ink: #f6f7fb;
    --sms-simple-muted: #b3b3b3;
    --sms-simple-border: rgba(255, 255, 255, 0.09);
    --sms-simple-accent: #60a5fa;
}

[data-theme-mode="light"] .sms-simple-page-container {
    --sms-simple-surface: #ffffff;
    --sms-simple-raised: #f6f7fb;
    --sms-simple-ink: #172033;
    --sms-simple-muted: #667085;
    --sms-simple-border: rgba(15, 23, 42, 0.12);
}

.sms-simple-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--sms-simple-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sms-simple-hero-title {
    color: var(--sms-simple-ink);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.sms-simple-muted {
    color: var(--sms-simple-muted);
}

.sms-simple-pill,
.sms-simple-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--sms-simple-border);
    background: var(--sms-simple-raised);
    color: var(--sms-simple-ink);
    font-size: 0.8rem;
}

.sms-simple-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sms-simple-panel {
    background: var(--sms-simple-surface);
    border: 1px solid var(--sms-simple-border);
    border-radius: 0.85rem;
    overflow: hidden;
}

.sms-simple-panel--flush .sms-simple-panel-body {
    padding: 0;
}

.sms-simple-panel-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--sms-simple-border);
}

.sms-simple-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--sms-simple-ink);
    font-size: 1rem;
    font-weight: 700;
}

.sms-simple-panel-body {
    padding: 1rem 1.15rem;
}

.sms-simple-notice {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--sms-simple-border);
    background: var(--sms-simple-raised);
}

.sms-simple-notice--info {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(96, 165, 250, 0.08);
}

.sms-simple-notice--warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
}

.sms-simple-notice__icon {
    flex: 0 0 auto;
    color: var(--sms-simple-accent);
    font-size: 1.15rem;
}

.sms-simple-notice--warning .sms-simple-notice__icon {
    color: #f59e0b;
}

.sms-simple-notice__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sms-simple-notice__eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sms-simple-muted);
}

.sms-simple-notice__message {
    color: var(--sms-simple-ink);
    font-size: 0.875rem;
}

.sms-simple-stats-grid,
.hst-simple-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.sms-simple-stat,
.hst-simple-stat {
    padding: 0.85rem;
    border: 1px solid var(--sms-simple-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.75rem;
    background: var(--sms-simple-raised, #1a1a1a);
}

.hst-page-container .hst-simple-stat {
    border-color: var(--hst-border, rgba(255, 255, 255, 0.09));
    background: var(--hst-surface-raised, #1a1a1a);
}

.sms-simple-stat-label,
.hst-simple-stat-label {
    margin: 0;
    color: var(--sms-simple-muted, #b3b3b3);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hst-page-container .hst-simple-stat-label {
    color: var(--hst-muted, #b3b3b3);
}

.sms-simple-stat-value,
.hst-simple-stat-value {
    margin: 0.25rem 0 0;
    color: var(--sms-simple-ink, #f6f7fb);
    font-size: 1.25rem;
    font-weight: 800;
}

.hst-page-container .hst-simple-stat-value {
    color: var(--hst-ink, #f6f7fb);
}

.sms-simple-table-wrap {
    overflow-x: auto;
}

.sms-simple-table,
.hst-simple-table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
}

.sms-simple-table th,
.sms-simple-table td,
.hst-simple-table th,
.hst-simple-table td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--sms-simple-border, rgba(255, 255, 255, 0.09));
    vertical-align: top;
    font-size: 0.875rem;
}

.sms-simple-table th,
.hst-simple-table th {
    color: var(--sms-simple-muted, #b3b3b3);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--sms-simple-raised, #1a1a1a);
}

.hst-page-container .hst-simple-table th {
    color: var(--hst-muted, #b3b3b3);
    background: var(--hst-surface-raised, #1a1a1a);
    border-bottom-color: var(--hst-border, rgba(255, 255, 255, 0.09));
}

.hst-page-container .hst-simple-table td {
    border-bottom-color: var(--hst-border, rgba(255, 255, 255, 0.09));
    color: var(--hst-ink, #f6f7fb);
}

.sms-simple-aor {
    font-size: 0.8rem;
    word-break: break-all;
}

.sms-simple-body-cell {
    max-width: 18rem;
}

.sms-simple-badge,
.hst-simple-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: lowercase;
    border: 1px solid transparent;
}

.sms-simple-badge--ok,
.hst-simple-badge--ok {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
}

.sms-simple-badge--pending,
.hst-simple-badge--pending {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.28);
}

.sms-simple-badge--fail,
.hst-simple-badge--fail {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
}

.sms-simple-badge--neutral,
.sms-simple-badge--dir,
.hst-simple-badge--neutral {
    color: var(--sms-simple-ink, #f6f7fb);
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.28);
}

.sms-simple-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--sms-simple-border);
}

.sms-simple-empty,
.sms-simple-empty--compact {
    text-align: center;
    padding: 2rem 1rem;
}

.sms-simple-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.85rem;
    background: rgba(96, 165, 250, 0.12);
    color: var(--sms-simple-accent);
    font-size: 1.35rem;
}

.sms-simple-empty-title {
    margin: 0 0 0.35rem;
    color: var(--sms-simple-ink);
    font-size: 1.05rem;
    font-weight: 750;
}

.sms-simple-empty-message {
    color: var(--sms-simple-muted);
    font-size: 0.875rem;
}

.sms-simple-skeleton {
    display: grid;
    gap: 0.65rem;
}

.sms-simple-skeleton-row {
    height: 2.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
    background-size: 200% 100%;
    animation: sms-simple-shimmer 1.2s ease-in-out infinite;
}

@keyframes sms-simple-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (max-width: 767.98px) {
    .sms-simple-toolbar,
    .sms-simple-footer {
        justify-content: stretch;
    }

    .sms-simple-toolbar .btn,
    .sms-simple-footer .btn-group {
        width: 100%;
    }
}

/* SIP SIMPLE Messages — collapsible filters (collapsed by default) */
.hst-simple-filters,
.sms-simple-filters {
    margin: 0;
}

.hst-simple-filters__bar,
.sms-simple-filters__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
}

.sms-simple-panel-header.sms-simple-filters__bar {
    border-bottom: none;
}

.sms-simple-filters.is-expanded .sms-simple-panel-header.sms-simple-filters__bar {
    border-bottom: 1px solid var(--sms-simple-border);
}

.hst-simple-filters__toggle,
.sms-simple-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.35rem 0.65rem 0.35rem 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.65rem;
    background: var(--hst-surface-raised, var(--sms-simple-raised, #1a1a1a));
    color: var(--hst-ink, var(--sms-simple-ink, #f6f7fb));
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.hst-simple-filters__toggle {
    border-color: rgba(20, 184, 166, 0.35);
}

.sms-simple-filters__toggle {
    border-color: rgba(96, 165, 250, 0.35);
}

.hst-simple-filters__toggle:hover,
.hst-simple-filters__toggle:focus-visible {
    border-color: rgba(20, 184, 166, 0.6);
    background: rgba(20, 184, 166, 0.08);
    outline: none;
}

.sms-simple-filters__toggle:hover,
.sms-simple-filters__toggle:focus-visible {
    border-color: rgba(96, 165, 250, 0.6);
    background: rgba(96, 165, 250, 0.08);
    outline: none;
}

.hst-simple-filters__toggle-icon,
.sms-simple-filters__toggle-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.05rem;
}

.hst-simple-filters__toggle-icon {
    background: #0d9488;
}

.sms-simple-filters__toggle-icon {
    background: #3b82f6;
}

.hst-simple-filters__toggle-copy,
.sms-simple-filters__toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.hst-simple-filters__toggle-label,
.sms-simple-filters__toggle-label {
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;
}

.hst-simple-filters__summary,
.sms-simple-filters__summary {
    font-size: 0.75rem;
    color: var(--hst-muted, var(--sms-simple-muted, #b3b3b3));
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}

.hst-simple-filters__chevron,
.sms-simple-filters__chevron {
    color: var(--hst-muted, var(--sms-simple-muted, #b3b3b3));
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 160ms ease;
}

.hst-simple-filters.is-expanded .hst-simple-filters__chevron,
.sms-simple-filters.is-expanded .sms-simple-filters__chevron {
    transform: rotate(180deg);
}

.hst-simple-filters__body,
.sms-simple-filters__body {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--hst-border, var(--sms-simple-border, rgba(255, 255, 255, 0.09)));
}

.sms-simple-filters__body.sms-simple-panel-body {
    margin-top: 0;
    border-top: none;
}

.sms-simple-filters__hint {
    flex: 1 1 12rem;
    min-width: 0;
}

.hst-simple-trunk-picker {
    max-width: 28rem;
}

[data-theme-mode="light"] .hst-simple-filters__toggle,
[data-theme-mode="light"] .sms-simple-filters__toggle {
    background: #ffffff;
    color: #172033;
}

/* ==========================================================================
   Grandstream Provisioning (Hybrid SIP Trunks) — teal accent #14b8a6
   Prefix: grandstream-provisioning-* / gsp-*
   ========================================================================== */

.grandstream-provisioning-page {
    --gsp-accent: #14b8a6;
    --gsp-accent-deep: #0d9488;
    --gsp-surface: #161616;
    --gsp-surface-raised: #1c1c1c;
    --gsp-surface-nested: #222222;
    --gsp-ink: #f6f7fb;
    --gsp-muted: #b3b3b3;
    --gsp-border: rgba(255, 255, 255, 0.12);
}

.grandstream-provisioning-tabs .nav-link {
    color: var(--gsp-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.65rem 0.9rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.grandstream-provisioning-tabs .nav-link:hover,
.grandstream-provisioning-tabs .nav-link:focus {
    color: var(--gsp-ink);
    border-color: transparent;
}

.grandstream-provisioning-tabs .nav-link.active {
    color: var(--gsp-accent);
    background: transparent;
    border-bottom-color: var(--gsp-accent);
}

.grandstream-provisioning-tab-content .tab-pane.fade {
    transition: none;
}

.gsp-disclaimer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gsp-border);
    max-width: 48rem;
    line-height: 1.5;
    color: var(--gsp-muted);
}

.gsp-disclaimer__label {
    color: var(--gsp-ink);
    font-weight: 600;
}

.grandstream-provisioning-page .gsp-tab-panel.hst-panel {
    background: var(--gsp-surface);
    border: 1px solid var(--gsp-border);
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
}

.gsp-gate-card {
    background: var(--gsp-surface);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
    padding: 1.25rem 1.35rem;
}

.gsp-gate-card--pending {
    border-color: rgba(20, 184, 166, 0.35);
}

.gsp-opt-in-bullets {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--gsp-muted);
}

.gsp-opt-in-bullets li + li {
    margin-top: 0.35rem;
}

.gsp-pending-spinner {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid rgba(20, 184, 166, 0.25);
    border-top-color: var(--gsp-accent);
    animation: gsp-spin 0.8s linear infinite;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

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

@media (prefers-reduced-motion: reduce) {
    .gsp-pending-spinner {
        animation: none;
        border-top-color: var(--gsp-accent);
    }
}

.gsp-empty-state {
    text-align: center;
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
    padding: 2rem 1.25rem;
}

.gsp-empty-state__icon {
    font-size: 1.75rem;
    color: var(--gsp-accent);
    margin-bottom: 0.65rem;
}

.gsp-empty-state__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gsp-ink);
    margin-bottom: 0.4rem;
}

.gsp-empty-state__copy {
    color: var(--gsp-muted);
    max-width: 36rem;
    margin: 0 auto 1rem;
}

.gsp-panel-loading {
    min-height: 6rem;
    padding: 1rem 1.1rem;
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
}

.gsp-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.gsp-skeleton-row {
    height: 2.5rem;
    border-radius: 6px;
    /* Slate fill must stay visible on dark surfaces (was ~0.25 + low opacity = invisible). */
    background: rgba(148, 163, 184, 0.42);
    animation: gsp-skeleton-pulse 1.4s ease-in-out infinite;
}

.gsp-skeleton-row--medium {
    width: 72%;
}

.gsp-skeleton-row--short {
    width: 48%;
}

.gsp-inline-loading {
    min-height: 6rem;
}

@keyframes gsp-skeleton-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .gsp-skeleton-row {
        animation: none;
        opacity: 0.85;
    }
}

.gsp-table-card {
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
}

.grandstream-provisioning-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--gsp-ink);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
    border-color: var(--gsp-border);
    margin-bottom: 0;
}

.grandstream-provisioning-table thead th {
    color: var(--gsp-muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom-color: var(--gsp-border);
    background: var(--gsp-surface-nested);
}

.gsp-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gsp-ink);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.3;
}

.gsp-howto-steps {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.gsp-howto-step {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.gsp-howto-step__num {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.15);
    color: var(--gsp-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.gsp-howto-tips {
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
    padding: 1rem 1.15rem;
}

.gsp-howto-tips code {
    color: var(--gsp-ink);
    font-size: 0.8rem;
}

.gsp-setup-slot {
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}

.gsp-form-control,
.grandstream-provisioning-page .form-select,
.grandstream-provisioning-page .form-control {
    background: var(--gsp-surface-nested);
    border-color: var(--gsp-border);
    color: var(--gsp-ink);
}

.gsp-form-control:focus,
.grandstream-provisioning-page .form-select:focus,
.grandstream-provisioning-page .form-control:focus {
    background: var(--gsp-surface-nested);
    border-color: var(--gsp-accent);
    color: var(--gsp-ink);
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.2);
}

.gsp-json-pre {
    background: var(--gsp-surface-nested);
    border: 1px solid var(--gsp-border);
    border-radius: 6px;
    padding: 0.75rem;
    max-height: 22rem;
    overflow: auto;
    color: var(--gsp-ink);
    font-size: 0.8rem;
}

.gsp-empty-state--compact {
    padding: 1rem 1.1rem;
    text-align: left;
}

.gsp-account-status .grandstream-provisioning-table {
    margin-bottom: 0;
}

.gsp-device-detail__notice {
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--gsp-border, rgba(255, 255, 255, 0.12));
    background: var(--gsp-surface-raised, #1c1c1c);
}

.gsp-device-detail__grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gsp-device-detail__panel {
    background: var(--gsp-surface-raised, #1c1c1c);
    border: 1px solid var(--gsp-border, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    padding: 1rem 1.1rem;
    min-height: 100%;
}

.gsp-device-detail__heading {
    margin: 0 0 0.85rem;
    color: var(--gsp-muted, #b3b3b3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gsp-device-detail__list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
}

.gsp-device-detail__row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: baseline;
}

.gsp-device-detail__label {
    margin: 0;
    color: var(--gsp-muted, #b3b3b3);
    font-size: 0.8125rem;
    font-weight: 500;
}

.gsp-device-detail__value {
    margin: 0;
    color: var(--gsp-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 500;
    word-break: break-word;
}

.gsp-device-detail__mono {
    display: inline;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gsp-ink, #f6f7fb);
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.8125rem;
}

.gsp-device-detail__empty {
    margin: 0;
}

.gsp-device-detail__sip-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.gsp-device-detail__sip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: var(--gsp-surface-nested, #222222);
    border: 1px solid var(--gsp-border, rgba(255, 255, 255, 0.12));
}

.gsp-device-detail__sip-row .gsp-status-badge {
    margin-left: auto;
}

.gsp-device-detail__sip-line {
    min-width: 3.5rem;
    color: var(--gsp-muted, #b3b3b3);
    font-size: 0.8125rem;
    font-weight: 600;
}

.gsp-status-badge--ok {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
}

.gsp-status-badge--down {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
}

@media (max-width: 767.98px) {
    .gsp-device-detail__grid {
        grid-template-columns: 1fr;
    }

    .gsp-device-detail__row {
        grid-template-columns: 4.75rem minmax(0, 1fr);
    }
}

.gsp-panel-card {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
}

.gsp-alerts-list__item {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gsp-alerts-list__item:last-child {
    border-bottom: 0;
}

.gsp-alerts-list__summary {
    font-weight: 600;
}

[data-theme-mode="light"] .gsp-panel-card {
    background: #f8f9fb;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .gsp-alerts-list__item {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.gsp-modern-modal {
    --gsp-accent: #14b8a6;
    --gsp-accent-deep: #0d9488;
    --gsp-surface: #161616;
    --gsp-surface-raised: #1c1c1c;
    --gsp-surface-nested: #222222;
    --gsp-ink: #f6f7fb;
    --gsp-muted: #b3b3b3;
    --gsp-border: rgba(255, 255, 255, 0.12);
    background: var(--gsp-surface);
    border: 1px solid var(--gsp-border);
    color: var(--gsp-ink);
}

.gsp-phone-key-help-link {
    color: var(--gsp-accent, #14b8a6);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    font-weight: 600;
}

.gsp-phone-key-help-link:hover,
.gsp-phone-key-help-link:focus-visible {
    color: #2dd4bf;
}

.gsp-modern-modal .modal-header {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.35), rgba(20, 184, 166, 0.18));
    border-bottom: 1px solid var(--gsp-border);
}

.gsp-modern-modal .modal-title {
    color: var(--gsp-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.gsp-modern-modal .modal-title i {
    color: var(--gsp-accent);
}

.gsp-modern-modal.gsp-modern-modal--danger .modal-header {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.28), rgba(127, 29, 29, 0.18));
}

.gsp-modern-modal .modal-footer {
    background: var(--gsp-surface);
    border-top: 1px solid var(--gsp-border);
    gap: 0.5rem;
}

.gsp-modern-modal .modal-body {
    background: var(--gsp-surface);
}

.gsp-modern-modal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.7;
}

.gsp-modern-modal .form-label {
    color: var(--gsp-ink);
    font-size: 0.875rem;
}

.gsp-modern-modal .form-control,
.gsp-modern-modal .form-select {
    background: var(--gsp-surface-nested);
    border-color: var(--gsp-border);
    color: var(--gsp-ink);
}

.gsp-modern-modal .form-control:focus,
.gsp-modern-modal .form-select:focus {
    border-color: var(--gsp-accent);
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.2);
}

/* Device settings modal — compact tabbed layout */
.gsp-device-settings-body {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.gsp-device-settings-tabs {
    border-bottom: 1px solid var(--gsp-border, rgba(255, 255, 255, 0.12));
    gap: 0.15rem;
    margin-bottom: 0.85rem;
}

.gsp-device-settings-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--gsp-muted, #b3b3b3);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    background: transparent;
}

.gsp-device-settings-tabs .nav-link i {
    font-size: 1rem;
    line-height: 1;
}

.gsp-device-settings-tabs .nav-link:hover,
.gsp-device-settings-tabs .nav-link:focus-visible {
    color: var(--gsp-ink, #f6f7fb);
    border-bottom-color: rgba(20, 184, 166, 0.45);
    background: transparent;
}

.gsp-device-settings-tabs .nav-link.active {
    color: var(--gsp-accent, #14b8a6);
    border-bottom-color: var(--gsp-accent, #14b8a6);
    background: transparent;
    font-weight: 600;
}

.gsp-device-settings-tab-content {
    min-height: 11.5rem;
}

.gsp-device-settings-section + .gsp-device-settings-section {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--gsp-border, rgba(255, 255, 255, 0.09));
}

.gsp-device-settings-section__title {
    color: var(--gsp-ink, #f6f7fb);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.45rem;
    text-transform: uppercase;
}

.gsp-device-settings-tab-content .choices {
    width: 100%;
}

[data-theme-mode="light"] .gsp-device-settings-tabs .nav-link:hover,
[data-theme-mode="light"] .gsp-device-settings-tabs .nav-link:focus-visible {
    color: var(--gsp-ink, #172033);
}

[data-theme-mode="light"] .gsp-device-settings-tabs .nav-link.active {
    color: var(--gsp-accent-deep, #0d9488);
    border-bottom-color: var(--gsp-accent-deep, #0d9488);
}

[data-theme-mode="light"] .grandstream-provisioning-page {
    --gsp-surface: #ffffff;
    --gsp-surface-raised: #f4f5f7;
    --gsp-surface-nested: #eef0f4;
    --gsp-ink: #172033;
    --gsp-muted: #5b6475;
    --gsp-border: rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .gsp-skeleton-row {
    background: rgba(100, 116, 139, 0.22);
}

[data-theme-mode="light"] .grandstream-provisioning-table {
    --bs-table-hover-bg: rgba(15, 23, 42, 0.04);
}

[data-theme-mode="light"] .gsp-modern-modal {
    --gsp-surface: #ffffff;
    --gsp-surface-raised: #f4f5f7;
    --gsp-surface-nested: #eef0f4;
    --gsp-ink: #172033;
    --gsp-muted: #5b6475;
    --gsp-border: rgba(15, 23, 42, 0.12);
    background: var(--gsp-surface);
    color: var(--gsp-ink);
}

[data-theme-mode="light"] .gsp-device-detail__mono {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #172033;
}

[data-theme-mode="light"] .gsp-status-badge {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .gsp-status-badge--ok {
    color: #15803d;
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.28);
}

[data-theme-mode="light"] .gsp-status-badge--down {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.28);
}

[data-theme-mode="light"] .gsp-modern-modal .btn-close {
    filter: none;
}

[data-theme-mode="light"] .gsp-modern-modal .form-control,
[data-theme-mode="light"] .gsp-modern-modal .form-select,
[data-theme-mode="light"] .gsp-form-control,
[data-theme-mode="light"] .grandstream-provisioning-page .form-select,
[data-theme-mode="light"] .grandstream-provisioning-page .form-control,
[data-theme-mode="light"] .gsp-json-pre {
    background: #f8fafc;
    color: #172033;
}

/* GRP phone lookalike — upper faceplate only (chassis + LCD + side/MPK keys + softkeys).
   Face/screen modifiers (.gsp-phone--face-* / --screen-*) adapt per model profile.
   All internal sizes are em-based so the whole phone scales with one font-size. */
.gsp-phone {
    --gsp-phone-shell: #1b1c1e;
    --gsp-phone-shell-edge: #3c3f43;
    --gsp-phone-ink: #f6f7fb;
    --gsp-phone-muted: #c9ced3;
    --gsp-phone-key: #6d7276;
    --gsp-phone-key-low: #4b5054;
    --gsp-phone-select: #3b86d8;
    --gsp-phone-led: #33d16a;
    --gsp-phone-led-off: rgba(140, 152, 158, 0.35);
}

.gsp-phone__device {
    font-size: clamp(9px, 2.1vw, 12px);
    max-width: 100%;
}

.gsp-phone__chassis {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #26282b, var(--gsp-phone-shell) 45%, #131416);
    border: 1px solid var(--gsp-phone-shell-edge);
    border-radius: 1.6em;
    padding: 1.5em 1.4em 1.6em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1.4em 2.6em rgba(0, 0, 0, 0.5);
}

/* Diagonal gloss reflection across the faceplate, like the product shot */
.gsp-phone__chassis::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(107deg, rgba(255, 255, 255, 0.075) 0 38%, rgba(255, 255, 255, 0) 38.6%);
}

.gsp-phone__panel {
    position: relative;
}

/* Message-waiting LED in the top-right corner */
.gsp-phone__mwi {
    position: absolute;
    top: 0;
    right: 0;
    width: 4.4em;
    height: 1.15em;
    border-radius: 999px;
    background: linear-gradient(180deg, #7bf3a6, var(--gsp-phone-led) 60%, #1ba757);
    box-shadow: 0 0 0.9em rgba(51, 209, 106, 0.65);
}

.gsp-phone__brand {
    text-align: center;
    font-size: 2.5em;
    line-height: 1.1;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: #cfd3d7;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
    padding: 0.55em 0 0.75em;
}

.gsp-phone__face {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46% minmax(0, 1fr);
    align-items: center;
    gap: 1em;
}

.gsp-phone__side {
    display: flex;
    flex-direction: column;
    gap: 4.4em;
    padding-top: 3.2em;
}

.gsp-phone__side--left {
    align-items: flex-start;
}

.gsp-phone__side--right {
    align-items: flex-end;
}

/* Dual-colour line keys — grey pill with a green LED lens toward the screen */
.gsp-phone__key {
    min-height: 44px;
    min-width: 44px;
    width: 100%;
    max-width: 8.6em;
    height: 3.1em;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #7c8185, var(--gsp-phone-key) 55%, var(--gsp-phone-key-low));
    display: inline-flex;
    align-items: center;
    padding: 0 1em;
    cursor: pointer;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0.2em 0.4em rgba(0, 0, 0, 0.45);
}

.gsp-phone__key--left {
    justify-content: flex-end;
}

.gsp-phone__key--right {
    justify-content: flex-start;
}

.gsp-phone__key:hover,
.gsp-phone__key:focus-visible {
    outline: 2px solid rgba(59, 134, 216, 0.9);
    outline-offset: 2px;
}

.gsp-phone__key.is-selected {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 0.22em rgba(59, 134, 216, 0.75);
}

.gsp-phone__led {
    width: 3.4em;
    height: 0.85em;
    border-radius: 999px;
    background: var(--gsp-phone-led-off);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}

.gsp-phone__led.is-lit {
    background: linear-gradient(180deg, #7bf3a6, var(--gsp-phone-led) 60%, #1ba757);
    box-shadow:
        0 0 0.7em rgba(51, 209, 106, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* LCD sits flush in the glossy panel with a thin recessed frame */
.gsp-phone__bezel {
    position: relative;
    border-radius: 0.35em;
    padding: 0.25em;
    background: #0b0c0d;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0.15em 0.5em rgba(0, 0, 0, 0.6);
}

.gsp-phone__screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 320 / 240;
    border-radius: 0.25em;
    color: var(--gsp-phone-ink);
    display: flex;
    flex-direction: column;
    /* Idle wallpaper: dark slate with a faint diagonal swirl */
    background:
        radial-gradient(120% 90% at 15% 100%, rgba(120, 170, 210, 0.1), transparent 55%),
        linear-gradient(155deg, #2b3034, #1c2023 60%, #23282c);
}

.gsp-phone__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6em;
    flex-shrink: 0;
    height: 13%;
    padding: 0 0.7em;
    background: rgba(20, 23, 26, 0.85);
    font-size: 1.28em;
    color: var(--gsp-phone-ink);
}

.gsp-phone__status-left,
.gsp-phone__status-right {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gsp-phone__status-left i {
    color: var(--gsp-phone-led);
    flex-shrink: 0;
}

.gsp-phone__status-right {
    flex-shrink: 0;
    color: var(--gsp-phone-muted);
    font-variant-numeric: tabular-nums;
}

.gsp-phone__grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.5em 0.6em;
    min-height: 0;
    padding: 0.55em 0.5em;
}

/* Each key is a rounded tile on the idle screen, blue when selected */
.gsp-phone__cell {
    min-height: 44px;
    border: 0;
    border-radius: 0.3em;
    background: rgba(56, 62, 67, 0.92);
    color: var(--gsp-phone-ink);
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0 0.7em;
    cursor: pointer;
    overflow: hidden;
}

.gsp-phone__cell--left {
    justify-content: flex-start;
    text-align: left;
}

.gsp-phone__cell--right {
    justify-content: flex-end;
    text-align: right;
    flex-direction: row-reverse;
}

.gsp-phone__cell i {
    color: #4ade80;
    font-size: 1.35em;
    flex-shrink: 0;
}

.gsp-phone__cell.is-empty {
    background: rgba(46, 51, 56, 0.75);
}

.gsp-phone__cell.is-empty i {
    color: rgba(148, 163, 184, 0.4);
}

.gsp-phone__cell-label {
    font-size: 1.28em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.gsp-phone__cell:hover,
.gsp-phone__cell:focus-visible {
    background: rgba(74, 82, 89, 0.95);
    outline: none;
}

.gsp-phone__cell.is-selected {
    background: linear-gradient(180deg, #4b93e2, var(--gsp-phone-select));
    color: #ffffff;
}

.gsp-phone__cell.is-selected i {
    color: #ffffff;
}

.gsp-phone__softlabels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 0.2em;
    flex-shrink: 0;
    height: 15%;
    padding: 0 0.4em;
    background: rgba(20, 23, 26, 0.75);
}

.gsp-phone__softlabel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    text-align: center;
    font-size: 1.2em;
    color: var(--gsp-phone-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On-screen page indicator — clickable, like flipping VPK pages on the handset */
.gsp-phone__softlabel--pages {
    gap: 0.35em;
}

.gsp-phone__page-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    min-height: 1.35em;
    padding: 0 0.2em;
    margin: 0;
    border: 0;
    border-radius: 0.15em;
    background: transparent;
    color: rgba(226, 232, 240, 0.6);
    font: inherit;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
}

.gsp-phone__page-dot:hover,
.gsp-phone__page-dot:focus-visible {
    color: #ffffff;
    outline: none;
    background: rgba(255, 255, 255, 0.12);
}

.gsp-phone__page-dot.is-active {
    color: #16181a;
    font-weight: 700;
    background: #ffffff;
}

/* Context-sensitive softkeys on the faceplate, aligned under the LCD */
.gsp-phone__softkeys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    width: 62%;
    margin: 1.5em auto 0;
}

.gsp-phone__softkey {
    height: 2.6em;
    border-radius: 999px;
    background: linear-gradient(180deg, #7c8185, var(--gsp-phone-key) 55%, var(--gsp-phone-key-low));
    border: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0.15em 0.35em rgba(0, 0, 0, 0.5);
}

.gsp-phone__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.85rem;
}

.gsp-phone__page-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1f1f1f;
    color: var(--gsp-phone-ink);
    font-weight: 600;
    font-size: 0.8rem;
}

.gsp-phone__page-btn.is-active {
    border-color: rgba(29, 111, 212, 0.8);
    background: rgba(29, 111, 212, 0.25);
    color: #dbeafe;
}

.gsp-phone-edit-panel {
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 12px;
    padding: 1rem 1.05rem;
}

@media (max-width: 767.98px) {
    /* Softkeys are decoration only — drop them and stack the line keys under the
       screen so the LCD keeps as much width as possible on phones */
    .gsp-phone__softkeys {
        display: none;
    }

    .gsp-phone__face {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9em;
    }

    .gsp-phone__bezel {
        order: 1;
    }

    .gsp-phone__side {
        flex-direction: row;
        justify-content: center;
        gap: 1em;
        padding-top: 0;
    }

    .gsp-phone__side--left {
        order: 2;
    }

    .gsp-phone__side--right {
        order: 3;
        align-items: stretch;
    }

    .gsp-phone__key {
        flex: 1 1 0;
        max-width: 12em;
        justify-content: center;
    }
}

/* The real GRP phones are black desk devices — keep the chassis dark in both themes
   and only theme the surrounding portal controls. */
[data-theme-mode="light"] .gsp-phone__page-btn {
    background: #ffffff;
    color: #172033;
    border-color: rgba(15, 23, 42, 0.18);
}

[data-theme-mode="light"] .gsp-phone__page-btn.is-active {
    color: #1e3a8a;
}

/* Face-class / screen-profile modifiers (docs §7 A–J) */
.gsp-phone__face-row {
    display: flex;
    align-items: stretch;
    gap: 0.75em;
}

.gsp-phone__face-row .gsp-phone__face {
    flex: 1 1 auto;
    min-width: 0;
}

.gsp-phone__mpk-strip {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    justify-content: center;
    min-width: 2.8em;
    padding-top: 2.2em;
}

.gsp-phone__mpk-key {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    padding: 0.25em;
    border-radius: 0.45em;
    border: 1px solid rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #7c8185, var(--gsp-phone-key) 55%, var(--gsp-phone-key-low));
    color: var(--gsp-phone-ink);
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0.15em 0.3em rgba(0, 0, 0, 0.45);
}

.gsp-phone__mpk-key.is-selected {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 0.2em rgba(59, 134, 216, 0.75);
}

.gsp-phone__mpk-key-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #e8eaed;
}

.gsp-phone__mpk-lcd {
    margin-top: 1em;
    border-radius: 0.35em;
    padding: 0.45em;
    background: #0b0c0d;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0.15em 0.5em rgba(0, 0, 0, 0.55);
}

.gsp-phone__mpk-lcd-label {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gsp-phone-muted);
    text-align: center;
    margin-bottom: 0.35em;
}

.gsp-phone__mpk-grid {
    display: grid;
    gap: 0.35em;
    max-height: 14em;
    overflow: auto;
}

.gsp-phone--screen-mono .gsp-phone__screen {
    aspect-ratio: 132 / 64;
    color: #b7f5c8;
    background:
        radial-gradient(120% 90% at 20% 100%, rgba(70, 160, 90, 0.12), transparent 55%),
        linear-gradient(180deg, #1a2420, #101612 70%, #161c18);
}

.gsp-phone--screen-mono .gsp-phone__status,
.gsp-phone--screen-mono .gsp-phone__softlabels {
    background: rgba(10, 18, 12, 0.9);
    color: #b7f5c8;
}

.gsp-phone--screen-mono .gsp-phone__cell {
    background: rgba(28, 48, 34, 0.92);
    color: #c8f7d4;
}

/* colour_24 matches the default .gsp-phone__screen ratio; kept explicit for profile wiring. */
.gsp-phone--screen-colour_24 .gsp-phone__screen {
    aspect-ratio: 320 / 240;
}

.gsp-phone--screen-colour_28 .gsp-phone__screen {
    aspect-ratio: 320 / 240;
}

.gsp-phone--screen-colour_43 .gsp-phone__screen {
    aspect-ratio: 480 / 272;
}

.gsp-phone--screen-colour_50 .gsp-phone__screen {
    aspect-ratio: 16 / 9;
}

.gsp-phone--screen-touch_70 .gsp-phone__screen {
    aspect-ratio: 1024 / 600;
}

.gsp-phone--face-a .gsp-phone__side,
.gsp-phone--face-b .gsp-phone__side,
.gsp-phone--face-j .gsp-phone__side {
    gap: 2.4em;
    padding-top: 2em;
}

/* Face C — baseline Pro 2.4" / 4-line (GRP2612*) */
.gsp-phone--face-c .gsp-phone__side {
    gap: 4.4em;
    padding-top: 3.2em;
}

.gsp-phone--face-d .gsp-phone__side,
.gsp-phone--face-e .gsp-phone__side {
    gap: 1.5em;
    padding-top: 1.4em;
}

.gsp-phone--face-f .gsp-phone__side,
.gsp-phone--face-g .gsp-phone__side,
.gsp-phone--face-h .gsp-phone__side {
    gap: 0.7em;
    padding-top: 0.8em;
}

.gsp-phone--face-f .gsp-phone__key,
.gsp-phone--face-g .gsp-phone__key,
.gsp-phone--face-h .gsp-phone__key {
    height: 2.4em;
    max-width: 7em;
}

/* Face I — 7" touch (GRP2670); also applied via .gsp-phone--touch from is_touch. */
.gsp-phone--face-i .gsp-phone__side,
.gsp-phone--touch .gsp-phone__side {
    display: none;
}

.gsp-phone--face-i .gsp-phone__face,
.gsp-phone--touch .gsp-phone__face {
    grid-template-columns: minmax(0, 1fr);
}

.gsp-phone--face-i .gsp-phone__softkeys,
.gsp-phone--touch .gsp-phone__softkeys {
    display: none;
}

.gsp-phone--has-mpk .gsp-phone__face-row {
    align-items: center;
}

.gsp-phone--mpk-lcd .gsp-phone__mpk-lcd {
    display: block;
}

@media (max-width: 767.98px) {
    .gsp-phone__face-row {
        flex-direction: column;
    }

    .gsp-phone__mpk-strip {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 0;
        min-width: 0;
    }
}

/* ── Premium Queues wallboard ── */
.queues-wb-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--queues-border);
    border-radius: .9rem;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(132, 204, 22, .12), transparent 55%),
        var(--queues-panel);
}
.queues-wb-hero__sub { max-width: 42rem; }
.queues-wb-hero__meta {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}
.queues-wb-pulse {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 1.85rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--queues-border);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--queues-muted);
    background: rgba(255, 255, 255, .02);
}
.queues-wb-pulse__dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--queues-muted);
}
.queues-wb-pulse[data-state="live"] { color: var(--queues-accent); border-color: rgba(132, 204, 22, .35); }
.queues-wb-pulse[data-state="live"] .queues-wb-pulse__dot {
    background: var(--queues-accent);
    box-shadow: 0 0 0 0 rgba(132, 204, 22, .55);
    animation: queues-wb-pulse 1.6s ease-out infinite;
}
.queues-wb-pulse[data-state="error"] { color: #f87171; border-color: rgba(239, 68, 68, .35); }
.queues-wb-pulse[data-state="error"] .queues-wb-pulse__dot { background: #ef4444; }
@keyframes queues-wb-pulse {
    0% { box-shadow: 0 0 0 0 rgba(132, 204, 22, .45); }
    70% { box-shadow: 0 0 0 .55rem rgba(132, 204, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(132, 204, 22, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .queues-wb-pulse[data-state="live"] .queues-wb-pulse__dot { animation: none; }
}
.queues-wb-banner {
    padding: .65rem .8rem;
    border-radius: .55rem;
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .1);
    color: var(--queues-ink);
    font-size: .88rem;
}
.queues-wb-banner--error {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .1);
}
.queues-wb-metric {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--queues-border);
    border-radius: .9rem;
    background: var(--queues-panel);
}
.queues-wb-metric__icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Solid darker lime + white glyph (DESIGN.md icon-badge rule / ≥3:1) */
    color: #ffffff;
    background: #4d7c0f;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.queues-wb-metric--talking .queues-wb-metric__icon { background: #15803d; color: #ffffff; }
.queues-wb-metric--available .queues-wb-metric__icon { background: #4d7c0f; color: #ffffff; }
.queues-wb-metric--eta .queues-wb-metric__icon { background: #6d28d9; color: #ffffff; }
.queues-wb-metric .queues-metric-value { font-size: 1.7rem; }
.queues-wb-statchip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    min-height: 2.5rem;
    align-items: center;
}
.queues-wb-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 1.85rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--queues-border);
    background: rgba(255, 255, 255, .03);
    font-size: .74rem;
    font-weight: 700;
    color: var(--queues-ink);
}
.queues-wb-chip__count { color: var(--queues-accent); font-weight: 850; }
.queues-wb-chip--on_call { border-color: rgba(34, 197, 94, .35); }
.queues-wb-chip--wrapping_up { border-color: rgba(245, 158, 11, .35); }
.queues-wb-chip--cooling_down { border-color: rgba(249, 115, 22, .4); }
.queues-wb-chip--dnd { border-color: rgba(236, 72, 153, .4); }
.queues-wb-chip--unavailable { border-color: rgba(239, 68, 68, .3); }
.queues-wb-side-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    min-height: 2.5rem;
    padding: .7rem .9rem;
    border: 1px solid var(--queues-border);
    border-radius: .75rem;
    background: var(--queues-panel);
}
.queues-wb-side-stat__value {
    color: var(--queues-ink);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.queues-wb-list,
.queues-wb-agents,
.queues-wb-leaderboard {
    max-height: 28rem;
    overflow: auto;
}
.queues-wb-row,
.queues-wb-agent,
.queues-wb-lb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--queues-border);
}
.queues-wb-row:last-child,
.queues-wb-agent:last-child,
.queues-wb-lb-row:last-child { border-bottom: 0; }
.queues-wb-row__title,
.queues-wb-agent__name,
.queues-wb-lb-name {
    color: var(--queues-ink);
    font-weight: 700;
    font-size: .92rem;
}
.queues-wb-row__stat,
.queues-wb-lb-stat {
    color: var(--queues-accent);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.queues-wb-agent__identity {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}
.queues-wb-presence {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--queues-muted);
    flex-shrink: 0;
}
.queues-wb-presence--available { background: #84cc16; box-shadow: 0 0 0 3px rgba(132, 204, 22, .18); }
.queues-wb-presence--ringing { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.queues-wb-presence--on_call { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.queues-wb-presence--wrapping_up { background: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, .18); }
.queues-wb-presence--cooling_down { background: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, .2); }
.queues-wb-presence--dnd { background: #ec4899; box-shadow: 0 0 0 3px rgba(236, 72, 153, .2); }
.queues-wb-presence--unavailable { background: #ef4444; }
.queues-wb-presence--disabled { background: #6b7280; }
.queues-wb-wrap-countdown {
    color: #a78bfa;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.queues-wb-cooldown-countdown {
    color: #f97316;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.queues-wb-agent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
}
.queues-member-presence-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: .15rem;
}
.queues-member-presence-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: #e5e7eb;
    font-size: .74rem;
    font-weight: 700;
}
.queues-member-presence-badge--wrapping_up {
    border-color: rgba(167, 139, 250, .4);
    color: #c4b5fd;
}
.queues-member-presence-badge--cooling_down {
    border-color: rgba(249, 115, 22, .45);
    color: #fdba74;
}
.queues-member-presence-badge--dnd {
    border-color: rgba(236, 72, 153, .45);
    color: #f9a8d4;
}
.queues-wb-lb-rank {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(132, 204, 22, .14);
    color: var(--queues-accent);
    font-size: .75rem;
    font-weight: 850;
    flex-shrink: 0;
}
.queues-wb-chart { min-height: 300px; }
.queues-wb-skeleton .queues-wb-skel-card,
.queues-wb-skeleton .queues-wb-skel-panel {
    border-radius: .9rem;
    border: 1px solid var(--queues-border);
    background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03));
    background-size: 200% 100%;
    animation: queues-wb-skel 1.2s linear infinite;
}
.queues-wb-skel-card { height: 6.2rem; }
.queues-wb-skel-panel { height: 16rem; }
@keyframes queues-wb-skel {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .queues-wb-skeleton .queues-wb-skel-card,
    .queues-wb-skeleton .queues-wb-skel-panel { animation: none; }
}
.queues-empty-state--compact { padding: 1rem .75rem; border-style: solid; }
.queues-empty-state--compact .queues-empty-state-icon { font-size: 1.5rem; }
.queues-empty-state--compact .queues-empty-state-title { font-size: .92rem; }
.queues-empty-state--compact .queues-empty-state-message { font-size: .84rem; margin-bottom: 0; }
@media (max-width: 575.98px) {
    .queues-wb-hero { padding: .95rem 1rem; }
    .queues-wb-metric .queues-metric-value { font-size: 1.4rem; }
    .queues-wb-list,
    .queues-wb-agents,
    .queues-wb-leaderboard { max-height: 20rem; }
}

/* ── Premium Queues wallboard TV / kiosk ── */
.queues-wb-tv-body {
    background: #101010;
    color: #f6f7fb;
    min-height: 100vh;
}
.queues-wb-tv-main {
    min-height: 100vh;
    outline: none;
}
.queues-wb-tv {
    min-height: 100vh;
    padding: 1.1rem 1.35rem 1.5rem;
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(132, 204, 22, .1), transparent 50%),
        #101010;
}
.queues-wb-tv-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--queues-border);
    border-radius: .9rem;
    background: var(--queues-panel);
}
.queues-wb-tv-bar__brand {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 10rem;
}
.queues-wb-tv-title {
    color: var(--queues-ink);
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -.03em;
}
.queues-wb-tv-bar__controls {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 1 1 16rem;
    min-width: 14rem;
}
.queues-wb-tv-queue {
    max-width: 22rem;
    min-width: 12rem;
    flex: 1 1 auto;
}

/* Queues to monitor — multi-select checkbox dropdown */
.queues-wb-monitor {
    position: relative;
    width: 100%;
}
.queues-wb-monitor__toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 2.25rem;
    background-image: none;
}
.queues-wb-monitor__toggle::after {
    content: '';
    position: absolute;
    right: .85rem;
    top: 50%;
    width: .45rem;
    height: .45rem;
    border-right: 2px solid var(--queues-muted, #b3b3b3);
    border-bottom: 2px solid var(--queues-muted, #b3b3b3);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}
.queues-wb-monitor .dropdown-toggle::after { display: none; }
.queues-wb-monitor__menu {
    --bs-dropdown-min-width: 100%;
    width: min(100%, 22rem);
    max-width: min(100vw - 2rem, 22rem);
    padding: .35rem 0 .45rem;
    border: 1px solid var(--queues-border, rgba(255, 255, 255, .09));
    border-radius: .75rem;
    background: var(--queues-panel, #161616);
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .45);
    z-index: 1080;
}
.queues-wb-monitor__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    padding: .2rem .65rem .35rem;
    border-bottom: 1px solid var(--queues-border, rgba(255, 255, 255, .09));
}
.queues-wb-monitor__quick {
    --bs-btn-color: var(--queues-accent, #84cc16);
    --bs-btn-hover-color: #a3e635;
    padding: .35rem .2rem;
    min-height: 2.5rem;
    text-decoration: none;
    font-weight: 600;
}
.queues-wb-monitor__list {
    max-height: min(50vh, 18rem);
    overflow: auto;
    padding: .35rem .45rem;
    overscroll-behavior: contain;
}
.queues-wb-monitor__option {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 2.75rem;
    margin: 0;
    padding: .45rem .55rem;
    border-radius: .55rem;
    cursor: pointer;
    color: var(--queues-ink, #f6f7fb);
}
.queues-wb-monitor__option:hover,
.queues-wb-monitor__option:focus-within {
    background: rgba(255, 255, 255, .05);
}
.queues-wb-monitor__check {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    border-color: rgba(255, 255, 255, .28);
    background-color: transparent;
}
.queues-wb-monitor__check:checked {
    background-color: var(--queues-accent, #84cc16);
    border-color: var(--queues-accent, #84cc16);
}
.queues-wb-monitor__name {
    font-size: .9rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-theme-mode="light"] .queues-wb-monitor__menu {
    background: #ffffff;
    border-color: rgba(15, 23, 42, .12);
    box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .12);
}
[data-theme-mode="light"] .queues-wb-monitor__option {
    color: #172033;
}
[data-theme-mode="light"] .queues-wb-monitor__option:hover,
[data-theme-mode="light"] .queues-wb-monitor__option:focus-within {
    background: rgba(15, 23, 42, .05);
}
[data-theme-mode="light"] .queues-wb-monitor__check {
    border-color: rgba(15, 23, 42, .28);
}
.queues-wb-tv .queues-wb-monitor__menu {
    width: min(100vw - 2rem, 22rem);
}
.queues-wb-tv-bar__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.queues-wb-tv-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}
.queues-wb-tv-kpi {
    padding: .75rem .85rem;
    border: 1px solid var(--queues-border);
    border-radius: .8rem;
    background: var(--queues-panel);
    min-height: 4.5rem;
}
.queues-wb-tv-kpi .queues-metric-value {
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: -.02em;
    color: var(--queues-ink);
}
.queues-wb-tv .queues-wb-metric .queues-metric-value {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 850;
}
.queues-wb-tv .queues-wb-metric {
    padding: 1.15rem 1.2rem;
}
.queues-wb-tv .queues-wb-list,
.queues-wb-tv .queues-wb-agents {
    max-height: min(52vh, 36rem);
}
.queues-wb-tv .queues-wb-agent__actions { display: none; }
.queues-wb-tv #queues-wb-pane-live.tab-pane {
    display: block !important;
    opacity: 1 !important;
}
/* True browser fullscreen: hide TV chrome for a kiosk-clean board.
   Hover near the top edge (JS adds --fs-reveal) briefly shows the toolbar. */
.queues-wb-tv--fs .queues-wb-tv-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    margin-bottom: 0;
    border-radius: 0 0 .9rem .9rem;
    border-color: rgba(132, 204, 22, .28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
}
.queues-wb-tv--fs.queues-wb-tv--fs-reveal .queues-wb-tv-bar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
@media (max-width: 1199.98px) {
    .queues-wb-tv-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .queues-wb-tv { padding: .85rem; }
    .queues-wb-tv-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .queues-wb-tv-bar__controls { width: 100%; }
    .queues-wb-tv-queue { max-width: none; }
}

/* ── Premium Queues wallboard — All queues multi-card ── */
.queues-wb-all-rollup {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}
.queues-wb-all-rollup__item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-height: 4.25rem;
    padding: .8rem .95rem;
    border: 1px solid var(--queues-border);
    border-radius: .85rem;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(132, 204, 22, .1), transparent 55%),
        var(--queues-panel);
}
.queues-wb-all-rollup__item strong {
    color: var(--queues-ink);
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.queues-wb-all-grid {
    display: grid;
    /* auto-fit collapses unused tracks so few cards expand across the row */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22.5rem), 1fr));
    gap: 1rem;
    width: 100%;
    align-items: stretch;
}
.queues-wb-qcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    width: 100%;
    max-width: none;
    container-type: inline-size;
    container-name: queues-wb-qcard;
    border: 1px solid var(--queues-border);
    border-radius: .95rem;
    background: var(--queues-panel);
    overflow: hidden;
}
.queues-wb-qcard--active {
    border-color: rgba(132, 204, 22, .38);
    box-shadow: inset 0 0 0 1px rgba(132, 204, 22, .12);
}
/* Wait urgency — amber warn / red critical (SLA-based; overrides active green) */
.queues-wb-qcard--warn {
    border-color: rgba(245, 158, 11, .5);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .16);
}
.queues-wb-qcard--warn .queues-wb-qcard__head {
    background: radial-gradient(120% 80% at 0% 0%, rgba(245, 158, 11, .16), transparent 55%);
}
.queues-wb-qcard--warn .queues-wb-qcard__badge {
    border-color: rgba(245, 158, 11, .4);
    background: rgba(245, 158, 11, .14);
    color: #fbbf24;
}
.queues-wb-qcard--critical {
    border-color: rgba(239, 68, 68, .55);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .2);
    animation: queues-wb-urgency-pulse 2.4s ease-in-out infinite;
}
.queues-wb-qcard--critical .queues-wb-qcard__head {
    background: radial-gradient(120% 80% at 0% 0%, rgba(239, 68, 68, .2), transparent 55%);
}
.queues-wb-qcard--critical .queues-wb-qcard__badge {
    border-color: rgba(239, 68, 68, .45);
    background: rgba(239, 68, 68, .16);
    color: #fca5a5;
}
.queues-wb-side-stat--warn {
    border-color: rgba(245, 158, 11, .45);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(245, 158, 11, .12), transparent 55%),
        var(--queues-panel);
}
.queues-wb-side-stat--warn .queues-wb-side-stat__value { color: #fbbf24; }
.queues-wb-side-stat--critical {
    border-color: rgba(239, 68, 68, .5);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(239, 68, 68, .14), transparent 55%),
        var(--queues-panel);
    animation: queues-wb-urgency-pulse 2.4s ease-in-out infinite;
}
.queues-wb-side-stat--critical .queues-wb-side-stat__value { color: #fca5a5; }
.queues-wb-row--warn {
    background: rgba(245, 158, 11, .07);
    box-shadow: inset 3px 0 0 rgba(245, 158, 11, .75);
}
.queues-wb-row--warn .queues-wb-row__stat { color: #fbbf24; font-weight: 750; }
.queues-wb-row--critical {
    background: rgba(239, 68, 68, .09);
    box-shadow: inset 3px 0 0 rgba(239, 68, 68, .85);
    animation: queues-wb-urgency-pulse 2.4s ease-in-out infinite;
}
.queues-wb-row--critical .queues-wb-row__stat { color: #fca5a5; font-weight: 800; }
.queues-wb-metric--warn {
    border-color: rgba(245, 158, 11, .45);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(245, 158, 11, .12), transparent 55%),
        var(--queues-panel);
}
.queues-wb-metric--warn .queues-metric-value { color: #fbbf24; }
.queues-wb-metric--critical {
    border-color: rgba(239, 68, 68, .5);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(239, 68, 68, .14), transparent 55%),
        var(--queues-panel);
    animation: queues-wb-urgency-pulse 2.4s ease-in-out infinite;
}
.queues-wb-metric--critical .queues-metric-value { color: #fca5a5; }
/* TV: slightly stronger borders for large-display readability */
.queues-wb-tv .queues-wb-qcard--warn,
.queues-wb-tv .queues-wb-side-stat--warn,
.queues-wb-tv .queues-wb-metric--warn {
    border-width: 2px;
}
.queues-wb-tv .queues-wb-qcard--critical,
.queues-wb-tv .queues-wb-side-stat--critical,
.queues-wb-tv .queues-wb-metric--critical {
    border-width: 2px;
}
@keyframes queues-wb-urgency-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .82; }
}
@media (prefers-reduced-motion: reduce) {
    .queues-wb-qcard--critical,
    .queues-wb-side-stat--critical,
    .queues-wb-row--critical,
    .queues-wb-metric--critical {
        animation: none;
    }
}
.queues-wb-qcard__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.1rem .85rem;
    border-bottom: 1px solid var(--queues-border);
    background: radial-gradient(120% 80% at 0% 0%, rgba(132, 204, 22, .12), transparent 55%);
}
.queues-wb-qcard__title {
    margin: 0;
    color: var(--queues-ink);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.queues-wb-qcard__badge {
    flex-shrink: 0;
    min-height: 1.7rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(132, 204, 22, .35);
    background: rgba(132, 204, 22, .12);
    color: var(--queues-accent);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.queues-wb-qcard__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    padding: .85rem 1rem .35rem;
}
.queues-wb-qcard__metric {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
    min-height: 3.4rem;
    padding: .55rem .7rem;
    border: 1px solid var(--queues-border);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .02);
}
.queues-wb-qcard__metric strong {
    color: var(--queues-ink);
    font-size: 1.2rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.queues-wb-qcard__side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    padding: .35rem 1rem .55rem;
}
.queues-wb-qcard__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: 0 1rem .7rem;
}
.queues-wb-qcard__chips .queues-wb-chip {
    flex: 1 1 5.5rem;
    justify-content: center;
    min-width: 0;
}
.queues-wb-qcard__lists {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid var(--queues-border);
    margin-top: auto;
}
.queues-wb-qcard__panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--queues-border);
    color: var(--queues-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .02);
}
.queues-wb-qcard__list {
    max-height: 11.5rem;
}
.queues-wb-qcard .queues-wb-row,
.queues-wb-qcard .queues-wb-agent {
    padding: .65rem .9rem;
}
/* Wider cards: stretch metrics / side-by-side lists so content fills the surface */
@container queues-wb-qcard (min-width: 36rem) {
    .queues-wb-qcard__metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .65rem;
        padding: 1rem 1.15rem .45rem;
    }
    .queues-wb-qcard__metric {
        min-height: 3.75rem;
        padding: .65rem .8rem;
    }
    .queues-wb-qcard__metric strong {
        font-size: clamp(1.25rem, 2.4cqi, 1.55rem);
    }
    .queues-wb-qcard__side {
        gap: .65rem;
        padding: .45rem 1.15rem .65rem;
    }
    .queues-wb-qcard__chips {
        padding: 0 1.15rem .85rem;
    }
    .queues-wb-qcard__lists {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .queues-wb-qcard__lists .queues-wb-qcard__panel + .queues-wb-qcard__panel {
        border-left: 1px solid var(--queues-border);
    }
    .queues-wb-qcard__list {
        max-height: 14rem;
    }
    .queues-wb-tv .queues-wb-qcard__list {
        max-height: min(32vh, 18rem);
    }
}
.queues-wb-tv .queues-wb-all-rollup {
    margin-bottom: 1rem;
}
.queues-wb-tv .queues-wb-all-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 1.1rem;
}
.queues-wb-tv .queues-wb-qcard__metric strong {
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}
.queues-wb-tv .queues-wb-qcard__list {
    max-height: min(28vh, 16rem);
}
@media (max-width: 991.98px) {
    .queues-wb-all-rollup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .queues-wb-all-rollup { grid-template-columns: 1fr 1fr; }
    .queues-wb-all-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Hybrid SIP — Queue Wallboard (teal accent over queues-wb) */
.hst-queue-wb-page.hst-page-container {
    --hst-accent: #14b8a6;
    --hst-accent-deep: #0d9488;
}
.hst-queue-wb-hero.queues-wb-hero {
    border-color: rgba(20, 184, 166, 0.22);
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.08), transparent 42%),
        #161616;
}
.hst-queue-wb-page .queues-eyebrow {
    color: #5eead4;
}
.hst-queue-wb-page .queues-wb-pulse[data-state="live"] .queues-wb-pulse__dot {
    background: #14b8a6;
    box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.45);
}
.hst-queue-wb-tabs.queues-nav-tabs .nav-link.active {
    border-bottom-color: #14b8a6;
    color: #5eead4;
}
.hst-queue-wb-page .queues-wb-metric__icon {
    background: rgba(20, 184, 166, 0.16);
    color: #5eead4;
}
.hst-queue-wb-page .queues-wb-qcard--active {
    border-color: rgba(20, 184, 166, 0.35);
}
[data-theme-mode="light"] .hst-queue-wb-hero.queues-wb-hero {
    background:
        linear-gradient(135deg, rgba(13, 148, 136, 0.08), transparent 42%),
        #ffffff;
    border-color: rgba(13, 148, 136, 0.18);
}
[data-theme-mode="light"] .hst-queue-wb-page .queues-eyebrow {
    color: #0f766e;
}

/* --- Hybrid @hybrid single-trunk portal (/sub/hybrid/) -------------------
   Scope ONLY under .hst-page-container.hst-portal-mode so main manage
   detail sidenav width / layout is never affected. */
.hst-page-container.hst-portal-mode #hst-list-view,
.hst-page-container.hst-portal-mode #hst-detail-sidenav,
.hst-page-container.hst-portal-mode #hst-detail-back,
.hst-page-container.hst-portal-mode #hst-manage-create-open,
.hst-page-container.hst-portal-mode #hst-trunk-login-panel,
.hst-page-container.hst-portal-mode .hst-trunk-login-panel,
.hst-page-container.hst-portal-mode #hst-trunk-login-modal,
.hst-page-container.hst-portal-mode [data-hst-open-trunk-login] {
    display: none !important;
}
.hst-page-container.hst-portal-mode #hst-detail-view {
    display: block !important;
}
.hst-page-container.hst-portal-mode.hst-portal-layout .hst-detail-layout,
.hst-page-container.hst-portal-mode .hst-detail-layout {
    grid-template-columns: minmax(0, 1fr);
}
.hst-page-container.hst-portal-mode .hst-detail-sidenav {
    max-width: none;
}
.hst-page-container.hst-portal-mode .hst-detail-nav-row .hst-eyebrow {
    margin-left: 0;
}
.hst-page-container.hst-portal-mode .hst-portal-context .hst-hero-title,
.hst-portal-context .hst-hero-title {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
}

/* --- Hybrid @hybrid single-trunk portal (/sub/hybrid/) Overview viewport dashboard ---
   Side-by-side 2-column grid layout so the entire dashboard fits in viewport without scrolling. */
.hst-page-container.hst-portal-mode {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.hst-page-container.hst-portal-mode #hst-detail-view > .row.g-3.mb-3,
.hst-page-container.hst-portal-mode #hst-detail-view > .row.mb-3 {
    margin-bottom: 0.35rem !important;
}

@media (min-width: 992px) {
    .hst-page-container.hst-portal-mode #hst-section-identity {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }
}

.hst-page-container.hst-portal-mode #hst-overview-ops-host {
    margin-bottom: 0 !important;
}

.hst-page-container.hst-portal-mode .hst-ops-console--embedded {
    padding: 0.75rem 1rem;
}

/* Prevent letter-by-letter vertical wrapping on hero title & AOR */
.hst-page-container.hst-portal-mode .hst-overview-hero {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.hst-page-container.hst-portal-mode .hst-overview-hero__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.hst-page-container.hst-portal-mode .hst-overview-hero__title {
    font-size: 1.2rem;
    line-height: 1.2;
    word-break: normal !important;
    white-space: nowrap !important;
    margin-bottom: 0;
}

.hst-page-container.hst-portal-mode .hst-overview-hero__aor {
    font-size: 0.875rem;
    word-break: normal !important;
    white-space: nowrap !important;
    margin-bottom: 0;
}

.hst-page-container.hst-portal-mode .hst-overview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.hst-page-container.hst-portal-mode .hst-overview-actions__link {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.hst-page-container.hst-portal-mode .hst-overview-grid {
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.hst-page-container.hst-portal-mode .hst-overview-block {
    padding: 0.6rem 0.85rem;
}

.hst-page-container.hst-portal-mode .hst-overview-devices {
    margin-bottom: 0;
}

.hst-page-container.hst-portal-mode .hst-overview-devices__scroll {
    max-height: 125px;
    overflow-y: auto;
}

/* Right Column: Live Calls + Trunk Details */
.hst-page-container.hst-portal-mode .hst-identity-live-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.hst-page-container.hst-portal-mode .hst-identity-live-grid__identity {
    padding: 0.75rem 1rem;
}

.hst-page-container.hst-portal-mode .hst-identity-live-grid__identity .hst-section-title {
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
}

.hst-page-container.hst-portal-mode .hst-identity-live-grid__identity .hst-muted {
    margin-bottom: 0.4rem !important;
    font-size: 0.825rem !important;
}

/* 2-column side-by-side fields inside Trunk Details card to reduce vertical size */
.hst-page-container.hst-portal-mode .hst-trunk-details-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
}

.hst-page-container.hst-portal-mode .hst-trunk-details-fields > .hst-edit-field-wrap {
    width: 100%;
    margin-bottom: 0;
    min-width: 0;
}

.hst-page-container.hst-portal-mode .hst-trunk-details-fields .hst-credential-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

.hst-page-container.hst-portal-mode .hst-trunk-details-fields .hst-form-control {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.825rem;
    padding: 0.25rem 0.4rem;
}

.hst-page-container.hst-portal-mode .hst-trunk-details-fields .btn,
.hst-page-container.hst-portal-mode .hst-trunk-details-fields button {
    padding: 0.25rem 0.45rem;
    font-size: 0.775rem;
}

@media (max-width: 575.98px) {
    .hst-page-container.hst-portal-mode .hst-trunk-details-fields {
        grid-template-columns: 1fr;
    }
}

/* Trunk login modal (main manage Overview action — not an inline Overview card) */
.hst-trunk-login-modal-body {
    min-height: 4rem;
}
.hst-trunk-login-modal__promo {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgba(245, 158, 11, 0.38);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(245, 158, 11, 0.16), transparent 55%),
        linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(234, 179, 8, 0.05)),
        var(--hst-surface-raised, #1a1a1a);
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.55);
}
.hst-trunk-login-modal__promo-glow {
    position: absolute;
    top: -55%;
    right: -18%;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.22) 0%, transparent 68%);
    pointer-events: none;
    animation: hst-trunk-login-promo-pulse 5s ease-in-out infinite;
}
@keyframes hst-trunk-login-promo-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .hst-trunk-login-modal__promo-glow {
        animation: none;
    }
}
.hst-trunk-login-modal__promo-inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
}
.hst-trunk-login-modal__promo-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.9), #facc15);
    color: #101010;
    font-size: 1.15rem;
    border: 1px solid rgba(234, 179, 8, 0.35);
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.25);
}
.hst-trunk-login-modal__promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.hst-trunk-login-modal__promo-title {
    margin: 0 0 0.3rem;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--hst-ink, #f6f7fb);
    letter-spacing: -0.01em;
}
.hst-trunk-login-modal__promo-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--hst-muted, #b3b3b3);
}
[data-theme-mode="light"] .hst-trunk-login-modal__promo {
    border-color: rgba(217, 119, 6, 0.35);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(245, 158, 11, 0.12), transparent 55%),
        linear-gradient(135deg, rgba(254, 243, 199, 0.75), rgba(255, 255, 255, 0.95));
    box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.18);
}
[data-theme-mode="light"] .hst-trunk-login-modal__promo-badge {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(217, 119, 6, 0.28);
    color: #b45309;
}
[data-theme-mode="light"] .hst-trunk-login-modal__promo-title {
    color: #0f172a;
}
[data-theme-mode="light"] .hst-trunk-login-modal__promo-text {
    color: #475569;
}
.hst-trunk-login-modal__empty {
    padding: 0.15rem 0 0;
}
.hst-trunk-login-modal__meta {
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.65rem;
    background: var(--hst-surface, #161616);
}
.hst-trunk-login-modal__copy {
    color: var(--hst-accent, #14b8a6);
    text-decoration: none;
    margin-left: 0.2rem;
}
.hst-trunk-login-modal__copy:hover,
.hst-trunk-login-modal__copy:focus-visible {
    color: #5eead4;
}
.hst-trunk-login-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
}
.hst-trunk-login-modal__action {
    flex: 1 1 auto;
    min-width: min(100%, 9.5rem);
    justify-content: flex-start;
}
.hst-trunk-login-modal__action--edit {
    --hst-action-chip-icon-bg: #0d9488;
    --hst-action-chip-border: rgba(20, 184, 166, 0.42);
}
.hst-trunk-login-modal__action--edit:hover,
.hst-trunk-login-modal__action--edit:focus-visible {
    --hst-action-chip-icon-bg: #14b8a6;
    --hst-action-chip-border: rgba(20, 184, 166, 0.6);
}
.hst-trunk-login-modal__action--disable {
    --hst-action-chip-icon-bg: #b45309;
    --hst-action-chip-border: rgba(245, 158, 11, 0.38);
}
.hst-trunk-login-modal__action--disable:hover,
.hst-trunk-login-modal__action--disable:focus-visible {
    --hst-action-chip-bg: rgba(245, 158, 11, 0.1);
    --hst-action-chip-icon-bg: #d97706;
    --hst-action-chip-border: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.28);
}
.hst-trunk-login-modal__action--reactivate {
    --hst-action-chip-icon-bg: #15803d;
    --hst-action-chip-border: rgba(34, 197, 94, 0.38);
}
.hst-trunk-login-modal__action--reactivate:hover,
.hst-trunk-login-modal__action--reactivate:focus-visible {
    --hst-action-chip-bg: rgba(34, 197, 94, 0.1);
    --hst-action-chip-icon-bg: #16a34a;
    --hst-action-chip-border: rgba(34, 197, 94, 0.55);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.28);
}
.hst-trunk-login-modal__action--reset {
    --hst-action-chip-icon-bg: #6d28d9;
    --hst-action-chip-border: rgba(139, 92, 246, 0.4);
}
.hst-trunk-login-modal__action--reset:hover,
.hst-trunk-login-modal__action--reset:focus-visible {
    --hst-action-chip-bg: rgba(139, 92, 246, 0.1);
    --hst-action-chip-icon-bg: #7c3aed;
    --hst-action-chip-border: rgba(139, 92, 246, 0.58);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.28);
}
[data-theme-mode="light"] .hst-trunk-login-modal__meta {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}
[data-theme-mode="light"] .hst-trunk-login-modal__actions {
    border-top-color: rgba(15, 23, 42, 0.1);
}
[data-theme-mode="light"] .hst-trunk-login-modal__copy {
    color: #0f766e;
}
[data-theme-mode="light"] .hst-trunk-login-modal__copy:hover,
[data-theme-mode="light"] .hst-trunk-login-modal__copy:focus-visible {
    color: #0d9488;
}
@media (max-width: 575.98px) {
    .hst-trunk-login-modal__action {
        min-width: 100%;
    }
}

/* --- Hybrid WebRTC Softphone (hst-softphone-*) ---------------------------
   Portal @hybrid section `softphone` + manage deep-link. Teal Hybrid tokens,
   off-black surfaces, mobile-first (dialer usable at 320px, 44x44 targets).
   Red is reserved for End / Decline / delete only. */

#hst-section-softphone.hst-softphone-expanded {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: var(--bs-body-bg, #121212) !important;
    overflow-y: auto !important;
    padding: 1.25rem 1.5rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

[data-theme-mode="dark"] #hst-section-softphone.hst-softphone-expanded {
    background-color: #121212 !important;
}

.hst-softphone {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.hst-softphone-statusbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--hst-border);
    border-radius: 10px;
    background: var(--hst-surface);
}

.hst-softphone-statusbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}

/* Status-bar Connect / DND / Disconnect — compact chips (in-call controls keep 44px). */
.hst-softphone-statusbar__actions .hst-softphone-ctrl-btn {
    min-height: 30px;
    min-width: 0;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 7px;
    font-size: 0.75rem;
}

.hst-softphone-statusbar__actions .hst-softphone-ctrl-btn i {
    font-size: 0.95rem;
}

.hst-softphone-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--hst-border);
    background: var(--hst-surface-raised);
    color: var(--hst-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.hst-softphone-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6b7280;
    flex: 0 0 auto;
}

.hst-softphone-status-chip[data-hsp-state="registered"] .hst-softphone-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.hst-softphone-status-chip[data-hsp-state="connecting"] .hst-softphone-status-dot,
.hst-softphone-status-chip[data-hsp-state="reconnecting"] .hst-softphone-status-dot {
    background: #f59e0b;
    animation: hst-softphone-pulse 1.1s ease-in-out infinite;
}

.hst-softphone-status-chip[data-hsp-state="registration_failed"] .hst-softphone-status-dot,
.hst-softphone-status-chip[data-hsp-state="mic_denied"] .hst-softphone-status-dot {
    background: #ef4444;
}

@keyframes hst-softphone-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.hst-softphone-aor {
    color: var(--hst-muted);
    font-size: 0.8125rem;
}

.hst-softphone-call-btn,
.hst-softphone-answer-btn,
.hst-softphone-send-btn,
.hst-softphone-newmsg-btn {
    background: var(--hst-accent);
    border: 1px solid var(--hst-accent-deep);
    color: #04211d;
    font-weight: 700;
}

.hst-softphone-call-btn:hover,
.hst-softphone-answer-btn:hover,
.hst-softphone-send-btn:hover,
.hst-softphone-newmsg-btn:hover {
    background: var(--hst-accent-deep);
    border-color: var(--hst-accent-deep);
    color: #f0fdfa;
}

.hst-softphone-call-btn:disabled,
.hst-softphone-send-btn:disabled {
    opacity: 0.55;
}

.hst-softphone-feedback {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(20, 184, 166, 0.35);
    background: rgba(20, 184, 166, 0.1);
    color: var(--hst-ink);
    font-size: 0.875rem;
}

.hst-softphone-feedback--error {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.12);
}

/* Incoming call banner */
.hst-softphone-incoming {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(20, 184, 166, 0.5);
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.16), transparent 60%), var(--hst-surface-raised);
}

.hst-softphone-incoming__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.hst-softphone-incoming__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hst-accent);
}

.hst-softphone-incoming__peer {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-softphone-incoming__actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.hst-softphone-incoming__actions .btn {
    min-height: 44px;
    min-width: 44px;
}

/* Persistent @hybrid portal call strip — attached outside #htmx-content so
   registration and call controls remain available between portal sections.
   Tokens are self-contained: this strip mounts on document.body, outside
   .hst-page-container where --hst-* are normally defined. */
.hst-softphone-global-call {
    --hst-surface: #161616;
    --hst-surface-raised: #1a1a1a;
    --hst-border: rgba(255, 255, 255, 0.09);
    --hst-ink: #f6f7fb;
    --hst-muted: #b3b3b3;
    --hst-accent: #14b8a6;
    --hst-accent-deep: #0d9488;
    position: fixed;
    z-index: 1080;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: min(34rem, calc(100vw - 2rem));
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(20, 184, 166, 0.55);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.16), transparent 62%), var(--hst-surface-raised, #1a1a1a);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
    color: var(--hst-ink);
}

[data-theme-mode="light"] .hst-softphone-global-call {
    --hst-surface: #ffffff;
    --hst-surface-raised: #f8fafc;
    --hst-border: rgba(15, 23, 42, 0.1);
    --hst-ink: #0f172a;
    --hst-muted: #64748b;
}

.hst-softphone-global-call__summary {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 10rem;
}

.hst-softphone-global-call__label {
    color: var(--hst-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hst-softphone-global-call__peer {
    overflow: hidden;
    color: var(--hst-ink);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hst-softphone-global-call__state {
    color: var(--hst-muted);
}

.hst-softphone-global-call__actions {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.hst-softphone-global-call__actions .btn {
    min-height: 44px;
}

.hst-softphone-global-open {
    border: 1px solid var(--hst-border);
    background: var(--hst-surface);
    color: var(--hst-ink);
}

.hst-softphone-global-open:hover,
.hst-softphone-global-open:focus-visible {
    border-color: var(--hst-accent);
    color: var(--hst-ink);
}

@media (min-width: 540px) {
    .hst-softphone-global-call__actions {
        flex: 0 0 auto;
    }
}

/* Layout: BLF rail | dialer | context tabs (Recents / Messages / Settings)
   Mobile stacks: BLFs → keypad → tabs. */
.hst-softphone-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

@media (min-width: 768px) {
    .hst-softphone-layout {
        grid-template-columns: minmax(140px, 200px) minmax(240px, 320px) minmax(0, 1fr);
        align-items: start;
    }
}

@media (min-width: 1100px) {
    .hst-softphone-layout {
        grid-template-columns: minmax(160px, 220px) minmax(260px, 340px) minmax(0, 1fr);
    }
}

.hst-softphone-blf-rail,
.hst-softphone-dialer,
.hst-softphone-context {
    padding: 0.85rem;
    border: 1px solid var(--hst-border);
    border-radius: 10px;
    background: var(--hst-surface);
    min-width: 0;
}

.hst-softphone-blf-rail {
    min-height: 0;
}

.hst-softphone-blf-rail__inner {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hst-softphone-blf-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.hst-softphone-blf-rail__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hst-muted);
}

.hst-softphone-blf-rail__empty {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.15rem;
}

.hst-softphone-blf-rail__empty-title {
    font-weight: 650;
    color: var(--hst-ink);
    margin: 0;
}

.hst-softphone-blf-list--rail {
    gap: 0.35rem;
}

.hst-softphone-blf--rail {
    padding: 0.35rem 0.45rem;
}

.hst-softphone-settings__title {
    font-weight: 700;
    color: var(--hst-ink);
    margin: 0;
}

.hst-softphone-settings__section-title {
    font-weight: 650;
    font-size: 0.9rem;
    color: var(--hst-ink);
    margin: 0 0 0.2rem 0;
}

.hst-softphone-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.55rem 0 0.75rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--hst-border);
}

.hst-softphone-settings-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.35rem 0.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--hst-muted);
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
}

.hst-softphone-settings-tab:hover,
.hst-softphone-settings-tab:focus-visible {
    color: var(--hst-ink);
}

.hst-softphone-settings-tab.is-active {
    color: var(--hst-ink);
    border-bottom-color: var(--hst-accent);
}

.hst-softphone-settings-pane {
    min-width: 0;
}

.hst-softphone-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.65rem;
    margin: 0 0 0.35rem;
}

.hst-softphone-settings-grid--stacked {
    grid-template-columns: 1fr;
}

#hst-softphone-audio-prefs {
    grid-column: 1 / -1;
}

.hst-softphone-settings-prefs {
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--hst-border);
    border-radius: 8px;
    background: var(--hst-surface-raised);
    display: flex;
    flex-direction: column;
}

.hst-softphone-audio-switches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.35rem 0.75rem;
    margin-top: 0.35rem;
    margin-bottom: 0.4rem;
}

.hst-softphone-audio-volumes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.45rem 1rem;
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--hst-border);
}

.hst-softphone-notification-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    min-height: 34px;
    margin-top: 0.35rem;
}

.hst-softphone-notification-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--hst-ink);
    background: rgba(148, 163, 184, 0.16);
}

.hst-softphone-notification-status[data-hsp-notification-state="granted"] {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.35);
}

.hst-softphone-notification-status[data-hsp-notification-state="denied"] {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.35);
}

.hst-softphone-notification-status[data-hsp-notification-state="unsupported"] {
    color: #e5e7eb;
    background: rgba(100, 116, 139, 0.22);
    border-color: rgba(148, 163, 184, 0.28);
}

[data-theme-mode="light"] .hst-softphone-notification-status {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(100, 116, 139, 0.12);
    color: #1f2937;
}

[data-theme-mode="light"] .hst-softphone-notification-status[data-hsp-notification-state="granted"] {
    color: #166534;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(22, 163, 74, 0.35);
}

[data-theme-mode="light"] .hst-softphone-notification-status[data-hsp-notification-state="denied"] {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme-mode="light"] .hst-softphone-notification-status[data-hsp-notification-state="unsupported"] {
    color: #334155;
    background: rgba(100, 116, 139, 0.14);
    border-color: rgba(100, 116, 139, 0.28);
}

.sms-desktop-alerts-prefs .sms-chart-title {
    font-size: 1rem;
}

.sms-desktop-alerts-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.sms-desktop-alerts-status {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(100, 116, 139, 0.18);
    color: #e5e7eb;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sms-desktop-alerts-status[data-sms-notification-state="granted"] {
    color: #86efac;
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.35);
}

.sms-desktop-alerts-status[data-sms-notification-state="denied"] {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.32);
}

.sms-desktop-alerts-status[data-sms-notification-state="unsupported"] {
    color: #cbd5e1;
    background: rgba(100, 116, 139, 0.2);
    border-color: rgba(148, 163, 184, 0.28);
}

.sms-desktop-alerts-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sms-desktop-alerts-btn--positive {
    border-color: rgba(34, 197, 94, 0.45);
    color: #86efac;
}

.sms-desktop-alerts-btn--positive:hover,
.sms-desktop-alerts-btn--positive:focus {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.55);
    color: #bbf7d0;
}

[data-theme-mode="light"] .sms-desktop-alerts-status {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(100, 116, 139, 0.12);
    color: #1f2937;
}

[data-theme-mode="light"] .sms-desktop-alerts-status[data-sms-notification-state="granted"] {
    color: #166534;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(22, 163, 74, 0.35);
}

[data-theme-mode="light"] .sms-desktop-alerts-status[data-sms-notification-state="denied"] {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme-mode="light"] .sms-desktop-alerts-btn--positive {
    color: #166534;
    border-color: rgba(22, 163, 74, 0.35);
}

.hst-softphone-settings-blf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
    padding-top: 0.25rem;
}

.hst-softphone-pref-switch,
.hst-softphone-ringtone-switch {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 2.35rem;
    margin-bottom: 0.25rem;
}

.hst-softphone-pref-switch .form-check-input,
.hst-softphone-ringtone-switch .form-check-input {
    width: 2.2rem;
    height: 1.15rem;
    margin-left: -2.35rem;
    cursor: pointer;
}

.hst-softphone-pref-switch .form-check-label,
.hst-softphone-ringtone-switch .form-check-label {
    cursor: pointer;
    font-size: 0.825rem;
    color: var(--hst-ink);
}

.hst-softphone-volume {
    margin-top: 0.15rem;
}

.hst-softphone-volume .form-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--hst-ink);
    margin-bottom: 0.2rem;
}

.hst-softphone-volume__range {
    width: 100%;
    accent-color: var(--hst-accent, #14b8a6);
    min-height: 32px;
    cursor: pointer;
}

[data-theme-mode="dark"] .hst-softphone-volume__range {
    accent-color: var(--hst-accent, #14b8a6);
}

.hst-softphone-recents-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--hst-border);
}

.hst-softphone-recents-pager__meta {
    font-size: 0.78rem;
    line-height: 1.2;
}

.hst-softphone-recents-pager__actions {
    display: flex;
    gap: 0.3rem;
}

.hst-softphone-recents-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 28px;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--hst-border);
    border-radius: 6px;
    background: transparent;
    color: var(--hst-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hst-softphone-recents-pager__btn i {
    font-size: 1rem;
    line-height: 1;
}

.hst-softphone-recents-pager__btn:hover:not(:disabled),
.hst-softphone-recents-pager__btn:focus-visible:not(:disabled) {
    border-color: rgba(20, 184, 166, 0.55);
    background: rgba(20, 184, 166, 0.1);
    color: var(--hst-ink);
    outline: none;
}

.hst-softphone-recents-pager__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.hst-softphone-number {
    font-size: 1.2rem;
    letter-spacing: 0.03em;
    text-align: center;
    min-height: 48px;
}

.hst-softphone-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.hst-softphone-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 10px;
    border: 1px solid var(--hst-border);
    background: var(--hst-surface-raised);
    color: var(--hst-ink);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.hst-softphone-key:hover,
.hst-softphone-key:focus-visible {
    border-color: rgba(20, 184, 166, 0.55);
    background: rgba(20, 184, 166, 0.1);
}

.hst-softphone-key__digit {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
}

.hst-softphone-key__letters {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    color: var(--hst-muted);
}

.hst-softphone-callrow {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.hst-softphone-callrow .btn {
    min-height: 48px;
    font-size: 1rem;
}

.hst-softphone-callrow .hst-softphone-call-btn {
    flex: 2 1 auto;
}

.hst-softphone-callrow .hst-softphone-backspace-btn,
.hst-softphone-callrow .hst-softphone-clear-btn {
    flex: 0 0 auto;
}

.hst-softphone-callrow .hst-softphone-backspace-btn:disabled,
.hst-softphone-callrow .hst-softphone-clear-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Active call strip */
.hst-softphone-active {
    margin-top: 0.85rem;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(20, 184, 166, 0.4);
    background: var(--hst-surface-raised);
}

.hst-softphone-active__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.hst-softphone-active__peer {
    font-size: 1.05rem;
    font-weight: 700;
}

.hst-softphone-active__timer {
    font-variant-numeric: tabular-nums;
    color: var(--hst-accent);
    font-weight: 700;
}

.hst-softphone-active__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* Softphone control chips — shared radius/padding/icon gap for Mute, Hold,
   Connect, Disconnect, Add BLF, and Remove. Neutral base; semantic variants tint. */
.hst-softphone-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0.55rem 0.95rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--hst-surface);
    color: var(--hst-ink);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    transition:
        background-color 0.12s ease,
        border-color 0.12s ease,
        color 0.12s ease,
        box-shadow 0.12s ease,
        opacity 0.12s ease;
}

.hst-softphone-active__controls .hst-softphone-ctrl-btn {
    flex: 1 1 calc(50% - 0.25rem);
}

.hst-softphone-transfer-panel {
    margin-top: 0.65rem;
    padding: 0.75rem;
    border: 1px solid rgba(20, 184, 166, 0.38);
    border-radius: 10px;
    background: var(--hst-surface);
}

.hst-softphone-transfer-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hst-softphone-transfer-panel__actions .hst-softphone-ctrl-btn {
    flex: 1 1 calc(50% - 0.25rem);
}

[data-theme-mode="light"] .hst-softphone-transfer-panel {
    border-color: rgba(13, 148, 136, 0.35);
    background: #ffffff;
}

.hst-softphone-ctrl-btn i {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}

.hst-softphone-ctrl-btn span {
    letter-spacing: 0.01em;
}

.hst-softphone-ctrl-btn:hover {
    border-color: rgba(20, 184, 166, 0.5);
    background: rgba(20, 184, 166, 0.1);
    color: var(--hst-ink);
}

.hst-softphone-ctrl-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-color: rgba(20, 184, 166, 0.55);
}

.hst-softphone-ctrl-btn:active {
    background: rgba(20, 184, 166, 0.16);
    border-color: rgba(20, 184, 166, 0.6);
}

.hst-softphone-ctrl-btn:disabled,
.hst-softphone-ctrl-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mute / Hold pressed toggles */
.hst-softphone-ctrl-btn--mute[aria-pressed="true"] {
    border-color: rgba(245, 158, 11, 0.7);
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.hst-softphone-ctrl-btn--mute[aria-pressed="true"]:hover {
    border-color: rgba(245, 158, 11, 0.85);
    background: rgba(245, 158, 11, 0.24);
    color: #fcd34d;
}

.hst-softphone-ctrl-btn--hold[aria-pressed="true"] {
    border-color: rgba(20, 184, 166, 0.75);
    background: rgba(20, 184, 166, 0.2);
    color: #5eead4;
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.22);
}

.hst-softphone-ctrl-btn--hold[aria-pressed="true"]:hover {
    border-color: rgba(20, 184, 166, 0.9);
    background: rgba(20, 184, 166, 0.28);
    color: #99f6e4;
}

.hst-softphone-ctrl-btn--dnd[aria-pressed="true"] {
    border-color: rgba(245, 158, 11, 0.72);
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.hst-softphone-ctrl-btn--dnd[aria-pressed="true"]:hover {
    border-color: rgba(245, 158, 11, 0.9);
    background: rgba(245, 158, 11, 0.25);
    color: #fcd34d;
}

/* Connect / Add BLF — teal positive accent chip */
.hst-softphone-ctrl-btn--positive {
    border-color: rgba(20, 184, 166, 0.75);
    background: rgba(20, 184, 166, 0.2);
    color: #5eead4;
    box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.22);
}

.hst-softphone-ctrl-btn--positive:hover {
    border-color: rgba(20, 184, 166, 0.9);
    background: rgba(20, 184, 166, 0.3);
    color: #99f6e4;
}

.hst-softphone-ctrl-btn--positive:focus-visible {
    border-color: rgba(20, 184, 166, 0.85);
}

.hst-softphone-ctrl-btn--positive:active {
    border-color: rgba(20, 184, 166, 0.95);
    background: rgba(20, 184, 166, 0.36);
    color: #ccfbf1;
}

/* Disconnect / Remove — destructive red chip (delete/remove/discard only) */
.hst-softphone-ctrl-btn--danger {
    border-color: rgba(239, 68, 68, 0.7);
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.2);
}

.hst-softphone-ctrl-btn--danger:hover {
    border-color: rgba(239, 68, 68, 0.9);
    background: rgba(239, 68, 68, 0.28);
    color: #fca5a5;
}

.hst-softphone-ctrl-btn--danger:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-color: rgba(239, 68, 68, 0.85);
}

.hst-softphone-ctrl-btn--danger:active {
    border-color: rgba(248, 113, 113, 0.95);
    background: rgba(239, 68, 68, 0.34);
    color: #fecaca;
}

[data-theme-mode="light"] .hst-softphone-ctrl-btn {
    border-color: rgba(15, 23, 42, 0.14);
    background: #ffffff;
    color: var(--hst-ink);
}

[data-theme-mode="light"] .hst-softphone-ctrl-btn:hover,
[data-theme-mode="light"] .hst-softphone-ctrl-btn:active {
    border-color: rgba(13, 148, 136, 0.45);
    background: rgba(20, 184, 166, 0.08);
    color: var(--hst-ink);
}

[data-theme-mode="light"] .hst-softphone-ctrl-btn--mute[aria-pressed="true"],
[data-theme-mode="light"] .hst-softphone-ctrl-btn--mute[aria-pressed="true"]:hover {
    border-color: rgba(180, 83, 9, 0.55);
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.12);
}

[data-theme-mode="light"] .hst-softphone-ctrl-btn--hold[aria-pressed="true"],
[data-theme-mode="light"] .hst-softphone-ctrl-btn--hold[aria-pressed="true"]:hover {
    border-color: rgba(13, 148, 136, 0.55);
    background: rgba(20, 184, 166, 0.14);
    color: #0f766e;
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.12);
}

[data-theme-mode="light"] .hst-softphone-ctrl-btn--dnd[aria-pressed="true"],
[data-theme-mode="light"] .hst-softphone-ctrl-btn--dnd[aria-pressed="true"]:hover {
    border-color: rgba(180, 83, 9, 0.58);
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
    box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.12);
}

[data-theme-mode="light"] .hst-softphone-ctrl-btn--positive,
[data-theme-mode="light"] .hst-softphone-ctrl-btn--positive:hover,
[data-theme-mode="light"] .hst-softphone-ctrl-btn--positive:active {
    border-color: rgba(13, 148, 136, 0.55);
    background: rgba(20, 184, 166, 0.14);
    color: #0f766e;
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.12);
}

[data-theme-mode="light"] .hst-softphone-ctrl-btn--positive:hover,
[data-theme-mode="light"] .hst-softphone-ctrl-btn--positive:active {
    background: rgba(20, 184, 166, 0.2);
    border-color: rgba(13, 148, 136, 0.7);
    color: #115e59;
}

[data-theme-mode="light"] .hst-softphone-ctrl-btn--danger,
[data-theme-mode="light"] .hst-softphone-ctrl-btn--danger:hover,
[data-theme-mode="light"] .hst-softphone-ctrl-btn--danger:active {
    border-color: rgba(185, 28, 28, 0.55);
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.12);
}

[data-theme-mode="light"] .hst-softphone-ctrl-btn--danger:hover,
[data-theme-mode="light"] .hst-softphone-ctrl-btn--danger:active {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(185, 28, 28, 0.7);
    color: #991b1b;
}

/* Context tabs */
.hst-softphone-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--hst-border);
}

.hst-softphone-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--hst-muted);
    font-weight: 600;
    cursor: pointer;
}

.hst-softphone-tab.is-active {
    color: var(--hst-ink);
    border-bottom-color: var(--hst-accent);
}

/* Messages tab when trunk.sms_caller_id is unset — still clickable for empty-state copy. */
.hst-softphone-tab.is-inactive {
    opacity: 0.55;
}

.hst-softphone-tab.is-inactive.is-active {
    opacity: 0.85;
    border-bottom-color: rgba(20, 184, 166, 0.45);
}

.hst-softphone-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--hst-accent);
    color: #04211d;
    font-size: 0.7rem;
    font-weight: 700;
}

.hst-softphone-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

/* Recents */
.hst-softphone-recents {
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.hst-softphone-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-sizing: border-box;
    max-width: 100%;
}

.hst-softphone-recent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--hst-border);
    border-radius: 8px;
    background: var(--hst-surface-raised);
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.hst-softphone-recent__dir {
    color: var(--hst-accent);
    flex: 0 0 auto;
    font-size: 1.1rem;
}

.hst-softphone-recent--missed .hst-softphone-recent__dir {
    color: #ef4444;
}

.hst-softphone-recent__peer {
    font-weight: 600;
    color: var(--hst-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    flex: 1 1 0%;
    min-width: 0;
}

.hst-softphone-recent__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--hst-muted);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    max-width: 100%;
}

.hst-softphone-recent__outcome {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.hst-softphone-recent__when {
    flex: 0 0 auto;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hst-softphone-recent__dial {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--hst-muted);
    flex: 0 0 auto;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    font-size: 1.1rem;
    margin-left: 0.25rem;
}

.hst-softphone-recent__dial:hover {
    background: var(--hst-border);
    color: var(--hst-accent);
}

/* Desktop rows are compact so a full 10-row page plus pager stays above the
   fold beside the much shorter BLF and keypad columns. On short windows the
   list scrolls inside the panel instead of stretching the page — the cap is
   measured in hst-softphone-history.js. Mobile keeps the roomier rows. */
@media (min-width: 768px) {
    .hst-softphone-recent-list {
        gap: 0.25rem;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    .hst-softphone-recent-list::-webkit-scrollbar {
        width: 6px;
    }

    .hst-softphone-recent-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .hst-softphone-recent-list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

    .hst-softphone-recent {
        padding: 0.25rem 0.5rem;
    }

    .hst-softphone-recent__dial {
        width: 30px;
        height: 30px;
    }
}

[data-theme-mode="light"] .hst-softphone-recent-list {
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

[data-theme-mode="light"] .hst-softphone-recent-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
}

/* Contacts (LDAP phone books) */
.hst-softphone-contacts {
    max-width: 100%;
    box-sizing: border-box;
}

.hst-softphone-contacts__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hst-softphone-contacts__book {
    width: auto;
    min-width: 8.5rem;
    max-width: 14rem;
}

.hst-softphone-contacts__search {
    position: relative;
    margin-bottom: 0.55rem;
}

.hst-softphone-contacts__search i {
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    color: var(--hst-muted);
    font-size: 1rem;
    pointer-events: none;
}

.hst-softphone-contacts__search .form-control {
    padding-left: 2rem;
    min-height: 38px;
}

.hst-softphone-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 100%;
    box-sizing: border-box;
}

.hst-softphone-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--hst-border);
    border-radius: 8px;
    background: var(--hst-surface-raised);
    box-sizing: border-box;
    min-width: 0;
}

.hst-softphone-contact__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 9rem;
}

.hst-softphone-contact__name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--hst-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hst-softphone-contact__company {
    font-size: 0.8rem;
    color: var(--hst-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hst-softphone-contact__numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-end;
    min-width: 0;
}

.hst-softphone-contact__number {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--hst-border);
    border-radius: 999px;
    background: transparent;
    color: var(--hst-muted);
    font-size: 0.8rem;
    line-height: 1.1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hst-softphone-contact__number i {
    font-size: 0.95rem;
    color: var(--hst-accent);
}

.hst-softphone-contact__number:hover,
.hst-softphone-contact__number:focus-visible {
    border-color: rgba(20, 184, 166, 0.55);
    background: rgba(20, 184, 166, 0.1);
    color: var(--hst-ink);
    outline: none;
}

.hst-softphone-contact__number-label {
    font-weight: 600;
}

.hst-softphone-contact__number-value {
    color: var(--hst-ink);
}

/* Touch targets stay full size until the roomier mobile layout kicks in. */
@media (max-width: 575.98px) {
    .hst-softphone-contact {
        align-items: stretch;
        flex-direction: column;
    }

    .hst-softphone-contact__numbers {
        justify-content: flex-start;
    }

    .hst-softphone-contact__number {
        min-height: 44px;
        padding: 0.35rem 0.75rem;
    }

    .hst-softphone-contacts__book {
        max-width: 100%;
        flex: 1 1 100%;
    }
}

@media (min-width: 768px) {
    .hst-softphone-contact-list {
        gap: 0.25rem;
    }

    .hst-softphone-contact {
        padding: 0.3rem 0.55rem;
    }
}

/* Empty / blocked states */
.hst-softphone-empty,
.hst-softphone-blocked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
    border: 1px dashed rgba(100, 116, 139, 0.4);
    border-radius: 10px;
    text-align: center;
    color: var(--hst-muted);
}

.hst-softphone-empty i,
.hst-softphone-blocked i {
    font-size: 1.6rem;
    color: var(--hst-accent);
}

.hst-softphone-empty__title {
    font-weight: 700;
    color: var(--hst-ink);
}

.hst-softphone-webrtc-promo {
    padding: 0.25rem 0 0.5rem;
}

.hst-softphone-webrtc-promo .hst-calls-live-promo-empty-hero {
    box-shadow: none;
}

.hst-softphone-webrtc-promo .hst-calls-live-promo-empty-subtitle {
    max-width: 36rem;
}

/* Messages: threads + conversation */
.hst-softphone-messages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 992px) {
    .hst-softphone-messages.is-conversing {
        grid-template-columns: minmax(200px, 280px) 1fr;
        align-items: start;
    }
    .hst-softphone-messages.is-conversing .hst-softphone-back-btn {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .hst-softphone-messages.is-conversing .hst-softphone-threads.is-secondary {
        display: none;
    }
}

.hst-softphone-thread-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hst-softphone-thread {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "peer meta" "preview meta";
    gap: 0.05rem 0.5rem;
    width: 100%;
    min-height: 52px;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--hst-border);
    border-radius: 8px;
    background: var(--hst-surface-raised);
    color: var(--hst-ink);
    text-align: left;
    cursor: pointer;
}

.hst-softphone-thread.is-active {
    border-color: rgba(20, 184, 166, 0.55);
    background: rgba(20, 184, 166, 0.08);
}

.hst-softphone-thread__peer {
    grid-area: peer;
    font-weight: 600;
}

.hst-softphone-thread__preview {
    grid-area: preview;
    font-size: 0.78rem;
    color: var(--hst-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hst-softphone-thread__meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--hst-muted);
}

.hst-softphone-conversation__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.hst-softphone-conversation__peer {
    font-weight: 700;
    font-size: 1rem;
}

.hst-softphone-conversation__head .btn {
    min-width: 44px;
    min-height: 44px;
}

.hst-softphone-conversation__scroll {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 340px;
    overflow-y: auto;
    padding: 0.25rem 0.1rem;
    margin-bottom: 0.6rem;
}

.hst-softphone-bubble {
    position: relative;
    max-width: 85%;
    align-self: flex-start;
    padding: 0.5rem 0.7rem;
    border-radius: 12px 12px 12px 4px;
    border: 1px solid var(--hst-border);
    background: var(--hst-surface-raised);
}

.hst-softphone-bubble--out {
    align-self: flex-end;
    border-radius: 12px 12px 4px 12px;
    border-color: rgba(20, 184, 166, 0.4);
    background: rgba(20, 184, 166, 0.1);
}

.hst-softphone-bubble--failed {
    border-color: rgba(239, 68, 68, 0.5);
}

.hst-softphone-bubble__body {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--hst-ink);
    font-size: 0.9rem;
}

.hst-softphone-bubble__meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--hst-muted);
}

.hst-softphone-bubble__delete {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    display: none;
    min-width: 30px;
    min-height: 30px;
    padding: 0.1rem 0.3rem;
}

.hst-softphone-bubble:hover .hst-softphone-bubble__delete,
.hst-softphone-bubble:focus-within .hst-softphone-bubble__delete {
    display: inline-flex;
}

/* Touch devices cannot hover — keep delete reachable. */
@media (hover: none) {
    .hst-softphone-bubble__delete {
        display: inline-flex;
    }
}

.hst-softphone-compose__row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.hst-softphone-compose__row textarea {
    flex: 1 1 auto;
    resize: vertical;
}

.hst-softphone-compose__row .btn {
    min-height: 44px;
}

.hst-softphone-compose__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.hst-softphone-delete-confirm {
    margin-top: 0.6rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    color: var(--hst-ink);
}

.hst-softphone-delete-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Softphone BLFs */
.hst-softphone-blf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hst-softphone-blf {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--hst-border);
    border-radius: 8px;
    background: var(--hst-surface-raised);
}

.hst-softphone-blf-lamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
}

.hst-softphone-blf-lamp__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.hst-softphone-blf-lamp[data-hsp-blf-state="idle"] .hst-softphone-blf-lamp__dot {
    background: rgba(148, 163, 184, 0.55);
}

.hst-softphone-blf-lamp[data-hsp-blf-state="unknown"] .hst-softphone-blf-lamp__dot {
    background: rgba(148, 163, 184, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hst-softphone-blf-lamp[data-hsp-blf-state="ringing"] .hst-softphone-blf-lamp__dot {
    background: #eab308;
    animation: hst-softphone-pulse 1.1s ease-in-out infinite;
}

.hst-softphone-blf-lamp[data-hsp-blf-state="busy"] .hst-softphone-blf-lamp__dot {
    background: #ef4444;
}

.hst-softphone-blf-lamp[data-hsp-blf-state="available"] .hst-softphone-blf-lamp__dot {
    background: #22c55e;
}

.hst-softphone-blf__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0.15rem 0.25rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.hst-softphone-blf__main:hover .hst-softphone-blf__title,
.hst-softphone-blf__main:focus-visible .hst-softphone-blf__title {
    color: var(--hst-accent);
}

.hst-softphone-blf__title {
    font-weight: 650;
    color: var(--hst-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.hst-softphone-blf__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    font-size: 0.78rem;
    color: var(--hst-muted);
}

.hst-softphone-blf__kind {
    font-weight: 600;
    color: var(--hst-accent);
}

.hst-softphone-blf__remove {
    flex: 0 0 auto;
}

.hst-softphone-blf-picker {
    margin-bottom: 0.75rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--hst-border);
    border-radius: 10px;
    background: var(--hst-surface);
}

.hst-softphone-blf-picker__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.hst-softphone-blf-picker__row .form-select {
    flex: 1 1 180px;
    min-height: 44px;
}

.hst-softphone-blf-picker__row .btn {
    min-height: 44px;
}

[data-theme-mode="light"] .hst-softphone-blf {
    background: #f3f4f6;
}

[data-theme-mode="light"] .hst-softphone-blf-picker {
    background: #f8fafc;
}

/* 320px: keep the dialer comfortable */
@media (max-width: 360px) {
    .hst-softphone-key {
        min-height: 48px;
    }
    .hst-softphone-statusbar__actions {
        margin-left: 0;
        width: 100%;
    }
    .hst-softphone-incoming__actions {
        margin-left: 0;
        width: 100%;
    }
    .hst-softphone-incoming__actions .btn {
        flex: 1 1 auto;
    }
    .hst-softphone-blf {
        flex-wrap: wrap;
    }
    .hst-softphone-blf__remove {
        width: 100%;
    }
}

/* Authorised Contacts (Account Management) */
.ac-skeleton-row td {
    padding: 0.85rem 0.75rem;
    border-color: rgba(255, 255, 255, 0.09);
}

.ac-skeleton-bar {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.22), rgba(100, 116, 139, 0.38), rgba(100, 116, 139, 0.22));
    background-size: 200% 100%;
    animation: ac-skeleton-shine 1.2s ease-in-out infinite;
}

.ac-skeleton-bar--med {
    width: 72%;
}

.ac-skeleton-bar--short {
    width: 48%;
}

@keyframes ac-skeleton-shine {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.ac-empty-state-inner {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
}

[data-theme-mode="light"] .ac-empty-state-inner {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

.ac-empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #dc3545;
    color: #ffffff;
    font-size: 1.35rem;
}

.ac-empty-state-title {
    color: #f6f7fb;
    font-weight: 600;
}

[data-theme-mode="light"] .ac-empty-state-title {
    color: #111827;
}

.ac-empty-state-message {
    color: #b3b3b3;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

#ac-contact-modal .custom-kb-tooltip-wrapper,
#ac-remove-modal .custom-kb-tooltip-wrapper {
    z-index: auto;
}

#ac-contact-modal .custom-kb-tooltip-content {
    z-index: 1060 !important;
    width: min(320px, calc(100vw - 2rem));
}

/* ==========================================================================
   Snom Provisioning (Hybrid SIP Trunks) — Hybrid teal accent #14b8a6
   Prefix: snom-provisioning-* / snp-*
   Sibling feature to Grandstream Provisioning (gsp-*); shapes match, tokens differ.
   ========================================================================== */

.snom-provisioning-page {
    --snp-accent: #14b8a6;
    --snp-accent-deep: #0d9488;
    --snp-surface: #161616;
    --snp-surface-raised: #1c1c1c;
    --snp-surface-nested: #222222;
    --snp-ink: #f6f7fb;
    --snp-muted: #b3b3b3;
    --snp-border: rgba(255, 255, 255, 0.12);
}

.snom-provisioning-tabs .nav-link {
    color: var(--snp-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.65rem 0.9rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.snom-provisioning-tabs .nav-link:hover,
.snom-provisioning-tabs .nav-link:focus {
    color: var(--snp-ink);
    border-color: transparent;
}

.snom-provisioning-tabs .nav-link.active {
    color: var(--snp-accent);
    background: transparent;
    border-bottom-color: var(--snp-accent);
}

/* Data-heavy panes double-render on swap when Bootstrap fades them. */
.snom-provisioning-tab-content .tab-pane.fade {
    transition: none;
}

.snom-provisioning-page .snp-tab-panel.hst-panel {
    background: var(--snp-surface);
    border: 1px solid var(--snp-border);
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
}

.snp-gate-card {
    background: var(--snp-surface);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 1.25rem 1.35rem;
}

.snp-gate-card--pending {
    border-color: rgba(20, 184, 166, 0.35);
}

.snp-opt-in-bullets {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--snp-muted);
}

.snp-opt-in-bullets li + li {
    margin-top: 0.35rem;
}

.snp-disclaimer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--snp-border);
    max-width: 48rem;
    line-height: 1.5;
    color: var(--snp-muted);
}

.snp-disclaimer__label {
    color: var(--snp-ink);
    font-weight: 600;
}

.snp-pending-spinner {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid rgba(20, 184, 166, 0.25);
    border-top-color: var(--snp-accent, #14b8a6);
    animation: snp-spin 0.8s linear infinite;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

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

.snp-empty-state {
    text-align: center;
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 2rem 1.25rem;
}

.snp-empty-state__icon {
    font-size: 1.75rem;
    color: var(--snp-accent);
    margin-bottom: 0.65rem;
}

.snp-empty-state__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--snp-ink);
    margin-bottom: 0.4rem;
}

.snp-empty-state__copy {
    color: var(--snp-muted);
    max-width: 36rem;
    margin: 0 auto 1rem;
}

.snp-panel-loading {
    min-height: 6rem;
    padding: 1rem 1.1rem;
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
}

.snp-inline-loading {
    min-height: 6rem;
}

.snp-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.snp-skeleton-row {
    height: 2.5rem;
    border-radius: 6px;
    /* Track must stay visible on dark cards — low-opacity slate disappears. */
    background: rgba(148, 163, 184, 0.42);
    animation: snp-skeleton-pulse 1.4s ease-in-out infinite;
}

.snp-skeleton-row--medium {
    width: 72%;
}

.snp-skeleton-row--short {
    width: 48%;
}

@keyframes snp-skeleton-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .snp-pending-spinner {
        animation: none;
        border-top-color: var(--snp-accent, #14b8a6);
    }

    .snp-skeleton-row {
        animation: none;
        opacity: 0.85;
    }
}

.snp-table-card {
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
}

.snom-provisioning-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--snp-ink);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
    border-color: var(--snp-border);
    margin-bottom: 0;
}

.snom-provisioning-table thead th {
    color: var(--snp-muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom-color: var(--snp-border);
    background: var(--snp-surface-nested);
}

.snom-provisioning-table code {
    color: var(--snp-ink);
    font-size: 0.8125rem;
}

.snp-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--snp-ink);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.3;
}

.snp-status-badge--ok {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
}

.snp-status-badge--pending {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.3);
}

.snp-status-badge--down {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
}

.snp-howto-steps {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.snp-howto-step {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.snp-howto-step__num {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.16);
    color: var(--snp-accent, #14b8a6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.snp-howto-tips {
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 1rem 1.15rem;
}

.snp-howto-tips code {
    color: var(--snp-ink);
    font-size: 0.8rem;
}

.snp-setup-slot {
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}

.snp-setup-slot__label {
    display: block;
    color: var(--snp-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.snp-timezone-bar {
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
}

.snp-form-control,
.snom-provisioning-page .form-select,
.snom-provisioning-page .form-control {
    background: var(--snp-surface-nested);
    border-color: var(--snp-border);
    color: var(--snp-ink);
}

.snp-form-control:focus,
.snom-provisioning-page .form-select:focus,
.snom-provisioning-page .form-control:focus {
    background: var(--snp-surface-nested);
    border-color: var(--snp-accent);
    color: var(--snp-ink);
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.22);
}

.snp-field-error {
    color: #fca5a5;
    font-size: 0.8125rem;
}

.snp-keys-device-picker {
    min-width: min(20rem, 100%);
}

/* Phone details modal */
.snp-device-detail-body {
    color: var(--snp-ink, #f6f7fb);
}

.snp-detail-grid {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 0.45rem 0.85rem;
    margin: 0;
}

.snp-detail-grid dt {
    color: var(--snp-muted, #b3b3b3);
    font-weight: 500;
}

.snp-detail-grid dd {
    margin: 0;
    color: var(--snp-ink, #f6f7fb);
    word-break: break-word;
}

.snp-detail-lines {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.snp-detail-lines li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: var(--snp-surface-nested, #222222);
    border: 1px solid var(--snp-border, rgba(255, 255, 255, 0.12));
}

.snp-detail-lines__slot {
    min-width: 3.5rem;
    color: var(--snp-muted, #b3b3b3);
    font-size: 0.8125rem;
    font-weight: 600;
}

.snp-detail-lines__name {
    font-weight: 500;
}

.snp-detail-lines__user {
    margin-left: auto;
    color: var(--snp-muted, #b3b3b3);
    font-size: 0.8125rem;
}

/* Modals */
.snp-modern-modal {
    --snp-accent: #14b8a6;
    --snp-accent-deep: #0d9488;
    --snp-surface: #161616;
    --snp-surface-raised: #1c1c1c;
    --snp-surface-nested: #222222;
    --snp-ink: #f6f7fb;
    --snp-muted: #b3b3b3;
    --snp-border: rgba(255, 255, 255, 0.12);
    background: var(--snp-surface);
    border: 1px solid var(--snp-border);
    color: var(--snp-ink);
}

.snp-modern-modal .modal-header {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.34), rgba(20, 184, 166, 0.18));
    border-bottom: 1px solid var(--snp-border);
}

.snp-modern-modal .modal-title {
    color: var(--snp-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.snp-modern-modal .modal-title i {
    color: var(--snp-accent);
}

.snp-modern-modal.snp-modern-modal--danger .modal-header {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.28), rgba(127, 29, 29, 0.18));
}

.snp-modern-modal .modal-body,
.snp-modern-modal .modal-footer {
    background: var(--snp-surface);
}

.snp-modern-modal .modal-footer {
    border-top: 1px solid var(--snp-border);
    gap: 0.5rem;
}

.snp-modern-modal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.7;
}

.snp-modern-modal .form-label {
    color: var(--snp-ink);
    font-size: 0.875rem;
}

.snp-modern-modal .form-control,
.snp-modern-modal .form-select {
    background: var(--snp-surface-nested);
    border-color: var(--snp-border);
    color: var(--snp-ink);
}

.snp-modern-modal .form-control:focus,
.snp-modern-modal .form-select:focus {
    border-color: var(--snp-accent);
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.22);
}

/* Device settings modal — compact tabbed layout */
.snp-device-settings-body {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.snp-device-settings-tabs {
    border-bottom: 1px solid var(--snp-border, rgba(255, 255, 255, 0.12));
    gap: 0.15rem;
    margin-bottom: 0.85rem;
}

.snp-device-settings-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--snp-muted, #b3b3b3);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    background: transparent;
}

.snp-device-settings-tabs .nav-link i {
    font-size: 1rem;
    line-height: 1;
}

.snp-device-settings-tabs .nav-link:hover,
.snp-device-settings-tabs .nav-link:focus-visible {
    color: var(--snp-ink, #f6f7fb);
    border-bottom-color: rgba(20, 184, 166, 0.45);
    background: transparent;
}

.snp-device-settings-tabs .nav-link.active {
    color: var(--snp-accent, #14b8a6);
    border-bottom-color: var(--snp-accent, #14b8a6);
    background: transparent;
    font-weight: 600;
}

.snp-device-settings-tab-content {
    min-height: 11.5rem;
}

.snp-device-settings-tab-content .choices {
    width: 100%;
}

.snp-device-settings-section + .snp-device-settings-section {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--snp-border, rgba(255, 255, 255, 0.09));
}

.snp-device-settings-section__title {
    color: var(--snp-ink, #f6f7fb);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.45rem;
    text-transform: uppercase;
}

/* Codec priority editor */
.snp-codec-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.snp-codec-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background: var(--snp-surface-nested, #222222);
    border: 1px solid var(--snp-border, rgba(255, 255, 255, 0.12));
}

.snp-codec-row__rank {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--snp-accent, #14b8a6);
    background: rgba(20, 184, 166, 0.16);
    flex-shrink: 0;
}

.snp-codec-row__main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.snp-codec-row__main .form-check-label {
    color: var(--snp-ink, #f6f7fb);
    font-size: 0.875rem;
    margin: 0;
}

.snp-codec-row__moves {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin-left: auto;
}

.snp-codec-row__moves .btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.snp-codec-locked {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--snp-muted, #b3b3b3);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Snom D-series phone lookalike (Phone keys tab)
   .snp-phone--family-* controls key layout, .snp-phone--d7xx the screen ratio,
   .snp-phone--labels-* whether keys carry paper or on-screen labels.
   All internal sizes are em-based so one font-size scales the whole handset.
   -------------------------------------------------------------------------- */
.snp-phone {
    --snp-phone-shell: #1b1c1e;
    --snp-phone-shell-edge: #3c3f43;
    --snp-phone-ink: #f6f7fb;
    --snp-phone-muted: #c9ced3;
    --snp-phone-key: #6d7276;
    --snp-phone-key-low: #4b5054;
    --snp-phone-select: #14b8a6;
    --snp-phone-led: #33d16a;
    --snp-phone-led-off: rgba(140, 152, 158, 0.35);
    font-size: clamp(9px, 2.1vw, 12px);
    max-width: 100%;
}

.snp-phone__chassis {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #26282b, var(--snp-phone-shell) 45%, #131416);
    border: 1px solid var(--snp-phone-shell-edge);
    border-radius: 1.6em;
    padding: 1.2em 1.3em 1.5em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1.4em 2.6em rgba(0, 0, 0, 0.5);
}

.snp-phone__chassis::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(107deg, rgba(255, 255, 255, 0.07) 0 38%, rgba(255, 255, 255, 0) 38.6%);
}

.snp-phone__brandbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    padding-bottom: 0.9em;
}

.snp-phone__brand {
    font-size: 1.9em;
    line-height: 1;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: #cfd3d7;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}

.snp-phone__model-badge {
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--snp-phone-muted);
}

.snp-phone__mwi {
    width: 3.4em;
    height: 0.9em;
    border-radius: 999px;
    background: linear-gradient(180deg, #7bf3a6, var(--snp-phone-led) 60%, #1ba757);
    box-shadow: 0 0 0.9em rgba(51, 209, 106, 0.6);
    flex-shrink: 0;
}

.snp-phone__face {
    display: flex;
    align-items: stretch;
    gap: 1em;
}

.snp-phone__screen-col {
    flex: 1 1 auto;
    min-width: 0;
}

.snp-phone__side {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    justify-content: center;
    min-width: 7.5em;
    flex: 0 0 auto;
}

.snp-phone__side--left {
    align-items: stretch;
}

.snp-phone__side--right {
    align-items: stretch;
}

.snp-phone__key {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.3em 0.6em;
    border-radius: 0.45em;
    border: 1px solid rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #7c8185, var(--snp-phone-key) 55%, var(--snp-phone-key-low));
    color: var(--snp-phone-ink);
    cursor: pointer;
    text-align: left;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0.15em 0.3em rgba(0, 0, 0, 0.45);
}

.snp-phone__key:hover,
.snp-phone__key:focus-visible {
    outline: 2px solid rgba(20, 184, 166, 0.9);
    outline-offset: 2px;
}

.snp-phone__key--active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 0.22em rgba(20, 184, 166, 0.8);
}

.snp-phone__key-led {
    width: 0.55em;
    height: 0.55em;
    border-radius: 999px;
    background: var(--snp-phone-led-off);
    flex-shrink: 0;
}

.snp-phone__key--set .snp-phone__key-led {
    background: linear-gradient(180deg, #7bf3a6, var(--snp-phone-led) 60%, #1ba757);
    box-shadow: 0 0 0.6em rgba(51, 209, 106, 0.7);
}

.snp-phone__key-label {
    font-size: 1.15em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Paper-label models print the label on a card next to the key. */
.snp-phone--labels-paper .snp-phone__key {
    background: linear-gradient(180deg, #f4f4f2, #dcdcd8);
    color: #22262b;
    border-color: rgba(0, 0, 0, 0.4);
}

.snp-phone--labels-paper .snp-phone__key-label {
    color: #22262b;
}

.snp-phone__bezel {
    position: relative;
    border-radius: 0.35em;
    padding: 0.25em;
    background: #0b0c0d;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0.15em 0.5em rgba(0, 0, 0, 0.6);
}

.snp-phone__screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 320 / 240;
    border-radius: 0.25em;
    color: var(--snp-phone-ink);
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 90% at 15% 100%, rgba(150, 130, 210, 0.12), transparent 55%),
        linear-gradient(155deg, #2b3034, #1c2023 60%, #23282c);
}

.snp-phone__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6em;
    flex-shrink: 0;
    padding: 0.35em 0.7em;
    background: rgba(20, 23, 26, 0.85);
    font-size: 1.15em;
}

.snp-phone__status-left,
.snp-phone__status-right {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snp-phone__status-left i {
    color: var(--snp-phone-led);
    flex-shrink: 0;
}

.snp-phone__status-right {
    flex-shrink: 0;
    color: var(--snp-phone-muted);
    font-variant-numeric: tabular-nums;
}

.snp-phone__screen-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    padding: 0.6em 0.7em;
    overflow: hidden;
}

.snp-phone__screen-line {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.15em;
    min-width: 0;
}

.snp-phone__screen-line-slot {
    color: var(--snp-phone-muted);
    font-weight: 700;
    flex-shrink: 0;
}

.snp-phone__screen-line-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snp-phone__screen-empty {
    color: var(--snp-phone-muted);
    font-size: 1.1em;
}

.snp-phone__softkeys {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5em;
    margin-top: 0.9em;
}

.snp-phone__softkey {
    min-height: 44px;
    padding: 0.25em 0.35em;
    border-radius: 0.4em;
    border: 1px solid rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #7c8185, var(--snp-phone-key) 55%, var(--snp-phone-key-low));
    color: var(--snp-phone-ink);
    font-size: 1.05em;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0.15em 0.35em rgba(0, 0, 0, 0.5);
}

.snp-phone__softkey:hover,
.snp-phone__softkey:focus-visible {
    outline: 2px solid rgba(20, 184, 166, 0.9);
    outline-offset: 2px;
}

.snp-phone__softkey--active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 0.2em rgba(20, 184, 166, 0.8);
}

/* D785 SmartDisplay strip sits between the screen and the right-hand keys. */
.snp-phone__smartdisplay {
    flex: 0 0 auto;
    min-width: 7em;
    border-radius: 0.35em;
    padding: 0.45em;
    background: #0b0c0d;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0.15em 0.5em rgba(0, 0, 0, 0.55);
}

.snp-phone__smartdisplay-label {
    display: block;
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--snp-phone-muted);
    text-align: center;
    margin-bottom: 0.35em;
}

.snp-phone__smartdisplay-rows {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.snp-phone__smartdisplay-row {
    padding: 0.2em 0.35em;
    border-radius: 0.2em;
    background: rgba(56, 62, 67, 0.92);
    color: var(--snp-phone-ink);
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snp-phone__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.85rem;
}

.snp-phone__page {
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1f1f1f;
    color: #f6f7fb;
    font-weight: 600;
    font-size: 0.8rem;
}

.snp-phone__page--active {
    border-color: rgba(20, 184, 166, 0.8);
    background: rgba(20, 184, 166, 0.28);
    color: #ccfbf1;
}

.snp-phone-edit-panel {
    background: var(--snp-surface-raised, #1c1c1c);
    border: 1px solid var(--snp-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    padding: 1rem 1.05rem;
}

.snp-phone-key-help-link {
    color: var(--snp-accent, #14b8a6);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    font-weight: 600;
}

.snp-phone-key-help-link:hover,
.snp-phone-key-help-link:focus-visible {
    color: #2dd4bf;
}

/* Face families ---------------------------------------------------------- */
.snp-phone--family-entry-bw-right-fkeys .snp-phone__side--right,
.snp-phone--family-smartlabel-right .snp-phone__side--right {
    min-width: 8em;
}

.snp-phone--family-smartlabel-right-paged .snp-phone__side--right {
    gap: 0.35em;
}

.snp-phone--family-bilateral-paper .snp-phone__side,
.snp-phone--family-hd-bilateral-smartlabel .snp-phone__side {
    min-width: 6.5em;
    gap: 0.35em;
}

.snp-phone--family-main-plus-smart-display .snp-phone__side--right {
    min-width: 6.5em;
}

/* Per-model screens ------------------------------------------------------ */
.snp-phone--d712 .snp-phone__screen,
.snp-phone--d715 .snp-phone__screen {
    aspect-ratio: 128 / 48;
    color: #d8e6f5;
    background:
        radial-gradient(120% 90% at 20% 100%, rgba(120, 150, 200, 0.14), transparent 55%),
        linear-gradient(180deg, #1d2531, #131920 70%, #171d25);
}

.snp-phone--d712 .snp-phone__status,
.snp-phone--d715 .snp-phone__status {
    background: rgba(12, 17, 24, 0.9);
}

.snp-phone--d713 .snp-phone__screen,
.snp-phone--d717 .snp-phone__screen,
.snp-phone--d735 .snp-phone__screen {
    aspect-ratio: 320 / 240;
}

.snp-phone--d765 .snp-phone__screen,
.snp-phone--d785 .snp-phone__screen,
.snp-phone--d815 .snp-phone__screen {
    aspect-ratio: 480 / 272;
}

/* D815 is a 5" panel with 5 SmartLabels per side — a touch wider than the
   D862/D865 columns so ten labels stay legible. */
.snp-phone--d815 .snp-phone__side {
    min-width: 7em;
}

.snp-phone--d862 .snp-phone__screen,
.snp-phone--d865 .snp-phone__screen {
    aspect-ratio: 16 / 9;
}

@media (max-width: 991.98px) {
    .snp-phone__face {
        flex-direction: column;
    }

    .snp-phone__side {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
    }

    .snp-phone__side .snp-phone__key {
        flex: 1 1 8em;
    }

    .snp-phone__smartdisplay {
        min-width: 0;
    }

    .snp-phone__smartdisplay-rows {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .snp-phone__smartdisplay-row {
        flex: 1 1 6em;
    }
}

@media (max-width: 575.98px) {
    .snp-detail-grid {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }

    .snp-detail-grid dd {
        margin-bottom: 0.45rem;
    }
}

/* Light theme ------------------------------------------------------------ */
[data-theme-mode="light"] .snom-provisioning-page {
    --snp-surface: #ffffff;
    --snp-surface-raised: #f4f5f7;
    --snp-surface-nested: #eef0f4;
    --snp-ink: #172033;
    --snp-muted: #5b6475;
    --snp-border: rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .snp-modern-modal {
    --snp-surface: #ffffff;
    --snp-surface-raised: #f4f5f7;
    --snp-surface-nested: #eef0f4;
    --snp-ink: #172033;
    --snp-muted: #5b6475;
    --snp-border: rgba(15, 23, 42, 0.12);
    background: var(--snp-surface);
    color: var(--snp-ink);
}

[data-theme-mode="light"] .snp-modern-modal .btn-close {
    filter: none;
}

[data-theme-mode="light"] .snp-skeleton-row {
    background: rgba(100, 116, 139, 0.22);
}

[data-theme-mode="light"] .snom-provisioning-table {
    --bs-table-hover-bg: rgba(15, 23, 42, 0.04);
}

[data-theme-mode="light"] .snp-status-badge {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .snp-status-badge--ok {
    color: #15803d;
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.28);
}

[data-theme-mode="light"] .snp-status-badge--pending {
    color: #92400e;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme-mode="light"] .snp-status-badge--down {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.28);
}

[data-theme-mode="light"] .snp-field-error {
    color: #b91c1c;
}

[data-theme-mode="light"] .snp-device-settings-tabs .nav-link.active {
    color: var(--snp-accent-deep, #0d9488);
    border-bottom-color: var(--snp-accent-deep, #0d9488);
}

[data-theme-mode="light"] .snp-form-control,
[data-theme-mode="light"] .snom-provisioning-page .form-select,
[data-theme-mode="light"] .snom-provisioning-page .form-control,
[data-theme-mode="light"] .snp-modern-modal .form-control,
[data-theme-mode="light"] .snp-modern-modal .form-select {
    background: #f8fafc;
    color: #172033;
}

/* Snom desk phones are black hardware — keep the handset dark in both themes. */
[data-theme-mode="light"] .snp-phone__page {
    background: #ffffff;
    color: #172033;
    border-color: rgba(15, 23, 42, 0.18);
}

[data-theme-mode="light"] .snp-phone__page--active {
    color: #0f766e;
}

/* ------------------------------------------------------------------ */
/* Hybrid SIP Trunks — Call Tone Insights (+ wallboard)              */
/* ------------------------------------------------------------------ */

.hst-tone-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.hst-tone-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.hst-tone-pulse__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #64748b;
    box-shadow: 0 0 0 0 rgba(100, 116, 139, 0.45);
}

.hst-tone-pulse[data-state="live"] .hst-tone-pulse__dot {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
    animation: hst-tone-pulse 1.8s ease-out infinite;
}

.hst-tone-pulse[data-state="loading"] .hst-tone-pulse__dot {
    background: #14b8a6;
}

.hst-tone-pulse[data-state="error"] .hst-tone-pulse__dot {
    background: #ef4444;
}

.hst-tone-pulse__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hst-ink, #f6f7fb);
}

@keyframes hst-tone-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.hst-tone-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.hst-tone-kpi-card {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    min-height: 7.5rem;
    padding: 1rem 1.05rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--hst-surface-raised, #161616);
}

.hst-tone-kpi-card--positive {
    border-color: rgba(34, 197, 94, 0.35);
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.12), rgba(22, 22, 22, 0.95));
}

.hst-tone-kpi-card--secondary {
    border-color: rgba(255, 255, 255, 0.08);
}

.hst-tone-kpi-card__icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0d9488;
    color: #ffffff;
    font-size: 1.25rem;
}

.hst-tone-kpi-card--positive .hst-tone-kpi-card__icon {
    background: #16a34a;
}

.hst-tone-kpi-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.hst-tone-kpi-card__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #b3b3b3;
}

.hst-tone-kpi-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--hst-ink, #f6f7fb);
    letter-spacing: -0.02em;
}

.hst-tone-kpi-card__hint {
    font-size: 0.75rem;
    color: #8a8a8a;
}

.hst-tone-best {
    margin-top: 0;
}

.hst-tone-mix__track {
    display: flex;
    width: 100%;
    height: 1.1rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(100, 116, 139, 0.25);
}

.hst-tone-mix__seg {
    min-width: 0;
}

.hst-tone-mix__seg--positive { background: #22c55e; }
.hst-tone-mix__seg--neutral { background: #94a3b8; }
.hst-tone-mix__seg--negative { background: #ef4444; }

.hst-tone-mix__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    margin-top: 0.75rem;
}

.hst-tone-mix__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: #cfcfcf;
}

.hst-tone-mix__swatch {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
}

.hst-tone-mix__swatch--positive { background: #22c55e; }
.hst-tone-mix__swatch--neutral { background: #94a3b8; }
.hst-tone-mix__swatch--negative { background: #ef4444; }

.hst-tone-panel {
    padding: 1rem 1.1rem;
}

/* Wallboard mode — large tiles, distance-readable */
.hst-tone-wallboard .hst-tone-hero__sub,
.hst-tone-page--wallboard .hst-tone-cost-panel {
    display: none;
}

.hst-tone-wallboard .hst-tone-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.hst-tone-wallboard .hst-tone-kpi-card {
    min-height: 10rem;
    padding: 1.35rem 1.4rem;
}

.hst-tone-wallboard .hst-tone-kpi-card__value {
    font-size: 2.75rem;
}

.hst-tone-wallboard .hst-tone-kpi-card__label {
    font-size: 1rem;
}

.hst-tone-wallboard .hst-hero-title {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}

.hst-tone-wallboard .hst-call-stats-best-staff__name {
    font-size: 1.65rem;
}

.hst-tone-wallboard .hst-table {
    font-size: 1.05rem;
}

.hst-tone-wallboard .hst-tone-filters {
    opacity: 0.92;
}

[data-theme-mode="light"] .hst-tone-kpi-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .hst-tone-kpi-card--positive {
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.1), #ffffff);
}

[data-theme-mode="light"] .hst-tone-kpi-card__value {
    color: #0f172a;
}

[data-theme-mode="light"] .hst-tone-kpi-card__label,
[data-theme-mode="light"] .hst-tone-mix__legend-item {
    color: #475569;
}

[data-theme-mode="light"] .hst-tone-pulse__label {
    color: #0f172a;
}

@media (max-width: 1199.98px) {
    .hst-tone-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .hst-tone-nav {
        justify-content: flex-start;
    }

    .hst-tone-pulse {
        justify-content: flex-start;
    }

    .hst-tone-kpi-grid,
    .hst-tone-wallboard .hst-tone-kpi-grid {
        grid-template-columns: 1fr;
    }

    .hst-tone-wallboard .hst-tone-kpi-card__value {
        font-size: 2.1rem;
    }
}

/* ==========================================================================
   Hybrid SIP Trunks — Pricing page
   ========================================================================== */

.hst-page-container[data-hst-page="pricing"] .hst-pricing-breadcrumb .breadcrumb {
    font-size: 0.78rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: 0.85rem;
    padding: 1.25rem 1.5rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem 0.28rem 0.45rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.28);
    color: var(--hst-accent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-eyebrow i {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: #ffffff;
    background: var(--hst-accent-deep);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-title {
    color: var(--hst-ink);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-accent {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 700;
    color: var(--hst-accent);
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.28);
    letter-spacing: -0.01em;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-copy {
    color: var(--hst-muted);
    font-size: 0.875rem;
    max-width: 42rem;
    line-height: 1.55;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-copy strong {
    color: var(--hst-ink);
    font-weight: 650;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.32rem 0.7rem 0.32rem 0.45rem;
    border: 1px solid var(--hst-border);
    border-radius: 999px;
    color: var(--hst-ink);
    font-size: 0.72rem;
    font-weight: 650;
    background: rgba(255, 255, 255, 0.03);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-pill:nth-child(1) {
    border-color: rgba(20, 184, 166, 0.35);
    background: rgba(20, 184, 166, 0.1);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-pill:nth-child(2) {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.1);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-pill:nth-child(3) {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.1);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-pill i {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
    color: #ffffff !important;
    background: var(--hst-accent-deep);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-pill:nth-child(2) i {
    background: #d97706;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-pill:nth-child(3) i {
    background: #16a34a;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-card {
    text-align: center;
    padding: 1.5rem 1.25rem;
    border-radius: 0.85rem;
    border: none;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.85rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-card-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.5rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-price {
    color: #ffffff;
    font-size: clamp(2.5rem, 6vw, 3.25rem);
    font-weight: 850;
    letter-spacing: -0.06em;
    line-height: 1;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-currency {
    font-size: 0.55em;
    vertical-align: super;
    font-weight: 700;
    color: #ffffff;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-period {
    font-size: 0.35em;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-hero-card-note {
    margin-top: 0.65rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.4;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card {
    border: 1px solid var(--hst-border);
    border-radius: 0.85rem;
    padding: 1.25rem;
    background: var(--hst-surface);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.4);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card--trunk { border-top: 3px solid var(--hst-accent); }
.hst-page-container[data-hst-page="pricing"] .hst-pricing-card--recording { border-top: 3px solid #f59e0b; }
.hst-page-container[data-hst-page="pricing"] .hst-pricing-card--ai { border-top: 3px solid #8b5cf6; }

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.85rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card-icon.is-teal {
    background: var(--hst-accent-deep);
    color: #ffffff;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card-icon.is-amber {
    background: #d97706;
    color: #ffffff;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card-icon.is-violet {
    background: #7c3aed;
    color: #ffffff;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card-icon i {
    color: inherit;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card-title {
    color: var(--hst-ink);
    font-size: 1.05rem;
    font-weight: 750;
    margin-bottom: 0.5rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card-rate {
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    text-align: center;
    border: 1px solid rgba(20, 184, 166, 0.28);
    background: rgba(20, 184, 166, 0.08);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card--recording .hst-pricing-card-rate {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.08);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card--ai .hst-pricing-card-rate {
    border-color: rgba(139, 92, 246, 0.28);
    background: rgba(139, 92, 246, 0.08);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card-amount {
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    color: var(--hst-ink);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card-unit {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--hst-muted);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-card-lead {
    font-size: 0.825rem;
    color: var(--hst-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--hst-muted);
    line-height: 1.45;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-feature-list li strong {
    color: var(--hst-ink);
    font-weight: 650;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-feature-list li > i {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e !important;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-feature-warn-icon {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-panel {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: 0.85rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-panel-body {
    padding: 1.25rem 1.35rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-section-label {
    color: var(--hst-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-section-title {
    color: var(--hst-ink);
    font-size: 1rem;
    font-weight: 700;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-panel-copy {
    color: var(--hst-muted);
    font-size: 0.875rem;
    line-height: 1.55;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-panel-copy strong {
    color: var(--hst-ink);
    font-weight: 650;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-table-wrap,
.hst-page-container[data-hst-page="pricing"] .hst-pricing-example-table-wrap {
    border-radius: 0.65rem;
    border: 1px solid var(--hst-border);
    overflow: hidden;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-table,
.hst-page-container[data-hst-page="pricing"] .hst-pricing-example-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hst-ink);
    margin-bottom: 0;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-table th,
.hst-page-container[data-hst-page="pricing"] .hst-pricing-example-table th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--hst-muted);
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--hst-border);
    padding: 0.7rem 0.9rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-table td,
.hst-page-container[data-hst-page="pricing"] .hst-pricing-example-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--hst-border);
    vertical-align: middle;
    color: var(--hst-ink);
    font-size: 0.825rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-table tr:last-child td,
.hst-page-container[data-hst-page="pricing"] .hst-pricing-example-table tr:last-child td {
    border-bottom: 0;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-table .hst-muted,
.hst-page-container[data-hst-page="pricing"] .hst-pricing-example-table .hst-muted {
    color: var(--hst-muted);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-table a {
    color: var(--hst-accent);
    text-decoration: none;
    font-weight: 600;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-table a:hover {
    text-decoration: underline;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    border: 1px solid var(--hst-border);
    font-size: 0.825rem;
    line-height: 1.5;
    color: var(--hst-muted);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-callout strong {
    color: var(--hst-ink);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-callout a {
    color: var(--hst-accent);
    font-weight: 600;
    text-decoration: none;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-callout a:hover {
    text-decoration: underline;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-callout-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #ffffff;
    background: var(--hst-accent-deep);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-callout--info {
    border-color: rgba(20, 184, 166, 0.28);
    background: rgba(20, 184, 166, 0.08);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-callout--tip {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.08);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-callout--tip .hst-pricing-callout-icon {
    background: #d97706;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-compare-card {
    border: 1px solid var(--hst-border);
    border-radius: 0.75rem;
    padding: 1.1rem 1.15rem;
    background: var(--hst-surface-raised);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-compare-card--standard {
    border-top: 3px solid #64748b;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-compare-card--hybrid {
    border-top: 3px solid var(--hst-accent);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-compare-title {
    color: var(--hst-ink);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-compare-price {
    color: var(--hst-ink);
    font-size: 1.65rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    margin-bottom: 0.55rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-compare-unit {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--hst-muted);
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-faq-item {
    padding: 0.85rem 0;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-faq-q {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--hst-ink);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-faq-q i {
    color: var(--hst-accent);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-faq-a {
    color: var(--hst-muted);
    font-size: 0.825rem;
    line-height: 1.55;
    padding-left: 1.35rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-cta {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: 0.85rem;
    padding: 1.25rem 1.35rem;
}

.hst-page-container[data-hst-page="pricing"] .hst-pricing-cta-title {
    color: var(--hst-ink);
    font-size: 1.1rem;
    font-weight: 750;
}

[data-theme-mode="light"] .hst-page-container[data-hst-page="pricing"] .hst-pricing-pill {
    background: rgba(15, 23, 42, 0.03);
}

[data-theme-mode="light"] .hst-page-container[data-hst-page="pricing"] .hst-pricing-table th,
[data-theme-mode="light"] .hst-page-container[data-hst-page="pricing"] .hst-pricing-example-table th {
    background: rgba(15, 23, 42, 0.04);
}

@media (max-width: 575.98px) {
    .hst-page-container[data-hst-page="pricing"] .hst-pricing-hero {
        padding: 1rem 1.1rem;
    }

    .hst-page-container[data-hst-page="pricing"] .hst-pricing-panel-body,
    .hst-page-container[data-hst-page="pricing"] .hst-pricing-cta {
        padding: 1rem 1.05rem;
    }

    .hst-page-container[data-hst-page="pricing"] .hst-pricing-table th,
    .hst-page-container[data-hst-page="pricing"] .hst-pricing-table td {
        padding: 0.6rem 0.7rem;
        font-size: 0.78rem;
    }
}

/* Hybrid SIP Trunks — LDAP Phonebook */
.hst-ldap-pb-page .hst-ldap-pb-empty-state {
    padding: 2rem 1.25rem;
    text-align: center;
}

.hst-ldap-pb-table .hst-ldap-pb-row-actions,
.hst-ldap-pb-contacts-table .d-inline-flex {
    white-space: nowrap;
}

.hst-ldap-pb-copy-row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
}

.hst-ldap-pb-copy-row:last-child {
    border-bottom: 0;
}

.hst-ldap-pb-copy-row__label {
    font-size: 0.875rem;
    color: var(--hst-muted, #b3b3b3);
}

.hst-ldap-pb-copy-row__value {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.hst-ldap-pb-copy-row__value code {
    flex: 1;
    min-width: 0;
    word-break: break-all;
}

.hst-ldap-pb-settings-shared {
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    border-radius: 10px;
    padding: 0.75rem 1rem;
    background: var(--hst-surface-raised, #1a1a1a);
}

.hst-ldap-pb-copy-panel .form-control {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.hst-ldap-pb-disclosure-toggle {
    font-size: 0.875rem;
    text-decoration: none;
}

.hst-ldap-pb-back-link {
    color: var(--hst-accent, #14b8a6);
}

.hst-ldap-pb-import-preview-wrap {
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    border-radius: 8px;
}

.hst-ldap-pb-server-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.55rem;
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.12));
    background: var(--hst-surface-raised, #1a1a1a);
    color: var(--hst-ink, #f6f7fb);
}

.hst-ldap-pb-server-chip--modal {
    width: 100%;
    max-width: 28rem;
}

.hst-ldap-pb-server-chip code {
    color: inherit;
    font-size: 0.875rem;
}

.hst-ldap-pb-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2rem;
}

.hst-ldap-pb-copy-btn__label {
    font-size: 0.75rem;
    line-height: 1;
}

.hst-ldap-pb-quickstart-bar {
    background: var(--hst-surface-raised, #1a1a1a);
    border: 1px solid var(--hst-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.65rem;
}

.hst-ldap-pb-quickstart-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.85rem;
    min-height: 3.25rem;
    padding: 0.85rem 1rem;
    text-align: left;
    width: 100%;
}

.hst-ldap-pb-quickstart-trigger:hover {
    background: rgba(255, 255, 255, 0.025);
}

.hst-ldap-pb-quickstart-trigger:focus-visible {
    outline: 2px solid rgba(20, 184, 166, 0.55);
    outline-offset: -2px;
}

.hst-ldap-pb-quickstart-trigger-icon {
    align-items: center;
    background: rgba(20, 184, 166, 0.14);
    border-radius: 0.45rem;
    color: #14b8a6;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.hst-ldap-pb-quickstart-trigger-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.hst-ldap-pb-quickstart-trigger-title {
    color: var(--hst-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
}

.hst-ldap-pb-quickstart-trigger-meta {
    color: var(--hst-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.25;
}

.hst-ldap-pb-quickstart-trigger-action {
    align-items: center;
    color: var(--hst-muted, #b3b3b3);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.875rem;
    gap: 0.15rem;
}

.hst-ldap-pb-quickstart-chevron {
    font-size: 1.15rem;
    transition: transform 0.15s ease;
}

.hst-ldap-pb-quickstart-trigger:hover .hst-ldap-pb-quickstart-chevron,
.hst-ldap-pb-quickstart-trigger:focus-visible .hst-ldap-pb-quickstart-chevron {
    transform: translateX(2px);
}

.hst-ldap-pb-howto-steps {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.hst-ldap-pb-howto-step {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.hst-ldap-pb-howto-step__num {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(20, 184, 166, 0.15);
    color: #14b8a6;
    border: 1px solid rgba(20, 184, 166, 0.35);
}

[data-theme-mode="light"] .hst-ldap-pb-howto-step__num {
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    border-color: rgba(13, 148, 136, 0.28);
}

[data-theme-mode="light"] .hst-ldap-pb-settings-shared,
[data-theme-mode="light"] .hst-ldap-pb-server-chip,
[data-theme-mode="light"] .hst-ldap-pb-quickstart-bar {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .hst-ldap-pb-quickstart-trigger:hover {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme-mode="light"] .hst-ldap-pb-quickstart-trigger-title {
    color: #0f172a;
}

@media (max-width: 767.98px) {
    .hst-ldap-pb-copy-row {
        grid-template-columns: 1fr;
    }

    .hst-ldap-pb-quickstart-action-label {
        display: none;
    }
}


/* --- Enterprise sidebar logo (iologo wordmark, both hosts) ---
   Wide lockup (~4.3:1). Override theme `.header-logo img { height: 1.7rem }`
   so the wordmark is not forced into the old square PNG box. */
.app-sidebar .main-sidebar-header .header-logo img.crazytel-sidebar-enterprise-logo {
    height: auto;
    width: auto;
    max-height: 3rem;
    max-width: 13rem;
    object-fit: contain;
    object-position: left center;
}

html[data-toggled="close"] .app-sidebar .main-sidebar-header .header-logo img.crazytel-sidebar-enterprise-logo,
html[data-toggled="icon-overlay-close"] .app-sidebar .main-sidebar-header .header-logo img.crazytel-sidebar-enterprise-logo,
html[data-toggled="icon-text-close"] .app-sidebar .main-sidebar-header .header-logo img.crazytel-sidebar-enterprise-logo,
html[data-toggled="icon-click-closed"] .app-sidebar .main-sidebar-header .header-logo img.crazytel-sidebar-enterprise-logo,
html[data-toggled="icon-hover-closed"] .app-sidebar .main-sidebar-header .header-logo img.crazytel-sidebar-enterprise-logo,
html[data-toggled="menu-click-closed"] .app-sidebar .main-sidebar-header .header-logo img.crazytel-sidebar-enterprise-logo,
html[data-toggled="menu-hover-closed"] .app-sidebar .main-sidebar-header .header-logo img.crazytel-sidebar-enterprise-logo {
    width: 2.25rem;
    height: 2.25rem;
    max-width: 2.25rem;
    max-height: 2.25rem;
    object-fit: cover;
    object-position: left center;
}

/* --- Enterprise Redesign --- */
.ent-page-container {
    --ent-surface: #161616;
    --ent-surface-raised: #1a1a1a;
    --ent-border: rgba(255, 255, 255, 0.09);
    --ent-ink: #f6f7fb;
    --ent-muted: #b3b3b3;
    --ent-accent: #0d6efd;
    --ent-accent-deep: #0a58ca;
    --ent-card-border: rgba(13, 110, 253, 0.38);
    color: var(--ent-ink);
}

/*
 * Bootstrap utility `.d-flex { display:flex !important }` is compiled AFTER the
 * base `[hidden] { display:none !important }` rule, so equal-specificity means
 * d-flex wins. Enterprise alerts use `alert d-flex` + the `hidden` attribute for
 * show/hide — without this override the default error copy stays visually visible
 * even when the attribute is set (every Wholesale page looks permanently failed).
 */
.ent-page-container [hidden],
.enterprise-page [hidden] {
    display: none !important;
}

[data-theme-mode="light"] .ent-page-container {
    --ent-surface: #ffffff;
    --ent-surface-raised: #f8fafc;
    --ent-border: rgba(15, 23, 42, 0.1);
    --ent-ink: #0f172a;
    --ent-muted: #64748b;
    --ent-card-border: rgba(10, 88, 202, 0.35);
}

.ent-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
    color: var(--ent-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ent-hero-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--ent-ink);
    text-wrap: balance;
}

.ent-muted {
    color: var(--ent-muted);
}

.ent-hero-pill,
.ent-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface);
    color: var(--ent-ink);
    font-size: 0.875rem;
}

.ent-hero-pill strong {
    color: var(--ent-ink);
    font-weight: 700;
}

.ent-status-chip {
    background: rgba(13, 110, 253, 0.12);
    border-color: rgba(13, 110, 253, 0.28);
    color: #0a58ca;
    font-weight: 700;
}

[data-theme-mode="dark"] .ent-status-chip {
    color: #5eead4;
}

/* --- Hybrid SIP Trunks — Dashboard shell -------------------------------- */
.ent-dashboard-page .ent-hero-title {
    font-size: 1.28rem;
}

.ent-dashboard-page .ent-hero-ops__titles .ent-hero-title {
    font-size: 1.5rem;
}

.ent-dashboard-page .ent-eyebrow {
    margin-bottom: 0.15rem;
}

.ent-dashboard-hero {
    position: relative;
    overflow: hidden;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface);
}

.ent-dashboard-hero--ops {
    padding: 1rem 1.15rem;
}

.ent-hero-ops {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.ent-hero-ops__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    min-width: 0;
}

.ent-hero-ops__identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.ent-hero-ops__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: #7c3aed;
    color: #ffffff;
    font-size: 1.25rem;
}

.ent-hero-ops__titles {
    min-width: 0;
}

.ent-hero-ops__titles .ent-hero-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ent-hero-ops__titles .ent-hero-title .ri-information-line {
    color: var(--ent-muted);
    font-size: 1rem;
}

.ent-hero-ops__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    flex-shrink: 0;
}

.ent-hero-ops__status .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ent-hero-ops__status .badge::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.ent-hero-ops__status .badge.text-bg-success {
    background: #166534 !important;
    color: #f6f7fb !important;
}

.ent-hero-ops__status .badge.text-bg-success::before {
    animation: ent-hero-live-pulse 2.2s ease-in-out infinite;
}

.ent-hero-ops__status .badge.text-bg-danger {
    background: #b91c1c !important;
    color: #f6f7fb !important;
}

.ent-hero-ops__stamp {
    color: var(--ent-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@keyframes ent-hero-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/*
 * Portal shell: .app-content uses min-height: calc(100vh - 8rem) while the
 * footer still sits below it, so the page is always a few dozen px taller than
 * the viewport (phantom scrollbar) even when dashboard content fits. Let flex
 * fill the remaining space instead for enterprise pages.
 */
body:has(#enterprise-page) .main-content.app-content {
    min-height: 0;
}

.enterprise-page.ent-page-container {
    overflow-x: clip;
    padding-bottom: 0.25rem;
}

@supports not (overflow: clip) {
    .enterprise-page.ent-page-container {
        overflow-x: hidden;
    }
}

.ent-dashboard-hero__lead {
    max-width: 46rem;
    margin-top: 0.2rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.ent-hero-ops .ent-hero-live {
    padding-top: 0.85rem;
    border-top: 1px solid var(--ent-border);
}

.ent-hero-live {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    min-width: 0;
}

.ent-hero-live__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.ent-hero-live__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ent-ink);
}

.ent-hero-live__title > i {
    color: #14b8a6;
}

.ent-hero-live__title .ri-question-line {
    color: var(--ent-muted);
    font-size: 0.95rem;
}

/* Dashboard tabs — mobile-friendly, no fade flicker on data panels */
.enterprise-dashboard-tabs {
    border-bottom: 1px solid var(--ent-border);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.enterprise-dashboard-tabs::-webkit-scrollbar {
    display: none;
}

.enterprise-dashboard-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--ent-muted);
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
}

.enterprise-dashboard-tabs .nav-link i {
    font-size: 1rem;
    opacity: 0.85;
}

.enterprise-dashboard-tabs .nav-link:hover,
.enterprise-dashboard-tabs .nav-link:focus-visible {
    color: var(--ent-ink);
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.enterprise-dashboard-tabs .nav-link.active {
    color: var(--ent-ink);
    border-bottom-color: #8b5cf6;
    background: transparent;
}

.enterprise-dashboard-tabs .nav-link.active i {
    opacity: 1;
}

[data-theme-mode="light"] .enterprise-dashboard-tabs .nav-link:hover,
[data-theme-mode="light"] .enterprise-dashboard-tabs .nav-link:focus-visible {
    border-bottom-color: rgba(15, 23, 42, 0.18);
}

.enterprise-dashboard-tab-content > .tab-pane {
    animation: none;
}

.enterprise-dashboard-tab-content > .tab-pane:not(.active) {
    display: none !important;
}

/* Font Awesome Stripe wordmark is black — invert for dark panels */
.enterprise-make-payment-stripe-logo {
    display: block;
    width: auto;
    height: 1.7rem;
    flex-shrink: 0;
}

[data-theme-mode="dark"] .enterprise-make-payment-stripe-logo {
    filter: brightness(0) invert(1);
}

.enterprise-make-payment-paypal-logo {
    display: block;
    width: auto;
    height: 1.7rem;
    flex-shrink: 0;
}

[data-theme-mode="dark"] .enterprise-make-payment-paypal-logo {
    filter: brightness(0) invert(1);
}

.enterprise-make-payment-paypal-buttons {
    width: 100%;
    max-width: 34rem;
    min-height: 44px;
    transition: opacity 180ms ease-out;
}

.enterprise-make-payment-paypal-buttons iframe {
    max-width: 100%;
}

.enterprise-make-payment-paypal-buttons--loading {
    opacity: 0.45;
    pointer-events: none;
}

.enterprise-make-payment-bank-card {
    padding: 0.85rem 1rem;
}

.enterprise-make-payment-bank-card .account-payments-bank-label {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}

.enterprise-make-payment-bank-card .account-payments-bank-detail-box {
    min-height: 2.25rem;
    margin-bottom: 0;
    padding: 0.35rem 0.55rem 0.35rem 0.7rem;
    border-radius: 0.5rem;
    gap: 0.5rem;
}

.enterprise-make-payment-bank-card .account-payments-bank-detail-value {
    font-size: 0.875rem;
    line-height: 1.25;
}

.enterprise-make-payment-bank-card .account-payments-bank-detail-value.fs-5 {
    font-size: 0.95rem !important;
}

.enterprise-make-payment-bank-card .account-payments-bank-detail-box small {
    font-size: 0.7rem;
    margin-top: 0.1rem !important;
}

.enterprise-make-payment-bank-card .enterprise-make-payment-bank-row {
    margin-bottom: 0.55rem;
}

.enterprise-make-payment-bank-card .enterprise-make-payment-bank-row:last-child {
    margin-bottom: 0;
}

.enterprise-make-payment-bank-ref .font-monospace {
    letter-spacing: 0.03em;
}

.enterprise-make-payment-copy-btn {
    min-height: 2rem;
    min-width: 2rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.75rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.enterprise-make-payment-copy-btn .ri-file-copy-line {
    font-size: 0.85rem;
}

.enterprise-make-payment-paypal-buttons:focus-visible {
    outline: 2px solid var(--ent-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .enterprise-make-payment-paypal-buttons {
        transition: none;
    }
}

.enterprise-billing-page .enterprise-billing-touch-btn {
    min-height: 44px;
}

/* Reseller report: keep Run report on the input baseline, not the helper-text row. */
.enterprise-billing-page .enterprise-billing-reseller-run-spacer {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.enterprise-billing-page .enterprise-billing-reseller-run {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.enterprise-billing-secret-box {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

[data-theme-mode="light"] .enterprise-billing-secret-box {
    background: #f6f7fb;
    border-color: rgba(16, 16, 16, 0.12);
}

.enterprise-billing-secret-value {
    display: block;
    word-break: break-all;
    color: #f6f7fb;
    font-size: 0.875rem;
}

[data-theme-mode="light"] .enterprise-billing-secret-value {
    color: #161616;
}

.enterprise-billing-line-group {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    padding: 0.75rem;
}

[data-theme-mode="light"] .enterprise-billing-line-group {
    background: #f6f7fb;
    border-color: rgba(16, 16, 16, 0.08);
}

.ent-dashboard-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.ent-dashboard-cta,
.ent-dashboard-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.ent-dashboard-cta-secondary {
    border-color: var(--ent-border) !important;
    color: var(--ent-ink) !important;
    background: transparent;
}

.ent-dashboard-cta-secondary:hover,
.ent-dashboard-cta-secondary:focus-visible {
    border-color: rgba(13, 110, 253, 0.45) !important;
    color: var(--ent-accent) !important;
    background: rgba(13, 110, 253, 0.08);
}

/* Segmented ops panels — one bordered container per section, hairline-divided cells */
.ent-ops-panel {
    border: 1px solid var(--ent-border);
    border-radius: 12px;
    background: var(--ent-surface);
    overflow: hidden;
}

.ent-ops-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.65rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--ent-border);
    background: var(--ent-surface-raised);
}

.ent-ops-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--ent-ink);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ent-ops-panel__title > i {
    color: var(--ent-accent);
    font-size: 0.95rem;
}

.ent-ops-panel .alert {
    margin: 0.75rem 0.9rem;
}

.ent-ops-panel__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.25rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--ent-border);
    background: var(--ent-surface-raised);
}

/* Rate notifications: keep Actions in viewport; truncate long deck names */
.enterprise-rate-notifications-page #enterprise-rate-notifications-table {
    width: 100%;
    margin-bottom: 0;
}

.enterprise-rate-notifications-page #enterprise-rate-notifications-table .enterprise-rate-notifications-col-deck {
    max-width: 18rem;
    width: 28%;
}

.enterprise-rate-notifications-page #enterprise-rate-notifications-table .enterprise-rate-notifications-deck-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-rate-notifications-page #enterprise-rate-notifications-table .enterprise-rate-notifications-col-actions {
    width: 1%;
    white-space: nowrap;
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--ent-surface);
    box-shadow: -0.5rem 0 0.5rem -0.35rem rgba(0, 0, 0, 0.45);
}

.enterprise-rate-notifications-page #enterprise-rate-notifications-table thead .enterprise-rate-notifications-col-actions {
    background: var(--ent-surface-raised);
    z-index: 3;
}

.enterprise-rate-notifications-page #enterprise-rate-notifications-table tbody tr:hover .enterprise-rate-notifications-col-actions {
    background: var(--ent-surface-raised);
}

[data-theme-mode="light"] .enterprise-rate-notifications-page #enterprise-rate-notifications-table .enterprise-rate-notifications-col-actions {
    box-shadow: -0.5rem 0 0.5rem -0.35rem rgba(15, 23, 42, 0.18);
}

/* --- Interconnect Details page ------------------------------------------- */

/* Recommended panel subtle accent glow */
.ent-interco-recommended {
    border-color: rgba(13, 110, 253, 0.28);
}

/* "Best Option" pill */
.ent-interco-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.ent-interco-badge--best {
    background: rgba(13, 110, 253, 0.14);
    color: var(--ent-accent);
    border: 1px solid rgba(13, 110, 253, 0.3);
}

[data-theme-mode="light"] .ent-interco-badge--best {
    background: rgba(13, 110, 253, 0.08);
}

.ent-interco-badge--warn {
    background: #dc2626;
    color: #ffffff;
    border: 1px solid #b91c1c;
}

[data-theme-mode="light"] .ent-interco-badge--warn {
    background: #dc2626;
    color: #ffffff;
    border-color: #b91c1c;
}

/* Node grid — two cards side by side */
.ent-interco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.65rem;
}

/* Interco card — shared between hostname + IP rows */
.ent-interco-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface-raised);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ent-interco-card:hover {
    border-color: rgba(13, 110, 253, 0.25);
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.08);
}

/* Highlighted (recommended) variant */
.ent-interco-card--highlight {
    border-color: rgba(13, 110, 253, 0.32);
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.06), transparent 60%),
        var(--ent-surface-raised);
}

/* Icon circle on the left of a card */
.ent-interco-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9px;
    background: rgba(13, 110, 253, 0.12);
    color: var(--ent-accent);
    font-size: 1.15rem;
}

/* Flag container */
.ent-interco-card__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

[data-theme-mode="light"] .ent-interco-card__flag {
    background: rgba(0, 0, 0, 0.04);
}

.ent-interco-card__flag-emoji {
    font-size: 1.35rem;
    line-height: 1;
}

/* Body — stacked label + value */
.ent-interco-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.ent-interco-card__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ent-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ent-interco-card__pin {
    font-size: 0.78rem;
    color: var(--ent-accent);
}

.ent-interco-card__value {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ent-ink);
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Menlo', 'Consolas', monospace;
    letter-spacing: 0.02em;
    word-break: break-all;
}

/* Copy button */
.ent-interco-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    padding: 0.3rem 0.55rem;
    border-radius: 7px;
    border: 1px solid var(--ent-border);
    background: transparent;
    color: var(--ent-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.ent-interco-copy-btn:hover,
.ent-interco-copy-btn:focus-visible {
    color: var(--ent-accent);
    border-color: rgba(13, 110, 253, 0.35);
    background: rgba(13, 110, 253, 0.06);
    outline: none;
}

.ent-interco-copy-btn--ok {
    color: #22c55e !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}

.ent-interco-copy-btn--sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
}

.ent-interco-copy-btn__label {
    font-size: 0.7rem;
}

/* Detail rows (Port / Protocol) */
.ent-interco-detail-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ent-border);
}

.ent-interco-detail-row:last-child {
    border-bottom: 0;
}

.ent-interco-detail-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ent-muted);
    min-width: 5rem;
}

.ent-interco-detail-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ent-ink);
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Menlo', 'Consolas', monospace;
    letter-spacing: 0.02em;
}

/* Codec chips */
.ent-interco-codec-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.25rem 0;
}

.ent-interco-codec-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface);
    color: var(--ent-ink);
    font-size: 0.82rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Menlo', 'Consolas', monospace;
    letter-spacing: 0.02em;
    transition: border-color 0.15s, background 0.15s;
}

.ent-interco-codec-chip:hover {
    border-color: rgba(13, 110, 253, 0.25);
    background: rgba(13, 110, 253, 0.04);
}

/* Responsive — stack cards on narrow viewports */
@media (max-width: 575.98px) {
    .ent-interco-grid {
        grid-template-columns: 1fr;
    }
}

/* Stat line — 4 cells divided by hairlines instead of separate cards */
.ent-statline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ent-statline--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Live CPS / ports capacity meters (hero Live capacity) */
.ent-live-gauges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0;
    align-items: stretch;
}

.ent-live-gauges--hero {
    max-width: none;
    margin-left: 0;
    gap: 0.75rem;
}

.ent-live-gauge {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface-raised);
}

.ent-live-gauge__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.ent-live-gauge__bar {
    width: 100%;
    height: 0.5rem;
}

.ent-live-gauge__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ent-live-gauge__track {
    stroke: rgba(100, 116, 139, 0.35);
    stroke-width: 6;
    stroke-linecap: round;
}

.ent-live-gauge__progress {
    stroke: #14b8a6;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.35s ease;
}

.ent-live-gauge__progress[data-ent-gauge-level="idle"] {
    stroke: rgba(179, 179, 179, 0.45);
}

.ent-live-gauge__progress[data-ent-gauge-level="ok"] {
    stroke: #14b8a6;
}

.ent-live-gauge__progress[data-ent-gauge-level="warn"] {
    stroke: #d97706;
}

.ent-live-gauge__progress[data-ent-gauge-level="high"] {
    stroke: #ef4444;
}

.ent-live-gauge__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ent-muted);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.ent-live-gauge__label .ri-question-line {
    color: var(--ent-muted);
    font-size: 0.95rem;
}

.ent-live-gauge__value {
    color: var(--ent-ink);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.ent-live-gauge[data-ent-gauge-level="ok"] .ent-live-gauge__value {
    color: #14b8a6;
}

.ent-live-gauge[data-ent-gauge-level="warn"] .ent-live-gauge__value {
    color: #d97706;
}

.ent-live-gauge[data-ent-gauge-level="high"] .ent-live-gauge__value {
    color: #ef4444;
}

.ent-live-gauge__meta {
    color: var(--ent-muted);
    font-size: 0.875rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}

[data-theme-mode="light"] .ent-live-gauge__track {
    stroke: rgba(15, 23, 42, 0.14);
}

[data-theme-mode="light"] .ent-live-gauge__progress[data-ent-gauge-level="ok"] {
    stroke: #0f766e;
}

[data-theme-mode="light"] .ent-live-gauge[data-ent-gauge-level="ok"] .ent-live-gauge__value {
    color: #0f766e;
}

[data-theme-mode="light"] .ent-live-gauge[data-ent-gauge-level="warn"] .ent-live-gauge__value {
    color: #b45309;
}

[data-theme-mode="light"] .ent-live-gauge[data-ent-gauge-level="high"] .ent-live-gauge__value {
    color: #b91c1c;
}

@media (max-width: 767.98px) {
    .ent-hero-ops__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ent-hero-ops__status {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .ent-live-gauges,
    .ent-live-gauges--hero {
        grid-template-columns: 1fr;
    }

    .ent-dashboard-page .ent-hero-ops__titles .ent-hero-title,
    .ent-hero-ops__titles .ent-hero-title {
        font-size: 1.28rem;
    }

    .ent-live-gauge__value {
        font-size: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ent-live-gauge__progress {
        transition: none;
    }

    .ent-hero-ops__status .badge.text-bg-success::before {
        animation: none;
    }
}

.ent-stat-cell {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border-left: 1px solid var(--ent-border);
}

.ent-stat-cell:first-child {
    border-left: 0;
}

.ent-stat-cell__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 7px;
    color: #ffffff;
    font-size: 0.9rem;
    background: #0a58ca;
}

.ent-stat-cell__icon--primary { background: #0a58ca; }
.ent-stat-cell__icon--blue { background: #2962ff; }
.ent-stat-cell__icon--violet { background: #7c3aed; }
.ent-stat-cell__icon--orange { background: #ea580c; }
.ent-stat-cell__icon--pink { background: #db2777; }
.ent-stat-cell__icon--amber { background: #a16207; }
.ent-stat-cell__icon--rose { background: #e11d48; }
.ent-stat-cell__icon--green { background: #16a34a; }

.ent-stat-cell__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.ent-stat-cell__label {
    color: var(--ent-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ent-stat-cell__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.45rem;
    min-width: 0;
}

.ent-stat-cell__value {
    color: var(--ent-ink);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ent-stat-cell.is-warning .ent-stat-cell__value {
    color: #f59e0b;
}

.ent-stat-cell.is-success .ent-stat-cell__value {
    color: #22c55e;
}

.ent-stat-cell__note {
    min-width: 0;
    color: var(--ent-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.ent-stat-cell__note strong {
    color: var(--ent-ink);
    font-weight: 600;
}

.ent-stat-cell--skeleton {
    min-height: 3rem;
}

.ent-stat-cell--skeleton .ent-stat-cell__body {
    gap: 0.3rem;
}

/* Inline stats — quiet label/value pairs in panel foot */
.ent-inline-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.ent-inline-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.3rem;
    color: #ffffff;
    font-size: 0.72rem;
    background: #0a58ca;
}

.ent-inline-stat__icon--primary { background: #0a58ca; }
.ent-inline-stat__icon--blue { background: #2962ff; }
.ent-inline-stat__icon--violet { background: #7c3aed; }
.ent-inline-stat__icon--orange { background: #ea580c; }
.ent-inline-stat__icon--pink { background: #db2777; }
.ent-inline-stat__icon--amber { background: #a16207; }
.ent-inline-stat__icon--rose { background: #e11d48; }
.ent-inline-stat__icon--green { background: #16a34a; }

.ent-inline-stat__label {
    color: var(--ent-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.ent-inline-stat__value {
    color: var(--ent-ink);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Direction proportion bar (call activity foot) */
.ent-direction {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.ent-direction-bar {
    display: flex;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(100, 116, 139, 0.28);
}

.ent-direction-seg {
    display: block;
    height: 100%;
}

.ent-direction-seg--in { background: #2962ff; }
.ent-direction-seg--out { background: #7c3aed; }
.ent-direction-seg--net { background: #0a58ca; }

.ent-direction-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
    color: var(--ent-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.ent-direction-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.ent-direction-legend-item strong {
    color: var(--ent-ink);
    font-weight: 800;
}

.ent-direction-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #64748b;
}

.ent-direction-dot--in { background: #2962ff; }
.ent-direction-dot--out { background: #7c3aed; }
.ent-direction-dot--net { background: #0a58ca; }

/* Window toggle — contained segmented control */
.ent-window-toggle {
    padding: 2px;
    border: 1px solid var(--ent-border);
    border-radius: 8px;
    background: var(--ent-surface);
}

[data-theme-mode="dark"] .ent-window-toggle {
    background: #101010;
}

.ent-window-toggle .btn {
    min-height: 28px;
    padding: 0.18rem 0.65rem;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent;
    color: var(--ent-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.ent-window-toggle .btn:hover {
    color: var(--ent-ink);
}

.ent-window-toggle .btn-check:checked + .btn {
    background: rgba(13, 110, 253, 0.16);
    color: #5eead4;
}

[data-theme-mode="light"] .ent-window-toggle .btn-check:checked + .btn {
    color: #0a58ca;
}

/* Dashboard body — main column (fleet health + call activity) beside a
   quick-actions sidebar, so the actions rail no longer sits squeezed
   between the two stat panels. */
.ent-dashboard-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    align-items: start;
    gap: 0.5rem;
}

.ent-dashboard-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.ent-dashboard-side {
    min-width: 0;
}

/* Quick actions — vertical list inside a sidebar panel */
.ent-qa-list {
    display: flex;
    flex-direction: column;
}

.ent-qa-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.35rem 0.75rem;
    border-top: 1px solid var(--ent-border);
    color: var(--ent-ink);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease-out;
}

.ent-qa-item:first-child {
    border-top: 0;
}

.ent-qa-item:hover,
.ent-qa-item:focus-visible {
    background: var(--ent-surface-raised);
    color: var(--ent-ink);
    outline: none;
}

.ent-qa-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.45rem;
    color: #ffffff;
    font-size: 0.9rem;
    background: #0a58ca;
}

.ent-qa-item__icon--manage { background: #0a58ca; }
.ent-qa-item__icon--calls { background: #2962ff; }
.ent-qa-item__icon--cdr { background: #7c3aed; }
.ent-qa-item__icon--reg { background: #ea580c; }
.ent-qa-item__icon--rec { background: #db2777; }
.ent-qa-item__icon--moh { background: #a16207; }

.ent-qa-item__label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ent-qa-item__go {
    flex-shrink: 0;
    color: var(--ent-muted);
    font-size: 1.05rem;
}

.ent-qa-item:hover .ent-qa-item__go,
.ent-qa-item:focus-visible .ent-qa-item__go {
    color: var(--ent-accent);
}

/* Neutral skeleton bars — match raised panel #161616 (no light slate flash). */
.ent-page-container .ent-skeleton-block {
    background-color: #161616 !important;
    border-radius: 0.35rem;
}

.ent-page-container .ent-skeleton-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.45rem;
    background-color: #161616 !important;
}

[data-theme-mode="light"] .ent-page-container .ent-skeleton-block,
[data-theme-mode="light"] .ent-page-container .ent-skeleton-icon {
    background-color: rgba(100, 116, 139, 0.18) !important;
}

/* Shared enterprise fetch loader — visible icon, not a blank dark skeleton. */
.enterprise-loading-wrap,
.enterprise-reports-loading,
.enterprise-dashboard-loading,
.enterprise-panel-loading,
.enterprise-account-loading,
.enterprise-balance-loading,
.enterprise-trunks-loading,
.enterprise-trunk-detail-loading {
    min-height: 8rem;
}

.enterprise-loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 8rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: #e5e7eb;
}

.enterprise-loading-indicator--compact {
    min-height: 4.5rem;
    padding: 1rem 0.75rem;
    gap: 0.5rem;
}

.enterprise-loading-indicator__spinner {
    width: 2rem;
    height: 2rem;
    border-width: 0.2em;
    color: #8ab4f8;
    border-color: rgba(255, 255, 255, 0.18);
    border-right-color: #8ab4f8;
}

.enterprise-loading-indicator--compact .enterprise-loading-indicator__spinner {
    width: 1.35rem;
    height: 1.35rem;
}

.enterprise-loading-indicator__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #e5e7eb;
    line-height: 1.4;
}

[data-theme-mode="light"] .enterprise-loading-indicator {
    color: #1f2937;
}

[data-theme-mode="light"] .enterprise-loading-indicator__spinner {
    color: #0d6efd;
    border-color: rgba(13, 110, 253, 0.2);
    border-right-color: #0d6efd;
}

[data-theme-mode="light"] .enterprise-loading-indicator__label {
    color: #374151;
}

.ent-dashboard-page .ent-hero-pill,
.ent-dashboard-page .ent-status-chip {
    padding: 0.22rem 0.55rem;
    font-size: 0.75rem;
}

.ent-activity-foot {
    column-gap: 2rem;
}

@media (max-width: 1199.98px) {
    .ent-dashboard-hero__actions {
        justify-content: flex-start;
    }

    .ent-dashboard-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .ent-statline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ent-stat-cell:nth-child(odd) {
        border-left: 0;
    }

    .ent-stat-cell:nth-child(n+3) {
        border-top: 1px solid var(--ent-border);
    }
}

@media (max-width: 575.98px) {
    .ent-dashboard-hero {
        padding: 0.85rem;
    }

    .ent-dashboard-cta,
    .ent-dashboard-cta-secondary {
        width: 100%;
    }

    .ent-direction {
        flex-basis: 100%;
    }
}

@media (max-width: 429.98px) {
    .ent-statline {
        grid-template-columns: 1fr;
    }

    .ent-stat-cell {
        border-left: 0;
    }

    .ent-stat-cell:nth-child(n+2) {
        border-top: 1px solid var(--ent-border);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ent-qa-item {
        transition: none;
    }
}

/* Enterprise — promo empty states (feature blue, not Recording Box pink) */
.ent-empty-state-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ent-empty-state-cell {
    border-bottom: 0 !important;
    padding: 1.25rem 1rem !important;
    vertical-align: middle;
}

.ent-empty-state {
    position: relative;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(13, 110, 253, 0.42) 0%,
        rgba(10, 88, 202, 0.16) 48%,
        rgba(255, 255, 255, 0.05) 100%
    );
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    margin: 0.35rem auto;
    max-width: 34rem;
    width: 100%;
}

.ent-empty-state--compact {
    max-width: 28rem;
}

.ent-empty-state-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
    animation: rgAdGlowRotate 8s linear infinite;
}

.ent-empty-state-inner {
    position: relative;
    z-index: 2;
    background: var(--ent-surface, #161616);
    border-radius: 0.95rem;
    padding: 1.45rem 1.35rem 1.35rem;
    text-align: center;
}

.ent-empty-state-inner::after {
    content: '';
    position: absolute;
    bottom: -24px;
    right: -24px;
    width: 96px;
    height: 96px;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ent-empty-state-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    margin: 0 auto 0.9rem;
    background: #0a58ca;
    border: 1px solid #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.28);
}

.ent-empty-state-icon i {
    font-size: 1.35rem;
    line-height: 1;
}

.ent-empty-state-title {
    position: relative;
    z-index: 1;
    color: var(--ent-ink, #f6f7fb);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.4rem;
    text-wrap: balance;
}

.ent-empty-state-message {
    position: relative;
    z-index: 1;
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 26rem;
}

.ent-empty-state-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.ent-empty-state-actions .btn {
    min-height: 2.5rem;
    min-width: 2.75rem;
}

[data-theme-mode="light"] .ent-empty-state-inner {
    background: var(--ent-surface, #ffffff);
}

[data-theme-mode="light"] .ent-empty-state-title {
    color: var(--ent-ink, #0f172a);
}

@media (max-width: 575.98px) {
    .ent-empty-state-cell {
        padding: 0.85rem 0.5rem !important;
    }

    .ent-empty-state-inner {
        padding: 1.15rem 0.9rem;
    }

    .ent-empty-state-icon {
        width: 46px;
        height: 46px;
        border-radius: 10px;
    }

    .ent-empty-state-title {
        font-size: 0.95rem;
    }

    .ent-empty-state-message {
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ent-empty-state-glow {
        animation: none;
    }
}

/* Fixed-position tooltips (enterprise-tooltips.js) — escape .ent-ops-panel overflow:hidden */
.ent-page-container .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.ent-page-container .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
.enterprise-page .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
.enterprise-page .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#enterprise-block-rules-edit-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#enterprise-block-rules-edit-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content,
#enterprise-block-rules-delete-modal .custom-kb-tooltip-wrapper:hover .custom-kb-tooltip-content,
#enterprise-block-rules-delete-modal .custom-kb-tooltip-wrapper:focus-within .custom-kb-tooltip-content {
    visibility: hidden !important;
    opacity: 0 !important;
}

.ent-floating-tooltip {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: calc(100vw - 1.5rem) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1200 !important;
}

/* Absolute tips remounted under .modal-content (enterprise-tooltips.js) — avoid clip.
   Bootstrap .modal-dialog-scrollable sets overflow:hidden on .modal-content. */
#enterprise-block-rules-edit-modal.modal.show .modal-content:has(.ent-floating-tooltip),
#enterprise-block-rules-delete-modal.modal.show .modal-content:has(.ent-floating-tooltip) {
    overflow: visible !important;
}

body.modal-open .ent-floating-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
}

.modal.show .ent-floating-tooltip {
    z-index: 1305 !important;
}

.ent-floating-tooltip[data-ent-tooltip-placement="bottom"]::after {
    top: auto !important;
    bottom: 100% !important;
    border-color: transparent transparent #000000 transparent !important;
}

[data-theme-mode="dark"] .ent-floating-tooltip[data-ent-tooltip-placement="bottom"]::after {
    border-color: transparent transparent #101010 transparent !important;
}

.ent-page-container .custom-kb-tooltip-wrapper.ent-tooltip-active,
.enterprise-page .custom-kb-tooltip-wrapper.ent-tooltip-active,
#enterprise-block-rules-edit-modal .custom-kb-tooltip-wrapper.ent-tooltip-active,
#enterprise-block-rules-delete-modal .custom-kb-tooltip-wrapper.ent-tooltip-active {
    z-index: 1200 !important;
}

/* Hybrid SIP — teal accent action button (primary CTA / save only) */
.ent-btn-accent {
    background: #0a58ca !important;
    border: 1px solid #0d6efd !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background 160ms ease-out, border-color 160ms ease-out !important;
}

.ent-btn-accent:hover:not(:disabled),
.ent-btn-accent:focus:not(:disabled) {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
}

.ent-btn-accent:disabled {
    opacity: 0.55;
    box-shadow: none !important;
}

/* Enterprise daily spend — date range presets */
.enterprise-reports-presets {
    flex-wrap: wrap;
}

.enterprise-reports-preset {
    min-height: 36px;
}

.enterprise-reports-preset.is-active,
.enterprise-reports-preset[aria-pressed="true"] {
    background: rgba(13, 110, 253, 0.18);
    border-color: rgba(13, 110, 253, 0.55);
    color: var(--ent-ink, #f6f7fb);
    font-weight: 600;
}

[data-theme-mode="light"] .enterprise-reports-preset.is-active,
[data-theme-mode="light"] .enterprise-reports-preset[aria-pressed="true"] {
    background: rgba(13, 110, 253, 0.12);
    color: #0b1b33;
}

.enterprise-reports-row--today {
    background: rgba(139, 92, 246, 0.12);
}

[data-theme-mode="light"] .enterprise-reports-row--today {
    background: rgba(139, 92, 246, 0.08);
}

.enterprise-reports-chart-bar--today {
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.45);
}

.ent-placeholder-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    min-height: 12rem;
    border: 1px solid var(--ent-border);
    border-radius: 12px;
    padding: 1.1rem 1.15rem;
    background: var(--ent-surface-raised);
}

.ent-placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: #0a58ca;
    color: #ffffff;
    font-size: 1.25rem;
}

.ent-placeholder-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-placeholder-copy {
    max-width: 42rem;
    color: var(--ent-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ent-placeholder-pill {
    display: inline-flex;
    align-items: center;
    margin-top: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--ent-surface);
    border: 1px solid var(--ent-border);
    color: var(--ent-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Hybrid SIP Trunks — SIP vs Hybrid comparison ad --------------------- */
.ent-compare {
    margin-top: 0.25rem;
}

.ent-compare-intro {
    margin: 0 auto 1.15rem;
    max-width: 42rem;
    text-align: center;
}

.ent-compare-heading {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ent-ink);
    text-wrap: balance;
}

.ent-compare-lead {
    color: var(--ent-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

#hst-compare-modal .ent-compare-modal-dialog {
    width: min(96vw, 1400px);
    max-width: 1400px;
}

.ent-compare-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.ent-compare-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem 1.2rem;
    border-radius: 12px;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface);
    min-height: 100%;
}

.ent-compare-card--standard {
    background: var(--ent-surface);
}

.ent-compare-card--hybrid {
    border-color: rgba(13, 110, 253, 0.35);
    background:
        linear-gradient(160deg, rgba(13, 110, 253, 0.12), transparent 45%),
        var(--ent-surface-raised);
    box-shadow: 0 10px 28px rgba(13, 110, 253, 0.08);
}

.ent-compare-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ent-compare-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    flex-shrink: 0;
    font-size: 1.35rem;
    color: #ffffff;
}

.ent-compare-icon--standard {
    background: #2962ff;
}

.ent-compare-icon--hybrid {
    background: #0a58ca;
}

.ent-compare-card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ent-ink);
    text-wrap: balance;
}

.ent-compare-card-tagline {
    margin-top: 0.2rem;
    color: var(--ent-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.ent-compare-card-blurb {
    margin: 0;
    color: var(--ent-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: none;
}

.ent-compare-pbx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ent-compare-pbx-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(41, 98, 255, 0.28);
    background: rgba(41, 98, 255, 0.1);
    color: #93b4ff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

[data-theme-mode="light"] .ent-compare-pbx-chip {
    color: #1d4ed8;
    background: rgba(41, 98, 255, 0.08);
    border-color: rgba(41, 98, 255, 0.22);
}

.ent-compare-cost {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--ent-border);
}

.ent-compare-cost--standard {
    background: rgba(41, 98, 255, 0.08);
    border-color: rgba(41, 98, 255, 0.22);
}

.ent-compare-cost--hybrid {
    background: rgba(13, 110, 253, 0.1);
    border-color: rgba(13, 110, 253, 0.28);
}

.ent-compare-cost-label {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;
}

.ent-compare-cost--standard .ent-compare-cost-label {
    background: rgba(41, 98, 255, 0.18);
    color: #93b4ff;
}

.ent-compare-cost--hybrid .ent-compare-cost-label {
    background: rgba(13, 110, 253, 0.18);
    color: #5eead4;
}

[data-theme-mode="light"] .ent-compare-cost--standard .ent-compare-cost-label {
    color: #1d4ed8;
}

[data-theme-mode="light"] .ent-compare-cost--hybrid .ent-compare-cost-label {
    color: #0a58ca;
}

.ent-compare-cost-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    min-width: 0;
}

.ent-compare-cost-price {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ent-ink);
}

.ent-compare-cost-detail {
    color: var(--ent-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
}

.ent-compare-cost-plus {
    color: var(--ent-ink);
    font-weight: 800;
}

.ent-compare-cost-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.ent-compare-cost--standard .ent-compare-cost-link {
    color: #93b4ff;
}

.ent-compare-cost--hybrid .ent-compare-cost-link {
    color: #5eead4;
}

.ent-compare-cost-link:hover,
.ent-compare-cost-link:focus-visible {
    text-decoration-thickness: 2px;
}

[data-theme-mode="light"] .ent-compare-cost--standard .ent-compare-cost-link {
    color: #1d4ed8;
}

[data-theme-mode="light"] .ent-compare-cost--hybrid .ent-compare-cost-link {
    color: #0a58ca;
}

.ent-compare-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ent-compare-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--ent-border);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ent-ink);
}

.ent-compare-item > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.05rem;
    border-radius: 999px;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
}

.ent-compare-item--missing {
    background: rgba(148, 163, 184, 0.06);
    color: var(--ent-muted);
}

.ent-compare-item--missing > i {
    background: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

.ent-compare-item--ok {
    background: rgba(148, 163, 184, 0.08);
}

.ent-compare-item--ok > i {
    background: rgba(100, 116, 139, 0.22);
    color: #94a3b8;
}

.ent-compare-card--standard .ent-compare-item--ok {
    background: rgba(41, 98, 255, 0.08);
    border-color: rgba(41, 98, 255, 0.2);
}

.ent-compare-card--standard .ent-compare-item--ok > i {
    background: rgba(41, 98, 255, 0.2);
    color: #93b4ff;
}

[data-theme-mode="light"] .ent-compare-card--standard .ent-compare-item--ok > i {
    color: #2962ff;
}

.ent-compare-item--ok strong {
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-compare-item--included {
    background: rgba(13, 110, 253, 0.08);
    border-color: rgba(13, 110, 253, 0.22);
}

.ent-compare-item--included > i {
    background: #0a58ca;
    color: #ffffff;
}

.ent-compare-item--included strong {
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-compare-charge-note {
    display: block;
    margin-top: 0.15rem;
    color: var(--ent-muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-style: normal;
}

.ent-compare-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.15rem;
}

.ent-compare-vs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface-raised);
    color: var(--ent-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

@media (max-width: 991.98px) {
    .ent-compare-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .ent-compare-vs {
        padding: 0.15rem 0;
    }

    .ent-compare-card-blurb {
        max-width: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .ent-compare-card--hybrid {
        transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
    }

    .ent-compare-card--hybrid:hover {
        border-color: rgba(13, 110, 253, 0.5);
        box-shadow: 0 12px 32px rgba(13, 110, 253, 0.12);
    }
}

[data-theme-mode="light"] .ent-compare-card--hybrid {
    background:
        linear-gradient(160deg, rgba(13, 110, 253, 0.08), transparent 45%),
        var(--ent-surface-raised);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

[data-theme-mode="light"] .ent-compare-item--missing {
    background: rgba(100, 116, 139, 0.06);
}

[data-theme-mode="light"] .ent-compare-item--included {
    background: rgba(10, 88, 202, 0.07);
}

/* --- Hybrid SIP Trunks — SIP vs Hybrid comparison promo card ---------------- */
.ent-promo-compare-section {
    margin-top: 0.35rem;
}

.ent-promo-compare-card {
    background: var(--ent-surface-raised, #161616) !important;
    border: 1px solid rgba(13, 110, 253, 0.25) !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(13, 110, 253, 0.04) !important;
}

.ent-promo-compare-card:hover,
.ent-promo-compare-card:focus-visible {
    border-color: rgba(13, 110, 253, 0.5) !important;
    box-shadow: 0 8px 24px rgba(13, 110, 253, 0.08) !important;
    transform: translateY(-2px);
    outline: none;
}

.ent-promo-compare-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 1rem 1.1rem !important;
}

.ent-promo-compare-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ent-promo-compare-badge-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ent-promo-compare-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ent-promo-compare-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: #0a58ca !important;
    color: #ffffff !important;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(10, 88, 202, 0.3) !important;
}

.ent-promo-compare-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ent-promo-compare-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ent-ink, #f6f7fb);
    text-wrap: balance;
}

.ent-promo-compare-lead {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.85rem;
    line-height: 1.45;
}

.ent-promo-compare-action {
    margin-top: auto;
    padding-top: 1.25rem;
    width: 100%;
}

/* Product comparison promo: own natural height + centred copy (status cards stay full-height). */
.ent-promo-compare-col {
    align-self: start;
}

.ent-promo-compare-card--centered {
    height: auto;
}

.ent-promo-compare-card--centered .ent-promo-compare-body {
    height: auto;
    justify-content: flex-start;
    padding: 0.7rem 0.8rem !important;
}

.ent-promo-compare-card--centered .ent-promo-compare-content {
    flex: 0 0 auto;
    text-align: center;
}

.ent-promo-compare-card--centered .ent-promo-compare-badge-wrap {
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.35rem !important;
}

.ent-promo-compare-card--centered .ent-promo-compare-title-row {
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.35rem !important;
    gap: 0.4rem !important;
}

.ent-promo-compare-card--centered .ent-promo-compare-icon-box,
.ent-promo-compare-card--centered .ent-promo-premium-icon-box {
    width: 2rem !important;
    height: 2rem !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
}

.ent-promo-compare-card--centered .ent-promo-compare-title {
    font-size: 1.05rem !important;
}

.ent-promo-compare-card--centered .ent-promo-compare-lead {
    margin-left: auto;
    margin-right: auto;
    max-width: 36rem;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

.ent-promo-compare-card--centered .ent-promo-compare-action {
    margin-top: 0.4rem !important;
    padding-top: 0.25rem !important;
}

.ent-promo-compare-card--centered .ent-promo-compare-btn,
.ent-promo-compare-card--centered .ent-promo-premium-btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.82rem !important;
    border-radius: 6px !important;
}

.ent-promo-compare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
    border: none !important;
    color: #ffffff !important;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
    width: 100%;
}

.ent-promo-compare-card:hover .ent-promo-compare-btn {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

[data-theme-mode="light"] .ent-promo-compare-card {
    background: #ffffff !important;
    border-color: rgba(10, 88, 202, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme-mode="light"] .ent-promo-compare-card:hover {
    border-color: rgba(10, 88, 202, 0.4) !important;
    box-shadow: 0 8px 24px rgba(10, 88, 202, 0.08) !important;
}

[data-theme-mode="light"] .ent-promo-compare-badge {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme-mode="light"] .ent-promo-compare-icon-box {
    background: #0a58ca !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(10, 88, 202, 0.2) !important;
}

/* --- Hybrid SIP Trunks — Dashboard Status Cards ---------------- */
.ent-dashboard-status-card {
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}

.ent-dashboard-status-card--dnd {
    background: linear-gradient(160deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.01) 50%), var(--ent-surface-raised, #161616) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.05) !important;
}

[data-theme-mode="light"] .ent-dashboard-status-card--dnd {
    background: linear-gradient(160deg, rgba(239, 68, 68, 0.06), transparent 45%), #ffffff !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.ent-dashboard-status-card--presence {
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.01) 50%), var(--ent-surface-raised, #161616) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.05) !important;
}

[data-theme-mode="light"] .ent-dashboard-status-card--presence {
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.06), transparent 45%), #ffffff !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

.ent-dashboard-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    margin: 0 auto 0.55rem;
    font-size: 1.3rem;
    line-height: 1;
}

.ent-dashboard-empty-icon--dnd {
    background: #22c55e !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3) !important;
}

.ent-dashboard-empty-icon--presence {
    background: #64748b !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(100, 116, 139, 0.2) !important;
}

[data-theme-mode="light"] .ent-dashboard-empty-icon--dnd {
    background: #22c55e !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2) !important;
}

[data-theme-mode="light"] .ent-dashboard-empty-icon--presence {
    background: #64748b !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(100, 116, 139, 0.15) !important;
}

.ent-icon-box--dnd {
    background: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3) !important;
}

.ent-btn--dnd {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
}

.ent-btn--dnd:hover,
.ent-btn--dnd:focus-visible {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.ent-icon-box--presence {
    background: #ea580c !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3) !important;
}

.ent-btn--presence {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border: none !important;
}

.ent-btn--presence:hover,
.ent-btn--presence:focus-visible {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.ent-dashboard-status-list {
    margin-top: 0.35rem;
    padding-left: 0;
    list-style: none;
    font-size: 0.8rem;
    max-height: 168px;
    overflow-y: auto;
}

/* Keep the Hybrid dashboard first screen in typical laptop viewports */
@media (min-width: 992px) and (max-height: 960px) {
    .ent-dashboard-page.container-fluid {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    .ent-dashboard-page .ent-dashboard-hero {
        padding: 0.5rem 0.75rem;
    }

    .ent-dashboard-page .ent-dashboard-hero--ops {
        padding: 0.85rem 1rem;
    }

    .ent-dashboard-page .ent-dashboard-hero__lead {
        font-size: 0.74rem;
        line-height: 1.3;
    }

    .ent-dashboard-page .ent-dashboard-hero--ops .ent-dashboard-hero__lead {
        font-size: 0.875rem;
        line-height: 1.45;
    }

    .ent-dashboard-page .ent-stat-cell {
        padding: 0.45rem 0.65rem;
    }

    .ent-dashboard-page .ent-stat-cell__value {
        font-size: 1.1rem;
    }

    .ent-dashboard-page .ent-qa-item {
        min-height: 34px;
        padding: 0.28rem 0.65rem;
    }

    .ent-dashboard-page .ent-promo-compare-section {
        margin-top: 0.2rem;
    }

    .ent-dashboard-page .ent-promo-compare-card--centered .ent-promo-compare-body,
    .ent-dashboard-page .ent-dashboard-status-card .ent-promo-compare-body {
        padding: 0.6rem 0.7rem !important;
    }

    .ent-dashboard-page .ent-dashboard-empty-icon {
        width: 2.35rem;
        height: 2.35rem;
        margin-bottom: 0.4rem;
        font-size: 1.15rem;
    }

    .ent-dashboard-page .ent-dashboard-status-list {
        max-height: 140px;
        font-size: 0.75rem;
    }
}

.ent-dashboard-status-list::-webkit-scrollbar {
    width: 4px;
}

.ent-dashboard-status-list::-webkit-scrollbar-track {
    background: transparent;
}

.ent-dashboard-status-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.ent-dashboard-status-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme-mode="light"] .ent-dashboard-status-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme-mode="light"] .ent-dashboard-status-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

.ent-dashboard-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ent-dashboard-status-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(2px);
}

.ent-dashboard-status-item:last-child {
    margin-bottom: 0 !important;
}

.ent-dashboard-status-item--link {
    padding: 0 !important;
}

.ent-dashboard-status-item__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: inherit;
    border-radius: inherit;
}

.ent-dashboard-status-item__link:hover,
.ent-dashboard-status-item__link:focus-visible {
    text-decoration: none;
    color: inherit;
}

.ent-dashboard-status-card--dnd .ent-dashboard-status-item--link:hover,
.ent-dashboard-status-card--dnd .ent-dashboard-status-item--link:focus-within {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    transform: translateX(2px);
}

.ent-dashboard-status-card--presence .ent-dashboard-status-item--link:hover,
.ent-dashboard-status-card--presence .ent-dashboard-status-item--link:focus-within {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
    transform: translateX(2px);
}

.ent-dashboard-status-card--dnd .ent-dashboard-status-item__link:focus-visible {
    outline: 2px solid rgba(239, 68, 68, 0.55);
    outline-offset: 2px;
}

.ent-dashboard-status-card--presence .ent-dashboard-status-item__link:focus-visible {
    outline: 2px solid rgba(245, 158, 11, 0.6);
    outline-offset: 2px;
}

.ent-dashboard-status-item__name {
    font-weight: 500;
    color: var(--ent-ink, #f6f7fb);
}

.ent-dashboard-status-item__status {
    font-size: 0.75rem;
    flex-shrink: 0;
}

[data-theme-mode="light"] .ent-icon-box--dnd {
    background: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) !important;
}

[data-theme-mode="light"] .ent-icon-box--presence {
    background: #ea580c !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

[data-theme-mode="light"] .ent-dashboard-status-item {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme-mode="light"] .ent-dashboard-status-card--dnd .ent-dashboard-status-item--link:hover,
[data-theme-mode="light"] .ent-dashboard-status-card--dnd .ent-dashboard-status-item--link:focus-within {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
}

[data-theme-mode="light"] .ent-dashboard-status-card--presence .ent-dashboard-status-item--link:hover,
[data-theme-mode="light"] .ent-dashboard-status-card--presence .ent-dashboard-status-item--link:focus-within {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.32) !important;
}

/* --- Hybrid SIP Trunks — Manage list / detail ----------------------------- */
.ent-panel {
    background: var(--ent-surface);
    border: 1px solid var(--ent-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.ent-panel--flush {
    padding: 0;
    overflow: hidden;
}

.ent-panel-header {
    border-bottom-color: var(--ent-border) !important;
}

.ent-panel-title,
.ent-section-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    color: var(--ent-ink);
    font-size: 0.95rem;
    font-weight: 700;
}

.ent-panel-title {
    margin: 0;
}

.ent-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    margin: 0 0 0.85rem;
}

.ent-section-heading .ent-section-title {
    margin: 0;
}

.ent-section-heading__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem 0.65rem;
}

/*
 * Hybrid SIP Trunks — action chip (canonical secondary tool control).
 * Use for section-header actions (Print to PDF, Open library, Refresh tooling, etc.).
 * Do not invent alternate chip styles or fall back to bare Bootstrap btn-secondary for these.
 */
.ent-action-chip {
    --ent-action-chip-bg: var(--ent-surface-raised);
    --ent-action-chip-border: rgba(13, 110, 253, 0.38);
    --ent-action-chip-ink: var(--ent-ink);
    --ent-action-chip-hint: var(--ent-muted);
    --ent-action-chip-icon-bg: #0a58ca;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
    border: 1px solid var(--ent-action-chip-border);
    border-radius: 0.65rem;
    background: var(--ent-action-chip-bg);
    color: var(--ent-action-chip-ink);
    box-shadow: none;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        color 160ms ease;
}

a.ent-action-chip:hover {
    text-decoration: none;
    color: var(--ent-action-chip-ink);
}

.ent-action-chip:hover,
.ent-action-chip:focus-visible {
    --ent-action-chip-bg: rgba(13, 110, 253, 0.1);
    --ent-action-chip-border: rgba(13, 110, 253, 0.55);
    --ent-action-chip-icon-bg: #0d6efd;
    outline: none;
}

.ent-action-chip:focus-visible {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.35);
}

.ent-action-chip:active {
    --ent-action-chip-bg: rgba(13, 110, 253, 0.14);
}

.ent-action-chip:disabled,
.ent-action-chip.is-busy,
.ent-action-chip.is-printing {
    cursor: progress;
    pointer-events: none;
    opacity: 0.88;
}

.ent-action-chip__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--ent-action-chip-icon-bg);
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1;
}

.ent-action-chip__icon .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    color: #ffffff;
}

.ent-action-chip__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    min-width: 0;
    padding-right: 0.15rem;
}

.ent-action-chip__label {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ent-action-chip-ink);
}

.ent-action-chip__hint {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ent-action-chip-hint);
}

/* Compact single-line chip (icon + label only, no hint row). */
.ent-action-chip--compact {
    min-height: 2.5rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    gap: 0.55rem;
}

.ent-action-chip--compact .ent-action-chip__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    font-size: 1.05rem;
}

.ent-action-chip--compact .ent-action-chip__hint {
    display: none;
}

.ent-connection-print-status {
    max-width: 14rem;
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: right;
    color: var(--ent-muted);
}

.ent-connection-print-status:empty {
    display: none;
}

.ent-connection-print-status--loading {
    color: var(--ent-muted);
}

.ent-connection-print-status--success {
    color: #22c55e;
}

.ent-connection-print-status--error {
    color: #ef4444;
}

[data-theme-mode="light"] .ent-action-chip {
    --ent-action-chip-bg: #ffffff;
    --ent-action-chip-border: rgba(10, 88, 202, 0.35);
    --ent-action-chip-ink: #0f172a;
    --ent-action-chip-hint: #64748b;
    --ent-action-chip-icon-bg: #0a58ca;
}

[data-theme-mode="light"] .ent-action-chip:hover,
[data-theme-mode="light"] .ent-action-chip:focus-visible {
    --ent-action-chip-bg: rgba(10, 88, 202, 0.08);
    --ent-action-chip-border: rgba(10, 88, 202, 0.5);
    --ent-action-chip-icon-bg: #0a58ca;
}

@media (max-width: 575.98px) {
    .ent-section-heading__actions {
        width: 100%;
        justify-content: stretch;
    }

    .ent-action-chip,
    .ent-connection-print-btn {
        width: 100%;
    }

    .ent-connection-print-status {
        max-width: none;
        width: 100%;
        text-align: left;
    }
}

.ent-form-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ent-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.ent-form-control,
.ent-input-addon {
    background: var(--ent-surface-raised) !important;
    border-color: var(--ent-border) !important;
    color: var(--ent-ink) !important;
}

.ent-form-select {
    background-color: var(--ent-surface-raised) !important;
    border-color: var(--ent-border) !important;
    color: var(--ent-ink) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2314b8a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    padding-right: 2.5rem !important;
}

[data-theme-mode="light"] .ent-form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%230d9488' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.ent-input-addon {
    color: var(--ent-muted) !important;
}

.ent-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--ent-border);
    color: var(--ent-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.ent-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ent-ink);
    --bs-table-border-color: var(--ent-border);
    color: var(--ent-ink);
}

.ent-table > :not(caption) > * > * {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
}

.ent-table thead th {
    color: var(--ent-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding: 0.35rem 0.5rem;
}

.ent-table tbody td {
    vertical-align: middle;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
}

.ent-table .ent-badge {
    padding: 0.125rem 0.45rem;
    font-size: 0.7rem;
    gap: 0.25rem;
}

.ent-table .ent-row-actions__toggle {
    min-height: 1.65rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    border-radius: 0.375rem;
}

.ent-list-username-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.ent-list-username-copy {
    padding: 0.1rem 0.3rem;
    font-size: 0.72rem;
    line-height: 1;
    min-height: 1.25rem;
}

.ent-list-login-host {
    display: block;
    margin-top: 0.1rem;
}

.ent-list-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem !important;
    line-height: 1.2;
    margin-top: 0 !important;
}

.ent-list-login-badge .badge {
    font-size: 0.65rem;
    padding: 0.12rem 0.35rem;
    font-weight: 600;
}

.ent-list-login-badge__btn {
    border: 0;
    cursor: pointer;
    line-height: inherit;
    vertical-align: baseline;
}

.ent-list-login-badge__btn:hover,
.ent-list-login-badge__btn:focus-visible {
    filter: brightness(1.08);
}

.ent-list-login-badge__btn:focus-visible {
    outline: 2px solid var(--ent-accent, #0d6efd);
    outline-offset: 2px;
}

.ent-row-actions-cell {
    white-space: nowrap;
}

.ent-row-actions {
    display: inline-flex;
    justify-content: flex-end;
    position: static;
}

.ent-row-actions--block {
    display: flex;
    width: 100%;
}

.ent-row-actions--block .ent-row-actions__toggle {
    width: 100%;
    justify-content: center;
}

.ent-row-actions__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    font-weight: 600;
}

.ent-row-actions__toggle::after {
    margin-left: 0.15rem;
}

.ent-row-actions__menu {
    min-width: 13.5rem;
    padding: 0.35rem;
    border: 1px solid var(--ent-border);
    border-radius: 0.6rem;
    background: var(--ent-surface-raised, #1a1a1a);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    z-index: 1080;
}

.ent-row-actions__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.45rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ent-ink);
    white-space: nowrap;
}

.ent-row-actions__item i {
    font-size: 1rem;
    color: var(--ent-muted);
}

.ent-row-actions__item:hover,
.ent-row-actions__item:focus,
.ent-row-actions__item:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ent-ink);
}

.ent-row-actions__item:hover i,
.ent-row-actions__item:focus i,
.ent-row-actions__item:focus-visible i {
    color: var(--ent-accent, #0d6efd);
}

.ent-row-actions__menu .dropdown-divider {
    margin: 0.3rem 0.35rem;
    border-color: var(--ent-border);
    opacity: 1;
}

.ent-trunk-card__actions {
    margin-top: 0.25rem;
}

[data-theme-mode="light"] .ent-row-actions__menu {
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .ent-row-actions__item:hover,
[data-theme-mode="light"] .ent-row-actions__item:focus,
[data-theme-mode="light"] .ent-row-actions__item:focus-visible {
    background: rgba(15, 23, 42, 0.05);
}

.ent-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    word-break: break-word;
}

.ent-wrap {
    overflow-wrap: anywhere;
}

.ent-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--ent-border);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.ent-badge--ok {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
    color: #16a34a;
}

[data-theme-mode="dark"] .ent-badge--ok {
    color: #4ade80;
}

.ent-badge--off {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.28);
    color: #94a3b8;
}

.ent-badge--neutral {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ent-muted);
}

[data-theme-mode="light"] .ent-badge--neutral {
    background: rgba(15, 23, 42, 0.04);
}

.ent-badge--rec {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
    color: #ef4444;
}

.ent-badge--register {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.28);
    color: #8b5cf6;
}

[data-theme-mode="dark"] .ent-badge--register {
    color: #a78bfa;
}

.ent-badge--ip-auth {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.28);
    color: #f59e0b;
}

[data-theme-mode="dark"] .ent-badge--ip-auth {
    color: #fb923c;
}

/* MicroPOP / Hybrid POP name badges — solid bright fill, white label */
.ent-badge--pop {
    border: none;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Flex badge groups — never set display:flex on <td> (breaks table/colspan layout). */
.ent-overview-dl dd:has(.ent-badge--pop),
.ent-pop-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.ent-badge--pop-nsw-crazyphone { background: #2563eb; }
.ent-badge--pop-melbourne-crazyphone { background: #7c3aed; }
.ent-badge--pop-melbourne-master { background: #e11d48; }
.ent-badge--pop-brisbane { background: #059669; }
.ent-badge--pop-perth { background: #d97706; }
.ent-badge--pop-new-zealand { background: #0a58ca; }
.ent-badge--pop-sydney-core { background: #0284c7; }
.ent-badge--pop-uk-london { background: #9333ea; }
.ent-badge--pop-singapore { background: #c026d3; }
.ent-badge--pop-sydney-ipv6 { background: #0891b2; }
.ent-badge--pop-manila { background: #65a30d; }
.ent-badge--pop-los-angeles { background: #ea580c; }
.ent-badge--pop-india { background: #b45309; }

/* Fallback palette for unknown / new MicroPOP hostnames */
.ent-badge--pop-u0 { background: #4f46e5; }
.ent-badge--pop-u1 { background: #db2777; }
.ent-badge--pop-u2 { background: #0a58ca; }
.ent-badge--pop-u3 { background: #b91c1c; }
.ent-badge--pop-u4 { background: #a16207; }
.ent-badge--pop-u5 { background: #1d4ed8; }
.ent-badge--pop-u6 { background: #7e22ce; }
.ent-badge--pop-u7 { background: #15803d; }

[data-theme-mode="light"] .ent-badge--pop {
    color: #ffffff;
}

/* SIP transport badges — UDP / TCP / TLS / WSS */
.ent-badge--transport {
    border: none;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ent-badge--transport-udp { background: #d97706; }
.ent-badge--transport-tcp { background: #2563eb; }
.ent-badge--transport-tls { background: #059669; }
.ent-badge--transport-wss,
.ent-badge--transport-ws { background: #dc2626; }

[data-theme-mode="light"] .ent-badge--transport {
    color: #ffffff;
}

/* Registration-event Phase / Reason badges */
.ent-reg-event-tip {
    cursor: help;
    display: inline-flex;
    vertical-align: middle;
}

.ent-badge--reg-phase,
.ent-badge--reg-reason {
    border: none;
    color: #ffffff;
    font-weight: 700;
}

.ent-badge--reg-phase-challenge { background: #d97706; }
.ent-badge--reg-phase-auth { background: #2563eb; }
.ent-badge--reg-phase-result { background: #7c3aed; }
.ent-badge--reg-phase-contact { background: #059669; }
.ent-badge--reg-phase-block { background: #e11d48; }

.ent-badge--reg-reason-registered { background: #16a34a; }
.ent-badge--reg-reason-renewed { background: #0a58ca; }
.ent-badge--reg-reason-digest-attempt { background: #4f46e5; }
.ent-badge--reg-reason-digest-challenge { background: #ea580c; }
.ent-badge--reg-reason-bad-password { background: #dc2626; }
.ent-badge--reg-reason-deregistered { background: #9333ea; }

.ent-badge--reg-phase-u-unknown,
.ent-badge--reg-reason-u-unknown,
[class*="hst-badge--reg-phase-u-"],
[class*="hst-badge--reg-reason-u-"] {
    background: #475569;
}

[data-theme-mode="light"] .ent-badge--reg-phase,
[data-theme-mode="light"] .ent-badge--reg-reason {
    color: #ffffff;
}

/* Legacy title helper used outside the promo card shell */
.ent-empty-title {
    color: var(--ent-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.ent-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ent-skeleton-row {
    height: 2.75rem;
    border-radius: 8px;
    background: #161616;
    animation: none;
}

html[data-theme-mode="dark"] .ent-skeleton-row {
    background: #161616 !important;
    opacity: 1 !important;
    animation: none !important;
}

[data-theme-mode="light"] .ent-skeleton-row {
    background: rgba(100, 116, 139, 0.18);
    animation: hstSkeletonPulse 1.4s ease-in-out infinite;
}

.ent-trunk-card {
    background: var(--ent-surface-raised);
    border: 1px solid var(--ent-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.ent-trunk-card:last-child {
    margin-bottom: 0;
}

.ent-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-card-dl {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
}

.ent-card-dl > div {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
}

.ent-card-dl dt {
    margin: 0;
    color: var(--ent-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.ent-card-dl dd {
    margin: 0;
    color: var(--ent-ink);
    font-size: 0.875rem;
}

.ent-back-link {
    color: var(--ent-accent) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.8rem;
}

.ent-back-link:hover {
    text-decoration: underline !important;
}

.ent-detail-nav-row {
    font-size: 0.8rem;
}

.ent-detail-nav-row .ent-eyebrow {
    margin-bottom: 0;
    padding-left: 0.6rem;
    border-left: 1px solid var(--ent-border);
}

.ent-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--ent-border);
    font-size: 0.875rem;
}

.ent-alert--error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.28);
    color: var(--ent-ink);
}

.ent-alert--warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.28);
    color: var(--ent-ink);
}

/* Wider Hybrid create modal so NAT Helper promo + CTAs fit without crowding */
.ent-create-modal-dialog.modal-dialog {
    max-width: min(1040px, calc(100vw - 1.5rem));
    width: min(1040px, calc(100vw - 1.5rem));
}

/* Keep NAT Helper / field tooltips above modal chrome and sibling form rows */
#hst-create-modal .modal-content,
#hst-create-modal .modal-body,
#hst-create-modal .modal-body .ent-create-modal {
    overflow: visible !important;
}

#hst-create-modal .modal-body {
    position: relative;
    z-index: 2;
}

#hst-create-modal .modal-footer {
    position: relative;
    z-index: 1;
}

/* Credentials / manage detail NAT Helper promo (not in a Bootstrap modal) */
.ent-detail-panel:has(#hst-edit-nat-helper-wrap),
#hst-section-connection:has(#hst-edit-nat-helper-wrap) {
    overflow: visible !important;
}

@media (max-width: 767.98px) {
    .ent-create-modal-dialog.modal-dialog {
        max-width: calc(100vw - 1rem);
        width: calc(100vw - 1rem);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Hybrid SIP — NAT Helper advertisement promo (inbound / CGNAT stability tip) */
.ent-nat-ad-card,
.ent-nat-ad-card__inner,
.ent-nat-status-card,
.ent-nat-status-card__inner,
#hst-create-nat-helper-wrap,
#hst-edit-nat-helper-wrap {
    overflow: visible !important;
}

.ent-nat-ad-card .custom-kb-tooltip-wrapper:hover,
.ent-nat-ad-card .custom-kb-tooltip-wrapper:focus-within,
.ent-nat-status-card .custom-kb-tooltip-wrapper:hover,
.ent-nat-status-card .custom-kb-tooltip-wrapper:focus-within {
    z-index: 1080 !important;
}

.ent-nat-ad-card .custom-kb-tooltip-content,
.ent-nat-status-card .custom-kb-tooltip-content {
    z-index: 1080 !important;
    position: absolute;
}

.ent-nat-ad-card {
    position: relative;
    border-radius: 1.25rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.42) 0%, rgba(45, 212, 191, 0.14) 48%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
    overflow: visible;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
}

.ent-nat-ad-card:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.58) 0%, rgba(45, 212, 191, 0.22) 48%, rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 0 20px 32px -8px rgba(0, 0, 0, 0.6), 0 0 18px rgba(13, 110, 253, 0.22);
}

.ent-nat-ad-card__glow {
    position: absolute;
    top: -50%;
    right: -30%;
    width: 70%;
    height: 140%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.16) 0%, transparent 68%);
    pointer-events: none;
    z-index: 1;
    /* Orbit once, then fade out and stay gone */
    animation:
        hst-nat-ad-glow-spin 7s linear 1 forwards,
        hst-nat-ad-glow-fade 7s linear 1 forwards;
}

@keyframes hst-nat-ad-glow-spin {
    from { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.06); }
    to { transform: rotate(360deg) scale(1); }
}

@keyframes hst-nat-ad-glow-fade {
    0%,
    75% { opacity: 0.85; }
    100% { opacity: 0; }
}

.ent-nat-ad-card__inner {
    position: relative;
    z-index: 2;
    border-radius: 1.2rem;
    padding: 1.1rem 1.15rem;
    background: var(--ent-surface, #161616);
    border: 1px solid rgba(13, 110, 253, 0.22);
}

.ent-nat-ad-card__icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #5eead4;
    font-size: 1.25rem;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.28) 0%, rgba(10, 88, 202, 0.14) 100%);
    border: 1px solid rgba(13, 110, 253, 0.35);
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.22);
    transition: transform 0.25s ease;
}

.ent-nat-ad-card:hover .ent-nat-ad-card__icon {
    transform: scale(1.06) rotate(4deg);
}

.ent-nat-ad-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.16);
    border: 1px solid rgba(13, 110, 253, 0.32);
    color: #5eead4;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ent-nat-ad-card__title {
    margin: 0;
    color: var(--ent-ink, #f6f7fb);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.ent-nat-ad-card__desc {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.45;
}

.ent-nat-ad-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    border: none !important;
    border-radius: 0.75rem;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ent-nat-ad-card__cta:hover,
.ent-nat-ad-card__cta:focus-visible {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.5);
    outline: none;
}

.ent-nat-ad-card__cta:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ent-nat-learn-more {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: #5eead4;
    font-size: 0.78rem;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: help;
}

.nat-cgnat-term {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    font-weight: 750;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    cursor: help;
}

.nat-cgnat-term:hover,
.nat-cgnat-term:focus-visible {
    color: var(--ent-accent, #0d6efd);
    outline: none;
}

.nat-cgnat-tooltip {
    display: inline;
    vertical-align: baseline;
}

.nat-cgnat-tooltip:hover,
.nat-cgnat-tooltip:focus-within {
    z-index: 1080 !important;
}

.nat-cgnat-tooltip .custom-kb-tooltip-content {
    z-index: 1080 !important;
    width: min(340px, calc(100vw - 2rem));
}

.ent-nat-learn-more:hover,
.ent-nat-learn-more:focus-visible {
    color: #99f6e4;
    outline: none;
}

.ent-nat-status-card {
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.35) 0%, rgba(13, 110, 253, 0.18) 55%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.45);
}

.ent-nat-status-card__inner {
    border-radius: 0.95rem;
    padding: 0.95rem 1.05rem;
    background: var(--ent-surface, #161616);
    border: 1px solid rgba(34, 197, 94, 0.22);
}

.ent-nat-status-card__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.28);
    font-size: 1.15rem;
}

.ent-nat-status-card__title {
    color: var(--ent-ink, #f6f7fb);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ent-nat-status-card__text {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.8125rem;
    line-height: 1.45;
    max-width: 36rem;
}

[data-theme-mode="light"] .ent-nat-ad-card__inner,
[data-theme-mode="light"] .ent-nat-status-card__inner {
    background: #ffffff;
}

[data-theme-mode="light"] .ent-nat-ad-card__eyebrow {
    color: #0a58ca;
    background: rgba(13, 110, 253, 0.12);
    border-color: rgba(10, 88, 202, 0.28);
}

[data-theme-mode="light"] .ent-nat-ad-card__icon,
[data-theme-mode="light"] .ent-nat-learn-more {
    color: #0a58ca;
}

[data-theme-mode="light"] .ent-nat-learn-more:hover,
[data-theme-mode="light"] .ent-nat-learn-more:focus-visible {
    color: #0a58ca;
}

[data-theme-mode="light"] .ent-nat-ad-card__title,
[data-theme-mode="light"] .ent-nat-status-card__title {
    color: #0f172a;
}

[data-theme-mode="light"] .ent-nat-ad-card__desc,
[data-theme-mode="light"] .ent-nat-status-card__text {
    color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    .ent-nat-ad-card,
    .ent-nat-ad-card:hover,
    .ent-nat-ad-card__glow,
    .ent-nat-ad-card__cta {
        transition: none;
        animation: none;
        transform: none;
    }

    .ent-nat-ad-card__glow {
        opacity: 0;
    }
}

.ent-alert--success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.28);
    color: var(--ent-ink);
}

/* Promo-style status notice (non-error feedback, e.g. "No changes to save") */
.ent-alert--info {
    position: relative;
    overflow: hidden;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem 1.05rem;
    border-color: rgba(13, 110, 253, 0.4);
    background:
        linear-gradient(90deg, rgba(13, 110, 253, 0.22) 0%, transparent 42%),
        linear-gradient(135deg, rgba(13, 110, 253, 0.16) 0%, rgba(10, 88, 202, 0.08) 48%, rgba(22, 22, 22, 0.92) 100%);
    color: var(--ent-ink, #f6f7fb);
    box-shadow: 0 6px 22px rgba(13, 110, 253, 0.1);
    animation: hst-alert-info-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ent-alert--info .ent-alert__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: #0a58ca;
    color: #ffffff;
    font-size: 1.2rem;
    box-shadow: 0 0 14px rgba(10, 88, 202, 0.35);
}

.ent-alert--info .ent-alert__copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.ent-alert--info .ent-alert__eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5eead4;
    line-height: 1.2;
}

.ent-alert--info .ent-alert__message {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--ent-ink, #f6f7fb);
    line-height: 1.35;
}

.ent-alert--info .ent-alert__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    background: linear-gradient(90deg, #2dd4bf 0%, #0d6efd 55%, #0a58ca 100%);
    animation: hst-alert-info-progress 4.5s linear forwards;
}

@keyframes hst-alert-info-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hst-alert-info-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ent-alert--info {
        animation: none;
    }

    .ent-alert--info .ent-alert__progress {
        animation: none;
        opacity: 0.55;
        transform: scaleX(1);
    }
}

[data-theme-mode="light"] .ent-alert--info {
    border-color: rgba(10, 88, 202, 0.35);
    background:
        linear-gradient(90deg, rgba(13, 110, 253, 0.16) 0%, transparent 42%),
        linear-gradient(135deg, rgba(240, 253, 250, 0.98) 0%, #ffffff 100%);
    color: #0f172a;
    box-shadow: 0 6px 18px rgba(10, 88, 202, 0.08);
}

[data-theme-mode="light"] .ent-alert--info .ent-alert__eyebrow {
    color: #0a58ca;
}

[data-theme-mode="light"] .ent-alert--info .ent-alert__message {
    color: #0f172a;
}

.ent-edit-field-wrap,
.ent-edit-toggle,
.ent-edit-cf-mode {
    margin-bottom: 0.85rem;
}

.ent-edit-cf-mode {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ent-border);
}

.ent-edit-cf-mode:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ent-edit-cf-target,
.ent-edit-cf-timeout,
.ent-edit-moh-custom {
    margin-top: 0.65rem;
}

/* Shared nested feature cards (Call recording, Call forwarding, Internal dialling) */
.ent-feature-card {
    border-radius: 0.75rem;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface-raised);
    padding: 0.9rem 1rem;
}

.ent-feature-card__heading {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ent-muted);
}

[data-theme-mode="dark"] .ent-feature-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.ent-moh-promo {
    border-radius: 0.75rem;
    border: 1px solid rgba(13, 110, 253, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.14), transparent 55%),
        linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(139, 92, 246, 0.06)),
        var(--ent-surface-raised);
    overflow: hidden;
}

.ent-moh-promo-inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
}

.ent-moh-promo-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 110, 253, 0.16);
    color: var(--ent-accent);
    font-size: 1.25rem;
}

.ent-moh-promo-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-moh-promo-text {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--ent-muted);
    line-height: 1.45;
}

.ent-moh-promo-cta {
    text-decoration: none;
}

.ent-moh-promo-secondary {
    color: var(--ent-muted);
    line-height: 1.45;
}

.ent-moh-promo-secondary-link {
    color: var(--ent-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ent-moh-promo-secondary-link:hover {
    color: var(--ent-ink);
}

.ent-recording-feature {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Call recording promo — red accent (distinct from teal Hybrid / blue forwarding) */
.ent-recording-feature__promo {
    margin: 0 0 1rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(220, 53, 69, 0.34);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(239, 68, 68, 0.16), transparent 55%),
        rgba(220, 53, 69, 0.07);
}

.ent-recording-feature__api-box {
    border-color: rgba(220, 53, 69, 0.28);
    background: rgba(16, 16, 16, 0.4);
}

[data-theme-mode="light"] .ent-recording-feature__api-box {
    background: #ffffff;
    border-color: rgba(220, 53, 69, 0.22);
}

.ent-recording-feature__promo-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #b02a37;
    color: #ffffff;
    font-size: 1.15rem;
}

.ent-recording-feature__promo-body {
    flex: 1;
    min-width: 0;
}

.ent-recording-feature__promo-title {
    margin: 0 0 0.3rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ent-ink);
    line-height: 1.3;
    text-wrap: balance;
}

.ent-recording-feature__promo-text {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    color: var(--ent-ink);
    line-height: 1.45;
}

.ent-recording-feature__benefits {
    display: grid;
    gap: 0.3rem;
}

.ent-recording-feature__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ent-muted);
    line-height: 1.35;
}

.ent-recording-feature__benefits li i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #ef4444;
    font-size: 0.9rem;
}

.ent-recording-feature__toggle-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.ent-recording-feature__skip-internal {
    margin: 0 0 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--ent-border);
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="light"] .ent-recording-feature__skip-internal {
    background: rgba(0, 0, 0, 0.02);
}

.ent-recording-feature__toggle-row--nested {
    margin-bottom: 0.4rem;
}

.ent-recording-feature__skip-help,
.ent-recording-feature__skip-gate {
    line-height: 1.4;
}

.ent-recording-feature__skip-internal .form-check-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ent-recording-feature__toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ent-ink);
    cursor: pointer;
    flex: 0 1 auto;
    min-width: 0;
}

.ent-recording-feature__toggle-text {
    flex-shrink: 0;
}

.ent-recording-feature__switch {
    flex-shrink: 0;
    padding-left: 2.5em;
    min-height: 1.5rem;
}

.ent-recording-feature__actions {
    margin-bottom: 0.6rem;
}

.ent-recording-feature__action-group {
    display: inline-flex;
    flex-wrap: wrap;
    border-radius: 0.5rem;
    border: 1px solid var(--ent-border);
    overflow: hidden;
    background: var(--ent-surface);
}

.ent-recording-feature__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ent-ink);
    background: transparent;
    border: none;
    border-right: 1px solid var(--ent-border);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ent-recording-feature__action-btn:last-child {
    border-right: none;
}

.ent-recording-feature__action-btn:hover,
.ent-recording-feature__action-btn:focus-visible {
    background: rgba(13, 110, 253, 0.1);
    color: var(--ent-accent);
    outline: none;
}

.ent-recording-feature__action-btn i {
    font-size: 1rem;
    color: var(--ent-accent);
}

.ent-recording-feature__hint {
    font-size: 0.8125rem;
    color: var(--ent-muted);
    line-height: 1.4;
}

.ent-recording-feature__hint-link {
    color: var(--ent-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ent-recording-feature__hint-link:hover {
    color: var(--ent-ink);
}

[data-theme-mode="dark"] .ent-recording-feature__action-group {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="dark"] .ent-recording-feature__action-btn {
    border-right-color: rgba(255, 255, 255, 0.1);
}

[data-theme-mode="dark"] .ent-recording-feature__action-btn:hover,
[data-theme-mode="dark"] .ent-recording-feature__action-btn:focus-visible {
    background: rgba(13, 110, 253, 0.14);
}

/* Call forwarding feature card — blue accent (keeps teal for other Hybrid cards) */
/* Call forwarding feature card — premium modern style */
.ent-call-forwarding-feature__promo {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: radial-gradient(100% 100% at 100% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 60%), rgba(255, 255, 255, 0.015);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme-mode="light"] .ent-call-forwarding-feature__promo {
    border-color: rgba(37, 99, 235, 0.15);
    background: radial-gradient(100% 100% at 100% 0%, rgba(37, 99, 235, 0.05) 0%, transparent 60%), #f8fafc;
    box-shadow: none;
}

.ent-call-forwarding-feature__promo-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.15);
    color: #3b82f6;
    font-size: 1.25rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

[data-theme-mode="light"] .ent-call-forwarding-feature__promo-icon {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.ent-call-forwarding-feature__promo-body {
    flex: 1;
    min-width: 0;
}

.ent-call-forwarding-feature__promo-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ent-ink);
    line-height: 1.3;
}

.ent-call-forwarding-feature__promo-text {
    margin: 0 0 0.75rem;
    font-size: 0.825rem;
    color: var(--ent-muted);
    line-height: 1.45;
}

.ent-call-forwarding-feature__benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.ent-call-forwarding-feature__benefits li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.775rem;
    font-weight: 500;
    color: var(--ent-muted);
}

.ent-call-forwarding-feature__benefits li i {
    flex-shrink: 0;
    color: #3b82f6;
    font-size: 0.95rem;
}

/* Call forwarding mode cards */
.ent-cf-mode-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 0.85rem;
    transition: all 0.2s ease-in-out;
}

.ent-cf-mode-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.025);
}

.ent-cf-mode-card--active {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(13, 110, 253, 0.28);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .ent-cf-mode-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme-mode="light"] .ent-cf-mode-card:hover {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.14);
}

[data-theme-mode="light"] .ent-cf-mode-card--active {
    background: #f8fafc;
    border-color: rgba(10, 88, 202, 0.35);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.ent-cf-mode-card__icon-wrap {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--ent-muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

[data-theme-mode="light"] .ent-cf-mode-card__icon-wrap {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.08);
}

.ent-cf-mode-card--active .ent-cf-mode-card__icon-wrap {
    background: rgba(13, 110, 253, 0.12);
    color: var(--ent-accent, #0d6efd);
    border-color: rgba(13, 110, 253, 0.25);
}

[data-theme-mode="light"] .ent-cf-mode-card--active .ent-cf-mode-card__icon-wrap {
    background: rgba(10, 88, 202, 0.1);
    color: #0a58ca;
    border-color: rgba(10, 88, 202, 0.2);
}

.ent-cf-mode-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ent-ink);
}

.ent-cf-mode-card__desc {
    font-size: 0.8rem;
    color: var(--ent-muted);
    line-height: 1.45;
    margin-top: 0.2rem;
}

.ent-cf-mode-card__nested {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ent-cf-mode-card--active .ent-cf-mode-card__nested {
    display: block;
}

[data-theme-mode="light"] .ent-cf-mode-card__nested {
    border-top-color: rgba(15, 23, 42, 0.06);
}

/* Custom switch overrides to replace ugly red/green defaults in this card */
.ent-cf-mode-card__switch .form-check-input,
[data-theme-mode="dark"] .ent-cf-mode-card__switch .form-check-input {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    cursor: pointer;
    width: 2.5rem;
    height: 1.3rem;
}

.ent-cf-mode-card__switch .form-check-input:checked,
[data-theme-mode="dark"] .ent-cf-mode-card__switch .form-check-input:checked {
    background-color: var(--ent-accent, #0d6efd) !important;
    border-color: var(--ent-accent, #0d6efd) !important;
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.35) !important;
}

[data-theme-mode="light"] .ent-cf-mode-card__switch .form-check-input {
    background-color: rgba(15, 23, 42, 0.12) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

[data-theme-mode="light"] .ent-cf-mode-card__switch .form-check-input:checked {
    background-color: #0a58ca !important;
    border-color: #0a58ca !important;
    box-shadow: 0 0 8px rgba(10, 88, 202, 0.25) !important;
}

/* Nested picks styling */
.ent-call-forwarding-feature .ent-edit-cf-timeout {
    margin-top: 0.75rem;
}

.ent-edit-cf-dest__custom {
    margin-top: 0.55rem;
}

.ent-edit-cf-dest__custom.d-none,
.ent-edit-cf-dest__custom[hidden] {
    display: none !important;
}

/* CF destination Choices panel must open below and not be clipped by feature cards. */
.ent-edit-cf-dest,
.ent-edit-cf-dest .ent-edit-field-wrap,
.ent-call-forwarding-feature .ent-edit-cf-target,
.ent-call-forwarding-feature__card,
.ent-call-forwarding-feature,
.ent-cf-internal-stack {
    overflow: visible;
}

.ent-edit-cf-dest .choices {
    margin-bottom: 0;
}

/* Fixed overlay (set in JS) sits above page chrome / following CF modes. */
.ent-edit-cf-dest .choices__list--dropdown[data-hst-cf-dropdown-overlay="true"],
.ent-edit-cf-dest .choices__list[aria-expanded][data-hst-cf-dropdown-overlay="true"] {
    z-index: 4000 !important;
    overflow-y: auto;
}

/* Number Manager note card */
.ent-call-forwarding-feature__nm-note {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.01);
}

[data-theme-mode="light"] .ent-call-forwarding-feature__nm-note {
    border-color: rgba(15, 23, 42, 0.08);
    background: #f8fafc;
}

.ent-call-forwarding-feature__nm-note-icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    color: var(--ent-muted);
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme-mode="light"] .ent-call-forwarding-feature__nm-note-icon {
    background: #e2e8f0;
    border-color: rgba(15, 23, 42, 0.06);
    color: #64748b;
}

.ent-call-forwarding-feature__nm-note-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ent-call-forwarding-feature__nm-note-text {
    font-size: 0.8rem;
    color: var(--ent-muted);
    line-height: 1.45;
    margin-bottom: 0;
}

.ent-call-forwarding-feature__nm-note-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    color: var(--ent-ink);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: all 0.2s ease;
}

[data-theme-mode="light"] .ent-call-forwarding-feature__nm-note-link {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
    color: #0f172a;
}

.ent-call-forwarding-feature__nm-note-link:hover,
.ent-call-forwarding-feature__nm-note-link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--ent-ink);
    outline: none;
    text-decoration: none;
}

[data-theme-mode="light"] .ent-call-forwarding-feature__nm-note-link:hover,
[data-theme-mode="light"] .ent-call-forwarding-feature__nm-note-link:focus-visible {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

.ent-call-forwarding-feature__nm-note-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.35);
}

/* CrazyPhone App QR feature card */
.ent-crazyphone-promo-card {
    border-radius: 1rem;
    border: 1px solid rgba(139, 92, 246, 0.18);
    background: 
        radial-gradient(100% 100% at 0% 0%, rgba(139, 92, 246, 0.08) 0%, rgba(219, 39, 119, 0.03) 60%, transparent 100%),
        var(--ent-surface-raised);
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

[data-theme-mode="light"] .ent-crazyphone-promo-card {
    background: 
        radial-gradient(100% 100% at 0% 0%, rgba(139, 92, 246, 0.04) 0%, rgba(219, 39, 119, 0.01) 60%, transparent 100%),
        var(--ent-surface-raised);
    border-color: rgba(139, 92, 246, 0.15);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.04);
}

.ent-crazyphone-promo-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 2.5rem;
    align-items: center;
}

@media (max-width: 991px) {
    .ent-crazyphone-promo-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.ent-crazyphone-promo-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ent-crazyphone-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.28);
    color: #c4b5fd;
    font-size: 0.725rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

[data-theme-mode="light"] .ent-crazyphone-badge {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
    color: #7c3aed;
}

.ent-crazyphone-promo-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--ent-ink);
    line-height: 1.25;
    margin: 0 0 0.75rem;
    letter-spacing: -0.015em;
}

.ent-crazyphone-promo-desc {
    font-size: 0.875rem;
    color: var(--ent-muted);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.ent-crazyphone-promo-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

@media (max-width: 575px) {
    .ent-crazyphone-promo-benefits {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.ent-crazyphone-promo-benefits li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.ent-benefit-icon-wrapper {
    flex-shrink: 0;
    color: #22c55e;
    font-size: 1.15rem;
    line-height: 1;
    margin-top: 0.15rem;
}

.ent-benefit-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ent-benefit-info strong {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--ent-ink);
}

.ent-benefit-info span {
    font-size: 0.775rem;
    color: var(--ent-muted);
    line-height: 1.35;
}

.ent-crazyphone-downloads-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border-radius: 0.5rem;
    background: #8b5cf6;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
    align-self: flex-start;
}

.ent-crazyphone-downloads-trigger-btn:hover {
    background: #7c3aed;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
}

.ent-crazyphone-downloads-trigger-btn:active {
    transform: translateY(0);
}

.ent-crazyphone-promo-qr-zone {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ent-crazyphone-qr-card-container {
    width: 100%;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.85rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

[data-theme-mode="light"] .ent-crazyphone-qr-card-container {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: none;
}

/* Inside QR card */
.ent-crazyphone-qr-placeholder-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
}

.ent-crazyphone-qr-placeholder-icon {
    font-size: 2.25rem;
    color: var(--ent-muted);
    margin-bottom: 0.75rem;
    line-height: 1;
}

.ent-crazyphone-qr-placeholder-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ent-ink);
    margin-bottom: 0.5rem;
}

.ent-crazyphone-qr-placeholder-card p {
    font-size: 0.775rem;
    color: var(--ent-muted);
    line-height: 1.45;
    margin-bottom: 1.25rem;
}

.ent-crazyphone-jump-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.ent-crazyphone-qr-feature__hint {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    color: var(--ent-muted);
    line-height: 1.45;
}

.ent-crazyphone-qr-feature__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.ent-crazyphone-qr-feature__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.85rem;
    border-radius: 0.65rem;
    border: 1px solid var(--ent-border);
    background: rgba(255, 255, 255, 0.03);
}

.ent-crazyphone-qr-feature__image {
    width: 220px;
    height: 220px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #ffffff;
    padding: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .ent-crazyphone-qr-feature__visual {
    background: rgba(15, 23, 42, 0.03);
}

.ent-crazyphone-qr-feature__promo--clickable {
    display: block;
}

/* CrazyPhone downloads modal (manage page) */
.ent-crazyphone-downloads-hero {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin: 0 0 1.1rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(139, 92, 246, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(139, 92, 246, 0.14), transparent 55%),
        rgba(139, 92, 246, 0.06);
}

.ent-crazyphone-downloads-hero__icon {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.16);
    color: #a78bfa;
    font-size: 1.2rem;
}

.ent-crazyphone-downloads-hero__title {
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--ent-ink);
    line-height: 1.35;
}

.ent-crazyphone-downloads-hero__text {
    font-size: 0.8125rem;
    color: var(--ent-muted);
    line-height: 1.5;
}

.ent-crazyphone-downloads-section-title {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ent-ink);
    text-transform: none;
}

.ent-crazyphone-downloads-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

@media (min-width: 480px) {
    .ent-crazyphone-downloads-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ent-crazyphone-download-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--ent-border);
    border-radius: 0.65rem;
    background: var(--ent-surface-raised);
    color: var(--ent-ink);
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    min-height: 44px;
}

.ent-crazyphone-download-card:hover,
.ent-crazyphone-download-card:focus-visible {
    border-color: rgba(139, 92, 246, 0.45);
    color: var(--ent-ink);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
    outline: none;
}

.ent-crazyphone-download-card__icon {
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.ent-crazyphone-download-card__icon.is-android {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

.ent-crazyphone-download-card__icon.is-apple {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

[data-theme-mode="light"] .ent-crazyphone-download-card__icon.is-apple {
    background: rgba(15, 23, 42, 0.08);
    color: #334155;
}

.ent-crazyphone-download-card__info {
    flex: 1;
    min-width: 0;
}

.ent-crazyphone-download-card__info strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.ent-crazyphone-download-card__info span {
    display: block;
    font-size: 0.75rem;
    color: var(--ent-muted);
    font-weight: 600;
}

.ent-crazyphone-download-card__action {
    color: var(--ent-muted);
    font-size: 1.1rem;
    transition: color 160ms ease;
}

.ent-crazyphone-download-card:hover .ent-crazyphone-download-card__action,
.ent-crazyphone-download-card:focus-visible .ent-crazyphone-download-card__action {
    color: var(--ent-ink);
}

.ent-crazyphone-downloads-note {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
    color: var(--ent-ink);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.ent-crazyphone-downloads-note > i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #fbbf24;
    font-size: 1.05rem;
}

.ent-crazyphone-downloads-steps {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.8125rem;
    color: var(--ent-ink);
    line-height: 1.55;
}

.ent-crazyphone-downloads-steps li + li {
    margin-top: 0.45rem;
}

.portal-modern-modal.ent-hybrid-modal.ent-crazyphone-downloads-modal .modal-body {
    padding-top: 1.1rem;
    padding-bottom: 1rem;
}

/* CrazyPhone QR list modal */
.ent-crazyphone-qr-modal__hero {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(13, 110, 253, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.12), transparent 55%),
        rgba(13, 110, 253, 0.06);
}

.ent-crazyphone-qr-modal__hero-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.5rem;
    background: rgba(13, 110, 253, 0.16);
    color: var(--ent-accent, #0d6efd);
    font-size: 1.15rem;
}

.ent-crazyphone-qr-modal__hero-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-crazyphone-qr-modal__hero-text {
    font-size: 0.8125rem;
    color: var(--ent-muted);
    line-height: 1.45;
}

.ent-crazyphone-qr-modal__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    border-radius: 0.65rem;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface);
}

.ent-crazyphone-qr-modal__image {
    width: 220px;
    height: 220px;
    max-width: 100%;
    border-radius: 0.5rem;
    background: #ffffff;
}

.ent-crazyphone-qr-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.portal-modern-modal.ent-hybrid-modal.ent-crazyphone-qr-modal .modal-body {
    padding-top: 1.1rem;
    padding-bottom: 1rem;
}

[data-theme-mode="light"] .ent-crazyphone-qr-modal__visual {
    background: #f8fafc;
}

/* URI inbound promo (Extension & URI) — matches hst-moh-promo language, teal only */
.ent-uri-promo {
    border-radius: 0.75rem;
    border: 1px solid rgba(13, 110, 253, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.14), transparent 55%),
        linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.03)),
        var(--ent-surface-raised);
    overflow: hidden;
}

[data-theme-mode="light"] .ent-uri-promo {
    border-color: rgba(10, 88, 202, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.12), transparent 55%),
        linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(255, 255, 255, 0.92)),
        #f4f7f7;
}

.ent-uri-promo-inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
}

.ent-uri-promo-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ent-accent-deep, #0a58ca);
    color: #ffffff;
    font-size: 1.25rem;
}

.ent-uri-promo-body {
    flex: 1;
    min-width: 0;
}

.ent-uri-promo-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.ent-uri-promo-copy {
    flex: 1 1 14rem;
    min-width: 0;
}

.ent-uri-promo-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ent-ink);
    line-height: 1.3;
    text-wrap: balance;
}

.ent-uri-promo-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ent-muted);
    line-height: 1.45;
}

.ent-uri-promo-toggle {
    flex: 0 1 auto;
    margin: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(13, 110, 253, 0.22);
    background: rgba(16, 16, 16, 0.35);
}

[data-theme-mode="light"] .ent-uri-promo-toggle {
    border-color: rgba(10, 88, 202, 0.22);
    background: rgba(255, 255, 255, 0.75);
}

.ent-uri-promo-toggle .form-check-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ent-ink);
}

.ent-uri-promo-address {
    margin-top: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(16, 16, 16, 0.45);
}

[data-theme-mode="light"] .ent-uri-promo-address {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.85);
}

.ent-uri-promo-address-label {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ent-muted);
}

.ent-uri-promo-address-row {
    align-items: stretch;
}

.ent-edit-allow-uri .ent-uri-promo-address-input,
.ent-edit-allow-uri .ent-credential-row .ent-form-control,
.ent-edit-webrtc .ent-uri-promo-address-input,
.ent-edit-webrtc .ent-credential-row .ent-form-control {
    field-sizing: normal;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.ent-uri-promo-address-input {
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-color: rgba(13, 110, 253, 0.35) !important;
    background: rgba(10, 10, 10, 0.55) !important;
}

[data-theme-mode="light"] .ent-uri-promo-address-input {
    border-color: rgba(10, 88, 202, 0.35) !important;
    background: #ffffff !important;
    color: #0f172a;
}

.ent-uri-promo-hint {
    margin-top: 0.55rem;
    color: var(--ent-muted);
    line-height: 1.45;
}

.ent-uri-tip {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(16, 16, 16, 0.35);
}

[data-theme-mode="light"] .ent-uri-tip {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.72);
}

.ent-uri-tip__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.45rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #5eead4;
}

.ent-uri-tip__label i {
    font-size: 0.9rem;
}

[data-theme-mode="light"] .ent-uri-tip__label {
    color: #0a58ca;
}

.ent-uri-tip__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.ent-uri-tip__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
}

.ent-uri-tip__code {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 1.45rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: rgba(13, 110, 253, 0.14);
    color: #5eead4;
    font-size: 0.8125rem;
    font-weight: 700;
}

[data-theme-mode="light"] .ent-uri-tip__code {
    background: rgba(10, 88, 202, 0.12);
    color: #0a58ca;
}

.ent-uri-tip__title {
    margin: 0;
    flex: 1 1 10rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ent-ink, #f6f7fb);
}

[data-theme-mode="light"] .ent-uri-tip__title {
    color: #0f172a;
}

.ent-uri-tip__text {
    color: var(--ent-muted, #b3b3b3);
    line-height: 1.45;
}

.ent-uri-tip__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.4rem;
    color: var(--ent-muted, #b3b3b3);
    line-height: 1.4;
}

.ent-uri-tip__meta code {
    color: var(--ent-ink, #f6f7fb);
}

[data-theme-mode="light"] .ent-uri-tip__meta code {
    color: #0f172a;
}

.ent-uri-tip__meta-sep {
    opacity: 0.55;
}

.ent-uri-tip__link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.1rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5eead4;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    min-height: 44px;
    cursor: pointer;
}

.ent-uri-tip__link:hover,
.ent-uri-tip__link:focus-visible {
    color: #99f6e4;
    text-decoration: underline;
    outline: none;
}

[data-theme-mode="light"] .ent-uri-tip__link {
    color: #0a58ca;
}

[data-theme-mode="light"] .ent-uri-tip__link:hover,
[data-theme-mode="light"] .ent-uri-tip__link:focus-visible {
    color: #115e59;
}

@media (max-width: 575.98px) {
    .ent-uri-promo-inner {
        flex-direction: column;
    }

    .ent-uri-promo-header {
        flex-direction: column;
    }

    .ent-uri-promo-toggle {
        width: 100%;
    }
}

/* Internal dialling / Extension & URI feature card */
.ent-internal-dialling-feature__promo {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(13, 110, 253, 0.28);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.12), transparent 55%),
        rgba(13, 110, 253, 0.06);
}

.ent-internal-dialling-feature__promo-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 110, 253, 0.16);
    color: var(--ent-accent);
    font-size: 1.05rem;
}

.ent-internal-dialling-feature__promo-text {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ent-ink);
    line-height: 1.45;
}

.ent-internal-dialling-feature__fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.85rem;
}

.ent-internal-dialling-feature__field {
    flex: 0 1 20rem;
    width: 100%;
    max-width: 22rem;
}

.ent-internal-dialling-feature__fields .ent-edit-field-wrap {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .ent-internal-dialling-feature__field {
        flex: 1 1 100%;
        max-width: none;
    }
}

.ent-moh-page {
    max-width: 100%;
}

.ent-moh-upload-row .ent-moh-upload-btn {
    min-height: calc(1.5em + 0.75rem + 2px);
}

.ent-moh-upload-hint {
    max-width: 42rem;
}

.ent-moh-empty-state,
.ent-rec-empty-state {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.ent-list-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    margin: 0 auto;
    max-width: 34rem;
}

.ent-list-empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    margin: 0 auto 0.15rem;
    background: rgba(13, 110, 253, 0.14);
    border: 1px solid rgba(13, 110, 253, 0.28);
    color: var(--ent-accent);
    font-size: 1.35rem;
    line-height: 1;
}

.ent-list-empty-state-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ent-ink);
    letter-spacing: -0.01em;
}

.ent-list-empty-state-message {
    margin: 0 auto;
    max-width: 28rem;
    color: var(--ent-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Empty state — advertisement-style (Hybrid SIP Trunks) */
.ent-ad-empty-state {
    position: relative;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.28) 0%, rgba(45, 212, 191, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    margin: 0.35rem auto;
    max-width: 34rem;
    text-align: center;
}

.ent-ad-empty-state-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
    animation: rgAdGlowRotate 8s linear infinite;
}

.ent-ad-empty-state-inner {
    position: relative;
    z-index: 2;
    background: var(--ent-surface-raised, #161616);
    border-radius: 0.95rem;
    padding: 1.35rem 1.25rem;
    text-align: center;
}

.ent-ad-empty-state-inner::after {
    content: '';
    position: absolute;
    bottom: -24px;
    right: -24px;
    width: 96px;
    height: 96px;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ent-ad-empty-state-icon {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 0.85rem;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.22) 0%, rgba(45, 212, 191, 0.08) 100%);
    border: 1px solid rgba(13, 110, 253, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ent-accent, #0d6efd);
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.18);
}

.ent-ad-empty-state-icon i {
    font-size: 1.35rem;
    line-height: 1;
}

.ent-ad-empty-state-title {
    position: relative;
    z-index: 2;
    color: var(--ent-ink, #f6f7fb);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
    padding: 0 1.25rem;
}

.ent-ad-empty-state-message {
    position: relative;
    z-index: 2;
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 26rem;
}

.ent-ad-empty-state-actions {
    position: relative;
    z-index: 2;
    margin-top: 1.15rem;
}

[data-theme-mode="light"] .ent-ad-empty-state-inner {
    background: #ffffff;
}

[data-theme-mode="light"] .ent-ad-empty-state-title {
    color: #111827;
}

.ent-login-permissions-toggle-all {
    min-height: auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.15s ease;
    text-transform: uppercase;
}

.ent-login-permissions-toggle-all:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

[data-theme-mode="dark"] .ent-login-permissions-toggle-all {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.55);
}

[data-theme-mode="dark"] .ent-login-permissions-toggle-all:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

/* Create-login modal — compact no-trunks promo (reuses hst-calls-live-promo-empty-*) */
.ent-logins-no-trunks-promo__hero {
    padding: 1.35rem 1.15rem;
}

.ent-logins-no-trunks-promo__title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.ent-logins-no-trunks-promo .ent-calls-live-promo-empty-badge {
    margin-bottom: 0.75rem;
}

.ent-logins-no-trunks-promo .ent-calls-live-promo-empty-subtitle {
    font-size: 0.875rem;
    max-width: 28rem;
}

.ent-moh-modal {
    background: var(--ent-surface);
    border: 1px solid var(--ent-border);
    color: var(--ent-ink);
}

.ent-moh-player-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    padding: 0.75rem 1rem;
    background: var(--ent-surface-raised);
    border-top: 1px solid var(--ent-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}

.ent-moh-player-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.ent-moh-player-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ent-ink);
    min-width: 8rem;
}

.ent-moh-player-audio {
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 100%;
    height: 2.25rem;
}

.ent-moh-player-close {
    color: var(--ent-muted);
    padding: 0.25rem;
    line-height: 1;
}

.ent-moh-player-close:hover {
    color: var(--ent-ink);
}

@media (max-width: 575.98px) {
    .ent-moh-promo-inner {
        flex-direction: column;
    }
}

.ent-field-error {
    margin-top: 0.35rem;
    color: #ef4444;
    font-size: 0.8125rem;
}

[data-theme-mode="dark"] .ent-field-error {
    color: #f87171;
}

.ent-edit-field.is-invalid,
.ent-edit-field-wrap .is-invalid {
    border-color: rgba(239, 68, 68, 0.55) !important;
}

.ent-pw-requirements {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ent-border);
    border-radius: 0.5rem;
    background: var(--ent-surface-raised);
}

.ent-pw-requirements-title {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ent-muted);
}

.ent-pw-requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ent-pw-req-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--ent-muted);
    transition: color 0.15s ease;
}

.ent-pw-req-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
    line-height: 1;
}

.ent-pw-req-item--pending .ent-pw-req-icon {
    color: var(--ent-muted);
    opacity: 0.65;
}

.ent-pw-req-item--pass {
    color: var(--ent-ink);
}

.ent-pw-req-item--pass .ent-pw-req-icon {
    color: var(--ent-accent);
}

.ent-pw-req-item--fail {
    color: #f87171;
}

.ent-pw-req-item--fail .ent-pw-req-icon {
    color: #ef4444;
}

[data-theme-mode="light"] .ent-pw-req-item--fail {
    color: #dc2626;
}

[data-theme-mode="light"] .ent-pw-req-item--fail .ent-pw-req-icon {
    color: #dc2626;
}

.ent-form-check-label {
    color: var(--ent-ink);
    font-size: 0.875rem;
}

.ent-warn-text {
    color: #d97706;
    font-size: 0.875rem;
}

[data-theme-mode="dark"] .ent-warn-text {
    color: #fbbf24;
}

.ent-detail-sections-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .ent-detail-sections-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .ent-detail-sections-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ent-detail-panel {
    margin-bottom: 0;
    height: 100%;
    min-width: 0;
}

.ent-cf-internal-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    min-width: 0;
}

.ent-cf-internal-stack > [data-hst-edit-section] {
    min-width: 0;
}

.ent-edit-actions-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 1rem;
    padding-top: 0.5rem;
}

.ent-edit-actions-bar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ent-border);
    border-radius: 0.5rem;
    background: var(--ent-surface);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.12);
}

[data-theme-mode="dark"] .ent-edit-actions-bar__inner {
    border-color: rgba(255, 255, 255, 0.12);
    background: var(--ent-surface-raised);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
}

[data-hst-edit-section].ent-edit-section--dirty-focus {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.35);
}

@media (max-width: 575.98px) {
    .ent-edit-actions-bar__inner {
        flex-direction: column;
    }

    .ent-edit-actions-bar__inner .btn {
        width: 100%;
        justify-content: center;
    }
}

.ent-edit-section-actions {
    position: sticky;
    bottom: 0;
    margin-top: 1rem;
    padding-top: 0.75rem;
    z-index: 3;
}

.ent-edit-section-actions__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ent-border);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        var(--ent-surface) 18%
    );
    border-radius: 0 0 0.5rem 0.5rem;
}

[data-theme-mode="dark"] .ent-edit-section-actions__inner {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        var(--ent-surface-raised) 20%
    );
}

@media (max-width: 575.98px) {
    .ent-edit-section-actions__inner {
        flex-direction: column;
    }

    .ent-edit-section-actions__inner .btn {
        width: 100%;
        justify-content: center;
    }
}

.ent-detail-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ent-detail-row {
    display: grid;
    grid-template-columns: minmax(8rem, 12.5rem) minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: start;
}

.ent-detail-row dt {
    margin: 0;
    color: var(--ent-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
}

.ent-detail-row dd {
    margin: 0;
    color: var(--ent-ink);
    font-size: 0.875rem;
    min-width: 0;
}

.ent-table thead th .custom-kb-tooltip-wrapper {
    vertical-align: middle;
}

/* Non-modal Hybrid tips mount here (above page chrome). */
#hst-tooltip-layer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 10000020 !important;
    overflow: visible !important;
}

.ent-floating-tooltip {
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    max-width: calc(100vw - 1.5rem) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2000 !important;
    /* Do NOT set inset — it overrides inline top/left used for placement. */
}

#hst-tooltip-layer .ent-floating-tooltip {
    position: fixed !important;
}

.ent-login-modal > .ent-floating-tooltip,
.modal-content > .ent-floating-tooltip {
    position: absolute !important;
}

.ent-login-modal.modal-content {
    position: relative !important;
}

body.modal-open .ent-floating-tooltip,
body:has([class*="wholesale-"][class*="-drawer"].open) .ent-floating-tooltip,
#hst-tooltip-layer .ent-floating-tooltip,
.ent-login-modal > .ent-floating-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Login modal + scrollable dialog overflow clips tips; open while active. */
.modal-dialog:has(.ent-login-modal .ent-tooltip-active),
.modal-dialog:has(.ent-login-modal .ent-floating-tooltip),
.ent-login-modal:has(.ent-tooltip-active),
.ent-login-modal:has(.ent-floating-tooltip),
.ent-login-modal:has(.ent-tooltip-active) > form,
.ent-login-modal:has(.ent-floating-tooltip) > form,
.ent-login-modal:has(.ent-tooltip-active) > form > .modal-body,
.ent-login-modal:has(.ent-floating-tooltip) > form > .modal-body {
    overflow: visible !important;
}

/* Suppress clipped CSS-absolute tips inside Hybrid login modals (JS handles them). */
#hst-login-create-modal .custom-kb-tooltip-wrapper:hover > .custom-kb-tooltip-content:not(.ent-floating-tooltip),
#hst-login-create-modal .custom-kb-tooltip-wrapper:focus-within > .custom-kb-tooltip-content:not(.ent-floating-tooltip),
#hst-login-edit-modal .custom-kb-tooltip-wrapper:hover > .custom-kb-tooltip-content:not(.ent-floating-tooltip),
#hst-login-edit-modal .custom-kb-tooltip-wrapper:focus-within > .custom-kb-tooltip-content:not(.ent-floating-tooltip),
#hst-login-disable-modal .custom-kb-tooltip-wrapper:hover > .custom-kb-tooltip-content:not(.ent-floating-tooltip),
#hst-login-disable-modal .custom-kb-tooltip-wrapper:focus-within > .custom-kb-tooltip-content:not(.ent-floating-tooltip) {
    visibility: hidden !important;
    opacity: 0 !important;
}

.offcanvas.show .ent-floating-tooltip {
    z-index: 1105 !important;
}

.ent-floating-tooltip[data-hst-tooltip-placement="bottom"]::after {
    top: auto !important;
    bottom: 100% !important;
    border-color: transparent transparent #000000 transparent !important;
}

[data-theme-mode="dark"] .ent-floating-tooltip[data-hst-tooltip-placement="bottom"]::after {
    border-color: transparent transparent #101010 transparent !important;
}

.ent-page-container .table-responsive:has(.custom-kb-tooltip-wrapper),
.ent-page-container .ent-panel:has(.custom-kb-tooltip-wrapper),
.ent-page-container .ent-detail-panel:has(.custom-kb-tooltip-wrapper) {
    overflow: visible !important;
}

.ent-credential-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.ent-credential-row .ent-form-control {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

.ent-credential-row .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    white-space: nowrap;
}

.ent-credential-row .btn:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

.ent-list-username-copy.btn-sm,
.ent-list-username-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.3rem;
    line-height: 1;
    flex-shrink: 0;
    min-width: 1.5rem;
    min-height: 1.5rem;
    font-size: 0.8rem;
}

.ent-list-username-copy i {
    font-size: 0.8rem;
    line-height: 1;
}

.ent-list-nickname {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.ent-list-nickname--card {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

@media (max-width: 575.98px) {
    .ent-detail-row,
    .ent-card-dl > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* Hybrid SIP Trunks — Recording Management */
.ent-rec-page {
    position: relative;
    padding-bottom: 4.5rem;
}

.ent-rec-metric-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--ent-surface-raised);
    border: 1px solid var(--ent-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    min-height: 100%;
}

.ent-rec-metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.12);
    color: var(--ent-accent);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ent-rec-metric-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ent-muted);
}

.ent-rec-metric-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ent-ink);
    line-height: 1.2;
}

.ent-rec-filters-panel {
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}

.ent-rec-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.ent-rec-filters-bar .ent-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ent-rec-filters-body {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ent-border);
}

.ent-rec-filter-footer {
    border-color: var(--ent-border) !important;
}

.ent-rec-retention-panel-note {
    color: var(--ent-muted, #64748b);
}

.ent-rec-settings-panel {
    padding: 0.85rem 1rem !important;
}

.ent-rec-settings-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.ent-rec-settings-panel .ent-panel-title,
#hst-rec-settings-panel .ent-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.ent-rec-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.85rem 1.25rem;
    align-items: start;
}

.ent-rec-settings-col--retention {
    min-height: 0;
}

.ent-rec-settings-empty {
    border: 1px solid var(--ent-border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    background: rgba(13, 110, 253, 0.06);
}

.ent-rec-settings-empty-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-rec-retention-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.ent-rec-settings-footer {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--ent-border);
}

@media (max-width: 767.98px) {
    .ent-rec-settings-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.ent-rec-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ent-rec-badge--in {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.22);
}

.ent-rec-badge--out {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.22);
}

.ent-rec-badge--internal {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.22);
}

.ent-rec-badge--neutral {
    background: rgba(148, 163, 184, 0.12);
    color: var(--ent-muted);
    border: 1px solid var(--ent-border);
}

.ent-rec-modal {
    background: var(--ent-surface-raised);
    border: 1px solid var(--ent-border);
    color: var(--ent-ink);
}

.ent-rec-detail-dl {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.ent-rec-detail-dl > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.5rem;
}

.ent-rec-detail-dl dt {
    margin: 0;
    color: var(--ent-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.ent-rec-detail-dl dd {
    margin: 0;
    color: var(--ent-ink);
    font-size: 0.875rem;
    word-break: break-word;
}

.ent-rec-detail-meta-col {
    border-color: var(--ent-border) !important;
}

.ent-rec-audit-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ent-rec-audit-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--ent-border);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--ent-ink);
    background: rgba(255, 255, 255, 0.02);
}

.ent-rec-player-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above Bootstrap modal (1055) so playback controls stay reachable. */
    z-index: calc(var(--bs-modal-zindex, 1055) + 10);
    background: var(--ent-surface-raised);
    border-top: 1px solid var(--ent-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    padding: 0.75rem 1rem;
}

.ent-rec-detail-player {
    border-top: 1px solid var(--ent-border);
    padding-top: 1rem;
}

.ent-rec-detail-player__label {
    color: var(--ent-ink);
}

.ent-rec-detail-player__audio {
    height: 40px;
    min-height: 40px;
}

.ent-rec-player-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.ent-rec-player-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ent-ink);
    min-width: 8rem;
}

.ent-rec-player-audio {
    flex: 1 1 280px;
    max-width: 520px;
    height: 36px;
}

.ent-rec-player-close {
    color: var(--ent-muted);
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem;
}

.ent-rec-player-close:hover {
    color: var(--ent-accent);
}

@media (max-width: 767.98px) {
    .ent-rec-detail-dl > div {
        grid-template-columns: 1fr;
    }

    .ent-rec-detail-meta-col {
        border-right: 0 !important;
        border-bottom: 1px solid var(--ent-border);
        padding-bottom: 1rem;
        margin-bottom: 0.5rem;
    }
}

.ent-status-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.ent-status-cell .ent-list-enable-switch {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    min-height: auto;
}

/* Hybrid SIP — live telemetry badges / DND / presence (manage + related) */
.ent-list-live-badges,
.ent-live-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.ent-badge--busy {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.3);
    color: #ea580c;
}

[data-theme-mode="dark"] .ent-badge--busy {
    color: #fb923c;
}

.ent-badge--hold {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.3);
    color: #ca8a04;
}

[data-theme-mode="dark"] .ent-badge--hold {
    color: #facc15;
}

.ent-badge--dnd {
    background: rgba(220, 53, 69, 0.14);
    border-color: rgba(220, 53, 69, 0.35);
    color: #b02a37;
}

[data-theme-mode="dark"] .ent-badge--dnd {
    color: #f87171;
}

.ent-presence-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--ent-border);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ent-ink);
}

[data-theme-mode="light"] .ent-presence-chip {
    background: rgba(15, 23, 42, 0.04);
}

.ent-telemetry-presence--available,
.ent-badge.ent-telemetry-presence--available,
.ent-presence-chip.ent-telemetry-presence--available {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
    color: #16a34a;
}

[data-theme-mode="dark"] .ent-telemetry-presence--available,
[data-theme-mode="dark"] .ent-badge.ent-telemetry-presence--available,
[data-theme-mode="dark"] .ent-presence-chip.ent-telemetry-presence--available {
    color: #4ade80;
}

.ent-telemetry-presence--busy { border-color: rgba(249, 115, 22, 0.4); }
.ent-telemetry-presence--dnd { border-color: rgba(239, 68, 68, 0.4); }
.ent-telemetry-presence--away,
.ent-telemetry-presence--unavailable,
.ent-telemetry-presence--unknown { border-color: rgba(148, 163, 184, 0.35); }

/* Hybrid SIP — Overview: Live calls + Identity two-column cards */
.ent-identity-overview {
    min-width: 0;
    border: 0;
    outline: none;
    box-shadow: none;
}

/* Dirty highlight belongs on Trunk Details only — never ring the whole Overview. */
#hst-section-identity.ent-edit-section--dirty-focus {
    box-shadow: none;
}

.ent-identity-live-grid__identity.ent-edit-section--dirty-focus,
.ent-identity-live-grid__identity[data-hst-edit-section].ent-edit-section--dirty-focus {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.35);
}

.ent-identity-live-grid__calls.ent-panel,
.ent-identity-live-grid__identity.ent-panel {
    border-color: var(--ent-card-border);
}

.ent-trunk-details-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
}

.ent-trunk-details-fields > .ent-edit-field-wrap {
    margin-bottom: 0;
    min-width: 0;
    max-width: 100%;
}

.ent-trunk-details-fields > .ent-edit-field-wrap:nth-child(4) {
    grid-column: span 3;
}

.ent-trunk-details-fields .ent-credential-row {
    width: 100%;
}

.ent-trunk-details-fields .ent-credential-row .ent-form-control {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    field-sizing: normal;
}

.ent-trunk-details-fields .ent-edit-field {
    width: 100%;
    min-width: 0;
    max-width: none;
    field-sizing: normal;
}

.ent-trunk-details-fields .ent-muted {
    max-width: none;
}

.ent-trunk-details-status-row .ent-edit-toggle {
    margin-bottom: 0 !important;
}

.ent-trunk-details-status-row .form-check {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .ent-trunk-details-fields {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .ent-trunk-details-fields > .ent-edit-field-wrap:nth-child(4) {
        grid-column: span 1;
    }
}

.ent-identity-live-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
}

.ent-identity-live-grid__calls,
.ent-identity-live-grid__identity {
    min-width: 0;
    height: 100%;
}

.ent-overview-calls-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100%;
}

.ent-overview-calls-card .ent-overview-calls__body {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    align-content: flex-start;
}

.ent-overview-calls-card .ent-overview-calls__link {
    align-self: flex-start;
    margin-top: 0.15rem;
}

.ent-overview-calls-card .ent-overview-calls-empty {
    flex: 1 1 auto;
}

.ent-overview-calls-empty {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10.5rem;
    padding: 1px;
    border-radius: 0.85rem;
    background: linear-gradient(
        135deg,
        rgba(13, 110, 253, 0.32) 0%,
        rgba(13, 110, 253, 0.08) 45%,
        rgba(255, 255, 255, 0.04) 100%
    );
    overflow: hidden;
}

.ent-overview-calls-empty__glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.1) 0%, transparent 58%);
    pointer-events: none;
    z-index: 1;
}

.ent-overview-calls-empty__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-align: center;
    padding: 1.15rem 1rem 1.25rem;
    border-radius: 0.8rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.12), transparent 55%),
        var(--ent-surface, #161616);
}

.ent-overview-calls-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.35rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.24) 0%, rgba(13, 110, 253, 0.08) 100%);
    border: 1px solid rgba(13, 110, 253, 0.32);
    color: var(--ent-accent, #0d6efd);
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.16);
    font-size: 1.4rem;
    line-height: 1;
}

.ent-overview-calls-empty__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ent-ink, #f6f7fb);
}

.ent-overview-calls-empty__message {
    max-width: 18rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ent-muted, #b3b3b3);
}

.ent-overview-calls-empty__actions {
    margin-top: 0.55rem;
}

.ent-overview-calls-empty__actions .ent-overview-calls__link {
    min-height: 2.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(13, 110, 253, 0.35);
    background: rgba(13, 110, 253, 0.1);
}

.ent-overview-calls-empty__actions .ent-overview-calls__link:hover,
.ent-overview-calls-empty__actions .ent-overview-calls__link:focus-visible {
    background: rgba(13, 110, 253, 0.18);
    text-decoration: none;
}

[data-theme-mode="light"] .ent-overview-calls-empty {
    background: linear-gradient(
        135deg,
        rgba(10, 88, 202, 0.22) 0%,
        rgba(10, 88, 202, 0.06) 45%,
        rgba(15, 23, 42, 0.04) 100%
    );
}

[data-theme-mode="light"] .ent-overview-calls-empty__inner {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.1), transparent 55%),
        #ffffff;
}

[data-theme-mode="light"] .ent-overview-calls-empty__actions .ent-overview-calls__link {
    border-color: rgba(10, 88, 202, 0.3);
    background: rgba(13, 110, 253, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .ent-overview-calls-empty__glow {
        display: none;
    }
}

@media (min-width: 768px) {
    .ent-identity-live-grid--paired {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Hybrid SIP — Overview live ops console (compact PBX glance) */
.ent-overview-ops {
    margin: 0 0 1rem;
    border: 0;
    outline: none;
    box-shadow: none;
}

.ent-overview-console {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 0;
    outline: none;
    box-shadow: none;
}

.ent-ops-console--embedded {
    margin: 0;
    padding: 0;
    border: 0;
}

.ent-overview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "identity actions";
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--ent-card-border, rgba(13, 110, 253, 0.38));
    background: #161616;
}

[data-theme-mode="light"] .ent-overview-hero {
    border-color: var(--ent-card-border, rgba(10, 88, 202, 0.35));
    background: #ffffff;
}

.ent-overview-hero__identity {
    grid-area: identity;
    min-width: 0;
}

.ent-overview-hero__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ent-ink, #f6f7fb);
    text-wrap: balance;
}

.ent-overview-hero__aor {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--ent-muted, #b3b3b3);
}

.ent-overview-hero__status {
    grid-area: status;
}

.ent-overview-hero__status .ent-live-badge-row {
    gap: 0.3rem;
}

.ent-overview-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.ent-overview-actions__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.75rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #e5e7eb;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

/* Icon accents — align with dashboard quick-action colours */
.ent-overview-actions__link i {
    font-size: 1.05rem;
    line-height: 1;
    transition: color 160ms ease-out;
}

.ent-overview-actions__link--calls i { color: #60a5fa; }
.ent-overview-actions__link--trunk-login i { color: #f472b6; }
.ent-overview-actions__link--cdr i { color: #a78bfa; }
.ent-overview-actions__link--reg i { color: #fb923c; }
.ent-overview-actions__link--logs i { color: #2dd4bf; }
.ent-overview-actions__link--feature-codes i { color: #0d6efd; }
.ent-overview-actions__link--blf i { color: #2dd4bf; }

button.ent-overview-actions__link {
    font: inherit;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.ent-overview-actions__link:hover,
.ent-overview-actions__link:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f6f7fb;
    text-decoration: none;
}

.ent-overview-actions__link--calls:hover i,
.ent-overview-actions__link--calls:focus-visible i { color: #93c5fd; }
.ent-overview-actions__link--trunk-login:hover i,
.ent-overview-actions__link--trunk-login:focus-visible i { color: #f9a8d4; }
.ent-overview-actions__link--cdr:hover i,
.ent-overview-actions__link--cdr:focus-visible i { color: #c4b5fd; }
.ent-overview-actions__link--reg:hover i,
.ent-overview-actions__link--reg:focus-visible i { color: #fdba74; }
.ent-overview-actions__link--logs:hover i,
.ent-overview-actions__link--logs:focus-visible i { color: #5eead4; }
.ent-overview-actions__link--feature-codes:hover i,
.ent-overview-actions__link--feature-codes:focus-visible i { color: #5eead4; }
.ent-overview-actions__link--blf:hover i,
.ent-overview-actions__link--blf:focus-visible i { color: #5eead4; }

[data-theme-mode="light"] .ent-overview-actions__link {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
    color: #334155;
}

[data-theme-mode="light"] .ent-overview-actions__link--calls i { color: #2563eb; }
[data-theme-mode="light"] .ent-overview-actions__link--trunk-login i { color: #db2777; }
[data-theme-mode="light"] .ent-overview-actions__link--cdr i { color: #7c3aed; }
[data-theme-mode="light"] .ent-overview-actions__link--reg i { color: #ea580c; }
[data-theme-mode="light"] .ent-overview-actions__link--logs i { color: #0a58ca; }
[data-theme-mode="light"] .ent-overview-actions__link--feature-codes i { color: #0a58ca; }
[data-theme-mode="light"] .ent-overview-actions__link--blf i { color: #0a58ca; }

[data-theme-mode="light"] .ent-overview-actions__link:hover,
[data-theme-mode="light"] .ent-overview-actions__link:focus-visible {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.ent-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.ent-overview-block {
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--ent-card-border, rgba(13, 110, 253, 0.38));
    background: #161616;
}

[data-theme-mode="light"] .ent-overview-block {
    border-color: var(--ent-card-border, rgba(10, 88, 202, 0.35));
    background: #ffffff;
}

.ent-overview-block__title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.55rem;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ent-ink, #f6f7fb);
}

.ent-overview-block__title i {
    color: var(--ent-muted, #b3b3b3);
    font-size: 1rem;
}

.ent-overview-block__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.55rem;
}

.ent-overview-block__meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ent-muted, #b3b3b3);
}

.ent-overview-dl {
    display: grid;
    gap: 0.35rem 0;
    margin: 0;
}

.ent-overview-dl > div {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ent-overview-dl > div:last-child {
    border-bottom: 0;
}

[data-theme-mode="light"] .ent-overview-dl > div {
    border-bottom-color: rgba(15, 23, 42, 0.06);
}

.ent-overview-dl dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ent-muted, #b3b3b3);
}

.ent-overview-dl dd {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ent-ink, #f6f7fb);
    word-break: break-word;
}

.ent-overview-dnd--on {
    border-color: var(--ent-card-border, rgba(13, 110, 253, 0.38));
    background: #1a1214;
}

[data-theme-mode="light"] .ent-overview-dnd--on {
    border-color: var(--ent-card-border, rgba(10, 88, 202, 0.35));
    background: #fff8f8;
}

.ent-overview-dnd__row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ent-overview-dnd__switch {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
}

.ent-overview-dnd__switch .form-check-input {
    width: 2.75rem;
    height: 1.45rem;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.ent-overview-dnd__switch .form-check-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ent-ink, #f6f7fb);
    cursor: pointer;
}

.ent-overview-dnd__mode .ent-form-label {
    margin-bottom: 0.3rem;
}

.ent-overview-dnd__mode .form-select {
    min-height: 2.75rem;
}

.ent-overview-dnd__warn {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid rgba(234, 179, 8, 0.35);
    background: rgba(234, 179, 8, 0.08);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #facc15;
}

[data-theme-mode="light"] .ent-overview-dnd__warn {
    color: #a16207;
    background: rgba(234, 179, 8, 0.1);
}

.ent-overview-dnd__warn i {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.ent-overview-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.35rem 0;
    font-size: 0.875rem;
    color: var(--ent-muted, #b3b3b3);
}

.ent-overview-empty i {
    font-size: 1.15rem;
    opacity: 0.85;
}

.ent-overview-devices__scroll {
    overflow-x: auto;
    max-height: 11rem;
    overflow-y: auto;
}

.ent-overview-devices__table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ent-overview-devices__table th,
.ent-overview-devices__table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    vertical-align: top;
    color: var(--ent-ink, #f6f7fb);
}

.ent-overview-devices__table th {
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--ent-muted, #b3b3b3);
    white-space: nowrap;
}

.ent-overview-devices__table tbody tr:last-child td {
    border-bottom: 0;
}

[data-theme-mode="light"] .ent-overview-devices__table th,
[data-theme-mode="light"] .ent-overview-devices__table td {
    border-bottom-color: rgba(15, 23, 42, 0.06);
}

.ent-overview-devices__ua {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ent-muted, #b3b3b3);
}

.ent-overview-presence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    padding: 0.15rem 0.15rem 0;
}

.ent-overview-presence--in-dnd {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

[data-theme-mode="light"] .ent-overview-presence--in-dnd {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.ent-overview-presence__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--ent-muted, #b3b3b3);
}

.ent-overview-presence__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.ent-overview-calls__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.ent-overview-calls__list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 14rem;
    min-width: 0;
}

.ent-overview-call {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.45rem 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="light"] .ent-overview-call {
    border-color: rgba(15, 23, 42, 0.06);
    background: rgba(15, 23, 42, 0.02);
}

.ent-overview-call__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 10rem;
}

.ent-overview-call__peer {
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--ent-ink, #f6f7fb);
}

.ent-overview-call__meta {
    line-height: 1.35;
}

.ent-overview-call__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.ent-overview-calls__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.15rem;
    font-size: 0.8125rem;
    font-weight: 650;
    color: #0d6efd;
    text-decoration: none;
    white-space: nowrap;
}

.ent-overview-calls__link:hover,
.ent-overview-calls__link:focus-visible {
    color: #2dd4bf;
    text-decoration: underline;
}

[data-theme-mode="light"] .ent-overview-calls__link {
    color: #0a58ca;
}

@media (max-width: 991.98px) {
    .ent-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .ent-overview-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "identity"
            "actions";
        padding: 0.75rem;
    }

    .ent-overview-actions {
        justify-content: flex-start;
    }

    .ent-overview-dl > div {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ent-overview-actions__link {
        transition: none;
    }
}

.ent-detail-sidenav-group {
    margin: 0.4rem 0 0.15rem;
    padding: 0 0.45rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ent-muted, #b3b3b3);
}

.ent-detail-sidenav > .ent-detail-sidenav-list:first-child + .ent-detail-sidenav-group {
    margin-top: 0.35rem;
}

.ent-dnd-control .ent-inline-feedback {
    font-size: 0.875rem;
}

.ent-inline-feedback--ok {
    color: #16a34a;
}

[data-theme-mode="dark"] .ent-inline-feedback--ok {
    color: #4ade80;
}

.ent-inline-feedback--info {
    color: #0a58ca;
}

[data-theme-mode="dark"] .ent-inline-feedback--info {
    color: #5eead4;
}

.ent-inline-feedback--error {
    color: #dc2626;
}

[data-theme-mode="dark"] .ent-inline-feedback--error {
    color: #f87171;
}

.ent-telemetry-unavailable-banner {
    border-radius: 8px;
}

.ent-list-enable-switch .form-check-input {
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Hybrid SIP — shared teal modal chrome (propagation + recording settings; overrides portal Operational Red) */
.ent-hybrid-modal {
    --ent-surface: #ffffff;
    --ent-surface-raised: #f8fafc;
    --ent-border: rgba(15, 23, 42, 0.1);
    --ent-ink: #0f172a;
    --ent-muted: #64748b;
    --ent-accent: #0d6efd;
    --ent-accent-deep: #0a58ca;
    background: var(--ent-surface) !important;
    border: 1px solid var(--ent-border) !important;
    color: var(--ent-ink) !important;
}

[data-theme-mode="dark"] .ent-hybrid-modal {
    --ent-surface: #161616;
    --ent-surface-raised: #1a1a1a;
    --ent-border: rgba(255, 255, 255, 0.09);
    --ent-ink: #f6f7fb;
    --ent-muted: #b3b3b3;
    --ent-accent: #0d6efd;
    --ent-accent-deep: #0a58ca;
    background: var(--ent-surface) !important;
    border-color: var(--ent-border) !important;
    color: var(--ent-ink) !important;
}

.portal-modern-modal.ent-hybrid-modal .modal-header {
    background: linear-gradient(90deg, var(--ent-accent-deep) 0%, var(--ent-accent) 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.portal-modern-modal.ent-hybrid-modal .modal-title {
    color: #f6f7fb !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.portal-modern-modal.ent-hybrid-modal .modal-title i {
    color: #ccfbf1 !important;
    font-size: 1.25rem !important;
}

.portal-modern-modal.ent-hybrid-modal .modal-body {
    padding: 1.75rem 1.5rem 1.5rem !important;
    background: var(--ent-surface) !important;
    color: var(--ent-ink) !important;
}

.portal-modern-modal.ent-hybrid-modal .modal-footer {
    background: var(--ent-surface) !important;
    border-top: 1px solid var(--ent-border) !important;
    padding: 1rem 1.5rem !important;
}

/* Compact Trunk Login Modal Layout */
#hst-login-create-modal .modal-dialog,
#hst-login-edit-modal .modal-dialog,
.modal-dialog:has(.ent-login-modal) {
    max-width: 920px !important;
    max-height: calc(100vh - 3.5rem) !important;
    height: auto !important;
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
}

/* Form wraps modal-body + modal-footer, breaking Bootstrap's scrollable
   flex chain. Restore it so the body scrolls and footer stays pinned in viewport. */
.ent-login-modal {
    max-height: calc(100vh - 3.5rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.ent-login-modal > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.ent-login-modal > form > .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 1rem 1.25rem !important;
}

.ent-login-modal > form > .modal-footer {
    flex: 0 0 auto !important;
    padding: 0.75rem 1.25rem !important;
}

.ent-login-modal .modal-header {
    padding: 0.85rem 1.25rem !important;
    flex: 0 0 auto !important;
}

/* ── Permissions panel wrapper ─────────────────────────────────────────── */
.ent-login-modal .ent-panel {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

[data-theme-mode="dark"] .ent-login-modal .ent-panel {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}

/* "Permissions" heading inside panel */
.ent-login-modal .ent-panel > .d-flex > .ent-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

[data-theme-mode="dark"] .ent-login-modal .ent-panel > .d-flex > .ent-section-title {
    color: rgba(255, 255, 255, 0.45);
}

/* ── Permission group cards ───────────────────────────────────────────── */
.ent-login-modal .ent-login-perm-group {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.75rem 0.85rem 0.65rem;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

[data-theme-mode="dark"] .ent-login-modal .ent-login-perm-group {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
}

.ent-login-modal .ent-login-perm-group:hover {
    background: rgba(13, 110, 253, 0.035);
    border-color: rgba(13, 110, 253, 0.18);
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.06);
}

/* ── Category headers inside perm groups ──────────────────────────────── */
.ent-login-modal .ent-login-perm-group > .ent-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #2dd4bf;
    margin-bottom: 0.55rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(45, 212, 191, 0.12);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ent-login-modal .ent-login-perm-group > .ent-section-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.75rem;
    border-radius: 2px;
    background: linear-gradient(180deg, #2dd4bf 0%, rgba(45, 212, 191, 0.35) 100%);
    flex-shrink: 0;
}

[data-theme-mode="dark"] .ent-login-modal .ent-login-perm-group > .ent-section-title {
    color: #5eead4;
    border-bottom-color: rgba(110, 168, 254, 0.1);
}

/* ── Individual toggle rows ───────────────────────────────────────────── */
.ent-login-modal .ent-login-perm-group .form-check.form-switch {
    padding: 0.35rem 0.4rem 0.35rem 2.85em;
    margin: 0;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.ent-login-modal .ent-login-perm-group .form-check.form-switch:hover {
    background: rgba(255, 255, 255, 0.035);
}

[data-theme-mode="dark"] .ent-login-modal .ent-login-perm-group .form-check.form-switch:hover {
    background: rgba(255, 255, 255, 0.04);
}

.ent-login-modal .ent-login-perm-group .form-check.form-switch + .form-check.form-switch {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.ent-login-modal .ent-login-perm-group .form-check-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.4;
}

[data-theme-mode="dark"] .ent-login-modal .ent-login-perm-group .form-check-label {
    color: rgba(255, 255, 255, 0.78);
}

/* Smaller toggles inside perm groups */
.ent-login-modal .ent-login-perm-group .form-check-input {
    width: 2.2em;
    height: 1.15em;
    margin-left: -2.85em;
}

/* ── Permission grid spacing ──────────────────────────────────────────── */
.ent-login-modal .ent-login-perm-group .d-flex.flex-column {
    gap: 0 !important;
}

.portal-modern-modal.ent-hybrid-modal .btn-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease !important;
}

.portal-modern-modal.ent-hybrid-modal .btn-primary:hover:not(:disabled),
.portal-modern-modal.ent-hybrid-modal .btn-primary:focus:not(:disabled) {
    background: linear-gradient(135deg, #2dd4bf 0%, #0a58ca 100%) !important;
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.4) !important;
    color: #ffffff !important;
}

.portal-modern-modal.ent-hybrid-modal .btn-primary:disabled {
    opacity: 0.55;
    box-shadow: none !important;
}

[data-theme-mode="dark"] .portal-modern-modal.ent-hybrid-modal .btn-primary {
    box-shadow: 0 4px 12px rgba(10, 88, 202, 0.35) !important;
}

[data-theme-mode="dark"] .portal-modern-modal.ent-hybrid-modal .btn-primary:hover:not(:disabled),
[data-theme-mode="dark"] .portal-modern-modal.ent-hybrid-modal .btn-primary:focus:not(:disabled) {
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.45) !important;
}

/* Create Hybrid trunk modal */
.ent-create-advanced {
    border: 1px solid var(--ent-border);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    background: var(--ent-surface);
}

.ent-create-advanced__summary {
    cursor: pointer;
    color: var(--ent-ink);
    font-size: 0.9rem;
    font-weight: 600;
}

.ent-create-pricing-confirm {
    border: 1px solid var(--ent-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    background: var(--ent-surface-raised);
}

.ent-create-pricing-confirm .form-check-label,
.ent-create-pricing-label {
    color: var(--ent-ink);
    font-size: 0.875rem;
    line-height: 1.45;
}

.ent-create-pricing-label {
    display: inline;
}

.ent-create-pricing-label-text {
    font-weight: inherit;
    color: inherit;
}

.ent-create-pricing-plan-link {
    color: var(--ent-accent, #8b5cf6);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.ent-create-pricing-plan-link:hover,
.ent-create-pricing-plan-link:focus-visible {
    text-decoration-thickness: 2px;
}

.ent-create-pricing-confirm .form-check-input.is-invalid {
    border-color: #ef4444;
}

.ent-create-qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 0.75rem;
    border: 1px solid var(--ent-border);
    border-radius: 12px;
    background: var(--ent-surface);
}

.ent-create-qr-image {
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: #ffffff;
}

.ent-create-billing {
    color: var(--ent-ink);
}

/* Post-save propagation modal — uses shared hst-hybrid-modal chrome */
.portal-modern-modal.ent-hybrid-modal.ent-propagation-modal .modal-body {
    padding: 1.75rem 1.5rem 1.5rem !important;
}

/* Recording settings modal — compact variant on shared teal chrome */
.portal-modern-modal.ent-hybrid-modal.ent-recording-settings-modal .modal-header {
    padding: 0.85rem 1rem !important;
}

.portal-modern-modal.ent-hybrid-modal.ent-recording-settings-modal .modal-title {
    gap: 0.4rem;
    font-size: 1rem !important;
}

.portal-modern-modal.ent-hybrid-modal.ent-recording-settings-modal .modal-title i {
    font-size: 1.1rem !important;
}

.portal-modern-modal.ent-hybrid-modal.ent-recording-settings-modal .modal-body {
    padding: 0.9rem 1rem !important;
}

.portal-modern-modal.ent-hybrid-modal.ent-recording-settings-modal .modal-footer {
    padding: 0.75rem 1rem !important;
}

.ent-recording-settings-identity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

/* Solid bright orange notice — single column text (avoid .ent-alert flex splitting text nodes) */
.ent-recording-settings-off-note {
    display: block;
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    border: none;
    background: #f59e0b;
    color: #1c1917;
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: left;
}

.ent-recording-settings-off-note__text {
    display: block;
    margin: 0;
    color: inherit;
    text-align: left;
}

.ent-recording-settings-off-note strong {
    color: #0c0a09;
    font-weight: 700;
}

[data-theme-mode="dark"] .ent-recording-settings-off-note {
    background: #fb923c;
    color: #1c1917;
}

[data-theme-mode="dark"] .ent-recording-settings-off-note strong {
    color: #0c0a09;
}

.ent-recording-settings-modal .ent-rec-retention-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.portal-modern-modal.ent-hybrid-modal.ent-recording-enable-agreement-modal .modal-header,
.portal-modern-modal.ent-hybrid-modal.ent-ai-enable-agreement-modal .modal-header {
    padding: 1rem 1.25rem !important;
}

.portal-modern-modal.ent-hybrid-modal.ent-recording-enable-agreement-modal .modal-title,
.portal-modern-modal.ent-hybrid-modal.ent-ai-enable-agreement-modal .modal-title {
    font-size: 1rem;
    line-height: 1.35;
}

.ent-recording-agreement-body {
    max-height: min(60vh, 28rem);
    overflow-y: auto;
}

.ent-recording-fact-sheet__heading {
    color: var(--ent-ink);
}

.ent-recording-fact-sheet__list {
    margin: 0;
    padding-left: 1.25rem;
}

.ent-recording-fact-sheet__list li + li {
    margin-top: 0.5rem;
}

.ent-recording-fact-sheet__table-wrap {
    border: 1px solid var(--ent-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.ent-recording-fact-sheet__table {
    margin-bottom: 0;
    color: var(--ent-ink);
}

.ent-recording-fact-sheet__table > :not(caption) > * > * {
    padding: 0.625rem 0.75rem;
    border-color: var(--ent-border);
    vertical-align: top;
}

.ent-recording-fact-sheet__table thead th {
    background: var(--ent-surface-raised);
    color: var(--ent-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.ent-recording-fact-sheet__table tbody td:last-child {
    min-width: 9rem;
}

[data-theme-mode="dark"] .ent-recording-fact-sheet__table thead th {
    background: #1a1a1a;
}

.ent-propagation-message {
    margin: 0 auto;
    max-width: 26rem;
    color: var(--ent-ink);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.ent-propagation-message strong {
    color: var(--ent-accent-deep);
    font-weight: 700;
}

[data-theme-mode="dark"] .ent-propagation-message strong {
    color: #5eead4;
}

.ent-propagation-countdown-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ent-propagation-ring {
    --ent-propagation-pct: 100%;
    position: relative;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, var(--ent-surface) 58%, transparent 59%),
        conic-gradient(var(--ent-accent) var(--ent-propagation-pct), rgba(100, 116, 139, 0.22) 0);
    border: 1px solid rgba(13, 110, 253, 0.32);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.08);
}

[data-theme-mode="dark"] .ent-propagation-ring {
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.12);
}

.ent-propagation-countdown {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ent-ink);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ent-propagation-countdown-label {
    color: var(--ent-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ent-propagation-joke-wrap {
    margin: 0 auto;
    max-width: 24rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--ent-surface-raised);
    border: 1px solid var(--ent-border);
}

.ent-propagation-joke {
    color: var(--ent-muted);
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.45;
    min-height: 2.5rem;
}

/* --- Hybrid SIP Trunks — Detail view side navigation --------------------- */

/* Two-column grid: sidebar + sections.
   Keep the sidenav track fixed — never minmax/fr here (portal shell must not leak). */
.ent-detail-layout {
    display: grid;
    grid-template-columns: 13.75rem minmax(0, 1fr); /* 220px */
    gap: 0 1.25rem;
    align-items: start;
    min-height: 0;
    max-width: 100%;
}

/* Allow the sections column to shrink; default min-width:auto lets ApexCharts widen the page */
.ent-detail-layout > .ent-detail-sections-grid,
.ent-detail-layout > #hst-edit-form-sections {
    min-width: 0;
}

/* Override the multi-column sections grid to single column when inside layout */
.ent-detail-layout .ent-detail-sections-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
    max-width: 100%;
}

/* Sidebar panel — dense so the full nav fits a typical viewport */
.ent-detail-sidenav {
    position: sticky;
    top: 4.5rem;
    width: 100%;
    max-width: 13.75rem; /* match grid track; prevent accidental growth */
    box-sizing: border-box;
    max-height: calc(100vh - 5.25rem);
    max-height: calc(100dvh - 5.25rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: var(--ent-surface);
    border: 1px solid var(--ent-border);
    border-radius: 0.75rem;
    padding: 0.3rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.ent-detail-sidenav::-webkit-scrollbar {
    width: 4px;
}

.ent-detail-sidenav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

[data-theme-mode="light"] .ent-detail-sidenav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme-mode="light"] .ent-detail-sidenav {
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* Nav list */
.ent-detail-sidenav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nav link */
.ent-detail-sidenav-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    margin: 0.05rem 0.35rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ent-muted);
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.75rem;
    cursor: pointer;
}

.ent-detail-sidenav-link i {
    font-size: 0.95rem;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.65;
    transition: opacity 0.18s ease, color 0.18s ease;
}

.ent-detail-sidenav-link:hover {
    color: var(--ent-ink);
    background: rgba(13, 110, 253, 0.06);
    text-decoration: none;
}

.ent-detail-sidenav-link:hover i {
    opacity: 1;
}

.ent-detail-sidenav-link.is-active {
    color: var(--ent-accent);
    background: rgba(13, 110, 253, 0.12);
    font-weight: 600;
}

.ent-detail-sidenav-link.is-active i {
    opacity: 1;
    color: var(--ent-accent);
}

[data-theme-mode="light"] .ent-detail-sidenav-link:hover {
    background: rgba(13, 110, 253, 0.06);
    color: var(--ent-ink);
}

[data-theme-mode="light"] .ent-detail-sidenav-link.is-active {
    background: rgba(13, 110, 253, 0.1);
    color: #0d7d72;
}

[data-theme-mode="light"] .ent-detail-sidenav-link.is-active i {
    color: #0d7d72;
}

button.ent-detail-sidenav-link--button {
    width: calc(100% - 0.9rem);
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

/* Hybrid SIP Trunks — Feature Codes catalog */
.ent-feature-codes-body {
    min-height: 4rem;
}

.ent-feature-codes-toolbar {
    gap: 0.5rem;
}

.ent-feature-codes-catalog-intro {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ent-feature-codes-modal-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem 1rem;
}

/* Premium search / filter shell — teal Hybrid accent, neutral surfaces */
.ent-feature-codes-filters {
    padding: 0.9rem 1rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(13, 110, 253, 0.22);
    background:
        linear-gradient(105deg, rgba(13, 110, 253, 0.1) 0%, transparent 48%),
        linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
    transition: border-color 0.18s ease, background 0.18s ease;
}

[data-theme-mode="light"] .ent-feature-codes-filters {
    border-color: rgba(10, 88, 202, 0.24);
    background:
        linear-gradient(105deg, rgba(13, 110, 253, 0.08) 0%, transparent 48%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.ent-feature-codes-filters.is-filtering {
    border-color: rgba(13, 110, 253, 0.42);
}

[data-theme-mode="light"] .ent-feature-codes-filters.is-filtering {
    border-color: rgba(10, 88, 202, 0.42);
}

.ent-feature-codes-filters__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 0.85rem;
}

.ent-feature-codes-filters__search {
    flex: 1 1 16rem;
    min-width: 0;
}

.ent-feature-codes-filters__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.ent-feature-codes-filters .ent-form-label {
    margin-bottom: 0.4rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.ent-feature-codes-search-group {
    min-height: 44px;
}

.ent-feature-codes-search-group .ent-input-addon {
    color: #5eead4 !important;
    border-color: rgba(13, 110, 253, 0.28) !important;
    background: rgba(13, 110, 253, 0.08) !important;
}

[data-theme-mode="light"] .ent-feature-codes-search-group .ent-input-addon {
    color: #0a58ca !important;
    border-color: rgba(10, 88, 202, 0.28) !important;
    background: rgba(10, 88, 202, 0.08) !important;
}

.ent-feature-codes-search-input {
    min-height: 44px;
    border-color: rgba(13, 110, 253, 0.28) !important;
}

.ent-feature-codes-search-input:focus {
    border-color: rgba(13, 110, 253, 0.55) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18) !important;
}

[data-theme-mode="light"] .ent-feature-codes-search-input {
    border-color: rgba(10, 88, 202, 0.28) !important;
}

[data-theme-mode="light"] .ent-feature-codes-search-input:focus {
    border-color: rgba(10, 88, 202, 0.55) !important;
    box-shadow: 0 0 0 0.2rem rgba(10, 88, 202, 0.14) !important;
}

.ent-feature-codes-filter-summary {
    margin-top: 0.7rem;
    color: var(--ent-muted, #b3b3b3);
}

.ent-feature-codes-filters.is-filtering .ent-feature-codes-filter-summary {
    color: #99f6e4;
    font-weight: 550;
}

[data-theme-mode="light"] .ent-feature-codes-filters.is-filtering .ent-feature-codes-filter-summary {
    color: #0a58ca;
}

@media (max-width: 575.98px) {
    .ent-feature-codes-filters__actions {
        width: 100%;
    }

    .ent-feature-codes-filters__actions .ent-action-chip {
        width: 100%;
        justify-content: flex-start;
    }
}

.ent-feature-codes-group {
    margin-bottom: 1rem;
}

.ent-feature-codes-group:last-child {
    margin-bottom: 0;
}

.ent-feature-codes-group__title {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ent-muted, #b3b3b3);
}

/* Mobile-first: 1 col; md+ denser 2-col grid (modal + dedicated page). */
.ent-feature-codes-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .ent-feature-codes-list {
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem 0.65rem;
    }
}

.ent-feature-codes-list > [role="listitem"] {
    min-width: 0;
    display: flex;
}

.ent-feature-code-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    height: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    background: var(--ent-surface-raised, #1a1a1a);
}

[data-theme-mode="light"] .ent-feature-code-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

.ent-feature-code-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    margin-bottom: 0;
}

.ent-feature-code-card__code {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: rgba(13, 110, 253, 0.14);
    color: #5eead4;
    font-size: 0.8125rem;
    font-weight: 700;
}

[data-theme-mode="light"] .ent-feature-code-card__code {
    background: rgba(10, 88, 202, 0.12);
    color: #0a58ca;
}

.ent-feature-code-card__title {
    margin: 0;
    flex: 1 1 8rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ent-ink, #f6f7fb);
}

[data-theme-mode="light"] .ent-feature-code-card__title {
    color: #0f172a;
}

.ent-feature-code-card__desc,
.ent-feature-code-card__example,
.ent-feature-code-card__meta {
    margin-top: 0;
    color: var(--ent-muted, #b3b3b3);
    line-height: 1.35;
}

.ent-feature-code-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ent-feature-code-card__meta {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ent-feature-code-card__example code {
    color: var(--ent-ink, #f6f7fb);
    word-break: break-word;
}

[data-theme-mode="light"] .ent-feature-code-card__example code {
    color: #0f172a;
}

/* Empty / loading / error hosts stay full-width (outside the card grid). */
.ent-feature-codes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--ent-muted, #b3b3b3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
}

.ent-feature-codes-empty i {
    font-size: 1.75rem;
    opacity: 0.75;
    color: #0d6efd;
}

.ent-feature-codes-empty--filter {
    border-color: rgba(13, 110, 253, 0.22);
    background:
        linear-gradient(180deg, rgba(13, 110, 253, 0.06) 0%, transparent 70%),
        rgba(255, 255, 255, 0.02);
}

[data-theme-mode="light"] .ent-feature-codes-empty {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

[data-theme-mode="light"] .ent-feature-codes-empty--filter {
    border-color: rgba(10, 88, 202, 0.24);
    background:
        linear-gradient(180deg, rgba(13, 110, 253, 0.06) 0%, transparent 70%),
        rgba(15, 23, 42, 0.02);
}

/* ---- Available BLFs (Hybrid nicknames help) ---- */

/* Extension Monitoring callout — premium tip panel */
.ent-blf-ext-monitor {
    margin-top: auto;
    padding: 1rem 1rem 1.05rem;
    border-radius: 12px;
    border: 1px solid rgba(13, 110, 253, 0.28);
    background:
        linear-gradient(105deg, rgba(13, 110, 253, 0.12) 0%, transparent 46%),
        linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

[data-theme-mode="light"] .ent-blf-ext-monitor {
    border-color: rgba(10, 88, 202, 0.28);
    background:
        linear-gradient(105deg, rgba(13, 110, 253, 0.1) 0%, transparent 46%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.ent-blf-ext-monitor__header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.ent-blf-ext-monitor__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: #0a58ca;
    color: #ffffff;
    font-size: 1.15rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.ent-blf-ext-monitor__intro {
    min-width: 0;
    flex: 1;
}

.ent-blf-ext-monitor__eyebrow {
    display: inline-block;
    margin-bottom: 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5eead4;
    line-height: 1.2;
}

[data-theme-mode="light"] .ent-blf-ext-monitor__eyebrow {
    color: #0a58ca;
}

.ent-blf-ext-monitor__title {
    margin: 0 0 0.25rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ent-ink, #f6f7fb);
    text-wrap: balance;
}

[data-theme-mode="light"] .ent-blf-ext-monitor__title {
    color: #0f172a;
}

.ent-blf-ext-monitor__desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ent-muted, #b3b3b3);
    max-width: 42ch;
}

[data-theme-mode="light"] .ent-blf-ext-monitor__desc {
    color: #475569;
}

.ent-blf-ext-usernames__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ent-blf-ext-usernames__item {
    margin: 0;
}

.ent-blf-ext-usernames__card {
    padding: 0.7rem 0.75rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    background: var(--ent-surface-raised, #1a1a1a);
    transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ent-blf-ext-usernames__card:hover,
.ent-blf-ext-usernames__card:focus-within {
    border-color: rgba(13, 110, 253, 0.35);
}

[data-theme-mode="light"] .ent-blf-ext-usernames__card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .ent-blf-ext-usernames__card:hover,
[data-theme-mode="light"] .ent-blf-ext-usernames__card:focus-within {
    border-color: rgba(10, 88, 202, 0.4);
}

.ent-blf-ext-usernames__nick {
    margin: 0 0 0.4rem;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ent-ink, #f6f7fb);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme-mode="light"] .ent-blf-ext-usernames__nick {
    color: #0f172a;
}

.ent-blf-ext-usernames__key-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ent-muted, #b3b3b3);
}

.ent-blf-ext-usernames__copy .form-control {
    background: #121212;
    border-color: var(--ent-border, rgba(255, 255, 255, 0.09));
    color: var(--ent-ink, #f6f7fb);
}

[data-theme-mode="light"] .ent-blf-ext-usernames__copy .form-control {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.ent-blf-ext-usernames__loading {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    padding: 0.35rem 0;
}

.ent-blf-ext-usernames__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.85rem 0.9rem;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.02);
}

.ent-blf-ext-usernames__empty > i {
    font-size: 1.15rem;
    color: #5eead4;
    margin-bottom: 0.15rem;
}

.ent-blf-ext-usernames__empty-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--ent-ink, #f6f7fb);
}

.ent-blf-ext-usernames__empty-desc {
    font-size: 0.8125rem;
    line-height: 1.45;
}

[data-theme-mode="light"] .ent-blf-ext-usernames__empty {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(15, 23, 42, 0.02);
}

[data-theme-mode="light"] .ent-blf-ext-usernames__empty > i {
    color: #0a58ca;
}

[data-theme-mode="light"] .ent-blf-ext-usernames__empty-title {
    color: #0f172a;
}

@media (prefers-reduced-motion: reduce) {
    .ent-blf-ext-usernames__card {
        transition: none;
    }
}

.ent-blf-body {
    min-height: 4rem;
}

.ent-blf-howto {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--ent-ink, #f6f7fb);
    line-height: 1.55;
}

.ent-blf-howto li + li {
    margin-top: 0.35rem;
}

.ent-blf-howto code,
.ent-blf-howto-panel code {
    color: #5eead4;
}

[data-theme-mode="light"] .ent-blf-howto {
    color: #0f172a;
}

[data-theme-mode="light"] .ent-blf-howto code,
[data-theme-mode="light"] .ent-blf-howto-panel code {
    color: #0a58ca;
}

.ent-blf-howto-panel {
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    background: rgba(13, 110, 253, 0.06);
}

[data-theme-mode="light"] .ent-blf-howto-panel {
    background: rgba(10, 88, 202, 0.06);
    border-color: rgba(15, 23, 42, 0.1);
}

.ent-blf-howto-panel__title,
.ent-blf-group__title {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ent-muted, #b3b3b3);
}

.ent-blf-group {
    margin-bottom: 0.25rem;
}

.ent-blf-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .ent-blf-list {
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem 0.65rem;
    }
}

.ent-blf-list > [role="listitem"] {
    min-width: 0;
    display: flex;
}

.ent-blf-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    height: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    background: var(--ent-surface-raised, #1a1a1a);
}

[data-theme-mode="light"] .ent-blf-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

.ent-blf-card__title {
    margin: 0 0 0.2rem;
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ent-ink, #f6f7fb);
}

[data-theme-mode="light"] .ent-blf-card__title {
    color: #0f172a;
}

.ent-blf-card__nick {
    margin-bottom: 0.45rem !important;
}

.ent-blf-card__key-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ent-muted, #b3b3b3);
}

.ent-blf-copy-group .form-control {
    min-width: 0;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ent-ink, #f6f7fb);
}

[data-theme-mode="light"] .ent-blf-copy-group .form-control {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.ent-blf-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    white-space: nowrap;
}

.ent-blf-copy-feedback:not(.d-none) {
    margin-top: 0.35rem;
}

.ent-blf-card__actions {
    margin-top: auto;
    padding-top: 0.15rem;
}

.ent-inline-link {
    color: #5eead4;
    text-decoration: none;
}

.ent-inline-link:hover,
.ent-inline-link:focus-visible {
    color: #99f6e4;
    text-decoration: underline;
}

[data-theme-mode="light"] .ent-inline-link {
    color: #0a58ca;
}

[data-theme-mode="light"] .ent-inline-link:hover,
[data-theme-mode="light"] .ent-inline-link:focus-visible {
    color: #115e59;
}

.ent-blf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--ent-muted, #b3b3b3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
}

.ent-blf-empty i {
    font-size: 1.75rem;
    opacity: 0.75;
    color: #0d6efd;
}

[data-theme-mode="light"] .ent-blf-empty {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

.ent-blf-promo {
    position: relative;
    border-radius: 1rem;
    padding: 2.25rem 2rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.08) 0%, rgba(13, 110, 253, 0.01) 100%);
    border: 1px solid rgba(13, 110, 253, 0.16);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}

[data-theme-mode="light"] .ent-blf-promo {
    background: linear-gradient(135deg, rgba(10, 88, 202, 0.06) 0%, rgba(10, 88, 202, 0.01) 100%);
    border-color: rgba(10, 88, 202, 0.18);
    box-shadow: 0 12px 24px -10px rgba(10, 88, 202, 0.12);
}

.ent-blf-promo:hover {
    border-color: rgba(13, 110, 253, 0.3);
    box-shadow: 0 20px 32px -8px rgba(0, 0, 0, 0.5), 0 0 15px rgba(13, 110, 253, 0.05);
}

.ent-blf-promo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

[data-theme-mode="light"] .ent-blf-promo__eyebrow {
    background: rgba(10, 88, 202, 0.1);
    color: #0a58ca;
}

.ent-blf-promo__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ent-ink);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.ent-blf-promo__desc {
    color: var(--ent-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    max-width: 580px;
}

.ent-blf-promo__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ent-blf-promo__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--ent-ink);
}

.ent-blf-promo__features li i {
    font-size: 1.1rem;
    color: #0d6efd;
    line-height: 1.2;
}

[data-theme-mode="light"] .ent-blf-promo__features li i {
    color: #0a58ca;
}

.ent-blf-promo__features li strong {
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-blf-promo__btn.btn.btn-primary {
    background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
    background-color: #0d6efd !important;
    border-color: transparent !important;
    color: #101010 !important;
    font-weight: 700;
    padding: 0.55rem 1.25rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ent-blf-promo__btn.btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3) !important;
    color: #101010 !important;
}

/* BLF Phone Mockup Graphic */
.ent-blf-mockup {
    width: 240px;
    background: #1e1e1e;
    border: 4px solid #2d2d2d;
    border-radius: 1.25rem;
    padding: 0.5rem;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 8px 24px -6px rgba(0, 0, 0, 0.6);
}

[data-theme-mode="light"] .ent-blf-mockup {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 8px 24px -6px rgba(0, 0, 0, 0.1);
}

.ent-blf-mockup__screen {
    background: #0c0a09;
    border-radius: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

[data-theme-mode="light"] .ent-blf-mockup__screen {
    background: #0f172a;
}

.ent-blf-mockup__screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.35rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ent-blf-mockup__screen-header i {
    color: #0d6efd;
}

.ent-blf-mockup__key {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s;
}

.ent-blf-mockup__key:last-child {
    margin-bottom: 0;
}

.ent-blf-mockup__led-container {
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ent-blf-mockup__led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4b5563; /* Grey/Off */
    display: inline-block;
}

.ent-blf-mockup__key.is-active {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}

.ent-blf-mockup__key.is-active .ent-blf-mockup__led {
    background: #ef4444; /* Red / active */
    box-shadow: 0 0 8px #ef4444;
}

@keyframes hstLedPulse {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 4px #ef4444;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.7;
        box-shadow: 0 0 12px 2px #ef4444;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 4px #ef4444;
    }
}

.ent-blf-mockup__led--pulse {
    animation: hstLedPulse 1.4s infinite ease-in-out;
}

.ent-blf-mockup__key-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.ent-blf-mockup__key-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
}

.ent-blf-mockup__key-state {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
}

.ent-blf-mockup__key.is-active .ent-blf-mockup__key-state {
    color: #fca5a5;
    font-weight: 600;
}

/* ---- Responsive: collapse to horizontal scrollable bar ---- */
@media (max-width: 991.98px) {
    .ent-detail-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ent-detail-sidenav {
        position: static;
        max-width: none;
        width: auto;
        max-height: none;
        overflow: visible;
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0;
    }

    .ent-detail-sidenav-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.3rem;
        padding: 0.5rem 0.55rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ent-detail-sidenav-list::-webkit-scrollbar {
        display: none;
    }

    .ent-detail-sidenav-link {
        padding: 0.35rem 0.7rem;
        margin: 0;
        border-radius: 999px;
        font-size: 0.8rem;
        border: 1px solid var(--ent-border);
        background: transparent;
        flex-shrink: 0;
    }

    button.ent-detail-sidenav-link--button {
        width: auto;
    }

    .ent-detail-sidenav-link.is-active {
        border-color: rgba(13, 110, 253, 0.5);
    }
}

/* Hybrid SIP Trunks — manage Operator panels (Live Calls / Registration Logs / CDRs) */
.ent-op-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--ent-muted, #b3b3b3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
}

.ent-op-empty i {
    font-size: 1.75rem;
    opacity: 0.75;
}

[data-theme-mode="light"] .ent-op-empty {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

.ent-op-live-calls-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ent-op-live-call {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="light"] .ent-op-live-call {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.02);
}

.ent-op-live-call__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ent-op-live-call__peer {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ent-ink, #f6f7fb);
}

.ent-op-live-call__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.ent-op-reg-logs-table-wrap {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.65rem;
    overflow: auto;
}

[data-theme-mode="light"] .ent-op-reg-logs-table-wrap {
    border-color: rgba(15, 23, 42, 0.08);
}

.ent-op-reg-logs-table {
    font-size: 0.8125rem;
    --bs-table-bg: transparent;
    --bs-table-color: var(--ent-ink, #f6f7fb);
    --bs-table-border-color: rgba(255, 255, 255, 0.06);
}

.ent-op-reg-logs-table thead th {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--ent-muted, #b3b3b3);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme-mode="light"] .ent-op-reg-logs-table {
    --bs-table-border-color: rgba(15, 23, 42, 0.08);
}

[data-theme-mode="light"] .ent-op-reg-logs-table thead th {
    background: rgba(15, 23, 42, 0.03);
}

.ent-op-reg-logs-table tbody tr:hover {
    background: rgba(13, 110, 253, 0.04);
}

.ent-op-cdr-table tbody tr.ent-op-cdr-row {
    cursor: pointer;
}

.ent-op-cdr-table tbody tr.ent-op-cdr-row:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.55);
    outline-offset: -2px;
}

/* Hybrid SIP Trunks — Calls page (live cards + detail timeline) */
.ent-calls-live-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ent-calls-live-card {
    padding: 0.85rem 1rem;
    border: 1px solid var(--ent-border);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.02);
}

[data-theme-mode="light"] .ent-calls-live-card {
    background: rgba(15, 23, 42, 0.02);
}

.ent-calls-live-card:hover {
    border-color: rgba(13, 110, 253, 0.35);
}

.ent-calls-history-row {
    cursor: pointer;
}

.ent-calls-history-row:hover {
    background: rgba(13, 110, 253, 0.04);
}

/* Call details modal — meta (left) + event timeline (right); stacks on narrow widths */
.ent-calls-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
    align-items: start;
    min-width: 0;
}

.ent-calls-detail-pane {
    min-width: 0;
}

.ent-calls-detail-pane--timeline {
    border-left: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    padding-left: 1.5rem;
}

[data-theme-mode="light"] .ent-calls-detail-pane--timeline {
    border-left-color: rgba(15, 23, 42, 0.1);
}

/* Dense 2-col field grid inside the left meta pane */
.ent-calls-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.85rem;
    margin: 0;
}

.ent-calls-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.02);
}

.ent-calls-detail-meta-item dt {
    margin: 0;
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ent-calls-detail-meta-item dd {
    margin: 0;
    color: var(--ent-ink, #f6f7fb);
    font-size: 0.875rem;
    word-break: break-word;
}

[data-theme-mode="light"] .ent-calls-detail-meta-item {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.1);
}

@media (max-width: 991.98px) {
    .ent-calls-detail-layout {
        grid-template-columns: 1fr;
    }

    .ent-calls-detail-pane--timeline {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
        padding-top: 1.25rem;
    }

    [data-theme-mode="light"] .ent-calls-detail-pane--timeline {
        border-top-color: rgba(15, 23, 42, 0.1);
    }
}

@media (max-width: 575.98px) {
    .ent-calls-detail-meta {
        grid-template-columns: 1fr;
    }
}

.ent-calls-timeline {
    position: relative;
    padding-left: 1.15rem;
}

.ent-calls-timeline::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: rgba(100, 116, 139, 0.28);
}

.ent-calls-timeline-item {
    position: relative;
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ent-calls-timeline-item:last-child {
    margin-bottom: 0;
}

.ent-calls-timeline-marker {
    position: absolute;
    left: -1.05rem;
    top: 0.35rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #0d6efd;
    border: 2px solid var(--ent-surface, #161616);
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.45);
}

.ent-calls-timeline-body {
    flex: 1;
    min-width: 0;
}

.ent-calls-timeline-detail {
    padding: 0.45rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid var(--ent-border);
    background: rgba(100, 116, 139, 0.12);
    color: var(--ent-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Hybrid SIP Trunks — Premium Features promo card & modal (purple accent) ---------------- */
.ent-promo-premium-card {
    background: var(--ent-surface-raised, #161616) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.04) !important;
}

.ent-promo-premium-card:hover,
.ent-promo-premium-card:focus-visible {
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.08) !important;
    transform: translateY(-2px);
    outline: none;
}

.ent-promo-premium-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: #7c3aed !important;
    color: #ffffff !important;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.3) !important;
}

.ent-promo-premium-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border: none !important;
    color: #ffffff !important;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
    width: 100%;
}

.ent-promo-premium-card:hover .ent-promo-premium-btn {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

[data-theme-mode="light"] .ent-promo-premium-card {
    background: #ffffff !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme-mode="light"] .ent-promo-premium-card:hover {
    border-color: rgba(124, 58, 237, 0.4) !important;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.08) !important;
}

[data-theme-mode="light"] .ent-promo-premium-icon-box {
    background: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.2) !important;
}

.portal-premium-purple-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.22);
    flex-shrink: 0;
}

[data-theme-mode="dark"] .portal-premium-purple-badge {
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.28);
}

.portal-modern-modal.ent-premium-modal .modal-header {
    background: linear-gradient(90deg, #5b21b6 0%, #7c3aed 100%) !important;
    border-bottom: none !important;
    padding: 1.25rem 1.5rem !important;
}

.portal-modern-modal.ent-premium-modal .modal-title {
    color: #f6f7fb !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.portal-modern-modal.ent-premium-modal .modal-title i {
    color: #f5f3ff !important;
    font-size: 1.25rem !important;
}

.portal-modern-modal.ent-premium-modal .modal-body {
    padding: 1.75rem 1.5rem 1.5rem !important;
    background: var(--ent-surface, #161616) !important;
    color: var(--ent-ink, #f6f7fb) !important;
}

.portal-modern-modal.ent-premium-modal .modal-footer {
    background: var(--ent-surface, #161616) !important;
    border-top: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09)) !important;
    padding: 1rem 1.5rem !important;
}

.portal-modern-modal.ent-premium-modal .btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

.portal-modern-modal.ent-premium-modal .btn-primary:hover:not(:disabled),
.portal-modern-modal.ent-premium-modal .btn-primary:focus:not(:disabled) {
    background: linear-gradient(135deg, #9065f7 0%, #834bf0 100%) !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
    transform: translateY(-1px);
}

.ent-premium-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.ent-premium-feature-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ent-premium-feature-item:hover {
    background: rgba(139, 92, 246, 0.04);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

.ent-premium-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.1);
    color: #a855f7;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.ent-premium-feature-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ent-ink, #f6f7fb);
    margin-bottom: 0.5rem;
}

.ent-premium-feature-desc {
    font-size: 0.82rem;
    color: var(--ent-muted, #b3b3b3);
    line-height: 1.4;
    margin-bottom: 1.25rem;
    flex: 1;
}

.ent-premium-feature-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.15);
    color: #c084fc;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    width: 100%;
}

.ent-premium-feature-link:hover {
    background: #7c3aed;
    color: #ffffff;
}

[data-theme-mode="light"] .ent-premium-feature-item {
    background: #f9fafb;
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme-mode="light"] .ent-premium-feature-item:hover {
    background: rgba(124, 58, 237, 0.02);
    border-color: rgba(124, 58, 237, 0.2);
}

[data-theme-mode="light"] .ent-premium-feature-icon {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
}

[data-theme-mode="light"] .ent-premium-feature-link {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
}

[data-theme-mode="light"] .ent-premium-feature-link:hover {
    background: #7c3aed;
    color: #ffffff;
}

/* --- Hybrid SIP Trunks — Registration telemetry ------------------------- */
.ent-registration-page {
    position: relative;
    padding-block: 0.75rem 1.5rem;
}

.ent-registration-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.ent-registration-refresh-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ent-registration-refresh-control .ent-form-select {
    width: 7.5rem;
}

.ent-registration-statusbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ent-border);
    border-radius: 10px;
    background: var(--ent-surface-raised);
    color: var(--ent-muted);
    font-size: 0.875rem;
}

.ent-registration-statusbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.ent-registration-statusbar__item > i {
    color: var(--ent-accent);
}

.ent-registration-table {
    min-width: 62rem;
}

.ent-registration-table > :not(caption) > * > * {
    padding: 0.75rem 0.875rem;
}

.ent-registration-table tbody tr:not(.sipreg-detail-row):hover {
    background: rgba(13, 110, 253, 0.045);
}

.ent-registration-table .sipreg-detail-row > td {
    padding: 0;
    background: rgba(13, 110, 253, 0.035);
}

.ent-registration-table__toggle-cell {
    width: 3rem;
    padding-right: 0 !important;
}

.ent-registration-table__name,
.ent-registration-table__secondary {
    color: var(--ent-muted);
}

.ent-registration-table__nowrap {
    white-space: nowrap;
}

.ent-registration-table__aor {
    color: var(--ent-ink);
    font-weight: 700;
}

.ent-registration-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--ent-border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.ent-registration-badge--online {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.ent-registration-badge--offline {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(148, 163, 184, 0.1);
    color: #b3b3b3;
}

[data-theme-mode="light"] .ent-registration-badge--online {
    color: #15803d;
}

[data-theme-mode="light"] .ent-registration-badge--offline {
    color: #475569;
}

.ent-registration-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ent-muted);
}

.ent-registration-expand:hover,
.ent-registration-expand:focus-visible,
.ent-registration-expand.active {
    border-color: rgba(13, 110, 253, 0.32);
    background: rgba(13, 110, 253, 0.1);
    color: var(--ent-accent);
}

.ent-registration-detail-panel {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ent-border);
}

.ent-registration-device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.875rem 1.25rem;
}

.ent-registration-device-grid__label {
    margin-bottom: 0.2rem;
    color: var(--ent-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.ent-registration-device-grid__value {
    color: var(--ent-ink);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.ent-registration-device-heading {
    margin-bottom: 0.75rem;
    color: var(--ent-muted);
    font-size: 0.8125rem;
    font-weight: 700;
}

.ent-registration-device-divider {
    margin: 0.875rem 0;
    border-color: var(--ent-border);
    opacity: 1;
}

.ent-registration-detail-message {
    margin: 0;
    color: var(--ent-muted);
    font-size: 0.875rem;
}

.ent-registration-detail-message--error {
    color: #f87171;
}

.ent-registration-filter-grid {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) minmax(8rem, 0.65fr) minmax(11rem, 1fr);
    gap: 0.875rem;
    align-items: end;
}

.ent-registration-selected {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ent-registration-retention-note .ent-alert__progress {
    display: none;
}

.ent-registration-event {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
}

.ent-registration-event--success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.ent-registration-event--attempt {
    background: rgba(139, 92, 246, 0.13);
    color: #c4b5fd;
}

.ent-registration-event--challenged {
    background: rgba(245, 158, 11, 0.13);
    color: #fbbf24;
}

.ent-registration-event--failed {
    background: rgba(239, 68, 68, 0.13);
    color: #f87171;
}

[data-theme-mode="light"] .ent-registration-event--success {
    color: #15803d;
}

[data-theme-mode="light"] .ent-registration-event--attempt {
    color: #6d28d9;
}

[data-theme-mode="light"] .ent-registration-event--challenged {
    color: #a16207;
}

[data-theme-mode="light"] .ent-registration-event--failed {
    color: #b91c1c;
}

@media (max-width: 991.98px) {
    .ent-registration-filter-grid {
        grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.5fr);
    }

    .ent-registration-selected {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .ent-registration-toolbar,
    .ent-registration-refresh-control {
        align-items: stretch;
        width: 100%;
    }

    .ent-registration-toolbar > .btn,
    .ent-registration-toolbar > a.btn {
        justify-content: center;
        min-height: 2.75rem;
        flex: 1 1 10rem;
    }

    .ent-registration-refresh-control {
        flex-direction: column;
    }

    .ent-registration-refresh-control .ent-form-select {
        width: 100%;
        min-height: 2.75rem;
    }

    .ent-registration-statusbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .ent-registration-filter-grid {
        grid-template-columns: 1fr;
    }

    .ent-registration-selected {
        grid-column: auto;
    }

    .ent-registration-device-grid {
        grid-template-columns: 1fr;
    }
}

/* Hybrid SIP Trunks — AI & Transcription */

.ent-ai-page {
    --ent-ai-accent: #c084fc;
    --ent-ai-accent-soft: rgba(192, 132, 252, 0.14);
    --ent-ai-surface: var(--ent-surface, #161616);
    --ent-ai-border: var(--ent-border, rgba(255, 255, 255, 0.09));
}

.ent-ai-scope-bar {
    border-color: rgba(192, 132, 252, 0.28);
}

/* Scope toolbar: row1 labels, row2 equal-height controls, footer helpers */
.ent-ai-scope-bar__grid {
    display: grid;
    grid-template-columns: minmax(12rem, 1.5fr) minmax(9rem, 0.9fr) minmax(10rem, 1.1fr);
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.35rem;
    align-items: end;
}

.ent-ai-scope-bar__label {
    grid-row: 1;
    margin-bottom: 0;
    align-self: end;
    min-height: 1.25rem;
    line-height: 1.25rem;
}

.ent-ai-scope-bar__label--spacer {
    visibility: hidden;
    pointer-events: none;
}



.ent-ai-scope-bar__control {
    grid-row: 2;
    width: 100%;
    min-height: 2.375rem;
}

.ent-ai-scope-bar__status {
    grid-row: 2;
    align-self: center;
    min-height: 2.375rem;
    display: flex;
    align-items: center;
    margin: 0;
}

.ent-ai-scope-bar__footer {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--ent-ai-border, rgba(255, 255, 255, 0.09));
}

.ent-ai-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    border: none;
    background: transparent;
    padding: 0;
    overflow: visible;
    animation: hstFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ent-ai-metric-card {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    min-height: 5.75rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--ent-ai-border);
    border-radius: 0.75rem;
    background: var(--ent-ai-surface);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.ent-ai-metric-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 12% 12%, rgba(var(--card-accent-rgb), 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ent-ai-metric-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--card-accent-rgb), 0.35) !important;
    box-shadow: 0 8px 24px -8px rgba(var(--card-accent-rgb), 0.3);
}

.ent-ai-metric-card:hover::before {
    opacity: 1;
}

/* Card Accent color schemes */
.ent-ai-metric-card:nth-child(1) {
    --card-accent: #c084fc;
    --card-accent-rgb: 192, 132, 252;
}
.ent-ai-metric-card:nth-child(2) {
    --card-accent: #f472b6;
    --card-accent-rgb: 244, 114, 182;
}
.ent-ai-metric-card:nth-child(3) {
    --card-accent: #fbbf24;
    --card-accent-rgb: 251, 191, 36;
}
.ent-ai-metric-card:nth-child(4) {
    --card-accent: #2dd4bf;
    --card-accent-rgb: 45, 212, 191;
}

[data-theme-mode="light"] .ent-ai-metric-card:nth-child(1) {
    --card-accent: #7c3aed;
    --card-accent-rgb: 124, 58, 237;
}
[data-theme-mode="light"] .ent-ai-metric-card:nth-child(2) {
    --card-accent: #db2777;
    --card-accent-rgb: 219, 39, 119;
}
[data-theme-mode="light"] .ent-ai-metric-card:nth-child(3) {
    --card-accent: #d97706;
    --card-accent-rgb: 217, 119, 6;
}
[data-theme-mode="light"] .ent-ai-metric-card:nth-child(4) {
    --card-accent: #0a58ca;
    --card-accent-rgb: 10, 88, 202;
}

.ent-ai-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: rgba(var(--card-accent-rgb), 0.12);
    color: var(--card-accent);
    border: 1px solid rgba(var(--card-accent-rgb), 0.2);
    flex: 0 0 auto;
    font-size: 1.2rem;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ent-ai-metric-card:hover .ent-ai-metric-icon {
    transform: scale(1.1);
}

.ent-ai-metric-label {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    letter-spacing: 0.01em;
}

.ent-ai-metric-value {
    color: var(--ent-ink, #f6f7fb);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Token ratio progress bar */
.ent-ai-ratio-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.65rem;
    width: 100%;
}
[data-theme-mode="light"] .ent-ai-ratio-bar {
    background: rgba(0, 0, 0, 0.08);
}
.ent-ai-ratio-fill {
    height: 100%;
    width: 0%;
    background: var(--card-accent);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Entrance Animation */
@keyframes hstFadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ent-ai-features-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ent-ai-feature-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 9rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--ent-ai-border);
    border-radius: 0.5rem;
    background: var(--ent-ai-surface);
}

.ent-ai-feature-chip__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ent-ink, #f6f7fb);
}

.ent-ai-feature-chip__meta {
    font-size: 0.75rem;
    color: var(--ent-muted, #b3b3b3);
}

.ent-ai-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ent-ai-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.ent-ai-insights-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem;
}

.ent-ai-inline-feedback {
    padding: 0.65rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--ent-ai-border);
    font-size: 0.875rem;
}

.ent-ai-inline-feedback--ok {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
}

.ent-ai-inline-feedback--error {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.ent-ai-empty-state {
    padding: 2rem 1.25rem;
    text-align: center;
}

.ent-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.ent-ai-badge--ok {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

.ent-ai-badge--busy {
    background: var(--ent-ai-accent-soft);
    color: #e9d5ff;
}

.ent-ai-badge--err {
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}

.ent-ai-badge--muted {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
}

.ent-ai-spin {
    animation: hst-ai-spin 0.9s linear infinite;
}

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

.ent-ai-code {
    font-size: 0.8125rem;
    color: #e9d5ff;
}

.ent-ai-detail-tabs .nav-link {
    color: var(--ent-muted, #b3b3b3);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.5rem 0.85rem;
}

.ent-ai-detail-tabs .nav-link.active {
    color: var(--ent-ai-accent);
    background: transparent;
    border-bottom-color: var(--ent-ai-accent);
}

.ent-ai-transcript {
    max-height: 28rem;
    overflow: auto;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--ent-ai-border);
    border-radius: 0.5rem;
    background: #121212;
    color: #f6f7fb;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.ent-ai-insight-section {
    padding: 0.85rem 1rem;
    border: 1px solid var(--ent-ai-border);
    border-radius: 0.5rem;
    background: #121212;
    margin-bottom: 0.75rem;
}

.ent-ai-insight-section:last-child {
    margin-bottom: 0;
}

.ent-ai-insight-section__title {
    margin: 0 0 0.4rem;
    font-size: 0.875rem;
    font-weight: 650;
    color: #e9d5ff;
}

.ent-ai-insight-section__body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #f6f7fb;
    white-space: pre-wrap;
    word-break: break-word;
}

.ent-ai-insight-section__title i {
    color: var(--ent-ai-accent, #c084fc);
    margin-right: 0.15rem;
}

.ent-ai-insight-empty {
    margin: 0;
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.875rem;
}

/* Sentiment insight */
.ent-ai-sentiment-overview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ent-ai-sentiment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

.ent-ai-sentiment-badge--lg {
    padding: 0.4rem 0.85rem;
    font-size: 0.9375rem;
}

.ent-ai-sentiment-badge--sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    flex: 0 0 auto;
}

.ent-ai-sentiment-badge--positive {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

.ent-ai-sentiment-badge--neutral {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

.ent-ai-sentiment-badge--negative {
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
}

.ent-ai-sentiment-badge__score {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.ent-ai-sentiment-rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.ent-ai-sentiment-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.ent-ai-sentiment-row__text {
    margin: 0;
    color: #f6f7fb;
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
}

/* Ranked insight lists: Topic Detection / Intent Recognition */
.ent-ai-rank-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ent-ai-rank-item__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.ent-ai-rank-item__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f6f7fb;
}

.ent-ai-rank-item__pct {
    font-size: 0.75rem;
    color: var(--ent-muted, #b3b3b3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ent-ai-rank-item__bar {
    height: 0.4rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.ent-ai-rank-item__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ent-ai-accent, #c084fc), rgba(192, 132, 252, 0.55));
}

/* Collapsible evidence (source quotes) behind topics / intent / sentiment / entities */
.ent-ai-insight-evidence {
    margin-top: 0.85rem;
}

.ent-ai-insight-evidence summary {
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ent-ai-accent, #c084fc);
    list-style: none;
}

.ent-ai-insight-evidence summary::-webkit-details-marker {
    display: none;
}

.ent-ai-insight-evidence summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 0.35rem;
    transition: transform 0.15s ease;
}

.ent-ai-insight-evidence[open] summary::before {
    transform: rotate(90deg);
}

.ent-ai-evidence-rows {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--ent-ai-border, rgba(255, 255, 255, 0.09));
}

.ent-ai-evidence-row__text {
    margin: 0 0 0.35rem;
    color: #f6f7fb;
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.5;
    word-break: break-word;
}

.ent-ai-evidence-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ent-ai-evidence-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--ent-ai-accent-soft, rgba(192, 132, 252, 0.14));
    color: #e9d5ff;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Entity Detection chips */
.ent-ai-entity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ent-ai-entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--ent-ai-border, rgba(255, 255, 255, 0.09));
    border-radius: 999px;
    background: var(--ent-ai-surface, #161616);
    font-size: 0.75rem;
    font-weight: 600;
    color: #f6f7fb;
}

.ent-ai-entity-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--ent-ai-accent-soft, rgba(192, 132, 252, 0.14));
    color: #e9d5ff;
    font-size: 0.6875rem;
}

/* Fallback: readable raw JSON for any insight shape we don't render a custom view for */
.ent-ai-insight-raw {
    max-height: 20rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ent-ai-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.5rem;
    background: #121212;
    color: #f6f7fb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme-mode="light"] .ent-ai-metric-card,
[data-theme-mode="light"] .ent-ai-feature-chip,
[data-theme-mode="light"] .ent-ai-transcript,
[data-theme-mode="light"] .ent-ai-insight-section {
    background: #ffffff;
}

[data-theme-mode="light"] .ent-ai-metric-value,
[data-theme-mode="light"] .ent-ai-insight-section__body,
[data-theme-mode="light"] .ent-ai-transcript {
    color: #0f172a;
}

[data-theme-mode="light"] .ent-ai-code,
[data-theme-mode="light"] .ent-ai-insight-section__title,
[data-theme-mode="light"] .ent-ai-detail-tabs .nav-link.active {
    color: #7c3aed;
}

[data-theme-mode="light"] .ent-ai-sentiment-row__text,
[data-theme-mode="light"] .ent-ai-evidence-row__text,
[data-theme-mode="light"] .ent-ai-rank-item__label,
[data-theme-mode="light"] .ent-ai-entity-chip {
    color: #0f172a;
}

[data-theme-mode="light"] .ent-ai-entity-chip,
[data-theme-mode="light"] .ent-ai-insight-raw {
    background: #ffffff;
}

[data-theme-mode="light"] .ent-ai-insight-raw {
    color: #0f172a;
}

[data-theme-mode="light"] .ent-ai-insight-evidence summary {
    color: #7c3aed;
}

[data-theme-mode="light"] .ent-ai-rank-item__bar {
    background: rgba(100, 116, 139, 0.2);
}

[data-theme-mode="light"] .ent-ai-sentiment-badge--neutral {
    background: rgba(100, 116, 139, 0.16);
    color: #334155;
}

[data-theme-mode="light"] .ent-ai-inline-feedback--ok {
    color: #166534;
}

[data-theme-mode="light"] .ent-ai-inline-feedback--error {
    color: #b91c1c;
}

@media (max-width: 991.98px) {
    .ent-ai-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ent-ai-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .ent-ai-summary-strip {
        grid-template-columns: 1fr;
    }

    .ent-ai-metric-card {
        min-height: 0;
    }

    .ent-ai-settings-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

.ent-ai-intro {
    max-width: 72ch;
    text-wrap: pretty;
}

/* Manage detail — AI Controls benefit-led intro */
.ent-ai-controls-intro {
    --ent-ai-controls-intro-accent: #7c3aed;
    --ent-ai-controls-intro-border: rgba(192, 132, 252, 0.32);
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 0.55rem;
    border: 1px solid var(--ent-ai-controls-intro-border);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(124, 58, 237, 0.16), transparent 55%),
        rgba(124, 58, 237, 0.07);
}

.ent-ai-controls-intro__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ent-ai-controls-intro-accent);
    color: #ffffff;
    font-size: 1.15rem;
}

.ent-ai-controls-intro__body {
    flex: 1;
    min-width: 0;
}

.ent-ai-controls-intro__title {
    margin: 0 0 0.3rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ent-ink, #f6f7fb);
    line-height: 1.3;
    text-wrap: balance;
}

.ent-ai-controls-intro__text {
    margin: 0 0 0.7rem;
    font-size: 0.8125rem;
    color: var(--ent-ink, #f6f7fb);
    line-height: 1.45;
    max-width: 68ch;
    text-wrap: pretty;
}

.ent-ai-controls-intro__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
}

.ent-ai-controls-intro__chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.28rem 0.55rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(16, 16, 16, 0.45);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ent-muted, #b3b3b3);
    line-height: 1.3;
}

.ent-ai-controls-intro__chips li i {
    flex-shrink: 0;
    color: #c084fc;
    font-size: 0.9rem;
}

.ent-ai-controls-intro__prereq {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
    border: 1px solid rgba(192, 132, 252, 0.25);
    background: rgba(16, 16, 16, 0.45);
    font-size: 0.8125rem;
    color: var(--ent-ink, #f6f7fb);
    line-height: 1.4;
}

.ent-ai-controls-intro__prereq > i {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #c084fc;
    font-size: 1.05rem;
}

.ent-ai-controls-intro__prereq strong {
    font-weight: 700;
}

/* API Box inside AI controls intro */
.ent-ai-controls-intro__api-box {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(192, 132, 252, 0.2);
    background: rgba(16, 16, 16, 0.35);
}

.ent-ai-controls-intro__api-icon i {
    color: #c084fc;
    font-size: 1.25rem;
}

.ent-ai-controls-intro__api-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ent-ink, #f6f7fb);
}

.ent-ai-controls-intro__api-text {
    font-size: 0.75rem;
    color: var(--ent-muted, #b3b3b3);
    line-height: 1.4;
}

.ent-ai-controls-intro__api-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c084fc;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ent-ai-controls-intro__api-link:hover {
    color: #e9d5ff;
    text-decoration: underline;
}

.ent-ai-controls-intro__api-link i {
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}

.ent-ai-controls-intro__api-link:hover i {
    transform: translateX(2px);
}

.ent-ai-stats-intro {
    max-width: 62ch;
}

.ent-ai-stats-intro__lead {
    font-size: 0.875rem;
    color: var(--ent-muted, #b3b3b3);
    line-height: 1.45;
    text-wrap: pretty;
}

/* Panel chrome only — inner alignment uses .ent-ai-scope-bar__grid */
.ent-ai-scope-bar {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(192, 132, 252, 0.28);
    border-radius: 12px;
    background: var(--ent-surface, #161616);
}

.ent-ai-scope-copy {
    align-self: center;
}

.ent-ai-scope-controls {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(8rem, 0.45fr);
    gap: 0.75rem;
}

.ent-ai-scope-field {
    min-width: 0;
}

.ent-ai-scope-state {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.25rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--ent-ai-border);
    border-radius: 8px;
    background: var(--ent-surface-raised, #1a1a1a);
}

.ent-ai-scope-state__icon,
.ent-ai-account-guidance__icon,
.ent-ai-setting-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9px;
    background: #7c3aed;
    color: #ffffff;
    font-size: 1.1rem;
}

.ent-ai-scope-state strong,
.ent-ai-scope-state span {
    display: block;
}

.ent-ai-scope-state strong {
    color: var(--ent-ink, #f6f7fb);
    font-size: 0.875rem;
}

.ent-ai-scope-state span span {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.75rem;
    line-height: 1.35;
}

.ent-ai-section-head,
.ent-ai-recordings-head,
.ent-ai-detail-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ent-ai-section-head {
    margin-bottom: 1rem;
}

.ent-ai-recordings-head {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--ent-ai-border);
}

.ent-ai-account-guidance,
.ent-ai-prerequisite {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--ent-ai-border);
    border-radius: 8px;
    background: var(--ent-surface-raised, #1a1a1a);
}

.ent-ai-prerequisite {
    align-items: flex-start;
    border-color: rgba(245, 158, 11, 0.35);
}

.ent-ai-prerequisite > i {
    color: #f59e0b;
    font-size: 1.25rem;
    margin-top: 0.1rem;
}

.ent-ai-prerequisite > div {
    flex: 1 1 auto;
}

.ent-ai-settings-loading {
    padding: 0.5rem 0;
}

.ent-ai-setting-block {
    border: 1px solid var(--ent-ai-border);
    border-radius: 10px;
    background: var(--ent-surface-raised, #1a1a1a);
    overflow: hidden;
}

.ent-ai-setting-block__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem;
    border-bottom: 1px solid var(--ent-ai-border);
}

.ent-ai-setting-block__body {
    padding: 0.9rem;
}

.ent-ai-setting-block .form-switch {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
}

.ent-ai-setting-block .form-switch .form-check-input {
    width: 2.5rem;
    height: 1.35rem;
    cursor: pointer;
}

.ent-ai-feature-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.ent-ai-feature-option {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-height: 3.25rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--ent-ai-border);
    border-radius: 8px;
    background: var(--ent-surface, #161616);
    cursor: pointer;
}

.ent-ai-feature-option:has(input:checked) {
    border-color: rgba(192, 132, 252, 0.48);
}

.ent-ai-feature-option .form-check-input {
    margin-top: 0.2rem;
}

.ent-ai-feature-option span,
.ent-ai-feature-option strong,
.ent-ai-feature-option small {
    display: block;
}

.ent-ai-feature-option strong {
    color: var(--ent-ink, #f6f7fb);
    font-size: 0.8125rem;
}

.ent-ai-feature-option small {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.75rem;
    line-height: 1.35;
}

.ent-ai-settings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ent-ai-border);
}



.ent-ai-summary-item {
    min-width: 0;
    padding: 0.9rem 1rem;
    border-right: 1px solid var(--ent-ai-border);
}

.ent-ai-summary-item:last-child {
    border-right: 0;
}

.ent-ai-summary-item span,
.ent-ai-summary-item strong {
    display: block;
}

.ent-ai-summary-item span {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
}

.ent-ai-summary-item strong {
    color: var(--ent-ink, #f6f7fb);
    font-size: 1.15rem;
    font-weight: 700;
}

.ent-ai-summary-item--total {
    background: rgba(124, 58, 237, 0.1);
}

.ent-ai-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--ent-ai-border);
    border-radius: 999px;
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.ent-ai-status-badge--ready {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
}

.ent-ai-status-badge--processing {
    border-color: rgba(192, 132, 252, 0.36);
    background: rgba(124, 58, 237, 0.1);
    color: #e9d5ff;
}

.ent-ai-status-badge--failed {
    border-color: rgba(239, 68, 68, 0.38);
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

.ent-ai-status-badge--purged,
.ent-ai-status-badge--neutral {
    background: rgba(148, 163, 184, 0.1);
}

.ent-ai-detail-modal .modal-dialog {
    max-width: 76rem;
}

.ent-ai-detail-context {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.875rem;
}

.ent-ai-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1rem;
}

.ent-ai-detail-section {
    min-width: 0;
}

.ent-ai-detail-section__head {
    align-items: center;
    min-height: 2.75rem;
    margin-bottom: 0.65rem;
}

.ent-ai-transcript {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    white-space: normal;
    font-family: inherit;
}

.ent-ai-transcript--plain {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.ent-ai-transcript--message {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ent-ai-transcript-line {
    display: grid;
    grid-template-columns: minmax(4.75rem, 5.5rem) minmax(0, 1fr);
    gap: 0.65rem 0.85rem;
    align-items: start;
    padding: 0.15rem 0 0.55rem 0.65rem;
    border-bottom: 1px solid var(--ent-ai-border);
    border-left: 2px solid transparent;
}

.ent-ai-transcript-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ent-ai-transcript-line--caller {
    border-left-color: rgba(192, 132, 252, 0.55);
}

.ent-ai-transcript-line--callee,
.ent-ai-transcript-line--agent {
    border-left-color: rgba(167, 139, 250, 0.35);
}

.ent-ai-transcript-line__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding-top: 0.1rem;
}

.ent-ai-transcript-line__speaker {
    color: #e9d5ff;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.ent-ai-transcript-line__time {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.ent-ai-transcript-line__text {
    margin: 0;
    color: #f6f7fb;
    font-size: 0.875rem;
    line-height: 1.55;
    word-break: break-word;
}

.ent-ai-transcript-line strong {
    color: #e9d5ff;
    font-size: 0.75rem;
}

.ent-ai-insights-content {
    max-height: 28rem;
    overflow: auto;
}

.ent-ai-insight-section h4 {
    margin: 0 0 0.4rem;
    color: #e9d5ff;
    font-size: 0.875rem;
    font-weight: 650;
    text-transform: capitalize;
}

.ent-ai-insight-section p {
    margin: 0;
    color: var(--ent-ink, #f6f7fb);
    font-size: 0.875rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

[data-theme-mode="light"] .ent-ai-scope-bar,
[data-theme-mode="light"] .ent-ai-scope-state,
[data-theme-mode="light"] .ent-ai-account-guidance,
[data-theme-mode="light"] .ent-ai-prerequisite,
[data-theme-mode="light"] .ent-ai-setting-block,
[data-theme-mode="light"] .ent-ai-feature-option {
    background: #ffffff;
}

[data-theme-mode="light"] .ent-ai-controls-intro {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(124, 58, 237, 0.08), transparent 55%),
        #f3f4f6;
    border-color: rgba(124, 58, 237, 0.24);
}

[data-theme-mode="light"] .ent-ai-controls-intro__title,
[data-theme-mode="light"] .ent-ai-controls-intro__text,
[data-theme-mode="light"] .ent-ai-controls-intro__prereq {
    color: #1a1a1a;
}

[data-theme-mode="light"] .ent-ai-controls-intro__chips li {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.18);
    color: #4b5563;
}

[data-theme-mode="light"] .ent-ai-controls-intro__chips li i {
    color: #7c3aed;
}

[data-theme-mode="light"] .ent-ai-controls-intro__prereq {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.18);
}

[data-theme-mode="light"] .ent-ai-controls-intro__prereq > i {
    color: #7c3aed;
}

[data-theme-mode="light"] .ent-ai-controls-intro__api-box {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.15);
}

[data-theme-mode="light"] .ent-ai-controls-intro__api-icon i {
    color: #7c3aed;
}

[data-theme-mode="light"] .ent-ai-controls-intro__api-title {
    color: #1a1a1a;
}

[data-theme-mode="light"] .ent-ai-controls-intro__api-text {
    color: #4b5563;
}

[data-theme-mode="light"] .ent-ai-controls-intro__api-link {
    color: #7c3aed;
}

[data-theme-mode="light"] .ent-ai-controls-intro__api-link:hover {
    color: #6d28d9;
}

[data-theme-mode="light"] .ent-ai-stats-intro__lead {
    color: #4b5563;
}

[data-theme-mode="light"] .ent-ai-status-badge--ready {
    color: #166534;
}

[data-theme-mode="light"] .ent-ai-status-badge--processing,
[data-theme-mode="light"] .ent-ai-transcript-line__speaker,
[data-theme-mode="light"] .ent-ai-transcript-line strong,
[data-theme-mode="light"] .ent-ai-insight-section h4 {
    color: #6d28d9;
}

[data-theme-mode="light"] .ent-ai-transcript-line--caller {
    border-left-color: rgba(124, 58, 237, 0.55);
}

[data-theme-mode="light"] .ent-ai-transcript-line--callee,
[data-theme-mode="light"] .ent-ai-transcript-line--agent {
    border-left-color: rgba(124, 58, 237, 0.28);
}

[data-theme-mode="light"] .ent-ai-transcript-line__text {
    color: #0f172a;
}

[data-theme-mode="light"] .ent-ai-transcript--message {
    color: #64748b;
}

[data-theme-mode="light"] .ent-ai-status-badge--failed {
    color: #b91c1c;
}

@media (max-width: 1199.98px) {
    .ent-ai-scope-bar__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr);
    }

    .ent-ai-scope-state {
        grid-column: 1 / -1;
    }

    .ent-ai-summary-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ent-ai-summary-item:nth-child(3) {
        border-right: 0;
    }

    .ent-ai-summary-item:nth-child(n + 4) {
        border-top: 1px solid var(--ent-ai-border);
    }
}

@media (max-width: 767.98px) {
    .ent-ai-scope-bar__grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 0.35rem;
    }

    .ent-ai-scope-bar__label,
    .ent-ai-scope-bar__control,
    .ent-ai-scope-bar__status {
        grid-row: auto;
    }

    .ent-ai-scope-bar__label--spacer {
        display: none;
    }

    .ent-ai-scope-bar__status {
        min-height: 0;
        margin-top: 0.25rem;
    }

    .ent-ai-scope-controls,
    .ent-ai-settings-grid,
    .ent-ai-detail-grid,
    .ent-ai-feature-options,
    .ent-ai-summary-strip {
        grid-template-columns: 1fr;
    }

    .ent-ai-scope-state {
        grid-column: auto;
    }

    .ent-ai-summary-item,
    .ent-ai-summary-item:nth-child(3) {
        border-right: 0;
        border-top: 1px solid var(--ent-ai-border);
    }

    .ent-ai-summary-item:first-child {
        border-top: 0;
    }

    .ent-ai-section-head,
    .ent-ai-recordings-head,
    .ent-ai-detail-section__head,
    .ent-ai-prerequisite {
        flex-direction: column;
        align-items: stretch;
    }

    .ent-ai-controls-intro {
        flex-direction: column;
        gap: 0.65rem;
    }

    .ent-ai-controls-intro__chips {
        gap: 0.35rem;
    }

    .ent-ai-controls-intro__chips li {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: 8.5rem;
    }

    .ent-ai-account-guidance {
        align-items: flex-start;
    }

    .ent-ai-setting-block__head {
        flex-wrap: wrap;
    }

    .ent-ai-setting-block__head .form-switch {
        margin-left: 0 !important;
    }

    .ent-ai-prerequisite .btn,
    .ent-ai-settings-actions .btn,
    .ent-ai-open-detail {
        min-height: 44px;
    }

    .ent-ai-transcript-line {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .ent-ai-transcript-line__meta {
        flex-direction: row;
        align-items: baseline;
        gap: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ent-ai-spin {
        animation: none;
    }
}

/* ==========================================================================
   Hybrid SIP Trunks — Webhooks (manage detail section)
   ========================================================================== */

.ent-webhooks-intro {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

[data-theme-mode="light"] .ent-webhooks-intro {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
}

.ent-webhooks-intro__icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.12);
    color: #f87171;
    font-size: 1.15rem;
}

[data-theme-mode="light"] .ent-webhooks-intro__icon {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.ent-webhooks-intro__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f6f7fb;
}

[data-theme-mode="light"] .ent-webhooks-intro__title {
    color: #111827;
}

.ent-webhooks-intro__text {
    font-size: 0.875rem;
    color: #b3b3b3;
}

[data-theme-mode="light"] .ent-webhooks-intro__text {
    color: #4b5563;
}

/* Webhooks sub-tabs: Webhooks (current setup) / Webhook events */
.ent-webhooks-subtabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

[data-theme-mode="light"] .ent-webhooks-subtabs {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
}

.ent-webhooks-subtab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #b3b3b3;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ent-webhooks-subtab:hover {
    color: #f6f7fb;
}

.ent-webhooks-subtab.is-active {
    background: rgba(139, 92, 246, 0.16);
    color: #c4b5fd;
}

[data-theme-mode="light"] .ent-webhooks-subtab {
    color: #4b5563;
}

[data-theme-mode="light"] .ent-webhooks-subtab:hover {
    color: #111827;
}

[data-theme-mode="light"] .ent-webhooks-subtab.is-active {
    background: rgba(139, 92, 246, 0.12);
    color: #6d28d9;
}

.ent-webhooks-subtab:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

/* Webhooks current-setup summary card */
.ent-webhooks-summary-card {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: #161616;
}

[data-theme-mode="light"] .ent-webhooks-summary-card {
    border-color: rgba(15, 23, 42, 0.1);
    background: #ffffff;
}

.ent-webhooks-summary-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.ent-webhooks-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ent-webhooks-summary-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0.35rem 1rem;
    align-items: start;
}

.ent-webhooks-summary-term {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #b3b3b3;
}

[data-theme-mode="light"] .ent-webhooks-summary-term {
    color: #6b7280;
}

.ent-webhooks-summary-desc {
    min-width: 0;
    font-size: 0.875rem;
    color: #e5e7eb;
}

[data-theme-mode="light"] .ent-webhooks-summary-desc {
    color: #1f2937;
}

.ent-webhooks-summary-url {
    overflow-wrap: anywhere;
}

.ent-webhooks-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ent-webhooks-summary-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #e5e7eb;
    font-size: 0.75rem;
}

[data-theme-mode="light"] .ent-webhooks-summary-chip {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.04);
    color: #1f2937;
}

.ent-webhooks-event-types {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ent-webhooks-event-types.is-invalid {
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(239, 68, 68, 0.55);
    border-radius: 0.5rem;
}

.ent-webhooks-config-modal .ent-form-control.is-invalid {
    border-color: rgba(239, 68, 68, 0.55) !important;
}

.ent-webhooks-event-group {
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: #161616;
}

[data-theme-mode="light"] .ent-webhooks-event-group {
    border-color: rgba(15, 23, 42, 0.1);
    background: #ffffff;
}

.ent-webhooks-event-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
}

.ent-webhooks-secret-once {
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(234, 179, 8, 0.35);
    border-radius: 8px;
    background: rgba(234, 179, 8, 0.08);
}

.ent-webhooks-deliveries-table-wrap {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    overflow: auto;
}

[data-theme-mode="light"] .ent-webhooks-deliveries-table-wrap {
    border-color: rgba(15, 23, 42, 0.1);
}

.ent-webhooks-deliveries-table {
    margin: 0;
    min-width: 640px;
}

.ent-webhooks-deliveries-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #b3b3b3;
    border-bottom-color: rgba(255, 255, 255, 0.09);
    white-space: nowrap;
}

[data-theme-mode="light"] .ent-webhooks-deliveries-table thead th {
    color: #6b7280;
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

.ent-webhooks-payload-pre {
    max-height: 22rem;
    overflow: auto;
    padding: 0.85rem 1rem;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: #101010;
    color: #e5e7eb;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre;
}

[data-theme-mode="light"] .ent-webhooks-payload-pre {
    border-color: rgba(15, 23, 42, 0.1);
    background: #f8fafc;
    color: #111827;
}

.ent-webhooks-payload-headers {
    padding-left: 1.1rem;
    color: #b3b3b3;
}

[data-theme-mode="light"] .ent-webhooks-payload-headers {
    color: #4b5563;
}

.ent-webhooks-payload-headers li + li {
    margin-top: 0.35rem;
}

.ent-webhooks-payload-notes {
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

[data-theme-mode="light"] .ent-webhooks-payload-notes {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
}

.ent-webhooks-payload-notes-list {
    padding-left: 1.1rem;
    margin: 0;
    color: #b3b3b3;
    font-size: 0.8125rem;
}

[data-theme-mode="light"] .ent-webhooks-payload-notes-list {
    color: #4b5563;
}

.ent-webhooks-payload-notes-list li + li {
    margin-top: 0.35rem;
}

.ent-webhooks-payload-colours-table {
    margin: 0;
}

.ent-webhooks-payload-colours-table th,
.ent-webhooks-payload-colours-table td {
    font-size: 0.8125rem;
    vertical-align: middle;
    border-color: rgba(255, 255, 255, 0.09);
    color: #e5e7eb;
}

[data-theme-mode="light"] .ent-webhooks-payload-colours-table th,
[data-theme-mode="light"] .ent-webhooks-payload-colours-table td {
    border-color: rgba(15, 23, 42, 0.1);
    color: #111827;
}

.ent-webhooks-payload-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.45rem;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    vertical-align: -0.1rem;
}

[data-theme-mode="light"] .ent-webhooks-payload-swatch {
    border-color: rgba(15, 23, 42, 0.2);
}

@media (max-width: 767.98px) {
    .ent-webhooks-event-grid {
        grid-template-columns: 1fr;
    }

    .ent-webhooks-intro {
        flex-direction: column;
        gap: 0.65rem;
    }

    .ent-webhooks-subtabs {
        display: flex;
        width: 100%;
    }

    .ent-webhooks-subtab {
        flex: 1 1 0;
        justify-content: center;
        min-height: 44px;
    }

    .ent-webhooks-summary-row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    #hst-op-webhooks-configure,
    #hst-op-webhooks-save,
    #hst-op-webhooks-test,
    #hst-op-webhooks-delete,
    #hst-op-webhooks-rotate,
    #hst-op-webhooks-payload,
    #hst-op-webhooks-refresh,
    #hst-op-webhooks-deliveries-refresh {
        min-height: 44px;
    }
}

/* ==========================================================================
   Hybrid SIP Trunks — Account-wide Webhooks list
   ========================================================================== */

.ent-webhooks-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ent-webhooks-list-table {
    min-width: 920px;
}

.ent-webhooks-list-table > :not(caption) > * > * {
    vertical-align: middle;
}

.ent-webhooks-list-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #b3b3b3;
    border-bottom-color: rgba(255, 255, 255, 0.09);
    white-space: nowrap;
}

[data-theme-mode="light"] .ent-webhooks-list-table thead th {
    color: #6b7280;
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

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

[data-theme-mode="light"] .ent-webhooks-list-table tbody tr:hover {
    background: rgba(15, 23, 42, 0.03);
}

.ent-webhooks-list-aor {
    font-weight: 600;
    color: #f6f7fb;
    word-break: break-all;
}

[data-theme-mode="light"] .ent-webhooks-list-aor {
    color: #111827;
}

.ent-webhooks-list-url,
.ent-webhooks-list-events,
.ent-webhooks-list-format {
    font-size: 0.875rem;
    color: #e5e7eb;
}

[data-theme-mode="light"] .ent-webhooks-list-url,
[data-theme-mode="light"] .ent-webhooks-list-events,
[data-theme-mode="light"] .ent-webhooks-list-format {
    color: #1f2937;
}

.ent-webhooks-list-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
}

.ent-webhooks-list-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.ent-webhooks-list-badge--enabled {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.ent-webhooks-list-badge--disabled {
    color: #d1d5db;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.ent-webhooks-list-badge--circuit {
    color: #fbbf24;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

[data-theme-mode="light"] .ent-webhooks-list-badge--enabled {
    color: #166534;
    background: rgba(34, 197, 94, 0.12);
}

[data-theme-mode="light"] .ent-webhooks-list-badge--disabled {
    color: #4b5563;
    background: rgba(100, 116, 139, 0.1);
}

[data-theme-mode="light"] .ent-webhooks-list-badge--circuit {
    color: #92400e;
    background: rgba(234, 179, 8, 0.14);
}

.ent-webhooks-list-circuit,
.ent-webhooks-list-delivery {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
}

.ent-webhooks-list-circuit--open,
.ent-webhooks-list-delivery--fail {
    color: #fbbf24;
}

.ent-webhooks-list-delivery--ok {
    color: #86efac;
}

[data-theme-mode="light"] .ent-webhooks-list-circuit--open,
[data-theme-mode="light"] .ent-webhooks-list-delivery--fail {
    color: #92400e;
}

[data-theme-mode="light"] .ent-webhooks-list-delivery--ok {
    color: #166534;
}

.ent-webhooks-list-filter-empty {
    color: #b3b3b3;
    font-size: 0.875rem;
}

[data-theme-mode="light"] .ent-webhooks-list-filter-empty {
    color: #4b5563;
}

.ent-webhooks-list-manage-link {
    min-height: 36px;
}

@media (max-width: 767.98px) {
    .ent-webhooks-list-toolbar {
        justify-content: flex-start;
    }

    .ent-webhooks-list-toolbar .btn,
    #hst-webhooks-list-clear-filters,
    .ent-webhooks-list-manage-link {
        min-height: 44px;
    }
}

/* ==========================================================================
   Hybrid SIP Trunks — Webhooks list empty state redesigned (promotional style)
   ========================================================================== */
#hst-webhooks-list-empty.ent-list-empty-state {
    max-width: 1000px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    margin: 1.5rem auto;
}

.ent-webhooks-promo-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ent-webhooks-promo-hero {
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.12), transparent 60%),
                linear-gradient(135deg, rgba(13, 110, 253, 0.06), rgba(139, 92, 246, 0.04)),
                var(--ent-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
}

[data-theme-mode="light"] .ent-webhooks-promo-hero {
    background: radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.08), transparent 60%),
                linear-gradient(135deg, rgba(13, 110, 253, 0.04), rgba(139, 92, 246, 0.02)),
                #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.ent-webhooks-promo-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.15);
    color: var(--ent-accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

[data-theme-mode="light"] .ent-webhooks-promo-badge {
    background: rgba(13, 110, 253, 0.1);
}

.ent-webhooks-promo-title-main {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ent-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.ent-webhooks-promo-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ent-muted);
    max-width: 680px;
    margin-bottom: 0;
}

.ent-webhooks-promo-btn-cta {
    font-weight: 600;
    padding: 0.6rem 1.5rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
    transition: all 0.25s ease-in-out;
}

.ent-webhooks-promo-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

/* Platform cards */
.ent-webhooks-platform-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--ent-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
    transition: all 0.25s ease-in-out;
}

[data-theme-mode="light"] .ent-webhooks-platform-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

.ent-webhooks-platform-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 110, 253, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .ent-webhooks-platform-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.ent-webhooks-platform-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ent-webhooks-platform-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    font-size: 1.25rem;
}

.ent-webhooks-platform-icon.discord {
    background: rgba(88, 101, 242, 0.15);
    color: #5865f2;
}

.ent-webhooks-platform-icon.slack {
    background: rgba(74, 21, 75, 0.15);
    color: #e01e5a;
}

.ent-webhooks-platform-icon.teams {
    background: rgba(98, 100, 167, 0.15);
    color: #6264a7;
}

.ent-webhooks-platform-icon.google-chat {
    background: rgba(15, 157, 88, 0.15);
    color: #0f9d58;
}

.ent-webhooks-platform-icon.custom-http {
    background: rgba(13, 110, 253, 0.15);
    color: var(--ent-accent);
}

.ent-webhooks-platform-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ent-ink);
    margin: 0;
}

.ent-webhooks-platform-card p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ent-muted);
    margin: 0;
}

/* Specs Section */
.ent-webhooks-specs-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme-mode="light"] .ent-webhooks-specs-panel {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.ent-webhooks-spec-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}

.ent-webhooks-spec-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.12);
    color: var(--ent-accent);
    font-size: 1.1rem;
}

.ent-webhooks-spec-card h5 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ent-ink);
    margin: 0;
}

.ent-webhooks-spec-card p {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ent-muted);
    margin: 0;
}

/* ==========================================================================
   Hybrid SIP Trunks — Music on Hold list empty state redesigned (promotional style)
   ========================================================================== */
#hst-moh-list-empty.ent-list-empty-state {
    max-width: 1000px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    margin: 1.5rem auto;
}

.ent-moh-promo-empty-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ent-moh-promo-empty-hero {
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.12), transparent 60%),
                linear-gradient(135deg, rgba(13, 110, 253, 0.06), rgba(139, 92, 246, 0.04)),
                var(--ent-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
}

[data-theme-mode="light"] .ent-moh-promo-empty-hero {
    background: radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.08), transparent 60%),
                linear-gradient(135deg, rgba(13, 110, 253, 0.04), rgba(139, 92, 246, 0.02)),
                #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.ent-moh-promo-empty-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.15);
    color: var(--ent-accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

[data-theme-mode="light"] .ent-moh-promo-empty-badge {
    background: rgba(13, 110, 253, 0.1);
}

.ent-moh-promo-empty-title-main {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ent-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.ent-moh-promo-empty-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ent-muted);
    max-width: 680px;
    margin-bottom: 0;
}

.ent-moh-promo-empty-btn-cta,
.ent-moh-promo-empty-btn-secondary {
    font-weight: 600;
    padding: 0.6rem 1.5rem !important;
    border-radius: 8px !important;
    transition: all 0.25s ease-in-out;
}

.ent-moh-promo-empty-btn-cta {
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.ent-moh-promo-empty-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

.ent-moh-promo-empty-btn-secondary:hover {
    transform: translateY(-1px);
}

/* Feature cards */
.ent-moh-promo-empty-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--ent-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
    transition: all 0.25s ease-in-out;
}

[data-theme-mode="light"] .ent-moh-promo-empty-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

.ent-moh-promo-empty-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 110, 253, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .ent-moh-promo-empty-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.ent-moh-promo-empty-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ent-moh-promo-empty-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    font-size: 1.25rem;
}

.ent-moh-promo-empty-card-icon.brand {
    background: rgba(13, 110, 253, 0.15);
    color: var(--ent-accent);
}

.ent-moh-promo-empty-card-icon.customer {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.ent-moh-promo-empty-card-icon.formats {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.ent-moh-promo-empty-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ent-ink);
    margin: 0;
}

.ent-moh-promo-empty-card p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ent-muted);
    margin: 0;
}

/* Specs Section */
.ent-moh-promo-empty-specs {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme-mode="light"] .ent-moh-promo-empty-specs {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.ent-moh-promo-empty-spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}

.ent-moh-promo-empty-spec-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.12);
    color: var(--ent-accent);
    font-size: 1.1rem;
}

.ent-moh-promo-empty-spec-item h5 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ent-ink);
    margin: 0;
}

.ent-moh-promo-empty-spec-item p {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ent-muted);
    margin: 0;
}

/* ==========================================================================
   Premium AI Bridge — Calls list empty state redesigned (promotional style)
   ========================================================================== */
.pab-calls-container .pab-empty-state {
    display: block !important; /* Managed by d-none toggle on outer container */
    max-width: 1000px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    margin: 1.5rem auto;
}

.pab-calls-promo-empty-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.pab-calls-promo-empty-hero {
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.12), transparent 60%),
                linear-gradient(135deg, rgba(13, 110, 253, 0.06), rgba(139, 92, 246, 0.04)),
                var(--ent-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
}

[data-theme-mode="light"] .pab-calls-promo-empty-hero {
    background: radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.08), transparent 60%),
                linear-gradient(135deg, rgba(13, 110, 253, 0.04), rgba(139, 92, 246, 0.02)),
                #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.pab-calls-promo-empty-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.15);
    color: var(--ent-accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

[data-theme-mode="light"] .pab-calls-promo-empty-badge {
    background: rgba(13, 110, 253, 0.1);
}

.pab-calls-promo-empty-title-main {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ent-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.pab-calls-promo-empty-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ent-muted);
    max-width: 680px;
    margin-bottom: 0;
}

.pab-calls-promo-empty-btn-cta {
    font-weight: 600;
    padding: 0.6rem 1.5rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
    transition: all 0.25s ease-in-out;
}

.pab-calls-promo-empty-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

/* Feature cards */
.pab-calls-promo-empty-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--ent-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
    transition: all 0.25s ease-in-out;
}

[data-theme-mode="light"] .pab-calls-promo-empty-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

.pab-calls-promo-empty-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 110, 253, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .pab-calls-promo-empty-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.pab-calls-promo-empty-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pab-calls-promo-empty-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    font-size: 1.25rem;
}

.pab-calls-promo-empty-card-icon.routing {
    background: rgba(13, 110, 253, 0.15);
    color: var(--ent-accent);
}

.pab-calls-promo-empty-card-icon.transcript {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.pab-calls-promo-empty-card-icon.crm {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.pab-calls-promo-empty-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ent-ink);
    margin: 0;
}

.pab-calls-promo-empty-card p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ent-muted);
    margin: 0;
}

/* Specs Section */
.pab-calls-promo-empty-specs {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme-mode="light"] .pab-calls-promo-empty-specs {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.pab-calls-promo-empty-spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}

.pab-calls-promo-empty-spec-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.12);
    color: var(--ent-accent);
    font-size: 1.1rem;
}

.pab-calls-promo-empty-spec-item h5 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ent-ink);
    margin: 0;
}

.pab-calls-promo-empty-spec-item p {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ent-muted);
    margin: 0;
}

/* ==========================================================================
   Hybrid SIP Trunks — Live Calls list empty state redesigned (promotional style)
   ========================================================================== */
#hst-calls-live-empty.ent-list-empty-state {
    max-width: 1000px;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    margin: 1.5rem auto;
}

.ent-calls-live-promo-empty-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ent-calls-live-promo-empty-hero {
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.12), transparent 60%),
                linear-gradient(135deg, rgba(13, 110, 253, 0.06), rgba(139, 92, 246, 0.04)),
                var(--ent-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
}

[data-theme-mode="light"] .ent-calls-live-promo-empty-hero {
    background: radial-gradient(120% 140% at 100% 0%, rgba(13, 110, 253, 0.08), transparent 60%),
                linear-gradient(135deg, rgba(13, 110, 253, 0.04), rgba(139, 92, 246, 0.02)),
                #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.ent-calls-live-promo-empty-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.15);
    color: var(--ent-accent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

[data-theme-mode="light"] .ent-calls-live-promo-empty-badge {
    background: rgba(13, 110, 253, 0.1);
}

.ent-calls-live-promo-empty-title-main {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--ent-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.ent-calls-live-promo-empty-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ent-muted);
    max-width: 680px;
    margin-bottom: 0;
}

.ent-calls-live-promo-empty-btn-cta {
    font-weight: 600;
    padding: 0.6rem 1.5rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
    transition: all 0.25s ease-in-out;
}

.ent-calls-live-promo-empty-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

/* Feature cards */
.ent-calls-live-promo-empty-card {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--ent-surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
    transition: all 0.25s ease-in-out;
}

[data-theme-mode="light"] .ent-calls-live-promo-empty-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

.ent-calls-live-promo-empty-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 110, 253, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme-mode="light"] .ent-calls-live-promo-empty-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.ent-calls-live-promo-empty-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ent-calls-live-promo-empty-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    font-size: 1.25rem;
}

.ent-calls-live-promo-empty-card-icon.real-time {
    background: rgba(13, 110, 253, 0.15);
    color: var(--ent-accent);
}

.ent-calls-live-promo-empty-card-icon.timeline {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.ent-calls-live-promo-empty-card-icon.control {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.ent-calls-live-promo-empty-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ent-ink);
    margin: 0;
}

.ent-calls-live-promo-empty-card p {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ent-muted);
    margin: 0;
}

/* Specs Section */
.ent-calls-live-promo-empty-specs {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme-mode="light"] .ent-calls-live-promo-empty-specs {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.ent-calls-live-promo-empty-spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
}

.ent-calls-live-promo-empty-spec-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.12);
    color: var(--ent-accent);
    font-size: 1.1rem;
}

.ent-calls-live-promo-empty-spec-item h5 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ent-ink);
    margin: 0;
}

.ent-calls-live-promo-empty-spec-item p {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--ent-muted);
    margin: 0;
}





/* ==========================================================================
   Hybrid SIP Trunks — Call Parking (hst-parking-*)
   ========================================================================== */

.ent-parking-page .ent-parking-tabs {
    border-bottom-color: var(--ent-border, rgba(255, 255, 255, 0.09));
    gap: 0.25rem;
    flex-wrap: wrap;
}

.ent-parking-page .ent-parking-tabs .nav-link {
    color: var(--ent-muted, #b3b3b3);
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
}

.ent-parking-page .ent-parking-tabs .nav-link:hover,
.ent-parking-page .ent-parking-tabs .nav-link:focus-visible {
    color: var(--ent-ink, #f6f7fb);
    border-color: rgba(13, 110, 253, 0.35);
    background: rgba(13, 110, 253, 0.08);
}

.ent-parking-page .ent-parking-tabs .nav-link.active {
    color: var(--ent-ink, #f6f7fb);
    background: var(--ent-surface-raised, #1a1a1a);
    border-color: var(--ent-border, rgba(255, 255, 255, 0.09));
    border-bottom-color: transparent;
}

.ent-parking-metric {
    background: var(--ent-surface-raised, #1a1a1a);
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    border-radius: 8px;
    padding: 0.85rem 1rem;
    min-height: 4.5rem;
}

.ent-parking-metric__label {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.8125rem;
    margin: 0;
}

.ent-parking-metric__value {
    color: var(--ent-ink, #f6f7fb);
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.ent-parking-empty {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border: 1px dashed rgba(13, 110, 253, 0.35);
    border-radius: 10px;
    background: rgba(13, 110, 253, 0.05);
}

.ent-parking-empty__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0a58ca;
    color: #fff;
    font-size: 1.25rem;
}

.ent-parking-empty__title {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--ent-ink, #f6f7fb);
    margin: 0 0 0.4rem;
}

.ent-parking-empty__text {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.875rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.ent-parking-wallboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.ent-parking-wallboard__grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.ent-parking-card {
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    border-radius: 10px;
    background: var(--ent-surface, #161616);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 9.5rem;
}

.ent-parking-card--occupied {
    border-color: rgba(13, 110, 253, 0.45);
    box-shadow: inset 3px 0 0 #0d6efd;
}

.ent-parking-card--ringing {
    border-color: rgba(234, 179, 8, 0.5);
    box-shadow: inset 3px 0 0 #eab308;
}

.ent-parking-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.ent-parking-card__space-num {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ent-ink, #f6f7fb);
    line-height: 1.1;
}

.ent-parking-card__state {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ent-accent, #0d6efd);
}

.ent-parking-card--ringing .ent-parking-card__state {
    color: #eab308;
}

.ent-parking-card__caller {
    color: var(--ent-ink, #f6f7fb);
    font-size: 0.9375rem;
    font-weight: 550;
    margin: 0.35rem 0 0;
}

.ent-parking-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.45rem;
}

.ent-parking-card__dial code {
    color: var(--ent-accent, #0d6efd);
}

.ent-parking-timer {
    height: 4px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.28);
    overflow: hidden;
    margin: 0.35rem 0 0.15rem;
}

.ent-parking-timer__bar {
    height: 100%;
    background: linear-gradient(90deg, #0a58ca, #0d6efd);
    border-radius: inherit;
    transition: width 0.4s ease;
}

.ent-parking-card--ringing .ent-parking-timer__bar {
    background: linear-gradient(90deg, #ca8a04, #eab308);
}

.ent-parking-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    color: var(--ent-muted, #b3b3b3);
}

.ent-parking-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ent-parking-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    display: inline-block;
}

.ent-parking-dot--idle {
    background: rgba(148, 163, 184, 0.55);
}

.ent-parking-dot--occupied {
    background: #0d6efd;
}

.ent-parking-dot--ringing {
    background: #eab308;
}

.ent-parking-dss-grid__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.55rem;
}

.ent-parking-dss {
    appearance: none;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    background: var(--ent-surface, #161616);
    color: var(--ent-ink, #f6f7fb);
    border-radius: 8px;
    min-height: 5.5rem;
    padding: 0.55rem 0.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ent-parking-dss:hover,
.ent-parking-dss:focus-visible {
    border-color: rgba(13, 110, 253, 0.55);
    outline: none;
    background: rgba(13, 110, 253, 0.08);
}

.ent-parking-dss__num {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ent-parking-dss__state,
.ent-parking-dss__dial,
.ent-parking-dss__caller {
    font-size: 0.75rem;
    color: var(--ent-muted, #b3b3b3);
    line-height: 1.3;
}

.ent-parking-dss--idle .ent-parking-dss__state {
    color: #94a3b8;
}

.ent-parking-dss--occupied {
    border-color: rgba(13, 110, 253, 0.45);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.15);
}

.ent-parking-dss--occupied .ent-parking-dss__state {
    color: #0d6efd;
    font-weight: 600;
}

.ent-parking-dss--ringing {
    border-color: rgba(234, 179, 8, 0.5);
}

.ent-parking-dss--ringing .ent-parking-dss__state {
    color: #eab308;
    font-weight: 600;
}

.ent-parking-timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ent-parking-timeline__item {
    display: flex;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
}

.ent-parking-timeline__item:last-child {
    border-bottom: 0;
}

.ent-parking-timeline__dot {
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.4rem;
    border-radius: 50%;
    background: #0a58ca;
    flex-shrink: 0;
}

.ent-parking-timeline__line {
    color: var(--ent-ink, #f6f7fb);
    font-size: 0.875rem;
}

.ent-parking-stats-window.is-active {
    background: rgba(13, 110, 253, 0.18) !important;
    border-color: rgba(13, 110, 253, 0.55) !important;
    color: var(--ent-ink, #f6f7fb) !important;
}

.ent-parking-help-code {
    border: 1px solid rgba(13, 110, 253, 0.35);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    background: rgba(13, 110, 253, 0.08);
}

.ent-parking-help-code__label {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ent-parking-help-code__code {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ent-accent, #0d6efd);
}

.ent-parking-help-steps {
    padding-left: 1.15rem;
    color: var(--ent-muted, #b3b3b3);
}

.ent-parking-help-steps li + li {
    margin-top: 0.35rem;
}

.ent-parking-tab-content > .tab-pane {
    /* Avoid Bootstrap fade double-paint on data-heavy panes */
    transition: none;
}

[data-theme-mode="light"] .ent-parking-metric,
[data-theme-mode="light"] .ent-parking-card,
[data-theme-mode="light"] .ent-parking-dss {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .ent-parking-empty {
    background: rgba(10, 88, 202, 0.06);
}

[data-theme-mode="light"] .ent-parking-metric__value,
[data-theme-mode="light"] .ent-parking-card__space-num,
[data-theme-mode="light"] .ent-parking-card__caller,
[data-theme-mode="light"] .ent-parking-timeline__line,
[data-theme-mode="light"] .ent-parking-empty__title {
    color: #0f172a;
}

[data-theme-mode="light"] .ent-parking-timer {
    background: rgba(100, 116, 139, 0.22);
}

@media (max-width: 575.98px) {
    .ent-parking-wallboard__grid {
        grid-template-columns: 1fr;
    }

    .ent-parking-dss-grid__inner {
        grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    }
}

/* Create / edit lot modal — intro help blurb */
.ent-parking-lot-intro {
    align-items: flex-start;
    animation: none;
    padding: 0.75rem 0.9rem;
}

.ent-parking-lot-intro__body {
    flex: 1;
    min-width: 0;
}

.ent-parking-lot-intro__lead {
    margin: 0 0 0.55rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ent-ink, #f6f7fb);
    max-width: 62ch;
    text-wrap: pretty;
}

.ent-parking-lot-intro__rules-label {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #5eead4;
    line-height: 1.2;
}

.ent-parking-lot-intro__tips {
    margin: 0;
    padding: 0 0 0 1.1rem;
    list-style: disc;
    max-width: 72ch;
}

.ent-parking-lot-intro__tips li {
    margin: 0 0 0.35rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ent-muted, #b3b3b3);
    line-height: 1.45;
    text-wrap: pretty;
}

.ent-parking-lot-intro__tips li:last-child {
    margin-bottom: 0;
}

[data-theme-mode="light"] .ent-parking-lot-intro__lead {
    color: #0f172a;
}

[data-theme-mode="light"] .ent-parking-lot-intro__rules-label {
    color: #0a58ca;
}

[data-theme-mode="light"] .ent-parking-lot-intro__tips li {
    color: #475569;
}

@media (max-width: 575.98px) {
    .ent-parking-lot-intro {
        flex-direction: column;
        gap: 0.55rem;
    }
}

/* Create / edit lot modal — two-column compact layout.
 * Form wraps .modal-body + .modal-footer, so restore Bootstrap's
 * modal-dialog-scrollable flex chain: body scrolls, footer stays pinned. */
.ent-parking-lot-dialog {
    max-width: min(1100px, calc(100vw - 1.5rem));
}

.ent-parking-lot-dialog .modal-content {
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ent-parking-lot-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.ent-parking-lot-dialog .ent-parking-lot-form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    /* Beat .portal-modern-modal.ent-hybrid-modal .modal-body padding shorthand */
    padding-bottom: 1.75rem !important;
}

.ent-parking-lot-dialog .modal-header,
.ent-parking-lot-dialog .modal-footer {
    flex-shrink: 0;
}

.ent-parking-lot-dialog .modal-footer {
    position: relative;
    z-index: 2;
    margin-top: 0;
}

.ent-parking-lot-form .ent-form-label {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

/* Orbit trunk helper — keep clear of the select / Choices open list */
.ent-parking-lot-orbit-hint {
    display: block;
    margin-top: 0.4rem;
    margin-bottom: 0.15rem;
    line-height: 1.4;
}

.ent-parking-lot-notes-wrap {
    margin-top: 0.15rem;
    padding-bottom: 0.25rem;
}

.ent-parking-lot-hold-input {
    max-width: 7rem;
}

.ent-parking-lot-hold-row.is-nolimit .ent-parking-lot-hold-input,
.ent-parking-lot-hold-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--ent-muted, #b3b3b3);
}

[data-theme-mode="light"] .ent-parking-lot-hold-row.is-nolimit .ent-parking-lot-hold-input,
[data-theme-mode="light"] .ent-parking-lot-hold-input:disabled {
    background-color: rgba(15, 23, 42, 0.06);
    color: #6b7280;
}

.ent-parking-lot-col--orbit {
    padding: 0.75rem 0.9rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ent-parking-lot-col__title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--ent-ink, #f6f7fb);
}

.ent-parking-lot-toggles .form-check-label {
    font-size: 0.875rem;
}

/* CF destination pickers inside parking modal (reuse manage CF overlay CSS). */
.ent-parking-lot-form .ent-edit-cf-dest {
    width: 100%;
}

[data-theme-mode="light"] .ent-parking-lot-col--orbit {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .ent-parking-lot-col__title {
    color: #111827;
}

@media (max-width: 767.98px) {
    .ent-parking-lot-dialog .modal-content {
        max-height: min(94vh, 900px);
    }
}

/* ------------------------------------------------------------------ */
/* Hybrid SIP Trunks — Call Reports (call-stats)                      */
/* ------------------------------------------------------------------ */

.ent-call-stats-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.ent-call-stats-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(13, 110, 253, 0.38);
    background: transparent;
    color: var(--ent-ink, #f6f7fb);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.ent-call-stats-nav-link i {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--ent-accent, #0d6efd);
    transition: color 160ms ease;
}

.ent-call-stats-nav-link:hover,
.ent-call-stats-nav-link:focus-visible {
    background: rgba(13, 110, 253, 0.1);
    border-color: rgba(13, 110, 253, 0.55);
    color: #f6f7fb;
    text-decoration: none;
    outline: none;
}

.ent-call-stats-nav-link:hover i,
.ent-call-stats-nav-link:focus-visible i {
    color: #2dd4bf;
}

.ent-call-stats-nav-link:focus-visible {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.35);
}

.ent-call-stats-nav-link:active {
    background: rgba(13, 110, 253, 0.16);
    border-color: var(--ent-accent, #0d6efd);
}

[data-theme-mode="light"] .ent-call-stats-nav-link {
    border-color: rgba(10, 88, 202, 0.35);
    background: #ffffff;
    color: #0f172a;
}

[data-theme-mode="light"] .ent-call-stats-nav-link i {
    color: #0a58ca;
}

[data-theme-mode="light"] .ent-call-stats-nav-link:hover,
[data-theme-mode="light"] .ent-call-stats-nav-link:focus-visible {
    background: rgba(10, 88, 202, 0.08);
    border-color: rgba(10, 88, 202, 0.5);
    color: #0f172a;
}

[data-theme-mode="light"] .ent-call-stats-nav-link:hover i,
[data-theme-mode="light"] .ent-call-stats-nav-link:focus-visible i {
    color: #0a58ca;
}

@media (max-width: 575.98px) {
    .ent-call-stats-nav {
        justify-content: flex-start;
    }

    .ent-call-stats-nav-link {
        flex: 1 1 auto;
    }
}

.ent-call-stats-filters {
    padding: 0.75rem 0.9rem;
}

.ent-call-stats-filters__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
}

.ent-call-stats-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.35rem 0.65rem 0.35rem 0.35rem;
    border: 1px solid rgba(13, 110, 253, 0.35);
    border-radius: 0.65rem;
    background: var(--ent-surface-raised, #1a1a1a);
    color: var(--ent-ink, #f6f7fb);
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.ent-call-stats-filters__toggle:hover,
.ent-call-stats-filters__toggle:focus-visible {
    border-color: rgba(13, 110, 253, 0.6);
    background: rgba(13, 110, 253, 0.08);
    outline: none;
}

.ent-call-stats-filters__toggle-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0a58ca;
    color: #ffffff;
    font-size: 1.05rem;
}

.ent-call-stats-filters__toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.ent-call-stats-filters__toggle-label {
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;
}

.ent-call-stats-filters__summary {
    font-size: 0.75rem;
    color: var(--ent-muted, #b3b3b3);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}

.ent-call-stats-filters__chevron {
    color: var(--ent-muted, #b3b3b3);
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 160ms ease;
}

.ent-call-stats-filters.is-expanded .ent-call-stats-filters__chevron {
    transform: rotate(180deg);
}

.ent-call-stats-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
}

.ent-call-stats-filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.ent-call-stats-filter-chip--active,
.ent-call-stats-filter-chip--locked {
    border-color: rgba(13, 110, 253, 0.45);
    background: rgba(10, 88, 202, 0.14);
    color: var(--ent-ink, #f6f7fb);
}

.ent-call-stats-filters__body {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
}

.ent-call-stats-filters__grid .ent-form-label {
    margin-bottom: 0.3rem;
}

.ent-call-stats-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    padding-top: 0.25rem;
}

.ent-call-stats-filters__apply,
.ent-call-stats-filters__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

.ent-call-stats-filters__preset {
    min-height: 36px;
}

.ent-call-stats-locked-trunk {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    width: 100%;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(13, 110, 253, 0.35);
    background: rgba(10, 88, 202, 0.1);
    color: var(--ent-ink, #f6f7fb);
    font-size: 0.875rem;
}

.ent-op-call-stats-mount .ent-call-stats-suite {
    margin-top: 0.15rem;
}

[data-theme-mode="light"] .ent-call-stats-filters__toggle {
    background: #ffffff;
    border-color: rgba(10, 88, 202, 0.35);
    color: #111827;
}

[data-theme-mode="light"] .ent-call-stats-filters__toggle:hover,
[data-theme-mode="light"] .ent-call-stats-filters__toggle:focus-visible {
    background: rgba(10, 88, 202, 0.08);
}

[data-theme-mode="light"] .ent-call-stats-filters__summary {
    color: #6b7280;
}

[data-theme-mode="light"] .ent-call-stats-filter-chip {
    background: #f3f4f6;
    border-color: rgba(15, 23, 42, 0.1);
    color: #4b5563;
}

[data-theme-mode="light"] .ent-call-stats-filter-chip--active,
[data-theme-mode="light"] .ent-call-stats-filter-chip--locked {
    background: rgba(10, 88, 202, 0.12);
    border-color: rgba(10, 88, 202, 0.45);
    color: #0f172a;
}

[data-theme-mode="light"] .ent-call-stats-locked-trunk {
    background: rgba(10, 88, 202, 0.08);
    color: #0f172a;
}

.ent-call-stats-page .ent-call-stats-weekday-chips,
.ent-call-stats-suite .ent-call-stats-weekday-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ent-call-stats-weekday-chip {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    background: var(--ent-surface-raised, #1a1a1a);
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ent-call-stats-weekday-chip:hover,
.ent-call-stats-weekday-chip:focus-visible {
    border-color: rgba(13, 110, 253, 0.55);
    color: var(--ent-ink, #f6f7fb);
    outline: none;
}

.ent-call-stats-weekday-chip.is-active,
.ent-call-stats-weekday-chip[aria-pressed="true"] {
    background: rgba(10, 88, 202, 0.18);
    border-color: rgba(13, 110, 253, 0.7);
    color: var(--ent-ink, #f6f7fb);
}

[data-theme-mode="light"] .ent-call-stats-weekday-chip {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #6b7280;
}

[data-theme-mode="light"] .ent-call-stats-weekday-chip.is-active,
[data-theme-mode="light"] .ent-call-stats-weekday-chip[aria-pressed="true"] {
    background: rgba(10, 88, 202, 0.12);
    border-color: rgba(10, 88, 202, 0.55);
    color: #0f172a;
}

.ent-call-stats-page,
.ent-call-stats-suite,
.ent-op-call-stats-mount {
    max-width: 100%;
    min-width: 0;
}

.ent-call-stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.ent-call-stats-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.55rem;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    background: var(--ent-surface-raised, #1a1a1a);
    min-height: 4.5rem;
}

[data-theme-mode="light"] .ent-call-stats-kpi-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

.ent-call-stats-kpi-card__icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    background: #0a58ca;
}

.ent-call-stats-kpi-card__icon--primary { background: #0a58ca; }
.ent-call-stats-kpi-card__icon--green { background: #16a34a; }
.ent-call-stats-kpi-card__icon--orange { background: #ea580c; }
.ent-call-stats-kpi-card__icon--rose { background: #e11d48; }
.ent-call-stats-kpi-card__icon--amber { background: #a16207; }
.ent-call-stats-kpi-card__icon--violet { background: #7c3aed; }
.ent-call-stats-kpi-card__icon--blue { background: #2962ff; }

.ent-call-stats-kpi-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ent-call-stats-kpi-card__label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.05rem;
    font-size: 0.8125rem;
    color: var(--ent-muted, #b3b3b3);
    font-weight: 500;
}

.ent-call-stats-kpi-card__label .custom-kb-tooltip-wrapper .ri-question-line {
    font-size: 0.9rem;
}

.ent-call-stats-kpi-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.05rem;
}

.ent-call-stats-kpi-meta-sep {
    white-space: pre;
}

.ent-call-stats-kpi-card__value {
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--ent-ink, #f6f7fb);
    line-height: 1.25;
    word-break: break-word;
}

[data-theme-mode="light"] .ent-call-stats-kpi-card__value {
    color: #111827;
}

.ent-call-stats-tabs .nav-link {
    color: var(--ent-muted, #b3b3b3);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.65rem 0.9rem;
}

.ent-call-stats-tabs .nav-link:hover,
.ent-call-stats-tabs .nav-link:focus-visible {
    color: var(--ent-ink, #f6f7fb);
}

.ent-call-stats-tabs .nav-link.active {
    color: #0d6efd;
    background: transparent;
    border-bottom-color: #0d6efd;
}

.ent-call-stats-chart {
    min-height: 280px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.ent-call-stats-chart--pie {
    min-height: 300px;
}

/* ApexCharts default legend uses overflow:auto and often paints a useless bottom scrollbar */
.ent-call-stats-page .apexcharts-canvas,
.ent-call-stats-suite .apexcharts-canvas {
    max-width: 100% !important;
}

.ent-call-stats-page .apexcharts-legend,
.ent-call-stats-suite .apexcharts-legend {
    overflow: visible;
    flex-wrap: wrap;
    max-width: 100%;
}

.ent-call-stats-page .apexcharts-svg,
.ent-call-stats-suite .apexcharts-svg {
    max-width: 100%;
}

.ent-call-stats-page .ent-call-stats-trunk-link,
.ent-call-stats-suite .ent-call-stats-trunk-link {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 600;
}

.ent-call-stats-page .ent-call-stats-trunk-link:hover,
.ent-call-stats-page .ent-call-stats-trunk-link:focus-visible,
.ent-call-stats-suite .ent-call-stats-trunk-link:hover,
.ent-call-stats-suite .ent-call-stats-trunk-link:focus-visible {
    color: #2dd4bf;
    text-decoration: underline;
}

.ent-call-stats-rank-select {
    min-width: 11rem;
    max-width: 16rem;
}

.ent-call-stats-rank-col {
    width: 3rem;
}

.ent-call-stats-rank {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ent-muted, #b3b3b3);
}

.ent-call-stats-rank--top,
.ent-call-stats-rank-badge {
    color: #f6f7fb;
}

.ent-call-stats-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0a58ca, #0d6efd);
    font-size: 0.75rem;
    font-weight: 700;
}

.ent-call-stats-staff-row--top {
    background: rgba(13, 110, 253, 0.08);
}

.ent-call-stats-best-staff {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(13, 110, 253, 0.35);
    background: rgba(10, 88, 202, 0.12);
}

.ent-call-stats-best-staff__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    background: #0a58ca;
    color: #f6f7fb;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.ent-call-stats-best-staff__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ent-muted, #b3b3b3);
}

.ent-call-stats-best-staff__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ent-ink, #f6f7fb);
    line-height: 1.3;
}

.ent-call-stats-best-staff__why {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--ent-muted, #b3b3b3);
}

[data-theme-mode="light"] .ent-call-stats-staff-row--top {
    background: rgba(10, 88, 202, 0.08);
}

[data-theme-mode="light"] .ent-call-stats-best-staff {
    background: rgba(10, 88, 202, 0.08);
    color: #0f172a;
}

[data-theme-mode="light"] .ent-call-stats-best-staff__name {
    color: #0f172a;
}

[data-theme-mode="light"] .ent-call-stats-rank-badge {
    color: #ffffff;
}

@media (max-width: 575.98px) {
    .ent-call-stats-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ent-call-stats-filters__summary {
        max-width: 11rem;
    }

    .ent-call-stats-filters__apply,
    .ent-call-stats-filters__reset {
        flex: 1 1 auto;
    }

    .ent-call-stats-best-staff {
        flex-direction: column;
    }
}

/* ==========================================================================
   SMS Center + Hybrid — SIP SIMPLE Message History
   ========================================================================== */

.sms-simple-page-container {
    --sms-simple-surface: #161616;
    --sms-simple-raised: #1a1a1a;
    --sms-simple-ink: #f6f7fb;
    --sms-simple-muted: #b3b3b3;
    --sms-simple-border: rgba(255, 255, 255, 0.09);
    --sms-simple-accent: #60a5fa;
}

[data-theme-mode="light"] .sms-simple-page-container {
    --sms-simple-surface: #ffffff;
    --sms-simple-raised: #f6f7fb;
    --sms-simple-ink: #172033;
    --sms-simple-muted: #667085;
    --sms-simple-border: rgba(15, 23, 42, 0.12);
}

.sms-simple-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--sms-simple-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sms-simple-hero-title {
    color: var(--sms-simple-ink);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.sms-simple-muted {
    color: var(--sms-simple-muted);
}

.sms-simple-pill,
.sms-simple-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--sms-simple-border);
    background: var(--sms-simple-raised);
    color: var(--sms-simple-ink);
    font-size: 0.8rem;
}

.sms-simple-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sms-simple-panel {
    background: var(--sms-simple-surface);
    border: 1px solid var(--sms-simple-border);
    border-radius: 0.85rem;
    overflow: hidden;
}

.sms-simple-panel--flush .sms-simple-panel-body {
    padding: 0;
}

.sms-simple-panel-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--sms-simple-border);
}

.sms-simple-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--sms-simple-ink);
    font-size: 1rem;
    font-weight: 700;
}

.sms-simple-panel-body {
    padding: 1rem 1.15rem;
}

.sms-simple-notice {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--sms-simple-border);
    background: var(--sms-simple-raised);
}

.sms-simple-notice--info {
    border-color: rgba(96, 165, 250, 0.28);
    background: rgba(96, 165, 250, 0.08);
}

.sms-simple-notice--warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
}

.sms-simple-notice__icon {
    flex: 0 0 auto;
    color: var(--sms-simple-accent);
    font-size: 1.15rem;
}

.sms-simple-notice--warning .sms-simple-notice__icon {
    color: #f59e0b;
}

.sms-simple-notice__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sms-simple-notice__eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sms-simple-muted);
}

.sms-simple-notice__message {
    color: var(--sms-simple-ink);
    font-size: 0.875rem;
}

.sms-simple-stats-grid,
.ent-simple-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.sms-simple-stat,
.ent-simple-stat {
    padding: 0.85rem;
    border: 1px solid var(--sms-simple-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.75rem;
    background: var(--sms-simple-raised, #1a1a1a);
}

.ent-page-container .ent-simple-stat {
    border-color: var(--ent-border, rgba(255, 255, 255, 0.09));
    background: var(--ent-surface-raised, #1a1a1a);
}

.sms-simple-stat-label,
.ent-simple-stat-label {
    margin: 0;
    color: var(--sms-simple-muted, #b3b3b3);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ent-page-container .ent-simple-stat-label {
    color: var(--ent-muted, #b3b3b3);
}

.sms-simple-stat-value,
.ent-simple-stat-value {
    margin: 0.25rem 0 0;
    color: var(--sms-simple-ink, #f6f7fb);
    font-size: 1.25rem;
    font-weight: 800;
}

.ent-page-container .ent-simple-stat-value {
    color: var(--ent-ink, #f6f7fb);
}

.sms-simple-table-wrap {
    overflow-x: auto;
}

.sms-simple-table,
.ent-simple-table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
}

.sms-simple-table th,
.sms-simple-table td,
.ent-simple-table th,
.ent-simple-table td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--sms-simple-border, rgba(255, 255, 255, 0.09));
    vertical-align: top;
    font-size: 0.875rem;
}

.sms-simple-table th,
.ent-simple-table th {
    color: var(--sms-simple-muted, #b3b3b3);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--sms-simple-raised, #1a1a1a);
}

.ent-page-container .ent-simple-table th {
    color: var(--ent-muted, #b3b3b3);
    background: var(--ent-surface-raised, #1a1a1a);
    border-bottom-color: var(--ent-border, rgba(255, 255, 255, 0.09));
}

.ent-page-container .ent-simple-table td {
    border-bottom-color: var(--ent-border, rgba(255, 255, 255, 0.09));
    color: var(--ent-ink, #f6f7fb);
}

.sms-simple-aor {
    font-size: 0.8rem;
    word-break: break-all;
}

.sms-simple-body-cell {
    max-width: 18rem;
}

.sms-simple-badge,
.ent-simple-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: lowercase;
    border: 1px solid transparent;
}

.sms-simple-badge--ok,
.ent-simple-badge--ok {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
}

.sms-simple-badge--pending,
.ent-simple-badge--pending {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.28);
}

.sms-simple-badge--fail,
.ent-simple-badge--fail {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
}

.sms-simple-badge--neutral,
.sms-simple-badge--dir,
.ent-simple-badge--neutral {
    color: var(--sms-simple-ink, #f6f7fb);
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.28);
}

.sms-simple-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--sms-simple-border);
}

.sms-simple-empty,
.sms-simple-empty--compact {
    text-align: center;
    padding: 2rem 1rem;
}

.sms-simple-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.85rem;
    background: rgba(96, 165, 250, 0.12);
    color: var(--sms-simple-accent);
    font-size: 1.35rem;
}

.sms-simple-empty-title {
    margin: 0 0 0.35rem;
    color: var(--sms-simple-ink);
    font-size: 1.05rem;
    font-weight: 750;
}

.sms-simple-empty-message {
    color: var(--sms-simple-muted);
    font-size: 0.875rem;
}

.sms-simple-skeleton {
    display: grid;
    gap: 0.65rem;
}

.sms-simple-skeleton-row {
    height: 2.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
    background-size: 200% 100%;
    animation: sms-simple-shimmer 1.2s ease-in-out infinite;
}

@keyframes sms-simple-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (max-width: 767.98px) {
    .sms-simple-toolbar,
    .sms-simple-footer {
        justify-content: stretch;
    }

    .sms-simple-toolbar .btn,
    .sms-simple-footer .btn-group {
        width: 100%;
    }
}

/* SIP SIMPLE Messages — collapsible filters (collapsed by default) */
.ent-simple-filters,
.sms-simple-filters {
    margin: 0;
}

.ent-simple-filters__bar,
.sms-simple-filters__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
}

.sms-simple-panel-header.sms-simple-filters__bar {
    border-bottom: none;
}

.sms-simple-filters.is-expanded .sms-simple-panel-header.sms-simple-filters__bar {
    border-bottom: 1px solid var(--sms-simple-border);
}

.ent-simple-filters__toggle,
.sms-simple-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.35rem 0.65rem 0.35rem 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.65rem;
    background: var(--ent-surface-raised, var(--sms-simple-raised, #1a1a1a));
    color: var(--ent-ink, var(--sms-simple-ink, #f6f7fb));
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.ent-simple-filters__toggle {
    border-color: rgba(13, 110, 253, 0.35);
}

.sms-simple-filters__toggle {
    border-color: rgba(96, 165, 250, 0.35);
}

.ent-simple-filters__toggle:hover,
.ent-simple-filters__toggle:focus-visible {
    border-color: rgba(13, 110, 253, 0.6);
    background: rgba(13, 110, 253, 0.08);
    outline: none;
}

.sms-simple-filters__toggle:hover,
.sms-simple-filters__toggle:focus-visible {
    border-color: rgba(96, 165, 250, 0.6);
    background: rgba(96, 165, 250, 0.08);
    outline: none;
}

.ent-simple-filters__toggle-icon,
.sms-simple-filters__toggle-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.05rem;
}

.ent-simple-filters__toggle-icon {
    background: #0a58ca;
}

.sms-simple-filters__toggle-icon {
    background: #3b82f6;
}

.ent-simple-filters__toggle-copy,
.sms-simple-filters__toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.ent-simple-filters__toggle-label,
.sms-simple-filters__toggle-label {
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;
}

.ent-simple-filters__summary,
.sms-simple-filters__summary {
    font-size: 0.75rem;
    color: var(--ent-muted, var(--sms-simple-muted, #b3b3b3));
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}

.ent-simple-filters__chevron,
.sms-simple-filters__chevron {
    color: var(--ent-muted, var(--sms-simple-muted, #b3b3b3));
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 160ms ease;
}

.ent-simple-filters.is-expanded .ent-simple-filters__chevron,
.sms-simple-filters.is-expanded .sms-simple-filters__chevron {
    transform: rotate(180deg);
}

.ent-simple-filters__body,
.sms-simple-filters__body {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ent-border, var(--sms-simple-border, rgba(255, 255, 255, 0.09)));
}

.sms-simple-filters__body.sms-simple-panel-body {
    margin-top: 0;
    border-top: none;
}

.sms-simple-filters__hint {
    flex: 1 1 12rem;
    min-width: 0;
}

.ent-simple-trunk-picker {
    max-width: 28rem;
}

[data-theme-mode="light"] .ent-simple-filters__toggle,
[data-theme-mode="light"] .sms-simple-filters__toggle {
    background: #ffffff;
    color: #172033;
}

/* ==========================================================================
   Grandstream Provisioning (Hybrid SIP Trunks) — teal accent #0d6efd
   Prefix: grandstream-provisioning-* / gsp-*
   ========================================================================== */

.grandstream-provisioning-page {
    --gsp-accent: #0d6efd;
    --gsp-accent-deep: #0a58ca;
    --gsp-surface: #161616;
    --gsp-surface-raised: #1c1c1c;
    --gsp-surface-nested: #222222;
    --gsp-ink: #f6f7fb;
    --gsp-muted: #b3b3b3;
    --gsp-border: rgba(255, 255, 255, 0.12);
}

.grandstream-provisioning-tabs .nav-link {
    color: var(--gsp-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.65rem 0.9rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.grandstream-provisioning-tabs .nav-link:hover,
.grandstream-provisioning-tabs .nav-link:focus {
    color: var(--gsp-ink);
    border-color: transparent;
}

.grandstream-provisioning-tabs .nav-link.active {
    color: var(--gsp-accent);
    background: transparent;
    border-bottom-color: var(--gsp-accent);
}

.grandstream-provisioning-tab-content .tab-pane.fade {
    transition: none;
}

.gsp-disclaimer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gsp-border);
    max-width: 48rem;
    line-height: 1.5;
    color: var(--gsp-muted);
}

.gsp-disclaimer__label {
    color: var(--gsp-ink);
    font-weight: 600;
}

.grandstream-provisioning-page .gsp-tab-panel.ent-panel {
    background: var(--gsp-surface);
    border: 1px solid var(--gsp-border);
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
}

.gsp-gate-card {
    background: var(--gsp-surface);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
    padding: 1.25rem 1.35rem;
}

.gsp-gate-card--pending {
    border-color: rgba(13, 110, 253, 0.35);
}

.gsp-opt-in-bullets {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--gsp-muted);
}

.gsp-opt-in-bullets li + li {
    margin-top: 0.35rem;
}

.gsp-pending-spinner {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid rgba(13, 110, 253, 0.25);
    border-top-color: var(--gsp-accent);
    animation: gsp-spin 0.8s linear infinite;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

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

@media (prefers-reduced-motion: reduce) {
    .gsp-pending-spinner {
        animation: none;
        border-top-color: var(--gsp-accent);
    }
}

.gsp-empty-state {
    text-align: center;
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
    padding: 2rem 1.25rem;
}

.gsp-empty-state__icon {
    font-size: 1.75rem;
    color: var(--gsp-accent);
    margin-bottom: 0.65rem;
}

.gsp-empty-state__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gsp-ink);
    margin-bottom: 0.4rem;
}

.gsp-empty-state__copy {
    color: var(--gsp-muted);
    max-width: 36rem;
    margin: 0 auto 1rem;
}

.gsp-panel-loading {
    min-height: 6rem;
    padding: 1rem 1.1rem;
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
}

.gsp-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.gsp-skeleton-row {
    height: 2.5rem;
    border-radius: 6px;
    /* Slate fill must stay visible on dark surfaces (was ~0.25 + low opacity = invisible). */
    background: rgba(148, 163, 184, 0.42);
    animation: gsp-skeleton-pulse 1.4s ease-in-out infinite;
}

.gsp-skeleton-row--medium {
    width: 72%;
}

.gsp-skeleton-row--short {
    width: 48%;
}

.gsp-inline-loading {
    min-height: 6rem;
}

@keyframes gsp-skeleton-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .gsp-skeleton-row {
        animation: none;
        opacity: 0.85;
    }
}

.gsp-table-card {
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
}

.grandstream-provisioning-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--gsp-ink);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
    border-color: var(--gsp-border);
    margin-bottom: 0;
}

.grandstream-provisioning-table thead th {
    color: var(--gsp-muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom-color: var(--gsp-border);
    background: var(--gsp-surface-nested);
}

.gsp-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gsp-ink);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.3;
}

.gsp-howto-steps {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.gsp-howto-step {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.gsp-howto-step__num {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.15);
    color: var(--gsp-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.gsp-howto-tips {
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
    padding: 1rem 1.15rem;
}

.gsp-howto-tips code {
    color: var(--gsp-ink);
    font-size: 0.8rem;
}

.gsp-setup-slot {
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}

.gsp-form-control,
.grandstream-provisioning-page .form-select,
.grandstream-provisioning-page .form-control {
    background: var(--gsp-surface-nested);
    border-color: var(--gsp-border);
    color: var(--gsp-ink);
}

.gsp-form-control:focus,
.grandstream-provisioning-page .form-select:focus,
.grandstream-provisioning-page .form-control:focus {
    background: var(--gsp-surface-nested);
    border-color: var(--gsp-accent);
    color: var(--gsp-ink);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}

.gsp-json-pre {
    background: var(--gsp-surface-nested);
    border: 1px solid var(--gsp-border);
    border-radius: 6px;
    padding: 0.75rem;
    max-height: 22rem;
    overflow: auto;
    color: var(--gsp-ink);
    font-size: 0.8rem;
}

.gsp-empty-state--compact {
    padding: 1rem 1.1rem;
    text-align: left;
}

.gsp-account-status .grandstream-provisioning-table {
    margin-bottom: 0;
}

.gsp-device-detail__notice {
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--gsp-border, rgba(255, 255, 255, 0.12));
    background: var(--gsp-surface-raised, #1c1c1c);
}

.gsp-device-detail__grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gsp-device-detail__panel {
    background: var(--gsp-surface-raised, #1c1c1c);
    border: 1px solid var(--gsp-border, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    padding: 1rem 1.1rem;
    min-height: 100%;
}

.gsp-device-detail__heading {
    margin: 0 0 0.85rem;
    color: var(--gsp-muted, #b3b3b3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gsp-device-detail__list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
}

.gsp-device-detail__row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: baseline;
}

.gsp-device-detail__label {
    margin: 0;
    color: var(--gsp-muted, #b3b3b3);
    font-size: 0.8125rem;
    font-weight: 500;
}

.gsp-device-detail__value {
    margin: 0;
    color: var(--gsp-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 500;
    word-break: break-word;
}

.gsp-device-detail__mono {
    display: inline;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--gsp-ink, #f6f7fb);
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.8125rem;
}

.gsp-device-detail__empty {
    margin: 0;
}

.gsp-device-detail__sip-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.gsp-device-detail__sip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: var(--gsp-surface-nested, #222222);
    border: 1px solid var(--gsp-border, rgba(255, 255, 255, 0.12));
}

.gsp-device-detail__sip-row .gsp-status-badge {
    margin-left: auto;
}

.gsp-device-detail__sip-line {
    min-width: 3.5rem;
    color: var(--gsp-muted, #b3b3b3);
    font-size: 0.8125rem;
    font-weight: 600;
}

.gsp-status-badge--ok {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
}

.gsp-status-badge--down {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
}

@media (max-width: 767.98px) {
    .gsp-device-detail__grid {
        grid-template-columns: 1fr;
    }

    .gsp-device-detail__row {
        grid-template-columns: 4.75rem minmax(0, 1fr);
    }
}

.gsp-panel-card {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
}

.gsp-alerts-list__item {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gsp-alerts-list__item:last-child {
    border-bottom: 0;
}

.gsp-alerts-list__summary {
    font-weight: 600;
}

[data-theme-mode="light"] .gsp-panel-card {
    background: #f8f9fb;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .gsp-alerts-list__item {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

.gsp-modern-modal {
    --gsp-accent: #0d6efd;
    --gsp-accent-deep: #0a58ca;
    --gsp-surface: #161616;
    --gsp-surface-raised: #1c1c1c;
    --gsp-surface-nested: #222222;
    --gsp-ink: #f6f7fb;
    --gsp-muted: #b3b3b3;
    --gsp-border: rgba(255, 255, 255, 0.12);
    background: var(--gsp-surface);
    border: 1px solid var(--gsp-border);
    color: var(--gsp-ink);
}

.gsp-phone-key-help-link {
    color: var(--gsp-accent, #0d6efd);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    font-weight: 600;
}

.gsp-phone-key-help-link:hover,
.gsp-phone-key-help-link:focus-visible {
    color: #2dd4bf;
}

.gsp-modern-modal .modal-header {
    background: linear-gradient(135deg, rgba(10, 88, 202, 0.35), rgba(13, 110, 253, 0.18));
    border-bottom: 1px solid var(--gsp-border);
}

.gsp-modern-modal .modal-title {
    color: var(--gsp-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.gsp-modern-modal .modal-title i {
    color: var(--gsp-accent);
}

.gsp-modern-modal.gsp-modern-modal--danger .modal-header {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.28), rgba(127, 29, 29, 0.18));
}

.gsp-modern-modal .modal-footer {
    background: var(--gsp-surface);
    border-top: 1px solid var(--gsp-border);
    gap: 0.5rem;
}

.gsp-modern-modal .modal-body {
    background: var(--gsp-surface);
}

.gsp-modern-modal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.7;
}

.gsp-modern-modal .form-label {
    color: var(--gsp-ink);
    font-size: 0.875rem;
}

.gsp-modern-modal .form-control,
.gsp-modern-modal .form-select {
    background: var(--gsp-surface-nested);
    border-color: var(--gsp-border);
    color: var(--gsp-ink);
}

.gsp-modern-modal .form-control:focus,
.gsp-modern-modal .form-select:focus {
    border-color: var(--gsp-accent);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}

/* Device settings modal — compact tabbed layout */
.gsp-device-settings-body {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.gsp-device-settings-tabs {
    border-bottom: 1px solid var(--gsp-border, rgba(255, 255, 255, 0.12));
    gap: 0.15rem;
    margin-bottom: 0.85rem;
}

.gsp-device-settings-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--gsp-muted, #b3b3b3);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    background: transparent;
}

.gsp-device-settings-tabs .nav-link i {
    font-size: 1rem;
    line-height: 1;
}

.gsp-device-settings-tabs .nav-link:hover,
.gsp-device-settings-tabs .nav-link:focus-visible {
    color: var(--gsp-ink, #f6f7fb);
    border-bottom-color: rgba(13, 110, 253, 0.45);
    background: transparent;
}

.gsp-device-settings-tabs .nav-link.active {
    color: var(--gsp-accent, #0d6efd);
    border-bottom-color: var(--gsp-accent, #0d6efd);
    background: transparent;
    font-weight: 600;
}

.gsp-device-settings-tab-content {
    min-height: 11.5rem;
}

.gsp-device-settings-section + .gsp-device-settings-section {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--gsp-border, rgba(255, 255, 255, 0.09));
}

.gsp-device-settings-section__title {
    color: var(--gsp-ink, #f6f7fb);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.45rem;
    text-transform: uppercase;
}

.gsp-device-settings-tab-content .choices {
    width: 100%;
}

[data-theme-mode="light"] .gsp-device-settings-tabs .nav-link:hover,
[data-theme-mode="light"] .gsp-device-settings-tabs .nav-link:focus-visible {
    color: var(--gsp-ink, #172033);
}

[data-theme-mode="light"] .gsp-device-settings-tabs .nav-link.active {
    color: var(--gsp-accent-deep, #0a58ca);
    border-bottom-color: var(--gsp-accent-deep, #0a58ca);
}

[data-theme-mode="light"] .grandstream-provisioning-page {
    --gsp-surface: #ffffff;
    --gsp-surface-raised: #f4f5f7;
    --gsp-surface-nested: #eef0f4;
    --gsp-ink: #172033;
    --gsp-muted: #5b6475;
    --gsp-border: rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .gsp-skeleton-row {
    background: rgba(100, 116, 139, 0.22);
}

[data-theme-mode="light"] .grandstream-provisioning-table {
    --bs-table-hover-bg: rgba(15, 23, 42, 0.04);
}

[data-theme-mode="light"] .gsp-modern-modal {
    --gsp-surface: #ffffff;
    --gsp-surface-raised: #f4f5f7;
    --gsp-surface-nested: #eef0f4;
    --gsp-ink: #172033;
    --gsp-muted: #5b6475;
    --gsp-border: rgba(15, 23, 42, 0.12);
    background: var(--gsp-surface);
    color: var(--gsp-ink);
}

[data-theme-mode="light"] .gsp-device-detail__mono {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #172033;
}

[data-theme-mode="light"] .gsp-status-badge {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .gsp-status-badge--ok {
    color: #15803d;
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.28);
}

[data-theme-mode="light"] .gsp-status-badge--down {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.28);
}

[data-theme-mode="light"] .gsp-modern-modal .btn-close {
    filter: none;
}

[data-theme-mode="light"] .gsp-modern-modal .form-control,
[data-theme-mode="light"] .gsp-modern-modal .form-select,
[data-theme-mode="light"] .gsp-form-control,
[data-theme-mode="light"] .grandstream-provisioning-page .form-select,
[data-theme-mode="light"] .grandstream-provisioning-page .form-control,
[data-theme-mode="light"] .gsp-json-pre {
    background: #f8fafc;
    color: #172033;
}

/* GRP phone lookalike — upper faceplate only (chassis + LCD + side/MPK keys + softkeys).
   Face/screen modifiers (.gsp-phone--face-* / --screen-*) adapt per model profile.
   All internal sizes are em-based so the whole phone scales with one font-size. */
.gsp-phone {
    --gsp-phone-shell: #1b1c1e;
    --gsp-phone-shell-edge: #3c3f43;
    --gsp-phone-ink: #f6f7fb;
    --gsp-phone-muted: #c9ced3;
    --gsp-phone-key: #6d7276;
    --gsp-phone-key-low: #4b5054;
    --gsp-phone-select: #3b86d8;
    --gsp-phone-led: #33d16a;
    --gsp-phone-led-off: rgba(140, 152, 158, 0.35);
}

.gsp-phone__device {
    font-size: clamp(9px, 2.1vw, 12px);
    max-width: 100%;
}

.gsp-phone__chassis {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #26282b, var(--gsp-phone-shell) 45%, #131416);
    border: 1px solid var(--gsp-phone-shell-edge);
    border-radius: 1.6em;
    padding: 1.5em 1.4em 1.6em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1.4em 2.6em rgba(0, 0, 0, 0.5);
}

/* Diagonal gloss reflection across the faceplate, like the product shot */
.gsp-phone__chassis::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(107deg, rgba(255, 255, 255, 0.075) 0 38%, rgba(255, 255, 255, 0) 38.6%);
}

.gsp-phone__panel {
    position: relative;
}

/* Message-waiting LED in the top-right corner */
.gsp-phone__mwi {
    position: absolute;
    top: 0;
    right: 0;
    width: 4.4em;
    height: 1.15em;
    border-radius: 999px;
    background: linear-gradient(180deg, #7bf3a6, var(--gsp-phone-led) 60%, #1ba757);
    box-shadow: 0 0 0.9em rgba(51, 209, 106, 0.65);
}

.gsp-phone__brand {
    text-align: center;
    font-size: 2.5em;
    line-height: 1.1;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: #cfd3d7;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
    padding: 0.55em 0 0.75em;
}

.gsp-phone__face {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46% minmax(0, 1fr);
    align-items: center;
    gap: 1em;
}

.gsp-phone__side {
    display: flex;
    flex-direction: column;
    gap: 4.4em;
    padding-top: 3.2em;
}

.gsp-phone__side--left {
    align-items: flex-start;
}

.gsp-phone__side--right {
    align-items: flex-end;
}

/* Dual-colour line keys — grey pill with a green LED lens toward the screen */
.gsp-phone__key {
    min-height: 44px;
    min-width: 44px;
    width: 100%;
    max-width: 8.6em;
    height: 3.1em;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #7c8185, var(--gsp-phone-key) 55%, var(--gsp-phone-key-low));
    display: inline-flex;
    align-items: center;
    padding: 0 1em;
    cursor: pointer;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0.2em 0.4em rgba(0, 0, 0, 0.45);
}

.gsp-phone__key--left {
    justify-content: flex-end;
}

.gsp-phone__key--right {
    justify-content: flex-start;
}

.gsp-phone__key:hover,
.gsp-phone__key:focus-visible {
    outline: 2px solid rgba(59, 134, 216, 0.9);
    outline-offset: 2px;
}

.gsp-phone__key.is-selected {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 0.22em rgba(59, 134, 216, 0.75);
}

.gsp-phone__led {
    width: 3.4em;
    height: 0.85em;
    border-radius: 999px;
    background: var(--gsp-phone-led-off);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}

.gsp-phone__led.is-lit {
    background: linear-gradient(180deg, #7bf3a6, var(--gsp-phone-led) 60%, #1ba757);
    box-shadow:
        0 0 0.7em rgba(51, 209, 106, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* LCD sits flush in the glossy panel with a thin recessed frame */
.gsp-phone__bezel {
    position: relative;
    border-radius: 0.35em;
    padding: 0.25em;
    background: #0b0c0d;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0.15em 0.5em rgba(0, 0, 0, 0.6);
}

.gsp-phone__screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 320 / 240;
    border-radius: 0.25em;
    color: var(--gsp-phone-ink);
    display: flex;
    flex-direction: column;
    /* Idle wallpaper: dark slate with a faint diagonal swirl */
    background:
        radial-gradient(120% 90% at 15% 100%, rgba(120, 170, 210, 0.1), transparent 55%),
        linear-gradient(155deg, #2b3034, #1c2023 60%, #23282c);
}

.gsp-phone__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6em;
    flex-shrink: 0;
    height: 13%;
    padding: 0 0.7em;
    background: rgba(20, 23, 26, 0.85);
    font-size: 1.28em;
    color: var(--gsp-phone-ink);
}

.gsp-phone__status-left,
.gsp-phone__status-right {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gsp-phone__status-left i {
    color: var(--gsp-phone-led);
    flex-shrink: 0;
}

.gsp-phone__status-right {
    flex-shrink: 0;
    color: var(--gsp-phone-muted);
    font-variant-numeric: tabular-nums;
}

.gsp-phone__grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.5em 0.6em;
    min-height: 0;
    padding: 0.55em 0.5em;
}

/* Each key is a rounded tile on the idle screen, blue when selected */
.gsp-phone__cell {
    min-height: 44px;
    border: 0;
    border-radius: 0.3em;
    background: rgba(56, 62, 67, 0.92);
    color: var(--gsp-phone-ink);
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0 0.7em;
    cursor: pointer;
    overflow: hidden;
}

.gsp-phone__cell--left {
    justify-content: flex-start;
    text-align: left;
}

.gsp-phone__cell--right {
    justify-content: flex-end;
    text-align: right;
    flex-direction: row-reverse;
}

.gsp-phone__cell i {
    color: #4ade80;
    font-size: 1.35em;
    flex-shrink: 0;
}

.gsp-phone__cell.is-empty {
    background: rgba(46, 51, 56, 0.75);
}

.gsp-phone__cell.is-empty i {
    color: rgba(148, 163, 184, 0.4);
}

.gsp-phone__cell-label {
    font-size: 1.28em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.gsp-phone__cell:hover,
.gsp-phone__cell:focus-visible {
    background: rgba(74, 82, 89, 0.95);
    outline: none;
}

.gsp-phone__cell.is-selected {
    background: linear-gradient(180deg, #4b93e2, var(--gsp-phone-select));
    color: #ffffff;
}

.gsp-phone__cell.is-selected i {
    color: #ffffff;
}

.gsp-phone__softlabels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 0.2em;
    flex-shrink: 0;
    height: 15%;
    padding: 0 0.4em;
    background: rgba(20, 23, 26, 0.75);
}

.gsp-phone__softlabel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    text-align: center;
    font-size: 1.2em;
    color: var(--gsp-phone-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On-screen page indicator — clickable, like flipping VPK pages on the handset */
.gsp-phone__softlabel--pages {
    gap: 0.35em;
}

.gsp-phone__page-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    min-height: 1.35em;
    padding: 0 0.2em;
    margin: 0;
    border: 0;
    border-radius: 0.15em;
    background: transparent;
    color: rgba(226, 232, 240, 0.6);
    font: inherit;
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
}

.gsp-phone__page-dot:hover,
.gsp-phone__page-dot:focus-visible {
    color: #ffffff;
    outline: none;
    background: rgba(255, 255, 255, 0.12);
}

.gsp-phone__page-dot.is-active {
    color: #16181a;
    font-weight: 700;
    background: #ffffff;
}

/* Context-sensitive softkeys on the faceplate, aligned under the LCD */
.gsp-phone__softkeys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    width: 62%;
    margin: 1.5em auto 0;
}

.gsp-phone__softkey {
    height: 2.6em;
    border-radius: 999px;
    background: linear-gradient(180deg, #7c8185, var(--gsp-phone-key) 55%, var(--gsp-phone-key-low));
    border: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0.15em 0.35em rgba(0, 0, 0, 0.5);
}

.gsp-phone__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.85rem;
}

.gsp-phone__page-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1f1f1f;
    color: var(--gsp-phone-ink);
    font-weight: 600;
    font-size: 0.8rem;
}

.gsp-phone__page-btn.is-active {
    border-color: rgba(29, 111, 212, 0.8);
    background: rgba(29, 111, 212, 0.25);
    color: #dbeafe;
}

.gsp-phone-edit-panel {
    background: var(--gsp-surface-raised);
    border: 1px solid var(--gsp-border);
    border-radius: 12px;
    padding: 1rem 1.05rem;
}

@media (max-width: 767.98px) {
    /* Softkeys are decoration only — drop them and stack the line keys under the
       screen so the LCD keeps as much width as possible on phones */
    .gsp-phone__softkeys {
        display: none;
    }

    .gsp-phone__face {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9em;
    }

    .gsp-phone__bezel {
        order: 1;
    }

    .gsp-phone__side {
        flex-direction: row;
        justify-content: center;
        gap: 1em;
        padding-top: 0;
    }

    .gsp-phone__side--left {
        order: 2;
    }

    .gsp-phone__side--right {
        order: 3;
        align-items: stretch;
    }

    .gsp-phone__key {
        flex: 1 1 0;
        max-width: 12em;
        justify-content: center;
    }
}

/* The real GRP phones are black desk devices — keep the chassis dark in both themes
   and only theme the surrounding portal controls. */
[data-theme-mode="light"] .gsp-phone__page-btn {
    background: #ffffff;
    color: #172033;
    border-color: rgba(15, 23, 42, 0.18);
}

[data-theme-mode="light"] .gsp-phone__page-btn.is-active {
    color: #1e3a8a;
}

/* Face-class / screen-profile modifiers (docs §7 A–J) */
.gsp-phone__face-row {
    display: flex;
    align-items: stretch;
    gap: 0.75em;
}

.gsp-phone__face-row .gsp-phone__face {
    flex: 1 1 auto;
    min-width: 0;
}

.gsp-phone__mpk-strip {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    justify-content: center;
    min-width: 2.8em;
    padding-top: 2.2em;
}

.gsp-phone__mpk-key {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    padding: 0.25em;
    border-radius: 0.45em;
    border: 1px solid rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #7c8185, var(--gsp-phone-key) 55%, var(--gsp-phone-key-low));
    color: var(--gsp-phone-ink);
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0.15em 0.3em rgba(0, 0, 0, 0.45);
}

.gsp-phone__mpk-key.is-selected {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 0.2em rgba(59, 134, 216, 0.75);
}

.gsp-phone__mpk-key-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #e8eaed;
}

.gsp-phone__mpk-lcd {
    margin-top: 1em;
    border-radius: 0.35em;
    padding: 0.45em;
    background: #0b0c0d;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0.15em 0.5em rgba(0, 0, 0, 0.55);
}

.gsp-phone__mpk-lcd-label {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gsp-phone-muted);
    text-align: center;
    margin-bottom: 0.35em;
}

.gsp-phone__mpk-grid {
    display: grid;
    gap: 0.35em;
    max-height: 14em;
    overflow: auto;
}

.gsp-phone--screen-mono .gsp-phone__screen {
    aspect-ratio: 132 / 64;
    color: #b7f5c8;
    background:
        radial-gradient(120% 90% at 20% 100%, rgba(70, 160, 90, 0.12), transparent 55%),
        linear-gradient(180deg, #1a2420, #101612 70%, #161c18);
}

.gsp-phone--screen-mono .gsp-phone__status,
.gsp-phone--screen-mono .gsp-phone__softlabels {
    background: rgba(10, 18, 12, 0.9);
    color: #b7f5c8;
}

.gsp-phone--screen-mono .gsp-phone__cell {
    background: rgba(28, 48, 34, 0.92);
    color: #c8f7d4;
}

/* colour_24 matches the default .gsp-phone__screen ratio; kept explicit for profile wiring. */
.gsp-phone--screen-colour_24 .gsp-phone__screen {
    aspect-ratio: 320 / 240;
}

.gsp-phone--screen-colour_28 .gsp-phone__screen {
    aspect-ratio: 320 / 240;
}

.gsp-phone--screen-colour_43 .gsp-phone__screen {
    aspect-ratio: 480 / 272;
}

.gsp-phone--screen-colour_50 .gsp-phone__screen {
    aspect-ratio: 16 / 9;
}

.gsp-phone--screen-touch_70 .gsp-phone__screen {
    aspect-ratio: 1024 / 600;
}

.gsp-phone--face-a .gsp-phone__side,
.gsp-phone--face-b .gsp-phone__side,
.gsp-phone--face-j .gsp-phone__side {
    gap: 2.4em;
    padding-top: 2em;
}

/* Face C — baseline Pro 2.4" / 4-line (GRP2612*) */
.gsp-phone--face-c .gsp-phone__side {
    gap: 4.4em;
    padding-top: 3.2em;
}

.gsp-phone--face-d .gsp-phone__side,
.gsp-phone--face-e .gsp-phone__side {
    gap: 1.5em;
    padding-top: 1.4em;
}

.gsp-phone--face-f .gsp-phone__side,
.gsp-phone--face-g .gsp-phone__side,
.gsp-phone--face-h .gsp-phone__side {
    gap: 0.7em;
    padding-top: 0.8em;
}

.gsp-phone--face-f .gsp-phone__key,
.gsp-phone--face-g .gsp-phone__key,
.gsp-phone--face-h .gsp-phone__key {
    height: 2.4em;
    max-width: 7em;
}

/* Face I — 7" touch (GRP2670); also applied via .gsp-phone--touch from is_touch. */
.gsp-phone--face-i .gsp-phone__side,
.gsp-phone--touch .gsp-phone__side {
    display: none;
}

.gsp-phone--face-i .gsp-phone__face,
.gsp-phone--touch .gsp-phone__face {
    grid-template-columns: minmax(0, 1fr);
}

.gsp-phone--face-i .gsp-phone__softkeys,
.gsp-phone--touch .gsp-phone__softkeys {
    display: none;
}

.gsp-phone--has-mpk .gsp-phone__face-row {
    align-items: center;
}

.gsp-phone--mpk-lcd .gsp-phone__mpk-lcd {
    display: block;
}

@media (max-width: 767.98px) {
    .gsp-phone__face-row {
        flex-direction: column;
    }

    .gsp-phone__mpk-strip {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 0;
        min-width: 0;
    }
}

/* ── Premium Queues wallboard ── */
.queues-wb-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--queues-border);
    border-radius: .9rem;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(132, 204, 22, .12), transparent 55%),
        var(--queues-panel);
}
.queues-wb-hero__sub { max-width: 42rem; }
.queues-wb-hero__meta {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}
.queues-wb-pulse {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 1.85rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--queues-border);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--queues-muted);
    background: rgba(255, 255, 255, .02);
}
.queues-wb-pulse__dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--queues-muted);
}
.queues-wb-pulse[data-state="live"] { color: var(--queues-accent); border-color: rgba(132, 204, 22, .35); }
.queues-wb-pulse[data-state="live"] .queues-wb-pulse__dot {
    background: var(--queues-accent);
    box-shadow: 0 0 0 0 rgba(132, 204, 22, .55);
    animation: queues-wb-pulse 1.6s ease-out infinite;
}
.queues-wb-pulse[data-state="error"] { color: #f87171; border-color: rgba(239, 68, 68, .35); }
.queues-wb-pulse[data-state="error"] .queues-wb-pulse__dot { background: #ef4444; }
@keyframes queues-wb-pulse {
    0% { box-shadow: 0 0 0 0 rgba(132, 204, 22, .45); }
    70% { box-shadow: 0 0 0 .55rem rgba(132, 204, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(132, 204, 22, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .queues-wb-pulse[data-state="live"] .queues-wb-pulse__dot { animation: none; }
}
.queues-wb-banner {
    padding: .65rem .8rem;
    border-radius: .55rem;
    border: 1px solid rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .1);
    color: var(--queues-ink);
    font-size: .88rem;
}
.queues-wb-banner--error {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .1);
}
.queues-wb-metric {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--queues-border);
    border-radius: .9rem;
    background: var(--queues-panel);
}
.queues-wb-metric__icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Solid darker lime + white glyph (DESIGN.md icon-badge rule / ≥3:1) */
    color: #ffffff;
    background: #4d7c0f;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.queues-wb-metric--talking .queues-wb-metric__icon { background: #15803d; color: #ffffff; }
.queues-wb-metric--available .queues-wb-metric__icon { background: #4d7c0f; color: #ffffff; }
.queues-wb-metric--eta .queues-wb-metric__icon { background: #6d28d9; color: #ffffff; }
.queues-wb-metric .queues-metric-value { font-size: 1.7rem; }
.queues-wb-statchip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    min-height: 2.5rem;
    align-items: center;
}
.queues-wb-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 1.85rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--queues-border);
    background: rgba(255, 255, 255, .03);
    font-size: .74rem;
    font-weight: 700;
    color: var(--queues-ink);
}
.queues-wb-chip__count { color: var(--queues-accent); font-weight: 850; }
.queues-wb-chip--on_call { border-color: rgba(34, 197, 94, .35); }
.queues-wb-chip--wrapping_up { border-color: rgba(245, 158, 11, .35); }
.queues-wb-chip--cooling_down { border-color: rgba(249, 115, 22, .4); }
.queues-wb-chip--dnd { border-color: rgba(236, 72, 153, .4); }
.queues-wb-chip--unavailable { border-color: rgba(239, 68, 68, .3); }
.queues-wb-side-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    min-height: 2.5rem;
    padding: .7rem .9rem;
    border: 1px solid var(--queues-border);
    border-radius: .75rem;
    background: var(--queues-panel);
}
.queues-wb-side-stat__value {
    color: var(--queues-ink);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.queues-wb-list,
.queues-wb-agents,
.queues-wb-leaderboard {
    max-height: 28rem;
    overflow: auto;
}
.queues-wb-row,
.queues-wb-agent,
.queues-wb-lb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--queues-border);
}
.queues-wb-row:last-child,
.queues-wb-agent:last-child,
.queues-wb-lb-row:last-child { border-bottom: 0; }
.queues-wb-row__title,
.queues-wb-agent__name,
.queues-wb-lb-name {
    color: var(--queues-ink);
    font-weight: 700;
    font-size: .92rem;
}
.queues-wb-row__stat,
.queues-wb-lb-stat {
    color: var(--queues-accent);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.queues-wb-agent__identity {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}
.queues-wb-presence {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--queues-muted);
    flex-shrink: 0;
}
.queues-wb-presence--available { background: #84cc16; box-shadow: 0 0 0 3px rgba(132, 204, 22, .18); }
.queues-wb-presence--ringing { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.queues-wb-presence--on_call { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.queues-wb-presence--wrapping_up { background: #a78bfa; box-shadow: 0 0 0 3px rgba(167, 139, 250, .18); }
.queues-wb-presence--cooling_down { background: #f97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, .2); }
.queues-wb-presence--dnd { background: #ec4899; box-shadow: 0 0 0 3px rgba(236, 72, 153, .2); }
.queues-wb-presence--unavailable { background: #ef4444; }
.queues-wb-presence--disabled { background: #6b7280; }
.queues-wb-wrap-countdown {
    color: #a78bfa;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.queues-wb-cooldown-countdown {
    color: #f97316;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.queues-wb-agent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
}
.queues-member-presence-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: .15rem;
}
.queues-member-presence-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: #e5e7eb;
    font-size: .74rem;
    font-weight: 700;
}
.queues-member-presence-badge--wrapping_up {
    border-color: rgba(167, 139, 250, .4);
    color: #c4b5fd;
}
.queues-member-presence-badge--cooling_down {
    border-color: rgba(249, 115, 22, .45);
    color: #fdba74;
}
.queues-member-presence-badge--dnd {
    border-color: rgba(236, 72, 153, .45);
    color: #f9a8d4;
}
.queues-wb-lb-rank {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(132, 204, 22, .14);
    color: var(--queues-accent);
    font-size: .75rem;
    font-weight: 850;
    flex-shrink: 0;
}
.queues-wb-chart { min-height: 300px; }
.queues-wb-skeleton .queues-wb-skel-card,
.queues-wb-skeleton .queues-wb-skel-panel {
    border-radius: .9rem;
    border: 1px solid var(--queues-border);
    background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.07), rgba(255,255,255,.03));
    background-size: 200% 100%;
    animation: queues-wb-skel 1.2s linear infinite;
}
.queues-wb-skel-card { height: 6.2rem; }
.queues-wb-skel-panel { height: 16rem; }
@keyframes queues-wb-skel {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .queues-wb-skeleton .queues-wb-skel-card,
    .queues-wb-skeleton .queues-wb-skel-panel { animation: none; }
}
.queues-empty-state--compact { padding: 1rem .75rem; border-style: solid; }
.queues-empty-state--compact .queues-empty-state-icon { font-size: 1.5rem; }
.queues-empty-state--compact .queues-empty-state-title { font-size: .92rem; }
.queues-empty-state--compact .queues-empty-state-message { font-size: .84rem; margin-bottom: 0; }
@media (max-width: 575.98px) {
    .queues-wb-hero { padding: .95rem 1rem; }
    .queues-wb-metric .queues-metric-value { font-size: 1.4rem; }
    .queues-wb-list,
    .queues-wb-agents,
    .queues-wb-leaderboard { max-height: 20rem; }
}

/* ── Premium Queues wallboard TV / kiosk ── */
.queues-wb-tv-body {
    background: #101010;
    color: #f6f7fb;
    min-height: 100vh;
}
.queues-wb-tv-main {
    min-height: 100vh;
    outline: none;
}
.queues-wb-tv {
    min-height: 100vh;
    padding: 1.1rem 1.35rem 1.5rem;
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(132, 204, 22, .1), transparent 50%),
        #101010;
}
.queues-wb-tv-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--queues-border);
    border-radius: .9rem;
    background: var(--queues-panel);
}
.queues-wb-tv-bar__brand {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 10rem;
}
.queues-wb-tv-title {
    color: var(--queues-ink);
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -.03em;
}
.queues-wb-tv-bar__controls {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 1 1 16rem;
    min-width: 14rem;
}
.queues-wb-tv-queue {
    max-width: 22rem;
    min-width: 12rem;
    flex: 1 1 auto;
}

/* Queues to monitor — multi-select checkbox dropdown */
.queues-wb-monitor {
    position: relative;
    width: 100%;
}
.queues-wb-monitor__toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 2.25rem;
    background-image: none;
}
.queues-wb-monitor__toggle::after {
    content: '';
    position: absolute;
    right: .85rem;
    top: 50%;
    width: .45rem;
    height: .45rem;
    border-right: 2px solid var(--queues-muted, #b3b3b3);
    border-bottom: 2px solid var(--queues-muted, #b3b3b3);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}
.queues-wb-monitor .dropdown-toggle::after { display: none; }
.queues-wb-monitor__menu {
    --bs-dropdown-min-width: 100%;
    width: min(100%, 22rem);
    max-width: min(100vw - 2rem, 22rem);
    padding: .35rem 0 .45rem;
    border: 1px solid var(--queues-border, rgba(255, 255, 255, .09));
    border-radius: .75rem;
    background: var(--queues-panel, #161616);
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .45);
    z-index: 1080;
}
.queues-wb-monitor__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    padding: .2rem .65rem .35rem;
    border-bottom: 1px solid var(--queues-border, rgba(255, 255, 255, .09));
}
.queues-wb-monitor__quick {
    --bs-btn-color: var(--queues-accent, #84cc16);
    --bs-btn-hover-color: #a3e635;
    padding: .35rem .2rem;
    min-height: 2.5rem;
    text-decoration: none;
    font-weight: 600;
}
.queues-wb-monitor__list {
    max-height: min(50vh, 18rem);
    overflow: auto;
    padding: .35rem .45rem;
    overscroll-behavior: contain;
}
.queues-wb-monitor__option {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 2.75rem;
    margin: 0;
    padding: .45rem .55rem;
    border-radius: .55rem;
    cursor: pointer;
    color: var(--queues-ink, #f6f7fb);
}
.queues-wb-monitor__option:hover,
.queues-wb-monitor__option:focus-within {
    background: rgba(255, 255, 255, .05);
}
.queues-wb-monitor__check {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    border-color: rgba(255, 255, 255, .28);
    background-color: transparent;
}
.queues-wb-monitor__check:checked {
    background-color: var(--queues-accent, #84cc16);
    border-color: var(--queues-accent, #84cc16);
}
.queues-wb-monitor__name {
    font-size: .9rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-theme-mode="light"] .queues-wb-monitor__menu {
    background: #ffffff;
    border-color: rgba(15, 23, 42, .12);
    box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .12);
}
[data-theme-mode="light"] .queues-wb-monitor__option {
    color: #172033;
}
[data-theme-mode="light"] .queues-wb-monitor__option:hover,
[data-theme-mode="light"] .queues-wb-monitor__option:focus-within {
    background: rgba(15, 23, 42, .05);
}
[data-theme-mode="light"] .queues-wb-monitor__check {
    border-color: rgba(15, 23, 42, .28);
}
.queues-wb-tv .queues-wb-monitor__menu {
    width: min(100vw - 2rem, 22rem);
}
.queues-wb-tv-bar__meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.queues-wb-tv-kpi-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}
.queues-wb-tv-kpi {
    padding: .75rem .85rem;
    border: 1px solid var(--queues-border);
    border-radius: .8rem;
    background: var(--queues-panel);
    min-height: 4.5rem;
}
.queues-wb-tv-kpi .queues-metric-value {
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: -.02em;
    color: var(--queues-ink);
}
.queues-wb-tv .queues-wb-metric .queues-metric-value {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 850;
}
.queues-wb-tv .queues-wb-metric {
    padding: 1.15rem 1.2rem;
}
.queues-wb-tv .queues-wb-list,
.queues-wb-tv .queues-wb-agents {
    max-height: min(52vh, 36rem);
}
.queues-wb-tv .queues-wb-agent__actions { display: none; }
.queues-wb-tv #queues-wb-pane-live.tab-pane {
    display: block !important;
    opacity: 1 !important;
}
/* True browser fullscreen: hide TV chrome for a kiosk-clean board.
   Hover near the top edge (JS adds --fs-reveal) briefly shows the toolbar. */
.queues-wb-tv--fs .queues-wb-tv-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    margin-bottom: 0;
    border-radius: 0 0 .9rem .9rem;
    border-color: rgba(132, 204, 22, .28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
}
.queues-wb-tv--fs.queues-wb-tv--fs-reveal .queues-wb-tv-bar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
@media (max-width: 1199.98px) {
    .queues-wb-tv-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .queues-wb-tv { padding: .85rem; }
    .queues-wb-tv-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .queues-wb-tv-bar__controls { width: 100%; }
    .queues-wb-tv-queue { max-width: none; }
}

/* ── Premium Queues wallboard — All queues multi-card ── */
.queues-wb-all-rollup {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}
.queues-wb-all-rollup__item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-height: 4.25rem;
    padding: .8rem .95rem;
    border: 1px solid var(--queues-border);
    border-radius: .85rem;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(132, 204, 22, .1), transparent 55%),
        var(--queues-panel);
}
.queues-wb-all-rollup__item strong {
    color: var(--queues-ink);
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.queues-wb-all-grid {
    display: grid;
    /* auto-fit collapses unused tracks so few cards expand across the row */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22.5rem), 1fr));
    gap: 1rem;
    width: 100%;
    align-items: stretch;
}
.queues-wb-qcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    width: 100%;
    max-width: none;
    container-type: inline-size;
    container-name: queues-wb-qcard;
    border: 1px solid var(--queues-border);
    border-radius: .95rem;
    background: var(--queues-panel);
    overflow: hidden;
}
.queues-wb-qcard--active {
    border-color: rgba(132, 204, 22, .38);
    box-shadow: inset 0 0 0 1px rgba(132, 204, 22, .12);
}
/* Wait urgency — amber warn / red critical (SLA-based; overrides active green) */
.queues-wb-qcard--warn {
    border-color: rgba(245, 158, 11, .5);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .16);
}
.queues-wb-qcard--warn .queues-wb-qcard__head {
    background: radial-gradient(120% 80% at 0% 0%, rgba(245, 158, 11, .16), transparent 55%);
}
.queues-wb-qcard--warn .queues-wb-qcard__badge {
    border-color: rgba(245, 158, 11, .4);
    background: rgba(245, 158, 11, .14);
    color: #fbbf24;
}
.queues-wb-qcard--critical {
    border-color: rgba(239, 68, 68, .55);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .2);
    animation: queues-wb-urgency-pulse 2.4s ease-in-out infinite;
}
.queues-wb-qcard--critical .queues-wb-qcard__head {
    background: radial-gradient(120% 80% at 0% 0%, rgba(239, 68, 68, .2), transparent 55%);
}
.queues-wb-qcard--critical .queues-wb-qcard__badge {
    border-color: rgba(239, 68, 68, .45);
    background: rgba(239, 68, 68, .16);
    color: #fca5a5;
}
.queues-wb-side-stat--warn {
    border-color: rgba(245, 158, 11, .45);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(245, 158, 11, .12), transparent 55%),
        var(--queues-panel);
}
.queues-wb-side-stat--warn .queues-wb-side-stat__value { color: #fbbf24; }
.queues-wb-side-stat--critical {
    border-color: rgba(239, 68, 68, .5);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(239, 68, 68, .14), transparent 55%),
        var(--queues-panel);
    animation: queues-wb-urgency-pulse 2.4s ease-in-out infinite;
}
.queues-wb-side-stat--critical .queues-wb-side-stat__value { color: #fca5a5; }
.queues-wb-row--warn {
    background: rgba(245, 158, 11, .07);
    box-shadow: inset 3px 0 0 rgba(245, 158, 11, .75);
}
.queues-wb-row--warn .queues-wb-row__stat { color: #fbbf24; font-weight: 750; }
.queues-wb-row--critical {
    background: rgba(239, 68, 68, .09);
    box-shadow: inset 3px 0 0 rgba(239, 68, 68, .85);
    animation: queues-wb-urgency-pulse 2.4s ease-in-out infinite;
}
.queues-wb-row--critical .queues-wb-row__stat { color: #fca5a5; font-weight: 800; }
.queues-wb-metric--warn {
    border-color: rgba(245, 158, 11, .45);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(245, 158, 11, .12), transparent 55%),
        var(--queues-panel);
}
.queues-wb-metric--warn .queues-metric-value { color: #fbbf24; }
.queues-wb-metric--critical {
    border-color: rgba(239, 68, 68, .5);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(239, 68, 68, .14), transparent 55%),
        var(--queues-panel);
    animation: queues-wb-urgency-pulse 2.4s ease-in-out infinite;
}
.queues-wb-metric--critical .queues-metric-value { color: #fca5a5; }
/* TV: slightly stronger borders for large-display readability */
.queues-wb-tv .queues-wb-qcard--warn,
.queues-wb-tv .queues-wb-side-stat--warn,
.queues-wb-tv .queues-wb-metric--warn {
    border-width: 2px;
}
.queues-wb-tv .queues-wb-qcard--critical,
.queues-wb-tv .queues-wb-side-stat--critical,
.queues-wb-tv .queues-wb-metric--critical {
    border-width: 2px;
}
@keyframes queues-wb-urgency-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .82; }
}
@media (prefers-reduced-motion: reduce) {
    .queues-wb-qcard--critical,
    .queues-wb-side-stat--critical,
    .queues-wb-row--critical,
    .queues-wb-metric--critical {
        animation: none;
    }
}
.queues-wb-qcard__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.1rem .85rem;
    border-bottom: 1px solid var(--queues-border);
    background: radial-gradient(120% 80% at 0% 0%, rgba(132, 204, 22, .12), transparent 55%);
}
.queues-wb-qcard__title {
    margin: 0;
    color: var(--queues-ink);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.queues-wb-qcard__badge {
    flex-shrink: 0;
    min-height: 1.7rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(132, 204, 22, .35);
    background: rgba(132, 204, 22, .12);
    color: var(--queues-accent);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.queues-wb-qcard__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    padding: .85rem 1rem .35rem;
}
.queues-wb-qcard__metric {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
    min-height: 3.4rem;
    padding: .55rem .7rem;
    border: 1px solid var(--queues-border);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .02);
}
.queues-wb-qcard__metric strong {
    color: var(--queues-ink);
    font-size: 1.2rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.queues-wb-qcard__side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    padding: .35rem 1rem .55rem;
}
.queues-wb-qcard__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: 0 1rem .7rem;
}
.queues-wb-qcard__chips .queues-wb-chip {
    flex: 1 1 5.5rem;
    justify-content: center;
    min-width: 0;
}
.queues-wb-qcard__lists {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid var(--queues-border);
    margin-top: auto;
}
.queues-wb-qcard__panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--queues-border);
    color: var(--queues-ink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .02);
}
.queues-wb-qcard__list {
    max-height: 11.5rem;
}
.queues-wb-qcard .queues-wb-row,
.queues-wb-qcard .queues-wb-agent {
    padding: .65rem .9rem;
}
/* Wider cards: stretch metrics / side-by-side lists so content fills the surface */
@container queues-wb-qcard (min-width: 36rem) {
    .queues-wb-qcard__metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .65rem;
        padding: 1rem 1.15rem .45rem;
    }
    .queues-wb-qcard__metric {
        min-height: 3.75rem;
        padding: .65rem .8rem;
    }
    .queues-wb-qcard__metric strong {
        font-size: clamp(1.25rem, 2.4cqi, 1.55rem);
    }
    .queues-wb-qcard__side {
        gap: .65rem;
        padding: .45rem 1.15rem .65rem;
    }
    .queues-wb-qcard__chips {
        padding: 0 1.15rem .85rem;
    }
    .queues-wb-qcard__lists {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .queues-wb-qcard__lists .queues-wb-qcard__panel + .queues-wb-qcard__panel {
        border-left: 1px solid var(--queues-border);
    }
    .queues-wb-qcard__list {
        max-height: 14rem;
    }
    .queues-wb-tv .queues-wb-qcard__list {
        max-height: min(32vh, 18rem);
    }
}
.queues-wb-tv .queues-wb-all-rollup {
    margin-bottom: 1rem;
}
.queues-wb-tv .queues-wb-all-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 1.1rem;
}
.queues-wb-tv .queues-wb-qcard__metric strong {
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}
.queues-wb-tv .queues-wb-qcard__list {
    max-height: min(28vh, 16rem);
}
@media (max-width: 991.98px) {
    .queues-wb-all-rollup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .queues-wb-all-rollup { grid-template-columns: 1fr 1fr; }
    .queues-wb-all-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Hybrid SIP — Queue Wallboard (teal accent over queues-wb) */
.ent-queue-wb-page.ent-page-container {
    --ent-accent: #0d6efd;
    --ent-accent-deep: #0a58ca;
}
.ent-queue-wb-hero.queues-wb-hero {
    border-color: rgba(13, 110, 253, 0.22);
    background:
        linear-gradient(135deg, rgba(13, 110, 253, 0.08), transparent 42%),
        #161616;
}
.ent-queue-wb-page .queues-eyebrow {
    color: #5eead4;
}
.ent-queue-wb-page .queues-wb-pulse[data-state="live"] .queues-wb-pulse__dot {
    background: #0d6efd;
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.45);
}
.ent-queue-wb-tabs.queues-nav-tabs .nav-link.active {
    border-bottom-color: #0d6efd;
    color: #5eead4;
}
.ent-queue-wb-page .queues-wb-metric__icon {
    background: rgba(13, 110, 253, 0.16);
    color: #5eead4;
}
.ent-queue-wb-page .queues-wb-qcard--active {
    border-color: rgba(13, 110, 253, 0.35);
}
[data-theme-mode="light"] .ent-queue-wb-hero.queues-wb-hero {
    background:
        linear-gradient(135deg, rgba(10, 88, 202, 0.08), transparent 42%),
        #ffffff;
    border-color: rgba(10, 88, 202, 0.18);
}
[data-theme-mode="light"] .ent-queue-wb-page .queues-eyebrow {
    color: #0a58ca;
}

/* --- Hybrid @hybrid single-trunk portal (/sub/hybrid/) -------------------
   Scope ONLY under .ent-page-container.ent-portal-mode so main manage
   detail sidenav width / layout is never affected. */
.ent-page-container.ent-portal-mode #hst-list-view,
.ent-page-container.ent-portal-mode #hst-detail-sidenav,
.ent-page-container.ent-portal-mode #hst-detail-back,
.ent-page-container.ent-portal-mode #hst-manage-create-open,
.ent-page-container.ent-portal-mode #hst-trunk-login-panel,
.ent-page-container.ent-portal-mode .ent-trunk-login-panel,
.ent-page-container.ent-portal-mode #hst-trunk-login-modal,
.ent-page-container.ent-portal-mode [data-hst-open-trunk-login] {
    display: none !important;
}
.ent-page-container.ent-portal-mode #hst-detail-view {
    display: block !important;
}
.ent-page-container.ent-portal-mode.ent-portal-layout .ent-detail-layout,
.ent-page-container.ent-portal-mode .ent-detail-layout {
    grid-template-columns: minmax(0, 1fr);
}
.ent-page-container.ent-portal-mode .ent-detail-sidenav {
    max-width: none;
}
.ent-page-container.ent-portal-mode .ent-detail-nav-row .ent-eyebrow {
    margin-left: 0;
}
.ent-page-container.ent-portal-mode .ent-portal-context .ent-hero-title,
.ent-portal-context .ent-hero-title {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
}

/* --- Hybrid @hybrid single-trunk portal (/sub/hybrid/) Overview viewport dashboard ---
   Side-by-side 2-column grid layout so the entire dashboard fits in viewport without scrolling. */
.ent-page-container.ent-portal-mode {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.ent-page-container.ent-portal-mode #hst-detail-view > .row.g-3.mb-3,
.ent-page-container.ent-portal-mode #hst-detail-view > .row.mb-3 {
    margin-bottom: 0.35rem !important;
}

@media (min-width: 992px) {
    .ent-page-container.ent-portal-mode #hst-section-identity {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }
}

.ent-page-container.ent-portal-mode #hst-overview-ops-host {
    margin-bottom: 0 !important;
}

.ent-page-container.ent-portal-mode .ent-ops-console--embedded {
    padding: 0.75rem 1rem;
}

/* Prevent letter-by-letter vertical wrapping on hero title & AOR */
.ent-page-container.ent-portal-mode .ent-overview-hero {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ent-page-container.ent-portal-mode .ent-overview-hero__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    min-width: 0;
}

.ent-page-container.ent-portal-mode .ent-overview-hero__title {
    font-size: 1.2rem;
    line-height: 1.2;
    word-break: normal !important;
    white-space: nowrap !important;
    margin-bottom: 0;
}

.ent-page-container.ent-portal-mode .ent-overview-hero__aor {
    font-size: 0.875rem;
    word-break: normal !important;
    white-space: nowrap !important;
    margin-bottom: 0;
}

.ent-page-container.ent-portal-mode .ent-overview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ent-page-container.ent-portal-mode .ent-overview-actions__link {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.ent-page-container.ent-portal-mode .ent-overview-grid {
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.ent-page-container.ent-portal-mode .ent-overview-block {
    padding: 0.6rem 0.85rem;
}

.ent-page-container.ent-portal-mode .ent-overview-devices {
    margin-bottom: 0;
}

.ent-page-container.ent-portal-mode .ent-overview-devices__scroll {
    max-height: 125px;
    overflow-y: auto;
}

/* Right Column: Live Calls + Trunk Details */
.ent-page-container.ent-portal-mode .ent-identity-live-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ent-page-container.ent-portal-mode .ent-identity-live-grid__identity {
    padding: 0.75rem 1rem;
}

.ent-page-container.ent-portal-mode .ent-identity-live-grid__identity .ent-section-title {
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
}

.ent-page-container.ent-portal-mode .ent-identity-live-grid__identity .ent-muted {
    margin-bottom: 0.4rem !important;
    font-size: 0.825rem !important;
}

/* 2-column side-by-side fields inside Trunk Details card to reduce vertical size */
.ent-page-container.ent-portal-mode .ent-trunk-details-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.35rem;
}

.ent-page-container.ent-portal-mode .ent-trunk-details-fields > .ent-edit-field-wrap {
    width: 100%;
    margin-bottom: 0;
    min-width: 0;
}

.ent-page-container.ent-portal-mode .ent-trunk-details-fields .ent-credential-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

.ent-page-container.ent-portal-mode .ent-trunk-details-fields .ent-form-control {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.825rem;
    padding: 0.25rem 0.4rem;
}

.ent-page-container.ent-portal-mode .ent-trunk-details-fields .btn,
.ent-page-container.ent-portal-mode .ent-trunk-details-fields button {
    padding: 0.25rem 0.45rem;
    font-size: 0.775rem;
}

@media (max-width: 575.98px) {
    .ent-page-container.ent-portal-mode .ent-trunk-details-fields {
        grid-template-columns: 1fr;
    }
}

/* Trunk login modal (main manage Overview action — not an inline Overview card) */
.ent-trunk-login-modal-body {
    min-height: 4rem;
}
.ent-trunk-login-modal__promo {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid rgba(245, 158, 11, 0.38);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(245, 158, 11, 0.16), transparent 55%),
        linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(234, 179, 8, 0.05)),
        var(--ent-surface-raised, #1a1a1a);
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.55);
}
.ent-trunk-login-modal__promo-glow {
    position: absolute;
    top: -55%;
    right: -18%;
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.22) 0%, transparent 68%);
    pointer-events: none;
    animation: hst-trunk-login-promo-pulse 5s ease-in-out infinite;
}
@keyframes hst-trunk-login-promo-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .ent-trunk-login-modal__promo-glow {
        animation: none;
    }
}
.ent-trunk-login-modal__promo-inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
}
.ent-trunk-login-modal__promo-icon {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.9), #facc15);
    color: #101010;
    font-size: 1.15rem;
    border: 1px solid rgba(234, 179, 8, 0.35);
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.25);
}
.ent-trunk-login-modal__promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fbbf24;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.ent-trunk-login-modal__promo-title {
    margin: 0 0 0.3rem;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--ent-ink, #f6f7fb);
    letter-spacing: -0.01em;
}
.ent-trunk-login-modal__promo-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ent-muted, #b3b3b3);
}
[data-theme-mode="light"] .ent-trunk-login-modal__promo {
    border-color: rgba(217, 119, 6, 0.35);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(245, 158, 11, 0.12), transparent 55%),
        linear-gradient(135deg, rgba(254, 243, 199, 0.75), rgba(255, 255, 255, 0.95));
    box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.18);
}
[data-theme-mode="light"] .ent-trunk-login-modal__promo-badge {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(217, 119, 6, 0.28);
    color: #b45309;
}
[data-theme-mode="light"] .ent-trunk-login-modal__promo-title {
    color: #0f172a;
}
[data-theme-mode="light"] .ent-trunk-login-modal__promo-text {
    color: #475569;
}
.ent-trunk-login-modal__empty {
    padding: 0.15rem 0 0;
}
.ent-trunk-login-modal__meta {
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.65rem;
    background: var(--ent-surface, #161616);
}
.ent-trunk-login-modal__copy {
    color: var(--ent-accent, #0d6efd);
    text-decoration: none;
    margin-left: 0.2rem;
}
.ent-trunk-login-modal__copy:hover,
.ent-trunk-login-modal__copy:focus-visible {
    color: #5eead4;
}
.ent-trunk-login-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
}
.ent-trunk-login-modal__action {
    flex: 1 1 auto;
    min-width: min(100%, 9.5rem);
    justify-content: flex-start;
}
.ent-trunk-login-modal__action--edit {
    --ent-action-chip-icon-bg: #0a58ca;
    --ent-action-chip-border: rgba(13, 110, 253, 0.42);
}
.ent-trunk-login-modal__action--edit:hover,
.ent-trunk-login-modal__action--edit:focus-visible {
    --ent-action-chip-icon-bg: #0d6efd;
    --ent-action-chip-border: rgba(13, 110, 253, 0.6);
}
.ent-trunk-login-modal__action--disable {
    --ent-action-chip-icon-bg: #b45309;
    --ent-action-chip-border: rgba(245, 158, 11, 0.38);
}
.ent-trunk-login-modal__action--disable:hover,
.ent-trunk-login-modal__action--disable:focus-visible {
    --ent-action-chip-bg: rgba(245, 158, 11, 0.1);
    --ent-action-chip-icon-bg: #d97706;
    --ent-action-chip-border: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.28);
}
.ent-trunk-login-modal__action--reactivate {
    --ent-action-chip-icon-bg: #15803d;
    --ent-action-chip-border: rgba(34, 197, 94, 0.38);
}
.ent-trunk-login-modal__action--reactivate:hover,
.ent-trunk-login-modal__action--reactivate:focus-visible {
    --ent-action-chip-bg: rgba(34, 197, 94, 0.1);
    --ent-action-chip-icon-bg: #16a34a;
    --ent-action-chip-border: rgba(34, 197, 94, 0.55);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.28);
}
.ent-trunk-login-modal__action--reset {
    --ent-action-chip-icon-bg: #6d28d9;
    --ent-action-chip-border: rgba(139, 92, 246, 0.4);
}
.ent-trunk-login-modal__action--reset:hover,
.ent-trunk-login-modal__action--reset:focus-visible {
    --ent-action-chip-bg: rgba(139, 92, 246, 0.1);
    --ent-action-chip-icon-bg: #7c3aed;
    --ent-action-chip-border: rgba(139, 92, 246, 0.58);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.28);
}
[data-theme-mode="light"] .ent-trunk-login-modal__meta {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}
[data-theme-mode="light"] .ent-trunk-login-modal__actions {
    border-top-color: rgba(15, 23, 42, 0.1);
}
[data-theme-mode="light"] .ent-trunk-login-modal__copy {
    color: #0a58ca;
}
[data-theme-mode="light"] .ent-trunk-login-modal__copy:hover,
[data-theme-mode="light"] .ent-trunk-login-modal__copy:focus-visible {
    color: #0a58ca;
}
@media (max-width: 575.98px) {
    .ent-trunk-login-modal__action {
        min-width: 100%;
    }
}

/* --- Hybrid WebRTC Softphone (hst-softphone-*) ---------------------------
   Portal @hybrid section `softphone` + manage deep-link. Teal Hybrid tokens,
   off-black surfaces, mobile-first (dialer usable at 320px, 44x44 targets).
   Red is reserved for End / Decline / delete only. */

#hst-section-softphone.ent-softphone-expanded {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: var(--bs-body-bg, #121212) !important;
    overflow-y: auto !important;
    padding: 1.25rem 1.5rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

[data-theme-mode="dark"] #hst-section-softphone.ent-softphone-expanded {
    background-color: #121212 !important;
}

.ent-softphone {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ent-softphone-statusbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--ent-border);
    border-radius: 10px;
    background: var(--ent-surface);
}

.ent-softphone-statusbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}

/* Status-bar Connect / DND / Disconnect — compact chips (in-call controls keep 44px). */
.ent-softphone-statusbar__actions .ent-softphone-ctrl-btn {
    min-height: 30px;
    min-width: 0;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 7px;
    font-size: 0.75rem;
}

.ent-softphone-statusbar__actions .ent-softphone-ctrl-btn i {
    font-size: 0.95rem;
}

.ent-softphone-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface-raised);
    color: var(--ent-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.ent-softphone-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6b7280;
    flex: 0 0 auto;
}

.ent-softphone-status-chip[data-hsp-state="registered"] .ent-softphone-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.ent-softphone-status-chip[data-hsp-state="connecting"] .ent-softphone-status-dot,
.ent-softphone-status-chip[data-hsp-state="reconnecting"] .ent-softphone-status-dot {
    background: #f59e0b;
    animation: hst-softphone-pulse 1.1s ease-in-out infinite;
}

.ent-softphone-status-chip[data-hsp-state="registration_failed"] .ent-softphone-status-dot,
.ent-softphone-status-chip[data-hsp-state="mic_denied"] .ent-softphone-status-dot {
    background: #ef4444;
}

@keyframes hst-softphone-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.ent-softphone-aor {
    color: var(--ent-muted);
    font-size: 0.8125rem;
}

.ent-softphone-call-btn,
.ent-softphone-answer-btn,
.ent-softphone-send-btn,
.ent-softphone-newmsg-btn {
    background: var(--ent-accent);
    border: 1px solid var(--ent-accent-deep);
    color: #04211d;
    font-weight: 700;
}

.ent-softphone-call-btn:hover,
.ent-softphone-answer-btn:hover,
.ent-softphone-send-btn:hover,
.ent-softphone-newmsg-btn:hover {
    background: var(--ent-accent-deep);
    border-color: var(--ent-accent-deep);
    color: #f0fdfa;
}

.ent-softphone-call-btn:disabled,
.ent-softphone-send-btn:disabled {
    opacity: 0.55;
}

.ent-softphone-feedback {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(13, 110, 253, 0.35);
    background: rgba(13, 110, 253, 0.1);
    color: var(--ent-ink);
    font-size: 0.875rem;
}

.ent-softphone-feedback--error {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.12);
}

/* Incoming call banner */
.ent-softphone-incoming {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(13, 110, 253, 0.5);
    background: linear-gradient(145deg, rgba(13, 110, 253, 0.16), transparent 60%), var(--ent-surface-raised);
}

.ent-softphone-incoming__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ent-softphone-incoming__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ent-accent);
}

.ent-softphone-incoming__peer {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-softphone-incoming__actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.ent-softphone-incoming__actions .btn {
    min-height: 44px;
    min-width: 44px;
}

/* Persistent @hybrid portal call strip — attached outside #htmx-content so
   registration and call controls remain available between portal sections.
   Tokens are self-contained: this strip mounts on document.body, outside
   .ent-page-container where --ent-* are normally defined. */
.ent-softphone-global-call {
    --ent-surface: #161616;
    --ent-surface-raised: #1a1a1a;
    --ent-border: rgba(255, 255, 255, 0.09);
    --ent-ink: #f6f7fb;
    --ent-muted: #b3b3b3;
    --ent-accent: #0d6efd;
    --ent-accent-deep: #0a58ca;
    position: fixed;
    z-index: 1080;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: min(34rem, calc(100vw - 2rem));
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(13, 110, 253, 0.55);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(13, 110, 253, 0.16), transparent 62%), var(--ent-surface-raised, #1a1a1a);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
    color: var(--ent-ink);
}

[data-theme-mode="light"] .ent-softphone-global-call {
    --ent-surface: #ffffff;
    --ent-surface-raised: #f8fafc;
    --ent-border: rgba(15, 23, 42, 0.1);
    --ent-ink: #0f172a;
    --ent-muted: #64748b;
}

.ent-softphone-global-call__summary {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 10rem;
}

.ent-softphone-global-call__label {
    color: var(--ent-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ent-softphone-global-call__peer {
    overflow: hidden;
    color: var(--ent-ink);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ent-softphone-global-call__state {
    color: var(--ent-muted);
}

.ent-softphone-global-call__actions {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ent-softphone-global-call__actions .btn {
    min-height: 44px;
}

.ent-softphone-global-open {
    border: 1px solid var(--ent-border);
    background: var(--ent-surface);
    color: var(--ent-ink);
}

.ent-softphone-global-open:hover,
.ent-softphone-global-open:focus-visible {
    border-color: var(--ent-accent);
    color: var(--ent-ink);
}

@media (min-width: 540px) {
    .ent-softphone-global-call__actions {
        flex: 0 0 auto;
    }
}

/* Layout: BLF rail | dialer | context tabs (Recents / Messages / Settings)
   Mobile stacks: BLFs → keypad → tabs. */
.ent-softphone-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

@media (min-width: 768px) {
    .ent-softphone-layout {
        grid-template-columns: minmax(140px, 200px) minmax(240px, 320px) minmax(0, 1fr);
        align-items: start;
    }
}

@media (min-width: 1100px) {
    .ent-softphone-layout {
        grid-template-columns: minmax(160px, 220px) minmax(260px, 340px) minmax(0, 1fr);
    }
}

.ent-softphone-blf-rail,
.ent-softphone-dialer,
.ent-softphone-context {
    padding: 0.85rem;
    border: 1px solid var(--ent-border);
    border-radius: 10px;
    background: var(--ent-surface);
    min-width: 0;
}

.ent-softphone-blf-rail {
    min-height: 0;
}

.ent-softphone-blf-rail__inner {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ent-softphone-blf-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ent-softphone-blf-rail__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ent-muted);
}

.ent-softphone-blf-rail__empty {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.15rem;
}

.ent-softphone-blf-rail__empty-title {
    font-weight: 650;
    color: var(--ent-ink);
    margin: 0;
}

.ent-softphone-blf-list--rail {
    gap: 0.35rem;
}

.ent-softphone-blf--rail {
    padding: 0.35rem 0.45rem;
}

.ent-softphone-settings__title {
    font-weight: 700;
    color: var(--ent-ink);
    margin: 0;
}

.ent-softphone-settings__section-title {
    font-weight: 650;
    font-size: 0.9rem;
    color: var(--ent-ink);
    margin: 0 0 0.2rem 0;
}

.ent-softphone-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.55rem 0 0.75rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--ent-border);
}

.ent-softphone-settings-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.35rem 0.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ent-muted);
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
}

.ent-softphone-settings-tab:hover,
.ent-softphone-settings-tab:focus-visible {
    color: var(--ent-ink);
}

.ent-softphone-settings-tab.is-active {
    color: var(--ent-ink);
    border-bottom-color: var(--ent-accent);
}

.ent-softphone-settings-pane {
    min-width: 0;
}

.ent-softphone-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.65rem;
    margin: 0 0 0.35rem;
}

.ent-softphone-settings-grid--stacked {
    grid-template-columns: 1fr;
}

#hst-softphone-audio-prefs {
    grid-column: 1 / -1;
}

.ent-softphone-settings-prefs {
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--ent-border);
    border-radius: 8px;
    background: var(--ent-surface-raised);
    display: flex;
    flex-direction: column;
}

.ent-softphone-audio-switches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.35rem 0.75rem;
    margin-top: 0.35rem;
    margin-bottom: 0.4rem;
}

.ent-softphone-audio-volumes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.45rem 1rem;
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--ent-border);
}

.ent-softphone-notification-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    min-height: 34px;
    margin-top: 0.35rem;
}

.ent-softphone-notification-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ent-ink);
    background: rgba(148, 163, 184, 0.16);
}

.ent-softphone-notification-status[data-hsp-notification-state="granted"] {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.35);
}

.ent-softphone-notification-status[data-hsp-notification-state="denied"] {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.35);
}

.ent-softphone-notification-status[data-hsp-notification-state="unsupported"] {
    color: #e5e7eb;
    background: rgba(100, 116, 139, 0.22);
    border-color: rgba(148, 163, 184, 0.28);
}

[data-theme-mode="light"] .ent-softphone-notification-status {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(100, 116, 139, 0.12);
    color: #1f2937;
}

[data-theme-mode="light"] .ent-softphone-notification-status[data-hsp-notification-state="granted"] {
    color: #166534;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(22, 163, 74, 0.35);
}

[data-theme-mode="light"] .ent-softphone-notification-status[data-hsp-notification-state="denied"] {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme-mode="light"] .ent-softphone-notification-status[data-hsp-notification-state="unsupported"] {
    color: #334155;
    background: rgba(100, 116, 139, 0.14);
    border-color: rgba(100, 116, 139, 0.28);
}

.sms-desktop-alerts-prefs .sms-chart-title {
    font-size: 1rem;
}

.sms-desktop-alerts-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.sms-desktop-alerts-status {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(100, 116, 139, 0.18);
    color: #e5e7eb;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sms-desktop-alerts-status[data-sms-notification-state="granted"] {
    color: #86efac;
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.35);
}

.sms-desktop-alerts-status[data-sms-notification-state="denied"] {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.32);
}

.sms-desktop-alerts-status[data-sms-notification-state="unsupported"] {
    color: #cbd5e1;
    background: rgba(100, 116, 139, 0.2);
    border-color: rgba(148, 163, 184, 0.28);
}

.sms-desktop-alerts-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sms-desktop-alerts-btn--positive {
    border-color: rgba(34, 197, 94, 0.45);
    color: #86efac;
}

.sms-desktop-alerts-btn--positive:hover,
.sms-desktop-alerts-btn--positive:focus {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.55);
    color: #bbf7d0;
}

[data-theme-mode="light"] .sms-desktop-alerts-status {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(100, 116, 139, 0.12);
    color: #1f2937;
}

[data-theme-mode="light"] .sms-desktop-alerts-status[data-sms-notification-state="granted"] {
    color: #166534;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(22, 163, 74, 0.35);
}

[data-theme-mode="light"] .sms-desktop-alerts-status[data-sms-notification-state="denied"] {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme-mode="light"] .sms-desktop-alerts-btn--positive {
    color: #166534;
    border-color: rgba(22, 163, 74, 0.35);
}

.ent-softphone-settings-blf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
    padding-top: 0.25rem;
}

.ent-softphone-pref-switch,
.ent-softphone-ringtone-switch {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 2.35rem;
    margin-bottom: 0.25rem;
}

.ent-softphone-pref-switch .form-check-input,
.ent-softphone-ringtone-switch .form-check-input {
    width: 2.2rem;
    height: 1.15rem;
    margin-left: -2.35rem;
    cursor: pointer;
}

.ent-softphone-pref-switch .form-check-label,
.ent-softphone-ringtone-switch .form-check-label {
    cursor: pointer;
    font-size: 0.825rem;
    color: var(--ent-ink);
}

.ent-softphone-volume {
    margin-top: 0.15rem;
}

.ent-softphone-volume .form-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--ent-ink);
    margin-bottom: 0.2rem;
}

.ent-softphone-volume__range {
    width: 100%;
    accent-color: var(--ent-accent, #0d6efd);
    min-height: 32px;
    cursor: pointer;
}

[data-theme-mode="dark"] .ent-softphone-volume__range {
    accent-color: var(--ent-accent, #0d6efd);
}

.ent-softphone-recents-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--ent-border);
}

.ent-softphone-recents-pager__meta {
    font-size: 0.78rem;
    line-height: 1.2;
}

.ent-softphone-recents-pager__actions {
    display: flex;
    gap: 0.3rem;
}

.ent-softphone-recents-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 28px;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--ent-border);
    border-radius: 6px;
    background: transparent;
    color: var(--ent-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ent-softphone-recents-pager__btn i {
    font-size: 1rem;
    line-height: 1;
}

.ent-softphone-recents-pager__btn:hover:not(:disabled),
.ent-softphone-recents-pager__btn:focus-visible:not(:disabled) {
    border-color: rgba(13, 110, 253, 0.55);
    background: rgba(13, 110, 253, 0.1);
    color: var(--ent-ink);
    outline: none;
}

.ent-softphone-recents-pager__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ent-softphone-number {
    font-size: 1.2rem;
    letter-spacing: 0.03em;
    text-align: center;
    min-height: 48px;
}

.ent-softphone-keypad {
    display: grid;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.ent-softphone-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 10px;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface-raised);
    color: var(--ent-ink);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.ent-softphone-key:hover,
.ent-softphone-key:focus-visible {
    border-color: rgba(13, 110, 253, 0.55);
    background: rgba(13, 110, 253, 0.1);
}

.ent-softphone-key__digit {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
}

.ent-softphone-key__letters {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    color: var(--ent-muted);
}

.ent-softphone-callrow {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ent-softphone-callrow .btn {
    min-height: 48px;
    font-size: 1rem;
}

.ent-softphone-callrow .ent-softphone-call-btn {
    flex: 2 1 auto;
}

.ent-softphone-callrow .ent-softphone-backspace-btn,
.ent-softphone-callrow .ent-softphone-clear-btn {
    flex: 0 0 auto;
}

.ent-softphone-callrow .ent-softphone-backspace-btn:disabled,
.ent-softphone-callrow .ent-softphone-clear-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Active call strip */
.ent-softphone-active {
    margin-top: 0.85rem;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(13, 110, 253, 0.4);
    background: var(--ent-surface-raised);
}

.ent-softphone-active__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.ent-softphone-active__peer {
    font-size: 1.05rem;
    font-weight: 700;
}

.ent-softphone-active__timer {
    font-variant-numeric: tabular-nums;
    color: var(--ent-accent);
    font-weight: 700;
}

.ent-softphone-active__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* Softphone control chips — shared radius/padding/icon gap for Mute, Hold,
   Connect, Disconnect, Add BLF, and Remove. Neutral base; semantic variants tint. */
.ent-softphone-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0.55rem 0.95rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--ent-surface);
    color: var(--ent-ink);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    transition:
        background-color 0.12s ease,
        border-color 0.12s ease,
        color 0.12s ease,
        box-shadow 0.12s ease,
        opacity 0.12s ease;
}

.ent-softphone-active__controls .ent-softphone-ctrl-btn {
    flex: 1 1 calc(50% - 0.25rem);
}

.ent-softphone-transfer-panel {
    margin-top: 0.65rem;
    padding: 0.75rem;
    border: 1px solid rgba(13, 110, 253, 0.38);
    border-radius: 10px;
    background: var(--ent-surface);
}

.ent-softphone-transfer-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ent-softphone-transfer-panel__actions .ent-softphone-ctrl-btn {
    flex: 1 1 calc(50% - 0.25rem);
}

[data-theme-mode="light"] .ent-softphone-transfer-panel {
    border-color: rgba(10, 88, 202, 0.35);
    background: #ffffff;
}

.ent-softphone-ctrl-btn i {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}

.ent-softphone-ctrl-btn span {
    letter-spacing: 0.01em;
}

.ent-softphone-ctrl-btn:hover {
    border-color: rgba(13, 110, 253, 0.5);
    background: rgba(13, 110, 253, 0.1);
    color: var(--ent-ink);
}

.ent-softphone-ctrl-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-color: rgba(13, 110, 253, 0.55);
}

.ent-softphone-ctrl-btn:active {
    background: rgba(13, 110, 253, 0.16);
    border-color: rgba(13, 110, 253, 0.6);
}

.ent-softphone-ctrl-btn:disabled,
.ent-softphone-ctrl-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mute / Hold pressed toggles */
.ent-softphone-ctrl-btn--mute[aria-pressed="true"] {
    border-color: rgba(245, 158, 11, 0.7);
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.ent-softphone-ctrl-btn--mute[aria-pressed="true"]:hover {
    border-color: rgba(245, 158, 11, 0.85);
    background: rgba(245, 158, 11, 0.24);
    color: #fcd34d;
}

.ent-softphone-ctrl-btn--hold[aria-pressed="true"] {
    border-color: rgba(13, 110, 253, 0.75);
    background: rgba(13, 110, 253, 0.2);
    color: #5eead4;
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.22);
}

.ent-softphone-ctrl-btn--hold[aria-pressed="true"]:hover {
    border-color: rgba(13, 110, 253, 0.9);
    background: rgba(13, 110, 253, 0.28);
    color: #99f6e4;
}

.ent-softphone-ctrl-btn--dnd[aria-pressed="true"] {
    border-color: rgba(245, 158, 11, 0.72);
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.ent-softphone-ctrl-btn--dnd[aria-pressed="true"]:hover {
    border-color: rgba(245, 158, 11, 0.9);
    background: rgba(245, 158, 11, 0.25);
    color: #fcd34d;
}

/* Connect / Add BLF — teal positive accent chip */
.ent-softphone-ctrl-btn--positive {
    border-color: rgba(13, 110, 253, 0.75);
    background: rgba(13, 110, 253, 0.2);
    color: #5eead4;
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.22);
}

.ent-softphone-ctrl-btn--positive:hover {
    border-color: rgba(13, 110, 253, 0.9);
    background: rgba(13, 110, 253, 0.3);
    color: #99f6e4;
}

.ent-softphone-ctrl-btn--positive:focus-visible {
    border-color: rgba(13, 110, 253, 0.85);
}

.ent-softphone-ctrl-btn--positive:active {
    border-color: rgba(13, 110, 253, 0.95);
    background: rgba(13, 110, 253, 0.36);
    color: #ccfbf1;
}

/* Disconnect / Remove — destructive red chip (delete/remove/discard only) */
.ent-softphone-ctrl-btn--danger {
    border-color: rgba(239, 68, 68, 0.7);
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.2);
}

.ent-softphone-ctrl-btn--danger:hover {
    border-color: rgba(239, 68, 68, 0.9);
    background: rgba(239, 68, 68, 0.28);
    color: #fca5a5;
}

.ent-softphone-ctrl-btn--danger:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-color: rgba(239, 68, 68, 0.85);
}

.ent-softphone-ctrl-btn--danger:active {
    border-color: rgba(248, 113, 113, 0.95);
    background: rgba(239, 68, 68, 0.34);
    color: #fecaca;
}

[data-theme-mode="light"] .ent-softphone-ctrl-btn {
    border-color: rgba(15, 23, 42, 0.14);
    background: #ffffff;
    color: var(--ent-ink);
}

[data-theme-mode="light"] .ent-softphone-ctrl-btn:hover,
[data-theme-mode="light"] .ent-softphone-ctrl-btn:active {
    border-color: rgba(10, 88, 202, 0.45);
    background: rgba(13, 110, 253, 0.08);
    color: var(--ent-ink);
}

[data-theme-mode="light"] .ent-softphone-ctrl-btn--mute[aria-pressed="true"],
[data-theme-mode="light"] .ent-softphone-ctrl-btn--mute[aria-pressed="true"]:hover {
    border-color: rgba(180, 83, 9, 0.55);
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
    box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.12);
}

[data-theme-mode="light"] .ent-softphone-ctrl-btn--hold[aria-pressed="true"],
[data-theme-mode="light"] .ent-softphone-ctrl-btn--hold[aria-pressed="true"]:hover {
    border-color: rgba(10, 88, 202, 0.55);
    background: rgba(13, 110, 253, 0.14);
    color: #0a58ca;
    box-shadow: inset 0 0 0 1px rgba(10, 88, 202, 0.12);
}

[data-theme-mode="light"] .ent-softphone-ctrl-btn--dnd[aria-pressed="true"],
[data-theme-mode="light"] .ent-softphone-ctrl-btn--dnd[aria-pressed="true"]:hover {
    border-color: rgba(180, 83, 9, 0.58);
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
    box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.12);
}

[data-theme-mode="light"] .ent-softphone-ctrl-btn--positive,
[data-theme-mode="light"] .ent-softphone-ctrl-btn--positive:hover,
[data-theme-mode="light"] .ent-softphone-ctrl-btn--positive:active {
    border-color: rgba(10, 88, 202, 0.55);
    background: rgba(13, 110, 253, 0.14);
    color: #0a58ca;
    box-shadow: inset 0 0 0 1px rgba(10, 88, 202, 0.12);
}

[data-theme-mode="light"] .ent-softphone-ctrl-btn--positive:hover,
[data-theme-mode="light"] .ent-softphone-ctrl-btn--positive:active {
    background: rgba(13, 110, 253, 0.2);
    border-color: rgba(10, 88, 202, 0.7);
    color: #115e59;
}

[data-theme-mode="light"] .ent-softphone-ctrl-btn--danger,
[data-theme-mode="light"] .ent-softphone-ctrl-btn--danger:hover,
[data-theme-mode="light"] .ent-softphone-ctrl-btn--danger:active {
    border-color: rgba(185, 28, 28, 0.55);
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.12);
}

[data-theme-mode="light"] .ent-softphone-ctrl-btn--danger:hover,
[data-theme-mode="light"] .ent-softphone-ctrl-btn--danger:active {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(185, 28, 28, 0.7);
    color: #991b1b;
}

/* Context tabs */
.ent-softphone-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--ent-border);
}

.ent-softphone-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ent-muted);
    font-weight: 600;
    cursor: pointer;
}

.ent-softphone-tab.is-active {
    color: var(--ent-ink);
    border-bottom-color: var(--ent-accent);
}

/* Messages tab when trunk.sms_caller_id is unset — still clickable for empty-state copy. */
.ent-softphone-tab.is-inactive {
    opacity: 0.55;
}

.ent-softphone-tab.is-inactive.is-active {
    opacity: 0.85;
    border-bottom-color: rgba(13, 110, 253, 0.45);
}

.ent-softphone-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--ent-accent);
    color: #04211d;
    font-size: 0.7rem;
    font-weight: 700;
}

.ent-softphone-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

/* Recents */
.ent-softphone-recents {
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.ent-softphone-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-sizing: border-box;
    max-width: 100%;
}

.ent-softphone-recent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--ent-border);
    border-radius: 8px;
    background: var(--ent-surface-raised);
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.ent-softphone-recent__dir {
    color: var(--ent-accent);
    flex: 0 0 auto;
    font-size: 1.1rem;
}

.ent-softphone-recent--missed .ent-softphone-recent__dir {
    color: #ef4444;
}

.ent-softphone-recent__peer {
    font-weight: 600;
    color: var(--ent-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    flex: 1 1 0%;
    min-width: 0;
}

.ent-softphone-recent__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--ent-muted);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    max-width: 100%;
}

.ent-softphone-recent__outcome {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.ent-softphone-recent__when {
    flex: 0 0 auto;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ent-softphone-recent__dial {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--ent-muted);
    flex: 0 0 auto;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    font-size: 1.1rem;
    margin-left: 0.25rem;
}

.ent-softphone-recent__dial:hover {
    background: var(--ent-border);
    color: var(--ent-accent);
}

/* Desktop rows are compact so a full 10-row page plus pager stays above the
   fold beside the much shorter BLF and keypad columns. On short windows the
   list scrolls inside the panel instead of stretching the page — the cap is
   measured in hst-softphone-history.js. Mobile keeps the roomier rows. */
@media (min-width: 768px) {
    .ent-softphone-recent-list {
        gap: 0.25rem;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    .ent-softphone-recent-list::-webkit-scrollbar {
        width: 6px;
    }

    .ent-softphone-recent-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .ent-softphone-recent-list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

    .ent-softphone-recent {
        padding: 0.25rem 0.5rem;
    }

    .ent-softphone-recent__dial {
        width: 30px;
        height: 30px;
    }
}

[data-theme-mode="light"] .ent-softphone-recent-list {
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

[data-theme-mode="light"] .ent-softphone-recent-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
}

/* Contacts (LDAP phone books) */
.ent-softphone-contacts {
    max-width: 100%;
    box-sizing: border-box;
}

.ent-softphone-contacts__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ent-softphone-contacts__book {
    width: auto;
    min-width: 8.5rem;
    max-width: 14rem;
}

.ent-softphone-contacts__search {
    position: relative;
    margin-bottom: 0.55rem;
}

.ent-softphone-contacts__search i {
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    color: var(--ent-muted);
    font-size: 1rem;
    pointer-events: none;
}

.ent-softphone-contacts__search .form-control {
    padding-left: 2rem;
    min-height: 38px;
}

.ent-softphone-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 100%;
    box-sizing: border-box;
}

.ent-softphone-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--ent-border);
    border-radius: 8px;
    background: var(--ent-surface-raised);
    box-sizing: border-box;
    min-width: 0;
}

.ent-softphone-contact__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 9rem;
}

.ent-softphone-contact__name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ent-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ent-softphone-contact__company {
    font-size: 0.8rem;
    color: var(--ent-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ent-softphone-contact__numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-end;
    min-width: 0;
}

.ent-softphone-contact__number {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--ent-border);
    border-radius: 999px;
    background: transparent;
    color: var(--ent-muted);
    font-size: 0.8rem;
    line-height: 1.1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ent-softphone-contact__number i {
    font-size: 0.95rem;
    color: var(--ent-accent);
}

.ent-softphone-contact__number:hover,
.ent-softphone-contact__number:focus-visible {
    border-color: rgba(13, 110, 253, 0.55);
    background: rgba(13, 110, 253, 0.1);
    color: var(--ent-ink);
    outline: none;
}

.ent-softphone-contact__number-label {
    font-weight: 600;
}

.ent-softphone-contact__number-value {
    color: var(--ent-ink);
}

/* Touch targets stay full size until the roomier mobile layout kicks in. */
@media (max-width: 575.98px) {
    .ent-softphone-contact {
        align-items: stretch;
        flex-direction: column;
    }

    .ent-softphone-contact__numbers {
        justify-content: flex-start;
    }

    .ent-softphone-contact__number {
        min-height: 44px;
        padding: 0.35rem 0.75rem;
    }

    .ent-softphone-contacts__book {
        max-width: 100%;
        flex: 1 1 100%;
    }
}

@media (min-width: 768px) {
    .ent-softphone-contact-list {
        gap: 0.25rem;
    }

    .ent-softphone-contact {
        padding: 0.3rem 0.55rem;
    }
}

/* Empty / blocked states */
.ent-softphone-empty,
.ent-softphone-blocked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
    border: 1px dashed rgba(100, 116, 139, 0.4);
    border-radius: 10px;
    text-align: center;
    color: var(--ent-muted);
}

.ent-softphone-empty i,
.ent-softphone-blocked i {
    font-size: 1.6rem;
    color: var(--ent-accent);
}

.ent-softphone-empty__title {
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-softphone-webrtc-promo {
    padding: 0.25rem 0 0.5rem;
}

.ent-softphone-webrtc-promo .ent-calls-live-promo-empty-hero {
    box-shadow: none;
}

.ent-softphone-webrtc-promo .ent-calls-live-promo-empty-subtitle {
    max-width: 36rem;
}

/* Messages: threads + conversation */
.ent-softphone-messages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 992px) {
    .ent-softphone-messages.is-conversing {
        grid-template-columns: minmax(200px, 280px) 1fr;
        align-items: start;
    }
    .ent-softphone-messages.is-conversing .ent-softphone-back-btn {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .ent-softphone-messages.is-conversing .ent-softphone-threads.is-secondary {
        display: none;
    }
}

.ent-softphone-thread-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ent-softphone-thread {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "peer meta" "preview meta";
    gap: 0.05rem 0.5rem;
    width: 100%;
    min-height: 52px;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--ent-border);
    border-radius: 8px;
    background: var(--ent-surface-raised);
    color: var(--ent-ink);
    text-align: left;
    cursor: pointer;
}

.ent-softphone-thread.is-active {
    border-color: rgba(13, 110, 253, 0.55);
    background: rgba(13, 110, 253, 0.08);
}

.ent-softphone-thread__peer {
    grid-area: peer;
    font-weight: 600;
}

.ent-softphone-thread__preview {
    grid-area: preview;
    font-size: 0.78rem;
    color: var(--ent-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ent-softphone-thread__meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--ent-muted);
}

.ent-softphone-conversation__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.ent-softphone-conversation__peer {
    font-weight: 700;
    font-size: 1rem;
}

.ent-softphone-conversation__head .btn {
    min-width: 44px;
    min-height: 44px;
}

.ent-softphone-conversation__scroll {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 340px;
    overflow-y: auto;
    padding: 0.25rem 0.1rem;
    margin-bottom: 0.6rem;
}

.ent-softphone-bubble {
    position: relative;
    max-width: 85%;
    align-self: flex-start;
    padding: 0.5rem 0.7rem;
    border-radius: 12px 12px 12px 4px;
    border: 1px solid var(--ent-border);
    background: var(--ent-surface-raised);
}

.ent-softphone-bubble--out {
    align-self: flex-end;
    border-radius: 12px 12px 4px 12px;
    border-color: rgba(13, 110, 253, 0.4);
    background: rgba(13, 110, 253, 0.1);
}

.ent-softphone-bubble--failed {
    border-color: rgba(239, 68, 68, 0.5);
}

.ent-softphone-bubble__body {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ent-ink);
    font-size: 0.9rem;
}

.ent-softphone-bubble__meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--ent-muted);
}

.ent-softphone-bubble__delete {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    display: none;
    min-width: 30px;
    min-height: 30px;
    padding: 0.1rem 0.3rem;
}

.ent-softphone-bubble:hover .ent-softphone-bubble__delete,
.ent-softphone-bubble:focus-within .ent-softphone-bubble__delete {
    display: inline-flex;
}

/* Touch devices cannot hover — keep delete reachable. */
@media (hover: none) {
    .ent-softphone-bubble__delete {
        display: inline-flex;
    }
}

.ent-softphone-compose__row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.ent-softphone-compose__row textarea {
    flex: 1 1 auto;
    resize: vertical;
}

.ent-softphone-compose__row .btn {
    min-height: 44px;
}

.ent-softphone-compose__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.ent-softphone-delete-confirm {
    margin-top: 0.6rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    color: var(--ent-ink);
}

.ent-softphone-delete-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Softphone BLFs */
.ent-softphone-blf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ent-softphone-blf {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--ent-border);
    border-radius: 8px;
    background: var(--ent-surface-raised);
}

.ent-softphone-blf-lamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
}

.ent-softphone-blf-lamp__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ent-softphone-blf-lamp[data-hsp-blf-state="idle"] .ent-softphone-blf-lamp__dot {
    background: rgba(148, 163, 184, 0.55);
}

.ent-softphone-blf-lamp[data-hsp-blf-state="unknown"] .ent-softphone-blf-lamp__dot {
    background: rgba(148, 163, 184, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ent-softphone-blf-lamp[data-hsp-blf-state="ringing"] .ent-softphone-blf-lamp__dot {
    background: #eab308;
    animation: hst-softphone-pulse 1.1s ease-in-out infinite;
}

.ent-softphone-blf-lamp[data-hsp-blf-state="busy"] .ent-softphone-blf-lamp__dot {
    background: #ef4444;
}

.ent-softphone-blf-lamp[data-hsp-blf-state="available"] .ent-softphone-blf-lamp__dot {
    background: #22c55e;
}

.ent-softphone-blf__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0.15rem 0.25rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.ent-softphone-blf__main:hover .ent-softphone-blf__title,
.ent-softphone-blf__main:focus-visible .ent-softphone-blf__title {
    color: var(--ent-accent);
}

.ent-softphone-blf__title {
    font-weight: 650;
    color: var(--ent-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.ent-softphone-blf__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    font-size: 0.78rem;
    color: var(--ent-muted);
}

.ent-softphone-blf__kind {
    font-weight: 600;
    color: var(--ent-accent);
}

.ent-softphone-blf__remove {
    flex: 0 0 auto;
}

.ent-softphone-blf-picker {
    margin-bottom: 0.75rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--ent-border);
    border-radius: 10px;
    background: var(--ent-surface);
}

.ent-softphone-blf-picker__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.ent-softphone-blf-picker__row .form-select {
    flex: 1 1 180px;
    min-height: 44px;
}

.ent-softphone-blf-picker__row .btn {
    min-height: 44px;
}

[data-theme-mode="light"] .ent-softphone-blf {
    background: #f3f4f6;
}

[data-theme-mode="light"] .ent-softphone-blf-picker {
    background: #f8fafc;
}

/* 320px: keep the dialer comfortable */
@media (max-width: 360px) {
    .ent-softphone-key {
        min-height: 48px;
    }
    .ent-softphone-statusbar__actions {
        margin-left: 0;
        width: 100%;
    }
    .ent-softphone-incoming__actions {
        margin-left: 0;
        width: 100%;
    }
    .ent-softphone-incoming__actions .btn {
        flex: 1 1 auto;
    }
    .ent-softphone-blf {
        flex-wrap: wrap;
    }
    .ent-softphone-blf__remove {
        width: 100%;
    }
}

/* Authorised Contacts (Account Management) */
.ac-skeleton-row td {
    padding: 0.85rem 0.75rem;
    border-color: rgba(255, 255, 255, 0.09);
}

.ac-skeleton-bar {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.22), rgba(100, 116, 139, 0.38), rgba(100, 116, 139, 0.22));
    background-size: 200% 100%;
    animation: ac-skeleton-shine 1.2s ease-in-out infinite;
}

.ac-skeleton-bar--med {
    width: 72%;
}

.ac-skeleton-bar--short {
    width: 48%;
}

@keyframes ac-skeleton-shine {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.ac-empty-state-inner {
    background: #161616;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
}

[data-theme-mode="light"] .ac-empty-state-inner {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
}

.ac-empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #dc3545;
    color: #ffffff;
    font-size: 1.35rem;
}

.ac-empty-state-title {
    color: #f6f7fb;
    font-weight: 600;
}

[data-theme-mode="light"] .ac-empty-state-title {
    color: #111827;
}

.ac-empty-state-message {
    color: #b3b3b3;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

#ac-contact-modal .custom-kb-tooltip-wrapper,
#ac-remove-modal .custom-kb-tooltip-wrapper {
    z-index: auto;
}

#ac-contact-modal .custom-kb-tooltip-content {
    z-index: 1060 !important;
    width: min(320px, calc(100vw - 2rem));
}

/* ==========================================================================
   Snom Provisioning (Hybrid SIP Trunks) — Hybrid teal accent #0d6efd
   Prefix: snom-provisioning-* / snp-*
   Sibling feature to Grandstream Provisioning (gsp-*); shapes match, tokens differ.
   ========================================================================== */

.snom-provisioning-page {
    --snp-accent: #0d6efd;
    --snp-accent-deep: #0a58ca;
    --snp-surface: #161616;
    --snp-surface-raised: #1c1c1c;
    --snp-surface-nested: #222222;
    --snp-ink: #f6f7fb;
    --snp-muted: #b3b3b3;
    --snp-border: rgba(255, 255, 255, 0.12);
}

.snom-provisioning-tabs .nav-link {
    color: var(--snp-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.65rem 0.9rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.snom-provisioning-tabs .nav-link:hover,
.snom-provisioning-tabs .nav-link:focus {
    color: var(--snp-ink);
    border-color: transparent;
}

.snom-provisioning-tabs .nav-link.active {
    color: var(--snp-accent);
    background: transparent;
    border-bottom-color: var(--snp-accent);
}

/* Data-heavy panes double-render on swap when Bootstrap fades them. */
.snom-provisioning-tab-content .tab-pane.fade {
    transition: none;
}

.snom-provisioning-page .snp-tab-panel.ent-panel {
    background: var(--snp-surface);
    border: 1px solid var(--snp-border);
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
}

.snp-gate-card {
    background: var(--snp-surface);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 1.25rem 1.35rem;
}

.snp-gate-card--pending {
    border-color: rgba(13, 110, 253, 0.35);
}

.snp-opt-in-bullets {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--snp-muted);
}

.snp-opt-in-bullets li + li {
    margin-top: 0.35rem;
}

.snp-disclaimer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--snp-border);
    max-width: 48rem;
    line-height: 1.5;
    color: var(--snp-muted);
}

.snp-disclaimer__label {
    color: var(--snp-ink);
    font-weight: 600;
}

.snp-pending-spinner {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid rgba(13, 110, 253, 0.25);
    border-top-color: var(--snp-accent, #0d6efd);
    animation: snp-spin 0.8s linear infinite;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

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

.snp-empty-state {
    text-align: center;
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 2rem 1.25rem;
}

.snp-empty-state__icon {
    font-size: 1.75rem;
    color: var(--snp-accent);
    margin-bottom: 0.65rem;
}

.snp-empty-state__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--snp-ink);
    margin-bottom: 0.4rem;
}

.snp-empty-state__copy {
    color: var(--snp-muted);
    max-width: 36rem;
    margin: 0 auto 1rem;
}

.snp-panel-loading {
    min-height: 6rem;
    padding: 1rem 1.1rem;
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
}

.snp-inline-loading {
    min-height: 6rem;
}

.snp-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.snp-skeleton-row {
    height: 2.5rem;
    border-radius: 6px;
    /* Track must stay visible on dark cards — low-opacity slate disappears. */
    background: rgba(148, 163, 184, 0.42);
    animation: snp-skeleton-pulse 1.4s ease-in-out infinite;
}

.snp-skeleton-row--medium {
    width: 72%;
}

.snp-skeleton-row--short {
    width: 48%;
}

@keyframes snp-skeleton-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .snp-pending-spinner {
        animation: none;
        border-top-color: var(--snp-accent, #0d6efd);
    }

    .snp-skeleton-row {
        animation: none;
        opacity: 0.85;
    }
}

.snp-table-card {
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
}

.snom-provisioning-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--snp-ink);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
    border-color: var(--snp-border);
    margin-bottom: 0;
}

.snom-provisioning-table thead th {
    color: var(--snp-muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom-color: var(--snp-border);
    background: var(--snp-surface-nested);
}

.snom-provisioning-table code {
    color: var(--snp-ink);
    font-size: 0.8125rem;
}

.snp-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--snp-ink);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.3;
}

.snp-status-badge--ok {
    color: #86efac;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
}

.snp-status-badge--pending {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.3);
}

.snp-status-badge--down {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
}

.snp-howto-steps {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.snp-howto-step {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.snp-howto-step__num {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.16);
    color: var(--snp-accent, #0d6efd);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.snp-howto-tips {
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 1rem 1.15rem;
}

.snp-howto-tips code {
    color: var(--snp-ink);
    font-size: 0.8rem;
}

.snp-setup-slot {
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}

.snp-setup-slot__label {
    display: block;
    color: var(--snp-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.snp-timezone-bar {
    background: var(--snp-surface-raised);
    border: 1px solid var(--snp-border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
}

.snp-form-control,
.snom-provisioning-page .form-select,
.snom-provisioning-page .form-control {
    background: var(--snp-surface-nested);
    border-color: var(--snp-border);
    color: var(--snp-ink);
}

.snp-form-control:focus,
.snom-provisioning-page .form-select:focus,
.snom-provisioning-page .form-control:focus {
    background: var(--snp-surface-nested);
    border-color: var(--snp-accent);
    color: var(--snp-ink);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.22);
}

.snp-field-error {
    color: #fca5a5;
    font-size: 0.8125rem;
}

.snp-keys-device-picker {
    min-width: min(20rem, 100%);
}

/* Phone details modal */
.snp-device-detail-body {
    color: var(--snp-ink, #f6f7fb);
}

.snp-detail-grid {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 0.45rem 0.85rem;
    margin: 0;
}

.snp-detail-grid dt {
    color: var(--snp-muted, #b3b3b3);
    font-weight: 500;
}

.snp-detail-grid dd {
    margin: 0;
    color: var(--snp-ink, #f6f7fb);
    word-break: break-word;
}

.snp-detail-lines {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.snp-detail-lines li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: var(--snp-surface-nested, #222222);
    border: 1px solid var(--snp-border, rgba(255, 255, 255, 0.12));
}

.snp-detail-lines__slot {
    min-width: 3.5rem;
    color: var(--snp-muted, #b3b3b3);
    font-size: 0.8125rem;
    font-weight: 600;
}

.snp-detail-lines__name {
    font-weight: 500;
}

.snp-detail-lines__user {
    margin-left: auto;
    color: var(--snp-muted, #b3b3b3);
    font-size: 0.8125rem;
}

/* Modals */
.snp-modern-modal {
    --snp-accent: #0d6efd;
    --snp-accent-deep: #0a58ca;
    --snp-surface: #161616;
    --snp-surface-raised: #1c1c1c;
    --snp-surface-nested: #222222;
    --snp-ink: #f6f7fb;
    --snp-muted: #b3b3b3;
    --snp-border: rgba(255, 255, 255, 0.12);
    background: var(--snp-surface);
    border: 1px solid var(--snp-border);
    color: var(--snp-ink);
}

.snp-modern-modal .modal-header {
    background: linear-gradient(135deg, rgba(10, 88, 202, 0.34), rgba(13, 110, 253, 0.18));
    border-bottom: 1px solid var(--snp-border);
}

.snp-modern-modal .modal-title {
    color: var(--snp-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.snp-modern-modal .modal-title i {
    color: var(--snp-accent);
}

.snp-modern-modal.snp-modern-modal--danger .modal-header {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.28), rgba(127, 29, 29, 0.18));
}

.snp-modern-modal .modal-body,
.snp-modern-modal .modal-footer {
    background: var(--snp-surface);
}

.snp-modern-modal .modal-footer {
    border-top: 1px solid var(--snp-border);
    gap: 0.5rem;
}

.snp-modern-modal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.7;
}

.snp-modern-modal .form-label {
    color: var(--snp-ink);
    font-size: 0.875rem;
}

.snp-modern-modal .form-control,
.snp-modern-modal .form-select {
    background: var(--snp-surface-nested);
    border-color: var(--snp-border);
    color: var(--snp-ink);
}

.snp-modern-modal .form-control:focus,
.snp-modern-modal .form-select:focus {
    border-color: var(--snp-accent);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.22);
}

/* Device settings modal — compact tabbed layout */
.snp-device-settings-body {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.snp-device-settings-tabs {
    border-bottom: 1px solid var(--snp-border, rgba(255, 255, 255, 0.12));
    gap: 0.15rem;
    margin-bottom: 0.85rem;
}

.snp-device-settings-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--snp-muted, #b3b3b3);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    background: transparent;
}

.snp-device-settings-tabs .nav-link i {
    font-size: 1rem;
    line-height: 1;
}

.snp-device-settings-tabs .nav-link:hover,
.snp-device-settings-tabs .nav-link:focus-visible {
    color: var(--snp-ink, #f6f7fb);
    border-bottom-color: rgba(13, 110, 253, 0.45);
    background: transparent;
}

.snp-device-settings-tabs .nav-link.active {
    color: var(--snp-accent, #0d6efd);
    border-bottom-color: var(--snp-accent, #0d6efd);
    background: transparent;
    font-weight: 600;
}

.snp-device-settings-tab-content {
    min-height: 11.5rem;
}

.snp-device-settings-tab-content .choices {
    width: 100%;
}

.snp-device-settings-section + .snp-device-settings-section {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--snp-border, rgba(255, 255, 255, 0.09));
}

.snp-device-settings-section__title {
    color: var(--snp-ink, #f6f7fb);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 0.45rem;
    text-transform: uppercase;
}

/* Codec priority editor */
.snp-codec-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.snp-codec-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background: var(--snp-surface-nested, #222222);
    border: 1px solid var(--snp-border, rgba(255, 255, 255, 0.12));
}

.snp-codec-row__rank {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--snp-accent, #0d6efd);
    background: rgba(13, 110, 253, 0.16);
    flex-shrink: 0;
}

.snp-codec-row__main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.snp-codec-row__main .form-check-label {
    color: var(--snp-ink, #f6f7fb);
    font-size: 0.875rem;
    margin: 0;
}

.snp-codec-row__moves {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    margin-left: auto;
}

.snp-codec-row__moves .btn {
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.snp-codec-locked {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--snp-muted, #b3b3b3);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Snom D-series phone lookalike (Phone keys tab)
   .snp-phone--family-* controls key layout, .snp-phone--d7xx the screen ratio,
   .snp-phone--labels-* whether keys carry paper or on-screen labels.
   All internal sizes are em-based so one font-size scales the whole handset.
   -------------------------------------------------------------------------- */
.snp-phone {
    --snp-phone-shell: #1b1c1e;
    --snp-phone-shell-edge: #3c3f43;
    --snp-phone-ink: #f6f7fb;
    --snp-phone-muted: #c9ced3;
    --snp-phone-key: #6d7276;
    --snp-phone-key-low: #4b5054;
    --snp-phone-select: #0d6efd;
    --snp-phone-led: #33d16a;
    --snp-phone-led-off: rgba(140, 152, 158, 0.35);
    font-size: clamp(9px, 2.1vw, 12px);
    max-width: 100%;
}

.snp-phone__chassis {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #26282b, var(--snp-phone-shell) 45%, #131416);
    border: 1px solid var(--snp-phone-shell-edge);
    border-radius: 1.6em;
    padding: 1.2em 1.3em 1.5em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1.4em 2.6em rgba(0, 0, 0, 0.5);
}

.snp-phone__chassis::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(107deg, rgba(255, 255, 255, 0.07) 0 38%, rgba(255, 255, 255, 0) 38.6%);
}

.snp-phone__brandbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    padding-bottom: 0.9em;
}

.snp-phone__brand {
    font-size: 1.9em;
    line-height: 1;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: #cfd3d7;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}

.snp-phone__model-badge {
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--snp-phone-muted);
}

.snp-phone__mwi {
    width: 3.4em;
    height: 0.9em;
    border-radius: 999px;
    background: linear-gradient(180deg, #7bf3a6, var(--snp-phone-led) 60%, #1ba757);
    box-shadow: 0 0 0.9em rgba(51, 209, 106, 0.6);
    flex-shrink: 0;
}

.snp-phone__face {
    display: flex;
    align-items: stretch;
    gap: 1em;
}

.snp-phone__screen-col {
    flex: 1 1 auto;
    min-width: 0;
}

.snp-phone__side {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    justify-content: center;
    min-width: 7.5em;
    flex: 0 0 auto;
}

.snp-phone__side--left {
    align-items: stretch;
}

.snp-phone__side--right {
    align-items: stretch;
}

.snp-phone__key {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.3em 0.6em;
    border-radius: 0.45em;
    border: 1px solid rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #7c8185, var(--snp-phone-key) 55%, var(--snp-phone-key-low));
    color: var(--snp-phone-ink);
    cursor: pointer;
    text-align: left;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0.15em 0.3em rgba(0, 0, 0, 0.45);
}

.snp-phone__key:hover,
.snp-phone__key:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.9);
    outline-offset: 2px;
}

.snp-phone__key--active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 0.22em rgba(13, 110, 253, 0.8);
}

.snp-phone__key-led {
    width: 0.55em;
    height: 0.55em;
    border-radius: 999px;
    background: var(--snp-phone-led-off);
    flex-shrink: 0;
}

.snp-phone__key--set .snp-phone__key-led {
    background: linear-gradient(180deg, #7bf3a6, var(--snp-phone-led) 60%, #1ba757);
    box-shadow: 0 0 0.6em rgba(51, 209, 106, 0.7);
}

.snp-phone__key-label {
    font-size: 1.15em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Paper-label models print the label on a card next to the key. */
.snp-phone--labels-paper .snp-phone__key {
    background: linear-gradient(180deg, #f4f4f2, #dcdcd8);
    color: #22262b;
    border-color: rgba(0, 0, 0, 0.4);
}

.snp-phone--labels-paper .snp-phone__key-label {
    color: #22262b;
}

.snp-phone__bezel {
    position: relative;
    border-radius: 0.35em;
    padding: 0.25em;
    background: #0b0c0d;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0.15em 0.5em rgba(0, 0, 0, 0.6);
}

.snp-phone__screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 320 / 240;
    border-radius: 0.25em;
    color: var(--snp-phone-ink);
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 90% at 15% 100%, rgba(150, 130, 210, 0.12), transparent 55%),
        linear-gradient(155deg, #2b3034, #1c2023 60%, #23282c);
}

.snp-phone__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6em;
    flex-shrink: 0;
    padding: 0.35em 0.7em;
    background: rgba(20, 23, 26, 0.85);
    font-size: 1.15em;
}

.snp-phone__status-left,
.snp-phone__status-right {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snp-phone__status-left i {
    color: var(--snp-phone-led);
    flex-shrink: 0;
}

.snp-phone__status-right {
    flex-shrink: 0;
    color: var(--snp-phone-muted);
    font-variant-numeric: tabular-nums;
}

.snp-phone__screen-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    padding: 0.6em 0.7em;
    overflow: hidden;
}

.snp-phone__screen-line {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.15em;
    min-width: 0;
}

.snp-phone__screen-line-slot {
    color: var(--snp-phone-muted);
    font-weight: 700;
    flex-shrink: 0;
}

.snp-phone__screen-line-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snp-phone__screen-empty {
    color: var(--snp-phone-muted);
    font-size: 1.1em;
}

.snp-phone__softkeys {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5em;
    margin-top: 0.9em;
}

.snp-phone__softkey {
    min-height: 44px;
    padding: 0.25em 0.35em;
    border-radius: 0.4em;
    border: 1px solid rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, #7c8185, var(--snp-phone-key) 55%, var(--snp-phone-key-low));
    color: var(--snp-phone-ink);
    font-size: 1.05em;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0.15em 0.35em rgba(0, 0, 0, 0.5);
}

.snp-phone__softkey:hover,
.snp-phone__softkey:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.9);
    outline-offset: 2px;
}

.snp-phone__softkey--active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 0.2em rgba(13, 110, 253, 0.8);
}

/* D785 SmartDisplay strip sits between the screen and the right-hand keys. */
.snp-phone__smartdisplay {
    flex: 0 0 auto;
    min-width: 7em;
    border-radius: 0.35em;
    padding: 0.45em;
    background: #0b0c0d;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0.15em 0.5em rgba(0, 0, 0, 0.55);
}

.snp-phone__smartdisplay-label {
    display: block;
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--snp-phone-muted);
    text-align: center;
    margin-bottom: 0.35em;
}

.snp-phone__smartdisplay-rows {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.snp-phone__smartdisplay-row {
    padding: 0.2em 0.35em;
    border-radius: 0.2em;
    background: rgba(56, 62, 67, 0.92);
    color: var(--snp-phone-ink);
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snp-phone__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.85rem;
}

.snp-phone__page {
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1f1f1f;
    color: #f6f7fb;
    font-weight: 600;
    font-size: 0.8rem;
}

.snp-phone__page--active {
    border-color: rgba(13, 110, 253, 0.8);
    background: rgba(13, 110, 253, 0.28);
    color: #ccfbf1;
}

.snp-phone-edit-panel {
    background: var(--snp-surface-raised, #1c1c1c);
    border: 1px solid var(--snp-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    padding: 1rem 1.05rem;
}

.snp-phone-key-help-link {
    color: var(--snp-accent, #0d6efd);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    font-weight: 600;
}

.snp-phone-key-help-link:hover,
.snp-phone-key-help-link:focus-visible {
    color: #2dd4bf;
}

/* Face families ---------------------------------------------------------- */
.snp-phone--family-entry-bw-right-fkeys .snp-phone__side--right,
.snp-phone--family-smartlabel-right .snp-phone__side--right {
    min-width: 8em;
}

.snp-phone--family-smartlabel-right-paged .snp-phone__side--right {
    gap: 0.35em;
}

.snp-phone--family-bilateral-paper .snp-phone__side,
.snp-phone--family-hd-bilateral-smartlabel .snp-phone__side {
    min-width: 6.5em;
    gap: 0.35em;
}

.snp-phone--family-main-plus-smart-display .snp-phone__side--right {
    min-width: 6.5em;
}

/* Per-model screens ------------------------------------------------------ */
.snp-phone--d712 .snp-phone__screen,
.snp-phone--d715 .snp-phone__screen {
    aspect-ratio: 128 / 48;
    color: #d8e6f5;
    background:
        radial-gradient(120% 90% at 20% 100%, rgba(120, 150, 200, 0.14), transparent 55%),
        linear-gradient(180deg, #1d2531, #131920 70%, #171d25);
}

.snp-phone--d712 .snp-phone__status,
.snp-phone--d715 .snp-phone__status {
    background: rgba(12, 17, 24, 0.9);
}

.snp-phone--d713 .snp-phone__screen,
.snp-phone--d717 .snp-phone__screen,
.snp-phone--d735 .snp-phone__screen {
    aspect-ratio: 320 / 240;
}

.snp-phone--d765 .snp-phone__screen,
.snp-phone--d785 .snp-phone__screen,
.snp-phone--d815 .snp-phone__screen {
    aspect-ratio: 480 / 272;
}

/* D815 is a 5" panel with 5 SmartLabels per side — a touch wider than the
   D862/D865 columns so ten labels stay legible. */
.snp-phone--d815 .snp-phone__side {
    min-width: 7em;
}

.snp-phone--d862 .snp-phone__screen,
.snp-phone--d865 .snp-phone__screen {
    aspect-ratio: 16 / 9;
}

@media (max-width: 991.98px) {
    .snp-phone__face {
        flex-direction: column;
    }

    .snp-phone__side {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
    }

    .snp-phone__side .snp-phone__key {
        flex: 1 1 8em;
    }

    .snp-phone__smartdisplay {
        min-width: 0;
    }

    .snp-phone__smartdisplay-rows {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .snp-phone__smartdisplay-row {
        flex: 1 1 6em;
    }
}

@media (max-width: 575.98px) {
    .snp-detail-grid {
        grid-template-columns: 1fr;
        gap: 0.15rem 0;
    }

    .snp-detail-grid dd {
        margin-bottom: 0.45rem;
    }
}

/* Light theme ------------------------------------------------------------ */
[data-theme-mode="light"] .snom-provisioning-page {
    --snp-surface: #ffffff;
    --snp-surface-raised: #f4f5f7;
    --snp-surface-nested: #eef0f4;
    --snp-ink: #172033;
    --snp-muted: #5b6475;
    --snp-border: rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .snp-modern-modal {
    --snp-surface: #ffffff;
    --snp-surface-raised: #f4f5f7;
    --snp-surface-nested: #eef0f4;
    --snp-ink: #172033;
    --snp-muted: #5b6475;
    --snp-border: rgba(15, 23, 42, 0.12);
    background: var(--snp-surface);
    color: var(--snp-ink);
}

[data-theme-mode="light"] .snp-modern-modal .btn-close {
    filter: none;
}

[data-theme-mode="light"] .snp-skeleton-row {
    background: rgba(100, 116, 139, 0.22);
}

[data-theme-mode="light"] .snom-provisioning-table {
    --bs-table-hover-bg: rgba(15, 23, 42, 0.04);
}

[data-theme-mode="light"] .snp-status-badge {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .snp-status-badge--ok {
    color: #15803d;
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.28);
}

[data-theme-mode="light"] .snp-status-badge--pending {
    color: #92400e;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme-mode="light"] .snp-status-badge--down {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.28);
}

[data-theme-mode="light"] .snp-field-error {
    color: #b91c1c;
}

[data-theme-mode="light"] .snp-device-settings-tabs .nav-link.active {
    color: var(--snp-accent-deep, #0a58ca);
    border-bottom-color: var(--snp-accent-deep, #0a58ca);
}

[data-theme-mode="light"] .snp-form-control,
[data-theme-mode="light"] .snom-provisioning-page .form-select,
[data-theme-mode="light"] .snom-provisioning-page .form-control,
[data-theme-mode="light"] .snp-modern-modal .form-control,
[data-theme-mode="light"] .snp-modern-modal .form-select {
    background: #f8fafc;
    color: #172033;
}

/* Snom desk phones are black hardware — keep the handset dark in both themes. */
[data-theme-mode="light"] .snp-phone__page {
    background: #ffffff;
    color: #172033;
    border-color: rgba(15, 23, 42, 0.18);
}

[data-theme-mode="light"] .snp-phone__page--active {
    color: #0a58ca;
}

/* ------------------------------------------------------------------ */
/* Hybrid SIP Trunks — Call Tone Insights (+ wallboard)              */
/* ------------------------------------------------------------------ */

.ent-tone-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.ent-tone-pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.ent-tone-pulse__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #64748b;
    box-shadow: 0 0 0 0 rgba(100, 116, 139, 0.45);
}

.ent-tone-pulse[data-state="live"] .ent-tone-pulse__dot {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
    animation: hst-tone-pulse 1.8s ease-out infinite;
}

.ent-tone-pulse[data-state="loading"] .ent-tone-pulse__dot {
    background: #0d6efd;
}

.ent-tone-pulse[data-state="error"] .ent-tone-pulse__dot {
    background: #ef4444;
}

.ent-tone-pulse__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ent-ink, #f6f7fb);
}

@keyframes hst-tone-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.ent-tone-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.ent-tone-kpi-card {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    min-height: 7.5rem;
    padding: 1rem 1.05rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--ent-surface-raised, #161616);
}

.ent-tone-kpi-card--positive {
    border-color: rgba(34, 197, 94, 0.35);
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.12), rgba(22, 22, 22, 0.95));
}

.ent-tone-kpi-card--secondary {
    border-color: rgba(255, 255, 255, 0.08);
}

.ent-tone-kpi-card__icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0a58ca;
    color: #ffffff;
    font-size: 1.25rem;
}

.ent-tone-kpi-card--positive .ent-tone-kpi-card__icon {
    background: #16a34a;
}

.ent-tone-kpi-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ent-tone-kpi-card__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #b3b3b3;
}

.ent-tone-kpi-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ent-ink, #f6f7fb);
    letter-spacing: -0.02em;
}

.ent-tone-kpi-card__hint {
    font-size: 0.75rem;
    color: #8a8a8a;
}

.ent-tone-best {
    margin-top: 0;
}

.ent-tone-mix__track {
    display: flex;
    width: 100%;
    height: 1.1rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(100, 116, 139, 0.25);
}

.ent-tone-mix__seg {
    min-width: 0;
}

.ent-tone-mix__seg--positive { background: #22c55e; }
.ent-tone-mix__seg--neutral { background: #94a3b8; }
.ent-tone-mix__seg--negative { background: #ef4444; }

.ent-tone-mix__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    margin-top: 0.75rem;
}

.ent-tone-mix__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: #cfcfcf;
}

.ent-tone-mix__swatch {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
}

.ent-tone-mix__swatch--positive { background: #22c55e; }
.ent-tone-mix__swatch--neutral { background: #94a3b8; }
.ent-tone-mix__swatch--negative { background: #ef4444; }

.ent-tone-panel {
    padding: 1rem 1.1rem;
}

/* Wallboard mode — large tiles, distance-readable */
.ent-tone-wallboard .ent-tone-hero__sub,
.ent-tone-page--wallboard .ent-tone-cost-panel {
    display: none;
}

.ent-tone-wallboard .ent-tone-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.ent-tone-wallboard .ent-tone-kpi-card {
    min-height: 10rem;
    padding: 1.35rem 1.4rem;
}

.ent-tone-wallboard .ent-tone-kpi-card__value {
    font-size: 2.75rem;
}

.ent-tone-wallboard .ent-tone-kpi-card__label {
    font-size: 1rem;
}

.ent-tone-wallboard .ent-hero-title {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}

.ent-tone-wallboard .ent-call-stats-best-staff__name {
    font-size: 1.65rem;
}

.ent-tone-wallboard .ent-table {
    font-size: 1.05rem;
}

.ent-tone-wallboard .ent-tone-filters {
    opacity: 0.92;
}

[data-theme-mode="light"] .ent-tone-kpi-card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme-mode="light"] .ent-tone-kpi-card--positive {
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.1), #ffffff);
}

[data-theme-mode="light"] .ent-tone-kpi-card__value {
    color: #0f172a;
}

[data-theme-mode="light"] .ent-tone-kpi-card__label,
[data-theme-mode="light"] .ent-tone-mix__legend-item {
    color: #475569;
}

[data-theme-mode="light"] .ent-tone-pulse__label {
    color: #0f172a;
}

@media (max-width: 1199.98px) {
    .ent-tone-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .ent-tone-nav {
        justify-content: flex-start;
    }

    .ent-tone-pulse {
        justify-content: flex-start;
    }

    .ent-tone-kpi-grid,
    .ent-tone-wallboard .ent-tone-kpi-grid {
        grid-template-columns: 1fr;
    }

    .ent-tone-wallboard .ent-tone-kpi-card__value {
        font-size: 2.1rem;
    }
}

/* ==========================================================================
   Hybrid SIP Trunks — Pricing page
   ========================================================================== */

.ent-page-container[data-hst-page="pricing"] .ent-pricing-breadcrumb .breadcrumb {
    font-size: 0.78rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero {
    background: var(--ent-surface);
    border: 1px solid var(--ent-border);
    border-radius: 0.85rem;
    padding: 1.25rem 1.5rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem 0.28rem 0.45rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.12);
    border: 1px solid rgba(13, 110, 253, 0.28);
    color: var(--ent-accent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-eyebrow i {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: #ffffff;
    background: var(--ent-accent-deep);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-title {
    color: var(--ent-ink);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-accent {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 700;
    color: var(--ent-accent);
    background: rgba(13, 110, 253, 0.12);
    border: 1px solid rgba(13, 110, 253, 0.28);
    letter-spacing: -0.01em;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-copy {
    color: var(--ent-muted);
    font-size: 0.875rem;
    max-width: 42rem;
    line-height: 1.55;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-copy strong {
    color: var(--ent-ink);
    font-weight: 650;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.85rem;
    padding: 0.32rem 0.7rem 0.32rem 0.45rem;
    border: 1px solid var(--ent-border);
    border-radius: 999px;
    color: var(--ent-ink);
    font-size: 0.72rem;
    font-weight: 650;
    background: rgba(255, 255, 255, 0.03);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-pill:nth-child(1) {
    border-color: rgba(13, 110, 253, 0.35);
    background: rgba(13, 110, 253, 0.1);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-pill:nth-child(2) {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.1);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-pill:nth-child(3) {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.1);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-pill i {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
    color: #ffffff !important;
    background: var(--ent-accent-deep);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-pill:nth-child(2) i {
    background: #d97706;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-pill:nth-child(3) i {
    background: #16a34a;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-card {
    text-align: center;
    padding: 1.5rem 1.25rem;
    border-radius: 0.85rem;
    border: none;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.85rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-card-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.5rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-price {
    color: #ffffff;
    font-size: clamp(2.5rem, 6vw, 3.25rem);
    font-weight: 850;
    letter-spacing: -0.06em;
    line-height: 1;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-currency {
    font-size: 0.55em;
    vertical-align: super;
    font-weight: 700;
    color: #ffffff;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-period {
    font-size: 0.35em;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-hero-card-note {
    margin-top: 0.65rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.4;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card {
    border: 1px solid var(--ent-border);
    border-radius: 0.85rem;
    padding: 1.25rem;
    background: var(--ent-surface);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 110, 253, 0.4);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card--trunk { border-top: 3px solid var(--ent-accent); }
.ent-page-container[data-hst-page="pricing"] .ent-pricing-card--recording { border-top: 3px solid #f59e0b; }
.ent-page-container[data-hst-page="pricing"] .ent-pricing-card--ai { border-top: 3px solid #8b5cf6; }

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.85rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card-icon.is-primary {
    background: var(--ent-accent-deep);
    color: #ffffff;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card-icon.is-amber {
    background: #d97706;
    color: #ffffff;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card-icon.is-violet {
    background: #7c3aed;
    color: #ffffff;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card-icon i {
    color: inherit;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card-title {
    color: var(--ent-ink);
    font-size: 1.05rem;
    font-weight: 750;
    margin-bottom: 0.5rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card-rate {
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    text-align: center;
    border: 1px solid rgba(13, 110, 253, 0.28);
    background: rgba(13, 110, 253, 0.08);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card--recording .ent-pricing-card-rate {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.08);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card--ai .ent-pricing-card-rate {
    border-color: rgba(139, 92, 246, 0.28);
    background: rgba(139, 92, 246, 0.08);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card-amount {
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    color: var(--ent-ink);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card-unit {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ent-muted);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-card-lead {
    font-size: 0.825rem;
    color: var(--ent-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--ent-muted);
    line-height: 1.45;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-feature-list li strong {
    color: var(--ent-ink);
    font-weight: 650;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-feature-list li > i {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 0.68rem;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e !important;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-feature-warn-icon {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-panel {
    background: var(--ent-surface);
    border: 1px solid var(--ent-border);
    border-radius: 0.85rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-panel-body {
    padding: 1.25rem 1.35rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-section-label {
    color: var(--ent-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-section-title {
    color: var(--ent-ink);
    font-size: 1rem;
    font-weight: 700;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-panel-copy {
    color: var(--ent-muted);
    font-size: 0.875rem;
    line-height: 1.55;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-panel-copy strong {
    color: var(--ent-ink);
    font-weight: 650;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-table-wrap,
.ent-page-container[data-hst-page="pricing"] .ent-pricing-example-table-wrap {
    border-radius: 0.65rem;
    border: 1px solid var(--ent-border);
    overflow: hidden;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-table,
.ent-page-container[data-hst-page="pricing"] .ent-pricing-example-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ent-ink);
    margin-bottom: 0;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-table th,
.ent-page-container[data-hst-page="pricing"] .ent-pricing-example-table th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--ent-muted);
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ent-border);
    padding: 0.7rem 0.9rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-table td,
.ent-page-container[data-hst-page="pricing"] .ent-pricing-example-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--ent-border);
    vertical-align: middle;
    color: var(--ent-ink);
    font-size: 0.825rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-table tr:last-child td,
.ent-page-container[data-hst-page="pricing"] .ent-pricing-example-table tr:last-child td {
    border-bottom: 0;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-table .ent-muted,
.ent-page-container[data-hst-page="pricing"] .ent-pricing-example-table .ent-muted {
    color: var(--ent-muted);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-table a {
    color: var(--ent-accent);
    text-decoration: none;
    font-weight: 600;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-table a:hover {
    text-decoration: underline;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
    border: 1px solid var(--ent-border);
    font-size: 0.825rem;
    line-height: 1.5;
    color: var(--ent-muted);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-callout strong {
    color: var(--ent-ink);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-callout a {
    color: var(--ent-accent);
    font-weight: 600;
    text-decoration: none;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-callout a:hover {
    text-decoration: underline;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-callout-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #ffffff;
    background: var(--ent-accent-deep);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-callout--info {
    border-color: rgba(13, 110, 253, 0.28);
    background: rgba(13, 110, 253, 0.08);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-callout--tip {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.08);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-callout--tip .ent-pricing-callout-icon {
    background: #d97706;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-compare-card {
    border: 1px solid var(--ent-border);
    border-radius: 0.75rem;
    padding: 1.1rem 1.15rem;
    background: var(--ent-surface-raised);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-compare-card--standard {
    border-top: 3px solid #64748b;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-compare-card--hybrid {
    border-top: 3px solid var(--ent-accent);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-compare-title {
    color: var(--ent-ink);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-compare-price {
    color: var(--ent-ink);
    font-size: 1.65rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    margin-bottom: 0.55rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-compare-unit {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ent-muted);
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-faq-item {
    padding: 0.85rem 0;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-faq-q {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--ent-ink);
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-faq-q i {
    color: var(--ent-accent);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-faq-a {
    color: var(--ent-muted);
    font-size: 0.825rem;
    line-height: 1.55;
    padding-left: 1.35rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-cta {
    background: var(--ent-surface);
    border: 1px solid var(--ent-border);
    border-radius: 0.85rem;
    padding: 1.25rem 1.35rem;
}

.ent-page-container[data-hst-page="pricing"] .ent-pricing-cta-title {
    color: var(--ent-ink);
    font-size: 1.1rem;
    font-weight: 750;
}

[data-theme-mode="light"] .ent-page-container[data-hst-page="pricing"] .ent-pricing-pill {
    background: rgba(15, 23, 42, 0.03);
}

[data-theme-mode="light"] .ent-page-container[data-hst-page="pricing"] .ent-pricing-table th,
[data-theme-mode="light"] .ent-page-container[data-hst-page="pricing"] .ent-pricing-example-table th {
    background: rgba(15, 23, 42, 0.04);
}

@media (max-width: 575.98px) {
    .ent-page-container[data-hst-page="pricing"] .ent-pricing-hero {
        padding: 1rem 1.1rem;
    }

    .ent-page-container[data-hst-page="pricing"] .ent-pricing-panel-body,
    .ent-page-container[data-hst-page="pricing"] .ent-pricing-cta {
        padding: 1rem 1.05rem;
    }

    .ent-page-container[data-hst-page="pricing"] .ent-pricing-table th,
    .ent-page-container[data-hst-page="pricing"] .ent-pricing-table td {
        padding: 0.6rem 0.7rem;
        font-size: 0.78rem;
    }
}

/* Hybrid SIP Trunks — LDAP Phonebook */
.ent-ldap-pb-page .ent-ldap-pb-empty-state {
    padding: 2rem 1.25rem;
    text-align: center;
}

.ent-ldap-pb-table .ent-ldap-pb-row-actions,
.ent-ldap-pb-contacts-table .d-inline-flex {
    white-space: nowrap;
}

.ent-ldap-pb-copy-row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
}

.ent-ldap-pb-copy-row:last-child {
    border-bottom: 0;
}

.ent-ldap-pb-copy-row__label {
    font-size: 0.875rem;
    color: var(--ent-muted, #b3b3b3);
}

.ent-ldap-pb-copy-row__value {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.ent-ldap-pb-copy-row__value code {
    flex: 1;
    min-width: 0;
    word-break: break-all;
}

.ent-ldap-pb-settings-shared {
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    border-radius: 10px;
    padding: 0.75rem 1rem;
    background: var(--ent-surface-raised, #1a1a1a);
}

.ent-ldap-pb-copy-panel .form-control {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.ent-ldap-pb-disclosure-toggle {
    font-size: 0.875rem;
    text-decoration: none;
}

.ent-ldap-pb-back-link {
    color: var(--ent-accent, #0d6efd);
}

.ent-ldap-pb-import-preview-wrap {
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    border-radius: 8px;
}

.ent-ldap-pb-server-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.55rem;
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.12));
    background: var(--ent-surface-raised, #1a1a1a);
    color: var(--ent-ink, #f6f7fb);
}

.ent-ldap-pb-server-chip--modal {
    width: 100%;
    max-width: 28rem;
}

.ent-ldap-pb-server-chip code {
    color: inherit;
    font-size: 0.875rem;
}

.ent-ldap-pb-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2rem;
}

.ent-ldap-pb-copy-btn__label {
    font-size: 0.75rem;
    line-height: 1;
}

.ent-ldap-pb-quickstart-bar {
    background: var(--ent-surface-raised, #1a1a1a);
    border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.09));
    border-radius: 0.65rem;
}

.ent-ldap-pb-quickstart-trigger {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 0.85rem;
    min-height: 3.25rem;
    padding: 0.85rem 1rem;
    text-align: left;
    width: 100%;
}

.ent-ldap-pb-quickstart-trigger:hover {
    background: rgba(255, 255, 255, 0.025);
}

.ent-ldap-pb-quickstart-trigger:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.55);
    outline-offset: -2px;
}

.ent-ldap-pb-quickstart-trigger-icon {
    align-items: center;
    background: rgba(13, 110, 253, 0.14);
    border-radius: 0.45rem;
    color: #0d6efd;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.15rem;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.ent-ldap-pb-quickstart-trigger-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ent-ldap-pb-quickstart-trigger-title {
    color: var(--ent-ink, #f6f7fb);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
}

.ent-ldap-pb-quickstart-trigger-meta {
    color: var(--ent-muted, #b3b3b3);
    font-size: 0.875rem;
    line-height: 1.25;
}

.ent-ldap-pb-quickstart-trigger-action {
    align-items: center;
    color: var(--ent-muted, #b3b3b3);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.875rem;
    gap: 0.15rem;
}

.ent-ldap-pb-quickstart-chevron {
    font-size: 1.15rem;
    transition: transform 0.15s ease;
}

.ent-ldap-pb-quickstart-trigger:hover .ent-ldap-pb-quickstart-chevron,
.ent-ldap-pb-quickstart-trigger:focus-visible .ent-ldap-pb-quickstart-chevron {
    transform: translateX(2px);
}

.ent-ldap-pb-howto-steps {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ent-ldap-pb-howto-step {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.ent-ldap-pb-howto-step__num {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.35);
}

[data-theme-mode="light"] .ent-ldap-pb-howto-step__num {
    background: rgba(10, 88, 202, 0.12);
    color: #0a58ca;
    border-color: rgba(10, 88, 202, 0.28);
}

[data-theme-mode="light"] .ent-ldap-pb-settings-shared,
[data-theme-mode="light"] .ent-ldap-pb-server-chip,
[data-theme-mode="light"] .ent-ldap-pb-quickstart-bar {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme-mode="light"] .ent-ldap-pb-quickstart-trigger:hover {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme-mode="light"] .ent-ldap-pb-quickstart-trigger-title {
    color: #0f172a;
}

@media (max-width: 767.98px) {
    .ent-ldap-pb-copy-row {
        grid-template-columns: 1fr;
    }

    .ent-ldap-pb-quickstart-action-label {
        display: none;
    }
}


/* ==========================================================================
   CGRT Admin — Move unactivated SIMs
   ========================================================================== */
.cgrt-move-sims-list {
    max-height: 28rem;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: #121212;
}

[data-theme-mode="light"] .cgrt-move-sims-list {
    border-color: rgba(0, 0, 0, 0.12);
    background: #f8f9fa;
}

.cgrt-move-sims-checklist .cgrt-move-sims-item {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.09);
    color: #f6f7fb;
    min-height: 44px;
}

[data-theme-mode="light"] .cgrt-move-sims-checklist .cgrt-move-sims-item {
    border-color: rgba(0, 0, 0, 0.08);
    color: #212529;
}

.cgrt-move-sims-checklist .cgrt-move-sims-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme-mode="light"] .cgrt-move-sims-checklist .cgrt-move-sims-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.cgrt-move-sims-iccid {
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.cgrt-move-sims .custom-kb-tooltip-wrapper {
    z-index: 2;
}

/* DID purchase billing confirmation (shared across Number Manager, SMS, SIP, Gold Numbers) */
.did-billing-confirm-modal {
    z-index: 1080;
}

.modal-backdrop.did-billing-confirm-backdrop {
    z-index: 1075;
}

.did-billing-lead {
    color: #4b5563;
    line-height: 1.5;
    max-width: 65ch;
}

[data-theme-mode="dark"] .did-billing-lead {
    color: #b3b3b3;
}

.did-billing-date-panel {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #f3f4f6;
}

[data-theme-mode="dark"] .did-billing-date-panel {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.12);
}

.did-billing-date-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #a16207;
    color: #ffffff;
    font-size: 1.25rem;
}

.did-billing-date-copy {
    min-width: 0;
}

.did-billing-date-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #4b5563;
    margin-bottom: 4px;
}

[data-theme-mode="dark"] .did-billing-date-label {
    color: #b3b3b3;
}

.did-billing-date-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #172033;
    text-wrap: balance;
}

[data-theme-mode="dark"] .did-billing-date-value {
    color: #f6f7fb;
}

.did-billing-date-help {
    margin-top: 8px;
    color: #374151;
    line-height: 1.5;
    max-width: 65ch;
}

[data-theme-mode="dark"] .did-billing-date-help {
    color: #d1d5db;
}

.did-billing-terms-block {
    margin-top: 20px;
}

.did-billing-terms-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    color: #172033;
    cursor: pointer;
}

[data-theme-mode="dark"] .did-billing-terms-check {
    color: #f6f7fb;
}

.did-billing-terms-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex: 0 0 20px;
    accent-color: #dc3545;
    cursor: pointer;
}

.did-billing-terms-check span {
    font-size: 0.875rem;
    line-height: 1.5;
}

.did-billing-terms-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: #b02a37;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.did-billing-terms-link:hover,
.did-billing-terms-link:focus {
    color: #8a1f2a;
}

[data-theme-mode="dark"] .did-billing-terms-link {
    color: #f3a4ab;
}

[data-theme-mode="dark"] .did-billing-terms-link:hover,
[data-theme-mode="dark"] .did-billing-terms-link:focus {
    color: #fecdd3;
}

.did-billing-terms-error {
    margin-top: 8px;
    color: #b91c1c;
}

[data-theme-mode="dark"] .did-billing-terms-error {
    color: #fca5a5;
}

.did-billing-terms-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: none;
    color: #b02a37;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

[data-theme-mode="dark"] .did-billing-terms-back {
    color: #f3a4ab;
}

.did-billing-policy {
    max-width: 70ch;
    color: #172033;
}

[data-theme-mode="dark"] .did-billing-policy {
    color: #eeeeee;
}

.did-billing-policy h6,
.did-billing-policy h3 {
    color: #111827;
    text-wrap: balance;
}

[data-theme-mode="dark"] .did-billing-policy h6,
[data-theme-mode="dark"] .did-billing-policy h3 {
    color: #f6f7fb;
}

.did-billing-policy h6 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.did-billing-policy h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 20px 0 8px;
}

.did-billing-policy p,
.did-billing-policy li {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #374151;
}

[data-theme-mode="dark"] .did-billing-policy p,
[data-theme-mode="dark"] .did-billing-policy li {
    color: #d1d5db;
}

.did-billing-policy ul {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

.did-billing-policy a {
    color: #b02a37;
}

[data-theme-mode="dark"] .did-billing-policy a {
    color: #f3a4ab;
}

@media (max-width: 575.98px) {
    .did-billing-date-panel {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .did-billing-confirm-modal .modal-dialog {
        transition: none;
    }
}

/* Carrier login host: Crazytel.io wordmark in header/sidebar chrome */
.header-logo img[src*="crazytel.io/img/logo.svg"],
.header-logo img[src*="crazytel-io-logo.svg"],
.header-logo img[src*="iologo.svg"]:not(.crazytel-sidebar-enterprise-logo) {
    max-height: 32px;
    width: auto;
    max-width: 180px;
}
[data-theme-mode="light"] .header-logo img[src*="crazytel.io/img/logo.svg"],
[data-theme-mode="light"] .header-logo img[src*="crazytel-io-logo.svg"] {
    background: #101010;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Carrier login: keep the Sign In / Verify button readable while the request is in flight.
   Dark ink on #22c55e / #16a34a passes WCAG AA; light spinner rules vanish on this fill. */
.btn.carrier-login-submit.carrier-login-is-busy,
.btn.carrier-login-submit:disabled {
    opacity: 1;
    cursor: wait;
    background-color: #16a34a;
    border-color: #16a34a;
    color: #101010;
}

.btn.carrier-login-submit.carrier-login-is-busy:hover,
.btn.carrier-login-submit.carrier-login-is-busy:focus,
.btn.carrier-login-submit:disabled:hover,
.btn.carrier-login-submit:disabled:focus {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #101010;
}

.carrier-login-submit .login-spinner-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.carrier-login-submit .carrier-login-spinner-icon {
    font-size: 1.2rem;
    line-height: 1;
    color: #101010;
}

.carrier-login-submit .carrier-login-spinner,
.carrier-login-submit .spinner-border {
    width: 1.15rem;
    height: 1.15rem;
    border-width: 0.18em;
    color: #101010;
    border-color: rgba(16, 16, 16, 0.22);
    border-right-color: #101010;
}

[data-theme-mode="dark"] .carrier-login-submit .carrier-login-spinner,
[data-theme-mode="dark"] .carrier-login-submit .spinner-border {
    color: #101010;
    border-color: rgba(16, 16, 16, 0.22);
    border-right-color: #101010;
}

.carrier-login-spinner-label {
    font-weight: 600;
    color: #101010;
}

.carrier-login-form-busy .form-control[readonly] {
    background-color: #101010;
    color: #f6f7fb;
    opacity: 1;
    cursor: wait;
}

.carrier-login-form-busy #forgot-password-link,
.carrier-login-form-busy .show-password-button,
.carrier-login-form-busy .btn-link {
    pointer-events: none;
    opacity: 0.55;
}

.carrier-login-card.carrier-login-is-busy,
.carrier-login-form-busy {
    cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
    .carrier-login-submit .carrier-login-spinner-icon.ri-spin,
    .carrier-login-submit .spinner-border {
        animation-duration: 1.6s;
    }
}

/* Carrier login → enterprise dashboard handoff overlay (continuous motion, no Success dwell). */
.carrier-login-handoff-overlay,
.enterprise-handoff-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    background: #101010;
    color: #f6f7fb;
    padding: 24px 16px;
    opacity: 1;
    transition: opacity 0.28s ease-out;
}

.carrier-login-handoff-overlay[hidden],
.enterprise-handoff-overlay[hidden] {
    display: none;
}

html.enterprise-login-handoff .enterprise-handoff-overlay,
html.carrier-login-handoff .carrier-login-handoff-overlay {
    display: flex !important;
}

html.enterprise-login-handoff,
html.enterprise-login-handoff body,
html.carrier-login-handoff,
html.carrier-login-handoff body {
    background-color: #101010;
}

html.enterprise-login-handoff body::before,
html.carrier-login-handoff body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 19999;
    background: #101010;
}

.carrier-login-handoff-overlay.is-leaving,
.enterprise-handoff-overlay.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.carrier-login-handoff-logo,
.enterprise-handoff-logo {
    display: block;
    width: auto;
    max-width: 220px;
    height: auto;
    max-height: 52px;
}

.carrier-login-handoff-spinner,
.enterprise-handoff-spinner {
    width: 2rem;
    height: 2rem;
    border-width: 0.2em;
    color: #f6f7fb;
    border-color: rgba(255, 255, 255, 0.18);
    border-right-color: #f6f7fb;
}

.carrier-login-handoff-copy,
.enterprise-handoff-copy {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: #f6f7fb;
    text-align: center;
}

[data-theme-mode="light"] .carrier-login-handoff-overlay,
[data-theme-mode="light"] .enterprise-handoff-overlay,
html.enterprise-login-handoff[data-theme-mode="light"],
html.enterprise-login-handoff[data-theme-mode="light"] body,
html.carrier-login-handoff[data-theme-mode="light"],
html.carrier-login-handoff[data-theme-mode="light"] body {
    background-color: #101010;
    color: #f6f7fb;
}

@media (prefers-reduced-motion: reduce) {
    .carrier-login-handoff-overlay,
    .enterprise-handoff-overlay {
        transition: none;
    }
    .carrier-login-handoff-spinner,
    .enterprise-handoff-spinner {
        animation-duration: 1.6s;
    }
}