/* ============================================================
   VOCATECH ADMIN PORTAL — v4 DESIGN POLISH (2026-04)

   Final-layer polish that closes the gap between the dashboard
   (v4_2026.css) and the detail/settings pages. Loaded LAST so
   it wins specificity without needing !important on every rule.

   Scope of this file:
     1. Page header — unify .v4-detail-head across every page
        that uses one (auto attendant, hunt group, call center,
        extension, settings landing).
     2. Accordion cards — bring the Settings landing page into
        the same visual family as AA detail. Closed cards are
        18px-radius, hover-lifted, with a clean clickable feel.
     3. Section headers — large, scannable; chevron rotates on
        open; brand color when expanded; status dot when active.
     4. Form rows — final spacing/divider polish so every section
        has the same vertical rhythm regardless of which feature
        ships them.
     5. Buttons — Save / Cancel / Delete and inline action pills
        share one button system across every detail page.
     6. Empty/Help states — small consistent treatment so blank
        sections don't look "broken".
     7. Native browser quirks — number input spinners, autofill
        backgrounds, etc.

   Tokens come from v4_2026.css (:root). This file does not
   redefine tokens — it only consumes them. Search for var(--v4-
   for the inventory.
   ============================================================ */


/* ============================================================
   1. PAGE HEADER — every detail page wears the same hat
   ============================================================ */
body.v4-body .v4-content .v4-detail {
    margin-bottom: 18px;
}
body.v4-body .v4-content .v4-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0 18px;
    margin-bottom: 6px;
    border-bottom: 0;
}
body.v4-body .v4-content .v4-detail-title {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
body.v4-body .v4-content .v4-detail-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--v4-text-secondary);
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
body.v4-body .v4-content .v4-detail-back:hover {
    background: var(--v4-inset-soft);
    color: var(--v4-text);
    text-decoration: none;
}
body.v4-body .v4-content .v4-detail-back svg {
    width: 18px;
    height: 18px;
}
body.v4-body .v4-content .v4-detail-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--v4-brand-soft);
    color: var(--v4-brand);
    flex-shrink: 0;
}
body.v4-body .v4-content .v4-detail-title-icon svg {
    width: 22px;
    height: 22px;
}
body.v4-body .v4-content .v4-detail-title-text {
    min-width: 0;
}
body.v4-body .v4-content .v4-detail-title-text h1 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--v4-text);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.v4-body .v4-content .v4-detail-sub {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--v4-text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
    line-height: 1.4;
    font-weight: 500;
}
body.v4-body .v4-content .v4-detail-meta-sep {
    color: var(--v4-text-muted);
}
body.v4-body .v4-content :is(.v4-extension-number, .v4-detail-entity-label) {
    color: var(--v4-text-secondary, #4F5B6E);
}
body.v4-body .v4-content :is(.v4-number-pill, .aa-ov-number-pill) {
    align-items: center;
    background: var(--v4-surface-alt, #F4F6FA);
    border: 1px solid var(--v4-border, #DDE6F0);
    border-radius: 7px;
    color: var(--v4-text-secondary, #4F5B6E);
    display: inline-flex;
    font: 700 12px "Plus Jakarta Sans", system-ui, sans-serif;
    gap: 6px;
    height: 24px;
    line-height: 1;
    max-width: 100%;
    padding: 0 8px;
    white-space: nowrap;
}
body.v4-body .v4-content :is(.v4-number-pill, .aa-ov-number-pill) .v4-number-more {
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--v4-border, #DDE6F0);
    border-radius: 999px;
    color: var(--v4-text, #001F4A);
    display: inline-flex;
    font-size: 11px;
    height: 18px;
    justify-content: center;
    min-width: 22px;
    padding: 0 5px;
}
body.v4-body .v4-content .v4-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


/* ============================================================
   2. SETTINGS LANDING PAGE — bring it into the family

   The /company/?company_id=X landing renders an accordion list
   of categories (Profile, Reports, Login Users, Integrations,
   Extensions, Auto Attendants, Hunt Groups, Call Centers,
   Numbers, Phones, Schedules) using the same .setting_section
   markup as the detail pages. The legacy company_lists.css gave
   them a thin "directory pill" look that broke consistency with
   AA detail. We restore the v4 card treatment so closed cards
   look like every other accordion in the system.

   Scoped to body.v4-body when a #company_main_content wrapper
   or .v4-settings-landing class is present, so we don't touch
   ?view=profile (which is wrapped in .v4-detail and inherits
   the AA detail rules from v4_2026.css already).
   ============================================================ */

body.v4-body .v4-content .v4-settings-landing .setting_section.form_container {
    background: #FFFFFF;
    border: 1px solid #DBE3EC;
    border-radius: 16px;
    box-shadow:
        0 24px 40px -36px rgba(15, 23, 42, 0.18),
        0 8px 16px -16px rgba(15, 23, 42, 0.06);
    padding: 4px 16px;
    margin: 0 0 10px 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body.v4-body .v4-content .v4-settings-landing .setting_section.form_container:hover {
    border-color: #C8D3E0;
    box-shadow:
        0 24px 40px -28px rgba(15, 23, 42, 0.22),
        0 12px 22px -16px rgba(15, 23, 42, 0.10);
}
/* Middle wrappers transparent — same flatten pattern as detail pages */
body.v4-body .v4-content .v4-settings-landing .setting_box,
body.v4-body .v4-content .v4-settings-landing .setting_box > .extension,
body.v4-body .v4-content .v4-settings-landing .setting_box > .extension > h5,
body.v4-body .v4-content .v4-settings-landing .setting_box > .extension > .form_section {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
/* Header row — same height/feel as AA detail toggle_header */
body.v4-body .v4-content .v4-settings-landing .header-toggler,
body.v4-body .v4-content .v4-settings-landing .header_first.header-toggler {
    display: flex !important;
    align-items: center;
    height: 52px;
    padding: 0 4px;
    cursor: pointer;
    color: var(--v4-text);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.15s ease;
    border-radius: 12px;
}
body.v4-body .v4-content .v4-settings-landing .setting_section.form_container:hover .header-toggler {
    color: var(--v4-brand);
}
body.v4-body .v4-content .v4-settings-landing .header-toggler-opened {
    color: var(--v4-brand);
}
/* Chevron — replace the legacy <img> chevron-in-a-circle (the pre-2026
   "soft pill" treatment from style_override.css line 2959) with a clean
   inline SVG drawn via ::before. The legacy <img> is hidden — its parent
   carries the chevron now and rotates on open. Specificity beats the
   legacy `body:not(#reports) .header_first img` rule via !important. */
body.v4-body .v4-content .v4-settings-landing .header-toggler > img,
body.v4-body .v4-content .v4-settings-landing .header_first > img {
    display: none !important;
}
body.v4-body .v4-content .v4-settings-landing .header-toggler::before,
body.v4-body .v4-content .v4-settings-landing .header_first::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 12px;
    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='%23627187' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
body.v4-body .v4-content .v4-settings-landing .header-toggler-opened::before,
body.v4-body .v4-content .v4-settings-landing .header_first.header-toggler-opened::before {
    transform: rotate(90deg);
    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='%23F89939' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
body.v4-body .v4-content .v4-settings-landing .setting_section.form_container:hover .header-toggler::before,
body.v4-body .v4-content .v4-settings-landing .setting_section.form_container:hover .header_first::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='%23F89939' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
body.v4-body .v4-content .v4-settings-landing .header_second,
body.v4-body .v4-content .v4-settings-landing .header_third {
    margin-left: auto;
}
/* Count badge / "Access" pill on the right */
body.v4-body .v4-content .v4-settings-landing .header_first ~ .header_second:not(.header-section-hidden) .label,
body.v4-body .v4-content .v4-settings-landing .header_first ~ .header_third .label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 10px;
    background: var(--v4-surface-alt);
    color: var(--v4-text-secondary);
    border: 1px solid var(--v4-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    line-height: 1;
    margin: 0;
}


/* ============================================================
   3. ACCORDION HEADER — final polish for AA / HG / CC / Ext

   v4_2026.css already styles these well; we add micro-details:
     - hover lifts color, not background (cleaner)
     - chevron rotates with proper easing
     - status dot on right (after-hours active = green)
   ============================================================ */
body.v4-body .v4-content [id$="_app"] .setting_box .toggle_header {
    border-radius: 12px;
    transition: color 0.15s ease;
}
body.v4-body .v4-content [id$="_app"] .setting_box .toggle_header > .col > div:first-child {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--v4-text);
    letter-spacing: -0.005em;
}
body.v4-body .v4-content [id$="_app"] .setting_section.form_container:hover .toggle_header > .col > div:first-child {
    color: var(--v4-brand);
}
body.v4-body .v4-content [id$="_app"] .toggle_header.header-toggler-opened > .col > div:first-child {
    color: var(--v4-brand);
}
/* Chevron icon — consistent rotation behavior */
body.v4-body .v4-content [id$="_app"] .setting_box .toggle_header img {
    width: 14px;
    height: 14px;
    transform: rotate(0deg);
    transition: transform 0.2s ease, opacity 0.15s ease;
    opacity: 0.55;
}
body.v4-body .v4-content [id$="_app"] .setting_box .toggle_header.header-toggler-opened img {
    transform: rotate(90deg);
    opacity: 1;
}
body.v4-body .v4-content [id$="_app"] .setting_section.form_container:hover .toggle_header img {
    opacity: 1;
}


/* ============================================================
   4. STATUS DOT INSIDE ACCORDION HEADER

   The After Hours section shows a green dot when active. Other
   sections can use the same primitive. Consistent sizing, ring
   glow matches the dashboard's "live calls" indicator.
   ============================================================ */
body.v4-body .v4-content .vt-section-status-pill,
body.v4-body .v4-content .toggle_header .absolute-status,
body.v4-body .v4-content .header-toggler .absolute-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v4-green, #10B981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
    color: transparent;
    font-size: 0;
    margin-right: 4px;
    flex-shrink: 0;
    position: static;
    top: auto;
    right: auto;
}


/* ============================================================
   5. FORM ROW SPACING — final rhythm

   v4_forms.css sets baseline; v4_2026.css tweaks per-section.
   This block ensures *every* form row across every detail page
   has the same vertical rhythm (10–14px breathing) regardless
   of which section ships it. Empty states get a hint instead
   of looking "broken".
   ============================================================ */
body.v4-body .v4-content [id$="_app"] .form-group.row {
    margin-left: 0;
    margin-right: 0;
}
body.v4-body .v4-content [id$="_app"] .form-group.row + .form-group.row {
    border-top: 1px solid var(--v4-border-light);
    padding-top: 12px;
}
body.v4-body .v4-content [id$="_app"] .form-group.row.c_no_border + .form-group.row,
body.v4-body .v4-content [id$="_app"] .form-group.row + .form-group.row.c_no_border {
    border-top: 0;
}


/* ============================================================
   6. EMPTY STATE — when an accordion section has no content,
   show a tasteful hint instead of a blank reveal.
   ============================================================ */
body.v4-body .v4-content .v4-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    color: var(--v4-text-muted);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    background: var(--v4-surface-alt);
    border: 1px dashed var(--v4-border);
    border-radius: 12px;
    margin: 8px 20px 14px;
}
body.v4-body .v4-content .v4-empty-state-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--v4-card, #FFFFFF);
    color: var(--v4-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: inset 0 0 0 1px var(--v4-border);
}
body.v4-body .v4-content .v4-empty-state-title {
    font-weight: 600;
    color: var(--v4-text-secondary);
    margin-bottom: 2px;
}


/* ============================================================
   7. INLINE ROW ACTIONS — pencil / trash / open icons

   List rows on AA list, Phones list, Settings sub-rows all use
   tiny icon buttons. v4_2026.css styles the AA list pencil
   already; this block harmonizes the rest (number row trash,
   integration delete, etc.) so they feel like the same family.
   ============================================================ */
body.v4-body .v4-content .icon_edit,
body.v4-body .v4-content .icon_delete,
body.v4-body .v4-content .delete_button:not(.btn-primary):not([class*="save_"]):not([class*="delete_auto_"]):not([class*="delete_hunt_"]):not([class*="delete_call_"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--v4-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
}
body.v4-body .v4-content .icon_edit:hover,
body.v4-body .v4-content .icon_delete:hover {
    background: var(--v4-inset-soft);
    color: var(--v4-text);
}


/* ============================================================
   8. UNIFIED PILL / BADGE PRIMITIVE

   Every "Standard" / "Online" / "Time" / "Holiday" / "Access"
   pill across list pages. Tiny, consistent.
   ============================================================ */
body.v4-body .v4-content .v4-pill,
body.v4-body .v4-content .badge.v4-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    background: var(--v4-surface-alt);
    color: var(--v4-text-secondary);
    border: 1px solid var(--v4-border);
}


/* ============================================================
   9. UNIFIED BUTTON PRIMITIVE

   .v4-btn is the future-proof button class. v4_2026.css already
   styles legacy save_/cancel_/delete_ buttons in detail-foot;
   this primitive gives new pages a clean class to use. Three
   variants: primary, secondary, ghost. Plus a danger variant.
   ============================================================ */
body.v4-body .v4-content .v4-btn,
body.v4-body button.v4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}
body.v4-body .v4-content .v4-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
body.v4-body .v4-content .v4-btn--secondary {
    background: #FFFFFF;
    color: var(--v4-text);
    border-color: var(--v4-border);
}
body.v4-body .v4-content .v4-btn--secondary:hover {
    background: var(--v4-surface-alt);
    border-color: #CBD1DC;
    color: var(--v4-text);
    text-decoration: none;
}
body.v4-body .v4-content .v4-btn--sm {
    height: 30px;
    padding: 0 12px;
    font-size: 12.5px;
}
body.v4-body .v4-content .v4-btn--lg {
    height: 42px;
    padding: 0 22px;
    font-size: 14.5px;
}
body.v4-body .v4-content .v4-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--v4-brand-glow);
}


/* ============================================================
   10. UNIFIED CARD PRIMITIVE

   .v4-card matches the dashboard's hairline-outline card style.
   Use for any new "container" need.
   ============================================================ */
body.v4-body .v4-content .v4-card-2026 {
    background: var(--v4-surface, #FFFFFF);
    border: 1px solid var(--v4-border);
    border-radius: var(--v4-radius-lg);
    box-shadow:
        0 1px 2px rgba(14, 39, 73, 0.02),
        0 24px 40px -36px rgba(15, 23, 42, 0.18);
    padding: 18px 22px;
}
body.v4-body .v4-content .v4-card-2026__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
body.v4-body .v4-content .v4-card-2026__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--v4-text);
    margin: 0;
}
body.v4-body .v4-content .v4-card-2026__sub {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12.5px;
    color: var(--v4-text-muted);
    margin-top: 2px;
}


/* ============================================================
   11. NATIVE INPUT QUIRKS — autofill, number spinners

   Browser default autofill yellow background fights the v4
   surface. Set our own.
   ============================================================ */
body.v4-body .v4-content input:-webkit-autofill,
body.v4-body .v4-content input:-webkit-autofill:hover,
body.v4-body .v4-content input:-webkit-autofill:focus,
body.v4-body .v4-content textarea:-webkit-autofill,
body.v4-body .v4-content select:-webkit-autofill {
    -webkit-text-fill-color: var(--v4-text);
    -webkit-box-shadow: 0 0 0 1000px var(--v4-card, #FFFFFF) inset;
    box-shadow: 0 0 0 1000px var(--v4-card, #FFFFFF) inset;
    transition: background-color 5000s ease-in-out 0s;
}
/* Hide number spinners — selects already replace numeric pickers */
body.v4-body .v4-content input[type="number"]::-webkit-inner-spin-button,
body.v4-body .v4-content input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body.v4-body .v4-content input[type="number"] {
    -moz-appearance: textfield;
}


/* ============================================================
   13. SECTION ICON TILES — give every accordion section its own
   visual identity, matching the dashboard's tile-icon language.

   v4_2026.css line 1463-1484 was hiding ::before icons. We bring
   them back, but designed properly: 36 px tinted tile on the left
   of the accordion header, 18 px stroke icon centered, color
   palette varies per section so the 6 sections of an AA / HG / CC
   detail page each have their own personality at a glance.
   ============================================================ */

/* Layout: convert the title cell into an inline-flex row with the
   tile on the left and the title text on the right */
body.v4-body .v4-content [id$="_app"] .setting_box .toggle_header > .col > div:first-child,
body.v4-body .v4-content [id$="_app"] .setting_box .toggle_header > .col,
body.v4-body .v4-content .v4-settings-landing .header-toggler,
body.v4-body .v4-content .v4-settings-landing .header_first.header-toggler {
    align-items: center !important;
}

/* Common tile shape — selector enumerates every section ID so its
   specificity matches the v4_2026.css rules at line 1463-1484 that
   set content:none !important. Without an ID in our path those rules
   beat ours on specificity (their #profile-section etc. = ID weight)
   and the tiles never render. */
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,
body.v4-body .v4-content [id$="_app"] > #business .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #after-hours .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #holiday .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #submenu .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #advanced .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #settings .toggle_header > .col > div:first-child::before,
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,
body.v4-body .v4-content [id$="_app"] > #phones .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #announcements .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #profile .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #personal_settings .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #phone_section .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #call_control .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #advanced .toggle_header > .col > div:first-child::before {
    content: "" !important;
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    margin-right: 14px !important;
    background-color: var(--v4-surface-alt) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 18px 18px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    transition: transform 0.18s ease !important;
}
body.v4-body .v4-content [id$="_app"] .setting_section.form_container:hover .toggle_header > .col > div:first-child::before {
    transform: scale(1.05) !important;
}

/* PROFILE — brand peach, user-circle icon */
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,
body.v4-body .v4-content #extension_app > div > #profile .toggle_header > .col > div:first-child::before {
    background-color: #FEF3E5 !important;
    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='%23D97E1F' 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;
}

/* BUSINESS HOURS — green, clock icon */
body.v4-body .v4-content [id$="_app"] > #business .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #business_hours .toggle_header > .col > div:first-child::before {
    background-color: #ECFDF5 !important;
    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='%23047857' 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;
}

/* AFTER HOURS — indigo, moon icon */
body.v4-body .v4-content [id$="_app"] > #after-hours .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #after_hours .toggle_header > .col > div:first-child::before {
    background-color: #EEF2FF !important;
    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='%234338CA' 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;
}

/* HOLIDAY — amber, calendar icon */
body.v4-body .v4-content [id$="_app"] > #holiday .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #holiday_hours .toggle_header > .col > div:first-child::before {
    background-color: #FFFBEB !important;
    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='%23B45309' 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;
}

/* SUBMENUS — teal, grid icon */
body.v4-body .v4-content [id$="_app"] > #submenu .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #submenus .toggle_header > .col > div:first-child::before {
    background-color: #F0FDFA !important;
    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='%230F766E' 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;
}

/* ADVANCED — neutral slate, sliders icon */
body.v4-body .v4-content [id$="_app"] > #advanced .toggle_header > .col > div:first-child::before {
    background-color: #F1F5F9 !important;
    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='%23475569' 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;
}

/* SETTINGS (HG/CC/Ext detail second-section) — neutral cog icon */
body.v4-body .v4-content [id$="_app"] > #settings .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #personal_settings .toggle_header > .col > div:first-child::before {
    background-color: #F1F5F9 !important;
    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='%23475569' 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") !important;
}

/* ANNOUNCEMENTS (HG/CC) — rose pink, megaphone */
body.v4-body .v4-content [id$="_app"] > #announcements .toggle_header > .col > div:first-child::before {
    background-color: #FFF1F2 !important;
    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='%23BE185D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E") !important;
}

/* CALL CONTROL (HG/CC/Ext) — blue, phone-forwarded */
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,
body.v4-body .v4-content #extension_app > div > #call_control .toggle_header > .col > div:first-child::before {
    background-color: #EFF6FF !important;
    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='%231D4ED8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='19 1 23 5 19 9'/%3E%3Cline x1='15' y1='5' x2='23' y2='5'/%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;
}

/* PHONES (Ext) — sky blue, smartphone */
body.v4-body .v4-content [id$="_app"] > #phones .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #phone_section .toggle_header > .col > div:first-child::before {
    background-color: #F0F9FF !important;
    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='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E") !important;
}


/* ============================================================
   14. SETTINGS LANDING ICON TILES — same treatment for the
   directory rows on /company/?company_id=…
   ============================================================ */
body.v4-body .v4-content .v4-settings-landing .header-toggler::after,
body.v4-body .v4-content .v4-settings-landing .header_first::after {
    content: "" !important;
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background-color: var(--v4-surface-alt) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    flex-shrink: 0 !important;
    margin-right: 14px !important;
    order: 0 !important;
}
/* Settings landing chevron stays at order 0 (left); icon at order 1 */
body.v4-body .v4-content .v4-settings-landing .header-toggler::before,
body.v4-body .v4-content .v4-settings-landing .header_first::before {
    order: -1 !important;
}
body.v4-body .v4-content .v4-settings-landing .header-toggler,
body.v4-body .v4-content .v4-settings-landing .header_first.header-toggler {
    display: flex !important;
}

/* Settings landing — Profile (building/company) */
body.v4-body .v4-content .v4-settings-landing [data-target="company_details"]::after {
    background-color: #FEF3E5 !important;
    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='%23D97E1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01'/%3E%3C/svg%3E") !important;
}
/* Reports — bar-chart teal */
body.v4-body .v4-content .v4-settings-landing [data-target="company_user_reports_settings"]::after,
body.v4-body .v4-content .v4-settings-landing [data-target="company_reports"]::after {
    background-color: #F0FDFA !important;
    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='%230F766E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3C/svg%3E") !important;
}
/* Login Users — indigo users */
body.v4-body .v4-content .v4-settings-landing [data-target="company_users"]::after {
    background-color: #EEF2FF !important;
    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='%234338CA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") !important;
}
/* Integrations — amber plug */
body.v4-body .v4-content .v4-settings-landing [data-target="company_integrations"]::after {
    background-color: #FFFBEB !important;
    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='%23B45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v6'/%3E%3Cpath d='M9 8v3a3 3 0 0 0 6 0V8'/%3E%3Cpath d='M9 8h6'/%3E%3Cpath d='M12 14v8'/%3E%3C/svg%3E") !important;
}
/* Extensions — green grid */
body.v4-body .v4-content .v4-settings-landing [data-target="company_extensions"]::after {
    background-color: #ECFDF5 !important;
    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='%23047857' 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;
}
/* Auto Attendants — brand peach headphones */
body.v4-body .v4-content .v4-settings-landing [data-target="company_auto_attendants"]::after {
    background-color: #FEF3E5 !important;
    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='%23D97E1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E") !important;
}
/* Hunt Groups — rose share */
body.v4-body .v4-content .v4-settings-landing [data-target="company_hunt_groups"]::after {
    background-color: #FFF1F2 !important;
    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='%23BE185D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E") !important;
}
/* Call Centers — blue phone-call */
body.v4-body .v4-content .v4-settings-landing [data-target="company_call_centers"]::after {
    background-color: #EFF6FF !important;
    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='%231D4ED8' 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;
}
/* Numbers — green hash */
body.v4-body .v4-content .v4-settings-landing [data-target="company_numbers_readonly"]::after,
body.v4-body .v4-content .v4-settings-landing [data-target="company_numbers"]::after {
    background-color: #ECFDF5 !important;
    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='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E") !important;
}
/* Phones — sky smartphone */
body.v4-body .v4-content .v4-settings-landing [data-target="company_phones_readonly"]::after,
body.v4-body .v4-content .v4-settings-landing [data-target="company_phones"]::after {
    background-color: #F0F9FF !important;
    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='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2' ry='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E") !important;
}
/* Schedules — amber calendar */
body.v4-body .v4-content .v4-settings-landing [data-target="company_schedules"]::after {
    background-color: #FFFBEB !important;
    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='%23B45309' 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;
}


/* ============================================================
   15. ACTIVE SECTION ACCENT — when an accordion section is open,
   light up its left edge with a brand-orange stripe so the user
   instantly sees which section they're editing.
   ============================================================ */
body.v4-body .v4-content [id$="_app"] > .setting_section.form_container,
body.v4-body .v4-content [id$="_app"] > #profile,
body.v4-body .v4-content [id$="_app"] > #profile-section,
body.v4-body .v4-content [id$="_app"] > #business,
body.v4-body .v4-content [id$="_app"] > #after-hours,
body.v4-body .v4-content [id$="_app"] > #holiday,
body.v4-body .v4-content [id$="_app"] > #submenu,
body.v4-body .v4-content [id$="_app"] > #advanced,
body.v4-body .v4-content [id$="_app"] > #settings,
body.v4-body .v4-content [id$="_app"] > #call_control,
body.v4-body .v4-content [id$="_app"] > #call-control,
body.v4-body .v4-content [id$="_app"] > #phones,
body.v4-body .v4-content [id$="_app"] > #announcements,
body.v4-body .v4-content #extension_app > div > .setting_section.form_container,
body.v4-body .v4-content #extension_app > div > #profile,
body.v4-body .v4-content #extension_app > div > #personal_settings,
body.v4-body .v4-content #extension_app > div > #phone_section,
body.v4-body .v4-content #extension_app > div > #call_control,
body.v4-body .v4-content #extension_app > div > #advanced {
    position: relative !important;
    overflow: hidden !important;
}
/* The accent stripe — a positioned ::before that becomes visible
   only when the section's toggle_header is in the opened state. */
body.v4-body .v4-content [id$="_app"] > .setting_section.form_container::before,
body.v4-body .v4-content [id$="_app"] > #profile::before,
body.v4-body .v4-content [id$="_app"] > #profile-section::before,
body.v4-body .v4-content [id$="_app"] > #business::before,
body.v4-body .v4-content [id$="_app"] > #after-hours::before,
body.v4-body .v4-content [id$="_app"] > #holiday::before,
body.v4-body .v4-content [id$="_app"] > #submenu::before,
body.v4-body .v4-content [id$="_app"] > #advanced::before,
body.v4-body .v4-content [id$="_app"] > #settings::before,
body.v4-body .v4-content [id$="_app"] > #call_control::before,
body.v4-body .v4-content [id$="_app"] > #call-control::before,
body.v4-body .v4-content [id$="_app"] > #phones::before,
body.v4-body .v4-content [id$="_app"] > #announcements::before,
body.v4-body .v4-content #extension_app > div > .setting_section.form_container::before {
    /* PASS 31 — user: "thin this stripe down or use shadow". Drop
       the 4-px brand-orange bar to a 1-px hairline so it whispers
       which section is active instead of shouting. */
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 1px !important;
    background: var(--v4-brand) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
/* :has() lights the stripe ONLY when the OUTER toggle_header is open.
   Match `.toggle_header.header-toggler-opened` (compound) instead of
   just `.header-toggler-opened` — the latter also matches the nested
   `.alternate_number_arrow.header-toggler-opened` inside Profile when
   numbers are enabled, which would light the Profile stripe even
   when Profile itself is collapsed. The outer accordion toggles are
   the only ones with the `.toggle_header` class. */
body.v4-body .v4-content [id$="_app"] > .setting_section.form_container:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #profile:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #profile-section:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #business:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #after-hours:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #holiday:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #submenu:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #advanced:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #settings:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #call_control:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #call-control:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #phones:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content [id$="_app"] > #announcements:has(.toggle_header.header-toggler-opened)::before,
body.v4-body .v4-content #extension_app > div > .setting_section.form_container:has(.toggle_header.header-toggler-opened)::before {
    opacity: 1 !important;
}


/* ============================================================
   17. ACCORDION HOVER LIFT — give cards a more visible affordance
   that they're clickable. Subtle, not gaudy.
   ============================================================ */
body.v4-body .v4-content [id$="_app"] > .setting_section.form_container,
body.v4-body .v4-content [id$="_app"] > #advanced,
body.v4-body .v4-content [id$="_app"] > #settings,
body.v4-body .v4-content [id$="_app"] > #call_control,
body.v4-body .v4-content [id$="_app"] > #call-control,
body.v4-body .v4-content [id$="_app"] > #phones,
body.v4-body .v4-content [id$="_app"] > #announcements,
body.v4-body .v4-content #extension_app > div > .setting_section.form_container {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
body.v4-body .v4-content [id$="_app"] > .setting_section.form_container:hover,
body.v4-body .v4-content [id$="_app"] > #advanced:hover,
body.v4-body .v4-content [id$="_app"] > #settings:hover,
body.v4-body .v4-content [id$="_app"] > #call_control:hover,
body.v4-body .v4-content [id$="_app"] > #call-control:hover,
body.v4-body .v4-content [id$="_app"] > #phones:hover,
body.v4-body .v4-content [id$="_app"] > #announcements:hover,
body.v4-body .v4-content #extension_app > div > .setting_section.form_container:hover {
    transform: translateY(-1px) !important;
}
body.v4-body .v4-content [id$="_app"] .disabled-icon {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
/* Trash buttons get a danger-tinted hover */
body.v4-body .v4-content [id$="_app"] a.delete_submenu:not(.disabled-icon):hover,
body.v4-body .v4-content [id$="_app"] .btn.table_button.submenu_remove:hover,
body.v4-body .v4-content [id$="_app"] .remove_alternative_number:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #B91C1C !important;
}

/* Replace legacy PNG delete icon with a clean SVG trash icon.
   The trash class differs per template:
     - Submenu list: .delete_submenu (anchor with PNG)
     - Submenu header: .btn.table_button.submenu_remove
     - Submenu per-key: .btn.table_button.submenu{N}_remove (submenu1_remove, etc.)
     - Holiday menu row: .btn.table_button.holiday_menu_remove
     - Business Hours menu row: .btn.table_button.business_menu_remove
     - After Hours menu row: .btn.table_button.after_hours_menu_remove
     - Number sub-frame: .remove_alternative_number
   The wildcard [class*="_menu_remove"] catches business/after/holiday.
   The [class*="submenu"][class*="_remove"] catches submenu per-key rows. */
body.v4-body .v4-content [id$="_app"] a.delete_submenu img[src*="new_delete_icon"],
body.v4-body .v4-content [id$="_app"] .btn.table_button img[src*="new_delete_icon"],
body.v4-body .v4-content [id$="_app"] .remove_alternative_number img[src*="new_delete_icon"] {
    display: none !important;
}
body.v4-body .v4-content [id$="_app"] a.delete_submenu::before,
body.v4-body .v4-content [id$="_app"] .btn.table_button.submenu_remove::before,
body.v4-body .v4-content [id$="_app"] .btn.table_button[class*="_menu_remove"]::before,
body.v4-body .v4-content [id$="_app"] .btn.table_button[class*="submenu"][class*="_remove"]::before,
body.v4-body .v4-content [id$="_app"] .remove_alternative_number::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    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='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* The Menu row "open-in-new-tab" button: any .btn.table_button that
   is NOT a *_menu_remove trash. Replace its inner content with an
   external-link SVG. */
body.v4-body .v4-content [id$="_app"] .btn.table_button:not(.submenu_remove):not([class*="_menu_remove"]):not([class*="submenu"][class*="_remove"]) > * {
    display: none !important;
}
body.v4-body .v4-content [id$="_app"] .btn.table_button:not(.submenu_remove):not([class*="_menu_remove"]):not([class*="submenu"][class*="_remove"])::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    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='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Trash hover for menu-row trash variants gets the danger tint */
body.v4-body .v4-content [id$="_app"] .btn.table_button[class*="_menu_remove"]:hover,
body.v4-body .v4-content [id$="_app"] .btn.table_button[class*="submenu"][class*="_remove"]:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #B91C1C !important;
}


/* ============================================================
   20. SUB-SECTION LABELS — "Greeting" / "Menu" / "Schedule"

   These tiny labels were just bold body text. Promote them to
   the dashboard's "TODAY AT A GLANCE" treatment: small uppercase,
   tracked letters, muted color. Adds visual rhythm to the sub-
   section blocks inside each accordion.
   ============================================================ */
body.v4-body .v4-content [id$="_app"] .aa-unified-shell h6,
body.v4-body .v4-content [id$="_app"] .aa-submenu-layout h6,
body.v4-body .v4-content [id$="_app"] .aa-prealert-layout h6 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--v4-text-muted) !important;
    margin: 0 0 8px 0 !important;
}


/* ============================================================
   21. CALL CONTROL TOGGLE ROWS (Advanced bottom)

   The Call Forwarding Always / Selective / Anonymous Rejection /
   Enable Voicemail toggles at the bottom of #advanced are bare
   text rows. Give them a card-row feel — soft hairline divider,
   hover background, label gets weight.
   ============================================================ */
body.v4-body .v4-content [id$="_app"] #advanced .form-group.row[id$="_always"],
body.v4-body .v4-content [id$="_app"] #advanced .form-group.row[id$="_selective"],
body.v4-body .v4-content [id$="_app"] #advanced .form-group.row[id$="_rejection"],
body.v4-body .v4-content [id$="_app"] #advanced .form-group.row#call_forwarding_always,
body.v4-body .v4-content [id$="_app"] #advanced .form-group.row#call_forwarding_selective,
body.v4-body .v4-content [id$="_app"] #advanced .form-group.row#anonymous_rejection,
body.v4-body .v4-content [id$="_app"] #advanced .form-group.row#voicemail,
body.v4-body .v4-content [id$="_app"] #advanced > .row_nested_parent,
body.v4-body .v4-content [id$="_app"] #advanced > .form-group.row[class*="inner_section"] {
    background: var(--v4-surface) !important;
    border: 1px solid var(--v4-border-light) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin: 8px 0 !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}
body.v4-body .v4-content [id$="_app"] #advanced #call_forwarding_always:hover,
body.v4-body .v4-content [id$="_app"] #advanced #call_forwarding_selective:hover,
body.v4-body .v4-content [id$="_app"] #advanced #anonymous_rejection:hover,
body.v4-body .v4-content [id$="_app"] #advanced #voicemail:hover {
    border-color: var(--v4-border) !important;
    background: var(--v4-surface) !important;
}
body.v4-body .v4-content [id$="_app"] #advanced #call_forwarding_always > .col label,
body.v4-body .v4-content [id$="_app"] #advanced #call_forwarding_selective > .col label,
body.v4-body .v4-content [id$="_app"] #advanced #anonymous_rejection > .col label,
body.v4-body .v4-content [id$="_app"] #advanced #voicemail > .col label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--v4-text) !important;
    margin: 0 !important;
}


/* ============================================================
   22. PILL OUTLINE BUTTONS — Add Submenu / Add Schedule /
   Add Template / Show Old (n) / Add Number — make every "ghost"
   action button look the same.
   ============================================================ */
body.v4-body .v4-content [id$="_app"] .btn.add_button,
body.v4-body .v4-content [id$="_app"] .btn.add_alternative_number,
body.v4-body .v4-content [id$="_app"] .btn.add_submenu,
body.v4-body .v4-content [id$="_app"] .btn.add_schedule,
body.v4-body .v4-content [id$="_app"] .btn.btn-outline-primary.borderless,
body.v4-body .v4-content [id$="_app"] button.add_button,
body.v4-body .v4-content [id$="_app"] button.add_schedule {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: var(--v4-surface) !important;
    border: 1px solid var(--v4-border) !important;
    color: var(--v4-text) !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    box-shadow: none !important;
    text-align: left !important;
}
body.v4-body .v4-content [id$="_app"] .btn.add_button:hover,
body.v4-body .v4-content [id$="_app"] .btn.add_alternative_number:hover,
body.v4-body .v4-content [id$="_app"] .btn.add_submenu:hover,
body.v4-body .v4-content [id$="_app"] .btn.add_schedule:hover {
    background: var(--v4-surface-alt) !important;
    border-color: #CBD1DC !important;
    color: var(--v4-text) !important;
}
/* Plus icon inside add_* buttons */
body.v4-body .v4-content [id$="_app"] .btn.add_button .add_icon,
body.v4-body .v4-content [id$="_app"] .btn.add_alternative_number .add_icon,
body.v4-body .v4-content [id$="_app"] .btn.add_submenu .add_icon,
body.v4-body .v4-content [id$="_app"] .btn.add_schedule .add_icon,
body.v4-body .v4-content [id$="_app"] .btn .fa-plus {
    color: var(--v4-brand) !important;
    font-size: 13px !important;
    margin-right: 2px !important;
}


/* ============================================================
   23. SUBMENU NAME ROW — turn it into a card row

   The "Test" submenu name row (with edit/delete icons) was a bare
   line of text. Make it feel like an item card so users can scan
   submenus at a glance.
   ============================================================ */
body.v4-body .v4-content [id$="_app"] #submenu .form-group.row[class*="aa-submenu-row"],
body.v4-body .v4-content [id$="_app"] #submenu > .submenu_container > .row {
    background: var(--v4-surface-alt) !important;
    border: 1px solid var(--v4-border) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    margin: 6px 0 !important;
    align-items: center !important;
}


/* ============================================================
   26. SUB-SECTION CARDS — Greeting / Menu / Schedule each framed
   ============================================================ */
body.v4-body .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] .aa-submenu-layout > .notify_section,
body.v4-body .v4-content [id$="_app"] .aa-prealert-layout > .notify_section,
body.v4-body .v4-content [id$="_app"] #submenu .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] #advanced .form-group.notify_section {
    background: var(--v4-surface) !important;
    border: 1px solid var(--v4-border-light) !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    margin: 12px 0 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}


/* ============================================================
   27. SUB-SECTION HEADER LABELS — uppercase tracked
   ============================================================ */
body.v4-body .v4-content [id$="_app"] .form-group.notify_section > h6,
body.v4-body .v4-content [id$="_app"] .form-group.notify_section > h5:not(.m-0) {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--v4-text-muted) !important;
    margin: 0 0 12px 0 !important;
}


/* ============================================================
   28. SECTION HEADER STATUS SUMMARIES (closed-state)
   v4_design.js injects .v4-section-summary spans into the
   .toggle_header > .col first child. CSS positions them right.
   ============================================================ */
body.v4-body .v4-content [id$="_app"] .toggle_header > .col {
    align-items: center !important;
}
body.v4-body .v4-content [id$="_app"] .v4-section-summary {
    margin-left: auto !important;
    margin-right: 12px !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--v4-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 380px !important;
    transition: opacity 0.18s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
body.v4-body .v4-content [id$="_app"] .toggle_header.header-toggler-opened .v4-section-summary {
    opacity: 0 !important;
    visibility: hidden !important;
}
body.v4-body .v4-content [id$="_app"] .v4-section-summary-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 9px !important;
    background: var(--v4-surface-alt) !important;
    border: 1px solid var(--v4-border-light) !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--v4-text-secondary) !important;
}
body.v4-body .v4-content [id$="_app"] .v4-section-summary-pill.is-active {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.20) !important;
    color: #047857 !important;
}
body.v4-body .v4-content [id$="_app"] .v4-section-summary-pill.is-brand {
    background: var(--v4-brand-soft) !important;
    border-color: rgba(248, 153, 57, 0.22) !important;
    color: var(--v4-brand-dark) !important;
}


/* ============================================================
   29. MENU ROW EMPHASIS — all rows visible (per user direction:
   one big page, everything visible). Empty rows fade slightly so
   the eye lands on configured ones; configured rows pop.
   ============================================================ */
body.v4-body .v4-content [id$="_app"] tr.v4-menu-empty {
    opacity: 0.55 !important;
    transition: opacity 0.15s ease !important;
}
body.v4-body .v4-content [id$="_app"] tr.v4-menu-empty:hover,
body.v4-body .v4-content [id$="_app"] tr.v4-menu-empty:focus-within {
    opacity: 1 !important;
}
body.v4-body .v4-content [id$="_app"] tr.v4-menu-configured {
    background: linear-gradient(90deg, rgba(248, 153, 57, 0.04) 0%, transparent 80%) !important;
}
/* Hide the show-all toggle since we always show everything now */
body.v4-body .v4-content [id$="_app"] .v4-show-all-keys-toggle {
    display: none !important;
}


/* ============================================================
   30. KEY CHIPS — configured keys glow brand
   ============================================================ */
body.v4-body .v4-content [id$="_app"] tr.v4-menu-configured .aa-key-chip {
    background: var(--v4-brand-soft) !important;
    border-color: rgba(248, 153, 57, 0.32) !important;
    color: var(--v4-brand-dark) !important;
    font-weight: 700 !important;
}


/* ============================================================
   31. SECTION CARD JAZZ — make every accordion feel premium

   - Soft section-tinted background-gradient on the OPEN card so
     each section has its own personality (Profile peach, Business
     green, etc.). Echoes the icon-tile color very subtly.
   - Open card lifts and gets a stronger shadow + brand left stripe
     (already in section 15) for unmistakable "this is active".
   - Closed cards animate the chevron + icon-tile on hover.
   ============================================================ */

/* Open card — overall lift, stronger shadow, white surface */
body.v4-body .v4-content [id$="_app"] > .setting_section.form_container:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #profile:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #profile-section:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #business:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #after-hours:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #holiday:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #submenu:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #advanced:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content #extension_app > div > .setting_section.form_container:has(.toggle_header.header-toggler-opened) {
    background: #FFFFFF !important;
    border-color: #C8D3E0 !important;
    box-shadow:
        0 1px 2px rgba(14, 39, 73, 0.04),
        0 28px 56px -28px rgba(15, 23, 42, 0.32),
        0 12px 24px -16px rgba(15, 23, 42, 0.14) !important;
}

/* Per-section subtle gradient backgrounds (only on the .toggle_header
   strip, not the whole card) so each accordion feels distinct without
   overwhelming the content area below. */
body.v4-body .v4-content [id$="_app"] > #profile-section .toggle_header,
body.v4-body .v4-content [id$="_app"] > #profile .toggle_header {
    background: linear-gradient(90deg, rgba(248, 153, 57, 0.05) 0%, transparent 60%) !important;
    border-radius: 12px !important;
}
body.v4-body .v4-content [id$="_app"] > #business .toggle_header {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, transparent 60%) !important;
    border-radius: 12px !important;
}
body.v4-body .v4-content [id$="_app"] > #after-hours .toggle_header {
    background: linear-gradient(90deg, rgba(67, 56, 202, 0.05) 0%, transparent 60%) !important;
    border-radius: 12px !important;
}
body.v4-body .v4-content [id$="_app"] > #holiday .toggle_header {
    background: linear-gradient(90deg, rgba(180, 83, 9, 0.05) 0%, transparent 60%) !important;
    border-radius: 12px !important;
}
body.v4-body .v4-content [id$="_app"] > #submenu .toggle_header {
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 60%) !important;
    border-radius: 12px !important;
}
body.v4-body .v4-content [id$="_app"] > #advanced .toggle_header {
    background: linear-gradient(90deg, rgba(71, 85, 105, 0.05) 0%, transparent 60%) !important;
    border-radius: 12px !important;
}

/* Smooth icon-tile pulse on hover */
body.v4-body .v4-content [id$="_app"] .setting_section.form_container:hover .toggle_header > .col > div:first-child::before {
    transform: translateY(-1px) scale(1.06) !important;
    box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.25) !important;
}


/* ============================================================
   32. SUB-SECTION CARD JAZZ — Greeting / Menu / Schedule cards

   Add a 3-px brand-tinted top accent to each sub-section card so
   the cards inside an open accordion feel like premium content
   blocks, not just outlined rectangles.
   ============================================================ */
body.v4-body .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] .aa-submenu-layout > .notify_section,
body.v4-body .v4-content [id$="_app"] .aa-prealert-layout > .notify_section,
body.v4-body .v4-content [id$="_app"] #submenu .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] #advanced .form-group.notify_section {
    position: relative !important;
    background:
        linear-gradient(180deg, rgba(248, 153, 57, 0.025) 0%, transparent 80px),
        var(--v4-surface) !important;
    box-shadow:
        0 1px 2px rgba(14, 39, 73, 0.02),
        0 8px 18px -16px rgba(14, 39, 73, 0.10) !important;
}


/* ============================================================
   33. PAGE HEADER JAZZ — bigger icon tile, gradient background
   on the page so the detail screen feels like an editor, not a
   form.
   ============================================================ */
body.v4-body .v4-content .v4-detail-head {
    padding-top: 8px !important;
    padding-bottom: 22px !important;
}
body.v4-body .v4-content .v4-detail-title-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background:
        linear-gradient(135deg, rgba(248, 153, 57, 0.14) 0%, rgba(248, 153, 57, 0.04) 100%) !important;
    border: 1px solid rgba(248, 153, 57, 0.18) !important;
    box-shadow: 0 8px 20px -10px rgba(248, 153, 57, 0.35) !important;
}
body.v4-body .v4-content .v4-detail-title-icon svg {
    width: 24px !important;
    height: 24px !important;
}
body.v4-body .v4-content .v4-detail-title-text h1 {
    font-size: 26px !important;
    background: linear-gradient(135deg, #0E2749 0%, #1F3D62 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}


/* ============================================================
   36. INSIDE-SECTION POLISH — Greeting / Menu / Schedule blocks
   Per user feedback: "when you expand each section, the greeting
   experience, the menu experience, the schedule experience" —
   THAT'S the canvas that needs to feel premium.
   ============================================================ */


/* ---------- 36b. GREETING BLOCK — premium media-card treatment ----------
   Reliable selector: any .notify_section that contains a .btn.tts-btn.play
   (every Greeting block has a Play button). Plus higher-specificity
   #auto_attendant_app etc. fallbacks to beat any v4_2026.css rules. */


/* ---------- 36c. MENU BLOCK — row-as-card with hover ---------- */
body.v4-body .v4-content [id$="_app"] table tr.v4-menu-empty,
body.v4-body .v4-content [id$="_app"] table tr.v4-menu-configured {
    transition: background-color 0.12s ease !important;
}
body.v4-body .v4-content [id$="_app"] table tr.v4-menu-empty:hover,
body.v4-body .v4-content [id$="_app"] table tr.v4-menu-configured:hover {
    background: rgba(248, 153, 57, 0.04) !important;
}
body.v4-body .v4-content [id$="_app"] table tr.v4-menu-empty > td,
body.v4-body .v4-content [id$="_app"] table tr.v4-menu-configured > td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* KEY chip larger and configured ones glow brand-orange.
   Use explicit ID selectors so we beat v4_2026.css line 1423 which
   has #auto_attendant_app ID specificity. */
body.v4-body .v4-content #auto_attendant_app .aa-key-chip,
body.v4-body .v4-content #hunt_group_app .aa-key-chip,
body.v4-body .v4-content #call_center_app .aa-key-chip,
body.v4-body .v4-content #extension_app .aa-key-chip,
body.v4-body .v4-content [id$="_app"] .aa-key-chip {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(14, 39, 73, 0.04) !important;
    background: #FFFFFF !important;
    border: 1px solid #CDD6E2 !important;
    color: var(--v4-text) !important;
}
body.v4-body .v4-content #auto_attendant_app tr.v4-menu-configured .aa-key-chip,
body.v4-body .v4-content #hunt_group_app tr.v4-menu-configured .aa-key-chip,
body.v4-body .v4-content #call_center_app tr.v4-menu-configured .aa-key-chip,
body.v4-body .v4-content #extension_app tr.v4-menu-configured .aa-key-chip,
body.v4-body .v4-content [id$="_app"] tr.v4-menu-configured .aa-key-chip {
    background: linear-gradient(135deg, var(--v4-brand) 0%, #FBB26A 100%) !important;
    border-color: var(--v4-brand) !important;
    color: #FFFFFF !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 12px -4px rgba(248, 153, 57, 0.5) !important;
}


/* ---------- 36d. SCHEDULE BLOCK — prominent + tasteful ---------- */
body.v4-body .v4-content [id$="_app"] .form-group.notify_section:has(.schedule_container),
body.v4-body .v4-content [id$="_app"] .form-group.notify_section:has(select[name*="schedule"]) {
    background:
        linear-gradient(180deg, rgba(67, 56, 202, 0.03) 0%, var(--v4-surface) 80px) !important;
    border-color: rgba(67, 56, 202, 0.14) !important;
}
body.v4-body .v4-content [id$="_app"] .form-group.notify_section select[name*="schedule"],
body.v4-body .v4-content [id$="_app"] .schedule_container select[name*="schedule"] {
    height: 42px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
}
body.v4-body .v4-content [id$="_app"] .schedule_container .btn,
body.v4-body .v4-content [id$="_app"] .schedule_container button {
    border-radius: 999px !important;
    border: 1px solid var(--v4-border) !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;
    height: 34px !important;
    padding: 0 14px !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
}


/* ============================================================
   37. RESPONSIVE — keep it tidy on narrow widths
   ============================================================ */
@media (max-width: 760px) {
    body.v4-body .v4-content .v4-detail-head {
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 12px;
    }
    body.v4-body .v4-content .v4-detail-actions {
        justify-content: flex-end;
    }
    body.v4-body .v4-content .v4-detail-title-text h1 {
        font-size: 20px;
    }
    body.v4-body .v4-content [id$="_app"] .v4-section-summary {
        display: none !important;
    }
}


/* ============================================================
   38. PROFESSIONAL CLEANUP (PASS 9)

   Per user direction: "the scheme is very professional very yes
   we need to make the buttons a certain way but it should just be
   elegant beautiful and professional, modern looking — could a big
   company present this in a portal without being considered the
   kindergarten teacher?"

   Specifically:
     - No multi-color icon tiles (Profile peach, Business green,
       After Hours indigo, Holiday amber, Submenus teal, Advanced
       slate). Single neutral.
     - No per-section header-strip gradients.
     - No peach Greeting backdrop, no indigo Schedule backdrop, no
       brand-tinted gradient on Menu rows, no brand-tinted Sub-
       section CARD frames.
     - Eliminate the nested frame chain. When a section is open,
       there is ONE white card (the accordion). Inside, the three
       blocks (Greeting / Menu / Schedule) are LABELED SECTIONS,
       not framed sub-cards.
     - Brand orange is reserved for: page-header icon, primary
       Save CTA, the active-section accent stripe, and the small
       configured-key indication.

   This block sits at the very end of the file so it overrides
   everything above it on cascade order.
   ============================================================ */

/* 1. Per-section toggle_header gradients — remove. All headers
      use the same neutral surface. */
body.v4-body .v4-content [id$="_app"] > #profile-section .toggle_header,
body.v4-body .v4-content [id$="_app"] > #profile .toggle_header,
body.v4-body .v4-content [id$="_app"] > #business .toggle_header,
body.v4-body .v4-content [id$="_app"] > #after-hours .toggle_header,
body.v4-body .v4-content [id$="_app"] > #holiday .toggle_header,
body.v4-body .v4-content [id$="_app"] > #submenu .toggle_header,
body.v4-body .v4-content [id$="_app"] > #advanced .toggle_header {
    background: transparent !important;
}

/* 2. Section icon tiles — all neutral light-gray with navy-slate stroke.
      Same colour for every section so the page reads as a coherent
      whole, not a colour wheel. */
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,
body.v4-body .v4-content [id$="_app"] > #business .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #after-hours .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #holiday .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #submenu .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #advanced .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #settings .toggle_header > .col > div:first-child::before,
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,
body.v4-body .v4-content [id$="_app"] > #phones .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content [id$="_app"] > #announcements .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #profile .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #personal_settings .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #phone_section .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #call_control .toggle_header > .col > div:first-child::before,
body.v4-body .v4-content #extension_app > div > #advanced .toggle_header > .col > div:first-child::before {
    background-color: var(--v4-surface-alt) !important;
    border: 1px solid var(--v4-border) !important;
}

/* 3. SUB-SECTION CARDS → LABELED SECTIONS (kill the nested frames)
      The Greeting / Menu / Schedule notify_sections inside an open
      accordion no longer get their own border / radius / shadow.
      They become flush sections of the parent card, separated by a
      thin top divider and a small uppercase label. */
body.v4-body .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] .aa-submenu-layout > .notify_section,
body.v4-body .v4-content [id$="_app"] .aa-prealert-layout > .notify_section,
body.v4-body .v4-content [id$="_app"] #submenu .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] #advanced .form-group.notify_section {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 18px 0 18px 0 !important;
    margin: 0 !important;
}

/* Subtle separator between sections inside the open card */
body.v4-body .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section + .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] .aa-submenu-layout > .notify_section + .notify_section,
body.v4-body .v4-content [id$="_app"] .aa-prealert-layout > .notify_section + .notify_section,
body.v4-body .v4-content [id$="_app"] #submenu .form-group.notify_section + .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] #advanced .form-group.notify_section + .form-group.notify_section {
    border-top: 1px solid var(--v4-border-light) !important;
    padding-top: 22px !important;
}

/* Inner "shell" wrappers (.aa-unified-shell, .aa-submenu-layout,
   #alternative_number) flatten too — they were
   adding the second frame inside the open accordion card.
   NOTE: .aa-prealert-layout removed — master is v4_recorder_module.css */
body.v4-body .v4-content [id$="_app"] .aa-unified-shell,
body.v4-body .v4-content [id$="_app"] .aa-submenu-layout {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px 4px 0 4px !important;
    margin: 0 !important;
}
/* Profile's "Number" sub-frame stays neutral — flatten the brand tint */
body.v4-body .v4-content [id$="_app"] #alternative_number {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
}

/* 4. GREETING peach gradient backdrop — remove */

/* 5. SCHEDULE indigo gradient backdrop — remove */
body.v4-body .v4-content [id$="_app"] .form-group.notify_section:has(.schedule_container),
body.v4-body .v4-content [id$="_app"] .form-group.notify_section:has(select[name*="schedule"]) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* 6. Configured menu row brand tint — remove */
body.v4-body .v4-content [id$="_app"] tr.v4-menu-configured {
    background: transparent !important;
}

/* 7. KEY chips dial back: configured = subtle brand-soft tint, not
      a full orange gradient. Sized 38 px (was 44 px / 42 px). */
body.v4-body .v4-content #auto_attendant_app .aa-key-chip,
body.v4-body .v4-content #hunt_group_app .aa-key-chip,
body.v4-body .v4-content #call_center_app .aa-key-chip,
body.v4-body .v4-content #extension_app .aa-key-chip,
body.v4-body .v4-content [id$="_app"] .aa-key-chip {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    background: var(--v4-surface) !important;
    border: 1px solid var(--v4-border) !important;
    color: var(--v4-text) !important;
}
body.v4-body .v4-content #auto_attendant_app tr.v4-menu-configured .aa-key-chip,
body.v4-body .v4-content #hunt_group_app tr.v4-menu-configured .aa-key-chip,
body.v4-body .v4-content #call_center_app tr.v4-menu-configured .aa-key-chip,
body.v4-body .v4-content #extension_app tr.v4-menu-configured .aa-key-chip,
body.v4-body .v4-content [id$="_app"] tr.v4-menu-configured .aa-key-chip {
    background: var(--v4-brand-soft) !important;
    border-color: rgba(248, 153, 57, 0.28) !important;
    color: var(--v4-brand-dark) !important;
    box-shadow: none !important;
}

/* 8. Page-header icon tile — keep brand-soft (this is the page
      identity), but flatten the gradient to a single soft tint. */
body.v4-body .v4-content .v4-detail-title-icon {
    background: var(--v4-brand-soft) !important;
    border-color: rgba(248, 153, 57, 0.18) !important;
    box-shadow: none !important;
}

/* 9. Section card on hover/open — calm, single-shadow drop, no big
      lift transforms. The active card is still distinguished by the
      4-px brand stripe on the left edge (already set in section 15). */
body.v4-body .v4-content [id$="_app"] > .setting_section.form_container:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #profile:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #profile-section:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #business:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #after-hours:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #holiday:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #submenu:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #advanced:has(.toggle_header.header-toggler-opened) {
    background: #FFFFFF !important;
    border: 1px solid #DBE3EC !important;
    box-shadow: 0 1px 2px rgba(14, 39, 73, 0.04), 0 18px 36px -24px rgba(15, 23, 42, 0.18) !important;
}

/* 10. No transform/scale animations on hover (calmer feel) */
body.v4-body .v4-content [id$="_app"] > .setting_section.form_container,
body.v4-body .v4-content [id$="_app"] > #advanced,
body.v4-body .v4-content [id$="_app"] > #settings,
body.v4-body .v4-content [id$="_app"] > #call_control,
body.v4-body .v4-content [id$="_app"] > #call-control,
body.v4-body .v4-content [id$="_app"] > #phones,
body.v4-body .v4-content [id$="_app"] > #announcements,
body.v4-body .v4-content #extension_app > div > .setting_section.form_container {
    transform: none !important;
}
body.v4-body .v4-content [id$="_app"] > .setting_section.form_container:hover,
body.v4-body .v4-content [id$="_app"] > #advanced:hover,
body.v4-body .v4-content [id$="_app"] > #settings:hover,
body.v4-body .v4-content [id$="_app"] > #call_control:hover,
body.v4-body .v4-content [id$="_app"] > #phones:hover,
body.v4-body .v4-content #extension_app > div > .setting_section.form_container:hover {
    transform: none !important;
}
body.v4-body .v4-content [id$="_app"] .setting_section.form_container:hover .toggle_header > .col > div:first-child::before {
    transform: none !important;
    box-shadow: none !important;
}

/* 11. Section summary pill colors — neutralize the green "Active"
      pill and the brand-orange "n enabled" pill. Keep a single
      neutral pill, brand-orange only on the truly important state. */
body.v4-body .v4-content [id$="_app"] .v4-section-summary-pill.is-active {
    background: var(--v4-surface-alt) !important;
    border-color: var(--v4-border-light) !important;
    color: var(--v4-text-secondary) !important;
}


/* ============================================================
   52. PASS 17 — DESIGNER PASS: hide redundant inline labels

   Inside Greeting block, the "RECORDINGS:" / "ACTIONS:" / "UPLOAD:"
   inline labels are visual noise — the controls themselves
   (Recordings dropdown / Play+Download buttons / Upload+Record
   buttons) speak for themselves. Top-tier SaaS hides them and
   uses only the section heading + description.
   ============================================================ */


/* ============================================================
   53. PASS 17 — Tighter card internal rhythm

   Section heading → description → 20-px gap → controls.
   Premium typography hierarchy.
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] .v4-section-titled {
    margin: 0 !important;
}
body.v4-body #v4-app .v4-content [id$="_app"] .v4-section-titled label.v4-section-heading {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--v4-text) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}


/* ============================================================
   54. PASS 17 — Title bar inside the open accordion

   No outer card now, but the title bar still needs to stand out
   as the section heading. Add bottom border + breathing room.
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] > .setting_section.form_container:has(.toggle_header.header-toggler-opened) > .setting_box,
body.v4-body #v4-app .v4-content [id$="_app"] > #after-hours:has(.toggle_header.header-toggler-opened) > .setting_box,
body.v4-body #v4-app .v4-content [id$="_app"] > #profile:has(.toggle_header.header-toggler-opened) > .setting_box,
body.v4-body #v4-app .v4-content [id$="_app"] > #profile-section:has(.toggle_header.header-toggler-opened) > .setting_box,
body.v4-body #v4-app .v4-content [id$="_app"] > #business:has(.toggle_header.header-toggler-opened) > .setting_box,
body.v4-body #v4-app .v4-content [id$="_app"] > #holiday:has(.toggle_header.header-toggler-opened) > .setting_box,
body.v4-body #v4-app .v4-content [id$="_app"] > #submenu:has(.toggle_header.header-toggler-opened) > .setting_box,
body.v4-body #v4-app .v4-content [id$="_app"] > #advanced:has(.toggle_header.header-toggler-opened) > .setting_box {
    margin-bottom: 24px !important;
}


/* ============================================================
   55. PASS 18 — KILL EVERY STRAY INLINE LABEL inside Greeting

   ACTIONS:, RECORDINGS:, UPLOAD: still leak through. Wider net
   to catch them all.
   ============================================================ */
/* But keep the v4 SECTION HEADING + DESCRIPTION (those have their
   own classes from JS decoration) — they should NOT be hidden.
   Selector specificity must MATCH the hide rule above (5-class
   form-group.notify_section path) so we win the cascade. */
body.v4-body #v4-app .v4-content [id$="_app"] .form-group.notify_section label.v4-section-heading,
body.v4-body #v4-app .v4-content [id$="_app"] .form-group.notify_section .v4-section-titled label.col-form-label.label,
body.v4-body #v4-app .v4-content [id$="_app"] .form-group.notify_section .v4-section-titled label,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section label.v4-section-heading,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section .v4-section-titled label.col-form-label.label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--v4-text) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    display: block !important;
    text-align: left !important;
}


/* ============================================================
   56. PASS 19 — APPLY / CANCEL inline buttons in Greeting

   These are <button> elements with .add_new_greeting and
   .cancel_new_greeting classes (no _text suffix). Pass 3's
   button.btn.no_padding_heights.no_padding_widths circle rule
   was catching them and rendering them as 32-px circles
   crammed with "Apply"/"Cancel" text overflowing. Force them
   back to proper auto-width pill buttons.
   ============================================================ */


/* ============================================================
   57. PASS 18 — Schedule "Business Hours:" label fix

   Move the label/dropdown to the LEFT, add a small descriptive
   line beneath the section heading, place the dropdown next to
   the label.
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section > div:has(> label[for*="schedule"]) {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 6px 0 18px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
}
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section > div > label[for*="schedule"] {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--v4-text) !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    width: auto !important;
    flex-shrink: 0 !important;
}


/* ============================================================
   58. PASS 18 — KEY chip subtle polish — slightly stronger
   ============================================================ */
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-key-chip,
body.v4-body #v4-app .v4-content #hunt_group_app .aa-key-chip,
body.v4-body #v4-app .v4-content #call_center_app .aa-key-chip,
body.v4-body #v4-app .v4-content #extension_app .aa-key-chip {
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
    color: var(--v4-text-secondary) !important;
}
body.v4-body #v4-app .v4-content #auto_attendant_app tr.v4-menu-configured .aa-key-chip,
body.v4-body #v4-app .v4-content #hunt_group_app tr.v4-menu-configured .aa-key-chip,
body.v4-body #v4-app .v4-content #call_center_app tr.v4-menu-configured .aa-key-chip,
body.v4-body #v4-app .v4-content #extension_app tr.v4-menu-configured .aa-key-chip {
    background: var(--v4-brand-soft) !important;
    border-color: rgba(248, 153, 57, 0.32) !important;
    color: var(--v4-brand-dark) !important;
}
/* ============================================================
   63. PASS 20 — UNIFORM 38-PX BASELINE for every interactive
   inside the open accordion. User: "everything should match up,
   the recording buttons row is so misaligned."

   One height. One radius. One family. Pencil stays a 38-px
   circle (same height = no misalignment). Menu/Schedule row
   action icons stay 32-px (smaller fits the narrow column),
   but use the same circle treatment.
   ============================================================ */

/* All Greeting tts-btn pills (Download / Speech to Text / Upload /
   Record / Text to Speech) — uniform 38-px height to match the
   Play pill above. */

/* Recording row controls — dropdown sizing consolidated in v4_2026.css;
   button sizing kept below */


/* ============================================================
   64. PASS 23 — MENU & SCHEDULE row action icons matched to the
   KEY-chip and form-field family on the LEFT of each row:
     * 38-px square (was 32-px circle)
     * 10-px radius rounded square (was 50% circle)
     * Same hairline border as form fields next to them
     * Icon centered inside (16-px SVG via ::before)
   User: "It should be similar to the key buttons. The buttons
   on the left side. The same size, the same shape. It should
   have that border and inside to have the icon."
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] .btn.table_button,
body.v4-body #v4-app .v4-content #auto_attendant_app .btn.table_button,
body.v4-body #v4-app .v4-content #hunt_group_app .btn.table_button,
body.v4-body #v4-app .v4-content #call_center_app .btn.table_button,
body.v4-body #v4-app .v4-content #extension_app .btn.table_button,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section button.btn[class*="edit"],
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section button.btn[class*="open"],
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section button.btn[class*="delete"] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    border-radius: 10px !important;
    padding: 0 !important;
    background: var(--v4-surface) !important;
    border: 1px solid #E5E7EB !important;
    color: var(--v4-text-secondary) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
body.v4-body #v4-app .v4-content [id$="_app"] .btn.table_button:hover,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section button.btn[class*="edit"]:hover,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section button.btn[class*="open"]:hover {
    background: var(--v4-surface-alt) !important;
    border-color: #CBD1DC !important;
    color: var(--v4-text) !important;
}
body.v4-body #v4-app .v4-content [id$="_app"] .btn.table_button[class*="_menu_remove"]:hover,
body.v4-body #v4-app .v4-content [id$="_app"] .btn.table_button.submenu_remove:hover,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section button.btn[class*="delete"]:hover {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: rgba(239, 68, 68, 0.32) !important;
    color: #B91C1C !important;
}


/* ============================================================
   65. PASS 19 — All form fields slight lift

   Inputs / selects across all sections of the open detail page
   get a consistent v4 look: 38-px height, 10-px radius, hairline
   border, soft focus glow.
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] .form-group.notify_section input:focus,
body.v4-body #v4-app .v4-content [id$="_app"] .form-group.notify_section select:focus,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section input:focus,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section select:focus {
    outline: none !important;
    border-color: var(--v4-brand) !important;
    box-shadow: 0 0 0 3px var(--v4-brand-glow) !important;
}


/* ============================================================
   39. ELEGANT 3-SECTION LAYOUT (PASS 10)

   Per user direction: when After Hours opens, the user should
   instantly see three distinct components to configure —
   GREETING, MENU, SCHEDULE — each presented elegantly, like a
   modern enterprise SaaS portal. JS injects descriptive subtitles;
   CSS makes the layout breathe.

   Anatomy:
     [SECTION TITLE]                            ← big, navy, weight 700
     One-line description of what this controls.← muted, smaller
     -- generous whitespace --
     [Controls]
     -- thin divider --
     [Next section]
   ============================================================ */

/* Section title — promote the legacy small label into a real
   section heading. JS tags the inner <label> with .v4-section-heading
   and the wrapper with .v4-section-titled. */
body.v4-body .v4-content [id$="_app"] label.v4-section-heading,
body.v4-body .v4-content [id$="_app"] .v4-section-titled label.col-form-label.label,
body.v4-body .v4-content [id$="_app"] .v4-section-titled > label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--v4-text) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    width: auto !important;
    text-align: left !important;
    display: block !important;
}
/* The wrapper itself: remove any column constraints and let the
   heading + description flow naturally */
body.v4-body .v4-content [id$="_app"] .aa-subsection-title.v4-section-titled,
body.v4-body .v4-content [id$="_app"] .v4-section-titled {
    display: block !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
}

/* Generous vertical rhythm between sub-sections.
   Override the earlier "padding: 18px 0" to a roomier 28px so the
   three sections feel like distinct blocks. */
body.v4-body .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] .aa-submenu-layout > .notify_section,
body.v4-body .v4-content [id$="_app"] .aa-prealert-layout > .notify_section,
body.v4-body .v4-content [id$="_app"] #submenu .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] #advanced .form-group.notify_section {
    padding: 28px 4px 28px 4px !important;
}
body.v4-body .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section + .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] .aa-submenu-layout > .notify_section + .notify_section,
body.v4-body .v4-content [id$="_app"] .aa-prealert-layout > .notify_section + .notify_section,
body.v4-body .v4-content [id$="_app"] #submenu .form-group.notify_section + .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] #advanced .form-group.notify_section + .form-group.notify_section {
    border-top: 1px solid var(--v4-border-light) !important;
    padding-top: 28px !important;
}

/* The shell wrapper itself gets some vertical breathing room and
   slightly inset horizontal padding so the sub-sections don't run
   right to the card edge. */
body.v4-body .v4-content [id$="_app"] .aa-unified-shell,
body.v4-body .v4-content [id$="_app"] .aa-submenu-layout {
    padding: 8px 22px 12px 22px !important;
}


/* ============================================================
   41. MENU & SCHEDULE micro-polish
   ============================================================ */

/* Menu section: small "Configured" indicator above the table.
   The configured rows already get the brand-soft KEY chip tint
   from section 30. Add small breathing room above the table. */
body.v4-body .v4-content [id$="_app"] .form-group.notify_section[class*="menu"] table,
body.v4-body .v4-content [id$="_app"] #after-hours .form-group.notify_section table,
body.v4-body .v4-content [id$="_app"] #business .form-group.notify_section table,
body.v4-body .v4-content [id$="_app"] #holiday .form-group.notify_section table,
body.v4-body .v4-content [id$="_app"] #submenu .form-group.notify_section table {
    margin-top: 6px !important;
}

/* Schedule section: dropdown takes natural width, no awkward
   right-floating */
body.v4-body .v4-content [id$="_app"] .form-group.notify_section .schedule_container .form-group {
    align-items: center !important;
}

/* Final overall: no inner-section box-shadows lingering */
body.v4-body .v4-content [id$="_app"] .form-group.notify_section {
    box-shadow: none !important;
}

/* Section 47 (PASS 12 ghost-circle rule) — SUPERSEDED by Pass 21
   (section 64). The ghost-borderless treatment was overriding
   the new with-border treatment because this rule lives later
   in the file. Removed. */
body.v4-body #v4-app .v4-content [id$="_app"] .btn.table_button[class*="_menu_remove"]:hover,
body.v4-body #v4-app .v4-content [id$="_app"] a.delete_submenu:not(.disabled-icon):hover,
body.v4-body #v4-app .v4-content [id$="_app"] .remove_alternative_number:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #B91C1C !important;
}


/* 48. SCHEDULE STS — moved to company/services/schedule/assets/schedule.css */


/* ============================================================
   49. PASS 12: Schedule "Time Schedule" dropdown inline
   Was right-floated next to "Business Hours:" label.
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section > .form-group:first-of-type,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section > div:has(> select[name*="schedule"]) {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 6px 0 18px 0 !important;
    padding: 0 !important;
    text-align: left !important;
}


/* ============================================================
   50. PASS 12: Schedule pill action buttons — uniform 36 px pills
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section .add_schedule,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section .save_schedule_button,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section button.add_schedule {
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid var(--v4-border) !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;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section .add_schedule:hover {
    background: var(--v4-surface-alt) !important;
    border-color: #CBD1DC !important;
}


/* ============================================================
   51. PASS 12: Inline date-range "x" close icons in Schedule rows
   become true circles, smaller, neutral.
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section .x_icon {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: var(--v4-surface-alt) !important;
    color: var(--v4-text-muted) !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
}


/* ============================================================
   42. STRATEGIC FRAMING (PASS 11)

   Decision after analyzing the full open accordion:
     - Each sub-section (Greeting / Menu / Schedule) DOES get its
       own subtle card — that's how the user perceives "three
       distinct components."
     - The outer accordion frame steps back: lighter border, no
       drop shadow, so the inner cards lead the eye and there's
       no "frame in a frame" competition.
     - The active-section accent stripe (4-px brand on the left
       edge of the outer card) is the only thing that says "this
       section is open."
   ============================================================ */

/* OUTER accordion — open state — RESTORED, MORE VISIBLE.
   Border bumped from var(--v4-border) (very light #DBE3EC) to
   #D1D5DB so the outer card frame actually reads on screen.
   Drop shadow softened to a single calm 12-px so it doesn't
   compete with the inner cards' shadows. */
body.v4-body .v4-content [id$="_app"] > .setting_section.form_container:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #profile:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #profile-section:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #business:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #after-hours:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #holiday:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #submenu:has(.toggle_header.header-toggler-opened),
body.v4-body .v4-content [id$="_app"] > #advanced:has(.toggle_header.header-toggler-opened) {
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -12px rgba(15, 23, 42, 0.12) !important;
    padding: 6px 22px 22px 22px !important;
    overflow: visible !important;
    margin-bottom: 16px !important;
}
/* EVERY middle wrapper between outer card and inner cards is
   absolutely transparent — no border, no background, no shadow,
   no margin/padding that creates a visible structure line.
   Only the OUTER and the INNER cards should have chrome. */
body.v4-body #v4-app .v4-content [id$="_app"] .setting_box,
body.v4-body #v4-app .v4-content [id$="_app"] .setting_box > .extension,
body.v4-body #v4-app .v4-content [id$="_app"] .setting_box > .extension > h5,
body.v4-body #v4-app .v4-content [id$="_app"] .setting_box > .extension > .form_section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-unified-shell,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-submenu-layout,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-submenu-menu-card,
body.v4-body #v4-app .v4-content [id$="_app"] .submenu_container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* PASS 35b — padding zeroed except TOP, so the Pass 35 32-px
       breathing room above the first inner card actually applies. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/* Inner sub-section cards (Greeting / Menu / Schedule) — each gets a
   white card on the alt-gray parent surface. Clear, calm, distinct. */
/* INNER sub-section cards — RESTORED inside the white outer card.
   User direction: "greeting is not in its own card, menu does not
   in its own card, scheduling is not in its own card. outer line
   is good but now all those three is one big card instead of
   separate ones."
   Inner cards use a subtle alt-gray fill to distinguish themselves
   from the white outer card surface, with a hairline border and
   12-px radius. No shadow (the outer already provides depth) so
   they don't visually compete. */
body.v4-body #v4-app .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-submenu-layout > .notify_section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-prealert-layout > .notify_section,
body.v4-body #v4-app .v4-content [id$="_app"] #submenu .form-group.notify_section,
body.v4-body #v4-app .v4-content [id$="_app"] #advanced .form-group.notify_section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-unified-shell > .aa-schedule-section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-submenu-layout > .aa-schedule-section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-prealert-layout > .aa-schedule-section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-unified-shell > .form-group.notify_section,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-submenu-layout > .notify_section,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-prealert-layout > .notify_section,
body.v4-body #v4-app .v4-content #auto_attendant_app #submenu .form-group.notify_section,
body.v4-body #v4-app .v4-content #auto_attendant_app #advanced .form-group.notify_section,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-schedule-section {
    /* PASS 19 — tightened card with strong presence: white,
       #E5E7EB border, 16-px radius, 24/28-px padding (less dead
       space at bottom), 2-step soft drop shadow. */
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    padding: 24px 28px 24px 28px !important;
    margin: 0 0 16px 0 !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 12px -6px rgba(15, 23, 42, 0.08) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}
body.v4-body #v4-app .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section:hover,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-unified-shell > .aa-schedule-section:hover,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section:hover,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-unified-shell > .form-group.notify_section:hover {
    border-color: #D1D5DB !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 8px 20px -8px rgba(15, 23, 42, 0.12) !important;
}
/* No top divider needed (cards do the dividing) */
body.v4-body #v4-app .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section + .form-group.notify_section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section + .aa-schedule-section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-unified-shell > .aa-schedule-section + .form-group.notify_section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-submenu-layout > .notify_section + .notify_section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-prealert-layout > .notify_section + .notify_section,
body.v4-body #v4-app .v4-content [id$="_app"] #submenu .form-group.notify_section + .form-group.notify_section,
body.v4-body #v4-app .v4-content [id$="_app"] #advanced .form-group.notify_section + .form-group.notify_section {
    border-top: 1px solid var(--v4-border-light) !important;
}

/* Remove the divider line between sub-sections (the cards do the dividing) */
body.v4-body .v4-content [id$="_app"] .aa-unified-shell > .form-group.notify_section + .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] .aa-submenu-layout > .notify_section + .notify_section,
body.v4-body .v4-content [id$="_app"] .aa-prealert-layout > .notify_section + .notify_section,
body.v4-body .v4-content [id$="_app"] #submenu .form-group.notify_section + .form-group.notify_section,
body.v4-body .v4-content [id$="_app"] #advanced .form-group.notify_section + .form-group.notify_section {
    border-top: 1px solid var(--v4-border-light) !important;
    padding-top: 22px !important;
}


/* Section 43 (Pass 11 — 40-px circle) — SUPERSEDED by Pass 20c
   38-px brand-orange pill rule. Removed; the rule was clamping
   width to 40 px which truncated the "Play" label to "Pla". */


/* 45. SCHEDULE SECTION — moved to company/services/schedule/assets/schedule.css */

/* Schedule selector ("Time Schedule" / "Group Time Schedule" / etc.)
   — appears at the top of the Schedule sub-section. Pull it inline
   under the section heading instead of right-floated. */
body.v4-body #v4-app .v4-content [id$="_app"] .form-group.notify_section > div:has(> select[name*="schedule"]) {
    text-align: left !important;
    margin: 6px 0 18px 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* "Business Hours:" / "Holiday Schedule:" label inside Schedule — small uppercase tracked */
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section > .form-group > label,
body.v4-body #v4-app .v4-content [id$="_app"] .schedule_container > .form-group > label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--v4-text-muted) !important;
    margin-bottom: 4px !important;
}

/* Schedule action buttons (Add Schedule / Add Template / Show Old) —
   ensure consistent pill look */
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section .add_schedule,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-schedule-section .save_schedule_button,
body.v4-body #v4-app .v4-content [id$="_app"] .schedule_container .add_schedule {
    border-radius: 999px !important;
    height: 36px !important;
    padding: 0 16px !important;
    border: 1px solid var(--v4-border) !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;
    box-shadow: none !important;
}


/* ============================================================
   46. MENU SECTION — match Schedule round style + button consistency
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] tr.v4-menu-empty input,
body.v4-body #v4-app .v4-content [id$="_app"] tr.v4-menu-empty select,
body.v4-body #v4-app .v4-content [id$="_app"] tr.v4-menu-configured input,
body.v4-body #v4-app .v4-content [id$="_app"] tr.v4-menu-configured select {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid #CBD1DC !important;
    background-color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    box-shadow: none !important;
}


/* ============================================================
   65. GREETING — alignment + button-family unification   [PASS 27]

   User: "Greeting icons must all be aligned. The first row is more
   to the left, the rest are more to the right. All icons need to be
   properly shaped and a style elegance and perfect."

   PROBLEMS WE FIX:
   1. Each greeting action row starts with a 90-px <label
      class="greeting_label"> spacer ("Recordings:", "Actions:",
      "Upload:"). The first row's spacer is 1-px so its content sits
      at left=325. The other rows' spacers are 90-px so their content
      sits at left=425 — a 100-px right shift the user called out.
      Fix: hide every .greeting_label so all rows align to the same
      left edge.

   2. The 6 buttons (Play, Download, Speech to Text, Upload, Record,
      Text to Speech) had two slightly different families: Play was
      38-px, others were 36-px; icons were 18 vs un-sized; padding
      varied. Fix: unify to one 38-px elegant pill family with a
      single 14-px icon size and consistent gap.
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] .form-group.notify_section [class*="_greeting_area"] {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

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

/* 5) PASS 31 — Play is no longer the orange-filled odd-one-out.
      User wanted it back to the regular neutral pill family.
      The neutral styling at the top of this file (around line 1583)
      already handles Play. This block previously forced brand-orange
      fill — it has been removed. */

/* ============================================================
   PASS 34 — Schedule selector LEFT-aligned everywhere.

   User: "the Time Schedule dropdown moved to the right; it needs
   to sit on the LEFT, just below or next to the Business Hours
   label." A legacy CSS rule was applying margin-left: 979px to
   the schedule <select>, pushing it all the way to the right
   edge of its parent. Kill that margin + make the wrapper an
   auto-width inline-flex so the dropdown sits right next to its
   label — same fix applied to Business Hours / After Hours /
   Holiday / Advanced schedule selectors.
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] .schedule-selector-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}
/* Stop the schedule-row LABEL from grabbing the entire row width
   (legacy bootstrap col-form-label sets flex: 1 1 auto). With the
   label growing to ~850-px it shoves the dropdown to the far right. */
body.v4-body #v4-app .v4-content [id$="_app"] .schedule-selector-row > label,
body.v4-body #v4-app .v4-content [id$="_app"] .schedule-selector-row > .schedule-label,
body.v4-body #v4-app .v4-content [id$="_app"] .schedule-selector-row > .col-form-label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
body.v4-body #v4-app .v4-content [id$="_app"] .schedule_selector_wrapper,
body.v4-body #v4-app .v4-content [id$="_app"] .after-hours-schedule-select-box,
body.v4-body #v4-app .v4-content [id$="_app"] .pre-alert-schedule-select-box {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
body.v4-body #v4-app .v4-content [id$="_app"] .schedule_selector_wrapper > select,
body.v4-body #v4-app .v4-content [id$="_app"] .schedule_selector_wrapper select.schedule_selector,
body.v4-body #v4-app .v4-content [id$="_app"] .after-hours-schedule-select-box select,
body.v4-body #v4-app .v4-content [id$="_app"] .pre-alert-schedule-select-box select,
body.v4-body #v4-app .v4-content [id$="_app"] select.after_hours_time_schedule_selector,
body.v4-body #v4-app .v4-content [id$="_app"] select.schedule_selector {
    /* zero-out the legacy auto-margin that pushed it 979-px right */
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 260px !important;
    float: none !important;
}


/* ============================================================
   66. EXPANDED SECTION — breathing room before the first inner
       card.   PASS 32 + PASS 33 unification

   When a user opens an accordion section (After Hours, Business
   Hours, Holiday, Profile, Submenus, Advanced) the first inner
   card was crammed against the section header. Add 18-px of top
   padding to every opened panel so the first card sits clearly
   inside the section, not jammed to its edge. Same value
   everywhere — quiet, consistent rhythm.
   ============================================================ */
body.v4-body #v4-app .v4-content [id$="_app"] .form_section,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-unified-shell,
body.v4-body #v4-app .v4-content [id$="_app"] .aa-submenu-layout,
body.v4-body #v4-app .v4-content [id$="_app"] #profile > .toggle_header + *,
body.v4-body #v4-app .v4-content [id$="_app"] #profile-section > .toggle_header + *,
body.v4-body #v4-app .v4-content [id$="_app"] #submenu > .toggle_header + *,
body.v4-body #v4-app .v4-content [id$="_app"] #advanced > .toggle_header + * {
    /* PASS 35 — bump 18 → 32 px. User: "Greeting card is still too
       close to the top of the section, push it down a little." */
    padding-top: 32px !important;
}

/* PASS 35d — explicit MARGIN-TOP on the first inner Greeting card
   so it visibly drops away from the section header. The padding-top
   above couldn't escape the legacy `padding: 0` cascade on parent
   wrappers, so we apply margin to the card itself.   Added with
   maximum-specificity selectors so no legacy rule beats it. */
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-unified-shell > .form-group.notify_section:first-child,
body.v4-body #v4-app .v4-content #auto_attendant_app .aa-submenu-layout > .form-group.notify_section:first-child,
body.v4-body #v4-app .v4-content #hunt_group_app .aa-unified-shell > .form-group.notify_section:first-child,
body.v4-body #v4-app .v4-content #call_center_app .aa-unified-shell > .form-group.notify_section:first-child,
body.v4-body #v4-app .v4-content #extension_app .aa-unified-shell > .form-group.notify_section:first-child {
    margin-top: 32px !important;
}
/* But avoid stacking padding on nested containers — only the top
   shell gets it (the unified-shell IS the form_section's first
   child for AA detail pages). The form_section padding above is
   the safety net for non-AA pages. */
body.v4-body #v4-app .v4-content [id$="_app"] .form_section > .aa-unified-shell,
body.v4-body #v4-app .v4-content [id$="_app"] .form_section > .aa-submenu-layout {
    padding-top: 0 !important;       /* parent .form_section already has the padding */
}
/* Also kill any negative top margin on the first inner card that
   could pull it back up (legacy CSS sometimes does this). */
body.v4-body #v4-app .v4-content [id$="_app"] .form_section > div > .form-group.notify_section:first-child,
body.v4-body #v4-app .v4-content [id$="_app"] .form_section > .aa-unified-shell > .form-group.notify_section:first-child,
body.v4-body #v4-app .v4-content [id$="_app"] .form_section > div > div > .form-group.notify_section:first-child {
    margin-top: 0 !important;
}

/* ============================================================
   AA DETAIL — TABS + STICKY FOOTER + OVERVIEW (April 2026)

   The AA detail page now opens to a new "Overview" tab that shows
   today's caller activity scoped to this specific menu plus a
   configuration health summary. The other sections (Profile,
   Business Hours, After Hours, Holiday, Submenus, Advanced) live
   in their own tabs with the legacy markup intact — only the
   wrapping tab panel changes visibility, so the existing save
   serialization (which targets container IDs like #business_menu_form)
   works unchanged.

   Save / Cancel / Delete moved to a sticky footer that follows
   the page on every tab.

   Selectors use the standard 2-ID specificity pattern so they win
   over auto_attendant_inline.css when needed.
   ============================================================ */

/* -- Tab strip --------------------------------------------------- */
body.v4-body .v4-content .v4-tabbed-detail .aa-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin: 0 0 18px;
    padding: 6px 6px 0;
    border-bottom: 1px solid var(--v4-border-light, #ECEFF4);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tabs::-webkit-scrollbar { display: none; }

body.v4-body .v4-content .v4-tabbed-detail .aa-tab {
    appearance: none;
    background: transparent;
    border: none;
    padding: 12px 16px 14px;
    margin: 0;
    font: 600 13.5px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-text-secondary, #4F5B6E);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    transition: color .15s ease, background .15s ease;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab:hover {
    color: var(--v4-text, #0F1729);
    background: var(--v4-surface-alt, #F4F6FA);
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab.is-active {
    color: var(--v4-brand, #F89939);
    background: transparent;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab.is-active::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: -1px;
    height: 2px;
    background: var(--v4-brand, #F89939);
    border-radius: 2px 2px 0 0;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab:focus-visible {
    outline: 2px solid var(--v4-brand-glow, rgba(248,153,57,0.28));
    outline-offset: 2px;
}

/* -- Tab panels -------------------------------------------------- */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel {
    display: none;
    contain: content;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel.is-active {
    display: block;
}

/* When a tab is active, the section inside should appear expanded
   regardless of the legacy header-toggler-closed state — we always
   want the content visible on tab activation. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel.is-active .form_section.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel.is-active .business_hours_details.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel.is-active .after_hours_details.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel.is-active .submenu_details.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel.is-active .profile_details.hidden {
    display: block !important;
}

/* The accordion header chevron / brand-orange title color should
   reflect "open" state on the active tab so the visual still tracks. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel.is-active .toggle_header {
    /* Keep the open visuals — aa_tabs.js already triggers .click() on
       any closed header to flip the class. This rule is the safety net
       in case the click was prevented for any reason. */
}

/* Make room at the bottom for the sticky footer so the last tab
   contents aren't hidden behind it. */
body.v4-body .v4-content .v4-tabbed-detail {
    padding-bottom: 96px;
}

/* -- Sticky footer ---------------------------------------------- */
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--v4-border, #DBE3EC);
    box-shadow: 0 -4px 14px -8px rgba(15, 23, 42, 0.08);
    margin: 0;
    padding: 0;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    padding-left: calc(24px + 226px); /* space for the floating sidebar */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
@media (max-width: 760px) {
    body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot-inner {
        padding-left: 24px;
    }
}
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 13px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-amber, #F59E0B);
}
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--v4-amber, #F59E0B);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
    animation: aaPulse 1.6s ease-in-out infinite;
}
@keyframes aaPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.06); }
}
/* Saving state: dot turns blue + faster pulse so users can see the
   request is in flight (otherwise the long BroadWorks round-trip
   looks like the page froze). */
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot-status.is-saving {
    color: var(--v4-blue, #2563EB);
}
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot-status.is-saving .aa-sticky-foot-dot {
    background: var(--v4-blue, #2563EB);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.20);
    animation: aaPulseBlue 0.9s ease-in-out infinite;
}
@keyframes aaPulseBlue {
    0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.20); }
    50%      { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0.05); }
}
/* Validation-error state: dot + text turn red so the user immediately
   sees what's wrong (e.g. "Forward To is required when a forwarding
   rule is enabled"). Auto-clears after 6s back to "Unsaved changes". */
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot-status.is-error {
    color: var(--v4-red, #DC2626);
}
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot-status.is-error .aa-sticky-foot-dot {
    background: var(--v4-red, #DC2626);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.22);
    animation: aaPulseRed 0.9s ease-in-out infinite;
}
@keyframes aaPulseRed {
    0%, 100% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.22); }
    50%      { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0.06); }
}
/* Inline field error — red border + light pink background so the
   user can spot the offending input even if they scrolled past the
   sticky-pill message. */
body.v4-body .v4-content .v4-tabbed-detail input.aa-input-error,
body.v4-body .v4-content .v4-tabbed-detail input.aa-input-error:focus {
    border-color: var(--v4-red, #DC2626) !important;
    background-color: rgba(220, 38, 38, 0.04) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
/* Reset the legacy buttons inside the sticky footer to the button family.
   Save is the one true CTA — brand orange (per design system §4.2).
   Delete is destructive — red. Cancel is neutral.
   Selectors anchor on #aa_sticky_foot to beat the legacy
   `body:not(#reports) .btn-blue` !important rule (1 ID + 1 class). */
body.v4-body .v4-content #aa_sticky_foot .text-center { text-align: right !important; padding: 0 !important; margin: 0 !important; }
body.v4-body .v4-content #aa_sticky_foot .btn-save {
    height: 38px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    font: 600 13.5px "Plus Jakarta Sans", system-ui, sans-serif !important;
    border: 1px solid var(--v4-border, #DBE3EC) !important;
    background: var(--v4-surface, #FFFFFF) !important;
    color: var(--v4-text, #0F1729) !important;
    transition: all .15s ease !important;
    margin: 0 4px !important;
    width: auto !important;
    min-width: 96px;
}
body.v4-body .v4-content #aa_sticky_foot .btn-save:hover {
    background: var(--v4-surface-alt, #F4F6FA) !important;
    border-color: #CBD1DC !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px -6px rgba(15,23,42,0.10) !important;
}
/* Save = brand orange — the one true primary action.
   Targets every entity-specific class name (auto_attendant, hunt_group,
   call_center, company_extension) plus a generic prefix-match catch-all
   so any future entity gets the orange treatment automatically. */
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_auto_attendant,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_hunt_group,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_call_center,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_company_extension,
body.v4-body .v4-content #aa_sticky_foot .btn-save[class*="save_"]:not([class*="cancel"]):not([class*="delete"]) {
    background: var(--v4-brand, #F89939) !important;
    border-color: var(--v4-brand, #F89939) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px -4px rgba(248,153,57,0.40) !important;
}
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_auto_attendant:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_hunt_group:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_call_center:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_company_extension:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save[class*="save_"]:not([class*="cancel"]):not([class*="delete"]):hover {
    background: var(--v4-brand-hover, #EC8526) !important;
    border-color: var(--v4-brand-hover, #EC8526) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 14px -6px rgba(248,153,57,0.50) !important;
}
/* Save in "clean" state — nothing to save yet, so the brand-orange call
   to action is misleading. Soft-grey it out and disable pointer events
   so the user can't fire a no-op save. The .is-clean class is toggled
   by aa_tabs.js → wireDirtyIndicator() in lock-step with the existing
   "Unsaved changes" footer pill (which already tracks changed_sections_list).
   This addresses the "save should be blurry until you change something"
   UX request — orange = there's something to save, grey = clean. */
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_auto_attendant.is-clean,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_hunt_group.is-clean,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_call_center.is-clean,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_company_extension.is-clean,
body.v4-body .v4-content #aa_sticky_foot .btn-save[class*="save_"]:not([class*="cancel"]):not([class*="delete"]).is-clean {
    background: var(--v4-surface-alt, #F4F6FA) !important;
    border-color: var(--v4-border, #DBE3EC) !important;
    color: #97A1B0 !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
    transform: none !important;
}
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_auto_attendant.is-clean:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_hunt_group.is-clean:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_call_center.is-clean:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save.save_company_extension.is-clean:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save[class*="save_"]:not([class*="cancel"]):not([class*="delete"]).is-clean:hover {
    background: var(--v4-surface-alt, #F4F6FA) !important;
    border-color: var(--v4-border, #DBE3EC) !important;
    color: #97A1B0 !important;
    box-shadow: none !important;
    transform: none !important;
}
/* Delete = destructive — covers .delete_*, .btn-danger, .remove_* */
body.v4-body .v4-content #aa_sticky_foot .btn-save.delete_auto_attendant,
body.v4-body .v4-content #aa_sticky_foot .btn-save.delete_hunt_group,
body.v4-body .v4-content #aa_sticky_foot .btn-save.delete_call_center,
body.v4-body .v4-content #aa_sticky_foot .btn-save.delete_company_extension,
body.v4-body .v4-content #aa_sticky_foot .btn-save.btn-danger,
body.v4-body .v4-content #aa_sticky_foot .btn-save[class*="delete_"],
body.v4-body .v4-content #aa_sticky_foot .btn-save[class*="remove_"] {
    color: var(--v4-red, #EF4444) !important;
    border-color: rgba(239,68,68,0.35) !important;
    background: var(--v4-surface, #FFFFFF) !important;
}
body.v4-body .v4-content #aa_sticky_foot .btn-save.delete_auto_attendant:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save.delete_hunt_group:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save.delete_call_center:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save.delete_company_extension:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save.btn-danger:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save[class*="delete_"]:hover,
body.v4-body .v4-content #aa_sticky_foot .btn-save[class*="remove_"]:hover {
    background: rgba(239,68,68,0.06) !important;
    border-color: var(--v4-red, #EF4444) !important;
    color: var(--v4-red, #EF4444) !important;
}
/* Extension-specific: collapse the extra wrapper divs (main_container,
   delete-confirm-panel, etc.) inside the sticky footer */
body.v4-body .v4-content #aa_sticky_foot .main_container { width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }

/* ============================================================
   OVERVIEW TAB — Hero / Tiles / Insight / Destinations / Config
   ============================================================ */

body.v4-body .v4-content .aa-overview {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1100px !important;
    margin-left: 0;
    margin-right: 0;
}

/* -- Status hero ------------------------------------------------- */
body.v4-body .v4-content .aa-overview .aa-ov-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    background: var(--v4-surface, #FFFFFF);
    border: 1px solid var(--v4-border, #DBE3EC);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03);
    flex-wrap: wrap;
}
body.v4-body .v4-content .aa-overview .aa-ov-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 11px;
    border-radius: 999px;
    font: 600 13px "Plus Jakarta Sans", system-ui, sans-serif;
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
}
body.v4-body .v4-content .aa-overview .aa-ov-mode-badge .aa-ov-mode-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--v4-green, #10B981);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-mode-after .aa-ov-mode-badge {
    background: var(--v4-surface-alt, #F4F6FA);
    color: var(--v4-text-secondary, #4F5B6E);
}
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-mode-after .aa-ov-mode-badge .aa-ov-mode-dot {
    background: var(--v4-text-muted, #7D90A6);
    box-shadow: 0 0 0 3px rgba(125, 144, 166, 0.18);
}
body.v4-body .v4-content .aa-overview .aa-ov-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--v4-text-secondary, #4F5B6E);
    font: 500 13px "Plus Jakarta Sans", system-ui, sans-serif;
}
body.v4-body .v4-content .aa-overview .aa-ov-meta-sep {
    color: var(--v4-text-muted, #7D90A6);
}

body.v4-body .v4-content .aa-overview .aa-ov-profile-inline {
    display: block;
}

body.v4-body .v4-content .aa-overview .aa-ov-profile-inline .aa-ov-card-head {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

body.v4-body .v4-content .aa-overview .aa-ov-profile-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

body.v4-body .v4-content .aa-overview .aa-ov-profile-field {
    background: #F8FBFF;
    border: 1px solid #E3EBF4;
    border-radius: 8px;
    min-height: 62px;
    padding: 10px 12px;
}

body.v4-body .v4-content .aa-overview .aa-ov-profile-field > span {
    color: var(--v4-text-muted, #7D90A6);
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 16px;
    text-transform: uppercase;
}

body.v4-body .v4-content .aa-overview .aa-ov-profile-field > strong {
    color: var(--v4-text, #001F4A);
    display: block;
    font-size: 14px;
    font-weight: 750;
    line-height: 20px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.v4-body .v4-content .aa-overview .aa-ov-profile-edit {
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--v4-border-strong, #C6D3E1);
    border-radius: 7px;
    color: var(--v4-text, #001F4A);
    display: inline-flex;
    font-size: 13px;
    font-weight: 750;
    height: 34px;
    justify-content: center;
    line-height: 1;
    min-height: 34px;
    padding: 0 14px;
}

body.v4-body .v4-content .aa-overview :is(#profile-section, #profile).aa-profile-inline-editor {
    margin: 0;
    padding: 0;
}

body.v4-body .v4-content .aa-overview :is(#profile-section, #profile).aa-profile-inline-editor > .setting_box {
    margin: 0;
}

body.v4-body .v4-content .aa-overview :is(#profile-section, #profile).aa-profile-inline-editor > .setting_box > .extension > h5 {
    display: none;
}

body.v4-body .v4-content .aa-overview :is(#profile-section, #profile).aa-profile-inline-editor .profile_details {
    display: block;
}

/* ============================================================
   Compact mode for the inline edit panel (pencil → editor below
   the hero). Default profile chrome stacks two padded sub-cards
   under a section header; the inline use case wants just a tight
   stack of fields + Save/Cancel. We hide the section header and
   strip background/borders/padding off the nested wrappers, then
   re-grid the section so rows sit close together.

   Higher specificity (added .aa-profile-inline-editor) than
   extension_editable.css's :is(#extension_app, #auto_attendant_app,
   #call_center_app, #hunt_group_app) :is(#profile, #profile-section)
   chain so we win the cascade without !important hacks elsewhere.
============================================================ */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app) :is(#profile, #profile-section).aa-profile-inline-editor .aa-subsection-header,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app) :is(#profile, #profile-section).aa-profile-inline-editor .aa-subsection-header {
    display: none !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app) :is(#profile, #profile-section).aa-profile-inline-editor :is(.setting_box, .extension, .form_section, .aa-unified-shell, .aa-unified-shell--profile, .aa-profile-section, .aa-profile-basic-card, .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) :is(#profile, #profile-section).aa-profile-inline-editor :is(.setting_box, .extension, .form_section, .aa-unified-shell, .aa-unified-shell--profile, .aa-profile-section, .aa-profile-basic-card, .aa-profile-number-card) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !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) :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-section,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app) :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-section {
    display: grid !important;
    gap: 10px !important;
}

body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app) :is(#profile, #profile-section).aa-profile-inline-editor :is(.aa-profile-basic-card, .aa-profile-number-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) :is(#profile, #profile-section).aa-profile-inline-editor :is(.aa-profile-basic-card, .aa-profile-number-card) > .form-group.row {
    align-items: center !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hairline divider between the basic fields and the number group
   so they read as two related but distinct stacks — without
   re-introducing the heavy card chrome. */
body.v4-body .v4-content .v4-tabbed-detail :is(#extension_app, #auto_attendant_app, #call_center_app, #hunt_group_app) :is(#profile, #profile-section).aa-profile-inline-editor .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) :is(#profile, #profile-section).aa-profile-inline-editor .aa-profile-number-card {
    border-top: 1px solid var(--v4-border-light, #ECEFF4) !important;
    margin-top: 4px !important;
    padding-top: 12px !important;
}

@media (max-width: 760px) {
    body.v4-body .v4-content .aa-overview .aa-ov-profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Live caller counter */
body.v4-body .v4-content .aa-overview .aa-ov-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--v4-surface-alt, #F4F6FA);
    color: var(--v4-text-secondary, #4F5B6E);
    font: 500 13px "Plus Jakarta Sans", system-ui, sans-serif;
    transition: all .2s ease;
}
body.v4-body .v4-content .aa-overview .aa-ov-live .aa-ov-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--v4-text-muted, #7D90A6);
}
body.v4-body .v4-content .aa-overview .aa-ov-live .aa-ov-live-count {
    font-weight: 700;
    color: var(--v4-text, #0F1729);
}
body.v4-body .v4-content .aa-overview .aa-ov-live.is-active {
    background: rgba(16, 185, 129, 0.10);
    color: #047857;
}
body.v4-body .v4-content .aa-overview .aa-ov-live.is-active .aa-ov-live-dot {
    background: var(--v4-green, #10B981);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
    animation: aaPulse 1.4s ease-in-out infinite;
}
body.v4-body .v4-content .aa-overview .aa-ov-live.is-active .aa-ov-live-count {
    color: #047857;
}

/* -- KPI tiles --------------------------------------------------- */
body.v4-body .v4-content .aa-overview .aa-ov-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 900px) {
    body.v4-body .v4-content .aa-overview .aa-ov-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
body.v4-body .v4-content .aa-overview .aa-ov-tile {
    position: relative;
    padding: 16px 18px 14px;
    background: var(--v4-surface, #FFFFFF);
    border: 1px solid var(--v4-border, #DBE3EC);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.v4-body .v4-content .aa-overview .aa-ov-tile:hover {
    border-color: #CBD1DC;
    box-shadow: 0 6px 14px -10px rgba(15,23,42,0.10);
}
body.v4-body .v4-content .aa-overview .aa-ov-tile-label {
    font: 600 11.5px "Plus Jakarta Sans", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--v4-text-muted, #7D90A6);
    margin-bottom: 6px;
}
body.v4-body .v4-content .aa-overview .aa-ov-tile-value {
    font: 700 30px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-text, #0F1729);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
body.v4-body .v4-content .aa-overview .aa-ov-tile-sub {
    font: 500 12.5px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-text-secondary, #4F5B6E);
    margin-top: 4px;
}
body.v4-body .v4-content .aa-overview .aa-ov-spark {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 28px;
    pointer-events: none;
}
body.v4-body .v4-content .aa-overview .aa-ov-tile-abandoned.is-warn {
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.04) 0%, var(--v4-surface, #FFFFFF) 100%);
}
body.v4-body .v4-content .aa-overview .aa-ov-tile-abandoned.is-warn .aa-ov-tile-value {
    color: var(--v4-amber, #D97706);
}

/* -- Today at a glance — narrative panel ------------------------ */
body.v4-body .v4-content .aa-overview .aa-ov-insight {
    position: relative;
    padding: 18px 22px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(248,153,57,0.10) 0%, rgba(248,153,57,0.03) 100%);
    border: 1px solid rgba(248, 153, 57, 0.18);
}
body.v4-body .v4-content .aa-overview .aa-ov-insight.tone-warn {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.03) 100%);
    border-color: rgba(245, 158, 11, 0.22);
}
body.v4-body .v4-content .aa-overview .aa-ov-insight.tone-urgent {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%);
    border-color: rgba(239, 68, 68, 0.22);
}
body.v4-body .v4-content .aa-overview .aa-ov-insight-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: var(--v4-brand, #F89939);
    color: #FFFFFF;
    font: 700 11px "Plus Jakarta Sans", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
body.v4-body .v4-content .aa-overview .aa-ov-insight-spark svg {
    width: 13px;
    height: 13px;
    display: block;
}
body.v4-body .v4-content .aa-overview .aa-ov-insight h2 {
    font: 700 19px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-text, #0F1729);
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    line-height: 1.32;
}
body.v4-body .v4-content .aa-overview .aa-ov-insight-body {
    font: 500 14px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-text-secondary, #4F5B6E);
    margin: 0;
    line-height: 1.5;
}

/* -- Destinations card / Config card — shared chrome ------------- */
body.v4-body .v4-content .aa-overview .aa-ov-card {
    padding: 20px 22px;
    background: var(--v4-surface, #FFFFFF);
    border: 1px solid var(--v4-border, #DBE3EC);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
body.v4-body .v4-content .aa-overview .aa-ov-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
    flex-wrap: wrap;
}
body.v4-body .v4-content .aa-overview .aa-ov-card-head h3 {
    font: 700 15px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-text, #0F1729);
    margin: 0;
    letter-spacing: -0.005em;
}
body.v4-body .v4-content .aa-overview .aa-ov-card-sub {
    font: 500 12.5px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-text-muted, #7D90A6);
}

/* -- Destinations bars ------------------------------------------ */
body.v4-body .v4-content .aa-overview .aa-ov-dest-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-row {
    display: grid;
    grid-template-columns: minmax(160px, 1.5fr) 2fr 60px;
    align-items: center;
    gap: 14px;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-info {
    display: flex;
    flex-direction: column;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-name {
    font: 600 14px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-text, #0F1729);
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-meta {
    font: 500 12px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-text-muted, #7D90A6);
    margin-top: 2px;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-bar-wrap {
    height: 8px;
    background: var(--v4-surface-alt, #F4F6FA);
    border-radius: 999px;
    overflow: hidden;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--v4-brand, #F89939) 0%, var(--v4-brand-light, #FBB26A) 100%);
    border-radius: 999px;
    transition: width .4s ease;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-count {
    font: 700 14px "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--v4-text, #0F1729);
    text-align: right;
}

/* -- Config grid — clickable shortcuts to each tab -------------- */
body.v4-body .v4-content .aa-overview .aa-ov-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 760px) {
    body.v4-body .v4-content .aa-overview .aa-ov-config-grid {
        grid-template-columns: 1fr;
    }
}
body.v4-body .v4-content .aa-overview .aa-ov-config-item {
    appearance: none;
    background: var(--v4-surface, #FFFFFF);
    border: 1px solid var(--v4-border-light, #ECEFF4);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: left;
    transition: all .15s ease;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
body.v4-body .v4-content .aa-overview .aa-ov-config-item:hover {
    border-color: #CBD1DC;
    background: var(--v4-surface-alt, #F4F6FA);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -6px rgba(15,23,42,0.10);
}
/* Hide the legacy mid-page Save bar (.v4-detail-foot) when the new
   sticky footer is present — the old buttons.php template renders
   them inside .aa-sticky-foot, so the wrapping .v4-detail-foot div
   is redundant here. */
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot .text-center {
    text-align: right !important;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-sticky-foot .col-sm-12 {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================================
   AA DETAIL — POLISH PASS v6 (April 28, 2026)
   ============================================================
   Round 2 cleanup after the tabs+Overview ship:

   1. HIDE redundant section headers inside tab panels — the active
      tab IS the section title, so the legacy "Profile" / "Business
      Hours" / etc. h5 toggle row at the top of each template is
      visual noise.
   2. EQUAL TOP SPACING — every tab content begins at the same
      distance from the tab strip (24 px breathing).
   3. TAB VISIBILITY — soft brand-tinted background on the active
      tab + thicker (3 px) underline. Inactive text gets a touch
      more weight so the strip reads as a real navigation surface.
   4. LIGHTER GREETING BUTTONS — Listen/Create rows shrink to 32 px,
      softer border, less padding so they harmonize with the Menu
      table's neutral density instead of competing.
   5. VOICEMAIL TOGGLE ALIGNMENT — toggles inside Delivery / Caller
      Options / Security right-align like every other settings row.
   6. CARD SHADOW CONSISTENCY — every card on the page (overview
      tiles, settings sections, sub-component panels, sticky footer)
      uses the same hairline-+-soft-drop pair.
   ============================================================ */

/* 1. Hide the redundant top-level section header inside tab panels.
   Each section template (profile.php, business_hours.php, etc.)
   renders an outer .toggle_header with the section name. With tabs,
   the active tab already says "Business Hours" — we don't need the
   page to repeat it. We hide ONLY the topmost toggle_header per panel
   (nested ones inside Submenus stay so each submenu still has its
   own collapsible row).

   Wrappers vary by entity:
   - AA: .aa-tab-panel > .setting_section > .setting_box > .extension > h5
   - HG/CC: .aa-tab-panel > #settings|#announcements|#advanced > .setting_section > .setting_box > .extension > h5
   - Extension: .aa-tab-panel > div > .setting_section > .setting_box > .extension > h5
   - AA Advanced: .aa-tab-panel > .setting_section > .setting_box > .advanced_container > h5
   The cascade below covers all of these. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > .setting_section > .setting_box > .extension > h5,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #settings > .setting_section > .setting_box > .extension > h5,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #announcements > .setting_section > .setting_box > .extension > h5,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #advanced > .setting_section > .setting_box > .extension > h5,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > div > .setting_section > .setting_box > .extension > h5,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > .setting_section > .setting_box > .advanced_container > h5,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #settings > .setting_section > .setting_box > .advanced_container > h5,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #announcements > .setting_section > .setting_box > .advanced_container > h5,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #advanced > .setting_section > .setting_box > .advanced_container > h5,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > div > .setting_section > .setting_box > .advanced_container > h5 {
    display: none !important;
}
/* Force the form_section content visible since the toggle header is gone */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > .setting_section > .setting_box > .extension > .form_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > .setting_section > .setting_box > .extension > .form_section.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #settings > .setting_section > .setting_box > .extension > .form_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #settings > .setting_section > .setting_box > .extension > .form_section.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #announcements > .setting_section > .setting_box > .extension > .form_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #announcements > .setting_section > .setting_box > .extension > .form_section.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #advanced > .setting_section > .setting_box > .extension > .form_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #advanced > .setting_section > .setting_box > .extension > .form_section.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > div > .setting_section > .setting_box > .extension > .form_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > div > .setting_section > .setting_box > .extension > .form_section.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > .setting_section > .setting_box > .advanced_container > .form_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > .setting_section > .setting_box > .advanced_container > .form_section.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #settings > .setting_section > .setting_box > .advanced_container > .form_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #settings > .setting_section > .setting_box > .advanced_container > .form_section.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #announcements > .setting_section > .setting_box > .advanced_container > .form_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #announcements > .setting_section > .setting_box > .advanced_container > .form_section.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #advanced > .setting_section > .setting_box > .advanced_container > .form_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #advanced > .setting_section > .setting_box > .advanced_container > .form_section.hidden,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > div > .setting_section > .setting_box > .advanced_container > .form_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > div > .setting_section > .setting_box > .advanced_container > .form_section.hidden {
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Some Extension templates wrap content in .control_section / nested div
   without a setting_section. Hide the immediate top-level toggle_header
   anywhere within an extension tab panel that lives directly under div>div */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > div > h5 > .toggle_header,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > h5 > .toggle_header {
    display: none !important;
}
/* Extension's Advanced section template hardcodes a `d-none` class on
   its outer wrapper (it was originally hidden until the user clicked
   "Show Advanced Settings"). With tabs we land directly on Advanced,
   so override d-none inside the tab panel. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel[data-aa-tab-panel="advanced"] #advanced.d-none,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel #advanced.setting_section.d-none {
    display: block !important;
}
/* Hide the redundant "Show Advanced Settings" button in Extension's
   sticky footer — the Advanced tab now reveals the same content. */
body.v4-body .v4-content .v4-ext-detail #aa_sticky_foot .toggle_section[data-target="#advanced"],
body.v4-body .v4-content .v4-ext-detail #aa_sticky_foot .right-fixed {
    display: none !important;
}
/* Voicemail tab — the voice_mail_container holds Greeting / Delivery /
   Caller Options / Security and lives INSIDE the toggle's form-group.
   We want the toggle visible (it's how you turn voicemail on/off) AND
   the content visible at all times. The chevron next to the label is
   redundant (no need to expand/collapse inside its own tab). */
body.v4-body .v4-content .v4-tabbed-detail #voicemail-tab .voice_mail_container,
body.v4-body .v4-content .v4-tabbed-detail #voicemail-tab .voice_mail_container.hidden {
    display: block !important;
    margin-top: 16px;
}
/* Hide just the chevron arrow icon in the Voicemail tab (the click-to-
   expand affordance) — content is always visible here, no need for it. */
body.v4-body .v4-content .v4-tabbed-detail #voicemail-tab .enable_voice_mail_arrow img {
    display: none !important;
}
body.v4-body .v4-content .v4-tabbed-detail #voicemail-tab .enable_voice_mail_arrow {
    cursor: default !important;
    margin-left: 0 !important;
}
/* Promote the "Enable Voicemail" toggle row to a clean header look */
body.v4-body .v4-content .v4-tabbed-detail #voicemail-tab #voicemail {
    padding: 4px 0 16px !important;
    border-bottom: 1px solid var(--v4-border-light, #ECEFF4) !important;
    margin-bottom: 16px !important;
}
body.v4-body .v4-content .v4-tabbed-detail #voicemail-tab #voicemail .col-form-label.label {
    font: 700 16px "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: var(--v4-text, #0F1729) !important;
}

/* 2. Equal top spacing in every tab — 24 px from tab strip to first
   meaningful content. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel {
    padding-top: 4px;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > .setting_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > .aa-overview,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #voicemail-tab {
    margin-top: 0 !important;
}
/* Reset any legacy first-child margin-top on the inner shells —
   the tab panel + tab strip already provide breathing. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel .aa-unified-shell:first-child,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel .form_section > .aa-unified-shell:first-child {
    margin-top: 0 !important;
}

/* 3. Tab strip — natural-width tabs with a fixed gap between them.
   We previously stretched each tab to equal width via flex:1 1 0,
   which made the visual gap between two short labels (Phones, Apps)
   look much larger than the gap between two long ones (Voicemail,
   Settings) because most of the chip width was empty padding around
   the short word. Each tab now sizes to its own label, with a
   consistent 8px gap between siblings — the spacing reads the same
   regardless of word length. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tabs {
    display: flex !important;
    background: var(--v4-surface, #FFFFFF);
    border: 1px solid var(--v4-border-light, #ECEFF4);
    border-radius: 12px;
    padding: 6px;
    margin: 0 0 22px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    gap: 8px;
    width: 100%;
    max-width: 100%;
}
/* Natural-width tabs: each chip sizes to its label so a consistent
   gap separates them. Padding gives the label breathing room inside
   the chip; the gap above gives consistent spacing between chips. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab {
    flex: 0 0 auto !important;
    min-width: 0;
    padding: 10px 16px !important;
    border-radius: 8px;
    color: var(--v4-text-secondary, #4F5B6E);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: -0.005em;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab .aa-tab-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab:hover {
    color: var(--v4-text, #0F1729);
    background: var(--v4-surface-alt, #F4F6FA);
}
/* Brand-tinted active chip — the tinted background carries the active signal */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab.is-active {
    color: var(--v4-brand-dark, #B26420);
    background: var(--v4-brand-soft, rgba(248,153,57,0.10));
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab.is-active::after {
    display: none;
}
/* On smaller screens, allow horizontal scrolling rather than crushing tabs */
@media (max-width: 760px) {
    body.v4-body .v4-content .v4-tabbed-detail .aa-tabs {
        overflow-x: auto;
    }
    body.v4-body .v4-content .v4-tabbed-detail .aa-tab {
        flex: 0 0 auto !important;
        padding: 10px 14px !important;
    }
}

/* 3b. Content max-width consistency across all tabs. Some legacy
   templates (Submenus especially) widen past the others. Anchor every
   tab panel's primary content to the same max-width so the page feels
   the same wherever you are. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > .setting_section,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > .aa-overview,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #voicemail-tab,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #advanced-notice,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel > #advanced {
    max-width: 1100px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tabs {
    max-width: 1100px !important;
}
/* Smaller icons inside greeting buttons */

/* 6. Card shadow consistency — make sure every "card" on the page
   carries the same hairline + soft drop. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel .aa-unified-shell,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel .aa-unified-shell--advanced,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel .aa-unified-shell--profile,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel .aa-submenu-layout {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 20px -16px rgba(15, 23, 42, 0.06) !important;
}

/* 7. Make sure the Submenus tab — which has its own per-submenu
   nested cards — doesn't double up its outer shell shadow */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel[data-aa-tab-panel="submenu"] .submenu-container {
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 8. Sticky footer fine-tune — auto_attendant_inline.css owns the
   layout; keep this stylesheet from re-adding a shadow / gradient
   under the floating pill. */
body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot {
    box-shadow: none !important;
    border-top: 0 !important;
}
@media (max-width: 760px) {
    body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-inner {
        padding: 10px 16px !important;
    }
    body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions {
        margin-left: 0 !important;
        flex: 1 1 auto;
        justify-content: flex-end;
    }
}

/* 9. Voicemail tab title — since we removed the per-feature toggle
   row at the top, give the tab content a small breathing area so
   the first sub-component (Greeting) doesn't slam into the tab strip. */
body.v4-body .v4-content .v4-tabbed-detail #voicemail-tab {
    padding-top: 0;
}
body.v4-body .v4-content .v4-tabbed-detail #voicemail-tab > .aa-unified-shell--advanced {
    border: 1px solid var(--v4-border, #DBE3EC) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    background: var(--v4-surface, #FFFFFF) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 20px -16px rgba(15, 23, 42, 0.06) !important;
}

/* ============================================================
   AA DETAIL — POLISH PASS v7 (April 28, 2026, evening)
   ============================================================
   Round 3 — direct response to user feedback:
   - Top nav rebuilt as straightforward equal-width buttons (no
     framed pill rail) stretching the full content width.
   - Sticky footer CENTERED (not right-aligned) and styled to FLOW
     with the page (soft gradient fade-up, no hard top border).
   - Voicemail sub-sections (Greeting / Delivery / Caller Options /
     Security) get proper bordered card frames matching every other
     tab. Toggles inside push to the right edge.
   - Submenus inner cards (greeting + menu) get the same card frame
     treatment so Submenus tab matches Open / Closed / Holiday.
   ============================================================ */

/* ----- A. TOP NAV — straightforward buttons, no frame ----- */
/* Drop the wrapping pill rail — each tab is its own button on the
   page surface. Sized to its own label width with a fixed 8px gap
   between siblings. Previous flex:1 stretched every tab to the same
   column width, which made the visual gap between two short labels
   (Phones, Apps) look much wider than the gap between two long ones
   (Voicemail, Settings) because most of the chip was empty padding
   around the short word. Strip stays constrained to the same
   max-width as the cards underneath. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tabs {
    display: flex !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    gap: 8px !important;
    margin: 0 0 24px 0 !important;
    width: 100%;
    max-width: 1100px !important;
    overflow: visible !important;
    flex-wrap: wrap;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab {
    flex: 0 0 auto !important;
    min-width: 0;
    height: 42px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    border: 1px solid var(--v4-border, #DBE3EC) !important;
    background: var(--v4-surface, #FFFFFF) !important;
    color: var(--v4-text-secondary, #4F5B6E) !important;
    font: 600 13px "Plus Jakarta Sans", system-ui, sans-serif !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition: all .15s ease !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* The .aa-tab `display: inline-flex !important` above overrides the
   user-agent `[hidden] { display: none }` rule, leaving optional tabs
   (Voicemail / Submenus / Calls) visible in the strip even when JS
   sets the hidden attribute. Restore hide-on-hidden explicitly. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab[hidden],
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab[hidden] {
    display: none !important;
}
/* Belt-and-suspenders: vertically center the label span itself.
   The flex container already centers it, but pinning line-height
   guarantees the text baseline lands in the geometric center even
   when a future inherited rule changes the container's line-height.
   Also explicitly clear any margin that could push the label off-
   center.

   line-height was `1` (i.e. exactly font-size = 14px). Combined with
   the `overflow: hidden` rule above (for text-overflow: ellipsis),
   that 14px-tall span clipped descenders — the bottoms of "p" / "g"
   / "y" got cut off because they extend ~2-3px below the baseline,
   into the clipped zone. 1.4 gives the line-box ~20px so descenders
   sit comfortably within it. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab .aa-tab-label,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab .aa-tab-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Nudge the leading "+" glyph in "+ Features" up by 1px so its
   x-height-centered visual mass matches the cap-height-centered mass
   of the alphabetic tabs. The pixels are already aligned, this just
   corrects the optical illusion that makes "+ Features" look slightly
   lower than its neighbors. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab.aa-tab--features .aa-tab-label,
body.v4-body #v4-app .v4-content .v4-tabbed-detail .aa-tab.aa-tab--features .aa-tab-label {
    transform: translateY(-1px);
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab:hover {
    background: var(--v4-surface-alt, #F4F6FA) !important;
    border-color: #CBD1DC !important;
    color: var(--v4-text, #0F1729) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -6px rgba(15, 23, 42, 0.10) !important;
}
/* Active tab — elegant: soft brand-tinted background, brand-orange
   border + brand-dark text. Less aggressive than a full fill,
   reads clearly as "selected" without shouting. */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab.is-active {
    background: rgba(248, 153, 57, 0.08) !important;
    border: 1px solid var(--v4-brand, #F89939) !important;
    color: var(--v4-brand-dark, #B26420) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px -3px rgba(248, 153, 57, 0.28),
                inset 0 0 0 1px rgba(248, 153, 57, 0.06) !important;
    transform: none !important;
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab.is-active:hover {
    background: rgba(248, 153, 57, 0.12) !important;
    border-color: var(--v4-brand-hover, #EC8526) !important;
    color: var(--v4-brand-dark, #B26420) !important;
    transform: translateY(-1px);
}
body.v4-body .v4-content .v4-tabbed-detail .aa-tab.is-active::after {
    display: none !important;
}
@media (max-width: 760px) {
    body.v4-body .v4-content .v4-tabbed-detail .aa-tabs {
        overflow-x: auto !important;
    }
    body.v4-body .v4-content .v4-tabbed-detail .aa-tab {
        flex: 0 0 auto !important;
        padding: 0 16px !important;
    }
}

/* ----- B. STICKY FOOTER — center buttons + flowing styling ----- */
/* Floating pill layout owned by auto_attendant_inline.css. */
body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: none !important;
    box-shadow: none !important;
}
body.v4-body .v4-content .v4-tabbed-detail #aa_sticky_foot .aa-sticky-foot-actions {
    margin: 0 auto !important;
    justify-content: center !important;
}
/* Drop the line dividers between subsections — the cards now
   provide separation, the lines are visual noise */
body.v4-body .v4-content .v4-tabbed-detail #voicemail-tab .subsection_line {
    border: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
}

/* ----- D. SUBMENUS — inner cards match the other tabs ----- */
/* The submenu wrapper itself shouldn't add another shadow on top */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel[data-aa-tab-panel="submenu"] .submenu-container {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}
/* The header row with the submenu name + edit pencil + delete: keep tight */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel[data-aa-tab-panel="submenu"] .aa-submenu-header {
    background: var(--v4-surface, #FFFFFF) !important;
    border: 1px solid var(--v4-border-light, #ECEFF4) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 6px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
}
/* Width: every submenu sub-card should match the other tabs' content area */
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel[data-aa-tab-panel="submenu"] .aa-submenu-layout,
body.v4-body .v4-content .v4-tabbed-detail .aa-tab-panel[data-aa-tab-panel="submenu"] .aa-unified-shell--submenu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* Dev3 settings consistency final layer: the settings landing and shared
   directory cards should match the flat Auto Attendant detail treatment. */
body.v4-body .v4-content .v4-settings-landing .setting_section.form_container {
    border: 1px solid #DDE7F1 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-settings-landing .setting_section.form_container:hover {
    border-color: #D1DEEB !important;
    box-shadow: none !important;
    transform: none !important;
}

body.v4-body .v4-content .v4-settings-landing .header-toggler,
body.v4-body .v4-content .v4-settings-landing .header_first.header-toggler {
    border-radius: 0 !important;
    background: transparent !important;
}

body.v4-body .v4-content .v4-settings-landing .setting_box,
body.v4-body .v4-content .v4-settings-landing .setting_box > .extension,
body.v4-body .v4-content .v4-settings-landing .setting_box > .extension > h5,
body.v4-body .v4-content .v4-settings-landing .setting_box > .extension > .form_section {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-settings-landing .company-admin-table-panel,
body.v4-body .v4-content .v4-settings-landing .company-control-table-panel {
    margin: 8px 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-settings-landing .portal-admin-table-wrap,
body.v4-body .v4-content .v4-settings-landing .company-admin-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    border: 1px solid #DDE7F1 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-settings-landing .portal-admin-table,
body.v4-body .v4-content .v4-settings-landing .company-admin-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: #FFFFFF !important;
}

body.v4-body .v4-content .v4-settings-landing .portal-admin-table th,
body.v4-body .v4-content .v4-settings-landing .portal-admin-table td,
body.v4-body .v4-content .v4-settings-landing .company-admin-table th,
body.v4-body .v4-content .v4-settings-landing .company-admin-table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid #E7EDF4 !important;
    background: #FFFFFF !important;
    vertical-align: middle !important;
}

body.v4-body .v4-content .v4-settings-landing .portal-admin-table thead th,
body.v4-body .v4-content .v4-settings-landing .company-admin-table thead th,
body.v4-body .v4-content .v4-settings-landing .phones_section .form-group.row.first.stripe {
    background: #F8FAFD !important;
    color: #536780 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

body.v4-body .v4-content .v4-settings-landing .portal-admin-table tr:last-child td,
body.v4-body .v4-content .v4-settings-landing .company-admin-table tr:last-child td {
    border-bottom: 0 !important;
}

body.v4-body .v4-content .v4-settings-landing .portal-admin-table tbody tr:hover td,
body.v4-body .v4-content .v4-settings-landing .company-admin-table tbody tr:hover td {
    background: #FBFCFE !important;
}

body.v4-body .v4-content .v4-settings-landing .phones_section .form-group.row.first.stripe,
body.v4-body .v4-content .v4-settings-landing .phones_section .form-group.row.section_item {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-bottom: 1px solid #E7EDF4 !important;
}

body.v4-body .v4-content .v4-settings-landing .phones_section .form-group.row.first.stripe {
    margin-top: 8px !important;
    border: 1px solid #DDE7F1 !important;
    border-radius: 8px 8px 0 0 !important;
}

body.v4-body .v4-content .v4-settings-landing .phones_section .form-group.row.section_item {
    padding: 10px 0 !important;
    border-left: 1px solid #DDE7F1 !important;
    border-right: 1px solid #DDE7F1 !important;
}

body.v4-body .v4-content .v4-settings-landing .phones_section .form-group.row.section_item:last-of-type {
    border-bottom: 1px solid #DDE7F1 !important;
    border-radius: 0 0 8px 8px !important;
}

body.v4-body .v4-content .v4-settings-landing .portal-icon-action,
body.v4-body .v4-content .v4-settings-landing .company_remove_phone,
body.v4-body .v4-content .v4-settings-landing .company_add_phone,
body.v4-body .v4-content .v4-settings-landing .add_button,
body.v4-body .v4-content .v4-settings-landing .btn-save,
body.v4-body .v4-content .v4-settings-landing .sort_dropdown > .btn,
body.v4-body .v4-content .v4-settings-landing .header_third .btn {
    min-height: 36px !important;
    border: 1px solid #CBD7E5 !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: #102B4C !important;
    box-shadow: none !important;
    transform: none !important;
}

body.v4-body .v4-content .v4-settings-landing .portal-icon-action,
body.v4-body .v4-content .v4-settings-landing .company_remove_phone {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.v4-body .v4-content .v4-settings-landing .portal-icon-action:hover,
body.v4-body .v4-content .v4-settings-landing .company_remove_phone:hover,
body.v4-body .v4-content .v4-settings-landing .company_add_phone:hover,
body.v4-body .v4-content .v4-settings-landing .add_button:hover,
body.v4-body .v4-content .v4-settings-landing .btn-save:hover,
body.v4-body .v4-content .v4-settings-landing .sort_dropdown > .btn:hover,
body.v4-body .v4-content .v4-settings-landing .header_third .btn:hover {
    border-color: #BFD0E4 !important;
    background: #F8FAFD !important;
    color: #102B4C !important;
    box-shadow: none !important;
    transform: none !important;
}

body.v4-body .v4-content .v4-settings-landing .input_max_width_fix.search_table,
body.v4-body .v4-content .v4-settings-landing input.form-control,
body.v4-body .v4-content .v4-settings-landing select.form-control {
    min-height: 38px !important;
    border-color: #CBD7E5 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* Dev4 visual consistency pass: keep entity lists and settings sections
   from using different color personalities for the same kind of UI. */
body.v4-body .v4-content .v4-list-avatar,
body.v4-body .v4-content .v4-list-avatar.v4-avatar-brand,
body.v4-body .v4-content .v4-list-avatar.v4-avatar-navy {
    background: #F5F8FC !important;
    border: 1px solid #E1E9F2 !important;
    color: #102B4C !important;
    box-shadow: none !important;
}

body.v4-body .v4-content .v4-list-badge,
body.v4-body .v4-content .v4-list-badge.v4-badge-blue,
body.v4-body .v4-content .v4-list-badge.v4-badge-amber,
body.v4-body .v4-content .v4-list-badge.v4-badge-brand {
    background: #F5F8FC !important;
    border: 1px solid #E1E9F2 !important;
    color: #334E68 !important;
}
body.v4-body .v4-content .v4-list-badge.v4-badge-green {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #16a34a !important;
}
body.v4-body .v4-content .v4-list-badge.v4-badge-red {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
}

body.v4-body .v4-content .v4-settings-landing .header-toggler::after,
body.v4-body .v4-content .v4-settings-landing .header_first::after {
    background-color: #F5F8FC !important;
    filter: grayscale(1) saturate(0.15) brightness(0.9) !important;
    opacity: 0.95 !important;
}

body.v4-body .v4-content .v4-settings-landing .header-access-pill {
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD7E5 !important;
    border-radius: 8px !important;
    color: #102B4C !important;
    display: inline-flex !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    height: 34px !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 14px !important;
    text-decoration: none !important;
}

body.v4-body .v4-content #ax_launcher,
body.v4-body .v4-content #ax_submit {
    background: var(--v4-brand, #F89939) !important;
    border: 1px solid var(--v4-brand, #F89939) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    min-height: 38px !important;
}

body.v4-body .v4-content #ax_launcher:hover,
body.v4-body .v4-content #ax_submit:hover {
    background: var(--v4-brand-hover, #EC8526) !important;
    border-color: var(--v4-brand-hover, #EC8526) !important;
}

body.v4-body .v4-content #ax_close {
    background: #FFFFFF !important;
    border: 1px solid #CBD7E5 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: #102B4C !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    min-height: 38px !important;
}

html:has(body.v4-body),
body.v4-body,
body.v4-body .v4-app,
body.v4-body .v4-main {
    background: var(--v4-surface) !important;
}

/* Dev4 user detail consistency. This intentionally lives in the shared v4
   layer as well as the page CSS because pretty /users/... routes can miss
   page-relative assets in the local proxy. Everything is scoped to #user_app. */
body.v4-body .v4-content #user_app {
    --user-card-border: #DDE7F1;
    --user-row-border: #E7EDF4;
    --user-text: #102B4C;
    --user-muted: #6B7F97;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

body.v4-body .v4-content #user_app .setting_section.form_container {
    background: #FFFFFF !important;
    border: 1px solid var(--user-card-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

body.v4-body .v4-content #user_app .setting_section.form_container > :is(.setting_box, .extension),
body.v4-body .v4-content #user_app .setting_box > .extension {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 20px 24px !important;
}

body.v4-body .v4-content #user_app h1 {
    color: #0E2749 !important;
    font-size: 22px !important;
    font-weight: 750 !important;
    line-height: 28px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    white-space: normal !important;
}

body.v4-body .v4-content #user_app .form_section {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--user-row-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 14px 0 0 !important;
}

body.v4-body .v4-content #user_app .form-group.row.section_item,
body.v4-body .v4-content #user_app .form-group.row.notify_section {
    align-items: center !important;
    border-bottom: 1px solid var(--user-row-border) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 48px !important;
    padding: 10px 0 !important;
}

body.v4-body .v4-content #user_app .form-group.row.section_item.last,
body.v4-body .v4-content #user_app .form-group.row.notify_section.last {
    border-bottom: 0 !important;
}

body.v4-body .v4-content #user_app .form-group.row.section_item > .col-6:first-child,
body.v4-body .v4-content #user_app .form-group.row.notify_section > .col-6:first-child {
    flex: 0 0 260px !important;
    max-width: 260px !important;
    min-width: 180px !important;
    width: 260px !important;
}

body.v4-body .v4-content #user_app .form-group.row.section_item > .col-6:last-child,
body.v4-body .v4-content #user_app .form-group.row.notify_section > .col-6:last-child,
body.v4-body .v4-content #user_app .padded_section_widths_sm_none {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
}

body.v4-body .v4-content #user_app .stripe.first {
    background: #F8FAFD !important;
    border: 1px solid var(--user-card-border) !important;
    border-radius: 8px 8px 0 0 !important;
    color: #536780 !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0.08em !important;
    margin: 0 !important;
    padding: 9px 0 !important;
    text-transform: uppercase !important;
}

body.v4-body .v4-content #user_app label.col-form-label,
body.v4-body .v4-content #user_app .col-form-label,
body.v4-body .v4-content #user_app .company-cell-value {
    color: var(--user-text) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body.v4-body .v4-content #user_app p,
body.v4-body .v4-content #user_app .text-muted {
    color: var(--user-muted) !important;
    font-size: 13px !important;
    line-height: 20px !important;
}

body.v4-body .v4-content #user_app :is(input.form-control, select.form-control, textarea.form-control, .c_dropdown_trigger) {
    background: #FFFFFF !important;
    border: 1px solid #CBD7E5 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    color: var(--user-text) !important;
    font-size: 13px !important;
    height: 38px !important;
    margin: 0 !important;
    min-height: 38px !important;
}

body.v4-body .v4-content #user_app :is(.input_max_width_fix, .select_max_width_fix) {
    margin-left: 0 !important;
    max-width: 430px !important;
    width: 100% !important;
}

body.v4-body .v4-content #user_app .password-container {
    position: relative !important;
}

body.v4-body .v4-content #user_app .toggle-password {
    color: #6B7F97 !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

body.v4-body .v4-content #user_app .btn-save,
body.v4-body .v4-content #user_app .user_button,
body.v4-body .v4-content #user_app .add_button,
body.v4-body .v4-content #user_app .remove_button {
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD7E5 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--user-text) !important;
    display: inline-flex !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 0 16px !important;
}

body.v4-body .v4-content #user_app .create_user_button,
body.v4-body .v4-content #user_app .save_user_recording_settings,
body.v4-body .v4-content #user_app .saveFeatureGroups,
body.v4-body .v4-content #user_app .addNewUserCompany {
    background: #0E2749 !important;
    border-color: #0E2749 !important;
    color: #FFFFFF !important;
}

body.v4-body .v4-content #user_app .delete_user_button {
    border-color: #F0B8B8 !important;
    color: #B42318 !important;
}

body.v4-body .v4-content #user_app .form-group.row.borderless {
    border: 0 !important;
    margin: 18px 0 0 !important;
}

body.v4-body .v4-content #user_app .form-group.row.borderless > .col-sm-12 {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
}

body.v4-body .v4-content #user_app .mail_report_row_group {
    white-space: normal !important;
}

body.v4-body .v4-content #user_app .mail_report_row_group .col-11 {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

body.v4-body .v4-content #user_app .mail_report_row_group .d-inline-flex {
    align-items: center !important;
    padding-left: 0 !important;
}

body.v4-body .v4-content #user_app .c_dropdown_main,
body.v4-body .v4-content #user_app .c_dropdown_toggle {
    width: min(360px, 100%) !important;
}

body.v4-body .v4-content #user_app #feature_groups .notify_section {
    border-bottom: 1px solid var(--user-row-border) !important;
}

body.v4-body .v4-content #user_app #feature_groups .notify_section span[style*="background"] {
    background: #F5F8FC !important;
    border: 1px solid #E1E9F2 !important;
    border-radius: 4px !important;
    color: #536780 !important;
}

@media (max-width: 768px) {
    body.v4-body .v4-content #user_app .form-group.row.section_item,
    body.v4-body .v4-content #user_app .form-group.row.notify_section {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    body.v4-body .v4-content #user_app .form-group.row.section_item > .col-6:first-child,
    body.v4-body .v4-content #user_app .form-group.row.section_item > .col-6:last-child,
    body.v4-body .v4-content #user_app .form-group.row.notify_section > .col-6:first-child,
    body.v4-body .v4-content #user_app .form-group.row.notify_section > .col-6:last-child {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
   AA OVERVIEW v9 (May 5, 2026) — single-row hero, +N popover,
   inline edit, conversational config, destinations top-2 + show
   all, clean empty state. Builds on the existing .aa-ov-* base.
   ============================================================ */

/* -- Hero: single horizontal row, no wrap, tight height ------- */
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px 16px;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-mode-badge,
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-meta-item,
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-meta-sep,
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-numbers,
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-hero-edit,
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-live,
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-hero-date {
    flex: 0 0 auto;
    white-space: nowrap;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-hero-spacer {
    flex: 1 1 auto;
    min-width: 0;
}
/* Compact the existing pieces inside the single-row hero so the
   total height stays around 44 px instead of the legacy ~64 px. */
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-mode-badge {
    font-size: 12px;
    padding: 4px 10px 4px 8px;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-mode-badge .aa-ov-mode-dot {
    box-shadow: 0 0 0 2px rgba(16,185,129,0.18);
    height: 6px;
    width: 6px;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-meta-item {
    color: var(--v4-text, #0F1729);
    font: 600 13px "Plus Jakarta Sans", system-ui, sans-serif;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-meta-item.aa-ov-ext {
    color: var(--v4-text-secondary, #4F5B6E);
    font-weight: 500;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-meta-sep {
    color: var(--v4-text-muted, #7D90A6);
    font-size: 13px;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero.aa-ov-hero--row .aa-ov-live {
    font-size: 12.5px;
    padding: 4px 12px;
}

/* -- +N pill + popover ---------------------------------------- */
body.v4-body .v4-content .aa-overview .aa-ov-numbers {
    display: inline-flex;
    position: relative;
}
body.v4-body .v4-content .aa-overview .aa-ov-numbers-pill {
    appearance: none;
    background: rgba(248,153,57,0.10);
    border: 1px solid rgba(248,153,57,0.30);
    border-radius: 999px;
    color: var(--v4-brand-dark, #B26420);
    cursor: pointer;
    font: 700 12px "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: 0;
    line-height: 1;
    padding: 4px 9px;
    transition: background .15s ease, border-color .15s ease;
}
body.v4-body .v4-content .aa-overview .aa-ov-numbers-pill:hover,
body.v4-body .v4-content .aa-overview .aa-ov-numbers-pill[aria-expanded="true"] {
    background: rgba(248,153,57,0.18);
    border-color: rgba(248,153,57,0.45);
}
body.v4-body .v4-content .aa-overview .aa-ov-numbers-pop {
    background: var(--v4-surface, #FFFFFF);
    border: 1px solid var(--v4-border, #DBE3EC);
    border-radius: 10px;
    box-shadow: 0 12px 28px -8px rgba(15,23,42,0.18);
    left: 0;
    margin-top: 6px;
    min-width: 220px;
    padding: 10px 12px;
    position: absolute;
    top: 100%;
    z-index: 30;
}
body.v4-body .v4-content .aa-overview .aa-ov-numbers-pop[hidden] { display: none !important; }
body.v4-body .v4-content .aa-overview .aa-ov-numbers-pop-head {
    color: var(--v4-text-muted, #7D90A6);
    font: 700 10.5px "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}
body.v4-body .v4-content .aa-overview .aa-ov-numbers-pop-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.v4-body .v4-content .aa-overview .aa-ov-numbers-pop-list li {
    color: var(--v4-text, #0F1729);
    font: 500 13px "Plus Jakarta Sans", system-ui, sans-serif;
    padding: 4px 0;
}

/* -- Edit pencil button --------------------------------------- */
body.v4-body .v4-content .aa-overview .aa-ov-hero-edit {
    align-items: center;
    background: transparent;
    border: 1px solid var(--v4-border, #DBE3EC);
    border-radius: 7px;
    color: var(--v4-text-secondary, #4F5B6E);
    cursor: pointer;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    width: 28px;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero-edit:hover,
body.v4-body .v4-content .aa-overview .aa-ov-hero-edit[aria-expanded="true"] {
    background: var(--v4-surface-alt, #F4F6FA);
    border-color: var(--v4-border-strong, #C6D3E1);
    color: var(--v4-text, #0F1729);
}

/* -- Date picker in hero -------------------------------------- */
/* Always shows a calendar icon + a label. The label reads "Today"
   when today is selected, otherwise shows the friendly date
   (e.g. "May 3, 2026"). The native <input type=date> is kept in
   the DOM for keyboard accessibility and for the picker UI but
   visually hidden — the <label> wrapper opens it on click. */
body.v4-body .v4-content .aa-overview .aa-ov-hero-date {
    align-items: center;
    background: var(--v4-surface-alt, #F4F6FA);
    border: 1px solid var(--v4-border-light, #ECEFF4);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    height: 28px;
    line-height: 1;
    padding: 0 14px;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero-date:hover {
    background: var(--v4-surface, #FFFFFF);
    border-color: var(--v4-border, #DBE3EC);
}
body.v4-body .v4-content .aa-overview .aa-ov-hero-date-icon {
    color: var(--v4-text-muted, #7D90A6);
    flex-shrink: 0;
    height: 13px;
    width: 13px;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero-date-label {
    color: var(--v4-text, #0F1729);
    font: 600 12.5px "Plus Jakarta Sans", system-ui, sans-serif;
    line-height: 1;
}
body.v4-body .v4-content .aa-overview .aa-ov-hero-date input[type="date"] {
    /* Visually hidden but reachable for the picker (showPicker()
       on click, native focus for keyboard). */
    height: 1px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

/* -- Inline editor host (slides in below the hero) ------------ */
/* No card chrome — the form fields sit directly on the page so
   the editor reads as a quick "rename / pick a number" tool, not
   another panel competing with the rest of the overview. */
body.v4-body .v4-content .aa-overview .aa-ov-edit-host {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-top: 6px;
    padding: 4px 0 0;
}
body.v4-body .v4-content .aa-overview .aa-ov-edit-host[hidden] { display: none !important; }
/* -- Pre-Alert section header (Settings tab) ----------------- */
/* The legacy pre-alert toggle row (with title + on/off switch)
   is hidden when pre-alert lives inside Settings — the +Features
   panel owns the toggle now. That hid the title too, so this
   adds a visible header above the Greeting + Schedule subsections,
   matching the way Call Forwarding Selective renders its header. */
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app) :is(#pre-alert, #office_anywhere) .aa-prealert-section-header,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app) :is(#pre-alert, #office_anywhere) .aa-prealert-section-header {
    border-bottom: 1px solid var(--v4-border-light, #ECEFF4);
    margin: 0 0 18px;
    padding: 0 0 18px;
}
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app) :is(#pre-alert, #office_anywhere) .aa-prealert-section-title,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app) :is(#pre-alert, #office_anywhere) .aa-prealert-section-title {
    color: var(--v4-text, #0F1729);
    font: 700 18px "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: -0.005em;
    margin: 0 0 4px;
}
body.v4-body .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app) :is(#pre-alert, #office_anywhere) .aa-prealert-section-desc,
body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #hunt_group_app, #call_center_app, #extension_app) :is(#pre-alert, #office_anywhere) .aa-prealert-section-desc {
    color: var(--v4-text-secondary, #4F5B6E);
    font: 500 13px "Plus Jakarta Sans", system-ui, sans-serif;
    line-height: 1.45;
    margin: 8px 0 0;
}

/* -- Destinations: rich empty state + centered chevron toggle ---- */
body.v4-body .v4-content .aa-overview .aa-ov-destinations {
    /* Reserve space so the card height doesn't jump when data
       arrives. Two rows + heading is roughly 132 px. */
    min-height: 132px;
}
body.v4-body .v4-content .aa-overview .aa-ov-destinations .aa-ov-dest-empty {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 4px 0 2px;
}
body.v4-body .v4-content .aa-overview .aa-ov-destinations .aa-ov-dest-empty[hidden] { display: none !important; }
body.v4-body .v4-content .aa-overview .aa-ov-destinations .aa-ov-dest-list[hidden] { display: none !important; }
body.v4-body .v4-content .aa-overview .aa-ov-destinations .aa-ov-dest-empty-title {
    color: var(--v4-text, #0F1729);
    font: 700 14.5px "Plus Jakarta Sans", system-ui, sans-serif;
    letter-spacing: -0.005em;
    margin: 0 0 4px;
}
body.v4-body .v4-content .aa-overview .aa-ov-destinations .aa-ov-dest-empty-body {
    color: var(--v4-text-secondary, #4F5B6E);
    font: 500 13px "Plus Jakarta Sans", system-ui, sans-serif;
    line-height: 1.5;
    margin: 0;
    max-width: 64ch;
}

/* Hairline rule + circular chevron pill — centered, identical
   across AA/HG/CC/Ext. The bar bleeds to the card's padded edges
   via negative margin; the button pulls up to overlap the line. */
body.v4-body .v4-content .aa-overview .aa-ov-destinations .aa-ov-dest-toggle-bar {
    border-top: 1px solid var(--v4-border-light, #ECEFF4);
    margin: 22px -22px -6px;
    padding-top: 0;
    text-align: center;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-toggle {
    align-items: center;
    background: var(--v4-surface, #FFFFFF);
    border: 1px solid var(--v4-border, #DBE3EC);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    color: var(--v4-text-secondary, #4F5B6E);
    cursor: pointer;
    display: inline-flex;
    font-size: 0;
    gap: 0;
    height: 32px;
    justify-content: center;
    margin: -16px 0 0;
    padding: 0;
    position: relative;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
    width: 32px;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-toggle:hover {
    background: rgba(248, 153, 57, 0.08);
    border-color: var(--v4-brand, #F89939);
    color: var(--v4-brand, #F89939);
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-toggle:focus-visible {
    border-color: var(--v4-brand, #F89939);
    box-shadow: 0 0 0 3px rgba(248, 153, 57, 0.20);
    color: var(--v4-brand, #F89939);
    outline: none;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-toggle svg {
    display: block;
    height: 14px;
    transition: transform .2s ease;
    width: 14px;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-toggle.is-expanded svg {
    transform: rotate(180deg);
}
/* Visually-hidden label so the icon-only button stays accessible. */
body.v4-body .v4-content .aa-overview .aa-ov-dest-toggle .aa-ov-dest-toggle-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
body.v4-body .v4-content .aa-overview .aa-ov-dest-row[hidden] { display: none !important; }

/* 1. Breathing room under the Delivery header. The .aa-vm-section
   carries the header + divider; nudge the first .vm-setting-row
   down so the dropdown clears the line cleanly. */
body.v4-body #v4-app .v4-content [id$="_app"] #voicemail-tab .vm-setting-area,
body.v4-body .v4-content [id$="_app"] #voicemail-tab .vm-setting-area {
    padding-top: 12px !important;
}

/* 2. Phone / Email <select> in Voicemail Received By — render a
   visible SVG chevron and remove native chrome so the picker
   reads consistently across browsers. */
body.v4-body #v4-app .v4-content [id$="_app"] #voicemail-tab .voice_message_notify_email select[name="send_voice_message_notify_email_enabled"],
body.v4-body .v4-content [id$="_app"] #voicemail-tab .voice_message_notify_email select[name="send_voice_message_notify_email_enabled"] {
    -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' viewBox='0 0 16 16' fill='none' stroke='%234F5B6E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px 14px !important;
    cursor: pointer !important;
}

/* [REMOVED] Rules 3-8 for voicemail grid layout (CC toggle, delivery/CC
   email sub-rows, vm-conditional-input display) moved to centralized
   v4_recorder_module.css § 14 — see 14.J, 14.K, 14.M, 14.S. */

/* ============================================================
   BUSY GREETING — disabled-by-Call-Waiting visual state (May 17 2026)
   ============================================================
   BroadWorks only plays the busy greeting when Call Waiting is
   OFF. With CW on, a second caller queues behind the first
   instead of going to voicemail, so the busy recording never
   reaches the caller. enable_voicemail.php adds the
   `.aa-vm-section--cw-locked` modifier on the Busy Greeting card
   whenever $user_extras["call_waiting"]["is_active"] is truthy,
   and emits a compact `.aa-vm-cw-chip` badge in the heading row
   (six words plus an info glyph — full explanation in the
   tooltip). The controls below are visibly dimmed so admins can
   SEE the recording state but can't fiddle until they flip
   Call Waiting off on +Features.
   ============================================================ */
/* When the Busy Greeting heading carries a CW chip, the
   title-host gets `.aa-inline-subsection-title--with-chip` via
   PHP. Force it to a flex row so the label (which v4_design.js
   tags as .v4-section-heading -> display:block) and the chip
   share a single line.
   Earlier attempts using :has() and :is() lost the cascade to
   the block-display rule at v4_design.css line 2532
   (`.v4-section-titled` with display:block !important). The
   issue was :is() specificity — `:is(#a, #b)` treats the whole
   group as a SINGLE compound at the highest argument's specificity,
   but the CSS engine isn't always charitable about it across
   nested ancestor matches.
   Drop the :is() entirely and rely on the modifier class
   appearing on the same element as the rule's most-specific
   compound. Spell out the per-app variants if needed later; for
   now this one selector covers every voicemail-tab Busy
   Greeting and any other shared-recording section that opts in
   to the chip. */
/* extension_editable.css has a #voicemail .aa-vm-section
   .aa-inline-subsection-title rule with display:block !important
   (specificity 2 IDs). To beat it, my selector also needs 2 IDs.
   Add #voicemail to the chain. */
/* Keep the heading label sized for its own content so the chip
   sits flush beside it instead of being pushed to the right edge
   of a stretched block. The v4-section-heading rule sets the
   label to display:block !important with 1 ID specificity — match
   the same 2-ID chain so this wins. */
body.v4-body #v4-app .v4-content :is(#extension_app, #hunt_group_app, #call_center_app, #auto_attendant_app) .aa-vm-cw-chip__icon,
body.v4-body .v4-content :is(#extension_app, #hunt_group_app, #call_center_app, #auto_attendant_app) .aa-vm-cw-chip__icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    color: #6B7F97;
}

/* Icon-only info chip beside the Busy Greeting heading. Unlike the
   previous text+icon CW lock chip (.aa-vm-cw-chip), this one is
   unconditional — it just explains WHEN the busy greeting plays.
   No background pill, no border, no text — just a circled (i) the
   admin can hover or focus for the tooltip. Sits flush beside the
   "Busy Greeting" label. */
body.v4-body #v4-app .v4-content :is(#extension_app, #hunt_group_app, #call_center_app, #auto_attendant_app) .aa-vm-info-chip,
body.v4-body .v4-content :is(#extension_app, #hunt_group_app, #call_center_app, #auto_attendant_app) .aa-vm-info-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    color: #8A9AAF;
    cursor: help;
    vertical-align: middle;
    flex: 0 0 16px;
    transition: color 120ms ease-out;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #hunt_group_app, #call_center_app, #auto_attendant_app) .aa-vm-info-chip:hover,
body.v4-body .v4-content :is(#extension_app, #hunt_group_app, #call_center_app, #auto_attendant_app) .aa-vm-info-chip:hover,
body.v4-body #v4-app .v4-content :is(#extension_app, #hunt_group_app, #call_center_app, #auto_attendant_app) .aa-vm-info-chip:focus-visible,
body.v4-body .v4-content :is(#extension_app, #hunt_group_app, #call_center_app, #auto_attendant_app) .aa-vm-info-chip:focus-visible {
    color: #4F5B6E;
    outline: none;
}
body.v4-body #v4-app .v4-content :is(#extension_app, #hunt_group_app, #call_center_app, #auto_attendant_app) .aa-vm-info-chip .aa-vm-cw-chip__icon,
body.v4-body .v4-content :is(#extension_app, #hunt_group_app, #call_center_app, #auto_attendant_app) .aa-vm-info-chip .aa-vm-cw-chip__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: currentColor;
}

/* The User scope select inherits font-weight: 600 from a rule in
   extension_editable.css at line 1046 (.announcement_controls
   select / .greeting-action-row select with #v4-app + :is(#extension_app...)
   specificity = 2 IDs). Apply / Cancel buttons render at 700.
   To match, our override needs 2 IDs in the selector chain plus
   the modifier class to win source-order ties. */

/* Don't override --shared-recorder-select-width here. The 376px
   default from extension_editable.css gives a layout where
   Dropdown (376) + gap (10) + Edit (76) lands the Edit pencil's
   right edge exactly at x=885 — which matches where the Listen
   row's "Speech to Text" and the Create row's "Text to Speech"
   buttons end. Aligning Edit with those buttons is what the user
   actually wants; my earlier 420px bump pushed Edit ~44px past
   that x and read as "sticking out". Stay with 376. */

/* Cap the dropdown's max-width at the same value, just in case
   some other rule tries to expand it. Match the actual DOM (no
   .notify_section wrapper on the voicemail tab). */
/* Voice preview small Play / Pause — 34px rounded-square chip to
   match the select height next to it. Rounded square (8px) instead
   of full circle (999) so it reads as part of the same family as
   Upload / Record / Text-to-Speech buttons above.
   CRITICAL: `:not(.hidden)` on the selector. Without it, my
   `display: inline-flex !important` was overriding the Bootstrap
   .hidden utility (`display: none !important`) at equal !important
   priority but higher specificity — so the Pause button (which
   the JS toggles via `.hidden`) was always visible alongside the
   Play button. */
/* Explicit hidden-state override so a higher-specificity .hidden
   rule can't lose to my display:inline-flex above. Belt and
   suspenders — the `:not(.hidden)` in the selector already
   excludes hidden elements from the inline-flex rule, this just
   makes the hide stick if any other rule tries to compete. */
/* textarea.text_to_convert sizing → centralized in v4_2026.css */

/* ============================================================
   DELIVERY SECTION — PERFECT COLUMN ALIGNMENT (May 17 pass 6)
   ============================================================
   User feedback (with annotated screenshot):
   1) The first row ("Voicemail Received By") sat tight against
      the section divider — no breathing room.
   2) The four rows (VRB, Email Address, Email Carbon Copy,
      Email Address) had uneven vertical spacing.
   3) The Carbon Copy Email Address input rendered at x=426,
      w=360 — but the Phone dropdown and VM Email above it
      sat at x=573, w=280. Different start, different width.
   4) Inconsistent label boldness across the section.
   Fix everything so all three controls share the same left
   edge, the same right edge, and every row is the same gap
   apart.

   Selector specificity strategy: extension_editable.css has a
   `(2,6,2)` rule forcing display: flex on sub-rows. Use 3 IDs
   (#v4-app + :is(#..._app) + #voicemail-tab) plus
   .v4-tabbed-detail to get `(3, ≥7, ≥3)` and win.
   ============================================================ */

/* A. Push the first row away from the section divider. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .vm-setting-area {
    padding-top: 20px !important;
    padding-bottom: 12px !important;
}

/* B. Even vertical rhythm — every consecutive .vm-setting-row
   sibling sits the same distance from the row above. Strip the
   legacy padding-top/padding-bottom that the auto-attendant CSS
   sprinkles onto specific rows so the spacing reads as a single
   consistent rhythm. Target both row classes by NAME to beat the
   competing auto_attendant_inline.css rule that uses
   `.voice_message_notify_email` directly.

   Also pin `grid-template-rows: 34px auto` on both grids so that
   VM (Phone 34px) and CC (toggle ~24px) have the same row 1 height
   — without this, the visible label-to-sub-label gap inside CC
   shrinks by ~10px vs. VM. JS sets columns inline but never rows,
   so CSS wins here cleanly. */

/* C. Carbon Copy sub-row: use display: contents so the pseudo and
   input flow into the parent grid — same as the VM email sub-row
   pattern (set by JS via `aa-vm-delivery-email-row` class). With
   identical layout strategies, both pseudo-labels end up at exactly
   the same offset from their row labels. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_carbon_copy > div:nth-child(2):has(input.vm-conditional-input) {
    display: contents !important;
}

/* D. Position the Carbon Copy "Email Address" pseudo-label in
   the parent grid's col 1 row 2 — IDENTICAL placement and offset
   to the VM Email Address pseudo above (including margin-top: 4px
   for vertical baseline match). */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_carbon_copy > div:nth-child(2):has(input.vm-conditional-input)::before {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
    color: #1B3557 !important;
    content: "Email Address" !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    margin-top: 4px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* E. Carbon Copy email input — parent grid col 2 row 2, 280px right-aligned. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_carbon_copy input.vm-conditional-input {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 !important;
    justify-self: end !important;
}

/* F. The validation-warning SPAN inside the CC sub-row was
   taking flex space and shifting the input right. Pull it
   out of the layout flow — if it ever needs to surface, it
   can render absolute or be hooked into a toast elsewhere. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_carbon_copy .email_carbon_copy_comment {
    display: none !important;
}

/* G. Mirror padding-bottom: 0 on VM parent so its bottom doesn't
   compete with the inter-row margin set in section B. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_notify_email {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* ============================================================
   VOICEMAIL TAB — UNIFY EVERY SECTION (May 17 pass — final)
   ============================================================
   User feedback (paraphrased): every section header must show
   the same 1px divider line, every row label must have the same
   font size/weight/color, and every label-to-label distance must
   be 36px (matching Name Recording's Recording→Listen baseline).
   Three sections at the top (Name Recording, Greeting, Busy
   Greeting) use .aa-vm-recorder-area / .voicemail-greeting-area
   markup with NO border-top — give them the same line as the
   bottom three sections via border-top + padding-top.
   ============================================================ */
/* Also normalize the Email Address pseudo-labels to match. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_notify_email > div:nth-child(2):has(input.vm-conditional-input)::before,
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_carbon_copy > div:nth-child(2):has(input.vm-conditional-input)::before {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1B3557 !important;
    line-height: 20px !important;
    margin-top: 0 !important;
}
/* Removed: Delivery compound pair margin override (moved to v4_recorder_module.css § 14) */
/* Phone input wrapper (child 2 of the row): use display: contents so its
   children + ::before flow into the parent grid, mirroring the VM Email
   Address pattern. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_transfer > div:nth-child(2):has(input.vm-conditional-input) {
    display: contents !important;
}
/* "Phone Number" pseudo-label in parent col 1 row 2 — identical placement
   and typography to the VM/CC Email Address pseudo-labels. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_transfer > div:nth-child(2):has(input.vm-conditional-input)::before {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
    color: #1B3557 !important;
    content: "Phone Number" !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    align-self: center !important;
}
/* Phone input itself: parent col 2 row 2, 280px right-aligned. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_transfer input.vm-conditional-input {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 !important;
    justify-self: end !important;
}
/* Hide the empty error_message sibling so it doesn't claim a grid cell. */
html body.v4-body #v4-app .v4-content .v4-tabbed-detail :is(#auto_attendant_app, #extension_app, #hunt_group_app, #call_center_app) #voicemail-tab .voice_message_transfer .error_message {
    display: none !important;
}