/**
 * Comtel Global Styles
 *
 * Shared Comtel design system: tokens, typography, components, and utilities
 * for customer-facing web applications (online sales, contact tools, portals).
 *
 * Import order in projects:
 *   1. Third-party CSS (Bootstrap, jQuery UI, etc.)
 *   2. This file (global.css)
 *   3. Project-local overrides
 *   4. Feature-specific CSS
 *
 * Class prefix: ct_
 * Token prefix: --ct-
 *
 * See /style/STYLE.md for architecture, naming rules, and migration guidance.
 */

/* ==========================================================================
   Root variables (design tokens)
   ========================================================================== */

:root {
    /* Brand colours */
    --ct-color-navy: #001a72;
    --ct-color-navy-dark: #001454;
    --ct-color-blue: #0033cb;
    --ct-color-green: #2cb92c;
    --ct-color-white: #ffffff;
    --ct-color-orange: #e85d04;
    --ct-color-red: #da0b18;
    --ct-color-border-light: #a9b8d1;
    --ct-color-input-border: #001573;
    --ct-color-muted-text: #5a6b85;
    --ct-color-body-text: #333333;
    --ct-color-subtext: #555555;
    --ct-color-footer-text: rgba(255, 255, 255, 0.55);

    /* Semantic states */
    --ct-color-error: #b42318;
    --ct-color-success-border: #6ebd73;
    --ct-color-success-bg: #f6fbf7;
    --ct-color-warning-bg: #fbf0da;
    --ct-color-warning-text: #6a4405;
    --ct-color-danger-bg: #fbe5e3;
    --ct-color-soft-panel: #f8f9fc;
    --ct-color-soft-panel-alt: #f4f7fb;

    /* Typography */
    --ct-font-family-body: 'Galyon', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ct-font-family-title: 'Galyon Bold', 'Galyon', system-ui, sans-serif;
    --ct-font-size-body: 16px;
    --ct-font-size-body-sm: 14px;
    --ct-font-size-body-lg: 18px;
    --ct-font-size-title: 24px;
    --ct-font-size-title-lg: 30px;
    --ct-line-height-body: 1.45;
    --ct-line-height-tight: 1.2;
    --ct-line-height-snug: 1.35;

    /* Layout (generic shell — project-specific heights stay local) */
    --ct-max-width-app: 1920px;
    --ct-max-width-modal-lg: 1100px;
    --ct-max-width-modal-md: 800px;
    --ct-max-width-modal-sm: 580px;
    --ct-max-width-form: 640px;

    /* Border radius — unified 20px brand standard */
    --ct-radius-panel: 20px;
    --ct-radius-input: 20px;
    --ct-radius-pill: 999px;
    --ct-radius-icon: 10px;

    /* Shadows */
    --ct-shadow-sm: 0 2px 10px rgba(0, 26, 114, 0.06);
    --ct-shadow-md: 0 8px 22px rgba(0, 26, 114, 0.12);
    --ct-shadow-lg: 0 8px 24px rgba(0, 20, 84, 0.28);
    --ct-shadow-modal: 0 24px 48px rgba(0, 10, 60, 0.35);
    --ct-shadow-btn-hover: 0 6px 18px rgba(0, 26, 114, 0.22);
    --ct-shadow-focus-ring: 0 0 0 3px rgba(0, 26, 114, 0.14);
    --ct-shadow-success: 0 4px 14px rgba(61, 158, 71, 0.12);

    /* Overlay */
    --ct-overlay-backdrop: rgba(0, 20, 84, 0.28);

    /* Spacing scale (common gaps and padding used across Comtel UIs) */
    --ct-space-2xs: 4px;
    --ct-space-xs: 8px;
    --ct-space-sm: 12px;
    --ct-space-md: 16px;
    --ct-space-lg: 20px;
    --ct-space-xl: 24px;
    --ct-space-2xl: 28px;
    --ct-space-3xl: 32px;
    --ct-space-4xl: 48px;

    /* Motion */
    --ct-duration-fast: 0.15s;
    --ct-duration-normal: 0.2s;
    --ct-duration-stage-fade: 0.32s;
    --ct-duration-modal-in: 0.32s;
    --ct-duration-modal-out: 0.28s;
    --ct-ease-out: ease-out;
    --ct-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

    /* Z-index scale */
    --ct-z-modal: 1050;
    --ct-z-toast: 12000;

    /* ElevenLabs ConvAI widget (optional — see ElevenLabs section) */
    --ct-elevenlabs-footer-gap: 6px;
    --ct-elevenlabs-offset-down: 20px;
    --ct-elevenlabs-overlay-padding: 20px;
    --ct-elevenlabs-edge-gap: 14px;
    --ct-elevenlabs-offset-right: 10px;
    --ct-elevenlabs-z-index: 1000;
}

/* ==========================================================================
   Fonts
   Galyon brand fonts — paths relative to this file (style/fonts/galyon/)
   ========================================================================== */

@font-face {
    font-family: 'Galyon';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/galyon/Galyon-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Galyon Bold';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/galyon/Galyon-Bold.woff') format('woff');
}

/* ==========================================================================
   Base reset
   ========================================================================== */

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

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--ct-font-family-body);
    font-size: var(--ct-font-size-body);
    line-height: var(--ct-line-height-body);
    color: var(--ct-color-body-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.ct_title,
.ct_scope h1,
.ct_scope h2,
.ct_scope h3,
.ct_scope h4 {
    font-family: var(--ct-font-family-title);
    font-weight: 700;
    line-height: var(--ct-line-height-tight);
    color: var(--ct-color-navy);
}

.ct_title_lg {
    font-size: var(--ct-font-size-title-lg);
    text-align: center;
}

.ct_title_md {
    font-size: var(--ct-font-size-title);
}

.ct_subtitle {
    margin: 0;
    color: var(--ct-color-muted-text);
    font-size: var(--ct-font-size-body);
    line-height: var(--ct-line-height-body);
    font-weight: 400;
}

.ct_text_navy {
    color: var(--ct-color-navy);
}

.ct_text_green {
    color: var(--ct-color-green);
}

.ct_text_white {
    color: var(--ct-color-white);
}

.ct_text_muted {
    color: var(--ct-color-muted-text);
}

.ct_text_error {
    color: var(--ct-color-error);
}

.ct_text_center {
    text-align: center;
}

/* ==========================================================================
   Colours (background helpers)
   ========================================================================== */

.ct_bg_navy {
    background-color: var(--ct-color-navy);
}

.ct_bg_white {
    background-color: var(--ct-color-white);
}

.ct_bg_soft {
    background-color: var(--ct-color-soft-panel);
}

.ct_bg_soft_alt {
    background-color: var(--ct-color-soft-panel-alt);
}

/* ==========================================================================
   App shell and layout
   App shell and main content panel layout
   ========================================================================== */

.ct_app_shell {
    max-width: var(--ct-max-width-app);
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--ct-color-navy);
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 18px 18px;
}

.ct_main_wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 var(--ct-space-md) var(--ct-space-xs);
    position: relative;
}

.ct_content_panel {
    flex: 1 1 auto;
    background: var(--ct-color-white);
    border-radius: var(--ct-radius-panel);
    margin: 0 var(--ct-space-2xs);
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.ct_stack_xs {
    display: flex;
    flex-direction: column;
    gap: var(--ct-space-xs);
}

.ct_stack_sm {
    display: flex;
    flex-direction: column;
    gap: var(--ct-space-sm);
}

.ct_stack_md {
    display: flex;
    flex-direction: column;
    gap: var(--ct-space-md);
}

.ct_stack_lg {
    display: flex;
    flex-direction: column;
    gap: var(--ct-space-lg);
}

.ct_row_center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ct-space-lg);
}

.ct_form_shell {
    width: 100%;
    max-width: var(--ct-max-width-form);
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Buttons
   Button variants: primary, success, choice, ghost, back
   ========================================================================== */

.ct_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ct-space-xs);
    min-height: 48px;
    padding: 10px var(--ct-space-xl);
    border: none;
    border-radius: var(--ct-radius-input);
    font-family: var(--ct-font-family-body);
    font-size: var(--ct-font-size-body-lg);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--ct-duration-fast) ease,
        color var(--ct-duration-fast) ease,
        transform var(--ct-duration-normal) ease,
        box-shadow var(--ct-duration-normal) ease,
        filter var(--ct-duration-fast) ease,
        opacity var(--ct-duration-fast) ease;
}

.ct_btn:focus-visible {
    outline: none;
    box-shadow: var(--ct-shadow-focus-ring);
}

.ct_btn:disabled,
.ct_btn.ct_btn_disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Primary navy CTA */
.ct_btn_primary {
    background: var(--ct-color-navy);
    color: var(--ct-color-white);
}

.ct_btn_primary:hover:not(:disabled):not(.ct_btn_disabled) {
    background: var(--ct-color-navy-dark);
    color: var(--ct-color-white);
}

/* Success / confirm action */
.ct_btn_success {
    background: var(--ct-color-green);
    color: var(--ct-color-white);
}

.ct_btn_success:hover:not(:disabled):not(.ct_btn_disabled) {
    filter: brightness(1.05);
    color: var(--ct-color-white);
}

/* Large binary or multi-option choice */
.ct_btn_choice {
    min-width: 240px;
    min-height: 64px;
    padding: 14px var(--ct-space-2xl);
    font-size: var(--ct-font-size-title);
}

.ct_btn_choice:hover:not(:disabled):not(.ct_btn_disabled) {
    background: var(--ct-color-navy-dark);
    transform: translateY(-3px);
    box-shadow: var(--ct-shadow-btn-hover);
}

/* Ghost button on dark/navy backgrounds */
.ct_btn_ghost_light {
    min-height: 44px;
    padding: 10px 22px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.12);
    color: var(--ct-color-white);
}

.ct_btn_ghost_light:hover:not(:disabled):not(.ct_btn_disabled) {
    background: rgba(255, 255, 255, 0.22);
    color: var(--ct-color-white);
}

/* Back control on dark toolbar */
.ct_btn_back_dark {
    min-height: 44px;
    padding: var(--ct-space-xs) var(--ct-space-md);
    border: none;
    border-radius: var(--ct-radius-panel);
    background: transparent;
    color: var(--ct-color-white);
    font-size: 20px;
}

.ct_btn_back_dark:hover:not(:disabled):not(.ct_btn_disabled) {
    background: rgba(255, 255, 255, 0.1);
}

/* Back control inside light content panel */
.ct_btn_back_panel {
    padding: var(--ct-space-xs) 14px;
    border: none;
    border-radius: var(--ct-radius-pill);
    background: rgba(0, 26, 114, 0.06);
    font-size: var(--ct-font-size-body);
    font-weight: 600;
    color: var(--ct-color-muted-text);
}

.ct_btn_back_panel:hover:not(:disabled):not(.ct_btn_disabled) {
    background: rgba(0, 26, 114, 0.1);
    color: var(--ct-color-navy);
}

/* Compact toolbar, tab, and inline actions */
.ct_btn.ct_btn_sm {
    min-height: 36px;
    padding: 6px 14px;
    font-size: var(--ct-font-size-body-sm);
    line-height: 1.2;
}

/* Outline primary — pairs with .ct_btn and .ct_btn_sm */
.ct_btn.ct_btn_outline_primary {
    background: transparent;
    border: 2px solid var(--ct-color-input-border);
    color: var(--ct-color-navy);
}

.ct_btn.ct_btn_outline_primary:hover:not(:disabled):not(.ct_btn_disabled) {
    background: var(--ct-color-navy);
    border-color: var(--ct-color-navy);
    color: var(--ct-color-white);
}

.ct_btn.ct_btn_danger {
    background: var(--ct-color-red);
    border: 2px solid var(--ct-color-red);
    color: var(--ct-color-white);
}

.ct_btn.ct_btn_danger:hover:not(:disabled):not(.ct_btn_disabled) {
    filter: brightness(0.95);
    border-color: var(--ct-color-red);
    color: var(--ct-color-white);
}

.ct_btn.ct_btn_outline_danger {
    background: transparent;
    border: 2px solid var(--ct-color-red);
    color: var(--ct-color-red);
}

.ct_btn.ct_btn_outline_danger:hover:not(:disabled):not(.ct_btn_disabled) {
    background: var(--ct-color-red);
    border-color: var(--ct-color-red);
    color: var(--ct-color-white);
}

/* Page sub-menu tab row (My Clients / My Services, etc.) */
.ct_submenu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ct-space-xs);
    margin-bottom: var(--ct-space-md);
}

/* ==========================================================================
   Forms
   Text inputs, textareas, selects, labels, and validation states
   ========================================================================== */

.ct_input,
.ct_textarea,
.ct_select {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 48px;
    margin: 0;
    padding: 10px 14px;
    font-family: var(--ct-font-family-body);
    font-size: var(--ct-font-size-body);
    line-height: var(--ct-line-height-snug);
    color: var(--ct-color-body-text);
    background: var(--ct-color-white);
    border: 2px solid var(--ct-color-input-border);
    border-radius: var(--ct-radius-input);
    box-sizing: border-box;
    transition:
        border-color var(--ct-duration-fast) ease,
        box-shadow var(--ct-duration-fast) ease;
}

.ct_textarea {
    min-height: 88px;
    resize: vertical;
}

.ct_input:focus,
.ct_input:focus-visible,
.ct_textarea:focus,
.ct_textarea:focus-visible,
.ct_select:focus,
.ct_select:focus-visible {
    border-color: var(--ct-color-navy);
    box-shadow: var(--ct-shadow-focus-ring);
    outline: none;
}

.ct_field {
    display: block;
    width: 100%;
}

.ct_field_label {
    display: block;
    margin-bottom: var(--ct-space-xs);
    font-family: var(--ct-font-family-body);
    font-size: var(--ct-font-size-body);
    font-weight: 600;
    color: var(--ct-color-navy);
}

.ct_field_error {
    display: none;
    margin-top: 6px;
    font-family: var(--ct-font-family-body);
    font-size: 13px;
    line-height: var(--ct-line-height-snug);
    color: var(--ct-color-error);
}

.ct_field_has_error .ct_input,
.ct_field_has_error .ct_textarea,
.ct_field_has_error .ct_select {
    border-color: var(--ct-color-error);
}

.ct_field_has_error .ct_field_error {
    display: block;
}

.ct_field_success .ct_input,
.ct_field_success .ct_textarea,
.ct_field_success .ct_select {
    border-color: var(--ct-color-success-border);
}

/* ==========================================================================
   Cards
   Selectable and static card surfaces
   ========================================================================== */

.ct_card {
    border: 2px solid var(--ct-color-border-light);
    border-radius: var(--ct-radius-panel);
    background: var(--ct-color-white);
    box-shadow: var(--ct-shadow-sm);
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease,
        background-color 0.22s ease;
}

.ct_card_interactive {
    cursor: pointer;
}

.ct_card_interactive:hover {
    transform: translateY(-3px);
    border-color: var(--ct-color-border-light);
    box-shadow: var(--ct-shadow-md);
}

.ct_card_selected,
.ct_card_success {
    border-color: var(--ct-color-success-border);
    background: var(--ct-color-success-bg);
    box-shadow: var(--ct-shadow-success);
}

.ct_card_body {
    padding: var(--ct-space-md) 14px 14px;
}

.ct_card_soft {
    padding: var(--ct-space-lg) var(--ct-space-md);
    border-radius: var(--ct-radius-panel);
    background: var(--ct-color-soft-panel-alt);
    color: var(--ct-color-muted-text);
    font-size: var(--ct-font-size-body-sm);
    line-height: var(--ct-line-height-body);
    text-align: center;
}

/* ==========================================================================
   Modals
   Modal overlay, content box, and size modifiers
   ========================================================================== */

.ct_modal_overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ct-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ct-space-md);
    background: var(--ct-overlay-backdrop);
    animation: ct_modal_overlay_in var(--ct-duration-modal-in) var(--ct-ease-out) both;
}

.ct_modal_box {
    position: relative;
    width: 100%;
    max-width: var(--ct-max-width-modal-lg);
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px var(--ct-space-2xl) var(--ct-space-2xl);
    background: var(--ct-color-white);
    border-radius: var(--ct-radius-panel);
    animation: ct_modal_box_in var(--ct-duration-modal-in) var(--ct-ease-out) both;
}

.ct_modal_box_md {
    max-width: var(--ct-max-width-modal-md);
}

.ct_modal_box_sm {
    max-width: var(--ct-max-width-modal-sm);
    width: calc(100% - var(--ct-space-3xl));
    padding: var(--ct-space-2xl) var(--ct-space-3xl) var(--ct-space-3xl);
}

.ct_modal_head_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--ct-radius-icon);
    background: rgba(44, 185, 44, 0.12);
    color: var(--ct-color-green);
    font-size: var(--ct-font-size-body);
    line-height: 1;
}

/* Dark gradient modal variant (e.g. OTP, auth) */
.ct_modal_box_dark {
    color: var(--ct-color-white);
    border: 3px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(165deg, #001e82 0%, var(--ct-color-navy) 48%, var(--ct-color-navy-dark) 100%);
}

.ct_modal_close_accent {
    color: var(--ct-color-orange);
}

/* ==========================================================================
   Toast
   Fixed bottom-centre notification toast
   ========================================================================== */

.ct_toast {
    position: fixed;
    left: 50%;
    bottom: var(--ct-space-lg);
    z-index: var(--ct-z-toast);
    max-width: min(560px, calc(100vw - var(--ct-space-3xl)));
    padding: 14px 18px;
    border-radius: var(--ct-radius-panel);
    background: var(--ct-color-navy-dark);
    color: var(--ct-color-white);
    font-family: var(--ct-font-family-body);
    font-size: var(--ct-font-size-body-sm);
    line-height: var(--ct-line-height-body);
    text-align: center;
    box-shadow: var(--ct-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition:
        opacity var(--ct-duration-normal) ease,
        transform var(--ct-duration-normal) ease,
        visibility var(--ct-duration-normal) ease;
    pointer-events: none;
}

.ct_toast_visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ==========================================================================
   Status badges
   Portal status labels — colour plus readable text (never colour alone).
   Use with Bootstrap .badge: class="badge ct_status_badge bg-success"
   ========================================================================== */

.ct_scope .badge.ct_status_badge {
    font-family: var(--ct-font-family-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    padding: 0.4em 0.7em;
    border-radius: var(--ct-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ct_scope .badge.ct_status_badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.ct_scope .badge.ct_status_badge.bg-light::before {
    display: none;
}

.ct_scope .badge.ct_status_badge.bg-success {
    background: var(--ct-color-success-bg) !important;
    color: var(--ct-color-green) !important;
}

.ct_scope .badge.ct_status_badge.bg-warning {
    background: var(--ct-color-warning-bg) !important;
    color: var(--ct-color-orange) !important;
}

.ct_scope .badge.ct_status_badge.bg-danger {
    background: var(--ct-color-danger-bg) !important;
    color: var(--ct-color-error) !important;
}

.ct_scope .badge.ct_status_badge.bg-secondary {
    background: var(--ct-color-soft-panel) !important;
    color: var(--ct-color-muted-text) !important;
}

.ct_scope .badge.ct_status_badge.bg-info {
    background: var(--ct-color-soft-panel-alt) !important;
    color: var(--ct-color-navy) !important;
}

.ct_scope .badge.ct_status_badge.bg-primary {
    background: rgba(0, 26, 114, 0.1) !important;
    color: var(--ct-color-navy) !important;
}

/* ==========================================================================
   Bootstrap bridge (ct_scope)
   Align common Bootstrap markup with Comtel tokens inside .ct_scope wrappers.
   Load vendor CSS before global.css. Prefer native .ct_* components for new UI.
   ========================================================================== */

/*
 * BOOTSTRAP COLOUR OVERRIDE — required for all Comtel projects using Bootstrap 5
 *
 * Bootstrap 5 defaults (--bs-primary: #0d6efd, etc.) are NOT Comtel brand colours.
 * Without this block, common markup leaks vendor blue on:
 *   - .btn-check:checked + .btn-outline-primary (login toggles, radio groups)
 *   - .spinner-border
 *   - .badge.bg-primary (without ct_status_badge)
 *   - focus rings and other --bs-primary consumers
 *
 * Canonical brand tokens: :root --ct-color-* above.
 * Prefer ct_btn / ct_status_badge for new UI; this block protects legacy Bootstrap HTML.
 *
 * Load order: vendor CSS → rules/style/global.css → css/local.css
 * Wrapper:    <body class="ct_scope"> or <div class="ct_scope">
 *
 * NOT handled here (see STYLE.md):
 *   - Logos → rules/style/images/ (comtel_white.png, comtel_blue.png)
 *   - Favicon → rules/style/images/comtel_favicon_blue.png
 *   - Chart.js / SweetAlert2 → project JS reading --ct-color-* tokens
 */

.ct_scope {
    --bs-primary: var(--ct-color-navy);
    --bs-primary-rgb: 0, 26, 114;
    --bs-secondary: var(--ct-color-muted-text);
    --bs-secondary-rgb: 90, 107, 133;
    --bs-success: var(--ct-color-green);
    --bs-success-rgb: 44, 185, 44;
    --bs-danger: var(--ct-color-red);
    --bs-danger-rgb: 218, 11, 24;
    --bs-warning: var(--ct-color-orange);
    --bs-warning-rgb: 232, 93, 4;
    --bs-info: var(--ct-color-navy);
    --bs-info-rgb: 0, 26, 114;
    --bs-link-color: var(--ct-color-navy);
    --bs-link-hover-color: var(--ct-color-navy-dark);
}

.ct_scope .card {
    border: 1px solid var(--ct-color-border-light);
    border-radius: var(--ct-radius-panel);
    background: var(--ct-color-white);
    box-shadow: var(--ct-shadow-sm);
}

.ct_scope .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ct-color-soft-panel-alt);
    font-family: var(--ct-font-family-title);
    font-weight: 600;
    color: var(--ct-color-navy);
    padding: 14px 18px;
}

.ct_scope .card-body {
    padding: 18px;
}

.ct_scope .accordion {
    --bs-accordion-border-color: var(--ct-color-border-light);
}

.ct_scope .accordion-item {
    border: 1px solid var(--ct-color-border-light) !important;
    border-radius: var(--ct-radius-panel) !important;
    margin-bottom: var(--ct-space-sm);
    overflow: hidden;
    box-shadow: var(--ct-shadow-sm);
}

.ct_scope .accordion-button {
    font-family: var(--ct-font-family-body);
    padding: 15px 18px;
    background: var(--ct-color-white);
}

.ct_scope .accordion-button:not(.collapsed) {
    background: linear-gradient(90deg, var(--ct-color-soft-panel-alt), transparent 60%);
    color: var(--ct-color-navy);
    box-shadow: none;
}

.ct_scope .accordion-button:focus {
    box-shadow: var(--ct-shadow-focus-ring);
    border-color: var(--ct-color-navy);
}

.ct_scope .table {
    --bs-table-bg: transparent;
    color: var(--ct-color-body-text);
    margin-bottom: 0;
}

.ct_scope .table > thead.table-light th,
.ct_scope .table > thead th {
    background: var(--ct-color-soft-panel);
    color: var(--ct-color-muted-text);
    font-family: var(--ct-font-family-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ct-color-border-light);
    padding: 10px 12px;
}

.ct_scope .table > tbody td {
    padding: 11px 12px;
    border-color: var(--ct-color-soft-panel-alt);
    vertical-align: middle;
}

.ct_scope .table > tbody tr:hover {
    background: var(--ct-color-soft-panel-alt);
}

.ct_scope .card > .table-responsive {
    border-radius: 0 0 var(--ct-radius-panel) var(--ct-radius-panel);
    overflow: hidden;
}

.ct_scope .badge.bg-light {
    background: var(--ct-color-soft-panel) !important;
    color: var(--ct-color-muted-text) !important;
    border: 1px solid var(--ct-color-border-light);
}

/* Plain Bootstrap badges (without ct_status_badge) */
.ct_scope .badge.bg-primary {
    background: rgba(0, 26, 114, 0.1) !important;
    color: var(--ct-color-navy) !important;
}

.ct_scope .badge.bg-success {
    background: var(--ct-color-success-bg) !important;
    color: var(--ct-color-green) !important;
}

.ct_scope .badge.bg-warning {
    background: var(--ct-color-warning-bg) !important;
    color: var(--ct-color-warning-text) !important;
}

.ct_scope .badge.bg-danger {
    background: var(--ct-color-danger-bg) !important;
    color: var(--ct-color-red) !important;
}

.ct_scope .badge.bg-secondary {
    background: var(--ct-color-soft-panel) !important;
    color: var(--ct-color-muted-text) !important;
}

.ct_scope .badge.bg-info {
    background: var(--ct-color-soft-panel-alt) !important;
    color: var(--ct-color-navy) !important;
}

.ct_scope .spinner-border {
    color: var(--ct-color-navy);
}

.ct_scope .text-danger {
    color: var(--ct-color-red) !important;
}

.ct_scope .btn {
    font-weight: 600;
    border-radius: var(--ct-radius-icon);
    font-size: 0.88rem;
}

.ct_scope .btn-primary {
    background: var(--ct-color-navy);
    border-color: var(--ct-color-navy);
    color: var(--ct-color-white);
}

.ct_scope .btn-primary:hover {
    background: var(--ct-color-navy-dark);
    border-color: var(--ct-color-navy-dark);
    color: var(--ct-color-white);
}

.ct_scope .btn-success {
    background: var(--ct-color-green);
    border-color: var(--ct-color-green);
    color: var(--ct-color-white);
}

.ct_scope .btn-success:hover {
    filter: brightness(0.95);
    border-color: var(--ct-color-green);
    color: var(--ct-color-white);
}

.ct_scope .btn-outline-primary {
    color: var(--ct-color-navy);
    border-color: var(--ct-color-input-border);
}

.ct_scope .btn-outline-primary:hover {
    background: var(--ct-color-navy);
    border-color: var(--ct-color-navy);
    color: var(--ct-color-white);
}

/* Login radio groups and btn-check toggles */
.ct_scope .btn-check:checked + .btn-outline-primary {
    background-color: var(--ct-color-navy);
    border-color: var(--ct-color-navy);
    color: var(--ct-color-white);
}

.ct_scope .btn-outline-secondary {
    color: var(--ct-color-muted-text);
    border-color: var(--ct-color-border-light);
}

.ct_scope .btn-outline-secondary:hover {
    background: var(--ct-color-soft-panel-alt);
    border-color: var(--ct-color-border-light);
    color: var(--ct-color-navy);
}

.ct_scope .btn-outline-danger {
    color: var(--ct-color-red);
    border-color: var(--ct-color-red);
}

.ct_scope .btn-outline-danger:hover {
    background: var(--ct-color-red);
    border-color: var(--ct-color-red);
    color: var(--ct-color-white);
}

.ct_scope .btn-danger {
    background: var(--ct-color-red);
    border-color: var(--ct-color-red);
    color: var(--ct-color-white);
}

.ct_scope .btn-danger:hover {
    filter: brightness(0.95);
    border-color: var(--ct-color-red);
    color: var(--ct-color-white);
}

.ct_scope .btn-warning {
    background: var(--ct-color-orange);
    border-color: var(--ct-color-orange);
    color: var(--ct-color-white);
}

.ct_scope .btn-warning:hover {
    filter: brightness(0.95);
    border-color: var(--ct-color-orange);
    color: var(--ct-color-white);
}

.ct_scope .btn-dark {
    background: var(--ct-color-navy-dark);
    border-color: var(--ct-color-navy-dark);
}

.ct_scope .dropdown-menu {
    border: 1px solid var(--ct-color-border-light);
    border-radius: var(--ct-radius-icon);
    box-shadow: var(--ct-shadow-md);
    padding: 6px;
    font-size: 0.9rem;
}

.ct_scope .dropdown-item {
    border-radius: 7px;
    padding: 7px 12px;
}

.ct_scope .dropdown-item:hover {
    background: var(--ct-color-soft-panel-alt);
    color: var(--ct-color-navy);
}

.ct_scope .dropdown-header {
    font-family: var(--ct-font-family-title);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ct_scope .form-control,
.ct_scope .form-select {
    border-radius: var(--ct-radius-icon);
    border-color: var(--ct-color-border-light);
    font-size: 0.9rem;
}

.ct_scope .form-control:focus,
.ct_scope .form-select:focus {
    border-color: var(--ct-color-navy);
    box-shadow: var(--ct-shadow-focus-ring);
}

.ct_scope .form-check-input:checked {
    background-color: var(--ct-color-navy);
    border-color: var(--ct-color-navy);
}

.ct_scope .form-label {
    color: var(--ct-color-muted-text);
    font-weight: 500;
}

.ct_scope .modal-content {
    border: none;
    border-radius: var(--ct-radius-panel);
    box-shadow: var(--ct-shadow-md);
    overflow: hidden;
}

.ct_scope .modal-header {
    border-bottom: 1px solid var(--ct-color-soft-panel-alt);
}

.ct_scope .modal-title {
    font-family: var(--ct-font-family-title);
    color: var(--ct-color-navy);
}

.ct_scope .alert {
    border-radius: var(--ct-radius-icon);
    border: none;
}

.ct_scope .alert-info {
    background: var(--ct-color-soft-panel-alt);
    color: var(--ct-color-navy);
}

.ct_scope .alert-warning {
    background: var(--ct-color-warning-bg);
    color: var(--ct-color-warning-text);
}

.ct_scope .alert-success {
    background: var(--ct-color-success-bg);
    color: var(--ct-color-green);
}

.ct_scope hr {
    color: var(--ct-color-border-light);
    opacity: 0.6;
}

.ct_scope .text-muted {
    color: var(--ct-color-muted-text) !important;
}

.ct_scope a:focus-visible,
.ct_scope button:focus-visible,
.ct_scope .btn:focus-visible {
    outline: 2px solid var(--ct-color-navy);
    outline-offset: 2px;
}

/*
 * Bootstrap bridge coverage checklist (Comtel standard)
 * [x] --bs-* remapping on .ct_scope
 * [x] .btn-primary, .btn-success, .btn-outline-primary (+ :checked)
 * [x] .btn-warning, .btn-danger, .btn-outline-secondary, .btn-outline-danger
 * [x] .badge.bg-* (with and without .ct_status_badge)
 * [x] .spinner-border, .text-danger
 * [x] .form-control, .form-select, .form-check-input
 * [x] .card, .table, .modal-*, .alert-*, .dropdown-*
 * [ ] Third-party widgets (SweetAlert2, Chart.js) — project JS reading --ct-color-*
 *
 * Logos and favicons: rules/style/images/ — see STYLE.md
 */

/* ==========================================================================
   Borders, radius, and shadows (utility)
   ========================================================================== */

.ct_radius_panel {
    border-radius: var(--ct-radius-panel);
}

.ct_radius_input {
    border-radius: var(--ct-radius-input);
}

.ct_radius_pill {
    border-radius: var(--ct-radius-pill);
}

.ct_border_light {
    border: 1px solid var(--ct-color-border-light);
}

.ct_border_input {
    border: 2px solid var(--ct-color-input-border);
}

.ct_shadow_sm {
    box-shadow: var(--ct-shadow-sm);
}

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

.ct_shadow_lg {
    box-shadow: var(--ct-shadow-lg);
}

/* ==========================================================================
   Spacing utilities
   ========================================================================== */

.ct_p_0 { padding: 0; }
.ct_p_sm { padding: var(--ct-space-sm); }
.ct_p_md { padding: var(--ct-space-md); }
.ct_p_lg { padding: var(--ct-space-lg); }
.ct_p_xl { padding: var(--ct-space-xl); }

.ct_m_0 { margin: 0; }
.ct_mb_sm { margin-bottom: var(--ct-space-sm); }
.ct_mb_md { margin-bottom: var(--ct-space-md); }
.ct_mb_lg { margin-bottom: var(--ct-space-lg); }
.ct_mb_xl { margin-bottom: var(--ct-space-xl); }

.ct_gap_sm { gap: var(--ct-space-sm); }
.ct_gap_md { gap: var(--ct-space-md); }
.ct_gap_lg { gap: var(--ct-space-lg); }

.ct_w_full {
    width: 100%;
}

.ct_max_w_form {
    max-width: var(--ct-max-width-form);
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Accessibility utilities
   ========================================================================== */

.ct_sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ct_focus_ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ct-color-green);
}

/* ==========================================================================
   Animations
   Shared entrance animations for modals, panels, and content
   ========================================================================== */

@keyframes ct_modal_overlay_in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

@keyframes ct_modal_overlay_out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes ct_modal_box_out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes ct_fade_in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ct_fade_in_up {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ct_fade_in_up_sm {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.ct_animate_fade_in {
    animation: ct_fade_in var(--ct-duration-stage-fade) var(--ct-ease-out) both;
}

.ct_animate_fade_in_up {
    animation: ct_fade_in_up var(--ct-duration-modal-in) var(--ct-ease-out) both;
}

.ct_animate_fade_in_up_sm {
    animation: ct_fade_in_up_sm 0.34s var(--ct-ease-out) both;
}

.ct_animate_modal_overlay_in {
    animation: ct_modal_overlay_in var(--ct-duration-modal-in) var(--ct-ease-out) both;
}

.ct_animate_modal_box_in {
    animation: ct_modal_box_in var(--ct-duration-modal-in) var(--ct-ease-out) both;
}

/* ==========================================================================
   ElevenLabs ConvAI widget (AIME)
   Native embed positioning — do not replace with a custom launcher button.
   ========================================================================== */

/*
 * HTML (after fixed app footer, before closing </body>):
 *
 * <!-- Elevenlabs AIME -->
 * <div class="ct_elevenlabs_widget_wrapper">
 *   <elevenlabs-convai
 *     id="APP_elevenlabs_aime"
 *     agent-id="agent_..."
 *     server-location="eu-residency"
 *     variant="compact"
 *     placement="bottom-right"
 *     dynamic-variables='{"partner_id":"…","client_id":"…"}'
 *   ></elevenlabs-convai>
 * </div>
 * <script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
 *
 * Project setup (in css/local.css :root):
 *   --ct-footer-stack-h — clearance above the fixed footer (required).
 *     Base: match your footer height, e.g. --ct-footer-stack-h: 64px;
 *     Mobile: increase when the footer wraps, e.g.
 *       --ct-footer-stack-h: calc(64px + 44px);
 *
 * Tuning (override in local.css or :root as needed):
 *   --ct-elevenlabs-footer-gap       — base gap above footer stack (default 6px)
 *   --ct-elevenlabs-offset-down      — lower whole widget: launcher + attribution (default 20px)
 *   --ct-elevenlabs-overlay-padding  — "Powered by ElevenLabs" vertical offset (default 20px)
 *   --ct-elevenlabs-edge-gap           — horizontal inset from viewport right (default 14px)
 *   --ct-elevenlabs-offset-right     — shift widget toward right edge (default 10px)
 *
 * Brand colours: launcher/button uses --el-accent* vars on elevenlabs-convai (Comtel navy).
 *
 * Do NOT:
 *   - position: fixed on <elevenlabs-convai> — breaks launcher clicks
 *   - pointer-events: none on the custom element
 *   - variant="expanded" — invalid; use tiny | compact | full
 *   - large uniform --el-overlay-padding — pushes widget toward viewport centre
 *
 * The wrapper defines the safe overlay region; the custom element fills it with
 * position: absolute so the shadow DOM host keeps pointer-events behaviour intact.
 */

.ct_elevenlabs_widget_wrapper {
    position: fixed;
    top: 0;
    right: max(
        calc(var(--ct-elevenlabs-edge-gap) - var(--ct-elevenlabs-offset-right)),
        env(safe-area-inset-right, 0px)
    );
    bottom: calc(
        var(--ct-footer-stack-h)
        + var(--ct-elevenlabs-footer-gap)
        - var(--ct-elevenlabs-offset-down)
    );
    left: 0;
    z-index: var(--ct-elevenlabs-z-index);
    pointer-events: none;
}

.ct_elevenlabs_widget_wrapper elevenlabs-convai {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    --el-overlay-padding: var(--ct-elevenlabs-overlay-padding);
    --el-accent: var(--ct-color-navy);
    --el-accent-hover: var(--ct-color-navy-dark);
    --el-accent-active: var(--ct-color-navy-dark);
    --el-accent-primary: var(--ct-color-white);
}

/*
 * Dropdowns inside .table-responsive (overflow clips absolute menus).
 * Add to the toggle button:
 *   data-bs-toggle="dropdown"
 *   data-bs-popper-config='{"strategy":"fixed"}'
 */

/* ==========================================================================
   Reduced motion
   Respects user prefers-reduced-motion preference
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ct_modal_overlay,
    .ct_modal_box,
    .ct_animate_fade_in,
    .ct_animate_fade_in_up,
    .ct_animate_fade_in_up_sm,
    .ct_animate_modal_overlay_in,
    .ct_animate_modal_box_in,
    .ct_card_interactive,
    .ct_btn {
        animation: none;
        transition: none;
    }

    .ct_card_interactive:hover {
        transform: none;
    }

    .ct_btn_choice:hover:not(:disabled):not(.ct_btn_disabled) {
        transform: none;
    }
}

/* ==========================================================================
   Mobile overrides
   Comtel mobile breakpoint: max-width 768px
   ========================================================================== */

@media (max-width: 768px) {
    .ct_btn {
        min-height: 48px;
    }

    .ct_btn.ct_btn_sm {
        min-height: 36px;
    }

    .ct_btn_choice {
        min-width: 0;
        width: 100%;
    }

    .ct_toast {
        max-width: calc(100vw - var(--ct-space-xl));
        padding: var(--ct-space-md) 18px;
        font-size: var(--ct-font-size-body);
    }

    .ct_full_width_mobile {
        width: 100%;
    }

    .ct_hidden_mobile {
        display: none;
    }

    .ct_modal_box {
        padding: var(--ct-space-lg) var(--ct-space-xl) var(--ct-space-xl);
    }
}