/* ============================================================
   VOCATECH V4 — FORM POLISH (2026-04)
   Unifies every form primitive inside detail/edit pages:
     inputs, selects, textareas, toggles, checkboxes, radios,
     labels, form-groups, buttons.
   All rules are scoped under body.v4-body .v4-content so the
   legacy login page + reports page Vue forms stay untouched.
   Detaches cleanly — removing this file from main_template_v3.php
   reverts every detail page to its legacy field styling.
   ============================================================ */

/* ===== Typography baseline inside forms ===== */
body.v4-body .v4-content label,
body.v4-body .v4-content .label,
body.v4-body .v4-content .col-form-label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--v4-text-secondary) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
}
body.v4-body .v4-content .section_item .col-form-label {
    line-height: 1.4 !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
}

/* ===== Inputs, textareas, selects — unified (rounder + slightly taller) ===== */
body.v4-body .v4-content .form-control:not(.text_to_convert):not(#greeting_select_dropdown):not(.voice_select):not(.tts_language_select):not(.greeting-select-dropdown),
body.v4-body .v4-content input[type="text"]:not(.v4-search-input):not(.v4-chat-input):not(.v4-list-filter input):not([name="add_new_greeting_input"]),
body.v4-body .v4-content input[type="email"],
body.v4-body .v4-content input[type="password"],
body.v4-body .v4-content input[type="number"],
body.v4-body .v4-content input[type="tel"],
body.v4-body .v4-content input[type="url"],
body.v4-body .v4-content input[type="search"]:not(.v4-search-input),
body.v4-body .v4-content textarea:not(.text_to_convert),
body.v4-body .v4-content select:not(#greeting_select_dropdown):not(.voice_select):not(.tts_language_select):not(.greeting-select-dropdown):not([name="add_new_greeting_select"]) {
    height: 40px !important;
    padding: 8px 14px !important;
    background-color: var(--v4-card) !important;
    border: 1px solid var(--v4-border) !important;
    border-radius: var(--v4-radius-sm) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 14px !important;
    color: var(--v4-text) !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
body.v4-body .v4-content textarea:not(.text_to_convert) {
    height: auto !important;
    min-height: 74px !important;
    padding: 10px 12px !important;
    resize: vertical !important;
}
body.v4-body .v4-content .form-control::placeholder,
body.v4-body .v4-content input::placeholder,
body.v4-body .v4-content textarea::placeholder {
    color: var(--v4-text-muted) !important;
    opacity: 1 !important;
}
body.v4-body .v4-content .form-control:not(.text_to_convert):not(#greeting_select_dropdown):not(.voice_select):not(.greeting-select-dropdown):focus,
body.v4-body .v4-content input:not([type="checkbox"]):not([type="radio"]):not(.v4-search-input):not(.v4-chat-input):not([name="add_new_greeting_input"]):focus,
body.v4-body .v4-content textarea:not(.text_to_convert):focus,
body.v4-body .v4-content select:not(#greeting_select_dropdown):not(.voice_select):not(.tts_language_select):not(.greeting-select-dropdown):not([name="add_new_greeting_select"]):focus {
    outline: none !important;
    border-color: var(--v4-brand) !important;
    box-shadow: 0 0 0 3px var(--v4-brand-glow) !important;
}
body.v4-body .v4-content .form-control:disabled,
body.v4-body .v4-content input:disabled,
body.v4-body .v4-content textarea:disabled,
body.v4-body .v4-content select:disabled {
    background-color: var(--v4-surface-alt) !important;
    color: var(--v4-text-muted) !important;
    cursor: not-allowed !important;
}
body.v4-body .v4-content .form-control.is-invalid,
body.v4-body .v4-content input.is-invalid {
    border-color: var(--v4-red) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* ===== Selects — custom chevron ===== */
body.v4-body .v4-content select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 32px !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237D90A6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px top calc(50% - 1px) !important;
    background-size: 14px !important;
}

/* ===== Toggle switches (.switch + .slider) ===== */
body.v4-body .v4-content .switch {
    position: relative !important;
    display: inline-block !important;
    width: 38px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}
body.v4-body .v4-content .switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
body.v4-body .v4-content .switch .slider,
body.v4-body .v4-content .switch .slider.small {
    position: absolute !important;
    inset: 0 !important;
    cursor: pointer !important;
    background: #CBD5E1 !important;
    border: none !important;
    border-radius: 999px !important;
    transition: background 0.2s !important;
}
body.v4-body .v4-content .switch .slider::before,
body.v4-body .v4-content .switch .slider.small::before {
    content: '' !important;
    position: absolute !important;
    left: 3px !important;
    top: 3px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s !important;
}
body.v4-body .v4-content .switch input:checked + .slider,
body.v4-body .v4-content .switch input:checked + .slider.small {
    background: var(--v4-navy) !important;
}
body.v4-body .v4-content .switch input:checked + .slider::before,
body.v4-body .v4-content .switch input:checked + .slider.small::before {
    transform: translateX(16px) !important;
}
body.v4-body .v4-content .switch:hover .slider:not(:checked) {
    background: #B0BCC9 !important;
}

/* ===== Checkboxes (native + custom .checkbox) ===== */
body.v4-body .v4-content input[type="checkbox"]:not(.v4-chat-input) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid var(--v4-border) !important;
    border-radius: 4px !important;
    background: var(--v4-card) !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.15s !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    margin: 0 !important;
}
body.v4-body .v4-content input[type="checkbox"]:hover {
    border-color: var(--v4-navy) !important;
}
body.v4-body .v4-content input[type="checkbox"]:checked {
    background: var(--v4-navy) !important;
    border-color: var(--v4-navy) !important;
}
body.v4-body .v4-content input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}
body.v4-body .v4-content input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(14, 39, 73, 0.12) !important;
}

/* Legacy custom checkbox containers */
body.v4-body .v4-content .checkbox_icon_wrapper {
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.v4-body .v4-content .checkbox input:checked + .checkbox_icon_wrapper {
    background: var(--v4-navy) !important;
    border-color: var(--v4-navy) !important;
    color: #FFFFFF !important;
}

/* ===== Radios ===== */
body.v4-body .v4-content input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid var(--v4-border) !important;
    border-radius: 50% !important;
    background: var(--v4-card) !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.15s !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    margin: 0 !important;
}
body.v4-body .v4-content input[type="radio"]:hover {
    border-color: var(--v4-brand) !important;
}
body.v4-body .v4-content input[type="radio"]:checked {
    border-color: var(--v4-brand) !important;
    border-width: 5px !important;
    background: var(--v4-card) !important;
}
body.v4-body .v4-content input[type="radio"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--v4-brand-glow) !important;
}

/* ===== Form groups — light touch only
   Don't force display:flex on .form-group. Legacy templates use
   .form-group as a section wrapper that contains a label (or header)
   on top of content — forcing flex collapses them into a single row
   and pushes content to the right. Keep the original block flow.
   Only normalize margin/padding/border. */
body.v4-body .v4-content div.form-group,
body.v4-body .v4-content fieldset.form-group,
body.v4-body .v4-content section.form-group {
    margin: 0 !important;
    padding: 8px 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Bootstrap .form-group.row — Bootstrap's own grid does the job;
   only normalize left/right margins so the row stays inside its card. */
body.v4-body .v4-content div.form-group.row,
body.v4-body .v4-content fieldset.form-group.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.v4-body .v4-content .form-group:last-child,
body.v4-body .v4-content .form-group.last,
body.v4-body .v4-content .form-group.single {
    border-bottom: none !important;
}
body.v4-body .v4-content .form-group.first {
    padding-top: 0 !important;
}
body.v4-body .v4-content .form-group.middle { border-bottom: 1px solid var(--v4-border-light) !important; }

/* Slim / inline rows — scope to div/form only so we don't break
   .slim_row usages on <tr> inside a table (the AA menu uses it) */
body.v4-body .v4-content div.slim_row,
body.v4-body .v4-content form.slim_row,
body.v4-body .v4-content section.slim_row {
    min-height: 40px !important;
    padding: 6px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--v4-border-light) !important;
}
body.v4-body .v4-content div.slim_row:last-child,
body.v4-body .v4-content form.slim_row:last-child {
    border-bottom: none !important;
}

/* Section items — keep label in sync with new row height. Intentionally
   NOT forcing display: flex — .section_item is also used on the companies
   list's "Add Company" form, which toggles inline display:none from JS.
   A !important display would override that. Bootstrap's .row already
   supplies display:flex where we need it. */
body.v4-body .v4-content .section_item {
    min-height: 48px !important;
    align-items: center !important;
}

/* ===== Buttons — Save/Cancel/Delete unified ===== */
/* Excludes .aa-menu-button (menu-key Play/Edit/Stop) — those are
   sized by the greeting control system in v4_recorder_module.css. */
body.v4-body .v4-content .btn:not(.hidden):not(.aa-menu-button) {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 9px 18px !important;
    height: 38px !important;
    border-radius: var(--v4-radius-sm) !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
}
body.v4-body .v4-content .btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--v4-brand-glow) !important;
}

/* Primary / Save — navy fill (only the bottom-of-page Save, not inline) */
body.v4-body .v4-content .btn-save,
body.v4-body .v4-content .btn-primary,
body.v4-body .v4-content .btn.btn-blue,
body.v4-body .v4-content .btn_primary {
    width: auto !important;
    background: var(--v4-navy) !important;
    border: 1px solid var(--v4-navy) !important;
    color: white !important;
}
/* Only apply min-width to buttons sitting in the main submit row,
   so inline action buttons (Play/Record/Speech/etc) size to their
   label and don't truncate. */
body.v4-body .v4-content .extension.mt-5 .btn-save {
    min-width: 90px !important;
}
body.v4-body .v4-content .btn-save:hover,
body.v4-body .v4-content .btn-primary:hover,
body.v4-body .v4-content .btn.btn-blue:hover {
    background: var(--v4-ink) !important;
    border-color: var(--v4-ink) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px -6px rgba(7, 21, 37, 0.35) !important;
}

/* Secondary / Cancel — outline */
body.v4-body .v4-content .btn-cancel,
body.v4-body .v4-content .btn-outline-primary,
body.v4-body .v4-content .btn-secondary,
body.v4-body .v4-content .btn-outline-secondary {
    background: var(--v4-card) !important;
    border: 1px solid var(--v4-border) !important;
    color: var(--v4-text) !important;
}
body.v4-body .v4-content .btn-cancel:hover,
body.v4-body .v4-content .btn-outline-primary:hover,
body.v4-body .v4-content .btn-secondary:hover {
    border-color: var(--v4-navy) !important;
    color: var(--v4-navy) !important;
    background: var(--v4-surface) !important;
}

/* Danger / Delete */
body.v4-body .v4-content .btn-delete,
body.v4-body .v4-content .btn-outline-danger,
body.v4-body .v4-content .btn-danger {
    background: var(--v4-card) !important;
    border: 1px solid var(--v4-border) !important;
    color: var(--v4-red) !important;
}
body.v4-body .v4-content .btn-delete:hover,
body.v4-body .v4-content .btn-outline-danger:hover,
body.v4-body .v4-content .btn-danger:hover {
    background: #fef2f2 !important;
    border-color: var(--v4-red) !important;
    color: var(--v4-red) !important;
}

/* Orange brand button */
body.v4-body .v4-content .btn-warning {
    background: var(--v4-brand) !important;
    border: 1px solid var(--v4-brand) !important;
    color: white !important;
}
body.v4-body .v4-content .btn-warning:hover {
    background: var(--v4-brand-hover) !important;
    border-color: var(--v4-brand-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px -8px rgba(240, 160, 48, 0.5) !important;
}

/* Compact table-row buttons */
body.v4-body .v4-content .btn.table_button {
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    min-width: 0 !important;
}

/* Button row — bottom of edit pages (Save + Cancel + Delete) */
body.v4-body .v4-content .extension.mt-5 {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 20px 0 0 !important;
    justify-content: center !important;
}

/* ===== Dropdowns (custom sort / filter) ===== */
body.v4-body .v4-content .sort_dropdown,
body.v4-body .v4-content .dropdown-toggle {
    border: 1px solid var(--v4-border) !important;
    border-radius: var(--v4-radius-sm) !important;
    background: var(--v4-card) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--v4-text) !important;
    box-shadow: none !important;
}
body.v4-body .v4-content .sort_dropdown:hover,
body.v4-body .v4-content .dropdown-toggle:hover {
    border-color: var(--v4-brand) !important;
}
body.v4-body .v4-content .dropdown-menu {
    border: 1px solid var(--v4-border-light) !important;
    border-radius: var(--v4-radius) !important;
    box-shadow: var(--v4-shadow-panel) !important;
    padding: 6px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
body.v4-body .v4-content .dropdown-item {
    border-radius: var(--v4-radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--v4-text) !important;
    transition: all 0.1s !important;
}
body.v4-body .v4-content .dropdown-item:hover,
body.v4-body .v4-content .dropdown-item.selected {
    background: var(--v4-brand-soft) !important;
    color: var(--v4-brand-dark) !important;
}

/* ===== Input groups (input + addon) ===== */
body.v4-body .v4-content .input-group {
    border-radius: var(--v4-radius-sm) !important;
    overflow: hidden !important;
}
body.v4-body .v4-content .input-group-prepend,
body.v4-body .v4-content .input-group-append {
    display: flex !important;
}
body.v4-body .v4-content .input-group-text {
    background: var(--v4-surface-alt) !important;
    border: 1px solid var(--v4-border) !important;
    color: var(--v4-text-secondary) !important;
    font-size: 13px !important;
    font-family: inherit !important;
}

/* ===== Anchor links inside forms ===== */
body.v4-body .v4-content a:not(.btn):not(.v4-list-action):not(.v4-nav-item):not(.v4-list-cta):not(.v4-access-denied-primary) {
    color: var(--v4-navy) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed var(--v4-border) !important;
    transition: color 0.15s, border-color 0.15s !important;
}
body.v4-body .v4-content a:not(.btn):not(.v4-list-action):not(.v4-nav-item):not(.v4-list-cta):not(.v4-access-denied-primary):hover {
    color: var(--v4-brand-dark) !important;
    border-bottom-color: var(--v4-brand) !important;
}

/* ===== Validation feedback ===== */
body.v4-body .v4-content .invalid-feedback,
body.v4-body .v4-content .error {
    display: block !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    color: var(--v4-red) !important;
}

/* ===== Widgets left untouched so they keep working ===== */
/* Audio/recorder, DropZone, jQuery UI sortables, date pickers keep their own
   layout. Only the form primitives around them get the new treatment. */
body.v4-body .v4-content .dropzone,
body.v4-body .v4-content .ui-sortable-handle,
body.v4-body .v4-content .aa-submenu-section,
body.v4-body .v4-content .audio_player,
body.v4-body .v4-content .recorder {
    /* explicitly no override — legacy styles win */
}

/* ============================================================
   AUTO-ATTENDANT MENU EDITOR — de-nest the inner card
   ============================================================
   auto_attendant_inline.css uses IDs (#business .aa-unified-shell,
   #after-hours .aa-unified-shell, #holiday .aa-unified-shell) which
   beats class-only selectors. We target the same IDs with
   body.v4-body prefix to raise specificity above the AA inline CSS.
   ============================================================ */
body.v4-body #business .aa-unified-shell,
body.v4-body #after-hours .aa-unified-shell,
body.v4-body #holiday .aa-unified-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.v4-body #business .aa-unified-shell > .form-group,
body.v4-body #after-hours .aa-unified-shell > .form-group,
body.v4-body #holiday .aa-unified-shell > .form-group {
    margin: 0 !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--v4-border-light) !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.v4-body #business .aa-unified-shell > .form-group + .form-group,
body.v4-body #after-hours .aa-unified-shell > .form-group + .form-group,
body.v4-body #holiday .aa-unified-shell > .form-group + .form-group {
    margin-top: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--v4-border-light) !important;
}
body.v4-body #business .aa-unified-shell > .form-group:first-child,
body.v4-body #after-hours .aa-unified-shell > .form-group:first-child,
body.v4-body #holiday .aa-unified-shell > .form-group:first-child {
    border-top: none !important;
    padding-top: 2px !important;
}

/* "Greeting" subsection header becomes a block above content */
body.v4-body #business .aa-unified-shell .aa-subsection-header,
body.v4-body #after-hours .aa-unified-shell .aa-subsection-header,
body.v4-body #holiday .aa-unified-shell .aa-subsection-header {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}
body.v4-body #business .aa-unified-shell .aa-subsection-title,
body.v4-body #after-hours .aa-unified-shell .aa-subsection-title,
body.v4-body #holiday .aa-unified-shell .aa-subsection-title {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.v4-body #business .aa-unified-shell .aa-subsection-title label,
body.v4-body #after-hours .aa-unified-shell .aa-subsection-title label,
body.v4-body #holiday .aa-unified-shell .aa-subsection-title label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--v4-navy) !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.01em !important;
}

/* Inline form rows inside the greeting area (Recordings/Actions/Upload)
   stay as compact flex rows with label left + controls following */
body.v4-body #business .aa-unified-shell .inline_input_row,
body.v4-body #after-hours .aa-unified-shell .inline_input_row,
body.v4-body #holiday .aa-unified-shell .inline_input_row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 4px 0 !important;
}

/* ================================================================
   AA SUBSECTION LAYOUT — GREETING / MENU / SCHEDULING
   ================================================================
   Every AA pane (#business / #after-hours / #holiday / #submenu /
   #advanced) wraps its subsections (Greeting, Menu, Scheduling,
   Announcement, Pre-Alert, etc.) in a .form-group.notify_section.
   Force each to be a vertical block of its own:

     [Subsection label]           <-- aa-subsection-header
     [content fills full width]   <-- greeting / menu / schedule area

   Subsections within the same pane are divided by a clear top-border
   + breathing room so it reads as "distinct but paired".
   ================================================================ */
body.v4-body #business .aa-unified-shell .form-group.notify_section,
body.v4-body #after-hours .aa-unified-shell .form-group.notify_section,
body.v4-body #holiday .aa-unified-shell .form-group.notify_section,
body.v4-body #submenu .aa-submenu-layout .form-group.notify_section,
body.v4-body #submenu .form-group.notify_section,
body.v4-body #advanced .aa-prealert-layout .form-group.notify_section,
body.v4-body #advanced .form-group.notify_section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--v4-border) !important;
}
/* First subsection: no top border */
body.v4-body #business .aa-unified-shell .form-group.notify_section:first-child,
body.v4-body #after-hours .aa-unified-shell .form-group.notify_section:first-child,
body.v4-body #holiday .aa-unified-shell .form-group.notify_section:first-child,
body.v4-body #submenu .aa-submenu-layout .form-group.notify_section:first-child,
body.v4-body #submenu .form-group.notify_section:first-child,
body.v4-body #advanced .aa-prealert-layout .form-group.notify_section:first-child,
body.v4-body #advanced .form-group.notify_section:first-child {
    padding-top: 2px !important;
    border-top: none !important;
}

/* Each subsection's direct children stack at full width */
body.v4-body #business .aa-unified-shell .form-group.notify_section > *,
body.v4-body #after-hours .aa-unified-shell .form-group.notify_section > *,
body.v4-body #holiday .aa-unified-shell .form-group.notify_section > *,
body.v4-body #submenu .aa-submenu-layout .form-group.notify_section > *,
body.v4-body #submenu .form-group.notify_section > *,
body.v4-body #advanced .aa-prealert-layout .form-group.notify_section > *,
body.v4-body #advanced .form-group.notify_section > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* The subsection label becomes a proper section heading */
body.v4-body #business .aa-unified-shell .aa-subsection-header,
body.v4-body #after-hours .aa-unified-shell .aa-subsection-header,
body.v4-body #holiday .aa-unified-shell .aa-subsection-header,
body.v4-body #submenu .aa-subsection-header,
body.v4-body #advanced .aa-subsection-header {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}
body.v4-body #business .aa-unified-shell .aa-subsection-header label,
body.v4-body #after-hours .aa-unified-shell .aa-subsection-header label,
body.v4-body #holiday .aa-unified-shell .aa-subsection-header label,
body.v4-body #submenu .aa-subsection-header label,
body.v4-body #advanced .aa-subsection-header label,
body.v4-body #business .aa-unified-shell .aa-subsection-title label,
body.v4-body #after-hours .aa-unified-shell .aa-subsection-title label,
body.v4-body #holiday .aa-unified-shell .aa-subsection-title label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--v4-navy) !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.015em !important;
    text-transform: none !important;
}

/* ================================================================
   SAFETY NET — force every descendant of a greeting/schedule/menu/
   announcement area to be left-anchored (no auto margins, no
   end-alignment, no float-right). Guarantees the subsection label
   sits above flush-left control rows instead of a right-side cluster.
   ================================================================ */
/* Re-enable inline flex on the actual row containers that need
   label + input side by side (Recordings/Actions/Upload, schedule
   selectors, pre-alert rows) */

/* Menu key pills (0-9, *, #) — keep them crisp but not huge */
body.v4-body .v4-content .aa-unified-shell .menu_key {
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Empty menu table rows — tighten the vertical padding so the table
   doesn't look like a graveyard when no actions are configured yet */
body.v4-body .v4-content .aa-unified-shell table td,
body.v4-body .v4-content .aa-unified-shell table th {
    padding: 6px 8px !important;
}

/* ================================================================
   SHARP CORNERS UPLIFT (2026-04-20)
   Angular/pointy corners across the portal — reads as modern.
   Overrides any hardcoded pill (999px) or soft radius (8-16px).
   Preserves: avatars, radios, toggle knobs, dial-pad keys, status dots.
   ================================================================ */

/* === Shell chrome === */
body.v4-body .v4-sidebar-toggle,
body.v4-body .v4-nav-item,
body.v4-body .v4-sidebar-company {
    border-radius: 3px !important;
}
body.v4-body .v4-nav-item::before { border-radius: 0 2px 2px 0 !important; }

/* === List pages (Auto Attendants / Extensions / etc.) === */
body.v4-body .v4-list-title-icon { border-radius: 4px !important; }
body.v4-body .v4-list-cta {
    border-radius: 3px !important;
    box-shadow: none !important;
    padding: 9px 16px !important;
}
body.v4-body .v4-list-cta:hover {
    box-shadow: 0 4px 10px -4px rgba(240, 160, 48, 0.45) !important;
}
body.v4-body .v4-list-toolbar {
    border-radius: 4px 4px 0 0 !important;
}
body.v4-body .v4-list-filter input {
    border-radius: 3px !important;
}
body.v4-body .v4-list-table-wrap {
    border-radius: 0 0 4px 4px !important;
}
body.v4-body .v4-list-badge {
    border-radius: 3px !important;
    padding: 3px 8px !important;
    letter-spacing: 0.02em !important;
}
body.v4-body .v4-list-action { border-radius: 3px !important; }
body.v4-body .v4-list-empty { border-radius: 4px !important; }
body.v4-body .v4-list-empty-icon { border-radius: 4px !important; }

/* === Form primitives (scoped under v4-content) === */
body.v4-body .v4-content .form-control:not(.text_to_convert):not(#greeting_select_dropdown):not(.voice_select):not(.tts_language_select):not(.greeting-select-dropdown),
body.v4-body .v4-content input[type="text"]:not(.v4-search-input):not(.v4-chat-input):not(.v4-list-filter input):not([name="add_new_greeting_input"]),
body.v4-body .v4-content input[type="email"],
body.v4-body .v4-content input[type="password"],
body.v4-body .v4-content input[type="number"],
body.v4-body .v4-content input[type="tel"],
body.v4-body .v4-content input[type="url"],
body.v4-body .v4-content input[type="search"]:not(.v4-search-input),
body.v4-body .v4-content textarea:not(.text_to_convert),
body.v4-body .v4-content select:not(#greeting_select_dropdown):not(.voice_select):not(.tts_language_select):not(.greeting-select-dropdown):not([name="add_new_greeting_select"]),
body.v4-body .v4-content .btn,
body.v4-body .v4-content .sort_dropdown,
body.v4-body .v4-content .dropdown-toggle,
body.v4-body .v4-content .dropdown-menu,
body.v4-body .v4-content .dropdown-item,
body.v4-body .v4-content .input-group,
body.v4-body .v4-content .input-group-text {
    border-radius: 3px !important;
}

/* Checkboxes stay slightly rounded for scale (2px) */
body.v4-body .v4-content input[type="checkbox"]:not(.v4-chat-input) {
    border-radius: 2px !important;
}

/* === Card / section containers inside legacy detail pages === */
body.v4-body .v4-content .setting_box,
body.v4-body .v4-content .extension,
body.v4-body .v4-content .card,
body.v4-body .v4-content .panel,
body.v4-body .v4-content .form_section,
body.v4-body .v4-content .toggle_header {
    border-radius: 4px !important;
}

/* ================================================================
   AUTO-ATTENDANT SPECIFIC — override inline CSS pill buttons
   ================================================================
   auto_attendant_inline.css forces 999px radius on dozens of AA
   buttons (edit_greeting_name, add_alternative_number, save_schedule,
   etc.). Flip them all to sharp. Keep circular elements (menu keys,
   toggle knobs, status dots) intact. */

/* Circular dial-pad menu keys (0-9, *, #) stay circular */
body.v4-body .v4-content .aa-key-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--v4-surface-alt) !important;
    color: var(--v4-navy) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: 1px solid var(--v4-border) !important;
}

/* ================================================================
   PROFILE → NUMBER → ADDITIONAL NUMBER ROWS
   Fix the overlapping field layout. The legacy markup uses:
     .alternative_number_wrapper > .alternativenumber (d-flex, width:379px inline)
       > hidden input
       > .form-group.row (from dropdownInputSlim: .col-4 label + .col-8 select)
       > .remove_alternative_number button
   The 379px inline width + justify-content:space-between caused the
   label/select to overlap and the trash icon to float weirdly.
   ================================================================ */
body.v4-body .v4-content #profile-section #alternative_number {
    width: calc(100% - 44px) !important;
    max-width: 640px !important;
    margin: 14px 0 0 44px !important;
    padding: 16px 18px 14px !important;
    border: 1px solid var(--v4-border) !important;
    border-radius: 4px !important;
    background: var(--v4-card) !important;
    box-shadow: none !important;
}
body.v4-body .v4-content #profile-section #alternative_number .alternative_number_main,
body.v4-body .v4-content #profile-section #alternative_number .alternative_number_wrapper,
body.v4-body .v4-content #profile-section #alternative_number .alternative_number_wrapper .alternativenumber {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
}
/* Kill the inline width:379px + justify-content:space-between on .alternativenumber */
body.v4-body .v4-content #profile-section #alternative_number .alternativenumber {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}
/* The dropdownInputSlim form-group.row inside the flex row */
body.v4-body .v4-content #profile-section #alternative_number .alternativenumber > .form-group.row {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
}
body.v4-body .v4-content #profile-section #alternative_number .alternativenumber > .form-group.row > .col-4 {
    flex: 0 0 140px !important;
    max-width: 140px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
body.v4-body .v4-content #profile-section #alternative_number .alternativenumber > .form-group.row > .col-4 label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}
body.v4-body .v4-content #profile-section #alternative_number .alternativenumber > .form-group.row > .col-8 {
    flex: 1 1 auto !important;
    max-width: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
body.v4-body .v4-content #profile-section #alternative_number .form-control,
body.v4-body .v4-content #profile-section #alternative_number select {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
body.v4-body .v4-content #profile-section #alternative_number .remove_alternative_number {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--v4-border) !important;
    border-radius: 3px !important;
    background: var(--v4-card) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.v4-body .v4-content #profile-section #alternative_number .remove_alternative_number:hover {
    border-color: var(--v4-red) !important;
    background: #fef2f2 !important;
}
body.v4-body .v4-content #profile-section #alternative_number .add_alternative_number {
    margin-top: 4px !important;
    border-radius: 3px !important;
}

/* The "Main Number:" row uses .alternative_number_main directly (not wrapped
   in .alternativenumber). Match the same label/input columns. */
body.v4-body .v4-content #profile-section #alternative_number .alternative_number_main {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
}
body.v4-body .v4-content #profile-section #alternative_number .alternative_number_main > .col-4 {
    flex: 0 0 140px !important;
    max-width: 140px !important;
    padding: 0 !important;
}
body.v4-body .v4-content #profile-section #alternative_number .alternative_number_main > .col-8 {
    flex: 1 1 auto !important;
    max-width: none !important;
    padding: 0 !important;
}

/* ================================================================
   AFTER HOURS / BUSINESS / HOLIDAY → SCHEDULE SUBSECTION
   The schedule wrapper uses .form-group.section_item.aa-schedule-section
   (NOT .notify_section), so the generic notify_section subsection rules
   don't catch it. Apply the same "label on top, content below, divider
   above" treatment so Schedule matches Greeting and Menu.
   ================================================================ */
body.v4-body #business .aa-unified-shell .form-group.aa-schedule-section,
body.v4-body #after-hours .aa-unified-shell .form-group.aa-schedule-section,
body.v4-body #holiday .aa-unified-shell .form-group.aa-schedule-section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--v4-border) !important;
}
body.v4-body #business .aa-unified-shell .form-group.aa-schedule-section > *,
body.v4-body #after-hours .aa-unified-shell .form-group.aa-schedule-section > *,
body.v4-body #holiday .aa-unified-shell .form-group.aa-schedule-section > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
body.v4-body #business .aa-unified-shell .aa-schedule-section .aa-schedule-heading,
body.v4-body #after-hours .aa-unified-shell .aa-schedule-section .aa-schedule-heading,
body.v4-body #holiday .aa-unified-shell .aa-schedule-section .aa-schedule-heading {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}
body.v4-body #business .aa-unified-shell .aa-schedule-section .aa-subsection-title label,
body.v4-body #after-hours .aa-unified-shell .aa-schedule-section .aa-subsection-title label,
body.v4-body #holiday .aa-unified-shell .aa-schedule-section .aa-subsection-title label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--v4-navy) !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.015em !important;
    text-transform: none !important;
}
body.v4-body #business .aa-unified-shell .aa-schedule-content,
body.v4-body #after-hours .aa-unified-shell .aa-schedule-content,
body.v4-body #holiday .aa-unified-shell .aa-schedule-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
}
/* Inside the schedule, the rendered schedule_with_events has its own
   wrapper. Stack its children full-width and sharpen their corners. */
body.v4-body .v4-content .aa-schedule-content .independent_row_styles,
body.v4-body .v4-content .aa-schedule-content .schedule_list,
body.v4-body .v4-content .aa-schedule-content .time_schedule {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    border-radius: 3px !important;
}
body.v4-body .v4-content .aa-schedule-content table {
    width: 100% !important;
    max-width: 100% !important;
}
/* REMOVED: schedule input border-radius override.
   schedule.css is the single source of truth for all schedule internal styling.
   This rule was applying border-radius: 3px to ALL inputs including radios/checkboxes,
   overriding the correct 50%/4px values. schedule.css handles this at ID-level specificity.
   Killed 2026-05-26. */

/* ================================================================
   SECTION CARDS — Profile / After Hours / Holiday / Submenus / Advanced
   The top-level accordion cards on AA detail use .setting_box .extension
   with a .toggle_header. Keep them sharp with a subtle border divider.
   ================================================================ */
body.v4-body .v4-content .setting_box {
    background: var(--v4-card) !important;
    border: 1px solid var(--v4-border) !important;
    border-radius: 4px !important;
    margin-bottom: 14px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
body.v4-body .v4-content .setting_box .extension {
    padding: 0 !important;
}
body.v4-body .v4-content .setting_box > .extension > h5 {
    margin: 0 !important;
}
body.v4-body .v4-content .setting_box .toggle_header {
    padding: 0 18px !important;
    background: var(--v4-card) !important;
    border-bottom: 1px solid var(--v4-border-light) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--v4-navy) !important;
    letter-spacing: -0.1px !important;
    cursor: pointer !important;
    transition: background 0.1s !important;
}
body.v4-body .v4-content .setting_box .toggle_header:hover {
    background: var(--v4-surface) !important;
}
body.v4-body .v4-content .setting_box .toggle_header.header-toggler-closed {
    border-bottom: none !important;
}
body.v4-body .v4-content .setting_box > .extension > .form_section {
    padding: 18px 22px !important;
}
/* Arrow rotation for open state */
body.v4-body .v4-content .setting_box .toggle_header img {
    transition: transform 0.15s !important;
}
body.v4-body .v4-content .setting_box .toggle_header.header-toggler-opened img {
    transform: rotate(90deg) !important;
}

/* ================================================================
   ROUND 2 FIXES (2026-04-20)
   ================================================================ */

/* FLATTEN NESTED CARD
   The AA detail page has two wrapper cards:
     .setting_section.form_container (OUTER — white bg, border, padding)
       .setting_box (INNER — already styled above)
   Kill the outer so only the inner shows as the card. */
body.v4-body .v4-content .setting_section.form_container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;   /* Merged panel — no gap; outer .setting_box is the card */
    width: 100% !important;
    max-width: 100% !important;
}
body.v4-body .v4-content .setting_section.form_container > .setting_box {
    margin-bottom: 0 !important;
}
/* Reports wrapper row at the bottom of AA detail (Save/Cancel/Delete) */
body.v4-body .v4-content > .row.extension {
    margin: 18px 0 0 !important;
    padding: 0 !important;
}
body.v4-body .v4-content > .row.extension .col-sm-12 {
    padding: 0 !important;
}

/* SAVE / CANCEL / DELETE footer buttons
   Use .btn-sm.btn-blue.btn-save classes, no .btn. Size, sharpen, restyle. */
body.v4-body .v4-content .btn-sm.btn-save,
body.v4-body .v4-content .btn-sm.btn-blue,
body.v4-body .v4-content .save_auto_attendant,
body.v4-body .v4-content .cancel_auto_attendant,
body.v4-body .v4-content .delete_auto_attendant {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 20px !important;
    border-radius: 3px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 96px !important;
    transition: all 0.15s !important;
}
body.v4-body .v4-content .save_auto_attendant {
    background: var(--v4-navy) !important;
    border: 1px solid var(--v4-navy) !important;
    color: white !important;
}
body.v4-body .v4-content .save_auto_attendant:hover {
    background: var(--v4-ink) !important;
    border-color: var(--v4-ink) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px -6px rgba(7, 21, 37, 0.3) !important;
}
body.v4-body .v4-content .cancel_auto_attendant {
    background: var(--v4-card) !important;
    border: 1px solid var(--v4-border) !important;
    color: var(--v4-text) !important;
}
body.v4-body .v4-content .cancel_auto_attendant:hover {
    border-color: var(--v4-navy) !important;
    background: var(--v4-surface) !important;
}
body.v4-body .v4-content .delete_auto_attendant {
    background: var(--v4-card) !important;
    border: 1px solid var(--v4-border) !important;
    color: var(--v4-red) !important;
}
body.v4-body .v4-content .delete_auto_attendant:hover {
    background: #fef2f2 !important;
    border-color: var(--v4-red) !important;
}

/* PROFILE — ADDITIONAL NUMBER ROW WRAP FIX
   The .form-group.row inside .alternativenumber has Bootstrap's
   default flex-wrap:wrap, so when the select's intrinsic width
   exceeds the row, it wraps BELOW the label instead of compressing.
   Force nowrap + min-width:0 on the select column so the select
   shrinks rather than wrapping. */
body.v4-body .v4-content #profile-section .alternative_number_main,
body.v4-body .v4-content #profile-section .alternativenumber > .form-group.row,
body.v4-body .v4-content #profile-section .alternativenumber > .flex-2.slim_row {
    flex-wrap: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
body.v4-body .v4-content #profile-section .alternative_number_main > .col-8,
body.v4-body .v4-content #profile-section .alternativenumber > .form-group.row > .col-8,
body.v4-body .v4-content #profile-section .alternativenumber > .flex-2 > .col-8 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
body.v4-body .v4-content #profile-section .alternative_number_main > .col-4,
body.v4-body .v4-content #profile-section .alternativenumber > .form-group.row > .col-4,
body.v4-body .v4-content #profile-section .alternativenumber > .flex-2 > .col-4 {
    flex: 0 0 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
body.v4-body .v4-content #profile-section .alternative_number_main > .col-4 label,
body.v4-body .v4-content #profile-section .alternativenumber > .form-group.row > .col-4 label,
body.v4-body .v4-content #profile-section .alternativenumber > .flex-2 > .col-4 label {
    margin: 0 !important;
    white-space: nowrap !important;
}
body.v4-body .v4-content #profile-section .alternative_number_main > .col-8 > select,
body.v4-body .v4-content #profile-section .alternativenumber > .form-group.row > .col-8 > select,
body.v4-body .v4-content #profile-section .alternativenumber > .flex-2 > .col-8 > select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
/* Kill any inline width on the alternativenumber row (profile.php sets
   width:379px inline). We need the whole row to flex to the container. */
body.v4-body .v4-content #profile-section .alternativenumber[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* GREETING SUBSECTION ROW RHYTHM
   The four rows (Recordings / Name / Actions / Upload) were inconsistent
   (gaps 18/10/8). Force uniform 10px gap on all inline_input_row +
   greeting-action-row inside the unified shell. */
/* First row sits flush to the subsection header */
/* Hidden rows (.hidden) collapse completely so they don't eat vertical space.
   Must include the section ID to beat the flex-layout rules which carry the
   same id-level specificity. */

/* Uniform greeting-row rhythm — TIGHT 4px gap (matches the voice-select→textarea
   spacing inside the TTS editor). Flex gap on the parent guarantees equality. */
/* Rows: consistent 34px (matching the actual dropdown/button height),
   left-anchored, no individual margins. */
/* Nested rows (Actions/Upload rows that sit INSIDE a wrapper) — lift them to
   the same level visually by collapsing their wrapper margins */

/* INLINE ACTION BUTTONS (Play/Download/Speech/Upload/Record/TTS)
   Legacy CSS pill rules have been flipped to 3px; this polish layer
   just ensures consistent sizing + hover rhythm. */

/* v=20260421a — deploy signal / force rebuild */

/* ================================================================
   V4 DETAIL PAGE HEADER (matches v4-list-head pattern on list pages)
   Used on Auto Attendant detail, Hunt Group detail, etc.
   ================================================================ */
body.v4-body .v4-content .v4-detail {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
body.v4-body .v4-content .v4-detail-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-bottom: 22px !important;
}
body.v4-body .v4-content .v4-detail-title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
body.v4-body .v4-content .v4-detail-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 3px !important;
    color: var(--v4-text-muted) !important;
    background: transparent !important;
    border: 1px solid var(--v4-border) !important;
    text-decoration: none !important;
    transition: all 0.15s !important;
    flex-shrink: 0 !important;
}
body.v4-body .v4-content .v4-detail-back:hover {
    border-color: var(--v4-navy) !important;
    color: var(--v4-navy) !important;
    background: var(--v4-surface) !important;
}
body.v4-body .v4-content .v4-detail-back svg {
    width: 16px !important;
    height: 16px !important;
}
body.v4-body .v4-content .v4-detail-title-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 4px !important;
    background: var(--v4-brand-soft) !important;
    color: var(--v4-brand-dark) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
body.v4-body .v4-content .v4-detail-title-icon svg {
    width: 22px !important;
    height: 22px !important;
}
body.v4-body .v4-content .v4-detail-title-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}
body.v4-body .v4-content .v4-detail-title-text h1 {
    margin: 0 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--v4-navy) !important;
    letter-spacing: -0.4px !important;
    line-height: 1.15 !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body.v4-body .v4-content .v4-detail-sub {
    font-size: 13px !important;
    color: var(--v4-text-muted) !important;
    font-weight: 500 !important;
    margin-top: 3px !important;
    letter-spacing: 0.01em !important;
}
body.v4-body .v4-content .v4-detail-actions {
    display: flex !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}
/* CARD CONSISTENCY — each accordion section card matches list-table-wrap style */
body.v4-body .v4-content #auto_attendant_app > .setting_section,
body.v4-body .v4-content #auto_attendant_app > #advanced {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
}
body.v4-body .v4-content #auto_attendant_app > .setting_section > .setting_box,
body.v4-body .v4-content #auto_attendant_app > .setting_section > .extension,
body.v4-body .v4-content #auto_attendant_app > #advanced > .setting_box {
    background: var(--v4-card) !important;
    border: 1px solid var(--v4-border-light) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: var(--v4-shadow-sm) !important;
    margin: 0 !important;
}
body.v4-body .v4-content #auto_attendant_app > .setting_section > .setting_box:hover,
body.v4-body .v4-content #auto_attendant_app > #advanced > .setting_box:hover {
    border-color: var(--v4-border) !important;
}
/* Accordion header — slightly taller for presence, no gap between rows
   (matches list-page table rhythm) */
body.v4-body .v4-content .setting_box .toggle_header,
body.v4-body .v4-content .setting_box > .extension > h5 .toggle_header {
    padding: 0 20px !important;
    height: 60px !important;
    min-height: 60px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--v4-navy) !important;
    letter-spacing: -0.05px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}
body.v4-body .v4-content .setting_box h5.m-0 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    width: 100% !important;
}
body.v4-body .v4-content .setting_box .toggle_header .col,
body.v4-body .v4-content .setting_box .toggle_header .row {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
}
/* Chevron arrow — subtle */
body.v4-body .v4-content .setting_box .toggle_header img[src*="icon_arrow_right"] {
    height: 12px !important;
    width: auto !important;
    opacity: 0.6 !important;
    transition: transform 0.2s !important;
}
body.v4-body .v4-content .setting_box .toggle_header.header-toggler-opened img[src*="icon_arrow_right"] {
    transform: rotate(90deg) !important;
}
/* Section content area */
body.v4-body .v4-content .setting_box > .extension > .form_section {
    padding: 18px 22px !important;
    border-top: 1px solid var(--v4-border-light) !important;
    margin: 0 !important;
}
/* Tighter gap between accordion cards — match list-page row rhythm:
   no visual gap, just a divider line between each row. Cards join into
   one cohesive panel with shared rounded corners on outer edges only.
   Advanced is nested an extra level (#advanced > .setting_section.form_container
   > .setting_box) so we zero margins at BOTH levels. */
body.v4-body .v4-content #auto_attendant_app > .setting_section,
body.v4-body .v4-content #auto_attendant_app > #advanced,
body.v4-body .v4-content #auto_attendant_app > #advanced > .setting_section,
body.v4-body .v4-content #auto_attendant_app > #advanced > .form_container {
    margin: 0 !important;
}
body.v4-body .v4-content #auto_attendant_app > .setting_section + .setting_section > .setting_box,
body.v4-body .v4-content #auto_attendant_app > .setting_section + #advanced .setting_box,
body.v4-body .v4-content #auto_attendant_app > #advanced .setting_box {
    border-top: none !important;
    border-radius: 0 !important;
}
body.v4-body .v4-content #auto_attendant_app > .setting_section:first-of-type > .setting_box {
    border-radius: 4px 4px 0 0 !important;
}
body.v4-body .v4-content #auto_attendant_app > #advanced .setting_box:last-of-type,
body.v4-body .v4-content #auto_attendant_app > #advanced > .setting_section:last-of-type > .setting_box,
body.v4-body .v4-content #auto_attendant_app > .setting_section:last-of-type > .setting_box {
    border-radius: 0 0 4px 4px !important;
}
/* When a middle card is OPEN, its form_section keeps the shared-panel feel
   by leaving the bottom edge un-rounded (the next card picks up). */
body.v4-body .v4-content #auto_attendant_app > .setting_section > .setting_box:has(.header-toggler-opened) {
    border-radius: 0 !important;
}

/* ================================================================
   STATUS INDICATOR — .absolute-status (the green/red "active" dot)
   Contains a <i class="fa fa-circle"> font-awesome icon that renders
   at its own size and breaks out of the container. Hide the inner
   icon entirely and let the container itself BE the dot.
   ================================================================ */
body.v4-body .v4-content .setting_section .absolute-status,
body.v4-body .v4-content #auto_attendant_app .absolute-status {
    position: absolute !important;
    top: 50% !important;
    right: 52px !important;
    transform: translateY(-50%) !important;
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
}
/* Hide the inner <i class="fa fa-circle"> — container is the dot now */
body.v4-body .v4-content .absolute-status > i,
body.v4-body .v4-content .absolute-status > * {
    display: none !important;
}
/* Soft pulse so it reads as "live/active" — subtle, not distracting */
@keyframes vt-status-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.10); }
}
body.v4-body .v4-content .absolute-status {
    animation: vt-status-pulse 2.4s ease-in-out infinite !important;
}

/* ================================================================
   PROFILE SECTION — uniform row height, centered alignment
   ================================================================ */
body.v4-body .v4-content #profile-section .form-group.row {
    align-items: center !important;
    min-height: 48px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--v4-border-light) !important;
}
body.v4-body .v4-content #profile-section .form-group.row:last-of-type {
    border-bottom: none !important;
}
/* Number subsection — no internal divider lines. User-request: clean merged
   Main Number + Additional Numbers without visual separators inside. */
body.v4-body .v4-content #profile-section #alternative_number,
body.v4-body .v4-content #profile-section #alternative_number *,
body.v4-body .v4-content #profile-section #alternative_number .alternative_number_main,
body.v4-body .v4-content #profile-section #alternative_number .alternativenumber,
body.v4-body .v4-content #profile-section #alternative_number .alternative_number_wrapper,
body.v4-body .v4-content #profile-section #alternative_number .form-group.row,
body.v4-body .v4-content #profile-section #alternative_number .slim_row,
body.v4-body .v4-content #profile-section .form-group.row.last {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}
/* Also kill the Profile row bottom-border on the row immediately BEFORE the
   Number section (the Number toggle row itself) so the chain is seamless */
body.v4-body .v4-content #profile-section .form-group.row.align-items-center.last {
    border-bottom: none !important;
}
body.v4-body .v4-content #profile-section .form-group.row > .col-6,
body.v4-body .v4-content #profile-section .form-group.row > .col-4,
body.v4-body .v4-content #profile-section .form-group.row > .col-8 {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
body.v4-body .v4-content #profile-section .form-group.row .col-form-label,
body.v4-body .v4-content #profile-section .form-group.row label {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
/* Extension/Name inputs — right-aligned column stays tidy */
body.v4-body .v4-content #profile-section .form-group.row input[name="extension"],
body.v4-body .v4-content #profile-section .form-group.row input[name="name"] {
    margin: 0 !important;
    max-width: 260px !important;
    margin-left: auto !important;
}
body.v4-body .v4-content #profile-section .form-group.row .extension_edit {
    justify-content: flex-end !important;
    margin: 0 !important;
}

/* NUMBER SUBSECTION — no frame, flush with the rest */
body.v4-body .v4-content #profile-section #alternative_number {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 0 0 0 !important;
    margin: 4px 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* ================================================================
   SELECT DROPDOWNS — ensure chevron arrow is always visible.
   Legacy rules (body:not(#reports) .menu_input, #auto_attendant_app
   select, etc.) use `background: #fff` shorthand which nukes the
   background-image. Force our chevron with selectors that include
   an ID so we beat their specificity (0,1,2,1 → need 0,1,3,1+).
   ================================================================ */

/* ================================================================
   REPORTS PAGE POLISH (z2 — 2026-04-20)
   - Trim the vertical gap between stat tiles and the call log table
   ================================================================ */

/* Neutralize any legacy margins/floats from inside the Vue components */
body.v4-body .v4-topbar .header-v3,
body.v4-body .v4-topbar .reports-search {
    margin: 0 !important;
    float: none !important;
}

/* Pull stat tiles closer to the table */
body.v4-body .v4-content .stats-row,
body.v4-body .v4-content .call_stats {
    margin-bottom: 10px !important;
}

/* ================================================================
   AA DETAIL NUANCE PASS (z8 — 2026-04-20)
   - Tighten Greeting row rhythm
   - Square key chips (0-9/*/

/* Key chips (0-9, *, #) — square, blends with the sharp theme */
body.v4-body .v4-content .aa-key-chip,
body.v4-body .v4-content #business .aa-key-chip,
body.v4-body .v4-content #after-hours .aa-key-chip,
body.v4-body .v4-content #holiday .aa-key-chip,
body.v4-body .v4-content #submenu .aa-key-chip {
    width: 32px !important;
    height: 32px !important;
    border-radius: 3px !important;
    background: var(--v4-surface-alt) !important;
    color: var(--v4-navy) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: 1px solid var(--v4-border-light) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Submenu container — strip the extra legacy frame/shadow */
body.v4-body .v4-content #submenu .submenu-container,
body.v4-body .v4-content #submenu .aa-submenu-layout,
body.v4-body .v4-content #submenu .aa-submenu-greeting-card,
body.v4-body .v4-content #submenu .aa-submenu-menu-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 10px 0 0 0 !important;
    max-width: none !important;
}
body.v4-body .v4-content #submenu .submenu-container {
    padding: 0 !important;
}
body.v4-body .v4-content #submenu .submenu_container {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Kill horizontal scroll on schedule tables (pre-alert, business, after, holiday).
   The table-responsive wrapper forces overflow-x:auto; with our narrower content
   it was adding a phantom scrollbar. Make tables auto-size to container. */
body.v4-body .v4-content .aa-schedule-content,
body.v4-body .v4-content .aa-schedule-content .table-responsive,
body.v4-body .v4-content #advanced .schedule_container,
body.v4-body .v4-content #advanced .table-responsive {
    overflow: visible !important;
    overflow-x: visible !important;
    width: 100% !important;
    max-width: 100% !important;
}
body.v4-body .v4-content .aa-schedule-content table,
body.v4-body .v4-content #advanced .schedule_container table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}

/* Advanced: feature rows (Call Forwarding Always, Selective, Anonymous Rejection,
   Enable Voicemail) — label LEFT, toggle RIGHT, consistent height */
body.v4-body .v4-content #advanced .form-group.notify_section,
body.v4-body .v4-content #advanced > .setting_section .form-group.row {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--v4-border-light) !important;
}
body.v4-body .v4-content #advanced .form-group.notify_section:last-child {
    border-bottom: none !important;
}
body.v4-body .v4-content #advanced .form-group.notify_section > label,
body.v4-body .v4-content #advanced .form-group.notify_section > .col-form-label,
body.v4-body .v4-content #advanced .form-group .col-form-label {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.v4-body .v4-content #advanced .form-group .switch,
body.v4-body .v4-content #advanced .form-group .toggle {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
/* Call Forwarding Selective "+" icon was tilted left of the toggle — anchor
   it to the right edge with the toggle, with a consistent 10px gap between
   the two, so the row lines up visually with the other feature rows. */
body.v4-body .v4-content #advanced .call_forwarding_selective_add_number,
body.v4-body .v4-content #advanced [class*="selective"] i.fa-plus,
body.v4-body .v4-content #advanced [class*="selective"] .fa-plus-circle {
    margin: 0 10px 0 auto !important;
    padding: 0 !important;
    color: var(--v4-text-muted) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    border: none !important;
    background: transparent !important;
}

/* ================================================================
   EMPTY SCHEDULE STATE (0421e)
   When a schedule has 0 events, hide the table header + show a tidy
   "No schedule yet" empty state above the Add Schedule / Add Template
   buttons. Much clearer than a lone header row with no content.
   ================================================================ */
body.v4-body .v4-content .v4-schedule-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 28px 20px 22px !important;
    margin: 0 !important;
    background: var(--v4-surface) !important;
    border: 1px dashed var(--v4-border) !important;
    border-radius: 4px !important;
    color: var(--v4-text-muted) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    gap: 6px !important;
}
body.v4-body .v4-content .v4-schedule-empty-icon {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    background: var(--v4-brand-soft) !important;
    color: var(--v4-brand-dark) !important;
    margin-bottom: 6px !important;
}
body.v4-body .v4-content .v4-schedule-empty-icon svg {
    width: 20px !important;
    height: 20px !important;
}
body.v4-body .v4-content .v4-schedule-empty-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--v4-navy) !important;
    letter-spacing: -0.1px !important;
}
body.v4-body .v4-content .v4-schedule-empty-body {
    font-size: 12.5px !important;
    color: var(--v4-text-muted) !important;
    max-width: 360px !important;
    line-height: 1.4 !important;
}

/* Status pill on parent accordion headers when schedule is empty.
   Rendered by JS hook (looks for .schedule_is_empty within the card). */
body.v4-body .v4-content .vt-section-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: 10px !important;
    padding: 2px 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 3px !important;
    background: var(--v4-surface-alt) !important;
    color: var(--v4-text-muted) !important;
    border: 1px solid var(--v4-border-light) !important;
}
body.v4-body .v4-content .vt-section-status-pill.is-warn {
    background: #fff7ed !important;
    color: #9a5419 !important;
    border-color: #fdd9b3 !important;
}

/* ================================================================
   TEXT-TO-SPEECH editor — taller textarea + make sure the action row
   (AI / Play / Apply / Cancel) isn't swallowed by our hide rules
   (0421h — 2026-04-21)
   ================================================================ */
/* textarea.text_to_convert sizing → centralized in v4_2026.css */

/* TTS action row (AI / Play / Apply / Cancel / Stop / Uploading):
   Force VISIBLE whenever the TTS editor is open, regardless of whether
   the textarea has text (prior behavior hid them until typing — we want
   them visible as soon as the Text-to-Speech panel opens).
   MUST include .announcement_controls AND .hidden in selector to beat the
   earlier greeting-hide rule (same spec 0,1,4,1 but later declaration wins). */

/* Keep hidden alternates out of layout until their state is active. */

/* Holiday schedule — STS column was clipped because the container had an
   offset left margin that pushed the first column out of view. Reset. */
body.v4-body .v4-content #holiday .aa-schedule-content,
body.v4-body .v4-content #holiday .holiday_menu_container,
body.v4-body .v4-content #holiday .aa-schedule-content .schedule_container {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    overflow: visible !important;
}
body.v4-body .v4-content #holiday .aa-schedule-content table,
body.v4-body .v4-content #holiday .aa-schedule-content .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}
body.v4-body .v4-content #holiday .aa-schedule-content th,
body.v4-body .v4-content #holiday .aa-schedule-content td {
    padding-left: 6px !important;
}

/* ================================================================
   AA DETAIL — 21st CENTURY SLEEK UPLIFT (z3 — 2026-04-20)
   Each accordion card gets a section icon tile, hover lift, active-accent
   left-border on open, and cleaner typographic rhythm. Works off the
   section IDs (#profile-section, #business, #after-hours, #holiday,
   #submenu, #advanced).
   ================================================================ */

/* Hover: just a subtle background tint on the row (no translate — cards
   share borders in the merged panel; lifting one would look broken) */
body.v4-body .v4-content #auto_attendant_app > .setting_section > .setting_box,
body.v4-body .v4-content #auto_attendant_app > #advanced > .setting_box {
    position: relative !important;
    transition: background-color 0.15s ease !important;
}
body.v4-body .v4-content #auto_attendant_app > .setting_section > .setting_box:hover > .extension > h5 .toggle_header,
body.v4-body .v4-content #auto_attendant_app > #advanced > .setting_box:hover > .extension > h5 .toggle_header {
    background: var(--v4-surface) !important;
}

/* (orange left-accent strip removed on request — merged panel is cleaner without it) */

/* Section icon tile — injected via ::before on the toggle_header */
body.v4-body .v4-content #auto_attendant_app .toggle_header .col > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
body.v4-body .v4-content #auto_attendant_app .setting_box .toggle_header .col > div:first-child::before {
    content: '';
    width: 32px;
    height: 32px;
    border-radius: 3px;
    background-color: var(--v4-brand-soft);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    flex-shrink: 0;
}
/* Profile — user icon */
body.v4-body .v4-content #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='%23C07820' 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");
}
/* Business Hours — sun / clock */
body.v4-body .v4-content #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='%23C07820' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}
/* After Hours — moon */
body.v4-body .v4-content #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='%23C07820' 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");
}
/* Holiday — calendar */
body.v4-body .v4-content #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='%23C07820' 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");
}
/* Submenus — branching */
body.v4-body .v4-content #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='%23C07820' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'/%3E%3Cpath d='M6 9v6'/%3E%3Cpath d='M15 6H9'/%3E%3C/svg%3E");
}
/* Advanced — sliders */
body.v4-body .v4-content #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='%23C07820' 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");
}

/* Header typography tweak — give the accordion titles a subtle monotone feel,
   smaller and wider-letter-spaced like the list-page table headers */
body.v4-body .v4-content #auto_attendant_app .toggle_header {
    font-size: 14px !important;
    letter-spacing: -0.05px !important;
}

/* ================================================================
   UNIFIED DETAIL PAGE SHELL — applies to every _app container
   (#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app).
   Matches the polished AA detail experience across all four detail pages.
   (0421l — 2026-04-21)
   ================================================================ */

/* Merged accordion panel: no gap between cards, shared borders.
   Zero margin on EVERY direct child (Extension wraps sections in bare <div>,
   not .setting_section, so we can't rely on classes). */
body.v4-body .v4-content [id$="_app"] > *,
body.v4-body .v4-content [id$="_app"] > #advanced > .setting_section,
body.v4-body .v4-content [id$="_app"] > #advanced > .form_container,
body.v4-body .v4-content [id$="_app"] > #advanced > * {
    margin: 0 !important;
}
/* Keep hidden inputs / scripts from generating layout gaps */
body.v4-body .v4-content [id$="_app"] > input[type="hidden"],
body.v4-body .v4-content [id$="_app"] > script {
    display: none !important;
}
body.v4-body .v4-content [id$="_app"] > * + * > .setting_box,
body.v4-body .v4-content [id$="_app"] > #advanced .setting_box + .setting_box,
body.v4-body .v4-content [id$="_app"] > #advanced > .setting_section + .setting_section > .setting_box {
    border-top: none !important;
    border-radius: 0 !important;
}
body.v4-body .v4-content [id$="_app"] > *:first-of-type > .setting_box,
body.v4-body .v4-content [id$="_app"] > .setting_section:first-of-type > .setting_box {
    border-radius: 4px 4px 0 0 !important;
}
body.v4-body .v4-content [id$="_app"] > *:last-of-type > .setting_box,
body.v4-body .v4-content [id$="_app"] > .setting_section:last-of-type > .setting_box,
body.v4-body .v4-content [id$="_app"] > #advanced > .setting_section:last-of-type > .setting_box,
body.v4-body .v4-content [id$="_app"] > #advanced .setting_box:last-of-type {
    border-radius: 0 0 4px 4px !important;
}

/* Accordion card hover + OPEN state share the surface tint so users see
   which section they've selected. Hover feels like "selecting", open stays
   in that state until they close it.
   NOTE: Do NOT use :has(.header-toggler-opened) on the setting_box — that
   would match any NESTED opened toggle (e.g. Profile's Number subsection
   opens by default and would make Profile look permanently highlighted).
   Only tint the ACTUAL top-level toggle_header when IT is opened. */
body.v4-body .v4-content [id$="_app"] .setting_box {
    position: relative !important;
    transition: background-color 0.15s ease !important;
}
body.v4-body .v4-content [id$="_app"] .setting_box:hover > .extension > h5 .toggle_header,
body.v4-body .v4-content [id$="_app"] .setting_box > .extension > h5 .toggle_header.header-toggler-opened {
    background: var(--v4-surface) !important;
}

/* Accordion header 60px + consistent typography (applies across all apps) */
body.v4-body .v4-content [id$="_app"] .setting_box .toggle_header {
    padding: 0 20px !important;
    height: 60px !important;
    min-height: 60px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--v4-navy) !important;
    letter-spacing: -0.05px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Section-icon tiles on the accordion header — AA already styled; generalize
   for HG/CC/Extension so every section gets a subtle orange-soft tile too */
body.v4-body .v4-content [id$="_app"] .setting_box .toggle_header .col > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
body.v4-body .v4-content [id$="_app"] .setting_box .toggle_header .col > div:first-child::before {
    content: '';
    width: 32px;
    height: 32px;
    border-radius: 3px;
    background: var(--v4-brand-soft);
    color: var(--v4-brand-dark);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    flex-shrink: 0;
}
/* Default generic icon (settings gear) for any section not explicitly mapped */
body.v4-body .v4-content [id$="_app"] .setting_box .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='%23C07820' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
/* Profile — user icon (matches across apps) */
body.v4-body .v4-content [id$="_app"] #profile-section .toggle_header .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] #profile .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='%23C07820' 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;
}
/* Settings — sliders icon */
body.v4-body .v4-content [id$="_app"] #settings .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='%23C07820' 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;
}
/* Call Control — phone icon (Extension detail) */
body.v4-body .v4-content [id$="_app"] #call_control .toggle_header .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] #call-control .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='%23C07820' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
}
/* Announcements — megaphone icon (Call Center) */
body.v4-body .v4-content [id$="_app"] #announcements .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='%23C07820' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E") !important;
}
/* Advanced — sliders icon */
body.v4-body .v4-content [id$="_app"] #advanced > .setting_section > .setting_box .toggle_header .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #advanced .setting_box .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='%23C07820' 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;
}

/* Section content area */
body.v4-body .v4-content [id$="_app"] .setting_box > .extension > .form_section {
    padding: 18px 22px !important;
    border-top: 1px solid var(--v4-border-light) !important;
    margin: 0 !important;
}