/*
 * entity_shared.css — Shared styles for all entity detail pages
 * (Auto Attendant, Call Center, Hunt Group, Extension)
 *
 * Loaded globally via main_template_v3.php.
 * Entity-specific styles remain in their own files.
 *
 * ORDERING: extension shared selectors first, then inline extraction.
 * This preserves the original cascade (inline.css loaded after ext.css).
 */

/* Shared multi-entity styles extracted from extension_editable.css */
/* These selectors target multiple entity apps via :is() */


body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) {
    padding-bottom: 32px !important;
}


body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .setting_section.form_container:hover,
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .setting_section.form_container:has(.toggle_header.header-toggler-opened),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .setting_section.form_container:hover,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .setting_section.form_container:has(.toggle_header.header-toggler-opened) {
    border-color: var(--aa-flat-section-border) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .toggle_header,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .toggle_header {
    min-height: 52px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .setting_section.form_container,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .setting_section.form_container {
    overflow: hidden !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .setting_section.form_container:has(.dropdown-menu.show),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .setting_section.form_container:has(.dropdown-menu.show) {
    overflow: visible !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .setting_section.form_container + .setting_section.form_container,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #hunt_group_app, #call_center_app, #agent_app) .setting_section.form_container + .setting_section.form_container {
    margin-top: 14px !important;
}


/* Stronger final guards against older v4/global button and announcement rules. */


/* Dev3 shared settings interior pass.
   The tab shell was already aligned with Auto Attendant; this brings the
   setting sections themselves onto the same flat card and quiet-control system. */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) {
    --shared-setting-section-gap: 12px;
    --shared-setting-section-pad-x: 20px;
    --shared-setting-section-pad-y: 16px;
    --shared-setting-inner-pad-x: 22px;
    --shared-setting-inner-pad-y: 16px;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) :is(.call_control_details, .advanced_details, .call_announcements),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) :is(.call_control_details, .advanced_details, .call_announcements) {
    padding: 14px 16px 16px !important;
    background: transparent !important;
}


body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) :is(.call_control_details, .advanced_details, .call_announcements) .form-group.row:last-child,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) :is(.call_control_details, .advanced_details, .call_announcements) .form-group.row:last-child {
    margin-bottom: 0 !important;
}


/* Greeting button width, styling, and icon color moved to v4_2026.css
   (canonical greeting .tts-btn rule).  Do NOT re-add here. */


/* Settings tabs need the same interior language as Auto Attendant, not just the same outer shell. */
body.v4-body .v4-content .v4-tabbed-detail #extension_app :is(#personal_settings, #phone_section) .setting_box,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app :is(#personal_settings, #phone_section) .setting_box {
    padding: 14px 16px 16px !important;
    background: transparent !important;
    content-visibility: auto;
    contain-intrinsic-size: 0 300px;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#call_center_app, #hunt_group_app, #agent_app) .aa-tab-panel[data-aa-tab-panel="settings"] .aa-call-feature,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#call_center_app, #hunt_group_app, #agent_app) .aa-tab-panel[data-aa-tab-panel="settings"] .aa-call-feature {
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#call_center_app, #hunt_group_app, #agent_app) .aa-tab-panel[data-aa-tab-panel="settings"] .aa-call-feature:has(.dropdown-menu.show),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#call_center_app, #hunt_group_app, #agent_app) .aa-tab-panel[data-aa-tab-panel="settings"] .aa-call-feature:has(.dropdown-menu.show) {
    content-visibility: visible;
}


/* The flat-section and control tokens every entity page reads (the auto
   attendant restates them under its own id further down). */
body.v4-body .v4-content .v4-tabbed-detail,
body.v4-body #v4-app .v4-content .v4-tabbed-detail {
    --aa-flat-section-border: #DDE7F1;
    --aa-flat-section-radius: 8px;
    --aa-elegant-control-border: #DCE6F1;
    --aa-elegant-control-text: #314860;
    --aa-elegant-control-icon: #7C8FA4;
}

/* Shared Profile template. Keep profile/number edits one-source across
   extensions, auto attendants, hunt groups, and call centers. */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) {
    /* The profile fields take the SETTINGS ROW numbers (280 x 34, 13px,
       #C6D3E1) since 2026-09-18; until then they were 380 x 38 here and
       the extension page restated the whole editor at 132/380 in its own
       stylesheet. */
    --shared-profile-control-width: 280px;
    --shared-profile-card-border: #D7E2EE;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile.setting_section.form_container, #profile-section.setting_section.form_container),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile.setting_section.form_container, #profile-section.setting_section.form_container) {
    border: 1px solid var(--aa-flat-section-border) !important;
    border-radius: var(--aa-flat-section-radius) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile.setting_section.form_container, #profile-section.setting_section.form_container)::before,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile.setting_section.form_container, #profile-section.setting_section.form_container)::before {
    content: none !important;
    display: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card,
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card {
    margin: 14px 0 0 !important;
    padding: 16px !important;
    border: 1px solid var(--shared-profile-card-border) !important;
    border-radius: var(--aa-flat-section-radius) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-unified-shell--profile,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-unified-shell--profile {
    padding: 24px !important;
}


/* THE ROW RHYTHM (SETTINGS ROW, below): a profile row is one 34px line and
   rows stand 5px apart, on all four pages, from the same two tokens. Until
   2026-09-20 a row was 48px here and 42 in the extension's inline editor,
   whose own rule restated the spacing. */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, var(--shared-profile-control-width)) !important;
    column-gap: 24px !important;
    align-items: center !important;
    min-height: var(--vt-row-line, 34px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row:not(.hidden) ~ .form-group.row,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row:not(.hidden) ~ .form-group.row {
    margin-top: var(--vt-row-gap, 5px) !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row > [class*="col-"],
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row > [class*="col-"]:first-child,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row > [class*="col-"]:first-child {
    grid-column: 1 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row > [class*="col-"]:nth-child(2),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row > [class*="col-"]:nth-child(2) {
    grid-column: 2 !important;
    justify-self: stretch !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card :is(input.form-control, select.form-control),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card :is(input.form-control, select.form-control) {
    width: 100% !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font: 400 13px/34px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #0E2749 !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card :is(input.form-control, select.form-control):focus,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card :is(input.form-control, select.form-control):focus {
    border-color: var(--v4-brand-orange, #F89939) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(248, 153, 57, 0.12) !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) :is(.aa-profile-basic-card, .aa-profile-number-card) label.label,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) :is(.aa-profile-basic-card, .aa-profile-number-card) label.label {
    font: 600 13px/20px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #1B3557 !important;
    margin: 0 !important;
    padding: 0 !important;
}


body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--shared-profile-control-width) !important;
    column-gap: 24px !important;
    row-gap: 12px !important;
    align-items: start !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card > .col-4,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card > .col-4 {
    grid-column: 1 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card > .col-8,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card > .col-8 {
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    justify-self: end !important;
    align-self: start !important;
    padding: 2px 0 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-label,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 42px !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-desc,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-desc {
    display: block !important;
    margin-top: 3px !important;
    color: #7186A4 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card #alternative_number,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card #alternative_number {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card #alternative_number :is(.alternative_number_main.form-group.row, .alternative_number_select.form-group.row),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card #alternative_number :is(.alternative_number_main.form-group.row, .alternative_number_select.form-group.row) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, var(--shared-profile-control-width)) !important;
    column-gap: 24px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 1px 0 !important;
    border: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number :is(.slim_row, .form-group.row, [class*="col-"]),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number :is(.slim_row, .form-group.row, [class*="col-"]) {
    border: 0 !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .form-group.row > [class*="col-"],
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .form-group.row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .form-group.row > .col-8,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .form-group.row > .col-8 {
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number select.form-control,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number select.form-control {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font: 400 13px/34px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #0E2749 !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .alternativenumber.aa-number-row:has(> .remove_alternative_number),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .alternativenumber.aa-number-row:has(> .remove_alternative_number) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    column-gap: 10px !important;
    align-items: center !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .alternativenumber.aa-number-row:has(> .remove_alternative_number) > .form-group.row,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .alternativenumber.aa-number-row:has(> .remove_alternative_number) > .form-group.row {
    width: 100% !important;
    max-width: 100% !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number:has(.remove_alternative_number) .alternative_number_main.form-group.row,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number:has(.remove_alternative_number) .alternative_number_main.form-group.row {
    grid-template-columns: minmax(0, 1fr) calc(var(--shared-profile-control-width) + 48px) !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number:has(.remove_alternative_number) .alternative_number_main.form-group.row > .col-8,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number:has(.remove_alternative_number) .alternative_number_main.form-group.row > .col-8 {
    width: calc(var(--shared-profile-control-width) + 48px) !important;
    max-width: calc(var(--shared-profile-control-width) + 48px) !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number:has(.remove_alternative_number) .alternative_number_main.form-group.row select.form-control,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number:has(.remove_alternative_number) .alternative_number_main.form-group.row select.form-control {
    width: var(--shared-profile-control-width) !important;
    max-width: var(--shared-profile-control-width) !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .remove_alternative_number,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .remove_alternative_number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--aa-elegant-control-border) !important;
    border-radius: var(--aa-flat-section-radius) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .alternative_number_wrapper,
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .alternativenumber.aa-number-row,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .alternative_number_wrapper,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) #alternative_number .alternativenumber.aa-number-row {
    width: 100% !important;
    max-width: none !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card .add_alternative_number,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card .add_alternative_number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 10px 0 0 !important;
    padding: 0 12px !important;
    font: 600 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important;
    border: 1px solid var(--aa-elegant-control-border) !important;
    border-radius: var(--aa-flat-section-radius) !important;
    background: #FFFFFF !important;
    color: var(--aa-elegant-control-text) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}


/* Dev3 shared recorder module: one selector layout for Extension, Call Center,
   Hunt Group, and any shared company recorder surfaces. */


body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) > .aa-tab-panel,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) > .aa-tab-panel {
    margin-left: 0 !important;
    margin-right: auto !important;
}


body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .add_icon,
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .add_button .fa-plus,
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .add_alternative_number .fa-plus,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .add_icon,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .add_button .fa-plus,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .add_alternative_number .fa-plus {
    color: var(--aa-control-icon-neutral, #52657D) !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-row,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-copy,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-copy {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: calc(100% - 92px) !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, max-content) max-content !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    padding-left: 0 !important;
    text-align: left !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-row > :is(.v4-feature-control, .text-right, .breakout_toggle_fix),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-row > :is(.v4-feature-control, .text-right, .breakout_toggle_fix) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-copy > :is([class*="_arrow"], .enable_voice_mail_arrow, .hide_toggle),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-copy > :is([class*="_arrow"], .enable_voice_mail_arrow, .hide_toggle) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-name,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-name {
    /* The FEATURE CARD HEADER numbers (18/750 #0F1729, description 13/400
       #6B7F97 4px under): a toggle-only row (Do Not Disturb, Call Waiting)
       reads exactly like a card with a header. Until 2026-09-18 these rows
       were 15px/#001F4A beside the 18px cards. */
    grid-column: 1 !important;
    grid-row: 1 !important;
    color: #0F1729 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-desc,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .v4-feature-desc {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    color: #6B7F97 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
}


/* ============================================================
   THE CANONICAL FEATURE CARD - single source of truth.

   Every feature card on every entity (Extension, Call Center,
   Hunt Group, Auto Attendant) is the SAME card. The .aa-call-feature
   wrapper is THE card element: 1px #DDE7F1 border, 8px radius, white
   bg, 12px bottom gap, left-aligned and capped at one column width so
   all four entities match. The inner feature element (pre-alert,
   #office_anywhere, .aa-unified-shell--advanced, the CFS/CFA bodies)
   is FLAT - it never carries its own border/radius/bg - so there is
   never a double border. Do NOT add a per-feature or per-entity card
   rule anywhere else; fix it here.
   ============================================================ */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 0 var(--shared-setting-section-gap, 12px) !important;
    padding: 20px 24px !important;
    border: 1px solid var(--aa-flat-section-border, #DDE7F1) !important;
    border-radius: var(--aa-flat-section-radius, 8px) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature:last-child:not(#advanced-notice .aa-call-feature),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature:last-child:not(#advanced-notice .aa-call-feature) {
    margin-bottom: 0 !important;
}

/* Equalize column width across the three containers (#advanced,
   #advanced-notice, #call_control) so every card is the same width.
   #advanced's .advanced_details adds side padding that would otherwise
   make its cards narrower; zero it so the card column matches. */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .advanced_details,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .advanced_details {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* The inner feature element is FLAT (the wrapper is the only card).
   Covers .aa-unified-shell--advanced and the legacy .inner_section /
   id-named bodies (#pre-alert, #office_anywhere, #anonymous-rejection,
   #call_forwarding_selective, etc.). */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature > :is(.aa-unified-shell--advanced, .inner_section),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature > :is(.aa-unified-shell--advanced, .inner_section) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    /* Inner shell carries NO padding and NO forced/equal height. The
       .aa-call-feature wrapper is the only padded box, so each feature sizes
       to its own content: collapsed (disabled) cards stay short, expanded
       ones grow. Kills the legacy "normalize all advanced cards to one
       height" inflation (most visible on Hunt Group / Call Center, where
       disabled cards were padded out to ~242px). */
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}


/* Expanded call feature interiors. The outer .aa-call-feature is the frame;
   the fields inside it stay clean, without nested cards or divider lines. */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) {
    --aa-call-inner-label-width: 150px;
    --aa-call-inner-control-width: 360px;
    --aa-call-inner-row-height: 34px;
    --aa-call-inner-gap: 14px;
    --aa-cfs-label-width: 150px;
    --aa-cfs-control-width: 280px;
    --aa-cfs-label-size: 13px;
}

/* A card body carries NO top margin and NO top padding: the 30px under the
   hairline is the FEATURE CARD HEADER's bottom margin, for every card. The
   list of bodies that stood here until 2026-09-20 (forward always, no answer,
   simultaneous ring, two hooks no template prints any more) gave its members
   14 + 12px of their own, and every card that was not on the list sat 12px
   higher. Never give one body its own air again. */

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper, #busy-settings-area, .simultaneous_content_section) :is(.padded_section_widths, .subsection, .number_wrapper, .subsection_line, .notify_section, .form-group.row),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper, #busy-settings-area, .simultaneous_content_section) :is(.padded_section_widths, .subsection, .number_wrapper, .subsection_line, .notify_section, .form-group.row) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area, .simultaneous_content_section) :is(.col-12.d-flex.slim_row, .form-group.row > .col-12.d-flex),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area, .simultaneous_content_section) :is(.col-12.d-flex.slim_row, .form-group.row > .col-12.d-flex) {
    display: grid !important;
    grid-template-columns: var(--aa-call-inner-label-width) minmax(220px, var(--aa-call-inner-control-width)) minmax(0, 1fr) !important;
    column-gap: var(--aa-call-inner-gap) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--aa-call-inner-row-height) !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area, .simultaneous_content_section) :is(.col-12.d-flex.slim_row, .form-group.row > .col-12.d-flex) > label,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area, .simultaneous_content_section) :is(.col-12.d-flex.slim_row, .form-group.row > .col-12.d-flex) > label {
    grid-column: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #1B3557 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area, .simultaneous_content_section) :is(.bwa_main_inputs, .schedule_selector_wrapper, .col-12.d-flex.slim_row > div:not(.error_message)),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area, .simultaneous_content_section) :is(.bwa_main_inputs, .schedule_selector_wrapper, .col-12.d-flex.slim_row > div:not(.error_message)) {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: var(--aa-call-inner-control-width) !important;
    min-height: var(--aa-call-inner-row-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area, .simultaneous_content_section) :is(input.form-control, select.form-control, .menu_input),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area, .simultaneous_content_section) :is(input.form-control, select.form-control, .menu_input) {
    width: 100% !important;
    max-width: var(--aa-call-inner-control-width) !important;
    height: var(--aa-call-inner-row-height) !important;
    min-height: var(--aa-call-inner-row-height) !important;
    margin: 0 !important;
    border-color: #C6D3E1 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

/* REMOVED 2026-05-25: schedule_selector appearance + chevron override.
   schedule.css lines 72-89 and 267-278 handle appearance: none and the
   custom SVG chevron for ALL schedule selects. This was a redundant
   workaround that used a different chevron (12x8 darker) vs schedule.css
   (10x6 lighter). Killed to centralize in schedule.css. */

/* Toggle-only feature header rows (e.g. Anonymous Rejection): when the
   header row is laid out as flex, the right-hand toggle column loses its
   grid width and collapses to the left instead of sitting at the right
   edge like every other card's toggle. Push it back to the right with an
   auto left-margin. Centralized across all four entities; the Always-style
   toggle (col-1 breakout, already right-aligned) is unaffected. */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature .form-group.row > [class*="col-"].text-right:has(.switch),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature .form-group.row > [class*="col-"].text-right:has(.switch) {
    margin-left: auto;
}

/* Feature module headers (Call Notify, Selective Rejection, etc.) are the
   SUB-CARD HEADER canon below (.aa-subsection-header.aa-feature-module-header). */


body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature .call_forwarding_no_answer_number_of_rings,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature .call_forwarding_no_answer_number_of_rings {
    width: 72px !important;
    max-width: 72px !important;
}


/* The selective rule card's rows are the SETTINGS ROW canon below; its
   label, its select cell and its fields kept three copies here until
   2026-09-19 (a #0E2749 label at 1.35, a 36px flex cell). */

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.c_top_border, .c_bottom_border, .subsection_line, .subsection_divider_top, .subsection_divider_bottom, .number_wrapper, .location, .has_schedule, .aa-cfs-card, .aa-cfs-delete-row, .call-forwarding-selective-events-area, .time_events, .holiday_events),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.c_top_border, .c_bottom_border, .subsection_line, .subsection_divider_top, .subsection_divider_bottom, .number_wrapper, .location, .has_schedule, .aa-cfs-card, .aa-cfs-delete-row, .call-forwarding-selective-events-area, .time_events, .holiday_events) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.subsection_line, .section_item)::before,
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.subsection_line, .section_item)::after,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.subsection_line, .section_item)::before,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.subsection_line, .section_item)::after {
    display: none !important;
    content: none !important;
}

/* Final call-feature polish: old extension widgets reuse nested row wrappers
   that draw their own dividers. Keep only the intentional card surfaces. */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper, #busy-settings-area) :is(.number_wrapper, .subsection_line, .subsection_divider_top, .subsection_divider_bottom, .number, .notify_section, .has_schedule, .form-group.row, .col-12.d-flex, .col-md-12.row),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper, #busy-settings-area) :is(.number_wrapper, .subsection_line, .subsection_divider_top, .subsection_divider_bottom, .number, .notify_section, .has_schedule, .form-group.row, .col-12.d-flex, .col-md-12.row) {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper, #busy-settings-area) :is(.number_wrapper, .subsection_line, .subsection_divider_top, .subsection_divider_bottom, .number, .notify_section, .has_schedule, .form-group.row, .col-12.d-flex, .col-md-12.row)::before,
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper, #busy-settings-area) :is(.number_wrapper, .subsection_line, .subsection_divider_top, .subsection_divider_bottom, .number, .notify_section, .has_schedule, .form-group.row, .col-12.d-flex, .col-md-12.row)::after,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper, #busy-settings-area) :is(.number_wrapper, .subsection_line, .subsection_divider_top, .subsection_divider_bottom, .number, .notify_section, .has_schedule, .form-group.row, .col-12.d-flex, .col-md-12.row)::before,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper, #busy-settings-area) :is(.number_wrapper, .subsection_line, .subsection_divider_top, .subsection_divider_bottom, .number, .notify_section, .has_schedule, .form-group.row, .col-12.d-flex, .col-md-12.row)::after {
    display: none !important;
    content: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper) > .number_wrapper,
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper) .subsection.number_wrapper,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper) > .number_wrapper,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, #busy-settings-area-wrapper) .subsection.number_wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature .call_forwarding_no_answer_section .slim_row,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-call-feature .call_forwarding_no_answer_section .slim_row {
    padding: 3px 0 !important;
}
/* ============================================================
   THE AGENT CARD (the AI agent page, #agent_app, alone). Written 2026-09-22
   in place of the legacy bootstrap-row card block (.aa-settings-cards,
   .section_item rows with a 16px title) that the agent page kept when the
   four entity pages moved to the FEATURE CARD HEADER canon. One card, the
   canon's numbers: 1px #DDE7F1 frame, 8px corners, 20px 24px padding, 12px
   between cards; the title 18/750 #0F1729 with the grey line under it and
   the control at the right; a body starts under a 1px #E4EBF3 hairline 16px
   under the header, its first box 30px under the hairline
   (--vt-card-body-top) and its last line 29px over the frame
   (--vt-card-body-end + the padding); a card with nothing in its body has
   no hairline and no body. The markup is agentCardOpen() in
   company/agent/includes/utils_v2.php; a feature's cards on the Routing
   tab sit inside a [data-aa-feature-content] wrapper the shared panel
   script shows and hides, which is why the card is selected by its own
   classes and never by a child chain from the form (2026-09-21 the wrapped
   cards lost their frame that way). A card inside a card (the Connection
   card's Engine and Brain model rows) is a row, not a card.
   ============================================================ */

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards > .setting_section.form_container,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards > .setting_section.form_container,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards :is(.setting_box, .extension, .form_section.call_settings, .form_section.hunt_settings),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards :is(.setting_box, .extension, .form_section.call_settings, .form_section.hunt_settings) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards > .setting_section.form_container,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards > .setting_section.form_container {
    content-visibility: auto;
    contain-intrinsic-size: 0 300px;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .setting_box > .extension > h5,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .setting_box > .extension > h5 {
    display: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards :is(.form_section.call_settings, .form_section.hunt_settings),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards :is(.form_section.call_settings, .form_section.hunt_settings) {
    display: block !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards :is(.form_section.call_settings, .form_section.hunt_settings) > form,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards :is(.form_section.call_settings, .form_section.hunt_settings) > form,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .form_section > form > .agent-feature,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .form_section > form > .agent-feature {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--shared-setting-section-gap, 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* A SHARED feature card on the Routing tab (Call Forwarding Always, 2026-10-08):
   its wrapper is THE card (aa-call-feature, the frame above), so it keeps the
   card's padding; the reset just above is for the agent's own wrappers, whose
   cards carry their own frame. */
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .form_section > form > .agent-feature.aa-call-feature,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .form_section > form > .agent-feature.aa-call-feature {
    display: block !important;
    padding: 20px 24px !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .form_section > form > .agent-feature[hidden],
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .form_section > form > .agent-feature[hidden] {
    display: none !important;
}

/* The card. */

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-auto-flow: row !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px 24px !important;
    border: 1px solid var(--aa-flat-section-border, #DDE7F1) !important;
    border-radius: var(--aa-flat-section-radius, 8px) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item)::before,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item)::before,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item)::after,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item)::after {
    display: none !important;
    content: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item)[hidden],
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item)[hidden] {
    display: none !important;
}

/* The header: the title column and the control at the right, on one row. */

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .v4-feature-copy,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .v4-feature-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 72ch !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .v4-feature-copy > :is(.v4-feature-name, .v4-feature-desc),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .v4-feature-copy > :is(.v4-feature-name, .v4-feature-desc) {
    display: block !important;
    width: 100% !important;
    max-width: 72ch !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .v4-feature-copy > .col-form-label.label,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .v4-feature-copy > .col-form-label.label {
    color: #0F1729 !important;
    font-size: 18px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > :is(.v4-feature-control, .text-right, .breakout_toggle_fix),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > :is(.v4-feature-control, .text-right, .breakout_toggle_fix) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 0 16px !important;
    line-height: 1.5 !important;
}

/* The body: the hairline, the air, and nothing at all when it holds nothing. */

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > :is(.col-12, .col-md-12, .agent_section, .threshold_area, .overflow_area, .no_answer_enabled_area),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > :is(.col-12, .col-md-12, .agent_section, .threshold_area, .overflow_area, .no_answer_enabled_area) {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 16px 0 0 !important;
    padding: var(--vt-card-body-top, 30px) 0 var(--vt-card-body-end, 8px) !important;
    border-top: 1px solid #E4EBF3 !important;
    line-height: 1.5 !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .col-12:not(:has(> :not([hidden]):not(.hidden):not(template):not(script):not(style))),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .col-12:not(:has(> :not([hidden]):not(.hidden):not(template):not(script):not(style))) {
    display: none !important;
}

/* The empty box that opens a card's body sits where every body starts. "Opens"
   = nothing shown before it: the Documents card keeps its upload panel, file
   box and result line (all hidden until Upload a document) ahead of it, and
   a :first-child test left that one box 8px lower than every other card's
   body (2026-09-25). */
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .col-12 > .agent-empty--inline:not(:not([hidden], .hidden, template, script, style) ~ .agent-empty--inline),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .col-12 > .agent-empty--inline:not(:not([hidden], .hidden, template, script, style) ~ .agent-empty--inline),
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .col-12 > :first-child > .agent-empty--inline:first-child,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item.v4-feature-row:not(.section_item .section_item) > .col-12 > :first-child > .agent-empty--inline:first-child {
    margin-top: 0 !important;
}

/* A card inside a card is a row: the label at the left, the control at the right, a hairline under it. */

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 24px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #E4EBF3 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row::before,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row::before,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row::after,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row::after {
    display: none !important;
    content: none !important;
}

/* A row's description wraps inside its own column (2026-09-22: on the
   Connection card the Engine and Brain model descriptions ran on one line
   under their pickers). The shared copy grid is max-content wide; a
   flexible second track keeps the spanning description out of the sizing. */
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row > .v4-feature-copy,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row > .v4-feature-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: 72ch !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row > .v4-feature-copy .v4-section-icon,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row > .v4-feature-copy .v4-section-icon {
    display: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row > .v4-feature-copy > .col-form-label.label,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row > .v4-feature-copy > .col-form-label.label {
    color: #1B3557 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row > :is(.v4-feature-control, .text-right, .breakout_toggle_fix),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row > :is(.v4-feature-control, .text-right, .breakout_toggle_fix) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}



body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row:first-child,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-settings-cards .section_item .section_item.v4-feature-row:first-child {
    padding-top: 0 !important;
}

/* Dev3 voicemail/playback final pass. */


/* Dev3 voicemail parity with Auto Attendant. */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) {
    --aa-advanced-label-width: 170px;
    --aa-advanced-control-width: 360px;
}


/* =================================================================
   Voicemail tab framing parity with the AA voicemail tab.
   The Extension / Call Center / Hunt Group voicemail tab rendered
   nested bordered containers (the setting_section, the unified
   shell, AND #voicemail itself), plus a master "Voicemail" enable
   toggle row at the top — the AA voicemail tab strips all of those
   so only the subsection cards (Greeting / Delivery / Caller Options
   / Security / etc.) show. Match that exactly here. The master
   enable toggle stays in the DOM so the form serializes; "+ Features"
   is the canonical place to enable/disable the tab itself.
   ================================================================= */


/* =================================================================
   Calls tab — match the AA Calls tab design exactly.

   AA design (the canonical "Multi-rule feature card" pattern):
   - Outer feature card with its own border (title + sub-description
     + "+" icon + master enable toggle in the header).
   - Each rule renders as its OWN bordered sub-card inside the
     feature card (1px #DDE7F1, 14px radius, 14px 18px 16px padding).
   - Each rule has Enabled / Forward To / Schedule fields plus the
     AA scheduleService events table when a schedule is picked.
   - Each rule ends with a top-bordered "Delete Number / Delete"
     row, where the Delete button is a rounded pink-bordered pill.
   - The master enable toggle stays visible (controls feature on/off).

   For extension / call_center / hunt_group, the existing
   .aa-call-feature wrapper provides the outer feature border. We
   need to:
     1. Strip the OLD outer page frame on #call_control so each
        feature card stands alone (parity with AA's page-level layout).
     2. Apply the AA-style rule-card styling to .aa-cfs-card and
        the bottom Delete row to .aa-cfs-delete-row + Delete pill.
     3. Render the "+" button as a clean icon.

   Scoped to :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app)
   #call_control so when CC / HG add the same features later, parity
   is automatic.
   ================================================================= */

/* 1. Strip the outer Calls-tab page frame */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .form_section.call_control_details,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .form_section.call_control_details {
    padding: 0 !important;
}

/* 2. Feature card padding/margin come from THE canonical .aa-call-feature
      rule above (20px 24px / 12px gap). Do not override them here - that is
      what made #call_control cards differ from #advanced / #advanced-notice. */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .aa-call-feature:last-child,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .aa-call-feature:last-child {
    margin-bottom: 0 !important;
}

/* 3. The selective rules body used to be forced open here (display:block
      !important, "always expanded"), which beat .hidden: on the extension the
      rules stayed on the page with the switch off, and switching the card off
      left them there. The switch owns the body now (entity_common.js), as on
      the other three pages (removed 2026-09-20). */

/* 4. The "+" add button takes the HEADER ADD BUTTON canon above. */


/* Strip any inner borders / backgrounds the embedded scheduleService
   draws around the events area — the rule card frame is the only frame. */
html body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .aa-cfs-card .call-forwarding-selective-events-area,
html body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .aa-cfs-card .schedule_container,
html body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .aa-cfs-card .time_schedule_sub_container {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 6. Rule header — title + sub-description on the left, leave room for trash icon top-right */


/* 8. Field rows — equal-width labels, tighter rhythm */

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .aa-cfs-card .slim_row,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .aa-cfs-card .slim_row {
    margin-bottom: 10px !important;
}


html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .schedule_container .table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .schedule_container table.bordered-table-head {
    min-width: 1040px !important;
}

html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .schedule_container :is(table.bordered-table-head, table.bordered-table-head tr, table.bordered-table-head th, table.bordered-table-head td, .time_wrapper, .schedule-action-buttons, .independent_row_styles) {
    white-space: nowrap !important;
}

html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) .schedule_container :is(.time_wrapper, .schedule-action-buttons, .independent_row_styles) {
    flex-wrap: nowrap !important;
}


/* The add button takes the HEADER ADD BUTTON canon (entity_shared.css). */


/* The delete button takes the REPEAT CARD DELETE canon (entity_shared.css). */


/* CFS grid override REMOVED (was 150px / 380px). Grid is centralized in
   company/shared/css/entity_shared.css (var-based 150px / 280px, matches voicemail). */

/* CFS label / wrapper / field styling REMOVED (was 14px/700 labels, 40px/8px/#C9D8E8 fields).
   Centralized in company/shared/css/entity_shared.css to match the voicemail settings rows
   (labels 13px/600/#1B3557, fields 34px/7px/#C6D3E1). Do NOT re-add entity-specific CFS styling here. */


/* schedule_container margin/border/btn/caret overrides DELETED — centralized in schedule.css (Phase 2) */


/* ============================================================
   LEGACY, STILL IN USE. DO NOT ADD TO IT, DO NOT COPY FROM IT.

   What is left of the inline <style> blocks the auto attendant, call
   center and hunt group modules used to print, pasted here one after the
   other in 2026. They were three copies of mostly the same rules: on
   2026-09-20 every rule whose declarations stood identically in a later
   copy (69) and every rule naming a class nothing prints (4) was deleted,
   proven first on the live pages (every element's computed style compared
   before and after on the four entity pages, the agent page, a schedule
   page and company settings: about 45,000 elements, zero changed).
   _scratch/ui0920b/legacy_blocks.py is the test; rerun it before touching
   this region.

   What remains is used, mostly by the auto attendant page (#submenu,
   #business / #after-hours / #holiday, #profile-section). Twenty-eight of
   these rules carry NO page scope (.main_buttons, .c_no_border,
   .bordered-table-head, .dropdown-header ...) and this file loads on every
   page of the portal, so they reach every page. A new rule never goes
   here: a shared component has its own titled canon block below, by class,
   scoped to the entity roots. A rule leaves this region only with the same
   proof.
   ============================================================ */

    /* REMOVED: .schedule_container .error override. schedule.css handles error visibility. */

    .section_item,
    .section_item .col-form-label {
        min-height: unset !important;
        line-height: 0 !important;
    }

    /* REMOVED: .schedule_container table thead border override (#dadada). schedule.css is source of truth. */

    /* Final AA page-wide polish */
    #auto_attendant_app .section_item,
    #auto_attendant_app .section_item .col-form-label,
    #auto_attendant_app .submenu-container label {
        line-height: 1.2 !important;
    }

    #profile-section #alternative_number .remove_alternative_number {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border: 1px solid rgba(200, 212, 225, 0.98) !important;
        border-radius: 3px !important;
        background: #ffffff;
        box-shadow: 0 14px 22px -24px rgba(17, 42, 75, 0.4);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 0 12px !important;
    }

    #submenu .submenu_details>.col-12 {
        padding: 0 !important;
    }

    #submenu .submenu-container {
        width: calc(100% - 44px) !important;
        max-width: 980px !important;
        margin: 0 0 14px 44px !important;
        padding: 14px 18px 18px !important;
        border: 1px solid rgba(220, 227, 236, 0.92) !important;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.99);
        box-shadow: 0 18px 28px -30px rgba(17, 42, 75, 0.4);
    }

    #submenu .submenu-container>.row:first-child {
        margin: 0 0 12px !important;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(231, 237, 244, 0.9);
    }

    #submenu .submenu-container .submenu-toggler .label {
        font-weight: 700;
    }

    #submenu .submenu-container .submenu-toggler {
        pointer-events: none;
        cursor: default;
    }

    #submenu .submenu-container .submenu-toggler img {
        display: none !important;
    }

    #submenu .submenu-container>.row.hidden {
        display: flex !important;
    }

    #submenu .submenu-container .sb-np td {
        padding: 0 !important;
        border: 0 !important;
        vertical-align: top;
    }

    #submenu .submenu-container .sb-np.hidden {
        display: table-row !important;
    }

    #submenu .submenu-container .submenu_container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #submenu .submenu-container .table-responsive {
        margin: 0 !important;
        overflow: visible !important;
    }

    #submenu .submenu-container thead th {
        background: #f8fbff !important;
        border-bottom: 1px solid rgba(228, 234, 242, 0.92) !important;
        padding: 11px 10px !important;
    }

    #submenu .submenu-container tbody td {
        padding: 8px 10px !important;
        border-bottom: 1px solid rgba(231, 237, 244, 0.9) !important;
        vertical-align: middle !important;
    }

    #submenu .submenu-container tbody tr:last-child td {
        border-bottom: 0 !important;
    }

    #submenu .submenu-container .edit_submenu_name,
    #submenu .submenu-container .delete_submenu {
        width: 38px;
        min-width: 38px;
        height: 38px;
        border: 1px solid rgba(200, 212, 225, 0.98);
        border-radius: 3px;
        background: #ffffff;
        box-shadow: 0 14px 22px -24px rgba(17, 42, 75, 0.4);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 0 !important;
    }

    /* The schedule block inside a selective rule and the rule's trash had
       an #advanced copy here (a 118px label, a 38px cell, 0/14 paddings, a
       border over the trash) that the extension page never had; the shared
       canons render them the same on every page since 2026-09-19. */

    #profile-section #alternative_number .alternative_number_main,
    #profile-section #alternative_number .alternative_number_wrapper .alternativenumber,
    #profile-section #alternative_number .form-group.row {
        margin-bottom: 6px !important;
    }

    #profile-section #alternative_number .remove_alternative_number {
        margin: 0 !important;
    }

    #advanced .aa-embedded-announcement {
        width: 100%;
        margin: 0 !important;
    }

    /* The selective rule card, its schedule events and the forward-always
       row had a run of #advanced copies here (a bordered events area, a
       126px label, 180px fields, 38px rows); the shared canons render them
       the same on every page since 2026-09-19. */

    /* Fourth-pass refinement: bring Submenus and Pre-alert onto the same
       subsection rhythm as the approved After Hours layout. */
    #submenu .aa-submenu-body {
        width: 100%;
        margin: 0 !important;
    }

    #submenu .aa-submenu-body>.notify_section {
        width: 100%;
    }

    #submenu .aa-submenu-section--menu {
        padding-top: 2px;
    }

    /* Sixth-pass refinement: make After Hours the visual reference point
       by flattening the extra inner cards and aligning the schedule grid
       directly to the main section shell. */

    /* Fifth-pass refinement: unify the main AA sections under one visible
       working shell with subsection dividers instead of separate mini-cards. */
    #business .aa-unified-shell,
    #after-hours .aa-unified-shell,
    #holiday .aa-unified-shell {
        width: calc(100% - 44px);
        max-width: 980px;
        margin: 14px 0 0 44px !important;
        padding: 18px !important;
        border: 1px solid rgba(220, 227, 236, 0.92) !important;
        border-radius: 3px !important;
        background: rgba(255, 255, 255, 0.99) !important;
        box-shadow: 0 18px 28px -30px rgba(17, 42, 75, 0.4);
    }

    #business .aa-unified-shell>.form-group,
    #after-hours .aa-unified-shell>.form-group,
    #holiday .aa-unified-shell>.form-group {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #business .aa-unified-shell .table-responsive,
    #after-hours .aa-unified-shell .table-responsive,
    #holiday .aa-unified-shell .table-responsive,
    #business .aa-unified-shell .business_menu_container,
    #after-hours .aa-unified-shell .after_menu_container,
    #holiday .aa-unified-shell .holiday_menu_container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* Sixth-pass follow-up overrides after the shared unified-shell rules. */
    #after-hours .aa-unified-shell {
        padding: 20px 22px 20px !important;
    }

    #after-hours .aa-unified-shell>.form-group+.form-group {
        margin-top: 20px !important;
        padding-top: 20px !important;
    }

    /* Seventh-pass refinement: make subsection headers unmistakable and
       consistent across Greeting / Menu / Schedule inside one main shell. */

    /* Eighth-pass refinement: flatten Business/Holiday internals so all
       main AA sections follow the same one-shell section model as After Hours. */
    #business .aa-unified-shell,
    #holiday .aa-unified-shell {
        padding: 20px 22px 20px !important;
    }

    /* Final polish: soften density under subsection headers and in menu rows. */

    #submenu .aa-submenu-header {
        margin-bottom: 16px !important;
        padding-bottom: 14px !important;
    }

    /* Divider refinement: let subsection headers own the separation,
       instead of slicing the greeting content between recordings/actions. */

    /* Final AA structure pass: one visual divider per subsection header,
       no duplicate top borders, and no row-rule clutter inside menu tables. */

    /* Rail correction: remove the leftover menu row rules and make the
       first menu column sit inside the same inner rail as Greeting labels. */

    /* ============================================================
       Frame parity (April 2026): bring Profile, Submenus, and each
       Advanced feature subsection onto the same card frame as
       Business / After Hours / Holiday. The base shell visuals come
       from the existing #business / #after-hours / #holiday rules
       above; these selectors extend those rules to the new sections,
       then add per-variant tweaks where the inner content differs.
       ============================================================ */

    /* Profile variant — host the existing form-rows inside the card
       cleanly. The legacy rows already paint their own bottom rules
       via .c_bottom_border, so just neutralize the leftover negative
       margins and excessive padding so they sit flush in the card. */

    #profile-section .aa-unified-shell--profile > .form-group {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Submenu variant — each submenu's body becomes a card. Cancel
       the negative margins inside submenu-greeting / submenu-menu
       cards since they no longer need to peek out of a parent. */

    /* Anonymous Rejection has no expandable body. Inner stays flat (padding 0);
       the .aa-call-feature wrapper provides the card padding. */

    /* ============================================================
       Greeting selector row — stable flex layout

         Recordings: [dropdown]  [Apply] [Cancel] [pencil]

       The row toggles button visibility based on the New + flow.
       Switch the row to flex with gap so buttons can't overlap
       each other (or the dropdown), so spacing stays uniform when
       Apply / Cancel / Edit pop in and out, and so the row wraps
       cleanly instead of overflowing on narrow viewports.
       Replaces a stack of inline `margin-left:5px` patches in the
       five greeting templates (business / after / holiday /
       submenus / pre-alert).
       ============================================================ */

    /* Per-key Play / Stop / Edit row inside the menu table cells —
       same flex+gap treatment so the icons line up cleanly without
       relying on the legacy inline `style="margin-top:0px"` on
       every button. */

    /* ============================================================
       Card internals — final polish so each section's content
       breathes inside its frame instead of looking pasted in.
       ============================================================ */

    /* Profile card — clean form-row rhythm. The legacy
       c_bottom_border on each row paints its own divider; lift the
       last one off so the card border can carry the bottom edge. */
    #profile-section .aa-unified-shell--profile > .form-group {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #profile-section .aa-unified-shell--profile > .form-group:last-child {
        margin-bottom: 0 !important;
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    #profile-section .aa-unified-shell--profile > .form-group .col-form-label.label {
        font-weight: 600;
        color: #163658;
    }

    /* Advanced cards — each feature's title row should sit at the
       top of the card with consistent vertical padding. The legacy
       `style="padding-top:14px;padding-bottom:11px"` patches on the
       header rows fight uneven heights inside a card; normalize. */

    /* Pre-alert inner subsections (Greeting / Schedule) — match the
       subsection-header style used in the main shell sections so
       the visual hierarchy is the same everywhere. */

    /* Voicemail vm-setting rows — give them consistent vertical
       rhythm inside the card. Previously ran on inherited margins
       from .vm-setting-row (line ~356) plus inline styles. */

    /* Submenu card — the per-submenu body card. Match outer card
       padding and ensure the inner Greeting / Menu subsections sit
       cleanly without mid-card stripes from the legacy menu-table
       row borders. */

    /* ============================================================
       Pass 36e — specificity fix for the outer card frames.

       v4_design.css contains
       `body.v4-body #v4-app .v4-content [id$="_app"] .aa-unified-shell`
       rules that intentionally FLATTEN .aa-unified-shell (border:0,
       background:transparent) so Business / After / Holiday show
       only the inner subsection layout, not an outer card.

       For Profile / Submenu / Advanced we DO want a visible outer
       card. The Phase 1 rules above lost the cascade against the
       v4 flattener. These selectors carry enough specificity to
       beat it: body.v4-body (1) + .v4-content (1) + #auto_attendant_app (1)
       + #section_id (1) + .aa-unified-shell--variant (1).

       Also null the legacy aa-prealert-layout / submenu-card
       borders that previously painted a card-in-card.
       ============================================================ */

    /* Outer cards must paint border + bg + shadow, beating the
       v4_design.css flattener. */

    /* Profile card slimmer top padding so the first row sits close
       to the top edge instead of leaving dead space. */

    /* Kill the legacy aa-prealert-layout card frame so the outer
       Pre-alert card is the ONLY card (no card-in-card). The Pass 5
       rule at line 1781 was being beaten by a v4_design rule that
       repaints aa-prealert-layout with border + bg + shadow. */

    /* Submenu card inner Greeting/Menu subsection cards — same
       null-out so the outer aa-unified-shell--submenu is the only
       visible frame. */

    /* ============================================================
       Pass 36f — kill card-in-card on CFA / CFS / Voicemail and
       normalize all 5 Advanced feature cards to the same height
       and structure when collapsed.

       v4_design.css paints `.form-group.row[id$="_always"]` and
       `.form-group.row#voicemail` and `.call_forwarding_selective_content_section`
       as their own framed cards. Inside our new outer
       aa-unified-shell--advanced that creates a card-in-card. Null
       them out so the outer card is the single visible frame.
       ============================================================ */

    /* Null out the inner-frame rules from v4_design.css for the
       three culprits: CFA title row, Voicemail title row, CFS
       expandable content section. Keep the title rows flush inside
       the outer card. */

    /* ============================================================
       Pass 36j — Sub-component pattern for features with multiple
       inner sections (Pre-alert: Greeting + Schedule; CFS: per-
       criteria; Voicemail: greeting + delivery settings; etc.)

       Rule: ONE outer card, sub-components separated by spacing
       and a hairline divider — NEVER another inner card frame.
       Same visual rhythm as Greeting/Menu/Schedule inside an
       After Hours card.
       ============================================================ */

    /* The Pre-alert inner Greeting/Schedule subsections — null
       any leftover inner card chrome and let them flow as plain
       blocks separated by a top divider on each section after
       the first. */

    /* Vertical rhythm + hairline divider between Pre-alert
       subsections. First subsection gets a top divider too — the
       one that separates it from the feature title row above. */

    /* Promote .aa-inline-subsection-title labels to the same
       17px bold heading style used by Greeting/Menu/Schedule in
       BH/AH/H — fired by JS adding .v4-section-heading. */

    /* The injected description sits under the heading with the
       same style that BH/AH/H descriptions use. */

    /* ============================================================
       Pass 36k — Pre-alert polish per user feedback:

       1. Recordings / Actions / Upload labels were at three
          different x positions. The .control_section.greeting
          flex container had align-items:center, horizontally
          centering its children inside the column. Switch to
          align-items:flex-start so Actions / Upload labels sit
          flush with Recordings (and the Greeting heading).

       2. Replace the heavy hairline divider between sub-components
          with a soft tinted background — gives a "soft section"
          feel without nested-box-on-box visuals.

       3. Round the corners on the Schedule dropdown so it matches
          the rounded surface of the parent feature card.
       ============================================================ */

    /* Flush-left Recordings/Actions/Upload labels and inputs. */

    /* Sub-component look — plain hairline border, no tinted
       background, no shadow. Each sub-component gets a complete
       4-side border (don't strip border-top on subsequent ones). */

    /* ============================================================
       Pass 36n — uniform Advanced feature card heights + toggle
       alignment.

       Issues from browser inspection:
       1. CFS title row was 61px while CFA was 46px because v4_design's
          `#advanced > .setting_section .form-group.row` rule paints
          `padding:6px 0; min-height:48px` on Pre-alert / CFS / Anon
          Rejection while my Pass 36f only stripped CFA / Voicemail.
       2. CFS toggle was at x=1383 vs others at 1395 because the
          .call_forwarding_selective_add_number "+" button kept
          `display:inline-flex` even when given .hidden — its
          per-class display:inline-flex !important beat the global
          .hidden display:none !important.

       Strip the legacy padding/min-height on EVERY direct
       .form-group.row child of an aa-unified-shell--advanced card
       and force .hidden to win over .call_forwarding_selective_add_number.
       ============================================================ */

    /* ============================================================
       Pass 36p — chevron expand button + CFS toggle alignment.

       CRITICAL bugs caught only by direct DOM inspection:
       1. Earlier passes hid every chevron img with `display:none
          !important` AND set `pointer-events:none` on the arrow
          parent. There was literally no way to expand any feature.
       2. CFS toggle's right edge sits at x=1421 vs others at 1433
          because an empty `.error_message` <div> after the toggle
          (zero width, but takes 15px in the flex container) shifts
          the toggle left.

       Fix: re-show chevrons, restore pointer-events, render the
       chevron as a clearly clickable circular button next to the
       feature title, and hide the stray error_message in the CFS
       toggle row.
       ============================================================ */

    /* Re-enable the chevron click target. */

    /* Show the chevron img unless it has the .hidden class (set
       when the feature toggle is OFF). Override the legacy
       `display:none !important`. Legacy global rules in style.css
       handle the rotation: closed → 90° (DOWN ▼ "click to expand"),
       opened → 270° (UP ▲ "click to collapse"). Don't fight them.
       Make the chevron 18px / opacity 0.75 so it's an obvious
       click target. */

    /* Make the entire title-block area a hint-able click target —
       label + chevron together. Subtle hover wash so users see
       "this row is interactive". `:not(.hidden)` so when CFA's
       toggle is OFF (its parent gets `.hidden`) the entire arrow
       stays display:none instead of being unhidden by this rule. */

    /* ============================================================
       Pass 36u — sub-component panel for the expanded content of
       CFA / CFS / Voicemail. Same hairline-border + rounded box
       as Pre-alert's Greeting / Schedule sub-components. Keeps
       the framework consistent across every Advanced feature.
       ============================================================ */

    /* Voicemail container — strip the legacy 20px bottom margin and
       the inline negative-margin on the inner subsection so its
       contents land flush in the new bordered panel. */

    /* Tidy CFS field rows — left-aligned label, value to right.
       Mirrors the Voicemail Delivery panel row rhythm. */

    /* ============================================================
       Pass 36ab — Profile sub-component panel
       Wrap the Extension / Name / Number rows in a bordered panel
       so Profile's expanded view matches the framework (every
       feature's content sits inside a sub-component panel).
       ============================================================ */

    /* ============================================================
       Pass 36ac — CFS comprehensive polish per user feedback
         1. Breathing room between feature description and the
            first criterion panel
         2. Forward To input + Schedule dropdown stretch wider
            and use rounded 8px corners (consistent with cards)
         3. Schedule selector + events grid become ONE unified
            surface (no hairline divider between)
         4. Delete button rendered as a rounded pill
         5. Event-grid action buttons (Add Schedule / Add Template
            / Show Old / per-event Edit/Delete) get rounded corners
         6. STS (status) cell tightened so the column reads as
            a single status indicator, not a wide gap
       ============================================================ */

    /* 3. Schedule selector and events area unified — kill the
       hairline divider between them; remove the schedule-block
       top border too so the whole thing is one continuous block. */

    /* REMOVED 2026-05-25: AA-specific schedule thead th / schedule_status / fa-circle
       overrides killed. schedule.css is the single source of truth. */

    /* Voicemail — strip the outer voice_mail_container panel so the
       inner aa-vm-section panels (Greeting / Delivery / Caller
       Options / Security) are the only bordered cards inside the
       Enable Voicemail outer card. Same pattern as Pre-alert
       (multiple aa-prealert-section panels). */

    /* Each vm subsection becomes a full-width bordered panel
       stacked vertically (NOT side by side). */

    /* The voice_mail_container wrapper itself must stack its
       children vertically AND span the full outer card width.
       Strip the legacy padded_section_widths inset that left
       a 23/175 px gap on each side. */

    /* `.hidden` must beat Bootstrap's `.d-flex { display: flex !important }`.
       Force the rule with high specificity for any button/element in
       the Advanced cards. */
    body.v4-body .v4-content #auto_attendant_app #advanced .hidden,
    body.v4-body .v4-content #auto_attendant_app #advanced *.hidden {
        display: none !important;
    }

    /* Internal vm-setting-row rhythm inside a subsection. */

    /* Promote .aa-vm-section title labels to 17px bold heading
       (JS adds .v4-section-heading via decorateSubSections). */

    /* Round the Schedule dropdown to match the soft-rounded
       feature card style (default 3px is too sharp now). */

    /* REMOVED: .schedule_container .error override. schedule.css handles error visibility. */

    /* REMOVED: .schedule_container table thead border override (#dadada). schedule.css is source of truth. */

    .main_buttons {
        background: none;
        border: none;
        color: #112A4B;
        width: unset !important;
        padding: 4px 20px !important;
    }

    .main_buttons:hover {
        color: #F99A39;
        background: none;
    }

    .submenu_container {
        margin-left: 50px !important;
        padding-left: 0 !important;
        margin-bottom: 0 !important;
    }

    .submenu-container td {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    .time_schedule_sub_container,
    .holiday_menu_container,
    .after_menu_container,
    .business_menu_container {
        margin-left: 50px !important;
    }

    #header_app .header {
        z-index: 0;
    }

    .header-toggler-opened,
    .header-toggler-opened label,
    .header-toggler-opened,
    .header-toggler-closed label {
        cursor: pointer;
    }

    .form-group .header-toggler-opened,
    .form-group .header-toggler-closed {
        margin-left: 0 !important;
    }

    .form-group .header-toggler-opened img,
    .form-group .header-toggler-closed img {
        margin-left: 5px !important;
    }

    #call_forwarding_selective .time_schedule_sub_container {
        margin-left: 0 !important;
    }

    /* REMOVED: .schedule_container .error override. schedule.css handles error visibility. */

    #holiday .schedule_template_dropdown {
        display: none !important;
    }

    #business_menu_table td,
    #business_menu_table th {
        white-space: nowrap;

    }

    .setting_section.form_container {
        position: relative;

    }

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

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

    .alternate_number_arrow {
        display: block !important;
    }

    #submenu .notify_section {
        padding-left: 45px;
    }

    .bordered-table-head thead tr {
        background-color: #f0f0f0;
    }

    .bordered-table-head tbody:before {
        content: "@";
        display: block;
        line-height: 10px;
        text-indent: -99999px;
    }

    .bordered-table-head thead th {
        padding-bottom: 3px !important
    }

    .dropdown-header {
        padding: 6px 10px 0px 10px;
        font-weight: bold;
        color: black;
    }

    .subsection.number_wrapper label {
        line-height: 1px;
        ;
    }

    .subsection_line {
        border-left: none !important;
        ;
    }

    .call_forwarding_selective_time_schedule_selector {
        margin-right: unset !important;
    }

    .remove_call_forwarding_selective_number {
        border: 1px solid #e1e1e1;
        padding: 1px 11px;
    }

    .btn.edit_event_recur,
    .btn.time_schedule_remove {
        margin-top: 0;
        border: 1px solid #c9c9c9;
        line-height: 1px;
        padding: 2px 3px !important;
    }

    .subsection.number_wrapper {
        max-width: unset !important;
    }

    .schedule .status_circle {
        padding-top: unset !important;
        top: unset !important;
    }

    .c_no_border {
        border: 0px !important;
    }

    .c_bottom_border {
        border-bottom: 1px solid rgb(232, 233, 235) !important
    }

    .btn.btn-save.add_button.add_row,
    .btn.dropdown-toggle.btn-save.add_button {
        padding-top: 0 !important;
        padding-bottom: 0 !important;

    }

    .section_item:not(.last):before,
    .section_item:not(.last):after {
        display: none !important;
    }

    .call_forwarding_selective_content_section .subsection:nth-last-child(2) {
        border-bottom: none !important;
    }

    .schedule_delete button {
        margin-top: -6px;
    }

    /* REMOVED: .schedule_container table thead border override (#dadada). schedule.css is source of truth. */

/* Final measured rail correction for the AA unified shells.
   The live page was still being driven by inline-shell rules that
   right-aligned the first menu column and offset the chip to the right.
   Keep the shell system, but line up subsection titles and key chips with
   the Greeting / Schedule label rail. */

#business .aa-unified-shell .business_menu_container thead th:first-child,
#after-hours .aa-unified-shell .after_menu_container thead th:first-child,
#holiday .aa-unified-shell .holiday_menu_container thead th:first-child,
#business .aa-unified-shell .business_menu_container tbody td:first-child,
#after-hours .aa-unified-shell .after_menu_container tbody td:first-child,
#holiday .aa-unified-shell .holiday_menu_container tbody td:first-child {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 8px !important;
}

#business .aa-unified-shell .business_menu_container thead th:first-child > *,
#after-hours .aa-unified-shell .after_menu_container thead th:first-child > *,
#holiday .aa-unified-shell .holiday_menu_container thead th:first-child > * {
    justify-content: flex-start !important;
    transform: none !important;
}

#business .aa-unified-shell .business_menu_container tbody td:first-child .aa-key-chip,
#after-hours .aa-unified-shell .after_menu_container tbody td:first-child .aa-key-chip,
#holiday .aa-unified-shell .holiday_menu_container tbody td:first-child .aa-key-chip {
    margin-left: 0 !important;
    transform: none !important;
}

/* Extend the same measured rail system to Submenus and Advanced.
   Submenu headers were still 38px too far left and the key chips were
   still using the old right-aligned first-column rules. Advanced was also
   pushing the schedule body another 38px inward after the card padding. */

/* Final header-divider refinement: the separator belongs to the section
   title itself, not to the content block underneath it. Keep the measured
   left rail, but pull the underline up so it sits directly under Greeting /
   Menu / Schedule across the shared AA layouts. */

/* Final subsection breathing space: match the visual rhythm of Menu across
   Greeting and Schedule too. Menu already reads well at an effective 12px,
   so bring Greeting and Schedule up to that same body spacing. */

/* After Hours schedule collapses its header gap differently than Holiday /
   Advanced. Hold the same visual spacing with inner padding so the selector
   row starts on the same rhythm as Greeting and Menu. */
#after-hours .aa-unified-shell .aa-schedule-content {
    margin-top: 0 !important;
    padding-top: 12px !important;
}

/* Shared detail-page polish for Auto Attendant profile rows plus the Hunt Group
   and Call Center shells. Keep the upgraded v3 aesthetic, but normalize row
   height, label centering, and nested-card spacing so these pages read like
   one deliberate system. */
#auto_attendant_app,
#hunt_group_app,
#call_center_app,
#agent_app {
    --detail-shell-row-min-height: 54px;
    --detail-shell-row-padding-x: 18px;
    --detail-shell-content-indent: 42px;
    --detail-shell-content-max-width: 920px;
    --detail-shell-soft-border: rgba(14, 39, 73, 0.08);
}

#auto_attendant_app .setting_section.form_container,
#hunt_group_app .setting_section.form_container,
#call_center_app .setting_section.form_container,
#agent_app .setting_section.form_container {
    overflow: hidden;
}

#auto_attendant_app .setting_section.form_container:has(.dropdown-menu.show),
#hunt_group_app .setting_section.form_container:has(.dropdown-menu.show),
#call_center_app .setting_section.form_container:has(.dropdown-menu.show),
#agent_app .setting_section.form_container:has(.dropdown-menu.show) {
    overflow: visible;
}

#auto_attendant_app .setting_box > .extension > h5 > .row,
#agent_app .setting_box > .extension > h5 > .row {
    min-height: 46px;
    align-items: center;
}

#auto_attendant_app .setting_box > .extension > h5 > .row > .col,
#agent_app .setting_box > .extension > h5 > .row > .col {
    gap: 14px;
}

#auto_attendant_app .section_item,
#agent_app .section_item {
    min-height: var(--detail-shell-row-min-height);
    padding-left: var(--detail-shell-row-padding-x) !important;
    padding-right: var(--detail-shell-row-padding-x) !important;
    align-items: center;
}

#auto_attendant_app .section_item > [class*='col-'],
#agent_app .section_item > [class*='col-'] {
    min-height: inherit;
    display: flex;
    align-items: center;
}

#agent_app .section_item .form-control,
#agent_app .section_item select.form-control {
    min-height: 34px;
    border-radius: 3px;
    padding-left: 12px;
    padding-right: 12px;
}

#hunt_group_app .alternative_number_table,
#call_center_app .alternative_number_table {
    width: calc(100% - var(--detail-shell-content-indent)) !important;
    max-width: var(--detail-shell-content-max-width) !important;
    margin-left: var(--detail-shell-content-indent) !important;
}

#hunt_group_app .alternative_number_table,
#call_center_app .alternative_number_table {
    margin-top: 10px !important;
    padding: 14px 18px 16px !important;
    border-radius: 3px !important;
    border: 1px solid var(--detail-shell-soft-border);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98),
        rgba(250, 252, 255, 0.96)
    );
    box-shadow: 0 12px 24px -26px rgba(14, 39, 73, 0.5);
}

/* Strip the legacy header fill from the shared schedule/event tables so the
   column headers read like the modern menu chrome instead of a separate band. */
#auto_attendant_app .bordered-table-head thead tr,
#hunt_group_app .bordered-table-head thead tr,
#call_center_app .bordered-table-head thead tr,
#agent_app .bordered-table-head thead tr {
    background: transparent !important;
}

#auto_attendant_app .bordered-table-head thead th,
#hunt_group_app .bordered-table-head thead th,
#call_center_app .bordered-table-head thead th,
#agent_app .bordered-table-head thead th {
    background: transparent !important;
    border-bottom: 1px solid rgba(228, 234, 242, 0.92) !important;
}

/* Schedule pixel column widths and control sizing DELETED — centralized in schedule.css (Phase 3) */
/* ============================================================
   Pass 36ae - Auto Attendant configuration UX foundation.

   The section framework is now good; this final layer makes the
   experience consistent at the places users feel most: the sticky
   save area, Profile rows, Advanced feature cards, greeting rows,
   and the small action-button family. Keep this scoped to the AA
   app because this file loads after the shared v4 design CSS.
   ============================================================ */
#auto_attendant_app {
    --aa-config-card-border: #DDE7F1;
    --aa-config-card-radius: 8px;
    --aa-config-row-border: rgba(228, 234, 242, 0.92);
    --aa-config-row-gap: 16px;
    padding-bottom: 132px !important;
}

#auto_attendant_app .setting_section.form_container {
    overflow: visible !important;
}

/* Profile - the three top-level settings should read as one calm form. */
body.v4-body .v4-content #auto_attendant_app #profile .aa-unified-shell--profile,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-unified-shell--profile {
    border-color: var(--aa-config-card-border) !important;
    border-radius: var(--aa-config-card-radius) !important;
    padding: 20px 24px 22px !important;
}


body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row > [class*="col-"],
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row > [class*="col-"] {
    display: flex !important;
    align-items: center !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
    padding: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row > [class*="col-"]:first-of-type,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row > [class*="col-"]:first-of-type {
    grid-column: 1;
    justify-content: flex-start !important;
}


body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section input.form-control,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section input.form-control {
    width: 100% !important;
    max-width: 380px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 10px !important;
}


body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row,
body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row {
    width: 100% !important;
    max-width: 720px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 170px minmax(260px, 1fr);
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row + .alternative_number_wrapper,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row + .alternative_number_wrapper {
    margin-top: 12px !important;
}


body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .slim_row,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .slim_row,
body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternativenumber.aa-number-row,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternativenumber.aa-number-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
}


body.v4-body .v4-content #auto_attendant_app #profile .add_alternative_number,
body.v4-body .v4-content #auto_attendant_app #profile-section .add_alternative_number {
    height: 38px !important;
    margin-top: 14px !important;
    padding: 0 16px !important;
    border: 1px solid var(--v4-border) !important;
    border-radius: 999px !important;
    background: var(--v4-surface) !important;
    color: var(--v4-text) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.v4-body .v4-content #auto_attendant_app #profile .remove_alternative_number,
body.v4-body .v4-content #auto_attendant_app #profile-section .remove_alternative_number {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid var(--v4-border) !important;
    background: var(--v4-surface) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Greeting rows and inner actions - one modern control rhythm everywhere. */


body.v4-body .v4-content #auto_attendant_app .schedule_container .add_schedule {
    height: 38px !important;
    min-height: 38px !important;
}

@media (max-width: 900px) {
    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number {
        max-width: 100% !important;
    }
}

@media (max-width: 640px) {
    #auto_attendant_app {
        padding-bottom: 156px !important;
    }


    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row > [class*="col-"],
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row > [class*="col-"] {
        grid-column: 1 !important;
        justify-content: flex-start !important;
    }

    }

/* ============================================================
   Pass 36af - full-page configuration polish.

   This pass finishes the opened-state experience from top to
   bottom: every greeting area becomes a compact recorder panel,
   Advanced internals use the same field rails, and the single
   Save / Cancel / Delete action dock stops covering long sections.
   ============================================================ */
#auto_attendant_app {
    --aa-recorder-border: rgba(213, 224, 237, 0.98);
    --aa-recorder-bg: #FBFDFF;
    --aa-field-label-width: 168px;
    padding-bottom: 56px !important;
}

/* The forward-always body, its field and the selective rule's trash take
   the shared canons on the auto attendant too (2026-09-19). */

/* Voicemail opened state - same subsection card and row system. */


/* Shared compact setting rows in open advanced cards. */


@media (max-width: 760px) {

    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section,
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section {
        padding: 18px !important;
    }

    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number {
        padding: 16px !important;
    }

    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternativenumber.aa-number-row,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternativenumber.aa-number-row {
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 8px !important;
    }


}

/* ============================================================
   Pass 36ah - recorder module simplification.

   Keep the existing greeting behavior, but make the visible module
   read as one recorder: Recording, Listen, Create. The fake decorative
   play button is removed so the real Play control carries the action.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app {
    --aa-recorder-row-label: var(--greeting-label-width);
    --aa-recorder-soft: #F8FBFF;
    --aa-recorder-line: rgba(203, 215, 229, 0.78);
    --aa-recorder-button-border: rgba(15, 42, 78, 0.14);
}


/* Greeting button base styling (padding, radius, bg, font) moved to v4_2026.css.
   edit_greeting_name / add_new_greeting / cancel_new_greeting retain their own rules. */


/* Greeting button styling (padding, radius, bg, font) moved to v4_2026.css */


/* voice_select + text_to_convert sizing → centralized in v4_2026.css */

@media (max-width: 760px) {
    body.v4-body .v4-content #auto_attendant_app {
        --aa-recorder-row-label: 100%;
    }


    /* Greeting button responsive padding moved to v4_2026.css */


}

/* ============================================================
   Pass 36aj - final recorder cleanup.

   This block intentionally lives at the end so it wins over the older
   recorder pass: no tinted nested panel, no colored-button language,
   no full border around the TTS sub-editor, and no hidden TTS buttons
   leaking into the action row.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app {
    --aa-recorder-soft: #FFFFFF;
    --aa-recorder-line: rgba(214, 225, 237, 0.86);
    --aa-recorder-button-border: rgba(105, 130, 158, 0.28);
}


/* Greeting button sizing (padding, radius, bg, color, font) moved to v4_2026.css */


/* voice_select, preview play/pause, text_to_convert → centralized in v4_2026.css */


/* ============================================================
   Pass 36ak - recorder quieting and stable controls.

   Remove the internal divider lines and give every state in a
   button family the same footprint: play/loading/stop, record/stop,
   preview/loading/stop, and apply/uploading.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app {
    --aa-recorder-line: rgba(214, 225, 237, 0.58);
    --aa-recorder-button-border: rgba(104, 126, 153, 0.26);
    --aa-recorder-play-width: 96px;
    --aa-recorder-download-width: 122px;
    --aa-recorder-text-width: 148px;
    --aa-recorder-create-width: 118px;
    --aa-recorder-tts-ai-width: 66px;
    --aa-recorder-tts-state-width: 108px;
    --aa-recorder-tts-commit-width: 116px;
    --aa-recorder-tts-cancel-width: 96px;
}


/* text_to_convert min-height + resize → centralized in v4_2026.css */


/* ============================================================
   Pass 36al - profile surface alignment.

   Match Profile to the newer opened-section rhythm: one inner
   content surface, quiet rows, and no framed Number sub-panel.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app #profile .aa-unified-shell--profile,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-unified-shell--profile {
    width: 100% !important;
    max-width: none !important;
    margin: 14px 0 0 0 !important;
    padding: 22px 28px 24px !important;
    border: 1px solid var(--aa-config-card-border) !important;
    border-radius: var(--aa-config-card-radius) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}


body.v4-body .v4-content #auto_attendant_app #profile #alternative_number,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number {
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}


@media (max-width: 760px) {
    body.v4-body .v4-content #auto_attendant_app #profile .aa-unified-shell--profile,
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-unified-shell--profile {
        padding: 18px !important;
    }

    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternativenumber.aa-number-row,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternativenumber.aa-number-row {
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternativenumber.aa-number-row,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternativenumber.aa-number-row {
        grid-template-columns: minmax(0, 1fr) 38px !important;
        align-items: end !important;
        column-gap: 10px !important;
    }
}

/* ============================================================
   Pass 36at - squared recorder grid and quiet section rhythm.

   The recorder is now a measured 3-column control grid instead
   of a flexible pill row. This keeps Recording, Listen, and Create
   aligned across every greeting instance while preserving the
   existing hidden-state behavior.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app {
    --aa-recorder-row-label: var(--greeting-label-width);
    --aa-recorder-grid-gap: var(--greeting-grid-gap);
    --aa-recorder-button-width: var(--greeting-button-width);
    --aa-recorder-edit-width: var(--greeting-edit-width);
    --aa-recorder-control-width: calc((var(--aa-recorder-button-width) * 3) + (var(--aa-recorder-grid-gap) * 2));
    --aa-recorder-select-width: calc(var(--aa-recorder-control-width) - var(--aa-recorder-edit-width) - var(--aa-recorder-grid-gap));
    --aa-recorder-radius: var(--greeting-button-radius);
    --aa-recorder-button-border: var(--greeting-border-color);
}


/* Greeting button sizing + icon styling moved to v4_2026.css
   (canonical greeting .tts-btn rule). Do NOT re-add here. */


/* voice_select, preview play/pause, text_to_convert sizing → centralized in v4_2026.css */


body.v4-body .v4-content #auto_attendant_app #business .schedule_container thead th:nth-child(5),
body.v4-body .v4-content #auto_attendant_app #business .schedule_container tbody td:nth-child(5),
body.v4-body .v4-content #auto_attendant_app #after-hours .schedule_container thead th:nth-child(5),
body.v4-body .v4-content #auto_attendant_app #after-hours .schedule_container tbody td:nth-child(5),
body.v4-body .v4-content #auto_attendant_app #holiday .schedule_container thead th:nth-child(5),
body.v4-body .v4-content #auto_attendant_app #holiday .schedule_container tbody td:nth-child(5),
body.v4-body .v4-content #auto_attendant_app #advanced .schedule_container thead th:nth-child(5),
body.v4-body .v4-content #auto_attendant_app #advanced .schedule_container tbody td:nth-child(5) {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: center !important;
    vertical-align: middle !important;
    color: #74869C !important;
}

/* (margin removed - inner is flat; card spacing lives on .aa-call-feature) */


@media (max-width: 760px) {
    body.v4-body .v4-content #auto_attendant_app {
        --aa-recorder-row-label: 100%;
    }


}

/* ============================================================
   Pass 36au - recorder rhythm, submenu finish, and wider hit areas.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-recorder-button-border: #B7C6D8;
    --aa-section-edge-border: rgba(219, 228, 239, 0.82);
    --aa-section-edge-shadow: none;
}


/* (margin removed - inner is flat; card spacing lives on .aa-call-feature) */


body.v4-body .v4-content #auto_attendant_app #submenu .submenu-container {
    width: auto !important;
    max-width: none !important;
    margin: 8px 20px !important;
    padding: 0 !important;
    border: 1px solid var(--aa-section-edge-border) !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: var(--aa-section-edge-shadow) !important;
    overflow: hidden;
}

body.v4-body .v4-content #auto_attendant_app #submenu .submenu-container > .row.hidden,
body.v4-body .v4-content #auto_attendant_app #submenu .submenu-container .sb-np.hidden,
body.v4-body .v4-content #auto_attendant_app #submenu .submenu-container .aa-submenu-body.hidden {
    display: none !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header {
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    cursor: pointer;
    border-bottom: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .submenu-container:has(.aa-submenu-body:not(.hidden)) .aa-submenu-header {
    border-bottom: 1px solid rgba(223, 231, 240, 0.72) !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header .submenu-toggler {
    pointer-events: auto !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    color: #142B49 !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    padding-left: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-body .notify_section > .form-group.borderless:empty {
    display: none !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header:not(.v4-submenu-decorated) .submenu-toggler img {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: 0 !important;
    transition: transform 160ms ease;
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header:not(.v4-submenu-decorated) .submenu-toggler-opened img {
    transform: rotate(90deg);
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header .edit_submenu_name,
body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header .delete_submenu {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border: 1px solid var(--aa-recorder-button-border) !important;
    border-radius: var(--aa-recorder-radius) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-body {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    border-top: 0 !important;
}


body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-section + .aa-submenu-section {
    margin-top: 12px !important;
}


/* Add Submenu is a ghost action button like Add Schedule / Add Template
   and takes the 34px pill from v4_design.css; it was pinned at 40px / 760
   here from 2026-07-28 to 2026-09-15, the one add button on the page taller
   than the rest. Only the rename form's Save / Cancel keep this dress. */
body.v4-body .v4-content #auto_attendant_app #submenu .save_submenu,
body.v4-body .v4-content #auto_attendant_app #submenu .submenu_cancel_button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid var(--aa-recorder-button-border) !important;
    border-radius: var(--aa-recorder-radius) !important;
    background: #FFFFFF !important;
    color: #142B49 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 760 !important;
}

@media (max-width: 760px) {
    body.v4-body .v4-content #auto_attendant_app #submenu .submenu-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }


}

/* ============================================================
   Pass 36av - quieter surfaces and submenu menu parity.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-recorder-edit-width: var(--greeting-edit-width);
    --aa-section-edge-shadow: none;
}

body.v4-body .v4-content #auto_attendant_app > .setting_section.form_container::before,
body.v4-body .v4-content #auto_attendant_app > #advanced::before {
    content: none !important;
    display: none !important;
}


@media (max-width: 760px) {
    body.v4-body .v4-content #auto_attendant_app {
        --aa-recorder-edit-width: var(--greeting-edit-width);
    }


}

/* ============================================================
   Pass 36ay - subtle subsection frame depth only.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-l3-card-shadow: 0 0 10px rgba(16, 39, 68, 0.08);
}


/* Duplicate CFS grid rule removed (was 170px / 360px). The canonical grid lives in the
   #call_forwarding_selective .slim_row rule below (var-based: --aa-cfs-label-width / --aa-cfs-control-width). */


/* ============================================================
   Pass 36az - final alignment and quiet icon pass.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-control-icon-neutral: #52657D;
    --aa-control-icon-soft: #F8FAFD;
    --aa-advanced-label-width: 170px;
    --aa-advanced-control-width: 360px;
}

body.v4-body .v4-content #auto_attendant_app .toggle_header .col > div:first-child::before,
body.v4-body #v4-app .v4-content #auto_attendant_app .toggle_header .col > div:first-child::before {
    background-color: var(--aa-control-icon-soft) !important;
    border-color: #DCE3EC !important;
}

body.v4-body .v4-content #auto_attendant_app #profile-section .toggle_header .col > div:first-child::before,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .toggle_header .col > div:first-child::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352657D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

body.v4-body .v4-content #auto_attendant_app #business .toggle_header .col > div:first-child::before,
body.v4-body #v4-app .v4-content #auto_attendant_app #business .toggle_header .col > div:first-child::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352657D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important;
}

body.v4-body .v4-content #auto_attendant_app #after-hours .toggle_header .col > div:first-child::before,
body.v4-body #v4-app .v4-content #auto_attendant_app #after-hours .toggle_header .col > div:first-child::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352657D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E") !important;
}

body.v4-body .v4-content #auto_attendant_app #holiday .toggle_header .col > div:first-child::before,
body.v4-body #v4-app .v4-content #auto_attendant_app #holiday .toggle_header .col > div:first-child::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352657D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .toggle_header .col > div:first-child::before,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .toggle_header .col > div:first-child::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352657D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") !important;
}

body.v4-body .v4-content #auto_attendant_app #advanced .toggle_header .col > div:first-child::before,
body.v4-body #v4-app .v4-content #auto_attendant_app #advanced .toggle_header .col > div:first-child::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352657D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") !important;
}

body.v4-body .v4-content #auto_attendant_app .add_icon,
body.v4-body .v4-content #auto_attendant_app .add_button .fa-plus,
body.v4-body #v4-app .v4-content #auto_attendant_app .add_icon,
body.v4-body #v4-app .v4-content #auto_attendant_app .add_button .fa-plus {
    color: var(--aa-control-icon-neutral) !important;
}


/* ============================================================
   Pass 36ba - profile number rail and inline greeting edits.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-profile-control-width: 380px;
    --aa-profile-row-gap: 12px;
    --aa-recorder-apply-width: 92px;
    --aa-recorder-cancel-width: 84px;
}

body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, var(--aa-profile-control-width)) !important;
    column-gap: 24px !important;
    row-gap: var(--aa-profile-row-gap) !important;
    align-items: center !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
}


body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row > [class*="col-"]:nth-child(2),
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row > [class*="col-"]:nth-child(2),
body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row > [class*="col-"]:nth-child(2),
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row > [class*="col-"]:nth-child(2) {
    grid-column: 2 !important;
    justify-self: stretch !important;
}

body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section input.form-control,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section input.form-control,
body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section select.form-control,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section select.form-control,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-section input.form-control,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-section input.form-control,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-section select.form-control,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-section select.form-control {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}


body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row > .col-4,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row > .col-4,
body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row > .col-4,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row > .col-4,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row > .col-4,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row > .col-4,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row > .col-4,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row > .col-4 {
    grid-column: 1 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row > .col-8,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row > .col-8,
body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row > .col-8,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row > .col-8,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row > .col-8,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row > .col-8,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row > .col-8,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row > .col-8 {
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}


body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternativenumber.aa-number-row,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternativenumber.aa-number-row,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile #alternative_number .alternativenumber.aa-number-row,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section #alternative_number .alternativenumber.aa-number-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 0 !important;
    margin: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .remove_alternative_number,
body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .remove_alternative_number,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile #alternative_number .remove_alternative_number,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section #alternative_number .remove_alternative_number {
    display: none !important;
}


@media (max-width: 760px) {
    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 8px !important;
    }

    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row > [class*="col-"]:nth-child(2),
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row > [class*="col-"]:nth-child(2),
    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row > .col-8,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row > .col-8,
    body.v4-body .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row > .col-8,
    body.v4-body .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row > .col-8,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row > [class*="col-"]:nth-child(2),
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row > [class*="col-"]:nth-child(2),
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_main.form-group.row > .col-8,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_main.form-group.row > .col-8,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile #alternative_number .alternative_number_select.form-group.row > .col-8,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section #alternative_number .alternative_number_select.form-group.row > .col-8 {
        grid-column: 1 !important;
    }

    body.v4-body .v4-content #auto_attendant_app #profile .add_alternative_number,
    body.v4-body .v4-content #auto_attendant_app #profile-section .add_alternative_number,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .add_alternative_number,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .add_alternative_number {
        margin-left: 0 !important;
    }
}

/* ============================================================
   Pass 36bb - profile number sub-setting consistency.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-profile-number-card-border: #CBD8E8;
    --aa-profile-number-card-bg: #FAFCFF;
    --aa-profile-number-card-shadow: none;
}

body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row:not(.aa-profile-number-card),
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row:not(.aa-profile-number-card),
body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row:not(.aa-profile-number-card),
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row:not(.aa-profile-number-card) {
    min-height: 54px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}


body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-number-label,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-number-label,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-number-label,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-number-label {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    margin: 0 !important;
    cursor: default !important;
}

body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-number-label img,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-number-label img,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-number-label img,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-number-label img {
    display: none !important;
}


@media (max-width: 760px) {
    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-number-card,
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-number-card,
    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-number-card #alternative_number .alternative_number_main.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-number-card #alternative_number .alternative_number_main.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-number-card #alternative_number .alternative_number_select.form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-number-card #alternative_number .alternative_number_select.form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-number-card,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-number-card,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-number-card #alternative_number .alternative_number_main.form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-number-card #alternative_number .alternative_number_main.form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-number-card #alternative_number .alternative_number_select.form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-number-card #alternative_number .alternative_number_select.form-group.row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-number-card > .col-8,
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-number-card > .col-8,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-number-card > .col-8,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-number-card > .col-8 {
        grid-column: 1 !important;
        justify-self: start !important;
    }
}

/* ============================================================
   Pass 36bc - quiet Profile number grouping.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-profile-number-divider: rgba(203, 216, 232, 0.74);
}


/* ============================================================
   Pass 36bd - Profile subgroups, no-fill variant.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-profile-subgroup-border: #D7E2EE;
    --aa-profile-subgroup-radius: 12px;
}

body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-basic-card,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-basic-card,
body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row.aa-profile-number-card,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row.aa-profile-number-card,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-basic-card,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-basic-card,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-section > .form-group.row.aa-profile-number-card,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-section > .form-group.row.aa-profile-number-card {
    margin: 14px 0 0 0 !important;
    padding: 16px !important;
    border: 1px solid var(--aa-profile-subgroup-border) !important;
    border-radius: var(--aa-profile-subgroup-radius) !important;
    background: transparent !important;
    box-shadow: none !important;
}


body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-number-card:has(#alternative_number.hidden),
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-number-card:has(#alternative_number.hidden),
body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-number-card:has(#alternative_number.hidden),
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-number-card:has(#alternative_number.hidden) {
    row-gap: 0 !important;
}

@media (max-width: 760px) {
    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-basic-card > .form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-basic-card > .form-group.row,
    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-number-card,
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-number-card,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-basic-card > .form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-basic-card > .form-group.row,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-number-card,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-number-card {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-basic-card > .form-group.row > [class*="col-"]:nth-child(2),
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-basic-card > .form-group.row > [class*="col-"]:nth-child(2),
    body.v4-body .v4-content #auto_attendant_app #profile .aa-profile-number-card > .col-8,
    body.v4-body .v4-content #auto_attendant_app #profile-section .aa-profile-number-card > .col-8,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-basic-card > .form-group.row > [class*="col-"]:nth-child(2),
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-basic-card > .form-group.row > [class*="col-"]:nth-child(2),
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile .aa-profile-number-card > .col-8,
    body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-profile-number-card > .col-8 {
        grid-column: 1 !important;
        justify-self: start !important;
    }
}

/* ============================================================
   Pass 36be - advanced selective and submenu parity polish.
   ============================================================ */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-cfs-label-width: 150px;
    --aa-cfs-control-width: 280px;
    --aa-cfs-label-size: 13px;
    --aa-submenu-inner-padding-x: 28px;
}

/* Removed: duplicate CFS content section rule that conflicted with the
   canonical spacing/border at line ~6297. Consolidated there. */


body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-body,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-body {
    padding: 14px 18px 10px !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-section,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px var(--aa-submenu-inner-padding-x) !important;
    border: 1px solid var(--aa-section-edge-border) !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-section + .aa-submenu-section,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-section + .aa-submenu-section {
    margin-top: 14px !important;
}


body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header .col-sm-1,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-header .col-sm-1 {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: none !important;
    width: 84px !important;
    max-width: none !important;
    padding-left: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px) 84px !important;
    column-gap: 12px !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header .submenu-toggler,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-header .submenu-toggler,
body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header .col-sm-2,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-header .col-sm-2 {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
}


@media (max-width: 760px) {
    body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-section,
    body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header,
    body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-header {
        grid-template-columns: minmax(0, 1fr) 84px !important;
        row-gap: 8px !important;
    }

    body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-header .col-sm-2,
    body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-header .col-sm-2 {
        grid-column: 1 / -1 !important;
    }
}

/* ============================================================
   Pass 36bf - tabbed AA review polish.

   Final pass for the tabbed Auto Attendant detail: make the top
   strip read as navigation, align the fixed action dock to the
   content column, normalize collapsed Advanced rows, and bring the
   standalone Voicemail tab onto the same grid system.
   ============================================================ */
body.v4-body .v4-content .v4-tabbed-detail,
body.v4-body #v4-app .v4-content .v4-tabbed-detail {
    --aa-detail-content-width: 1150px;
    --aa-quiet-control-border: #D7E2EF;
    --aa-quiet-control-text: #314864;
    --aa-quiet-control-icon: #6B7F97;
}

body.v4-body .v4-content .v4-tabbed-detail .aa-tabs,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tabs {
    width: 100% !important;
    max-width: var(--aa-detail-content-width) !important;
    /* Keep the strip compact — 47px = 46px tab + 1px border-bottom.
       Descender clearance comes from the tab itself using
       line-height: normal with align-items: center, NOT from
       making the strip taller. */
    min-height: 47px !important;
    margin: 4px 0 24px !important;
    padding: 0 !important;
    /* Equal gap between tabs (not equal tab widths). Was 2px; tabs were
       forced to min-width: 104px so a short label like "Apps" got a lot
       of empty padding on each side, making the visual gap between it
       and its neighbors much wider than between two long-labeled tabs
       like "Voicemail" and "Phones". Now each tab hugs its text and a
       uniform 36px gap supplies the rhythm. */
    gap: 36px !important;
    align-items: flex-end !important;
    border: 0 !important;
    border-bottom: 1px solid #DCE5EF !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin;
}

body.v4-body .v4-content .v4-tabbed-detail .aa-tab,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab {
    position: relative !important;
    flex: 0 0 auto !important;
    /* min-width 0 + padding 0 horizontally: tab hugs its text. The
       visual rhythm comes from the parent's `gap: 36px`, NOT from
       each tab having the same width. (See container note above.)

       Vertical: a previous pass forced `line-height: 46px` to match
       `height: 46px`, which made the line-box fill the entire tab —
       so the "p" descenders in "Apps" and the "g" in "Settings" got
       painted right onto the strip's bottom border. Fix is on the
       tab itself, not on the strip: use line-height: normal (~1.2 ×
       14px = 17px) and vertically center the text via flex. Text
       sits in the middle of the 46px box with ~14px of slack above
       and below, descenders stay well clear of the border. The tab
       strip stays a compact 47px tall. */
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #4D6078 !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    transform: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail .aa-tab::after,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab::after {
    content: "" !important;
    position: absolute !important;
    /* Was inset 16px from each edge to match the old 0 18px padding.
       Now the tab hugs its text, so inset 0 to keep the active-tab
       underline visible (a "Apps" tab is only ~36px wide — a 16px
       inset on each side would leave 4px of underline). */
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    display: block !important;
    height: 2px !important;
    border-radius: 999px 999px 0 0 !important;
    background: transparent !important;
}

body.v4-body .v4-content .v4-tabbed-detail .aa-tab:hover,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab:hover {
    border: 0 !important;
    background: #F8FAFD !important;
    color: #122849 !important;
    box-shadow: none !important;
    transform: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail .aa-tab.is-active,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab.is-active {
    border: 0 !important;
    background: transparent !important;
    color: #C86516 !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail .aa-tab.is-active::after,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab.is-active::after {
    background: #F89939 !important;
}

/* Floating action group — sized to content, lifted off the bottom,
   centered inside the AA content column. The outer wrapper is just
   a passthrough so clicks elsewhere still hit the content; the
   .aa-sticky-foot-inner pill is what users actually see and click. */


body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status {
    position: static !important;
    grid-column: auto !important;
    justify-self: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 10px 4px 8px !important;
    border-radius: 999px !important;
    background: rgba(248, 153, 57, 0.10) !important;
    color: #B26420 !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
}

body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status .aa-sticky-foot-dot,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status .aa-sticky-foot-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #F89939 !important;
    box-shadow: 0 0 0 4px rgba(248, 153, 57, 0.18) !important;
}

/* Respect the [hidden] attribute on the dirty-state chip — without
   this our display:inline-flex above wins over the user-agent
   [hidden] { display:none } and the chip would always show. */
body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status[hidden],
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status[hidden] {
    display: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions {
    grid-column: auto !important;
    justify-self: auto !important;
    margin: 0 !important;
}

/* Reserve room at the bottom of every tab panel so the floating pill
   doesn't sit on top of the last form row when the user scrolls to
   the end. Pill height (~52px) + margin = ~84px of breathing room. */
/* The AI agent page carries its panels on the tabbed-detail element itself
   rather than inside an #..._app wrapper, so it needs its own selector to
   reach the same rule. */
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-tab-panel.is-active,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #call_center_app, #hunt_group_app, #agent_app) .aa-tab-panel.is-active,
body.v4-body .v4-content .v4-tabbed-detail.v4-agent-detail > .aa-tab-panel.is-active,
body.v4-body #v4-app .v4-content .v4-tabbed-detail.v4-agent-detail > .aa-tab-panel.is-active {
    padding-bottom: 96px !important;
}

body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions > .col-sm-12,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions > .col-sm-12 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

/* Greeting controls: same footprint, softer text and borders. */


@media (max-width: 1024px) {
    body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot {
        left: 0 !important;
        width: 100vw !important;
    }
}

@media (max-width: 760px) {
    body.v4-body .v4-content .v4-tabbed-detail .aa-tab,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab {
        min-width: auto !important;
        padding: 0 14px !important;
    }

    body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-inner,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-inner {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 8px !important;
    }

    body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status,
    body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions {
        grid-column: 1 !important;
        justify-self: center !important;
    }


}

/* Pass 36bg - Voicemail greeting stack and final control tone. */


/* Pass 36bh - stronger final override for recorder buttons. */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    padding-bottom: 128px !important;
}


/* Pass 36bi - include the plain Text to Speech trigger button. */


/* Pass 36bj - match older high-specificity TTS trigger selectors. */


/* Pass 36bk - measured tab content spacing normalization. */


body.v4-body .v4-content #auto_attendant_app #profile-section .aa-unified-shell--profile,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-unified-shell--profile,
body.v4-body .v4-content #auto_attendant_app #business .aa-unified-shell > .form-group:first-child,
body.v4-body .v4-content #auto_attendant_app #after-hours .aa-unified-shell > .form-group:first-child,
body.v4-body .v4-content #auto_attendant_app #holiday .aa-unified-shell > .form-group:first-child,
body.v4-body #v4-app .v4-content #auto_attendant_app #business .aa-unified-shell > .form-group:first-child,
body.v4-body #v4-app .v4-content #auto_attendant_app #after-hours .aa-unified-shell > .form-group:first-child,
body.v4-body #v4-app .v4-content #auto_attendant_app #holiday .aa-unified-shell > .form-group:first-child {
    margin-top: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .submenu-container,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .submenu-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
}

body.v4-body .v4-content #auto_attendant_app #submenu .submenu-container + .submenu-container,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .submenu-container + .submenu-container {
    margin-top: 12px !important;
}

/* Pass 36bl - flat inner section system and voicemail greeting parity. */
body.v4-body .v4-content .v4-tabbed-detail #auto_attendant_app,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #auto_attendant_app {
    --aa-flat-section-border: #DDE7F1;
    --aa-flat-section-radius: 8px;
    --aa-elegant-control-border: #DCE6F1;
    --aa-elegant-control-text: #314860;
    --aa-elegant-control-icon: #7C8FA4;
}

body.v4-body .v4-content #auto_attendant_app #advanced .advanced_container > h5,
body.v4-body #v4-app .v4-content #auto_attendant_app #advanced .advanced_container > h5 {
    margin: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app #advanced .advanced_container > h5 > .toggle_header,
body.v4-body #v4-app .v4-content #auto_attendant_app #advanced .advanced_container > h5 > .toggle_header {
    width: calc(100% - 40px) !important;
    margin: 0 20px 7px !important;
    padding: 6px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.v4-body .v4-content #auto_attendant_app #advanced .advanced_container > h5 > .toggle_header > .col,
body.v4-body #v4-app .v4-content #auto_attendant_app #advanced .advanced_container > h5 > .toggle_header > .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Greeting button border-radius + font-weight moved to v4_2026.css.
   Only color/border-color remain here for theme layering. */


/* Pass 36bm - flow actions with the active content and simplify menu key tone. */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-menu-key-bg: #FFFFFF;
    --aa-menu-key-border: #DCE6F1;
    --aa-menu-key-text: #4B627D;
    --aa-menu-key-filled-bg: #FAFCFF;
    --aa-menu-key-filled-border: #CBD8E8;
    --aa-menu-key-empty-text: #7A8EA6;
    padding-bottom: 32px !important;
}

body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot {
    position: fixed !important;
    left: 274px !important;
    right: auto !important;
    /* Lifted from 20px → 36px (matches the rule near line 9630). */
    bottom: 36px !important;
    width: calc(100vw - 274px - 86px) !important;
    max-width: 1150px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    z-index: 50 !important;
    text-align: center !important;
}

/* Floating action group (duplicate of the rule near line 9638) — kept
   here too so it wins over any later same-specificity definitions. */
body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-inner,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-inner {
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 10px 18px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--aa-flat-section-border, #DDE7F1) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    column-gap: 0 !important;
    gap: 16px !important;
    pointer-events: auto !important;
}

body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status {
    grid-column: 1 !important;
    justify-self: start !important;
}

body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions {
    grid-column: 2 !important;
    justify-self: center !important;
}

body.v4-body .v4-content .v4-tabbed-detail > .aa-tabs,
body.v4-body #v4-app .v4-content .v4-tabbed-detail > .aa-tabs {
    margin-bottom: 16px !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) .aa-tab-panel,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) .aa-tab-panel {
    margin-top: 0 !important;
}


body.v4-body .v4-content #auto_attendant_app :is(#business, #after-hours, #holiday) tr.v4-menu-configured .aa-key-chip,
body.v4-body #v4-app .v4-content #auto_attendant_app :is(#business, #after-hours, #holiday) tr.v4-menu-configured .aa-key-chip,
body.v4-body .v4-content #auto_attendant_app #submenu tr.v4-menu-configured .menu-key-chip,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu tr.v4-menu-configured .menu-key-chip {
    background: var(--aa-menu-key-filled-bg) !important;
    border-color: var(--aa-menu-key-filled-border) !important;
    color: #30445D !important;
    font-weight: 650 !important;
}

body.v4-body .v4-content #auto_attendant_app :is(#business, #after-hours, #holiday) tr.v4-menu-empty .aa-key-chip,
body.v4-body #v4-app .v4-content #auto_attendant_app :is(#business, #after-hours, #holiday) tr.v4-menu-empty .aa-key-chip,
body.v4-body .v4-content #auto_attendant_app #submenu tr.v4-menu-empty .menu-key-chip,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu tr.v4-menu-empty .menu-key-chip {
    background: #FFFFFF !important;
    border-color: #DDE7F1 !important;
    color: var(--aa-menu-key-empty-text) !important;
}

@media (max-width: 760px) {
    body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot {
        padding-bottom: 24px !important;
    }

    body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-inner,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-inner {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 8px !important;
    }

    body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status,
    body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-status,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions {
        grid-column: 1 !important;
        justify-self: center !important;
    }
}

/* Pass 36bn - remove remaining nested frames and normalize Advanced/Voicemail rails. */


body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-section:not(.aa-submenu-section--menu),
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-section:not(.aa-submenu-section--menu) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.v4-body .v4-content #auto_attendant_app #advanced .advanced_container > h5 > .toggle_header,
body.v4-body #v4-app .v4-content #auto_attendant_app #advanced .advanced_container > h5 > .toggle_header {
    width: 100% !important;
    margin: 0 0 7px !important;
}


/* Pass 36bo / late floating-pill override — keep the Save/Cancel/Delete
   bar fixed near the bottom of the viewport even when legacy markup
   renders the footer outside the tabbed detail wrapper. */
body.v4-body .v4-content #aa_sticky_foot,
body.v4-body #v4-app .v4-content #aa_sticky_foot {
    position: fixed !important;
    left: 274px !important;
    right: auto !important;
    /* Lifted from 20px → 36px (matches the rule near line 9630). */
    bottom: 36px !important;
    width: calc(100vw - 274px - 86px) !important;
    max-width: 1150px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    z-index: 50 !important;
    text-align: center !important;
}

body.v4-body .v4-content #aa_sticky_foot .aa-sticky-foot-inner,
body.v4-body #v4-app .v4-content #aa_sticky_foot .aa-sticky-foot-inner {
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 10px 18px !important;
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    column-gap: 0 !important;
    gap: 16px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--aa-flat-section-border, #DDE7F1) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

body.v4-body .v4-content #aa_sticky_foot .aa-sticky-foot-status,
body.v4-body #v4-app .v4-content #aa_sticky_foot .aa-sticky-foot-status {
    grid-column: 1 !important;
    justify-self: start !important;
}

body.v4-body .v4-content #aa_sticky_foot .aa-sticky-foot-actions,
body.v4-body #v4-app .v4-content #aa_sticky_foot .aa-sticky-foot-actions {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}
/* Dev3 shared profile final guard: v4_design injects section descriptions
   after page load, so keep the Profile header stacked and quiet everywhere
   this shared AA stylesheet is loaded. */


body.v4-body .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-section > .form-group.row.aa-profile-number-card,
body.v4-body #v4-app .v4-content :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) :is(#profile, #profile-section) .aa-profile-section > .form-group.row.aa-profile-number-card {
    border-radius: var(--aa-flat-section-radius) !important;
    background: #FFFFFF !important;
}


/* Dev3 pre-alert final guard: the outer Pre-alert card is the only frame. */


/* Dev3 shared recorder module: Auto Attendant uses the same selector renderer
   as Extension, Call Center, and Hunt Group. */


/* Dev3 final alignment guard: tabs, content, frames, recorder columns,
   and Pre-alert dividers stay identical across Auto Attendant tabs. */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-flat-section-border: #DDE7F1;
    --aa-elegant-control-border: #DCE6F1;
    --aa-recorder-row-label: var(--greeting-label-width);
    --aa-recorder-grid-gap: var(--greeting-grid-gap);
    --aa-recorder-button-width: var(--greeting-button-width);
    --aa-recorder-edit-width: var(--greeting-edit-width);
    --aa-recorder-action-width: 464px;
    --aa-recorder-control-width: 464px;
    --aa-recorder-select-width: var(--greeting-select-width);
    --shared-recorder-label-width: var(--greeting-label-width);
    --shared-recorder-select-width: var(--greeting-select-width);
    --shared-recorder-edit-width: var(--greeting-edit-width);
    --shared-recorder-gap: var(--greeting-grid-gap);
    --shared-recorder-button-width: var(--greeting-button-width);
    --shared-recorder-action-width: 464px;
    --aa-prealert-header-divider: #E8EEF5;
    --aa-prealert-section-divider: #DDE7F1;
}

body.v4-body .v4-content .v4-tabbed-detail > .aa-tabs,
body.v4-body .v4-content .v4-tabbed-detail > .aa-tab-panel,
body.v4-body #v4-app .v4-content .v4-tabbed-detail > .aa-tabs,
body.v4-body #v4-app .v4-content .v4-tabbed-detail > .aa-tab-panel {
    margin-left: 0 !important;
    margin-right: auto !important;
}

body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-inner,
body.v4-body .v4-content #aa_sticky_foot .aa-sticky-foot-inner,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-inner,
body.v4-body #v4-app .v4-content #aa_sticky_foot .aa-sticky-foot-inner {
    margin-left: 0 !important;
    margin-right: auto !important;
}

body.v4-body .aa-sticky-foot-inner,
body.v4-body .v4-content .aa-sticky-foot-inner,
body.v4-body #v4-app .v4-content .aa-sticky-foot-inner,
body.v4-body #aa_sticky_foot.aa-sticky-foot .aa-sticky-foot-inner,
body.v4-body #v4-app #aa_sticky_foot.aa-sticky-foot .aa-sticky-foot-inner,
body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot.aa-sticky-foot .aa-sticky-foot-inner,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #aa_sticky_foot.aa-sticky-foot .aa-sticky-foot-inner,
body.v4-body .v4-content #aa_sticky_foot.aa-sticky-foot .aa-sticky-foot-inner,
body.v4-body #v4-app .v4-content #aa_sticky_foot.aa-sticky-foot .aa-sticky-foot-inner {
    border: 0 !important;
    box-shadow: 0 0 0 1px #DDE7F1, 0 14px 32px rgba(16, 39, 68, 0.10) !important;
}


/* Greeting button width moved to v4_2026.css.  Do NOT re-add here. */

@media (max-width: 760px) {
    body.v4-body .v4-content .v4-tabbed-detail > .aa-tabs,
    body.v4-body .v4-content .v4-tabbed-detail > .aa-tab-panel,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail > .aa-tabs,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail > .aa-tab-panel {
        margin-left: auto !important;
        margin-right: auto !important;
    }


}

body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) > .aa-tab-panel,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) > .aa-tab-panel {
    margin-left: 0 !important;
    margin-right: auto !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) {
    --shared-recorder-label-width: var(--greeting-label-width);
    --shared-recorder-select-width: var(--greeting-select-width);
    --shared-recorder-edit-width: var(--greeting-edit-width);
    --shared-recorder-gap: var(--greeting-grid-gap);
}


@media (max-width: 760px) {
    body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) > .aa-tab-panel,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #call_center_app, #hunt_group_app, #agent_app) > .aa-tab-panel {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* Dev3 final requested polish: neutral menu keys, submenu frame hierarchy,
   and exact one-pixel profile/section borders. */
body.v4-body .v4-content #auto_attendant_app,
body.v4-body #v4-app .v4-content #auto_attendant_app {
    --aa-flat-section-border: #DDE7F1;
    --aa-menu-key-bg: #FFFFFF;
    --aa-menu-key-border: #DEE5EE;
    --aa-menu-key-text: #3C4858;
    --aa-menu-key-filled-bg: #F4F6F8;
    --aa-menu-key-filled-border: #9AA6B2;
    --aa-menu-key-empty-bg: #FFFFFF;
    --aa-menu-key-empty-border: #E4E9F0;
    --aa-menu-key-empty-text: #A5AFBA;
}


body.v4-body .v4-content #auto_attendant_app :is(#business, #after-hours, #holiday) tr.v4-menu-configured .aa-key-chip,
body.v4-body #v4-app .v4-content #auto_attendant_app :is(#business, #after-hours, #holiday) tr.v4-menu-configured .aa-key-chip,
body.v4-body .v4-content #auto_attendant_app #submenu tr.v4-menu-configured .menu-key-chip,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu tr.v4-menu-configured .menu-key-chip {
    background: var(--aa-menu-key-filled-bg) !important;
    border-color: var(--aa-menu-key-filled-border) !important;
    color: #202A36 !important;
    font-weight: 700 !important;
}

body.v4-body .v4-content #auto_attendant_app :is(#business, #after-hours, #holiday) tr.v4-menu-empty .aa-key-chip,
body.v4-body #v4-app .v4-content #auto_attendant_app :is(#business, #after-hours, #holiday) tr.v4-menu-empty .aa-key-chip,
body.v4-body .v4-content #auto_attendant_app #submenu tr.v4-menu-empty .menu-key-chip,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu tr.v4-menu-empty .menu-key-chip {
    background: var(--aa-menu-key-empty-bg) !important;
    border-color: var(--aa-menu-key-empty-border) !important;
    color: var(--aa-menu-key-empty-text) !important;
    font-weight: 600 !important;
}


body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-section:not(.aa-submenu-section--menu),
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-section:not(.aa-submenu-section--menu) {
    border: 1px solid var(--aa-flat-section-border) !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    padding: 18px 22px !important;
    box-shadow: none !important;
}


body.v4-body .v4-content #auto_attendant_app #submenu .edit_submenu_name,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .edit_submenu_name {
    display: none !important;
}

/* AA adaptive tabs pilot */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab.aa-tab--features,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab.aa-tab--features {
    min-width: 116px !important;
    margin-left: 8px !important;
    color: #6B7F97 !important;
    font-weight: 650 !important;
}

body.v4-body .v4-content .v4-tabbed-detail .aa-tab.aa-tab--features::after,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab.aa-tab--features::after {
    display: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail .aa-tab.aa-tab--features:hover,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab.aa-tab--features:hover {
    color: #122849 !important;
    background: #F8FAFD !important;
}

body.v4-body .v4-content .v4-tabbed-detail .aa-tab.aa-tab--features.is-open,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab.aa-tab--features.is-open {
    color: #122849 !important;
    background: #F8FAFD !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-features-panel,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-features-panel {
    width: 100% !important;
    max-width: var(--aa-detail-content-width, 1150px) !important;
    margin: -10px 0 22px !important;
    padding: 16px 20px !important;
    border: 1px solid var(--aa-flat-section-border, #DDE7F1) !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-features-panel[hidden],
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-features-panel[hidden] {
    display: none !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-feature-group,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-feature-group {
    border-bottom: 1px solid #E8EFF6 !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-feature-group:last-child,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-feature-group:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-feature-group-title,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-feature-group-title {
    color: #6B7F97 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-feature-row,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-feature-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #EDF2F7 !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-feature-row:last-child,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-feature-row:last-child {
    border-bottom: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-feature-copy,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-feature-copy {
    min-width: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-feature-name,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-feature-name {
    color: #001F4A !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-feature-desc,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-feature-desc {
    color: #6B7F97 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 2px !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-feature-switch,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-feature-switch {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* =================================================================
   Frame consistency pass — match the Open/Closed/Holiday pattern
   across Profile, Submenus, and "+ Features".
   ----------------------------------------------------------------
   Open uses: transparent outer setting_section, with each child
   subsection (Greeting, Menu) drawn as its own bordered white card.
   Profile and Submenus had additional bordered wrappers (outer
   #profile-section + .aa-unified-shell--profile, .submenu-container)
   that gave them an extra visual "frame" the other tabs don't have.
   The rules below strip those outer frames and restore borders on
   the child cards so the user sees the same one-frame-per-card
   rhythm everywhere.
   ================================================================= */

/* Profile: drop the outer "main frame" bordering so only the two
   inner cards (Auto Attendant Info, Number) carry borders, matching
   Open's Greeting + Menu pattern. */
body.v4-body .v4-content .v4-tabbed-detail #auto_attendant_app #profile-section,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #auto_attendant_app #profile-section,
body.v4-body .v4-content #auto_attendant_app #profile-section .aa-unified-shell--profile,
body.v4-body #v4-app .v4-content #auto_attendant_app #profile-section .aa-unified-shell--profile {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Submenus: invert the framing — the outer .submenu-container becomes
   a transparent grouping with just the header (name + delete), and
   the Greeting + Menu cards inside take on the standard bordered
   white card look so each submenu reads like Open's two-card layout. */
body.v4-body .v4-content #auto_attendant_app #submenu .submenu-container,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .submenu-container {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/* Notice tab — pre-alert lives here now in its own #advanced-notice
   container. Mirror the card styling that Pre-alert had inside the
   Calls tab (selectors there are scoped to #advanced) so the
   announcement and schedule blocks render as proper cards. */


/* =================================================================
   Hide the per-tab enable toggle in Voicemail and Notice — the
   "+ Features" panel is now the canonical place to enable/disable
   these features. The toggle inputs stay in the DOM (CSS-hidden, not
   removed) so the existing save flow keeps serializing their state.
   ================================================================= */

/* Voicemail tab — hide label/toggle columns inside #voicemail; keep
   .voice_mail_container visible. */


/* Notice tab — hide pre-alert header row, force-show content. */


/* =================================================================
   Notice tab: match Holiday's framing exactly. Holiday wraps the
   "Greeting" + content rows AND the "Menu" + table inside one
   bordered card each (the .notify_section). Pre-alert's markup has
   the border on the INNER card (aa-prealert-{announcement,schedule}
   -card), which puts the section header outside the box and leaves
   the schedule's nested events table with its own visible border.
   Move the border to the outer .aa-prealert-section wrapper, drop it
   from the inner cards and the events table.
   ================================================================= */


/* Subsection header (the "Greeting" / "Schedule" label) — sit it at
   the top of the card the same way Holiday's labels do, with the
   same vertical rhythm. */


/* Strip the inner frame off the events table inside the Schedule
   card. Whatever wrapper the scheduleService renders, neutralise the
   border / shadow / background so it sits directly inside the
   single outer .aa-prealert-section card, no double box. */


/* Separator between multiple pre-alert schedule criteria */
#pre-alert .aa-prealert-section--schedule .aa-schedule-content + .aa-schedule-content {
    border-top: 1px solid #E9ECEF;
    padding-top: 16px;
}

/* =================================================================
   Office Anywhere: layout matching Pre-alert pattern.
   Outer .aa-call-feature wrapper = padding 0; inner #office_anywhere
   gets the 24px 28px padding (same as #pre-alert pattern).
   Number cards are borderless subsections with dotted separators.
   ================================================================= */

/* Office Anywhere uses the SAME canonical card as every other feature: the
   .aa-call-feature wrapper is the card (border/radius/bg/padding from the
   canonical rule), and the inner #office_anywhere is FLAT. No strip on the
   wrapper, no card on the inner - otherwise it inverts the pattern and the
   widths/borders drift from the other cards. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .call_control_details > .aa-call-feature[data-aa-feature-content="office_anywhere"] > #office_anywhere.inner_section {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    box-shadow: none !important;
}

#office_anywhere .aa-oa-layout {
    padding: 0;
}

#office_anywhere .broadworks_anywhere_table {
    /* No display here: .hidden must win when the switch is off (until
       2026-09-20 a display:block !important kept the numbers on the page). */
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

#office_anywhere .number,
#office_anywhere .subsection_line,
#office_anywhere .aa-repeat-card-body,
#office_anywhere .form-group.row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

#office_anywhere .broadworks_anywhere_table::before,
#office_anywhere .broadworks_anywhere_table::after,
#office_anywhere .number::before,
#office_anywhere .number::after,
#office_anywhere .subsection_line::before,
#office_anywhere .subsection_line::after,
#office_anywhere .form-group.row::before,
#office_anywhere .form-group.row::after {
    display: none !important;
    content: none !important;
}

/* ============================================================
   TAB CARRIER: the wrapper a tab panel puts around its cards (#settings,
   #announcements, #advanced, #advanced-notice, #call_control, the auto
   attendant's #business / #after-hours / #holiday / #submenu, the
   voicemail tab, the profile section) and the legacy .setting_section /
   .setting_box / .extension / .form_section chain inside it are a
   transparent carrier on every entity page: no frame, no padding, no
   shadow, so the first card of every tab starts at the same y. The cards
   inside it (.aa-call-feature, the auto attendant's .aa-unified-shell,
   the submenu container, the voicemail shell) are the only boxes. Until
   2026-09-19 the extension's #call_control, the queue pages' #settings
   and #announcements and the auto attendant's #advanced and menu bodies
   each had their own strip, and the queue pages' came from the routing
   card block. The section names stay (#settings is what the dirty
   tracker and the save serializer key off).
   ============================================================ */
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-tab-panel :is(#settings, #announcements, #advanced, #advanced-notice, #call_control, #business, #after-hours, #holiday, #submenu, #voicemail-tab, #profile-section),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-tab-panel :is(#settings, #announcements, #advanced, #advanced-notice, #call_control, #business, #after-hours, #holiday, #submenu, #voicemail-tab, #profile-section) :is(.setting_section.form_container, .setting_box, .extension, .form_section, .advanced_container, .advanced_details, .call_control_details) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ============================================================
   FEATURE CARD HEADER: the main header of every settings card
   (Office Anywhere, Call Forwarding, AI answering, International
   Calling, Calling Line ID Override, Pre-alert, every other one) on
   all four entity pages. ONE rule set, selected by CLASS.

   Until 2026-09-15 these rules were scoped to a hand-written list of
   card ids (in this file, v4_recorder_module.css, v4_design.css and
   schedule.css, four copies with four different values). Every card
   written after the list (AI answering, International Calling,
   Calling Line ID Override) fell through to Bootstrap's raw h3: a
   28px / 500 title, the header a block, the toggle under the words on
   the left. And the two cards the v4_design copy singled out
   (Pre-alert, Office Anywhere) carried a different weight, colour and
   spacing from the other twenty. Never scope this by id again.

   Markup, every card:
     .inner_section#<card>
       .aa-prealert-section-header.v4-feature-header
           [.aa-section-header-with-controls]  controls on the right
           [.aa-section-header--bare]          nothing renders under it
           [.section-collapsed]                body hidden (switchToggle)
         div > h3.aa-prealert-section-title + p.aa-prealert-section-desc
         .aa-section-header-actions > (.btn | .aa-feature-info-btn | label.switch)

   Title 18px / 750 #0F1729, description 13px / 400 #6B7F97 4px under
   it, a hairline under the header with 16px above and 30px below. A
   header with nothing under it (--bare, or collapsed) has no hairline
   and no space under it, so the card closes right under the words.

   THE CARD'S AIR (2026-09-20, his rule: "everything should be equal", the
   Call Forwarding No Answer card is the reference). The first box of every
   card body starts 30px under the hairline and the last line of every body
   ends 29px above the frame's bottom edge. The 30 is THIS header's bottom
   margin and nothing else: a body never carries top margin or top padding
   of its own. Until then the header gave 18 and a hand-written list of
   bodies (forward always, no answer, busy's old wrapper, simultaneous ring,
   departments) added 12 more, so every card written after the list (forward
   busy, AI answering, priority alert, call notify, sequential ring, barge-in)
   sat 12px higher than its neighbours. The 29 is the frame's 20px padding
   and 1px border plus the 8px a body ends with (SETTINGS ROW below).
   #v4-app is in every selector on purpose: style_override.css paints
   every p inside .extension .form_section navy with an id-level
   selector, and a class-only rule lost the description colour to it.
   ============================================================ */
body.v4-body #v4-app .v4-content .aa-prealert-section-header {
    border-bottom: 1px solid var(--aa-ext-prealert-divider, #E4EBF3);
    margin: 0 0 var(--vt-card-body-top, 30px);
    padding: 0 0 16px;
}

body.v4-body #v4-app .v4-content .aa-section-header-with-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.v4-body #v4-app .v4-content .aa-prealert-section-title {
    color: #0F1729;
    font: 750 18px/1.25 "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: 0;
    margin: 0 0 4px;
}

body.v4-body #v4-app .v4-content .aa-prealert-section-desc {
    color: #6B7F97;
    font: 400 13px/1.45 "Plus Jakarta Sans", system-ui, sans-serif;
    margin: 0;
}

/* A card with more to say than one line carries the (i) at the END of its
   description, and the words wait in the .aa-feature-info-panel under the
   header (v4_recorder_module.css). Never in the header actions beside the
   switch: the help sits with the words it explains (his rule, 2026-09-20;
   Call Park, Directed Call Pickup and Barge-in had it beside the toggle). */
body.v4-body #v4-app .v4-content .aa-prealert-section-desc .aa-feature-info-btn {
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin: 0 0 0 4px;
    vertical-align: -5px;
}
body.v4-body #v4-app .v4-content .aa-prealert-section-desc .aa-feature-info-btn svg {
    width: 16px;
    height: 16px;
}

body.v4-body #v4-app .v4-content .aa-section-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* No body under the header: a toggle-only card (--bare, set in the
   template) or a card whose body is hidden (.section-collapsed, kept by
   switchToggle in utils.js / entity_common.js; never :has(+ .hidden),
   which froze Chrome's renderer). No hairline, no space under it. */
body.v4-body #v4-app .v4-content .aa-prealert-section-header.aa-section-header--bare,
body.v4-body #v4-app .v4-content .aa-prealert-section-header.section-collapsed {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ============================================================
   SETTINGS ROW: every label-plus-control row inside a settings card
   (Office Anywhere numbers, Call Forwarding No Answer, AI answering,
   Calling Line ID Override, Call Notify, Missed Call Email, all of
   them). The voicemail Delivery rows are the reference. ONE rule set,
   by CLASS, for the same reason as the header above: until 2026-09-15
   this spec sat in v4_recorder_module.css behind the same id list, was
   restated under #ai_answering, overridden to 14px/700 for the three
   forwarding cards, and missing for Calling Line ID Override, whose
   select fell to the 40px form baseline under a full-width label.
   Markup:
     .aa-oa-settings-area
       .aa-oa-field-row[.first]
         .aa-oa-field-label > label.label
         .aa-oa-field-input > (input|select|textarea).form-control
                              [+ .error_message] [+ a hint]
                              or span.aa-oa-field-text for a read-only value
         .aa-oa-field-control > label.switch | a small control   (optional)
   Grid 240 / 280 / rest, rows aligned to the top so a hint under a field
   never pushes the label or a toggle off the field's centre line (the
   label sits 7px down, a toggle 6px down, on the 34px field).
   Label 13px/600 #1B3557. Field 280 x 34, 7px,
   1px #C6D3E1, 13px/400 #0E2749, white. A toggle in the control cell
   sits over the field column's right edge. The two ids in the selector
   are the app root and the entity page root, not a card list; they are
   what beats the 40px form baseline in v4_forms.css.

   THE ROW RHYTHM (2026-09-20, his rule: the voicemail rows are the good
   ones, copy them everywhere). Every row is ONE 34px line whatever it
   holds (a field, a select, a toggle, a checkbox, a read-only value) and
   consecutive rows stand 5px apart, the voicemail tab's numbers
   (v4_recorder_module.css 14.G), so label to label is 39px on every card
   of every entity page. A row has no padding of its own. Until then a row
   carried 8px above and below, a toggle row was 32px of content, a field
   row 34 and a field row with an empty error line 38, so Office Anywhere
   read Enabled 40 / Phone Number 54 / Answer Confirmation 48 down the same
   card. The area ends with the 8px that, with the frame's 20 + 1, makes
   the 29px under the last line of every card (FEATURE CARD HEADER above).
   The two numbers are tokens in v4_2026.css (--vt-row-line, --vt-row-gap).
   ============================================================ */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-settings-area {
    margin: 0;
    padding: 0 0 var(--vt-card-body-end, 8px);
    max-width: 600px;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-row {
    display: grid !important;
    grid-template-columns: 240px 280px minmax(0, 1fr);
    grid-auto-rows: minmax(var(--vt-row-line, 34px), auto);
    gap: 2px 16px;
    align-items: start;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
}

/* Rows stand 5px apart. The general sibling form, so a row that follows a
   hidden row still keeps its distance from the visible one before it, and
   the first visible row of an area never gets a gap above it. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-row:not(.hidden) ~ .aa-oa-field-row {
    margin-top: var(--vt-row-gap, 5px) !important;
    border-top: 0 !important;
}

/* A row the page hides by state (a policy's rings row, a queue type's bounce
   row, the wait-message rows of the other operating mode) stays hidden under
   the grid rule above. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-row.hidden {
    display: none !important;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-label {
    width: auto;
    margin: 0;
    padding: 7px 0 0;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-label label.label {
    font: 600 13px/20px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #1B3557 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-input {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-input:empty {
    display: none;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-input :is(input, select).form-control {
    width: 100% !important;
    max-width: 280px !important;
    height: 34px !important;
    min-height: 0 !important;
    font: 400 13px/34px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #0E2749 !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    padding: 0 10px !important;
    /* background-COLOR, never the background shorthand: the shorthand resets
       background-image, and with !important behind two ids it wiped the
       dropdown arrow v4_forms.css gives every select. From 2026-09-15 to
       2026-09-20 no select in a settings row (a schedule picker, Number of
       Rings, the AI agent, a policy) showed that it was a dropdown. */
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    transition: border-color 0.15s;
}

/* A select keeps the room its arrow needs (the arrow itself is the ONE
   select chevron, v4_forms.css "Selects, custom chevron"). */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-input select.form-control {
    padding-right: 32px !important;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-input :is(input, select).form-control:focus {
    border-color: var(--v4-brand-orange, #F89939) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(248, 153, 57, 0.12) !important;
}

/* A read-only value in the field column (Calling Line ID Override when
   the account or a department decides the number). */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-input .aa-oa-field-text {
    display: block;
    font: 500 13px/34px "Plus Jakarta Sans", system-ui, sans-serif;
    color: #0E2749;
}

/* An empty .error_message under a field takes no room: v4_forms.css
   "Validation feedback", for every page. */

/* The control cell (a toggle) sits in the field column, right-aligned, so
   it lands over the field below it, like the voicemail Delivery toggles. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-control {
    grid-column: 2;
    justify-self: end;
    margin: 0;
    padding: 6px 0 0;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-control:empty {
    display: none;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-schedule-section {
    border-top: 1px solid var(--aa-ext-prealert-divider, #E4EBF3);
    margin-top: 16px;
    padding-top: 16px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

/* ============================================================
   HEADER ADD BUTTON: the "+ Add number" / "+ Add rule" pill in a card
   header next to the master toggle (Office Anywhere, Simultaneous Ring,
   Sequential Ring, Call Forwarding Selective, the pre-alert "+ Add
   schedule", the auto attendant's "+ Add Submenu") and, as
   .aa-oa-field-button, a button that sits in a settings row (Resend welcome
   email). One 34px pill on every entity page, the words
   in the markup. Until 2026-09-15 the extension
   page dressed these as 38px squares in extension_editable.css with a
   display that also beat .hidden, so a "+" stood next to a switched-off
   Office Anywhere; the selective card had its own 36px "Add Rule" in
   three more places. The agent page's add and action buttons
   (.add_button, the borderless outline buttons) wear it too, by the second
   line (2026-09-24: they carried a copy of it in agent.css).
   Hidden by the class or the attribute, dimmed when disabled. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.add_broadworks_anywhere_number, .simultaneous_ring_add_location, .sequential_ring_add_location, .call_forwarding_selective_add_number, .aa-prealert-add-schedule, .aa-oa-field-button, .add_submenu),
body.v4-body #v4-app .v4-content #agent_app :is(.btn.add_button, button.add_button, .btn.btn-outline-primary.borderless) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    color: #1B3557 !important;
    font: 600 13px/1 "Plus Jakarta Sans", system-ui, sans-serif !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.add_broadworks_anywhere_number, .simultaneous_ring_add_location, .sequential_ring_add_location, .call_forwarding_selective_add_number, .aa-prealert-add-schedule, .aa-oa-field-button, .add_submenu):hover,
body.v4-body #v4-app .v4-content #agent_app :is(.btn.add_button, button.add_button, .btn.btn-outline-primary.borderless):hover {
    background: #F8FAFD !important;
    border-color: #AFC3D9 !important;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.add_broadworks_anywhere_number, .simultaneous_ring_add_location, .sequential_ring_add_location, .call_forwarding_selective_add_number, .aa-prealert-add-schedule, .aa-oa-field-button, .add_submenu):is(.hidden, [hidden]),
body.v4-body #v4-app .v4-content #agent_app :is(.btn.add_button, button.add_button, .btn.btn-outline-primary.borderless):is(.hidden, [hidden]) {
    display: none !important;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.add_broadworks_anywhere_number, .simultaneous_ring_add_location, .sequential_ring_add_location, .call_forwarding_selective_add_number, .aa-prealert-add-schedule, .aa-oa-field-button, .add_submenu):disabled,
body.v4-body #v4-app .v4-content #agent_app :is(.btn.add_button, button.add_button, .btn.btn-outline-primary.borderless):disabled {
    opacity: 0.55 !important;
    cursor: default !important;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.add_broadworks_anywhere_number, .simultaneous_ring_add_location, .sequential_ring_add_location, .call_forwarding_selective_add_number, .aa-prealert-add-schedule, .aa-oa-field-button, .add_submenu) :is(i, .fa, .fa-plus) {
    color: var(--v4-brand, #F89939) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
    border: 0 !important;
}

/* ============================================================
   REPEAT CARD DELETE: the trash button on a repeated sub-card (an Office
   Anywhere number, a Simultaneous or Sequential Ring number, a Selective
   forwarding rule), in the sub-card header's first line beside the title.
   One 34px icon button, like the table icon buttons on the same page.
   Until 2026-09-15 seven copies sized it 28, 32, 34 and 36px and two of
   them nailed it to the card corner with position:absolute. The html
   prefix and the two ids are what beat the old copies' specificity.
   The agent page's x buttons (every list's remove, a question's delete)
   wear it by the second line (2026-09-24: a copy in agent.css had them
   without the red wash on hover). */
html body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card-delete, .aa-number-delete-button),
html body.v4-body #v4-app .v4-content #agent_app :is(.agent-editor-minor--danger, .agent-dir-remove) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    color: #8B95A5 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transition: color 0.15s, border-color 0.15s, background 0.15s !important;
}
html body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card-delete, .aa-number-delete-button):hover,
html body.v4-body #v4-app .v4-content #agent_app :is(.agent-editor-minor--danger, .agent-dir-remove):hover {
    color: #D9534F !important;
    border-color: #D9534F !important;
    background: #FEF2F2 !important;
}
html body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card-delete, .aa-number-delete-button) svg,
html body.v4-body #v4-app .v4-content #agent_app :is(.agent-editor-minor--danger, .agent-dir-remove) svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
}
html body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card-delete, .aa-number-delete-button):is(.hidden, [hidden]),
html body.v4-body #v4-app .v4-content #agent_app :is(.agent-editor-minor--danger, .agent-dir-remove):is(.hidden, [hidden]) {
    display: none !important;
}
html body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card-delete-wrap, .aa-office-anywhere-delete-wrap, .aa-sequential-ring-delete-wrap, .aa-sim-ring-delete-wrap) {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    z-index: auto !important;
}
html body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card-delete-wrap, .aa-office-anywhere-delete-wrap, .aa-sequential-ring-delete-wrap, .aa-sim-ring-delete-wrap).hidden {
    display: none !important;
}

/* ============================================================
   THE AGENT PAGE (#agent_app): its fields, labels, column heads and
   editor buttons take the canon's numbers on markup that has no settings
   row (the directory, the holidays, the job editors, the lists): the
   field 34px, 7px corners, #C6D3E1, 13px/400 #0E2749 (SETTINGS ROW); the
   label 13/600 #1B3557 on a 20px line; the head 12/750 uppercase #445E82
   (MEMBER TABLE); the editor's Save and Cancel 34px, 7px corners. Moved
   here from agent.css 2026-09-24, word for word (a computed-style diff of
   the whole page: 0 of 4,373 elements changed): the v4 form baseline
   (v4_forms.css, v4_2026.css) hands every input 40px and 12px corners with
   !important, and the page's own id is what outranks it. The textarea's
   height carries no !important, so its corner grip still drags (the
   2026-09-20 lesson, v4_forms.css).
   ============================================================ */
body.v4-body #v4-app .v4-content #agent_app :is(.aa-settings-cards, .agent-jobs-panel, .agent-editor-inline) :is(input.form-control, select.form-control, textarea.form-control, .v4-list-add-field input, .v4-list-add-field select, .v4-list-add-field textarea, select.agent-editor-select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]) {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: #0E2749 !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
}

/* The one-line box's height: NEVER a textarea's. A height that is !important
   on a textarea kills the browser's own grip at its corner (a drag writes a
   plain inline height, and !important beats it): the portal-wide lesson of
   2026-09-20 (v4_forms.css), repeated by this block on 2026-09-22 and undone
   the same day when the owner could not drag "What it does" taller. */
body.v4-body #v4-app .v4-content #agent_app :is(.aa-settings-cards, .agent-jobs-panel, .agent-editor-inline) :is(input.form-control, select.form-control, .v4-list-add-field input, .v4-list-add-field select, select.agent-editor-select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]) {
    height: var(--vt-row-line, 34px) !important;
    min-height: 0 !important;
    line-height: 32px !important;
    padding: 0 10px !important;
}

/* A select keeps its chevron's room at the right. */
body.v4-body #v4-app .v4-content #agent_app :is(.aa-settings-cards, .agent-jobs-panel, .agent-editor-inline) :is(select.form-control, .v4-list-add-field select, select.agent-editor-select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]) {
    padding: 0 30px 0 10px !important;
}

/* A box is as tall as its rows, grows with its text (agent.js fitTextareas)
   and is dragged taller at its corner: its height carries NO !important. */
body.v4-body #v4-app .v4-content #agent_app :is(.aa-settings-cards, .agent-jobs-panel, .agent-editor-inline) :is(textarea.form-control, .v4-list-add-field textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]) {
    min-height: 64px !important;
    padding: 8px 10px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
}

/* A job row's Only when condition (2026-09-25) is one sentence: it starts
   as the one-line field (34px, its words on the field's line) and grows
   with its words (agent.js fitTextareas), so a long condition reads whole
   instead of running off the end of a one-line input. Nothing to drag. */
body.v4-body #v4-app .v4-content #agent_app :is(.aa-settings-cards, .agent-jobs-panel, .agent-editor-inline) :is(textarea.form-control, .v4-list-add-field textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"])[data-row-cond] {
    min-height: var(--vt-row-line, 34px) !important;
    padding: 6px 10px !important;
    line-height: 20px !important;
    resize: none !important;
    overflow: hidden;
}

/* The focus ring and the greyed look of a field that cannot be changed
   carry the box rule's own type filter, so they outrank it: without it the
   box rule's white and grey border won, and a field the page holds fixed
   (a job row's How, Label and Busy on the Routing tab) looked editable. */
body.v4-body #v4-app .v4-content #agent_app :is(.aa-settings-cards, .agent-jobs-panel, .agent-editor-inline) :is(input.form-control, select.form-control, textarea.form-control, .v4-list-add-field input, .v4-list-add-field select, .v4-list-add-field textarea, select.agent-editor-select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):focus {
    outline: none !important;
    border-color: var(--v4-brand, #F89939) !important;
    box-shadow: 0 0 0 2px rgba(248, 153, 57, 0.12) !important;
}

body.v4-body #v4-app .v4-content #agent_app :is(.aa-settings-cards, .agent-jobs-panel, .agent-editor-inline) :is(input.form-control, select.form-control, textarea.form-control, .v4-list-add-field input, .v4-list-add-field select, .v4-list-add-field textarea, select.agent-editor-select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):is(:disabled, [readonly]) {
    background-color: #F8FAFD !important;
    color: #6B7F97 !important;
}

/* The placeholder reads as a placeholder. */
body.v4-body #v4-app .v4-content #agent_app :is(.aa-settings-cards, .agent-jobs-panel, .agent-editor-inline) :is(input, textarea)::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

body.v4-body .v4-content #agent_app :is(.agent-field-label, .agent-static-key, .agent-lk-field label, .agent-feature-field label, .agent-roleplay-pretend label, .agent-roleplay-caller label, .agent-hours-day, .agent-holiday-allday, .agent-editor-inline .v4-list-add-field label, .agent-doc-add .v4-list-add-field label, .agent-lk-title, .agent-lk-on, .agent-editor-subtitle) {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: #1B3557 !important;
}

body.v4-body .v4-content #agent_app :is(.agent-hours-day, .agent-holiday-allday, .agent-feature-check, .agent-texting-number, .agent-mcp-tool-pick, .agent-outbound-switch label, .agent-texting-row > label, .agent-lk-field label, .agent-feature-field label, .agent-roleplay-pretend label, .agent-roleplay-caller label, .agent-editor-inline .v4-list-add-field label, .agent-doc-add .v4-list-add-field label, .agent-act-pick .agent-field-label, .agent-field-head > .agent-field-label, .agent-editor-inline .agent-field-head > label) {
    margin: 0 !important;
}

body.v4-body .v4-content #agent_app .agent-field-label {
    margin: 0 0 6px !important;
}

/* The column head: the MEMBER TABLE canon's, on every list of the agent page. */
body.v4-body .v4-content #agent_app :is(.agent-dir-row--head, .agent-holiday-row--head, .agent-testacc-row--head, .agent-steps-head, .agent-rows-head, .agent-job-key, .agent-calls-head th, .agent-doc-table th, .agent-usage-label) {
    font-size: 12px !important;
    font-weight: 750 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #445E82 !important;
}

/* The inline editor's foot: Save, Cancel and Delete at 34px, 7px corners. */
body.v4-body .v4-content #agent_app .agent-editor-inline :is(.v4-list-add-cancel, .v4-list-add-submit) {
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

body.v4-body .v4-content #agent_app .agent-editor-inline .v4-list-add-cancel {
    border: 1px solid #C6D3E1 !important;
    color: #1B3557 !important;
}

/* ============================================================
   REPEAT CARD: a repeated sub-card inside a settings card (an Office
   Anywhere number, a Simultaneous or Sequential Ring number, a Selective
   forwarding rule, a second pre-alert schedule). It has no frame of its
   own, the .aa-call-feature is the card; consecutive cards are parted by
   one hairline with 16px above and below. The .clone is the template the
   scripts copy. Until 2026-09-18 this file held five copies of this
   frame for the selective rules alone (dotted, inset, shadowed), the
   recorder module a sixth for the numbers and the extension file a
   seventh, each with its own spacing.
   ============================================================ */
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card, .aa-office-anywhere-card, .aa-sim-ring-destination, .aa-sequential-ring-card, .aa-prealert-schedule-block) {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card, .aa-office-anywhere-card, .aa-sim-ring-destination, .aa-sequential-ring-card, .aa-prealert-schedule-block).clone {
    display: none !important;
}
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card, .aa-office-anywhere-card, .aa-sim-ring-destination, .aa-sequential-ring-card, .aa-prealert-schedule-block):not(.clone) + :is(.aa-cfs-card, .aa-office-anywhere-card, .aa-sim-ring-destination, .aa-sequential-ring-card, .aa-prealert-schedule-block):not(.clone) {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--aa-ext-prealert-divider, #E4EBF3) !important;
}
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card, .aa-office-anywhere-card, .aa-sim-ring-destination, .aa-sequential-ring-card, .aa-prealert-schedule-block)::before,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(.aa-cfs-card, .aa-office-anywhere-card, .aa-sim-ring-destination, .aa-sequential-ring-card, .aa-prealert-schedule-block)::after {
    content: none !important;
    display: none !important;
}

/* SUB-CARD HEADER: the first line of a repeat card and of a sub-section
   inside a settings card (a number, a rule, Greeting, Schedule, the
   feature module headers): the title left, the trash or a pill right,
   the description v4_design.js injects on a second line. One 14px/700
   title; until 2026-09-18 the numbers, the rules and the module headers
   each had their own copy.
   Markup: .aa-subsection-header > .aa-inline-subsection-title > label.label
           [+ .aa-cfs-card-delete-wrap | .aa-prealert-add-schedule]. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature .aa-subsection-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px 12px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
/* The title block stays a flex item on the title line. v4_design.js tags it
   .v4-section-titled when it adds the icon and the description, and
   v4_design.css makes every .v4-section-titled a full-width block (flex
   0 0 100%, !important); in a repeat card that pushed the trash to a second
   line at the left and the description to a third (fixed 2026-09-19). */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature .aa-subsection-header .aa-inline-subsection-title {
    order: 1 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    /* The title line is as tall as the trash or the pill that may sit on it
       (34px), so it does not jump when a second rule brings the first one's
       trash into view. Until 2026-09-20 the recorder stylesheet pinned the
       label itself to 38px on every sub-header. */
    min-height: 34px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature .aa-subsection-header .aa-inline-subsection-title label.label {
    font: 700 14px/1.3 "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #0E2749 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature .aa-subsection-header :is(.aa-cfs-card-delete-wrap, .aa-office-anywhere-delete-wrap, .aa-sequential-ring-delete-wrap, .aa-sim-ring-delete-wrap, .aa-prealert-add-schedule) {
    order: 2;
    margin-left: auto !important;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature .aa-subsection-header .v4-section-desc {
    order: 3;
    flex: 0 0 100%;
    margin: 0;
}
/* A module header (Call Notify, Selective Rejection) follows a settings
   area, so it takes room above. */

#office_anywhere .aa-office-anywhere-header .aa-inline-subsection-title {
    display: flex;
    align-items: center;
    gap: 8px;
}


html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .aa-call-feature :is(.broadworks_anywhere_table, .call_forwarding_selective_content_section) {
    border-top: 0 !important;
}

/* Labels are normalized at the source rule (line ~966) to 13px/600/#1B3557.
   Inputs need their own normalization to match Voicemail spec. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #agent_app) #call_control .aa-call-feature :is(.call_forwarding_always_section, .call_forwarding_no_answer_section, .call_forwarding_busy_section, .simultaneous_content_section, .sequential_ring_content, .padded_section_widths) :is(input.form-control, select.form-control) {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 7px !important;
    border: 1px solid #C6D3E1 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #0E2749 !important;
}

/* The Office Anywhere rows take the SETTINGS ROW canon above; the older
   three-column flex spec that sat here (185px label, 240px field, centred
   rows with !important) is gone (2026-09-15). */

/* =================================================================
   Office Anywhere: schedule subsection
   ================================================================= */


/* =================================================================
   Call Forwarding Selective: kill inner rule-card borders to prevent
   double border. Outer .aa-call-feature is the single visible card.
   ================================================================= */


/* =================================================================
   Submenu: give the Menu section the same Holiday-style bordered
   card frame the Greeting section has. The previous rule explicitly
   stripped Menu's border (lines 11075+ above) — override it so the
   "Menu" header sits inside its own bordered card, with the inner
   .aa-submenu-menu-card content transparent.
   ================================================================= */
body.v4-body .v4-content #auto_attendant_app #submenu .aa-submenu-section--menu,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .aa-submenu-section--menu {
    border: 1px solid var(--aa-flat-section-border, #DDE7F1) !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    padding: 18px 22px !important;
    box-shadow: none !important;
    margin: 16px 0 0 !important;
}


/* =================================================================
   Cross-entity reuse — Hunt Group / Call Center / Extension. The AA
   features-panel + tab CSS above is scoped to #auto_attendant_app, so
   parallel rule blocks anchored on the shared .v4-tabbed-detail class
   carry the same look across the other three detail pages without
   duplicating every selector.
   ================================================================= */

body.v4-body .v4-content .v4-tabbed-detail #hunt_group_app .aa-features-panel,
body.v4-body .v4-content .v4-tabbed-detail #call_center_app .aa-features-panel,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-features-panel,
body.v4-body .v4-content .v4-tabbed-detail #extension_app .aa-features-panel,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #hunt_group_app .aa-features-panel,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #call_center_app .aa-features-panel,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-features-panel,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app .aa-features-panel {
    width: 100% !important;
    max-width: var(--aa-detail-content-width, 1150px) !important;
    margin: -10px 0 22px !important;
    padding: 16px 20px !important;
    border: 1px solid var(--aa-flat-section-border, #DDE7F1) !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail .aa-features-panel[hidden] {
    display: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail #hunt_group_app .aa-feature-group,
body.v4-body .v4-content .v4-tabbed-detail #call_center_app .aa-feature-group,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-feature-group,
body.v4-body .v4-content .v4-tabbed-detail #extension_app .aa-feature-group,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #hunt_group_app .aa-feature-group,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #call_center_app .aa-feature-group,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #agent_app .aa-feature-group,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app .aa-feature-group {
    border-bottom: 1px solid #E8EFF6 !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}

body.v4-body .v4-content .v4-tabbed-detail #hunt_group_app .aa-feature-group:last-child,
body.v4-body .v4-content .v4-tabbed-detail #call_center_app .aa-feature-group:last-child,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-feature-group:last-child,
body.v4-body .v4-content .v4-tabbed-detail #extension_app .aa-feature-group:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail #hunt_group_app .aa-feature-group-title,
body.v4-body .v4-content .v4-tabbed-detail #call_center_app .aa-feature-group-title,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-feature-group-title,
body.v4-body .v4-content .v4-tabbed-detail #extension_app .aa-feature-group-title {
    color: #6B7F97 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

body.v4-body .v4-content .v4-tabbed-detail #hunt_group_app .aa-feature-row,
body.v4-body .v4-content .v4-tabbed-detail #call_center_app .aa-feature-row,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-feature-row,
body.v4-body .v4-content .v4-tabbed-detail #extension_app .aa-feature-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #EDF2F7 !important;
}

body.v4-body .v4-content .v4-tabbed-detail #hunt_group_app .aa-feature-row:last-child,
body.v4-body .v4-content .v4-tabbed-detail #call_center_app .aa-feature-row:last-child,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-feature-row:last-child,
body.v4-body .v4-content .v4-tabbed-detail #extension_app .aa-feature-row:last-child {
    border-bottom: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail #hunt_group_app .aa-feature-name,
body.v4-body .v4-content .v4-tabbed-detail #call_center_app .aa-feature-name,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-feature-name,
body.v4-body .v4-content .v4-tabbed-detail #extension_app .aa-feature-name {
    color: #001F4A !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
}

body.v4-body .v4-content .v4-tabbed-detail #hunt_group_app .aa-feature-desc,
body.v4-body .v4-content .v4-tabbed-detail #call_center_app .aa-feature-desc,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-feature-desc,
body.v4-body .v4-content .v4-tabbed-detail #extension_app .aa-feature-desc {
    color: #6B7F97 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 2px !important;
}

body.v4-body .v4-content .v4-tabbed-detail #hunt_group_app .aa-feature-switch,
body.v4-body .v4-content .v4-tabbed-detail #call_center_app .aa-feature-switch,
body.v4-body .v4-content .v4-tabbed-detail #agent_app .aa-feature-switch,
body.v4-body .v4-content .v4-tabbed-detail #extension_app .aa-feature-switch {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* =================================================================
   Voicemail tab card framing parity with Open / Closed / Holiday.
   The voice_mail_container had a calc(100% - 48px) width with auto
   centering, leaving the inner cards 24px inset on each side and
   ~18px lower than the schedule tabs. The aa-vm-section cards also
   used 20px/22px padding and a 14px gap, vs. 24px/28px and 16px on
   the schedule tabs. Match exactly so the Voicemail subsection
   cards line up with the Open tab framing.
   ================================================================= */


/* === 2026-05-03 dev4 — AA Calls tab CFS rule polish ============== */
/* Action icons go from circular pills (border-radius: 999px) to
   square-with-rounded-corners (8px) so they read as compact buttons,
   matching the input/select shape language on the rest of the card.
   Add Schedule / Add Template / Show Old / Save New Schedule pills
   shrink from 36px tall to 28px so they don't dominate the row.
   The bottom "Delete Number" row is hidden — replaced by the
   icon-only .aa-cfs-card-delete button in the rule card header. */

body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .edit_event_recur,
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .time_schedule_remove,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .edit_event_recur,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .time_schedule_remove {
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button,
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule-old-toggle,
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .save_new_schedule,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule-old-toggle,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .save_new_schedule {
    height: 32px !important;
    min-height: 32px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
}
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button .fa-plus,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button .fa-plus {
    font-size: 11px !important;
    margin-right: 4px !important;
}


/* Top-right delete icon button — anchored to the rule card's
   top-right corner via position: absolute so it doesn't compete
   with the title + injected description for header row space.
   The card itself becomes a positioning context. */
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card {
    position: relative !important;
}
/* The delete button sits in the rule header's first line (REPEAT CARD DELETE canon). */
/* Reserve space on the right side of the header row so long
   descriptions don't run under the absolute-positioned delete
   icon. 48px = 32px button + 16px gap. */

body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .aa-cfs-card-delete-wrap,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .aa-cfs-card-delete-wrap {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .aa-cfs-card-delete-wrap.hidden,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .aa-cfs-card-delete-wrap.hidden {
    display: none !important;
}
/* The delete button takes the REPEAT CARD DELETE canon (entity_shared.css). */

/* STS cell — match the action icon shape language. The .schedule_status
   wrapper is the visible "status button" (35x38, 5px radius border in
   the legacy CSS). Resize to 32x32 with 8px radius so it lines up with
   the edit/trash icons in the same row. */
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .schedule_status,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .schedule_status {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid #d6dae0 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    background: #ffffff !important;
}
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .schedule_status .status,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .schedule_status .status {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .schedule_status .status i.fa-circle,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .schedule_status .status i.fa-circle {
    font-size: 9px !important;
    width: 9px !important;
    height: 9px !important;
    line-height: 9px !important;
}

/* Column headers — left-align Sts and Actions to match the rest
   (Event Name / Date and Time / Recurs are all left-aligned). */
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container th.schedule-actions-header,
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container th.text-md-center,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container th.schedule-actions-header,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container th.text-md-center {
    text-align: left !important;
}

/* === 2026-05-03 dev4 (b) — pixel-perfect pass on AA Calls tab ===== */

/* Kill the inner scrollbar inside .table-responsive.collapse_mobile.
   schedule.js sets a fixed height that's 1px shorter than scrollHeight,
   so a vertical scrollbar appears on every event row table. We don't
   want a scroll region inside a rule card — let it expand naturally. */
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .table-responsive,
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .table-responsive.collapse_mobile,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .table-responsive,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .table-responsive.collapse_mobile {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

/* Plus icon centering inside Add Schedule / Add Template.
   The icon has a ::before pseudo-element that draws the 14×14
   ring around the + glyph. The legacy CSS gives that ::before
   `position: relative; top: -2px` which shifts the ring UP by 2px
   relative to the + glyph — the ring reads as drifted up while
   the glyph itself sits low. Reset top/bottom and use absolute
   positioning to overlay the ring on the icon, centered. */
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button .fa-plus,
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button i.fa,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button .fa-plus,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button i.fa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    height: 14px !important;
    width: 14px !important;
    font-size: 11px !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
    position: relative !important;
}
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button .fa-plus::before,
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button i.fa::before,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button .fa-plus::before,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .add_button i.fa::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    right: auto !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* The CFS rule list stays FLAT inside the .aa-call-feature card - it must
   NOT draw its own border/radius/bg, or it doubles the outer card frame.
   The outer .aa-call-feature is the single visible frame on all four entities;
   individual rules are separated by dividers (see the .aa-cfs-card rules
   below), not by a nested border. */
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature #call_forwarding_selective .call_forwarding_selective_content_section:not(.hidden),
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature #call_forwarding_selective .call_forwarding_selective_content_section:not(.hidden) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}

/* Horizontal divider between consecutive non-clone rule cards.
   The user explicitly wants the line inset from both edges — NOT a
   full-width border across the container. Using a ::before pseudo
   so we can shrink it horizontally (border-top would always span
   the card's full width). */


/* Schedule action-buttons: was justify-content: center — pulled
   the icons 14px to the right of the header text. Pack them to
   the start so the first icon's left edge aligns with the
   "Actions" column header text. */
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .schedule-action-buttons,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app, #agent_app) .aa-call-feature .aa-cfs-card .schedule_container .schedule-action-buttons {
    justify-content: flex-start !important;
}

/* CFS actions-column width/padding/margin overrides removed 2026-05-26 -- schedule.css is single source */

/* The add button takes the HEADER ADD BUTTON canon (entity_shared.css); the
   28px plain-plus copy that sat here is gone (2026-09-15). */


/* === CFS frozen template, dev4 2026-05-03 ==========================
   Auto Attendant CFS is the measured reference. Keep this block as the
   shared source for Extension, Hunt Group, Call Center, and Auto
   Attendant. Do not adjust these measurements without re-measuring the
   same CFS view across all four entities. */


/* The selective card's rule cards, delete button, schedule table and header locks
   (the frozen CFS card, dev4 2026-05-04). The add button alone takes the HEADER
   ADD BUTTON canon above. */


/* The delete button takes the REPEAT CARD DELETE canon (entity_shared.css). */


/* CFS schedule-table header/actions overrides removed 2026-05-26 — schedule.css is single source */


/* recurSection overrides DELETED — centralized in schedule.css (Phase 1) */


/* The add button takes the HEADER ADD BUTTON canon (entity_shared.css). */


/* HG/CC advanced features use the SAME individual feature-card as every other
   feature and as the extension (the shared .aa-call-feature card rule above).
   Removed 2026-05-30: the old border:0 override + inter-feature divider assumed
   an outer "Advanced panel" card that does not exist, which left CFS frameless. */

/* === CFS parity lock, dev4 2026-05-04 ==============================
   Extension, Hunt Group, and Call Center use different parent templates
   than Auto Attendant. This block keeps the shared CFS feature visually
   identical: same header divider, field rhythm, and action-button frame. */


/* The delete button takes the REPEAT CARD DELETE canon (entity_shared.css). */


/* Greeting/menu design tokens: REMOVED.
   Canonical source is v4_2026.css (lines 1937-1962).
   Do not re-add tokens here. See company/docs/COMPONENT-ARCHITECTURE.md */


/* Edit mode (rename input visible): switch from grid to flex so the
   input expands to fill the space between label and Apply/Cancel. */


/* Greeting button sizing + icon flex moved to v4_2026.css
   (canonical greeting .tts-btn rule).  Do NOT re-add here. */


/* Extension overview inline editor: this file loads after extension_editable.css,
   so keep the final grid alignment here and scope it to the opened edit card. */


body.v4-body .v4-content .v4-tabbed-detail #extension_app .aa-ov-edit-host :is(.aa-profile-basic-card, #alternative_number) :is(input.form-control, select.form-control),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app .aa-ov-edit-host :is(.aa-profile-basic-card, #alternative_number) :is(input.form-control, select.form-control) {
    max-width: 380px !important;
    width: 100% !important;
}

body.v4-body .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-basic-card > .form-group.row,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-basic-card > .form-group.row {
    /* the extension's own: a 132px label column and fields up to 380px. The
       row's height and the gap between rows are the shared rule's. */
    column-gap: 20px !important;
    grid-template-columns: 132px minmax(280px, 380px) !important;
    justify-content: start !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.v4-body .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-basic-card > .form-group.row > [class*="col-"],
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-basic-card > .form-group.row > [class*="col-"],
body.v4-body .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card > [class*="col-"],
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card > [class*="col-"] {
    flex: none !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    width: auto !important;
}


body.v4-body .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-basic-card > .form-group.row > [class*="col-"]:nth-child(2),
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-basic-card > .form-group.row > [class*="col-"]:nth-child(2),
body.v4-body .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card > .col-8,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card > .col-8 {
    grid-column: 2 !important;
    justify-self: stretch !important;
}

body.v4-body .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card {
    align-items: center !important;
    column-gap: 20px !important;
    display: grid !important;
    grid-template-columns: 132px minmax(280px, 380px) !important;
    justify-content: start !important;
    width: 100% !important;
}

body.v4-body .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-desc,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-desc {
    display: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card > .col-8,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card > .col-8 {
    justify-content: flex-start !important;
}

body.v4-body .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card .add_alternative_number,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card .add_alternative_number {
    margin-left: 152px !important;
}

/* Shared Pre-alert card parity. Extension loads this stylesheet after the
   schedule CSS, so this is the final Pre-alert source of truth there. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app, #agent_app) #advanced-notice :is(.setting_section.form_container, .setting_box, .advanced_container, .advanced_details) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* Extension Settings pre-alert actual painted shell.
   The visible Pre-alert content paints from #pre-alert, so keep the wrapper
   neutral and put the card frame on the rendered block itself. */


/* Extension Settings pre-alert final shell guard.
   Loaded after extension_editable.css so the wrapper keeps the same visible
   frame as the AA feature cards without changing the rest of Settings. */


/* Dev4 voicemail final cascade guard. Keep this after later menu/greeting overrides. */


/* Drop the :not(.hidden) qualifier so the v4 section style applies at
   FIRST PAINT. The container starts the page with .hidden — legacy JS
   removes it ~80ms after parse — but during those 80ms the legacy
   .aa-vm-section style (28px padding, 1px border) was applying instead
   of these. That made every section row shift ~98px wider once .hidden
   came off, producing the visible jump on Voicemail Received By and
   every other vm-setting-row. Children of a .hidden container are not
   rendered anyway (display:none cascades), so painting these styles
   pre-removal is purely a head start for the eventual visible paint. */


/* Dev4 voicemail card cleanup: one framed panel, section dividers, 34px controls. */


/* Kill the inline `margin-left: auto` the PHP template puts on
   .voice_message_autoconfig. In its original legacy layout that auto
   pushed the dropdown to the right edge of a wider Bootstrap column;
   in the v4 single-column-per-row grid where the dropdown's parent cell
   is already exactly 280px wide, that auto resolves to a stray ~10px
   leftover that shifts the "Voicemail Received By" dropdown right
   relative to the Email Address input below it. Force it back to 0 so
   the dropdown's left edge lines up with the Email Address input from
   first paint. */


/* Dev4 local polish: audio-button alignment, recording select affordance,
   compact TTS controls, and tighter menu proportions. */


/* voice_select, preview buttons, text_to_convert sizing → centralized in v4_2026.css */


/* Extension overview inline editor: final spacing polish. */
body.v4-body .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host,
body.v4-body #v4-app .v4-content .v4-tabbed-detail #extension_app #aa_ov_edit_host {
    padding: 24px 28px 18px !important;
}


/* ============================================================
 * Menu key Play / Stop buttons (announcement rows)
 * Sized to match the greeting section's controls.
 * ============================================================ */
.aa-menu-play-btn,
.aa-menu-stop-btn {
    height: 34px !important;
    min-height: 34px !important;
    width: 100% !important;
    padding: 0 14px !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    color: #0E2749 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    gap: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    box-shadow: 0 1px 2px rgba(14, 39, 73, 0.06) !important;
    justify-content: center !important;
}

.aa-menu-play-btn:hover {
    background: var(--v4-brand-soft, #FEF5EB) !important;
    color: var(--v4-brand, #F89939) !important;
    border-color: var(--v4-brand-light, #FBB26A) !important;
}

.aa-menu-stop-btn {
    border-color: #D9534F !important;
    color: #D9534F !important;
}

.aa-menu-stop-btn .aa-stop-spinner {
    width: 12px !important;
    height: 12px !important;
    border: 2px solid #D9534F !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: aa-spin 0.8s linear infinite !important;
    flex-shrink: 0 !important;
}

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

/* Action dropdown click-to-expand indicator for announcement rows */
.aa-menu-action-select[data-greeting-expanded="true"] {
    border-color: var(--v4-brand, #F89939) !important;
    box-shadow: 0 0 0 3px var(--v4-brand-soft, #FEF5EB) !important;
}


/* ============================================================
 * Auto Attendant menu target inline editor drawer.
 * ============================================================ */
body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-source-row > td,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-source-row > td {
    background: #FAFCFF !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-drawer-row,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-drawer-row {
    display: table-row !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-drawer-row > td,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-drawer-row > td {
    /* Left padding aligns drawer with Action Data Type column (past 59px key cell) */
    padding: 10px 24px 14px 62px !important;
    border-top: 0 !important;
    background: transparent !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-drawer,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-drawer {
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid #E9ECEF !important;
    border-radius: 10px !important;
    background: #F6F8FA !important;
    box-shadow: 0 1px 4px rgba(14, 39, 73, 0.05) !important;
    overflow: visible !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-head,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 44px !important;
    padding: 8px 12px 8px 16px !important;
    border-bottom: 1px solid #E9ECEF !important;
    background: #fff !important;
    border-radius: 10px 10px 0 0 !important;
    gap: 12px !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-head-left,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-head-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-head-right,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-head-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-type-badge,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-type-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    background: #EDF2F7 !important;
    border-radius: 5px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #4A5868 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-title,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-title {
    min-width: 0 !important;
    color: #0E2749 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-save-btn,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-save-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #F89939 !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-save-btn:hover,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-save-btn:hover {
    background: #EC8526 !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-cancel-btn,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-cancel-btn {
    display: none !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-close,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-close {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 1px solid #C9D8EA !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    color: #526A86 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-close:hover,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-close:hover {
    background: #F6F8FA !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-loader,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-loader,
body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-loader.submitting,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-loader.submitting {
    min-height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-loader.hidden,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-loader.hidden {
    display: none !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-drawer iframe,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-drawer iframe {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 200px !important;
    max-height: none !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    margin: 0 !important;
    border-radius: 0 0 10px 10px !important;
}

body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-drawer iframe.hidden,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-drawer iframe.hidden {
    display: none !important;
}

@media (max-width: 900px) {
    body.v4-body .v4-content #auto_attendant_app .aa-menu-inline-drawer-row > td,
    body.v4-body #v4-app .v4-content #auto_attendant_app .aa-menu-inline-drawer-row > td {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

/* 7. Collapse the upload panel when hidden so it does not eat flex-gap.
   The upload container (data-container_name="upload") stays display:block
   at 0 height when the user hasn't clicked Upload.  In a flex-column
   parent with gap:5px this zero-height element still consumes two 5px
   gaps (one above, one below), inflating the Create-to-STT distance
   from 5px to 13px.  Also kill the 3px default margin-top on the
   text-to-speech panel so the net gap is a clean 5px. */


/* 8. Fix uneven visual gaps between greeting recorder rows (Ext/HG/CC).
   extension_editable.css sets min-height:38px!important on .greeting_label.
   That makes the Voice row 38px instead of 34px (2px padding top+bottom),
   and the resting-row labels overflow their 34px grid tracks by 4px.
   Result: visual gaps of 3px, 7px, 7px, 5px instead of uniform 5px.
   Fix: constrain labels in recorder sections to 34px. */


/* 8b. The recording-selector row (.greeting_selector_fixer) and the
   recorder-controls container (.aa-vm-recorder-controls) are siblings
   inside .aa-vm-recorder-area.  That parent is flex-column with gap:0,
   so there is no gap between Recording and Listen.  Fix: set gap:5px
   on the parent to match the internal gap of .aa-vm-recorder-controls. */


/* 8c. Same gap fix for the CC and HG Pre-alert announcement area.
   The JS normaliser stamps inline gap: var(--aa-greeting-row-gap, 4px)
   !important on .announcement-area.  Inline !important beats stylesheet
   !important, so we cannot override the gap property directly.  Instead,
   redefine the variable to 5px on this element so the inline var()
   resolves to 5px. */


/* 8d. TTS panel (.greeting_container.greeting_parent) inside pre-alert and
   voicemail areas: the normaliser sets margin-left on this container but
   leaves it as display:block with no gap.  The children (Voice, Message,
   Actions) rely on individual margins which are inconsistent (Voice 4px,
   Message 5px, Actions 0px).  Convert to flex-column gap:5px so all rows
   get uniform spacing, and zero out the old per-child margins. */


/* 9. Resting-row <a> wrappers: force 34px so the 34px .btn inside does not
   overflow the wrapper (was 28px, causing buttons to extend 3px past the
   grid row bottom and shrink the visual gap to the next element).
   Scoped to .aa-vm-recorder-controls (voicemail) and .announcement-area
   (Settings Pre-alert) only.  Must NOT match .cc_greeting descendants
   (Playback tab) whose buttons have their own layout.
   :not(.hidden) prevents this rule from overriding display:none on
   hidden buttons (Stop, Download-spinner, Close, etc.) that should
   stay invisible until toggled by JS. */

/* 10a. CC Playback <a> wrappers: 34px to match buttons. Same fix as rule 9
   but scoped to .cc_greeting instead of .aa-vm-recorder-controls/.announcement-area.
   All CC rules include .v4-tabbed-detail to beat extension_editable.css specificity. */


/* 10b. Keep Name row (.name-area) and STT response hidden when they carry .hidden.
   Bootstrap .d-flex sets display:flex!important which beats .hidden{display:none}.
   Only target rows that are MEANT to stay hidden (Name and STT), NOT the Upload
   row which should be visible but arrives with .hidden from the server HTML. */


/* 10c. CC Playback inner wrapper: flex-column with 5px gap so Recording→Actions→Upload
   have uniform spacing. The wrapper is .control_section.greeting > div (unnamed). */


/* 10d. cc_greeting margin-top: 5px for Recording-to-Actions spacing.
   Must beat extension_editable.css line 2294 which sets margin-top:10px at (0,3,5,1). */


/* 10e. Recording selector row (span.announcement_controls outside cc_greeting):
   consistent 34px height, grid with 116px label column. */


/* 10f. Actions/Upload rows inside cc_greeting: grid with 116px label column
   and 3 equal button columns. Matches the AA greeting spec.
   Must beat extension_editable.css line 2308 which sets margin:0 0 8px at (0,3,7,1).
   Adding #announcements gives us 4 IDs → (0,4,6,2) which beats (0,3,7,1).
   The Upload row (.greeting-action-row[data-container_name="upload_options"])
   arrives with .hidden from the server but must be visible — include it
   via the data-container_name selector. The Name row (.name-area.hidden)
   is excluded by rule 10b above. */


/* 10g. CC Playback label styling: 116px, navy, 13px 800-weight. */


/* 10h. CC Playback button sizing moved to v4_2026.css canonical rule */


/* ============================================================
   UNIFIED DELETE MODAL (shared by AA, CC, HG)
   Previously inline <style> in each entity's module PHP.
   ============================================================ */
.v4-entity-delete-overlay {
    position: fixed; inset: 0;
    background: rgba(14, 39, 73, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 24px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.v4-entity-delete-overlay[hidden] { display: none; }
.v4-entity-delete-modal {
    background: #FFFFFF; border-radius: 12px;
    width: 100%; max-width: 460px;
    box-shadow: 0 20px 50px -10px rgba(14, 39, 73, 0.25);
}
.v4-entity-delete-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 8px;
}
.v4-entity-delete-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: #0E2749; }
.v4-entity-delete-close {
    background: transparent; border: 0; cursor: pointer;
    font-size: 18px; color: #6B7280; padding: 4px 8px; border-radius: 6px;
}
.v4-entity-delete-close:hover { background: rgba(14, 39, 73, 0.05); color: #0E2749; }
.v4-entity-delete-body { padding: 0 24px 16px; }
.v4-entity-delete-copy {
    margin: 4px 0 8px; font-size: 14px; line-height: 1.55; color: #4B5563;
}
.v4-entity-delete-copy strong { color: #0E2749; font-weight: 700; }
.v4-entity-delete-warn {
    margin: 8px 0 0; font-size: 12.5px; font-weight: 600;
    color: #B91C1C; letter-spacing: 0.01em;
}
.v4-entity-delete-word-label {
    display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: #1B3557;
}
.v4-entity-delete-word-label strong { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; }
.v4-entity-delete-word {
    display: block; width: 100%; height: 34px; padding: 0 10px;
    border: 1px solid #C9D6E6; border-radius: 7px; background: #FFFFFF;
    font-size: 13px; font-weight: 500; color: #1B3557; font-family: inherit;
}
.v4-entity-delete-word:focus { outline: none; border-color: #F89939; box-shadow: 0 0 0 3px rgba(248, 153, 57, 0.18); }
.v4-entity-delete-error {
    margin-top: 12px; background: #FEF2F2; border: 1px solid #FCA5A5;
    color: #B91C1C; border-radius: 8px; padding: 10px 12px;
    font-size: 13px; font-weight: 500;
}
.v4-entity-delete-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 4px 24px 22px;
}
.v4-entity-delete-cancel, .v4-entity-delete-confirm {
    height: 38px; padding: 0 18px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.v4-entity-delete-cancel { background: #FFFFFF; border: 1px solid #D6DAE0; color: #0E2749; }
.v4-entity-delete-cancel:hover { background: rgba(14, 39, 73, 0.04); }
.v4-entity-delete-confirm { background: #DC2626; border: 1px solid #DC2626; color: #FFFFFF; }
.v4-entity-delete-confirm:hover:not(:disabled) { background: #B91C1C; border-color: #B91C1C; }
.v4-entity-delete-confirm:disabled { opacity: 0.6; cursor: wait; }


/* ============================================================
 * CC / HG routing section fields — clean stacked layout
 * Labels above inputs, no inline pixel widths, no box-in-box.
 * ============================================================ */
.cc-routing-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0 8px;
    width: 100%;
    max-width: 480px;
}
.cc-routing-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    /* Match the 40px control height so a toggle row keeps the same vertical
       rhythm as an input row. Without it the toggle rows collapse to 22px and
       bunch up against each other while the inputs sit further apart. */
    min-height: 40px;
}
.cc-routing-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #0E2749;
    margin: 0;
    line-height: 1.3;
    min-width: 130px;
    flex-shrink: 0;
    white-space: nowrap;
}
.cc-routing-field .form-control {
    flex: 1;
    max-width: 200px;
}
.cc-routing-field .switch {
    flex-shrink: 0;
    margin: 0;
    width: 38px;
    min-width: 38px;
    height: 22px;
}
.cc-routing-field .switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.cc-routing-field .error {
    font-size: 12px;
    color: #D9534F;
    margin-top: 2px;
}
/* Safety-net rows carry a sentence rather than a short field name, so the
   label wraps and the toggle sits at the end of the row instead of behind a
   fixed 130px gutter. */


/* Bounced calls only exist on Regular and Circular queues. On a Simultaneous
   or Uniform queue the row is hidden rather than shown and silently ignored.
   Two classes so this beats .cc-routing-field's display:flex without
   !important. */

.cc-routing-field .form-control.is-missing {
    border-color: #D9534F;
}


/* The forwarding cards' 14px/700 label override (2026-05-29) is gone: every
   settings row takes the SETTINGS ROW canon (13px/600 #1B3557). */


/* ============================================================
   Inbound routing sources card ("Where calls come from") —
   SHARED across Extension, Call Center, Hunt Group overviews.
   Template: company/shared/templates/overview_routes.php
   Moved from extension_editable.css when the card went 3-entity.
   ============================================================ */

/* ============================================================
   Inbound routing sources card (from overview_routes.php)
   ============================================================ */

/* ========== Inbound routing sources card ========== */
.aa-ov-routes-card { margin-top: 16px; }
.ext-routes-intro { padding: 4px 0 0; }
.ext-routes-intro-body { margin: 0 0 14px; color: #4b5563; font-size: 13px; line-height: 1.55; max-width: 720px; }
.ext-routes-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: #F89939; color: #fff; border: none;
    border-radius: 6px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.12s ease;
}
.ext-routes-btn:hover { background: #EC8526; }
.ext-routes-btn:disabled { background: #d1d5db; color: #6b7280; cursor: not-allowed; }
.ext-routes-btn svg { flex: 0 0 auto; }
.ext-routes-loading {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: #fef9f3; border: 1px solid #fde6cf;
    border-radius: 6px;
}
.ext-routes-loading-spinner {
    width: 22px; height: 22px;
    border: 2.5px solid #fde0c2; border-top-color: #F89939;
    border-radius: 50%;
    animation: ext-routes-spin 0.8s linear infinite;
    flex: 0 0 auto;
}
@keyframes ext-routes-spin { to { transform: rotate(360deg); } }
.ext-routes-loading-title { font-size: 13px; font-weight: 600; color: #1f2937; margin-bottom: 2px; }
.ext-routes-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ext-routes-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: #f3f4f6; color: #374151;
    border-radius: 11px; font-size: 11.5px; font-weight: 500;
}
.ext-routes-pill.empty { background: #f9fafb; color: #9ca3af; }
.ext-routes-pill .ext-routes-pill-count {
    background: #fff; color: #1f2937; font-weight: 600;
    padding: 1px 6px; border-radius: 9px; font-size: 11px;
}
.ext-routes-pill.empty .ext-routes-pill-count { color: #9ca3af; }
.ext-routes-pill.active { background: #fef3e6; color: #D97E1F; }
.ext-routes-pill.active .ext-routes-pill-count { color: #D97E1F; }
.ext-routes-empty {
    padding: 18px;
    text-align: center; color: #6b7280; font-size: 13px;
    background: #f9fafb; border-radius: 6px;
}
/* Shown when the scan ran out of its time budget on a very large account
   and handed back only part of the answer. */
.ext-routes-partial {
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #FEF9F1; border: 1px solid #f5dcbb;
    border-radius: 6px;
    color: #92400e; font-size: 12.5px;
}
.ext-routes-section { margin-bottom: 18px; }
.ext-routes-section:last-child { margin-bottom: 0; }
.ext-routes-section-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px;
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: #374151;
}
.ext-routes-section-count {
    background: #F89939; color: #fff;
    padding: 1px 7px; border-radius: 9px;
    font-size: 11px; font-weight: 600; letter-spacing: 0;
    text-transform: none;
}
.ext-routes-list { list-style: none; margin: 0; padding: 0; }
.ext-routes-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border: 1px solid #e5e7eb; border-radius: 6px;
    margin-bottom: 6px;
    background: #fff;
    font-size: 13px;
}
.ext-routes-row:last-child { margin-bottom: 0; }
.ext-routes-row:hover { border-color: #F89939; background: #fefbf7; }
.ext-routes-row-main { flex: 1 1 auto; min-width: 0; }
.ext-routes-row-name { color: #1f2937; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-routes-row-name a { color: inherit; text-decoration: none; }
.ext-routes-row-name a:hover { color: #F89939; text-decoration: underline; }
.ext-routes-row-meta { color: #6b7280; font-size: 11.5px; margin-top: 1px; }
.ext-routes-row-badge { flex: 0 0 auto; padding: 2px 8px; background: #f3f4f6; color: #4b5563; border-radius: 10px; font-size: 11px; font-weight: 500; }
.ext-routes-row-badge.cfa { background: #fef3e6; color: #D97E1F; }
.ext-routes-row-badge.cfb { background: #fef9f3; color: #b45a07; }
.ext-routes-row-badge.cfna { background: #fef9f3; color: #b45a07; }
.ext-routes-row-badge.simring { background: #ecfdf5; color: #047857; }
.ext-routes-row-badge.bwa { background: #eff6ff; color: #1d4ed8; }
.ext-routes-row-badge.hg { background: #f3e8ff; color: #6b21a8; }
.ext-routes-row-badge.cc { background: #fce7f3; color: #9d174d; }
.ext-routes-row-badge.aa { background: #e0f2fe; color: #075985; }
.ext-routes-footer {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}
.ext-routes-refresh {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    background: #fff; color: #4b5563;
    border: 1px solid #d1d5db; border-radius: 5px;
    font-size: 11.5px; cursor: pointer;
}
.ext-routes-refresh:hover { color: #F89939; border-color: #F89939; }
.ext-routes-meta { font-size: 11px; color: #9ca3af; }
.ext-routes-error {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 6px; font-size: 12.5px;
}
.ext-routes-error-msg { color: #991b1b; flex: 1 1 auto; }
.ext-routes-error-retry {
    background: #fff; color: #991b1b;
    border: 1px solid #fecaca; border-radius: 5px;
    padding: 4px 10px; font-size: 11.5px; cursor: pointer;
}
.ext-routes-error-retry:hover { background: #fef2f2; }

/* Schedule chips on Selective Forwarding rows (live active state). */
.ext-routes-sched {
    display: inline-block;
    margin: 2px 0 0 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f3f4f6; color: #4b5563;
    font-size: 10.5px; font-weight: 600;
}
.ext-routes-sched.on  { background: #ECFDF5; color: #047857; }
.ext-routes-sched.off { background: #f9fafb; color: #9ca3af; }

/* ── Shared profile card: select rows ──────────────────────────────
   Used by the Department row on all four entity types (Auto Attendant,
   Call Center, Hunt Group, Extension) via
   company/shared/templates/service_profile.php. Matches the canonical
   settings-row field spec (34px tall, 7px radius, 1px #C9D6E6, 13px/500)
   so the select sits flush with the text rows above it. */

.aa-profile-basic-card .shared-profile-select:disabled {
    background-color: #F6F8FA;
    color: #8A97A8;
    cursor: not-allowed;
}
/* Voicemail is on but nothing routes a caller to it. The entity decides
   whether there is a warning; this is where every entity's looks the same. */
.aa-unified-shell--voicemail .aa-vm-routing-warning {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #FEF9F1;
    border: 1px solid #F0D9B5;
    border-radius: 8px;
    color: #7A5A1E;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
}

/* Shown instead of a dead dropdown when the company has no departments,
   and under a required identity field to say what the platform will accept. */
.aa-profile-basic-card .shared-profile-field-hint,
.aa-profile-basic-card .shared-profile-select-hint {
    display: block;
    margin-top: 6px;
    color: #6B7A8D;
    font-size: 12px;
    font-weight: 500;
}

/* ── AI answering card (company/services/ai_answering/) ────────────
   The rows take the SETTINGS ROW canon above like every other card.
   Only what is particular to this card is stated here: the
   instructions textarea (the one field that is not 34px, on a wide row
   with its label at the top), the rings picker beside the Unanswered
   calls select, the hints and the note. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) #ai_answering .aa-oa-field-row.ai-answering-instructions-row {
    grid-template-columns: 240px minmax(0, 1fr);
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) #ai_answering .aa-oa-field-row.ai-answering-instructions-row .aa-oa-field-label {
    align-self: start;
    padding-top: 7px;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) #ai_answering .aa-oa-field-input textarea.form-control {
    width: 100% !important;
    max-width: 100% !important;
    /* No height here, ever: a height that is !important on a textarea
       kills the grip at its corner (v4_forms.css, 2026-09-20; found dead
       here on 2026-09-22). The box is as tall as its rows, at least 92px,
       and drags taller. */
    min-height: 92px !important;
    font: 400 13px/19px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #0E2749 !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    padding: 8px 10px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    resize: vertical;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) #ai_answering .aa-oa-field-input textarea.form-control:focus {
    border-color: var(--v4-brand-orange, #F89939) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(248, 153, 57, 0.12) !important;
}
/* "after [4] rings" beside the Unanswered calls select: the third column. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) #ai_answering .aa-oa-field-control.ai-answering-rings {
    grid-column: 3;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 0;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) #ai_answering .aa-oa-field-control.ai-answering-rings.hidden {
    display: none;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) #ai_answering .ai-answering-rings-label {
    margin: 0;
    font: 500 13px/20px "Plus Jakarta Sans", system-ui, sans-serif;
    color: #455470;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) #ai_answering .aa-oa-field-control select.form-control.ai-answering-rings-select {
    width: 72px !important;
    max-width: 72px !important;
    height: 34px !important;
    min-height: 0 !important;
    font: 400 13px/34px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #0E2749 !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    /* room on the right for the select's arrow (v4_forms.css) */
    padding: 0 30px 0 10px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
}
/* The card prints fields only: what explains a field is its FIELD HELP (the
   (i) after the label), so the hint and note paragraphs this block dressed
   until 2026-09-20 are gone from the view. */

/* ===================================================================
   The account record's History panel and the Configuration page
   (company/shared/templates/config_history_panel.php,
   company/shared/js/config_history.js, company/configuration/).
   ONE home for these styles; never copy them into an entity folder.
   =================================================================== */
.cfg-history { padding: 18px 20px 14px; }
.cfg-history-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.cfg-history-title { font-size: 15px; font-weight: 700; color: #1B3557; }
.cfg-history-intro { font-size: 12.5px; color: #5B6B82; max-width: 68ch; margin-top: 2px; }
.cfg-history-status { font-size: 12px; color: #5B6B82; text-align: right; white-space: nowrap; }
.cfg-history-list { display: flex; flex-direction: column; border-top: 1px solid #E9ECEF; }
.cfg-history-row { display: grid; grid-template-columns: 150px 1fr; column-gap: 14px; row-gap: 2px; width: 100%; text-align: left; background: #FFFFFF; border: 0; border-bottom: 1px solid #F0F1F4; padding: 10px 6px; cursor: pointer; font: inherit; color: #1B3557; }
.cfg-history-row:hover { background: #F6F8FA; }
.cfg-history-row:focus-visible { outline: 2px solid #F89939; outline-offset: -2px; }
.cfg-history-when { font-size: 12px; color: #5B6B82; font-variant-numeric: tabular-nums; grid-row: span 3; padding-top: 2px; }
.cfg-history-what { font-size: 13.5px; }
.cfg-history-action { font-weight: 700; }
.cfg-history-row--deleted .cfg-history-action { color: #D9534F; }
.cfg-history-row--created .cfg-history-action { color: #10B981; }
.cfg-history-row--outside .cfg-history-action { color: #D97E1F; }
.cfg-history-kind { color: #5B6B82; }
.cfg-history-name { font-weight: 600; }
.cfg-history-who { font-size: 12.5px; color: #5B6B82; }
.cfg-history-fields { display: inline-block; font-size: 11.5px; padding: 0 6px; border: 1px solid #E9ECEF; border-radius: 6px; margin-left: 4px; }
.cfg-history-summary { font-size: 12.5px; color: #1B3557; }
.cfg-history-empty { padding: 14px 6px; font-size: 13px; color: #5B6B82; }
.cfg-history-foot { padding-top: 10px; }
.cfg-history-more { font: inherit; font-size: 13px; font-weight: 600; color: #1B3557; background: #FFFFFF; border: 1px solid #C9D6E6; border-radius: 7px; height: 34px; padding: 0 14px; cursor: pointer; }
.cfg-history-more:hover { background: #F6F8FA; }
.cfg-history-detail { margin-top: 14px; border: 1px solid #E9ECEF; border-radius: 10px; background: #FFFFFF; }
.cfg-history-detail-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #E9ECEF; }
.cfg-history-detail-title { font-size: 13.5px; font-weight: 700; color: #1B3557; }
.cfg-history-detail-close { font: inherit; font-size: 20px; line-height: 1; color: #5B6B82; background: none; border: 0; cursor: pointer; }
.cfg-history-detail-body { padding: 12px 14px; }
.cfg-history-meta { font-size: 12px; color: #5B6B82; margin-bottom: 6px; }
.cfg-history-meta code { font-size: 11.5px; }
.cfg-history-detail-summary { font-size: 13px; color: #1B3557; margin-bottom: 10px; }
.cfg-history-diff { overflow-x: auto; }
.cfg-history-diff table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cfg-history-diff th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #5B6B82; padding: 6px 8px; border-bottom: 1px solid #1B3557; }
.cfg-history-diff td { padding: 6px 8px; border-bottom: 1px solid #F0F1F4; vertical-align: top; word-break: break-word; }
.cfg-history-path { font-family: "JetBrains Mono", Consolas, monospace; font-size: 11.5px; color: #1B3557; white-space: nowrap; }
.cfg-history-nil { color: #5B6B82; font-style: italic; }

.cfg-page { display: flex; flex-direction: column; gap: 16px; }
.cfg-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cfg-page-title { font-size: 20px; font-weight: 700; color: #1B3557; margin: 0; }
.cfg-page-sub { font-size: 13px; color: #5B6B82; margin-top: 4px; max-width: 70ch; }
.cfg-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-btn { font: inherit; font-size: 13px; font-weight: 600; color: #1B3557; background: #FFFFFF; border: 1px solid #C9D6E6; border-radius: 7px; height: 34px; padding: 0 14px; cursor: pointer; }
.cfg-btn:hover { background: #F6F8FA; }


.cfg-btn[disabled] { opacity: .55; cursor: default; }
.cfg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cfg-tile { border: 1px solid #E9ECEF; border-radius: 10px; background: #FFFFFF; padding: 12px 14px; }
.cfg-tile-n { font-size: 22px; font-weight: 700; color: #1B3557; font-variant-numeric: tabular-nums; }
.cfg-tile-l { font-size: 12px; color: #5B6B82; }
.cfg-checks { border: 1px solid #E9ECEF; border-radius: 10px; background: #FEF9F1; padding: 14px 16px; }
.cfg-checks-title { font-size: 13.5px; font-weight: 700; color: #1B3557; margin-bottom: 6px; }
.cfg-checks ul { margin: 0; padding-left: 18px; font-size: 13px; color: #1B3557; }
.cfg-checks li { margin: 4px 0; }
.cfg-result { font-size: 13px; color: #1B3557; padding: 10px 14px; border: 1px solid #E9ECEF; border-radius: 10px; background: #F6F8FA; }
.cfg-result[hidden] { display: none; }

/* Restore (the account record): the plan box under a history entry or a removed item, ONE place for all pages */
.cfg-restore { margin-top: 12px; border: 1px solid #E9ECEF; border-radius: 10px; background: #FEF9F1; padding: 12px 14px; }
.cfg-restore-title { font-weight: 600; color: #0E2749; margin-bottom: 6px; }
.cfg-restore ul { margin: 6px 0 8px 18px; padding: 0; }
.cfg-restore li { margin: 2px 0; font-size: 13px; }
.cfg-restore-warn { color: #B45309; font-size: 13px; margin: 4px 0; }
.cfg-restore-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.cfg-restore-row input[type="text"] { border: 1px solid #E9ECEF; border-radius: 6px; padding: 6px 10px; font: inherit; width: 160px; }
.cfg-restore-steps li.ok::before { content: "\2713\00a0"; color: #10B981; }
.cfg-restore-steps li.failed::before { content: "\2717\00a0"; color: #D9534F; }
.cfg-btn-restore { border: 1px solid #F89939; background: #FFFFFF; color: #0E2749; border-radius: 6px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.cfg-btn-restore:hover { background: #FBB26A; }
.cfg-btn-restore[disabled] { opacity: .5; cursor: default; }
.cfg-removed { margin-top: 18px; }
.cfg-removed-title { font-weight: 600; color: #0E2749; margin-bottom: 6px; }
.cfg-removed-item { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid #F0F1F4; font-size: 13px; }
.cfg-removed-item .cfg-removed-name { font-weight: 600; }
.cfg-removed-item .cfg-removed-meta { color: #6B7280; }

/* ============================================================
   MEMBER TABLE: the assign-a-list-of-people table (Busy Lamp Field and
   Assistance on the extension page, the Agents lists of a call center
   and a hunt group). ONE table by class, the look the queue pages had:
   full width, small uppercase heads, a hairline under every row. Until
   2026-09-18 the four templates carried their own cell paddings inline,
   the extension page sized the search box and the cells on its own, and
   the queue pages restated the table under their own ids.
   Markup: table.table.table_no_padding.aa-member-table > thead > th.label,
   tbody(.sortable) > tr.user > td.drag_handle | td.notify_section > .checkbox
   | td.text ... ; the last row holds the Show more / Show all links.
   ============================================================ */
/* The card body that holds a member table (.aa-member-section, with the
   feature's own hook class beside it): full width, flush under the header. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-section {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-section.hidden {
    display: none;
}

body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    margin: 4px 0 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    white-space: nowrap;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table thead,
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table thead tr {
    background: transparent !important;
    box-shadow: none !important;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table th.label {
    padding: 0 14px 8px 0 !important;
    font: 750 12px/16px "Plus Jakarta Sans", system-ui, sans-serif !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #445E82 !important;
    text-align: left !important;
    vertical-align: bottom !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #E4EAF2 !important;
    box-shadow: none !important;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table td {
    padding: 10px 14px 10px 0 !important;
    font: 400 13px/20px "Plus Jakarta Sans", system-ui, sans-serif;
    color: #0E2749 !important;
    vertical-align: middle !important;
    border: 0 !important;
    border-bottom: 1px solid #E2EAF3 !important;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table tbody tr:last-child td {
    border-bottom: 0 !important;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table :is(th, td):last-child {
    padding-right: 0 !important;
}
/* Every cell of a row sits on ONE centre line (2026-09-20): the grip, the
   box and the words. The grip cell is a plain table cell, 28px of grip and
   the 14px cell gap, with its 16px glyph box centred on the row like the
   text beside it. The box is a 20px flex line: its label carried the form
   baseline's 4px bottom margin and sat on the text baseline of a 29px block,
   so the box stood 4.5px higher than the name in the same row. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table td.drag_handle {
    width: 28px;
    cursor: grab;
}
/* The grip is the icon font's own 16px box (icon_font.css draws the glyph
   absolutely inside a position:relative .container_icon; leave that alone):
   a block the cell's vertical-align centres on the row. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table td.drag_handle .container_icon.draggable {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table .checkbox {
    display: flex;
    align-items: center;
    height: 20px;
    margin: 0;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table .checkbox > label {
    display: flex;
    align-items: center;
    height: 20px;
    margin: 0 !important;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table .text.clickable {
    font: 600 13px/20px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: var(--v4-brand-dark, #D97E1F) !important;
    cursor: pointer;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table .text.clickable + .text.clickable {
    margin-left: 12px;
}
/* A control in a cell (the call center's agent State select): the SETTINGS
   ROW field on the table's own width, 34px, 7px, #C6D3E1. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table td :is(select, input[type="text"]).form-control {
    width: auto !important;
    min-width: 120px !important;
    max-width: 100% !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font: 400 13px/34px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #0E2749 !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
}
/* A select in a cell keeps the room its arrow needs (the ONE select
   chevron, v4_forms.css), like a select in a settings row. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table td select.form-control {
    padding-right: 32px !important;
}
/* The call center's Joined column keeps its own tint. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-member-table .checkbox_icon_wrapper.aa-member-check--joined {
    border-color: #445E82;
    color: #445E82;
}

/* HEADER SEARCH: the filter box beside a member table, in the card
   header's actions (Busy Lamp Field, the Agents card of a call center and a
   hunt group). One 34px field, 200 wide. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .agent-search-input {
    width: 200px !important;
    max-width: 200px !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    font: 400 13px/34px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #0E2749 !important;
    border: 1px solid #C6D3E1 !important;
    border-radius: 7px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .agent-search-input:focus {
    border-color: var(--v4-brand-orange, #F89939) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(248, 153, 57, 0.12) !important;
}
/* The search belongs to the table: while the card is switched off there is
   no table, so there is no search (his rule, 2026-09-20; Busy Lamp Field and
   Assistance showed a search box beside a switched-off card). The header's
   own collapsed state decides, the same class that drops the hairline. */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-prealert-section-header.section-collapsed .agent-search-input {
    display: none !important;
}

/* ============================================================
   FIELD HELP: the (i) after a row's label (vtFieldHelp(), view_utils.php).
   His rule, 2026-09-20: a card prints its fields and nothing else; what
   explains a field waits behind the (i) and shows in a small white panel on
   hover, on keyboard focus and on a tap. No script. The same grey-to-navy
   (i) as the card's own info button. The panel opens under the (i), left
   edge on the label column, 320px at most, above the rows below it.
   Markup: .aa-oa-field-label > label.label + button.aa-field-help >
           svg + span.aa-field-help-text[role=tooltip]
   ============================================================ */
body.v4-body #v4-app .v4-content .aa-field-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0 0 0 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9CA3AF;
    cursor: help;
    vertical-align: -3px;
    transition: color 0.15s;
}
body.v4-body #v4-app .v4-content .aa-field-help svg {
    display: block;
    width: 16px;
    height: 16px;
}
body.v4-body #v4-app .v4-content .aa-field-help:hover,
body.v4-body #v4-app .v4-content .aa-field-help:focus {
    color: #0E2749;
    outline: none;
}
body.v4-body #v4-app .v4-content .aa-field-help:focus-visible {
    box-shadow: 0 0 0 2px rgba(248, 153, 57, 0.35);
}
body.v4-body #v4-app .v4-content .aa-field-help .aa-field-help-text {
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    z-index: 60;
    display: none;
    width: max-content;
    max-width: 320px;
    padding: 10px 12px;
    border: 1px solid #DDE7F1;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(14, 39, 73, 0.12);
    font: 400 12.5px/18px "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: normal;
    color: #455470;
    cursor: default;
}
/* Hover for the mouse (and a tap, which holds hover on a touch screen),
   :focus-visible for the keyboard. Not plain :focus: a clicked (i) keeps the
   focus, and its panel stayed open under the next one the mouse hovered. */
body.v4-body #v4-app .v4-content .aa-field-help:hover .aa-field-help-text,
body.v4-body #v4-app .v4-content .aa-field-help:focus-visible .aa-field-help-text {
    display: block;
}

/* ============================================================
   OPTION CHECK: a plain yes / no option inside a card, with nothing under
   it, is a checkbox with its words: Barge-in's Warning Tone, Call
   Recording's "Also record voicemails" (his rule, 2026-09-20; Warning Tone
   was a second switch under the card's own switch). A SWITCH turns
   something on: the card, a rule, a number, or the field that sits under
   it. One 34px line like a settings row, the label's type, 5px between
   two options. A locked option is greyed and says why in its FIELD HELP.
   Markup: .aa-oa-settings-area > .aa-option-check-row >
             label.aa-option-check[.is-locked] > input[type=checkbox] + span
             [+ vtFieldHelp(), beside the label, never inside it: a button
              inside a label would tick the box]
   ============================================================ */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-option-check-row {
    display: flex;
    align-items: center;
    min-height: var(--vt-row-line, 34px);
    margin: 0;
    padding: 0;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-option-check-row + .aa-option-check-row {
    margin-top: var(--vt-row-gap, 5px);
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) label.aa-option-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    font: 600 13px/20px "Plus Jakarta Sans", system-ui, sans-serif !important;
    letter-spacing: 0 !important;
    color: #1B3557 !important;
    cursor: pointer;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) label.aa-option-check.is-locked {
    color: #8A98A8 !important;
    cursor: not-allowed;
}

/* FEATURE STATUS: a status line under a card's description (Webex
   verified, Callpop last active, Calldock needs an email). Green tick or
   dot when it is good news, red when it is not, grey when it is neither.
   Inner spans (.aa-status-ok / -bad / -muted / -note) colour a part of the
   line the script fills in. */
body.v4-body #v4-app .v4-content .aa-prealert-section-header > div > .aa-feature-status {
    margin: 6px 0 0;
    font: 500 13px/18px "Plus Jakarta Sans", system-ui, sans-serif;
    color: #6B7F97;
}
body.v4-body #v4-app .v4-content .aa-feature-status .fa {
    font-size: 11px;
    margin-right: 4px;
    color: #10B981;
    vertical-align: 0;
}
body.v4-body #v4-app .v4-content .aa-feature-status.is-muted .fa {
    color: #C5D0DC;
}
body.v4-body #v4-app .v4-content .aa-feature-status.is-bad .fa {
    color: #D9534F;
}
body.v4-body #v4-app .v4-content .aa-feature-status .aa-status-ok {
    color: #10B981;
    font-weight: 600;
}
body.v4-body #v4-app .v4-content .aa-feature-status .aa-status-bad {
    color: #D9534F;
    font-weight: 600;
}
body.v4-body #v4-app .v4-content .aa-feature-status .aa-status-muted {
    color: #8B95A5;
}
body.v4-body #v4-app .v4-content .aa-feature-status .aa-status-note {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 17px;
    color: #8B95A5;
}
body.v4-body #v4-app .v4-content .aa-feature-status code {
    font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace;
    color: inherit;
    background: transparent;
    padding: 0;
}

/* FIELD HINT: a line of help under a field in a settings row. --warn is
   the amber note a change needs (the apps-login email). */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-input .aa-oa-field-hint {
    margin: 6px 0 0;
    font: 500 12px/17px "Plus Jakarta Sans", system-ui, sans-serif;
    color: #6B7A8D;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-input .aa-oa-field-hint[hidden] {
    display: none;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-oa-field-input .aa-oa-field-hint--warn {
    color: #B45309;
}

/* BETA BADGE: the small chip after a card title (Calldock). */
body.v4-body #v4-app .v4-content .aa-prealert-section-title .aa-beta-badge {
    display: inline-block;
    vertical-align: 2px;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #FEF3E6;
    color: #C46E16;
    font: 600 10px/14px "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* PRE-ALERT SCHEDULES: a second criterion is a repeat sub-card under the
   first, a hairline between them, its own title and trash (the REPEAT
   CARD DELETE canon). */
body.v4-body #v4-app .v4-content :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-prealert-schedule-block + .aa-prealert-schedule-block {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--aa-ext-prealert-divider, #E4EBF3);
}

/* The delete modal's "something still sends calls here" list. */
.v4-entity-delete-error .v4-entity-delete-routes {
    margin: 8px 0 0 18px;
    padding: 0;
}
.v4-entity-delete-error .v4-entity-delete-routes li {
    margin: 2px 0;
}

/* Small screens: the legacy feature rows and the profile editor stack. These
   sat in the extension stylesheet until 2026-09-18 while naming the call
   center and hunt group pages too. */
@media (max-width: 760px) {
    body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .v4-feature-copy {
        max-width: 100% !important;
    }
    body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature :is(.col-12.d-flex.slim_row, .form-group.row > .col-12.d-flex) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) .aa-call-feature :is(.bwa_main_inputs, .schedule_selector_wrapper, .col-12.d-flex.slim_row > div:not(.error_message)) {
        grid-column: 1 !important;
        max-width: 100% !important;
    }
    body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card,
    body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card #alternative_number :is(.alternative_number_main.form-group.row, .alternative_number_select.form-group.row) {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 8px !important;
    }
    body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(#profile, #profile-section) .aa-profile-basic-card > .form-group.row > [class*="col-"]:nth-child(2),
    body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #call_center_app, #hunt_group_app, #auto_attendant_app, #agent_app) :is(#profile, #profile-section) .aa-profile-number-card > .col-8 {
        grid-column: 1 !important;
        justify-self: start !important;
    }
}