/*
 * CloudHUB design system
 *
 * Shared component defaults for the authenticated application workspace.
 * Edit theme-tokens.css to change values; keep page files for layouts,
 * third-party widgets, charts, and domain-specific states only.
 */

.content-page .content {
    color: var(--brand-text-body);
    font-size: var(--brand-font-size-base);
    line-height: var(--brand-line-height-base);
}

.content-page .content :where(h1, h2, h3, h4, h5, h6) {
    color: var(--brand-text-heading);
    font-weight: 800;
    line-height: 1.25;
}

.content-page .content h1 {
    font-size: var(--brand-font-size-h1);
}

.content-page .content h2 {
    font-size: var(--brand-font-size-h2);
}

.content-page .content h3 {
    font-size: var(--brand-font-size-h3);
}

.content-page .content h4,
.content-page .content h5,
.content-page .content h6 {
    font-size: var(--brand-font-size-h4);
}

.content-page .content .text-muted {
    color: var(--brand-text-muted);
}

.content-page .content .ch-link {
    color: var(--brand-link-color);
}

.content-page .content :where(.page-title, .header-title, .card-title) {
    color: var(--brand-text-heading);
    font-weight: 800;
}

/* Keep application-content icons consistent; shell navigation sits outside .content. */
.content-page .content :where(
    .mdi,
    .fa,
    .fas,
    .far,
    .fal,
    .fab,
    .fad,
    .fa-solid,
    .fa-regular,
    .fa-brands,
    [class^="uil-"],
    [class*=" uil-"],
    [class^="ri-"],
    [class*=" ri-"]
) {
    color: var(--brand-icon-color) !important;
}

/* Icons are content markers, not separate filled tiles. */
.content-page .content :where(
    .ch-header-icon,
    .ch-stat-icon,
    .stats-icon-wrapper,
    .stats-icon,
    .customer-icon
) {
    border: 1px solid var(--brand-icon-color) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.content-page .content .btn {
    border-radius: var(--brand-radius-sm);
    font-size: var(--brand-font-size-small);
    font-weight: 700;
}

.content-page .content .btn-primary {
    --bs-btn-bg: var(--brand-action-primary);
    --bs-btn-border-color: var(--brand-action-primary);
    --bs-btn-hover-bg: var(--brand-action-primary-hover);
    --bs-btn-hover-border-color: var(--brand-action-primary-hover);
    --bs-btn-active-bg: var(--brand-action-primary-hover);
    --bs-btn-active-border-color: var(--brand-action-primary-hover);
    --bs-btn-color: var(--brand-action-primary-text);
}

.content-page .content .btn-outline-primary {
    --bs-btn-color: var(--brand-action-primary);
    --bs-btn-border-color: var(--brand-action-primary);
    --bs-btn-hover-bg: var(--brand-action-primary);
    --bs-btn-hover-border-color: var(--brand-action-primary);
    --bs-btn-hover-color: var(--brand-action-primary-text);
    --bs-btn-active-bg: var(--brand-action-primary-hover);
    --bs-btn-active-border-color: var(--brand-action-primary-hover);
}

.content-page .content .btn-success,
.content-page .content .ch-btn-green {
    --bs-btn-bg: var(--brand-success-green);
    --bs-btn-border-color: var(--brand-success-green);
    --bs-btn-hover-bg: var(--brand-success-green-hover);
    --bs-btn-hover-border-color: var(--brand-success-green-hover);
    --bs-btn-active-bg: var(--brand-success-green-hover);
    --bs-btn-active-border-color: var(--brand-success-green-hover);
    --bs-btn-color: var(--brand-primary);
}

.content-page .content .btn-secondary {
    --bs-btn-bg: var(--brand-surface-muted);
    --bs-btn-border-color: var(--brand-border-strong);
    --bs-btn-color: var(--brand-text-heading);
    --bs-btn-hover-bg: var(--brand-border);
    --bs-btn-hover-border-color: var(--brand-border-strong);
    --bs-btn-hover-color: var(--brand-text-heading);
}

.content-page .content .btn :where(i, .mdi) {
    font-size: 1rem;
    line-height: 1;
}

.content-page .content :where(.form-label, label:not(.form-check-label)) {
    color: var(--brand-text-heading);
    font-size: var(--brand-font-size-small);
    font-weight: 700;
}

.content-page .content :where(.form-control, .form-select) {
    border-color: var(--brand-form-border);
    border-radius: var(--brand-radius-sm);
    color: var(--brand-text-heading);
    font-size: var(--brand-font-size-base);
}

.content-page .content :where(.form-control, .form-select):focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem var(--brand-focus-ring);
}

[data-bs-theme="dark"] .content-page .content :where(.form-control, .form-select):focus {
    border-color: var(--brand-border-strong);
}

[data-bs-theme="dark"] .content-page .content :where(.form-control, .form-select) {
    background-color: var(--brand-surface-muted);
    color: var(--brand-text-heading);
}

[data-bs-theme="dark"] .content-page .content :where(.form-control, .form-select)::placeholder {
    color: var(--brand-text-muted);
}

.content-page .content .form-check-input {
    border-color: var(--brand-form-border);
}

.content-page .content .form-check-input:checked {
    border-color: var(--brand-primary);
    background-color: var(--brand-primary);
}

[data-bs-theme="dark"] .content-page .content .form-check-input:checked {
    border-color: var(--brand-success-green);
    background-color: var(--brand-success-green);
}

.content-page .content .ch-surface {
    border: 1px solid var(--brand-border) !important;
    background-color: var(--brand-surface) !important;
    box-shadow: var(--brand-shadow-card) !important;
}

.content-page .content .ch-surface {
    border-radius: var(--brand-radius-lg);
}

.content-page .content .ch-form-section {
    padding: 1.25rem;
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius-lg);
    background: var(--brand-surface) !important;
    box-shadow: var(--brand-shadow-card) !important;
}

.content-page .content .ch-table {
    --bs-table-color: var(--brand-text-body);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--brand-border);
    --bs-table-hover-bg: var(--brand-surface-tint);
}

.content-page .content .ch-table :where(thead th, .table-light th) {
    border-color: var(--brand-border);
    background: var(--brand-surface-muted);
    color: var(--brand-text-heading);
    font-size: var(--brand-font-size-label);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.content-page .content .ch-table td {
    border-color: var(--brand-border);
    color: var(--brand-text-body);
    vertical-align: middle;
}

.content-page .content .badge {
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.content-page .content .page-link {
    border-color: var(--brand-border-strong);
    color: var(--brand-primary);
}

.content-page .content .page-item.active .page-link {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #ffffff;
}

/* Pagination uses the same restrained outlined-action palette as the rest of
 * the application. This covers Bootstrap, DataTables and legacy custom lists. */
.content-page .content :is(.pagination, .modern-pagination, .cloudsim-modern-pagination) .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 2.35rem;
    border: 1px solid var(--brand-border-strong) !important;
    border-radius: var(--brand-radius-md) !important;
    background: transparent !important;
    color: var(--brand-icon-color) !important;
    box-shadow: none !important;
    text-decoration: none;
}

.content-page .content :is(.pagination, .modern-pagination, .cloudsim-modern-pagination) .page-link:is(:hover, :focus) {
    border-color: var(--brand-icon-color) !important;
    background: var(--brand-surface-tint) !important;
    color: var(--brand-icon-color) !important;
    box-shadow: none !important;
}

.content-page .content :is(.pagination, .modern-pagination, .cloudsim-modern-pagination) .page-item.active .page-link {
    border-color: var(--brand-icon-color) !important;
    background: var(--brand-surface-tint) !important;
    color: var(--brand-icon-color) !important;
    font-weight: 800;
}

.content-page .content :is(.pagination, .modern-pagination, .cloudsim-modern-pagination) .page-item.disabled .page-link {
    border-color: var(--brand-border) !important;
    background: transparent !important;
    color: var(--brand-text-subtle) !important;
    opacity: 0.65;
}

.content-page .content .ch-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    background: var(--brand-surface);
    box-shadow: var(--brand-shadow-card);
}

.content-page .content .ch-eyebrow {
    display: block;
    color: var(--brand-text-heading);
    font-size: var(--brand-font-size-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.content-page .content .ch-page-header h1 {
    margin: 0.3rem 0;
}

.content-page .content .ch-page-header p {
    margin: 0;
}

.content-page .content .ch-header-icon,
.content-page .content .ch-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--brand-radius-md);
    background: var(--brand-icon-tile);
    color: var(--brand-icon-color);
}

.content-page .content .ch-header-icon :where(i, .mdi),
.content-page .content .ch-stat-icon :where(i, .mdi) {
    font-size: 1.4rem;
}

.content-page .content .ch-stat-card {
    min-height: 112px;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius-lg);
    background: var(--brand-surface) !important;
    box-shadow: var(--brand-shadow-card) !important;
}

/* Legacy pages use plain Bootstrap cards rather than ch-* surfaces. Keep their
 * dark-mode backgrounds on the same tonal blue scale as the application shell. */
[data-bs-theme="dark"] .content-page .content :is(
    .card,
    .table-container,
    .dataTables_wrapper,
    .form-section,
    .settings-card,
    .detail-card,
    .search-results,
    .stats-card,
    .filter-card,
    .summary-card,
    .info-card,
    .widget-card,
    .panel-card,
    .content-card,
    .list-card,
    .filter-section,
    .stats-container
) {
    background-color: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
}

[data-bs-theme="dark"] .content-page .content :is(
    .card-header,
    .card-footer,
    .table thead,
    .data-table th,
    .pagination-container
) {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-border) !important;
}

/* Shared vendor/legacy component defaults so dropdowns, tabs, and modals
 * inside the authenticated content area follow the same tonal-blue scale
 * without needing per-page overrides. */
[data-bs-theme="dark"] .content-page .content :is(.dropdown-menu) {
    background-color: var(--brand-surface-muted);
    border-color: var(--brand-border);
}

[data-bs-theme="dark"] .content-page .content .dropdown-item {
    color: var(--brand-text-heading);
}

[data-bs-theme="dark"] .content-page .content .dropdown-item:hover,
[data-bs-theme="dark"] .content-page .content .dropdown-item:focus {
    background-color: var(--brand-border);
    color: var(--brand-text-heading);
}

[data-bs-theme="dark"] .content-page .content :is(.modal-content) {
    background-color: var(--brand-surface);
    border-color: var(--brand-border);
}

[data-bs-theme="dark"] .content-page .content :is(.modal-header, .modal-footer) {
    background-color: var(--brand-surface-muted);
    border-color: var(--brand-border);
}

[data-bs-theme="dark"] .content-page .content .nav-tabs {
    border-color: var(--brand-border);
}

[data-bs-theme="dark"] .content-page .content .nav-tabs .nav-link {
    color: var(--brand-text-muted);
    border-color: transparent;
}

[data-bs-theme="dark"] .content-page .content .nav-tabs .nav-link.active {
    background-color: var(--brand-surface);
    color: var(--brand-icon-color);
    border-color: var(--brand-border) var(--brand-border) var(--brand-surface);
}

[data-bs-theme="dark"] .content-page .content .list-group-item {
    background-color: var(--brand-surface);
    border-color: var(--brand-border);
    color: var(--brand-text-body);
}

.content-page .content .ch-stat-label {
    color: var(--brand-text-heading);
    font-size: var(--brand-font-size-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.content-page .content .ch-stat-value {
    margin-top: 0.55rem;
    color: var(--brand-text-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .content-page .content .ch-page-header {
        align-items: flex-start;
        padding: 1rem;
    }

    .content-page .content h1 {
        font-size: 1.3rem;
    }
}

/*
 * Legacy workspace migration
 *
 * Older applications (CDRs, trunks, call forwarding, voicebots, mobile,
 * CNDB, and support) were built with stacked Bootstrap cards.  Keeping an
 * outer page card and another card for every control produces the "box inside
 * a box" appearance.  These final, shared rules flatten that legacy nesting
 * while retaining a single clear workspace surface, as used by the customer
 * pages.
 */
.content-page .content :is(
    .card,
    .table-container,
    .dataTables_wrapper,
    .form-section,
    .settings-card,
    .detail-card,
    .search-results,
    .stats-card,
    .filter-card,
    .summary-card,
    .info-card,
    .widget-card,
    .panel-card,
    .content-card,
    .list-card,
    .filter-section,
    .stats-container
) {
    background-color: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius-lg) !important;
    box-shadow: var(--brand-shadow-card) !important;
}

.content-page .content :is(.card-header, .card-footer) {
    background-color: transparent !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text-heading) !important;
}

/* A child card is structural legacy markup, not a second visual surface. */
.content-page .content :is(.card, .form-section, .settings-card, .detail-card)
    :is(.card, .form-section, .settings-card, .detail-card) {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.content-page .content :is(.table-responsive, .dataTables_wrapper) {
    overflow: auto;
}

.content-page .content :is(.table, .modern-table, .data-table) {
    --bs-table-bg: transparent;
    --bs-table-color: var(--brand-text-body);
    --bs-table-border-color: var(--brand-border);
    margin-bottom: 0;
}

.content-page .content :is(.table, .modern-table, .data-table) thead :is(th, td) {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-text-heading) !important;
    font-size: var(--brand-font-size-label);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.content-page .content :is(.table, .modern-table, .data-table) :is(th, td) {
    border-color: var(--brand-border) !important;
    color: var(--brand-text-body);
    vertical-align: middle;
}

.content-page .content :is(.table, .modern-table, .data-table) tbody tr,
.content-page .content :is(.table, .modern-table, .data-table) tbody tr:nth-child(even),
.content-page .content :is(.table, .modern-table, .data-table) tbody tr:nth-child(odd) {
    background: transparent !important;
}

.content-page .content :is(.table, .modern-table, .data-table) tbody tr:hover {
    background: var(--brand-surface-tint) !important;
}

.content-page .content :is(.modal-content, .offcanvas) {
    background-color: var(--brand-surface) !important;
    border-color: var(--brand-border) !important;
    box-shadow: var(--brand-shadow-card) !important;
}

.content-page .content :is(.modal-header, .modal-footer, .offcanvas-header) {
    background-color: transparent !important;
    border-color: var(--brand-border) !important;
}

.content-page .content .modal-body :is(.form-section, .settings-card, .detail-card) {
    padding: 0 0 1rem !important;
    margin-bottom: 1rem !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
}

.content-page .content .modal-body :is(.form-section, .settings-card, .detail-card):last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom-width: 0 !important;
}

/*
 * Shared dialog language
 *
 * Bootstrap modals and SweetAlert dialogs are used throughout the workspace.
 * Keep their chrome here so every existing dialog inherits the same compact,
 * token-driven surface without requiring each action flow to be rewritten.
 */
body :is(#modal, .modal) .modal-content[class] {
    background: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14) !important;
    overflow: hidden;
}

body :is(#modal, .modal) .modal-header[class] {
    padding: 1.25rem 1.4rem 0.6rem !important;
    background: transparent !important;
    border: 0 !important;
}

body :is(#modal, .modal) .modal-title[class] {
    color: var(--brand-text-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
}

body :is(#modal, .modal) .modal-body[class] {
    padding: 0.35rem 1.4rem 1.2rem !important;
    color: var(--brand-text-muted) !important;
    font-size: 0.8rem;
    line-height: 1.55;
}

body :is(#modal, .modal) .modal-footer[class] {
    display: flex;
    gap: 0.5rem;
    padding: 0 1.4rem 1.25rem !important;
    background: transparent !important;
    border: 0 !important;
}

body :is(#modal, .modal) :is(.modal-footer, .modal-body) .btn {
    min-height: 36px;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    box-shadow: none !important;
    font-size: 0.8rem;
}

body :is(#modal, .modal) .btn-primary {
    background: var(--brand-icon-color) !important;
    border-color: var(--brand-icon-color) !important;
    color: #ffffff !important;
}

body :is(#modal, .modal) :is(.btn-outline-secondary, .btn-secondary) {
    background: transparent !important;
    border-color: var(--brand-form-border) !important;
    color: var(--brand-text-body) !important;
}

body :is(#modal, .modal) .btn-close {
    opacity: 0.7;
}

html[data-bs-theme="dark"] body :is(#modal, .modal) .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

:root .swal2-container .swal2-popup:not(.swal2-toast) {
    width: min(360px, calc(100vw - 32px)) !important;
    padding: 1.4rem !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 12px !important;
    background: var(--brand-surface) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14) !important;
    color: var(--brand-text-body) !important;
    text-align: left !important;
}

:root .swal2-container .swal2-popup:not(.swal2-toast) .swal2-title {
    margin: 0 !important;
    color: var(--brand-text-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
    text-align: left !important;
}

:root .swal2-container .swal2-popup:not(.swal2-toast) .swal2-html-container {
    margin: 0.45rem 0 0 !important;
    color: var(--brand-text-muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.55;
    text-align: left !important;
}

/* Confirmation sheets stay quiet: actions are conveyed by copy and buttons. */
:root .swal2-container .swal2-popup:not(.swal2-toast):has(.swal2-cancel) .swal2-icon {
    display: none !important;
}

:root .swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions {
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin: 1.2rem 0 0 !important;
}

:root .swal2-container .swal2-popup:not(.swal2-toast) .swal2-styled {
    min-height: 36px;
    margin: 0 !important;
    padding: 0.45rem 0.85rem !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 0.8rem !important;
}

:root .swal2-container .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm {
    background: var(--brand-icon-color) !important;
    border-color: var(--brand-icon-color) !important;
    color: #ffffff !important;
}

:root .swal2-container .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel {
    background: transparent !important;
    border: 1px solid var(--brand-form-border) !important;
    color: var(--brand-text-body) !important;
}

:root .swal2-container .swal2-popup:not(.swal2-toast) .swal2-loader {
    width: 1.45rem !important;
    height: 1.45rem !important;
    margin: 0.9rem 0 0 !important;
    border: 2px solid var(--brand-icon-color) !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-radius: 50% !important;
    animation: ch-dialog-spin 0.7s linear infinite !important;
}

:root .swal2-container .swal2-popup.swal2-loading:not(.swal2-toast) .swal2-actions {
    justify-content: center;
}

:root .swal2-container .swal2-popup.swal2-loading:not(.swal2-toast) .swal2-loader {
    display: flex !important;
    margin: 0 !important;
}

:root .swal2-container .swal2-popup.swal2-loading:not(.swal2-toast),
:root .swal2-container .swal2-popup.swal2-loading:not(.swal2-toast) .swal2-title,
:root .swal2-container .swal2-popup.swal2-loading:not(.swal2-toast) .swal2-html-container {
    text-align: center !important;
}

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

/* Breadcrumbs sit in .content and often use alert-success. Force readable
 * contrast in dark mode for both links and unlinked <span> crumbs. */
html[data-bs-theme="dark"] .content-page .content .breadcrumb,
html[data-bs-theme="dark"] .content-page .content .breadcrumb.alert,
html[data-bs-theme="dark"] .content-page .content .breadcrumb.alert-success {
    color: #ffffff !important;
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-border) !important;
}

html[data-bs-theme="dark"] .content-page .content .breadcrumb .breadcrumb-item,
html[data-bs-theme="dark"] .content-page .content .breadcrumb .breadcrumb-item span,
html[data-bs-theme="dark"] .content-page .content .breadcrumb .breadcrumb-item a,
html[data-bs-theme="dark"] .content-page .content .breadcrumb .breadcrumb-item.active {
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .content-page .content .breadcrumb .breadcrumb-item a:hover,
html[data-bs-theme="dark"] .content-page .content .breadcrumb .breadcrumb-item a:focus {
    color: var(--brand-icon-color) !important;
}

html[data-bs-theme="dark"] .content-page .content .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--brand-text-muted) !important;
}