/*
 * affINITy Console (Stage 2 of the redesign, approved for staging by Andrew on 30 Oct 2026).
 *
 * Loaded after infinitel-portal.css only when the console look is on (App\Support\ConsoleStyle, PORTAL_CONSOLE_STYLE),
 * and every rule is scoped under body.inf-console, so switching it off brings back today's look exactly.
 *
 * 1. Tokens: the system sheet's radii (12 panels, 8 fields and controls, pill buttons), no shadows, a 4px spacing grid,
 *    the status tones.
 * 2. Foundations for every page: the type scale (page title 30/300, dashboard greeting 36/300, panel titles 17/500,
 *    labels, eyebrows and table headings 13px in sentence case in Geist; Geist Mono only for identifiers).
 * 3. Components (resources/views/components/console): page top, buttons, panel, status, tabs, toolbar, filter, empty
 *    state, the ⋯ menu.
 * 4. Console lists (DataTables): table, foot, sideways scroll with a cue, phone cards. The Numbers list is the first.
 * 5. States everywhere: every page's state chips and badges read as the status (a dot and a word), words unchanged.
 * 6. Records (approved mock-up "TrunkDetail", 31 Oct 2026): a SIP or Teams trunk's page: the page top with the status
 *    pill and facts line, Connection, Phone system settings, Recent calls, Monthly cost, Details and Need a hand.
 * 7. The home page (approved mock-up "Main", 31 Oct 2026): the greeting's actions, the figures, two columns.
 * 8. One tab style: every tab bar in the portal reads as the console's underline tabs.
 * Variations from these defaults are listed in docs/technical-handbook.md (Console design system).
 */

/* ---------------------------------------------------------------------------------------------------- 1. tokens */
body.inf-console {
    --inf-radius-card: 12px;
    --inf-radius-field: 8px;
    --inf-c-radius-panel: 12px;
    --inf-c-radius-control: 8px;
    --inf-c-space-1: 4px;
    --inf-c-space-2: 8px;
    --inf-c-space-3: 12px;
    --inf-c-space-4: 16px;
    --inf-c-space-5: 20px;
    --inf-c-space-6: 24px;
    --inf-c-space-8: 32px;
    --inf-c-space-10: 40px;
    --inf-c-control: 40px;
    --inf-c-line-control: rgba(7, 19, 28, .24);
    --inf-c-head: #fbfcfc;
    --inf-c-row-hover: #fafbfb;
    --inf-c-hover: #f0f2f3;
    /* status: the word's colour, then its dot (4.5:1 or better for the word on white) */
    --inf-c-ok: #17663a;      --inf-c-ok-dot: #2e9e5b;
    --inf-c-info: #0b5f6d;    --inf-c-info-dot: #08788b;
    --inf-c-warn: #8a4b00;    --inf-c-warn-dot: #d98a1c;
    --inf-c-neutral: #52636c; --inf-c-neutral-dot: #8b949a;
}

/* ----------------------------------------------------------------------------------------------- 2. foundations */
/* No shadows: a 1px line separates everything, floating layers included. */
.inf-console .dropdown-menu,
.inf-console .select2-dropdown,
.inf-console .modal-content,
.inf-console .swal2-popup.swal2-toast { box-shadow: none !important; }
.inf-console .dropdown-menu { border-radius: var(--inf-c-radius-control) !important; }
.inf-console .modal-content { border: 1px solid var(--inf-line) !important; border-radius: var(--inf-c-radius-panel) !important; }
.inf-console .select2-dropdown { border-radius: var(--inf-c-radius-control) !important; }
.inf-console .inf-buy-card:hover { box-shadow: none; }

/* The page top every page shares (partials/page-top and x-console.page-top): the label line, then the title. */
.inf-console .content-wrapper > .content-header { padding: 32px 32px 24px !important; }
.inf-console .content-header h1,
.inf-console .content-header .header-title,
.inf-console .content-header .text-title {
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 300 !important;
    letter-spacing: -.025em !important;
}
.inf-console .inf-eyebrow {
    font-family: var(--inf-font) !important;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.inf-console .inf-page-top { align-items: flex-start; gap: 16px 24px; }
.inf-console .inf-page-top-text { gap: 6px; flex: 1 1 320px; }
.inf-console .inf-page-top .inf-page-lede { margin: 4px 0 0; max-width: 72ch; font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.inf-console .inf-page-actions { gap: 10px; margin-top: 22px; }
.inf-console .inf-page-top:not(:has(.inf-eyebrow)) .inf-page-actions { margin-top: 0; }
.inf-console .inf-page-actions .hd-btn { height: var(--inf-c-control); padding: 0 18px; font-size: 14.5px; border-color: var(--inf-c-line-control); }
.inf-console .inf-more-btn { width: var(--inf-c-control); height: var(--inf-c-control); border-color: var(--inf-c-line-control); }

/* Labels and table headings: 13px, sentence case, Geist (Geist Mono is for identifiers only). */
.inf-console .table thead th,
.inf-console table.dataTable thead th,
.inf-console #results-table thead th {
    font-family: var(--inf-font) !important;
    font-size: 13px !important;
    letter-spacing: 0;
    text-transform: none;
}
.inf-console .nav-sidebar .nav-header,
.inf-console .nav-sidebar .nav-header.inf-group {
    font-family: var(--inf-font) !important;
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.inf-console .main-sidebar .brand-link .inf-portal-name { font-family: var(--inf-font) !important; font-size: 13px; letter-spacing: 0; }
.inf-console .inf-trunk-facts dt { font-family: var(--inf-font); font-size: 13px; letter-spacing: 0; text-transform: none; padding-top: 1px; }
.inf-console .div-summary .card-header::before { font-family: var(--inf-font); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.inf-console .inf-auth-alt .inf-rule { font-family: var(--inf-font); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.inf-console .select2-results__option strong.select2-results__group { font-family: var(--inf-font) !important; font-size: 13px; letter-spacing: 0; text-transform: none; }
@media (max-width: 767.98px) {
    .inf-console table.inf-stack > tbody > tr > td::before { font-family: var(--inf-font); font-size: 13px; letter-spacing: 0; text-transform: none; }
}

/* The same for each section's own small labels, until each section moves onto the console components: Calls, Broadband
   and Ethernet, hosted 3CX, Microsoft sign-in, porting, Teams and trunk status. A reference or an extension stays in
   Geist Mono (an identifier), only without the spaced capitals. */
.inf-console .inf-calls .inf-calls-field > span,
.inf-console .inf-calls .inf-calls-k,
.inf-console .inf-calls .inf-calls-staff-k,
.inf-console .inf-cx-details dt,
.inf-console .inf-h3-users-head,
.inf-console .inf-h3-target-type,
.inf-console .inf-h3-setup-label,
.inf-console .inf-ms .inf-ms-eyebrow,
.inf-console .inf-pt-practice-tools > span,
.inf-console .inf-tc .inf-tc-label,
.inf-console .inf-tc .inf-tc-staff > summary,
.inf-console .inf-ts-before-k,
.inf-console .inf-ts .inf-ts-details dt,
.inf-console .inf-ts .inf-ts-staff-title,
.inf-console .inf-ts .inf-ts-timeline-title { font-family: var(--inf-font) !important; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.inf-console .inf-hs-split h3 { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.inf-console .inf-cx-chip { font-family: var(--inf-font); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.inf-console .inf-cx-ref { font-size: 13px; letter-spacing: 0; }
.inf-console .inf-h3-user .inf-h3-ext { font-family: var(--inf-mono); font-size: 13px; letter-spacing: 0; text-transform: none; }
/* (their labels on phones, which those lists draw beside each value) */
.inf-console .inf-calls .inf-calls-table td::before,
.inf-console .inf-cx-table td::before { font-family: var(--inf-font); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Panel titles: 17/500 (card headers already are; form cards follow). */
.inf-console .inf-form-h { font-size: 17px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }

/* The home page, Billing and the Microsoft staff page: the greeting is 36/300 and panels have 12px corners. Their small
   labels and table headings follow the type scale like every other page (written in sentence case; the current look
   shows them in capitals); chart axes and times are quieter, at regular weight. */
.inf-console .hd-hero h1 { font-size: 36px; line-height: 1.12; letter-spacing: -.025em; }
.inf-console .hd .hd-label,
.inf-console .hd-date,
.inf-console .hd-table th,
.inf-console .hd-offer-eyebrow,
.inf-console .hd-live-tag,
.inf-console .hd-live-label { font-family: var(--inf-font); font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.inf-console .hd-days span,
.inf-console .hd-spark-axis,
.inf-console .hd-when { font-family: var(--inf-font); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.inf-console .hd-card, .inf-console .hd-stats { border-radius: var(--inf-c-radius-panel); }
.inf-console .hd h2 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }

/* -------------------------------------------------------------------------------------------- 3. components */
/* Buttons: pills, 40px. One primary per view, on the right; the others beside it. */
.inf-console .inf-c-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--inf-c-control); padding: 0 18px; box-sizing: border-box;
    border-radius: var(--inf-radius-pill); border: 1px solid var(--inf-c-line-control);
    background: var(--inf-panel); color: var(--inf-ink) !important; text-decoration: none !important;
    font-family: inherit; font-size: 14.5px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
}
.inf-console .inf-c-btn:hover { border-color: var(--inf-ink); }
.inf-console .inf-c-btn:focus-visible { outline: none; box-shadow: var(--inf-focus); border-color: var(--inf-teal); }
.inf-console .inf-c-btn.is-primary { background: var(--inf-button); border-color: var(--inf-button); color: var(--inf-button-text) !important; }
.inf-console .inf-c-btn.is-primary:hover { background: var(--inf-button-hover); border-color: var(--inf-button-hover); }
.inf-console .inf-c-btn.is-danger { color: var(--inf-bad) !important; border-color: var(--inf-bad-line); }
.inf-console .inf-c-btn.is-danger:hover { border-color: var(--inf-bad); }
.inf-console .inf-c-btn.is-small { height: 36px; padding: 0 14px; font-size: 14px; }
.inf-console .inf-c-btn svg { flex: none; }
/* A quiet text action ("Clear filters", "Open the trunk"). */
.inf-console .inf-c-link-button, .inf-console a.inf-c-link {
    padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--inf-ink) !important; cursor: pointer;
    text-decoration: underline; text-decoration-color: rgba(7, 19, 28, .3); text-underline-offset: 4px;
}
.inf-console .inf-c-link-button:hover, .inf-console a.inf-c-link:hover { text-decoration-color: var(--inf-ink); }
.inf-console .inf-c-link-button:focus-visible, .inf-console a.inf-c-link:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: 3px; border-radius: 2px; }
.inf-console .inf-c-link-button[hidden] { display: none; }

/* Page top (x-console.page-top). The label line is always there, so the title never moves between pages. */
.inf-console .inf-c-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; }
.inf-console .inf-c-top-text { flex: 1 1 320px; min-width: 0; }
.inf-console .inf-c-label { display: flex; align-items: center; gap: 6px; min-height: 20px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--inf-ink-muted); }
.inf-console .inf-c-back { display: inline-flex; align-items: center; gap: 4px; color: var(--inf-ink-muted) !important; text-decoration: none !important; }
.inf-console .inf-c-back:hover { color: var(--inf-ink) !important; }
.inf-console .inf-c-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.inf-console .content-header h1.inf-c-title, .inf-console .inf-c-title {
    margin: 0 !important; font-size: 30px !important; line-height: 1.15 !important; font-weight: 300 !important; letter-spacing: -.025em !important;
    color: var(--inf-ink) !important; min-width: 0; overflow-wrap: anywhere;
}
.inf-console .inf-c-lede { margin: 10px 0 0; max-width: 72ch; font-size: 15px; line-height: 1.55; color: var(--inf-ink-muted); text-wrap: pretty; }
.inf-console .inf-c-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Panel (x-console.panel). */
.inf-console .inf-c-panel { background: var(--inf-panel); border: 1px solid var(--inf-line); border-radius: var(--inf-c-radius-panel); padding: 22px 24px 24px; min-width: 0; }
.inf-console .inf-c-panel.is-flush { padding: 0; overflow: hidden; } /* rows meet its rounded corners cleanly; menus open fixed, outside it */
.inf-console .inf-c-panel + .inf-c-panel { margin-top: 20px; }
.inf-console .inf-c-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.inf-console .inf-c-panel-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--inf-ink); }
.inf-console .inf-c-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Status (x-console.status): a dot and a word; a second line beneath it when there is one. Never red. */
.inf-console .inf-c-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; white-space: nowrap; vertical-align: middle; color: var(--inf-c-neutral); }
.inf-console .inf-c-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--inf-c-neutral-dot); }
.inf-console .inf-c-status.is-ok { color: var(--inf-c-ok); }
.inf-console .inf-c-status.is-ok .inf-c-dot { background: var(--inf-c-ok-dot); }
.inf-console .inf-c-status.is-info { color: var(--inf-c-info); }
.inf-console .inf-c-status.is-info .inf-c-dot { background: var(--inf-c-info-dot); }
.inf-console .inf-c-status.is-warn { color: var(--inf-c-warn); }
.inf-console .inf-c-status.is-warn .inf-c-dot { background: var(--inf-c-warn-dot); }
.inf-console .inf-c-sub { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--inf-ink-muted); }
.inf-console .inf-c-sub a.inf-c-link { font-size: 13px; text-underline-offset: 3px; }
.inf-console .inf-c-mono { font-family: var(--inf-mono) !important; font-size: 13px; letter-spacing: 0; }
.inf-console .inf-c-quiet { color: var(--inf-ink-muted); }

/* Tabs (x-console.tabs): one underline style; counts in tabular figures. */
.inf-console .inf-c-tabs { display: flex; flex-wrap: nowrap; gap: 28px; padding: 0 24px; border-bottom: 1px solid var(--inf-line); overflow-x: auto; scrollbar-width: none; }
.inf-console .inf-c-tabs::-webkit-scrollbar { display: none; }
.inf-console .inf-c-tab {
    display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 16px 0 14px; margin-bottom: -1px;
    border-bottom: 2px solid transparent; font-size: 14.5px; line-height: 20px; font-weight: 500; white-space: nowrap;
    color: var(--inf-ink-muted) !important; text-decoration: none !important;
}
.inf-console .inf-c-tab[hidden] { display: none; }
.inf-console .inf-c-tab:hover { color: var(--inf-ink) !important; }
.inf-console .inf-c-tab.is-active { color: var(--inf-ink) !important; border-bottom-color: var(--inf-ink); }
.inf-console .inf-c-tab:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: -2px; border-radius: 4px; }
.inf-console .inf-c-tab-n { font-weight: 400; color: var(--inf-ink-soft); font-variant-numeric: tabular-nums; }

/* Toolbar (x-console.toolbar, x-console.filter): search, filters, and the count on the right. */
.inf-console .inf-c-toolbar { display: flex; align-items: flex-start; gap: 10px 16px; padding: 16px 24px; }
.inf-console .inf-c-toolbar-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.inf-console .inf-c-search {
    position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 340px; min-width: 200px; height: var(--inf-c-control);
    border: 1px solid var(--inf-line-field); border-radius: var(--inf-c-radius-control); background: var(--inf-panel); box-sizing: border-box;
}
.inf-console .inf-c-search:focus-within { border-color: var(--inf-teal); box-shadow: var(--inf-focus); }
.inf-console .inf-c-search-icon { position: absolute; left: 13px; color: var(--inf-ink-muted); pointer-events: none; }
.inf-console .inf-c-search-input {
    flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; padding: 0 12px 0 40px; border: 0; background: transparent; outline: none;
    font-family: inherit; font-size: 14.5px; color: var(--inf-ink); border-radius: var(--inf-c-radius-control);
}
.inf-console .inf-c-search-input::placeholder { color: var(--inf-ink-soft); opacity: 1; }
.inf-console .inf-c-search-input::-webkit-search-cancel-button { cursor: pointer; }
.inf-console .inf-c-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.inf-console .inf-c-filter {
    position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--inf-c-control); max-width: 100%; padding: 0 0 0 14px;
    border: 1px solid var(--inf-line-field); border-radius: var(--inf-c-radius-control); background: var(--inf-panel); box-sizing: border-box;
}
.inf-console .inf-c-filter.is-set { border-color: var(--inf-ink); }
.inf-console .inf-c-filter:focus-within { border-color: var(--inf-teal); box-shadow: var(--inf-focus); }
.inf-console .inf-c-filter-label { margin: 0; flex: none; font-size: 14px; font-weight: 500 !important; color: var(--inf-ink); white-space: nowrap; cursor: pointer; }
/* (the portal's native dropdown look, .content select, is undone inside the filter: the filter is the field; the
   selector outranks that rule's) */
.inf-console .inf-c-filter-select,
body.inf-console .content .inf-c-filters .inf-c-filter select.inf-c-filter-select:not([multiple]):not([size]):not(.select2-hidden-accessible) {
    -webkit-appearance: none !important; appearance: none !important; min-width: 0; max-width: 240px !important; height: 38px !important; margin: 0;
    padding: 0 32px 0 2px !important; border: 0 !important; border-radius: 0 var(--inf-c-radius-control) var(--inf-c-radius-control) 0 !important;
    box-shadow: none !important; outline: none; background-color: transparent !important; background-repeat: no-repeat !important;
    background-position: right 12px center !important; background-size: 14px 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352636c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    font-family: inherit; font-size: 14px !important; color: var(--inf-ink-muted) !important; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.inf-console .inf-c-filter.is-set .inf-c-filter-select,
body.inf-console .content .inf-c-filters .inf-c-filter.is-set select.inf-c-filter-select:not([multiple]):not([size]):not(.select2-hidden-accessible) { color: var(--inf-ink) !important; }
.inf-console .inf-c-filter-select option { color: var(--inf-ink); }
.inf-console .inf-c-count { flex: none; margin-left: auto; font-size: 13.5px; line-height: var(--inf-c-control); color: var(--inf-ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inf-console .inf-c-count:empty { display: none; }

/* Empty states (x-console.empty): a title with a full stop, one sentence, the one action. */
.inf-console .inf-c-empty { padding: 4px 0; max-width: 60ch; }
.inf-console .inf-c-empty-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--inf-ink); }
.inf-console .inf-c-empty-text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--inf-ink-muted); text-wrap: pretty; }
.inf-console .inf-c-empty-action { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.inf-console .inf-c-empty.is-filtered { padding: 20px 24px 24px; }
.inf-console .inf-c-empty.is-filtered .inf-c-empty-title { font-size: 15px; }
.inf-console .inf-c-empty.is-filtered .inf-c-link-button { display: inline-block; margin-top: 8px; font-weight: 400; }
.inf-console .inf-c-empty[hidden] { display: none; }

/* The ⋯ menu: a row's or a record's occasional actions. Removing something is red, after a line. */
.inf-console .inf-c-more-btn {
    width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--inf-radius-pill); background: transparent;
    color: var(--inf-ink-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; vertical-align: middle;
}
.inf-console .inf-c-more-btn:hover, .inf-console .inf-c-more-btn[aria-expanded="true"] { background: var(--inf-c-hover); color: var(--inf-ink); }
.inf-console .inf-c-more-btn:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: 1px; }
.inf-console .inf-c-menu { min-width: 232px; padding: 6px; margin: 4px 0 !important; border: 1px solid var(--inf-line) !important; border-radius: var(--inf-c-radius-control) !important; background: var(--inf-panel); z-index: 1040; }
.inf-console .inf-c-menu .dropdown-item {
    display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer;
    font-family: inherit; font-size: 14.5px; line-height: 20px; color: var(--inf-ink) !important; white-space: nowrap; text-decoration: none !important;
}
.inf-console .inf-c-menu .dropdown-item:hover, .inf-console .inf-c-menu .dropdown-item:focus { background: var(--inf-c-hover); color: var(--inf-ink) !important; outline: none; }
.inf-console .inf-c-menu .dropdown-item:focus-visible { box-shadow: inset 0 0 0 2px var(--inf-ink); }
.inf-console .inf-c-menu .dropdown-item.inf-c-menu-danger { color: var(--inf-bad) !important; }
.inf-console .inf-c-menu .dropdown-item.inf-c-menu-danger:hover, .inf-console .inf-c-menu .dropdown-item.inf-c-menu-danger:focus { background: var(--inf-bad-bg); }
.inf-console .inf-c-menu .dropdown-divider { margin: 6px 4px; border-top: 1px solid var(--inf-line-soft); }
/* A row's everyday action (Edit) one click away, beside its ⋯ menu: both 36px, 8px apart, on the right of the row
   (Customers, Partners and People: App\Support\Console\AccountRows). 44px to tap on a phone. */
.inf-console .inf-c-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; vertical-align: middle; }
.inf-console .inf-c-row-actions .inf-c-more { display: inline-flex; }
.inf-console .table td.inf-c-row-actions-cell { width: 1%; white-space: nowrap; text-align: right; }
/* (a status's second line in those lists stays on one line: "Finishing sign-up", "Not signed in for 90 days") */
.inf-console .table td > .inf-c-status + .inf-c-sub { white-space: nowrap; }
/* People is the widest of them (the sign-in method under a name, Microsoft's states, Approve and Decline). Where its card
   is narrower than its columns need (a tablet, a small laptop), those words wrap and Decline goes under Approve, so the
   actions stay in view; with room to spare, everything keeps one line. */
.inf-console table.inf-people-table .inf-people-method { white-space: normal; }
.inf-console table.inf-people-table td > .inf-c-status { white-space: normal; align-items: flex-start; }
.inf-console table.inf-people-table td > .inf-c-status .inf-c-dot { margin-top: 6px; }
.inf-console table.inf-people-table td > .inf-c-status + .inf-c-sub { white-space: normal; }
.inf-console .table.inf-people-table td .inf-people-decide { flex-wrap: wrap; justify-content: flex-end; row-gap: 18px; } /* (8px between, as the buttons' -5px margins keep the row's height) */
@media (max-width: 767.98px) {
    .inf-console .inf-c-row-actions .inf-c-btn.is-small { height: 44px; padding: 0 20px; }
    .inf-console .inf-c-row-actions .inf-c-more-btn { width: 44px; height: 44px; }
    /* People's cards too keep them on the right, as every list's cards do, so the menu opens within the card's width */
    .inf-console table.inf-stack.inf-people-table .inf-people-actions.inf-c-row-actions { justify-content: flex-end; gap: 8px; }
    /* a card's head in those lists: the status keeps its line ("Switched off in Microsoft") and the name takes the rest
       of the width, wrapping only if it is long; the name sits on the status word's line when a second line follows */
    .inf-console table.inf-stack > tbody > tr:has(> td.inf-stack-title):has(> td > .inf-c-status) { grid-template-columns: minmax(0, 1fr) auto !important; }
    .inf-console table.inf-stack > tbody > tr:has(> td > .inf-c-status) > td.inf-stack-title,
    .inf-console table.inf-stack > tbody > tr:has(> td > .inf-c-status) > td.inf-stack-status { align-self: baseline; }
    /* (and a status's second line, "Finishing sign-up", sits under its word, not beside it) */
    .inf-console table.inf-stack > tbody > tr > td.inf-stack-status:has(> .inf-c-status + .inf-c-sub) { flex-direction: column; align-items: flex-end; gap: 0; }
}

/* ------------------------------------------------------------------------------------------- 4. console lists */
/* The list sits edge to edge in its panel: tabs, toolbar, the table (sideways scroll when it is wider), the foot. */
.inf-console .inf-c-list .dataTables_wrapper { padding: 0; }
.inf-console .inf-c-scroll { position: relative; }
.inf-console .inf-c-scroller { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
/* the cue: a fade at the right edge while more columns are off to the side, and a line under the first column once scrolled */
.inf-console .inf-c-scroll::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none; opacity: 0; transition: opacity .15s ease;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 60%);
}
.inf-console .inf-c-scroll.has-more::after { opacity: 1; }

.inf-console .inf-c-list.is-loading .inf-c-scroller tbody { opacity: .55; transition: opacity .15s ease; }
.inf-console .inf-c-list.is-filtered-empty .inf-c-scroll,
.inf-console .inf-c-list.is-filtered-empty .inf-c-foot,
.inf-console .inf-c-list.is-filtered-empty .inf-c-toolbar .inf-c-clear { display: none; }

.inf-console table.inf-c-table { width: 100% !important; margin: 0 !important; border-collapse: separate !important; border-spacing: 0; font-size: 14px; color: var(--inf-ink); }
.inf-console #tblData.inf-c-table thead th { white-space: nowrap !important; vertical-align: middle !important; }
.inf-console table.inf-c-table thead th {
    position: relative; padding: 10px 12px !important; border: 0 !important; border-top: 1px solid var(--inf-line) !important; border-bottom: 1px solid var(--inf-line) !important;
    background: var(--inf-c-head) !important; text-align: left; vertical-align: middle !important; white-space: nowrap;
    font-family: var(--inf-font) !important; font-size: 13px !important; line-height: 20px; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important;
    color: var(--inf-ink-muted) !important;
}
.inf-console table.inf-c-table tbody td {
    padding: 12px !important; border: 0 !important; border-bottom: 1px solid var(--inf-line-soft) !important; background: var(--inf-panel);
    vertical-align: middle !important; line-height: 20px; color: var(--inf-ink);
}
.inf-console table.inf-c-table thead th:first-child, .inf-console table.inf-c-table tbody td:first-child { padding-left: 24px !important; }
.inf-console table.inf-c-table thead th:last-child, .inf-console table.inf-c-table tbody td:last-child { padding-right: 16px !important; }
.inf-console table.inf-c-table tbody tr:last-child td { border-bottom: 0 !important; }
.inf-console table.inf-c-table tbody tr:hover td { background: var(--inf-c-row-hover); }
.inf-console table.inf-c-table tbody tr { background: transparent !important; }
.inf-console table.inf-c-table td.dataTables_empty { padding: 20px 24px !important; color: var(--inf-ink-muted); text-align: left; }
/* sorting: an arrow beside the heading of a column that sorts, solid on the one in use */
.inf-console table.inf-c-table thead th.sorting,
.inf-console table.inf-c-table thead th.sorting_asc,
.inf-console table.inf-c-table thead th.sorting_desc { cursor: pointer; padding-right: 28px !important; }
.inf-console table.inf-c-table thead th.sorting::before, .inf-console table.inf-c-table thead th.sorting::after,
.inf-console table.inf-c-table thead th.sorting_asc::before, .inf-console table.inf-c-table thead th.sorting_asc::after,
.inf-console table.inf-c-table thead th.sorting_desc::before, .inf-console table.inf-c-table thead th.sorting_desc::after { content: none !important; }
.inf-console table.inf-c-table thead th.sorting:hover { color: var(--inf-ink) !important; }
.inf-console table.inf-c-table thead th.sorting:focus-visible,
.inf-console table.inf-c-table thead th.sorting_asc:focus-visible,
.inf-console table.inf-c-table thead th.sorting_desc:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: -3px; }
.inf-console table.inf-c-table thead th.sorting_asc, .inf-console table.inf-c-table thead th.sorting_desc { color: var(--inf-ink) !important; }
.inf-console table.inf-c-table thead th.sorting { background: var(--inf-c-head) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center / 14px 14px !important; }
.inf-console table.inf-c-table thead th.sorting_asc { background: var(--inf-c-head) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307131c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3C/svg%3E") no-repeat right 8px center / 14px 14px !important; }
.inf-console table.inf-c-table thead th.sorting_desc { background: var(--inf-c-head) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307131c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center / 14px 14px !important; }

/* The foot: the range, rows per page and the pages. */
.inf-console .inf-c-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 24px; border-top: 1px solid var(--inf-line-soft); }
.inf-console .inf-c-foot .dataTables_info { padding: 0 !important; margin: 0; font-size: 13.5px; line-height: 20px; color: var(--inf-ink-muted) !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inf-console .inf-c-foot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-left: auto; }
.inf-console .inf-c-foot .dataTables_length { display: flex; align-items: center; margin: 0; }
.inf-console .inf-c-foot .dataTables_length label { display: inline-flex !important; align-items: center; gap: 8px; margin: 0; font-size: 13.5px !important; color: var(--inf-ink-muted) !important; font-weight: 400 !important; white-space: nowrap; }
.inf-console .inf-c-foot .dataTables_length select {
    -webkit-appearance: none; appearance: none; height: 36px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 30px 0 12px !important;
    border: 1px solid var(--inf-line-field) !important; border-radius: var(--inf-c-radius-control) !important; font-size: 14px !important; color: var(--inf-ink) !important;
    background: var(--inf-panel) no-repeat right 9px center / 13px 13px !important; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352636c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
.inf-console .inf-c-foot .dataTables_length select:focus { border-color: var(--inf-teal) !important; box-shadow: var(--inf-focus) !important; outline: none; }
.inf-console .inf-c-foot .dataTables_paginate { margin: 0 !important; padding: 0 !important; }
.inf-console .inf-c-foot .pagination { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; }
.inf-console .inf-c-foot .paginate_button .page-link {
    display: inline-flex !important; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px !important;
    border: 0 !important; border-radius: var(--inf-c-radius-control) !important; background: transparent !important; color: var(--inf-ink) !important;
    font-size: 14px; line-height: 1; box-shadow: none !important; font-variant-numeric: tabular-nums;
}
.inf-console .inf-c-foot .paginate_button .page-link:hover { background: var(--inf-c-hover) !important; }
.inf-console .inf-c-foot .paginate_button.active .page-link { background: var(--inf-button) !important; color: var(--inf-button-text) !important; }
.inf-console .inf-c-foot .paginate_button.disabled .page-link { color: var(--inf-ink-soft) !important; opacity: .6; background: transparent !important; cursor: default; }
.inf-console .inf-c-foot .paginate_button .page-link:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: 1px; }
.inf-console .inf-c-foot .paginate_button.previous .page-link, .inf-console .inf-c-foot .paginate_button.next .page-link { padding: 0 12px !important; }
.inf-console .inf-c-foot .ellipsis .page-link { min-width: 24px; padding: 0 2px !important; color: var(--inf-ink-soft) !important; }

/* Cells every list shares: an identifier (a number) as the row's title, a name, the second lines. */
.inf-console .inf-c-table .inf-c-id { font-family: var(--inf-mono) !important; font-size: 14px; font-weight: 500; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inf-console .inf-c-table .inf-c-name { display: block; }
.inf-console .inf-c-table .inf-c-phone-status, .inf-console .inf-c-table .inf-c-phone-fact { display: none; }
.inf-console .inf-c-table td.inf-c-col-actions { width: 1%; text-align: right; white-space: nowrap; padding-top: 8px !important; padding-bottom: 8px !important; }
.inf-console .inf-c-table th.inf-c-col-more, .inf-console .inf-c-table td.inf-c-col-more { display: none; }

/* The Numbers list's columns. */
.inf-console .inf-c-table td.inf-c-col-number { white-space: nowrap; }
.inf-console .inf-c-table td.inf-c-col-customer { min-width: 180px; max-width: 280px; overflow-wrap: anywhere; }
.inf-console .inf-c-table td.inf-c-col-trunk { white-space: nowrap; }
.inf-console .inf-c-table td.inf-c-col-trunk .inf-c-mono { display: inline-block; max-width: 200px; white-space: normal; overflow-wrap: anywhere; }
.inf-console .inf-c-table td.inf-c-col-emergency, .inf-console .inf-c-table td.inf-c-col-carrier { white-space: nowrap; }
.inf-console .inf-c-table td.inf-c-col-status { min-width: 168px; }
.inf-console .inf-c-table td.inf-c-col-status .inf-c-sub { white-space: nowrap; }

/* Where the list is narrower than its full set of columns needs (a tablet, a small laptop, the menu open), the customer
   moves under the number, staff's carrier under the trunk, and "Emergency calling" reads "Emergency": every fact stays
   in view without scrolling sideways. Measured on the list's own width (a container query), so it holds whether or not
   the menu takes room. Should the table still be wider (a very long value), it scrolls inside the panel with the number
   kept in view and a fade at the edge. */
.inf-console .inf-c-table .inf-c-number-customer, .inf-console .inf-c-table .inf-c-trunk-carrier, .inf-console .inf-c-table .inf-c-th-short { display: none; }
.inf-console .inf-c-list { container-type: inline-size; container-name: inf-list; }
@media (min-width: 768px) {
    @container inf-list (max-width: 1039.98px) {
        .inf-console table.inf-c-table.has-carrier .inf-c-col-carrier { display: none; }
        .inf-console table.inf-c-table.has-carrier .inf-c-trunk-carrier { display: inline; white-space: nowrap; }
        .inf-console table.inf-c-table.has-carrier .inf-c-sub.inf-c-trunk-carrier { display: block; }
    }
    @container inf-list (max-width: 959.98px) {
        .inf-console table.inf-c-table.has-customer .inf-c-col-customer { display: none; }
        .inf-console table.inf-c-table.has-customer .inf-c-col-number .inf-c-country { display: none; }
        .inf-console table.inf-c-table.has-customer .inf-c-number-customer { display: block; max-width: 220px; white-space: normal; overflow-wrap: anywhere; }
        .inf-console table.inf-c-table.has-customer .inf-c-th-long { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
        .inf-console table.inf-c-table.has-customer .inf-c-th-short { display: inline; }
    }
    .inf-console .inf-c-scroll.has-more table.inf-c-table thead th:first-child,
    .inf-console .inf-c-scroll.has-more table.inf-c-table tbody td:first-child,
    .inf-console .inf-c-scroll.has-less table.inf-c-table thead th:first-child,
    .inf-console .inf-c-scroll.has-less table.inf-c-table tbody td:first-child { position: sticky; left: 0; z-index: 2; }
    .inf-console .inf-c-scroll.has-less table.inf-c-table thead th:first-child,
    .inf-console .inf-c-scroll.has-less table.inf-c-table tbody td:first-child { box-shadow: inset -1px 0 0 var(--inf-line); }
}

/* The SIP trunks list's columns (siptrunks/console): the trunk with its customer beneath, its service and its connection
   (each a dot and a word, with when beneath), how its phone system connects (in mono, with the point of presence), the
   figures right-aligned in tabular numbers. A connection the list doesn't read is a quiet note, with no dot. */
.inf-console .inf-c-table .inf-c-note { display: inline-block; font-size: 14px; line-height: 20px; white-space: nowrap; }
.inf-console .inf-c-trunk-table .inf-c-stack { display: block; min-width: 0; }
.inf-console .inf-c-trunk-table td.inf-c-col-name { min-width: 140px; max-width: 280px; overflow-wrap: anywhere; }
.inf-console .inf-c-trunk-table .inf-c-name-link { font-size: 14.5px; font-weight: 500; color: var(--inf-ink) !important; text-decoration: none !important; }
.inf-console .inf-c-trunk-table .inf-c-name-link:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.inf-console .inf-c-trunk-table .inf-c-name-link:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: 2px; border-radius: 2px; }
.inf-console .inf-c-trunk-table td.inf-c-col-service,
.inf-console .inf-c-trunk-table td.inf-c-col-connection { white-space: nowrap; }
/* a long plan name (a 3CX bundle's) wraps rather than widening the list; the usual ones stay on one line */
.inf-console .inf-c-trunk-table td.inf-c-col-plan { white-space: nowrap; }
.inf-console .inf-c-trunk-table td.inf-c-col-plan .inf-c-wrap { display: inline-block; min-width: 120px; white-space: normal; }
.inf-console .inf-c-trunk-table td.inf-c-col-service .inf-c-sub,
.inf-console .inf-c-trunk-table td.inf-c-col-connection .inf-c-sub { white-space: nowrap; }
.inf-console .inf-c-trunk-table td.inf-c-col-connects { min-width: 150px; }
.inf-console .inf-c-trunk-table td.inf-c-col-connects .inf-c-mono { display: inline-block; max-width: 230px; overflow-wrap: anywhere; }
.inf-console .inf-c-trunk-table td.inf-c-col-connects .inf-c-sub { white-space: normal; }
.inf-console .inf-c-trunk-table th.inf-c-col-channels, .inf-console .inf-c-trunk-table td.inf-c-col-channels,
.inf-console .inf-c-trunk-table th.inf-c-col-numbers, .inf-console .inf-c-trunk-table td.inf-c-col-numbers,
.inf-console .inf-c-trunk-table th.inf-c-col-monthly, .inf-console .inf-c-trunk-table td.inf-c-col-monthly { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a figure's heading ends where its figures do; Per month's sort arrow sits before the word */
.inf-console table.inf-c-trunk-table thead th.inf-c-col-channels, .inf-console table.inf-c-trunk-table thead th.inf-c-col-numbers,
.inf-console table.inf-c-trunk-table thead th.inf-c-col-monthly { padding-left: 4px !important; padding-right: 12px !important; }
.inf-console table.inf-c-trunk-table thead th.inf-c-col-monthly.sorting, .inf-console table.inf-c-trunk-table thead th.inf-c-col-monthly.sorting_asc,
.inf-console table.inf-c-trunk-table thead th.inf-c-col-monthly.sorting_desc { background-image: none !important; }
.inf-console table.inf-c-trunk-table thead th.inf-c-col-monthly .inf-c-th-text::before {
    content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; background: no-repeat center / 14px 14px;
}
.inf-console table.inf-c-trunk-table thead th.inf-c-col-monthly.sorting .inf-c-th-text::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b949a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E"); }
.inf-console table.inf-c-trunk-table thead th.inf-c-col-monthly.sorting_asc .inf-c-th-text::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307131c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3C/svg%3E"); }
.inf-console table.inf-c-trunk-table thead th.inf-c-col-monthly.sorting_desc .inf-c-th-text::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307131c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); }
.inf-console .inf-c-trunk-table td.inf-c-col-channels, .inf-console .inf-c-trunk-table td.inf-c-col-numbers, .inf-console .inf-c-trunk-table td.inf-c-col-monthly { padding-left: 4px !important; }
.inf-console .inf-c-trunk-table td.inf-c-col-service .inf-c-sub { white-space: normal; }
.inf-console .inf-c-trunk-table td.inf-c-col-actions { padding-left: 4px !important; }
/* the folded copies (below): hidden until their column is */
.inf-console .inf-c-trunk-table .inf-c-fold-connects, .inf-console .inf-c-trunk-table .inf-c-fold-numbers,
.inf-console .inf-c-trunk-table .inf-c-fold-plan, .inf-console .inf-c-trunk-table .inf-c-fold-service { display: none; }

/* The trunks list's toolbar and foot: its search names four things, so its field is a little wider; the foot says when
   the connection records were last known current, beside the range. */
.inf-console .inf-c-trunks .inf-c-search { flex-basis: 380px; max-width: 380px; }
.inf-console .inf-c-foot .inf-c-checked { font-size: 13.5px; line-height: 20px; color: var(--inf-ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inf-console .inf-c-foot .inf-c-checked:empty { display: none; }

/* Where the trunks list is narrower than its columns need (a small laptop, a tablet, the menu open), columns move under
   others rather than the list scrolling sideways: first the plan under the price, then the numbers under the channels,
   then how the phone system connects under the trunk's name, and last the service under it too (as beside a trunk's
   title). Measured on the list's own width (a container query), a little earlier when rows have a ⋯ menu, with room
   to spare for longer values than the usual ones ("Last registered 9 Oct, 14:05", "Microsoft Teams · New York City"). */
@media (min-width: 768px) {
    @container inf-list (max-width: 1096.98px) {
        .inf-console .inf-c-trunk-table .inf-c-col-plan { display: none; }
        .inf-console .inf-c-trunk-table .inf-c-fold-plan { display: block; }
    }
    @container inf-list (max-width: 1148.98px) {
        .inf-console .inf-c-trunk-table.has-actions .inf-c-col-plan { display: none; }
        .inf-console .inf-c-trunk-table.has-actions .inf-c-fold-plan { display: block; }
    }
    @container inf-list (max-width: 980.98px) {
        .inf-console .inf-c-trunk-table .inf-c-col-numbers { display: none; }
        .inf-console .inf-c-trunk-table .inf-c-fold-numbers { display: block; }
    }
    @container inf-list (max-width: 1032.98px) {
        .inf-console .inf-c-trunk-table.has-actions .inf-c-col-numbers { display: none; }
        .inf-console .inf-c-trunk-table.has-actions .inf-c-fold-numbers { display: block; }
    }
    @container inf-list (max-width: 922.98px) {
        .inf-console .inf-c-trunk-table .inf-c-col-connects { display: none; }
        .inf-console .inf-c-trunk-table .inf-c-fold-connects { display: block; }
    }
    @container inf-list (max-width: 974.98px) {
        .inf-console .inf-c-trunk-table.has-actions .inf-c-col-connects { display: none; }
        .inf-console .inf-c-trunk-table.has-actions .inf-c-fold-connects { display: block; }
    }
    @container inf-list (max-width: 735.98px) {
        .inf-console .inf-c-trunk-table .inf-c-col-service { display: none; }
        .inf-console .inf-c-trunk-table .inf-c-fold-service { display: block; margin-top: 6px; }
    }
    @container inf-list (max-width: 787.98px) {
        .inf-console .inf-c-trunk-table.has-actions .inf-c-col-service { display: none; }
        .inf-console .inf-c-trunk-table.has-actions .inf-c-fold-service { display: block; margin-top: 6px; }
    }
    .inf-console .inf-c-trunk-table .inf-c-fold-connects .inf-c-mono { font-size: 12.5px; }
}

/* Page top, toolbar and foot on phones and small tablets. */
@media (max-width: 991.98px) {
    .inf-console .content-wrapper > .content-header { padding: 28px 20px 20px !important; }
}
@media (max-width: 767.98px) {
    .inf-console .inf-page-actions, .inf-console .inf-c-actions { width: 100%; margin-top: 4px; }
    .inf-console .inf-page-actions .hd-btn, .inf-console .inf-c-actions .inf-c-btn { flex: 1 1 calc(50% - 5px); min-width: max-content; }
    .inf-console .inf-page-actions .hd-btn-dark, .inf-console .inf-c-actions .inf-c-btn.is-primary { order: -1; flex-basis: 100%; }
    .inf-console .inf-c-top { gap: 12px; }
    .inf-console .inf-c-panel:not(.is-flush) { padding: 18px 16px 20px; }
    .inf-console .inf-c-tabs { padding: 0 16px; gap: 24px; }
    .inf-console .inf-c-tabs.has-more { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
    .inf-console .inf-c-tabs.has-less { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
    .inf-console .inf-c-tabs.has-less.has-more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
    .inf-console .inf-c-toolbar { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 10px; }
    .inf-console .inf-c-toolbar-main { flex: none; }
    .inf-console .inf-c-search { flex: 1 1 100%; min-width: 0; height: 44px; }
    /* filters two to a row, each name above its choice; the whole filter is the dropdown */
    .inf-console .inf-c-filters { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .inf-console .inf-c-filter { display: block; height: 56px; min-width: 0; width: 100%; padding: 0; }
    .inf-console .inf-c-filter-label {
        position: absolute; top: 8px; left: 12px; right: 12px; z-index: 1; font-size: 13px; line-height: 18px; color: var(--inf-ink-muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
    }
    .inf-console .inf-c-filter-select,
    body.inf-console .content .inf-c-filters .inf-c-filter select.inf-c-filter-select:not([multiple]):not([size]):not(.select2-hidden-accessible) {
        position: absolute; inset: 0; width: 100% !important; max-width: none !important; height: 100% !important; padding: 24px 32px 6px 12px !important;
        border-radius: var(--inf-c-radius-control) !important; font-size: 15px !important; background-position: right 12px top 31px !important;
    }
    .inf-console .inf-c-filters .inf-c-clear { grid-column: 1 / -1; justify-self: start; }
    .inf-console .inf-c-count { margin-left: 0; line-height: 20px; }
    /* the range and rows per page on one line, Previous and Next beneath at either end */
    .inf-console .inf-c-foot { padding: 14px 16px 16px; gap: 12px; }
    .inf-console .inf-c-foot .inf-c-range { flex: 1 1 auto; }
    .inf-console .inf-c-foot-tools { display: contents; }
    .inf-console .inf-c-foot .dataTables_length { margin-left: auto; }
    .inf-console .inf-c-foot .dataTables_length label { justify-content: flex-end; }
    .inf-console .inf-c-foot .dataTables_paginate { flex: 0 0 100%; order: 4; }
    .inf-console .inf-c-foot .inf-c-range { order: 1; }
    .inf-console .inf-c-foot .dataTables_length { order: 2; }
    .inf-console .inf-c-foot .inf-c-checked { flex: 0 0 100%; order: 3; white-space: normal; }
    .inf-console .inf-c-foot .pagination { width: 100%; justify-content: space-between; }
    .inf-console .inf-c-foot .pagination .paginate_button:not(.previous):not(.next):not(.active),
    .inf-console .inf-c-foot .pagination .ellipsis { display: none; }
    .inf-console .inf-c-foot .paginate_button.previous .page-link, .inf-console .inf-c-foot .paginate_button.next .page-link { min-width: 44px; height: 44px; border: 1px solid var(--inf-line) !important; }
    .inf-console .inf-c-foot .paginate_button.active .page-link { height: 44px; min-width: 44px; }
    .inf-console .inf-c-empty.is-filtered { padding: 16px 16px 20px; }
}

/* Phones: each row is a card (the number, its status and one more fact, and a chevron) that opens to show the rest
   as label and value, then its actions. */
@media (max-width: 767.98px) {
    .inf-console table.inf-c-table, .inf-console table.inf-c-table tbody { display: block; width: 100% !important; min-width: 0; }
    .inf-console table.inf-c-table thead { display: none; }
    .inf-console table.inf-c-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 8px;
        padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--inf-line-soft);
    }
    .inf-console table.inf-c-table tbody tr:last-child { border-bottom: 0; }
    .inf-console table.inf-c-table tbody tr:hover td { background: transparent; }
    .inf-console table.inf-c-table tbody td { display: none; padding: 0 !important; border: 0 !important; background: transparent; }
    .inf-console table.inf-c-table tbody td.dataTables_empty { display: block; padding: 16px !important; }
    /* the card's head: the number with its status on the right, and beneath them the customer (or the trunk) */
    .inf-console table.inf-c-table tbody td.inf-c-col-number {
        display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; grid-column: 1; grid-row: 1;
        padding: 0 !important; white-space: normal; cursor: pointer;
    }
    .inf-console table.inf-c-table tbody td.inf-c-col-more { display: flex; grid-column: 2; grid-row: 1; justify-content: center; }
    .inf-console .inf-c-table .inf-c-col-number .inf-c-id { font-size: 15px; line-height: 22px; }
    .inf-console .inf-c-table .inf-c-col-number .inf-c-country,
    .inf-console .inf-c-table .inf-c-col-number .inf-c-number-customer { display: none !important; }
    .inf-console .inf-c-table .inf-c-phone-status { display: block; margin-left: auto; }
    .inf-console .inf-c-table .inf-c-phone-fact { display: block; flex: 0 0 100%; min-width: 0; font-size: 14px; line-height: 20px; color: var(--inf-ink-muted); overflow-wrap: anywhere; }
    .inf-console .inf-c-expand {
        width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--inf-radius-pill); background: transparent; color: var(--inf-ink-muted);
        display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .inf-console .inf-c-expand:hover { background: var(--inf-c-hover); color: var(--inf-ink); }
    .inf-console .inf-c-expand:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: -2px; }
    .inf-console .inf-c-expand svg { transition: transform .15s ease; }
    .inf-console tr.is-open .inf-c-expand svg { transform: rotate(180deg); }
    /* open: the short facts give way to the full details */
    .inf-console tr.is-open .inf-c-phone-status, .inf-console tr.is-open .inf-c-phone-fact { display: none; }
    .inf-console tr.is-open .inf-c-col-number .inf-c-country { display: block !important; flex: 0 0 100%; margin-top: 0; }
    .inf-console table.inf-c-table tbody tr.is-open td:not(.inf-c-col-number):not(.inf-c-col-name):not(.inf-c-col-more):not(.inf-c-col-actions) {
        display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: start; column-gap: 12px;
        grid-column: 1 / -1; min-width: 0; max-width: none; padding: 8px 8px 0 0 !important; white-space: normal; text-align: left;
    }
    .inf-console table.inf-c-table tbody tr.is-open td:not(.inf-c-col-number):not(.inf-c-col-name):not(.inf-c-col-more):not(.inf-c-col-actions)::before {
        content: attr(data-label); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--inf-ink-muted);
    }
    /* the SIP trunks list's card: the trunk with its service on the right, its connection beneath; open, its customer too */
    .inf-console table.inf-c-trunk-table tbody td.inf-c-col-name {
        display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; grid-column: 1; grid-row: 1;
        min-width: 0; max-width: none; padding: 0 !important; white-space: normal; cursor: pointer;
    }
    /* a long name wraps beside its service, which stays on the first line */
    .inf-console table.inf-c-trunk-table tbody td.inf-c-col-name { align-items: flex-start; }
    .inf-console .inf-c-trunk-table .inf-c-col-name .inf-c-name-link { flex: 1 1 0; min-width: 0; font-size: 15px; line-height: 22px; }
    .inf-console .inf-c-trunk-table .inf-c-col-name .inf-c-phone-status { flex: none; margin-top: 1px; }
    .inf-console .inf-c-trunk-table .inf-c-col-name .inf-c-name-sub,
    .inf-console .inf-c-trunk-table .inf-c-col-name .inf-c-fold-connects,
    .inf-console .inf-c-trunk-table .inf-c-col-name .inf-c-fold-service { display: none !important; }
    .inf-console .inf-c-trunk-table .inf-c-phone-fact { color: var(--inf-ink); }
    .inf-console .inf-c-trunk-table tr.is-open .inf-c-col-name .inf-c-name-sub { display: block !important; flex: 0 0 100%; margin-top: 0; }
    .inf-console .inf-c-trunk-table tr.is-open td.inf-c-col-name { padding-bottom: 4px !important; }
    .inf-console table.inf-c-table tbody tr.is-open td > * { grid-column: 2; min-width: 0; }
    .inf-console table.inf-c-table tbody tr.is-open td .inf-c-status { justify-self: start; white-space: normal; }
    .inf-console table.inf-c-table tbody tr.is-open td .inf-c-sub { white-space: normal; }
    .inf-console table.inf-c-table tbody tr.is-open td .inf-c-mono { overflow-wrap: anywhere; }
    .inf-console table.inf-c-table tbody tr.is-open td.inf-c-col-number { padding-bottom: 4px !important; }
    /* its actions: the ⋯ menu's choices as a list */
    .inf-console table.inf-c-table tbody tr.is-open td.inf-c-col-actions { display: block; grid-column: 1 / -1; width: auto; padding: 12px 8px 4px 0 !important; text-align: left; }
    .inf-console tr.is-open .inf-c-more-btn { display: none; }
    .inf-console tr.is-open .inf-c-more .inf-c-menu {
        display: flex !important; flex-direction: column; gap: 2px; position: static !important; transform: none !important; inset: auto !important;
        float: none; min-width: 0; width: 100%; margin: 0 !important; padding: 0; border: 0 !important; background: transparent;
    }
    .inf-console tr.is-open .inf-c-menu .dropdown-item { padding: 11px 12px; margin: 0 -12px; width: calc(100% + 24px); white-space: normal; }
    .inf-console tr.is-open .inf-c-menu .dropdown-divider { margin: 4px 0; }
    .inf-console .inf-c-list .inf-c-scroll::after { display: none; }
}

/* ----------------------------------------------------------------------------------------- 5. states everywhere */
/* Every state in the portal reads as the console status (x-console.status): an 8px dot, then the word in its tone, with
   no pill. Today's pages write states in several ways (hd-chip, .badge, .status, Ending, inf-cx-badge, the business
   details chip, trunk status, calls, porting's ticks, the Microsoft profile, the 3CX systems list, the dot lists), so
   each is restyled here, words unchanged. Four tones, never red: ok (good), info (in progress), warn (needs a look),
   neutral (quiet). A class's own tone maps across (need, bad, danger and Ending read warn; sched, prog and progress
   read info); data-tone="ok|info|warn|neutral" on the element names the tone where a class is used for two meanings.
   Tags and labels that aren't states keep their own look: .inf-cx-badge.inf-h3-plain, [data-tag], .hd-sample-chip,
   badges in alerts and the menu, filter chips and counts. */
.inf-console .hd-chip:where(:not(.hd-sample-chip)),
.inf-console .hd-step-state,
.inf-console .content-wrapper span.badge.badge-success:not(.alert span),
.inf-console .content-wrapper span.badge.badge-warning:not(.alert span),
.inf-console .content-wrapper span.badge.badge-danger:not(.alert span),
.inf-console .content-wrapper span.badge.badge-info:not(.alert span),
.inf-console .content-wrapper span.badge.badge-secondary:not(.alert span),
.inf-console .content-wrapper span.badge.badge-light:not(.alert span),
.inf-console .div-main-list td .status,
.inf-console .inf-cx-badge:where(:not(.inf-h3-plain):not([data-tag])),
.inf-console .inf-ending,
.inf-console .inf-bd-chip,
.inf-console .inf-ts .inf-ts-badge,
.inf-console .inf-calls .inf-calls-badge,
.inf-console .inf-pt-tick,
.inf-console .inf-ms-profile-state {
    display: inline-flex !important; align-items: flex-start; gap: 8px; height: auto !important; min-height: 20px; max-width: 100%;
    margin-top: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    font-family: var(--inf-font) !important; font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important;
    letter-spacing: 0 !important; text-transform: none !important; text-align: left; white-space: nowrap; vertical-align: middle;
    color: var(--inf-c-neutral) !important;
}
/* the dot sits on the first line, wherever the word wraps */
.inf-console .hd-chip:where(:not(.hd-sample-chip))::before,
.inf-console .hd-step-state::before,
.inf-console .content-wrapper span.badge.badge-success:not(.alert span)::before,
.inf-console .content-wrapper span.badge.badge-warning:not(.alert span)::before,
.inf-console .content-wrapper span.badge.badge-danger:not(.alert span)::before,
.inf-console .content-wrapper span.badge.badge-info:not(.alert span)::before,
.inf-console .content-wrapper span.badge.badge-secondary:not(.alert span)::before,
.inf-console .content-wrapper span.badge.badge-light:not(.alert span)::before,
.inf-console .div-main-list td .status::before,
.inf-console .inf-cx-badge:where(:not(.inf-h3-plain):not([data-tag]))::before,
.inf-console .inf-ending::before,
.inf-console .inf-bd-chip::before,
.inf-console .inf-ts .inf-ts-badge::before,
.inf-console .inf-calls .inf-calls-badge::before,
.inf-console .inf-pt-tick::before,
.inf-console .inf-ms-profile-state::before {
    content: ""; flex: none; width: 8px; height: 8px; margin: 6px 0 0; border-radius: 50%; background: var(--inf-c-neutral-dot) !important;
}
.inf-console .hd-chip:where(:not(.hd-sample-chip)) svg { display: none; }
/* a step still to do has no word: nothing shows, and its row keeps the same height as the others */
.inf-console .hd-step-state:empty { visibility: hidden; }
/* the calls list and porting's numbers are denser: 13px, as their other cells */
.inf-console .inf-calls .inf-calls-badge,
.inf-console .inf-pt-numbers .inf-cx-badge { font-size: 13px !important; line-height: 20px !important; }
/* a state on the same line as other words keeps its distance from them (the pill's edge did that before), and sits
   on their baseline: inf-c-after-text after a date or another state, inf-c-before-text before a name */
body.inf-console .content-wrapper span.badge.inf-c-after-text:not(.alert span),
body.inf-console .content-wrapper span.badge.inf-c-before-text:not(.alert span) {
    display: inline !important; position: relative; padding-left: 16px !important; vertical-align: baseline; line-height: inherit !important;
}
body.inf-console .content-wrapper span.badge.inf-c-after-text:not(.alert span)::before,
body.inf-console .content-wrapper span.badge.inf-c-before-text:not(.alert span)::before { position: absolute; left: 0; top: 50%; margin: -4px 0 0; }
.inf-console .inf-c-after-text { margin-left: 6px; }
.inf-console .inf-c-before-text { margin-right: 6px; }
/* a tag beside a state in a list row (Demo, Admin) keeps its pill, at the state's 20px line, so rows stay even */
.inf-console td .inf-cx-badge.inf-h3-plain { padding-top: 0; padding-bottom: 0; line-height: 18px; }
/* a state's note under it is muted, and amber only under a state that needs a look */
.inf-console .inf-cx-table td .inf-cx-badge.is-progress:not([data-tone="warn"]) + small:not(.is-caution) { color: var(--inf-ink-muted); }

/* on a phone a list row's status shares the line with its title, so a long one wraps beneath its first word rather
   than running past the card (the dot stays on the first line) */
@media (max-width: 767.98px) {
    .inf-console td.inf-stack-status .inf-cx-badge,
    .inf-console td.inf-stack-status .hd-chip,
    .inf-console td.inf-stack-status span.badge,
    .inf-console td.inf-stack-status .status { white-space: normal; }
}

/* The lists that already draw a dot (the 3CX systems list, and the dot lists beside row switches): the same dot and tone. */
.inf-console .inf-h3-st { gap: 8px; font-size: 14px; line-height: 20px; color: var(--inf-c-neutral); }
.inf-console .inf-h3-st i { flex: none; width: 8px; height: 8px; background: var(--inf-c-neutral-dot); }
.inf-console .inf-trunk-state { font-size: 14px; color: var(--inf-c-neutral); }
.inf-console .inf-trunk-state-dot { background: var(--inf-c-neutral-dot); box-shadow: none !important; }
/* a dot with no switch to line up with: the status's own 8px gap */
.inf-console table:not(:has(.inf-trunk-switch)) .inf-trunk-state,
.inf-console .inf-trunk-state:has(.inf-trunk-state-lead.is-dot) { gap: 8px; }
.inf-console table:not(:has(.inf-trunk-switch)) .inf-trunk-state-lead,
.inf-console .inf-trunk-state-lead.is-dot { margin-right: 0; }
/* Microsoft Teams set-up's line under its title: the status tokens */
.inf-console .inf-ts-status::before { background: var(--inf-c-neutral-dot); }
.inf-console .inf-ts-hero.is-ok .inf-ts-status { color: var(--inf-c-ok); }
.inf-console .inf-ts-hero.is-ok .inf-ts-status::before { background: var(--inf-c-ok-dot); }
.inf-console .inf-ts-hero.is-warn .inf-ts-status { color: var(--inf-c-warn); }
.inf-console .inf-ts-hero.is-warn .inf-ts-status::before { background: var(--inf-c-warn-dot); }
.inf-console .inf-ts-hero.is-info .inf-ts-status { color: var(--inf-c-info); }
.inf-console .inf-ts-hero.is-info .inf-ts-status::before { background: var(--inf-c-info-dot); }

/* ok: good */
.inf-console .hd-chip.hd-chip-ok:where(:not(.hd-sample-chip)),
.inf-console .hd-step-state.hd-step-done,
.inf-console .content-wrapper span.badge.badge-success:not(.alert span),
.inf-console .div-main-list td .status.active,
.inf-console .inf-cx-badge.is-ok:where(:not(.inf-h3-plain):not([data-tag])),
.inf-console .inf-bd-chip.is-ok,
.inf-console .inf-ts .inf-ts-badge.is-ok,
.inf-console .inf-calls .inf-calls-badge.is-ok,
.inf-console .inf-pt-tick.is-done,
.inf-console .inf-ms-profile-state,
.inf-console .inf-h3-st.is-live,
.inf-console .inf-trunk-state.is-on { color: var(--inf-c-ok) !important; }
.inf-console .hd-chip.hd-chip-ok:where(:not(.hd-sample-chip))::before,
.inf-console .hd-step-state.hd-step-done::before,
.inf-console .content-wrapper span.badge.badge-success:not(.alert span)::before,
.inf-console .div-main-list td .status.active::before,
.inf-console .inf-cx-badge.is-ok:where(:not(.inf-h3-plain):not([data-tag]))::before,
.inf-console .inf-bd-chip.is-ok::before,
.inf-console .inf-ts .inf-ts-badge.is-ok::before,
.inf-console .inf-calls .inf-calls-badge.is-ok::before,
.inf-console .inf-pt-tick.is-done::before,
.inf-console .inf-ms-profile-state::before,
.inf-console .inf-h3-st.is-live i,
.inf-console .inf-trunk-state.is-on .inf-trunk-state-dot { background: var(--inf-c-ok-dot) !important; }
/* info: in progress */
.inf-console .hd-chip.hd-chip-sched:where(:not(.hd-sample-chip)),
.inf-console .hd-chip.hd-chip-prog:where(:not(.hd-sample-chip)),
.inf-console .hd-step-state.hd-step-waiting,
.inf-console .content-wrapper span.badge.badge-info:not(.alert span),
.inf-console .inf-cx-badge.is-progress:where(:not(.inf-h3-plain):not([data-tag])),
.inf-console .inf-cx-badge.is-info:where(:not(.inf-h3-plain):not([data-tag])) { color: var(--inf-c-info) !important; }
.inf-console .hd-chip.hd-chip-sched:where(:not(.hd-sample-chip))::before,
.inf-console .hd-chip.hd-chip-prog:where(:not(.hd-sample-chip))::before,
.inf-console .hd-step-state.hd-step-waiting::before,
.inf-console .content-wrapper span.badge.badge-info:not(.alert span)::before,
.inf-console .inf-cx-badge.is-progress:where(:not(.inf-h3-plain):not([data-tag]))::before,
.inf-console .inf-cx-badge.is-info:where(:not(.inf-h3-plain):not([data-tag]))::before { background: var(--inf-c-info-dot) !important; }
/* warn: needs a look (amber, never red) */
.inf-console .hd-chip.hd-chip-need:where(:not(.hd-sample-chip)),
.inf-console .hd-chip.hd-chip-bad:where(:not(.hd-sample-chip)),
.inf-console .hd-step-state.hd-step-failed,
.inf-console .content-wrapper span.badge.badge-warning:not(.alert span),
.inf-console .content-wrapper span.badge.badge-danger:not(.alert span),
.inf-console .inf-cx-badge.is-bad:where(:not(.inf-h3-plain):not([data-tag])),
.inf-console .inf-cx-badge.inf-ending:where(:not(.inf-h3-plain):not([data-tag])),
.inf-console .inf-ending,
.inf-console .inf-bd-chip.is-need,
.inf-console .inf-bd-chip.is-bad,
.inf-console .inf-ts .inf-ts-badge.is-attention,
.inf-console .inf-calls .inf-calls-badge.is-attention,
.inf-console .inf-pt-tick:not(.is-done),
.inf-console .inf-h3-st.is-attention,
.inf-console .inf-trunk-state.is-ending,
.inf-console .inf-people-state.is-waiting { color: var(--inf-c-warn) !important; }
.inf-console .hd-chip.hd-chip-need:where(:not(.hd-sample-chip))::before,
.inf-console .hd-chip.hd-chip-bad:where(:not(.hd-sample-chip))::before,
.inf-console .hd-step-state.hd-step-failed::before,
.inf-console .content-wrapper span.badge.badge-warning:not(.alert span)::before,
.inf-console .content-wrapper span.badge.badge-danger:not(.alert span)::before,
.inf-console .inf-cx-badge.is-bad:where(:not(.inf-h3-plain):not([data-tag]))::before,
.inf-console .inf-cx-badge.inf-ending:where(:not(.inf-h3-plain):not([data-tag]))::before,
.inf-console .inf-ending::before,
.inf-console .inf-bd-chip.is-need::before,
.inf-console .inf-bd-chip.is-bad::before,
.inf-console .inf-ts .inf-ts-badge.is-attention::before,
.inf-console .inf-calls .inf-calls-badge.is-attention::before,
.inf-console .inf-pt-tick:not(.is-done)::before,
.inf-console .inf-h3-st.is-attention i,
.inf-console .inf-trunk-state.is-ending .inf-trunk-state-dot,
.inf-console .inf-people-state.is-waiting .inf-trunk-state-dot { background: var(--inf-c-warn-dot) !important; }
/* data-tone: the state's own tone, where its class is shared by two meanings (an amber "progress" class used for
   "Needs attention" as well as "Setting up", say) */
body.inf-console .hd-chip[data-tone="ok"],
body.inf-console .content-wrapper span.badge[data-tone="ok"]:not(.alert span),
body.inf-console .div-main-list td .status[data-tone="ok"],
body.inf-console .inf-cx-badge[data-tone="ok"],
body.inf-console .inf-bd-chip[data-tone="ok"] { color: var(--inf-c-ok) !important; }
body.inf-console .hd-chip[data-tone="ok"]::before,
body.inf-console .content-wrapper span.badge[data-tone="ok"]:not(.alert span)::before,
body.inf-console .div-main-list td .status[data-tone="ok"]::before,
body.inf-console .inf-cx-badge[data-tone="ok"]::before,
body.inf-console .inf-bd-chip[data-tone="ok"]::before { background: var(--inf-c-ok-dot) !important; }
body.inf-console .hd-chip[data-tone="info"],
body.inf-console .content-wrapper span.badge[data-tone="info"]:not(.alert span),
body.inf-console .div-main-list td .status[data-tone="info"],
body.inf-console .inf-cx-badge[data-tone="info"],
body.inf-console .inf-bd-chip[data-tone="info"] { color: var(--inf-c-info) !important; }
body.inf-console .hd-chip[data-tone="info"]::before,
body.inf-console .content-wrapper span.badge[data-tone="info"]:not(.alert span)::before,
body.inf-console .div-main-list td .status[data-tone="info"]::before,
body.inf-console .inf-cx-badge[data-tone="info"]::before,
body.inf-console .inf-bd-chip[data-tone="info"]::before { background: var(--inf-c-info-dot) !important; }
body.inf-console .hd-chip[data-tone="warn"],
body.inf-console .content-wrapper span.badge[data-tone="warn"]:not(.alert span),
body.inf-console .div-main-list td .status[data-tone="warn"],
body.inf-console .inf-cx-badge[data-tone="warn"],
body.inf-console .inf-bd-chip[data-tone="warn"] { color: var(--inf-c-warn) !important; }
body.inf-console .hd-chip[data-tone="warn"]::before,
body.inf-console .content-wrapper span.badge[data-tone="warn"]:not(.alert span)::before,
body.inf-console .div-main-list td .status[data-tone="warn"]::before,
body.inf-console .inf-cx-badge[data-tone="warn"]::before,
body.inf-console .inf-bd-chip[data-tone="warn"]::before { background: var(--inf-c-warn-dot) !important; }
body.inf-console .hd-chip[data-tone="neutral"],
body.inf-console .content-wrapper span.badge[data-tone="neutral"]:not(.alert span),
body.inf-console .div-main-list td .status[data-tone="neutral"],
body.inf-console .inf-cx-badge[data-tone="neutral"],
body.inf-console .inf-bd-chip[data-tone="neutral"] { color: var(--inf-c-neutral) !important; }
body.inf-console .inf-h3-st[data-tone="ok"] { color: var(--inf-c-ok); }
body.inf-console .inf-h3-st[data-tone="ok"] i { background: var(--inf-c-ok-dot); }
body.inf-console .inf-h3-st[data-tone="info"] { color: var(--inf-c-info); }
body.inf-console .inf-h3-st[data-tone="info"] i { background: var(--inf-c-info-dot); }
body.inf-console .inf-h3-st[data-tone="warn"] { color: var(--inf-c-warn); }
body.inf-console .inf-h3-st[data-tone="warn"] i { background: var(--inf-c-warn-dot); }
body.inf-console .hd-chip[data-tone="neutral"]::before,
body.inf-console .content-wrapper span.badge[data-tone="neutral"]:not(.alert span)::before,
body.inf-console .div-main-list td .status[data-tone="neutral"]::before,
body.inf-console .inf-cx-badge[data-tone="neutral"]::before,
body.inf-console .inf-bd-chip[data-tone="neutral"]::before { background: var(--inf-c-neutral-dot) !important; }

/* ------------------------------------------------------------------------------------------- component preview */
.inf-console .inf-c-preview { display: flex; flex-direction: column; gap: 20px; }
.inf-console .inf-c-preview .inf-c-panel { margin-top: 0; }
.inf-console .inf-c-preview .inf-c-mono { white-space: nowrap; }
.inf-console .inf-c-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.inf-console .inf-c-preview-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.inf-console .inf-c-preview-row + .inf-c-preview-row { margin-top: 14px; }
.inf-console .inf-c-preview-note { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--inf-ink-muted); }
.inf-console .inf-c-preview-frame { border: 1px dashed #c5ced2; border-radius: 10px; padding: 20px; background: var(--inf-c-head); }
.inf-console .inf-c-preview-frame .inf-c-panel { background: var(--inf-panel); }
.inf-console .inf-c-preview dl.inf-c-preview-tokens { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.inf-console .inf-c-preview dl.inf-c-preview-tokens dt { font-weight: 500; }
.inf-console .inf-c-preview dl.inf-c-preview-tokens dd { margin: 0; color: var(--inf-ink-muted); }
@media (max-width: 575.98px) {
    .inf-console .inf-c-preview dl.inf-c-preview-tokens { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .inf-console .inf-c-preview dl.inf-c-preview-tokens dd { margin-bottom: 10px; }
}

/* 3CX: the edition is a label, not a state, so it reads as a quiet tag (no dot, no state colour that could be taken
   for "needs a look" or "in progress"); the "Needs attention" figure follows the status rule, never red. */
.inf-console .inf-h3-ed,
.inf-console .inf-h3-ed.is-starter,
.inf-console .inf-h3-ed.is-pro,
.inf-console .inf-h3-ed.is-ai,
.inf-console .inf-h3-ed.is-other { background: var(--inf-field); color: var(--inf-ink); }
.inf-console .inf-h3-ed i { display: none; }
.inf-console .inf-h3-stats > .is-attention b { color: var(--inf-c-warn); }
/* 3CX systems on phones: the state always has its own line under the edition, service and size, so every card reads
   the same way whatever the size of the words before it. */
@media (max-width: 767.98px) {
    .inf-console .table.inf-h3-systems td[data-label="Status"] { flex: 0 0 100%; order: 5; }
}

/* ------------------------------------------------------------------------------------------------ 6. records */
/* A record's page (approved mock-up "TrunkDetail": a SIP or Teams trunk, siptrunks/edit): the page top with the record's
   status pill and facts line, the tabs, then work on the left and the record's properties and money on the right
   (360px), one column below 1200px wide, left then right. */
.inf-console .inf-c-record-top .inf-c-title-row { gap: 8px 14px; }
.inf-console .inf-c-title-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
/* the record's own status beside its title: the dot and the word in a tinted pill (system sheet: beside a title) */
.inf-console .inf-c-status.is-pill {
    height: 28px; padding: 0 12px; box-sizing: border-box; border: 1px solid; border-radius: var(--inf-radius-pill);
    font-size: 13px; line-height: 26px; font-weight: 500; gap: 8px; background: #f0f2f3; border-color: #dde2e5;
}
.inf-console .inf-c-status.is-pill .inf-c-dot { width: 7px; height: 7px; }
.inf-console .inf-c-status.is-pill.is-ok { background: var(--inf-ok-bg); border-color: var(--inf-ok-line); }
.inf-console .inf-c-status.is-pill.is-info { background: #e8f3f5; border-color: #b9dbe1; }
.inf-console .inf-c-status.is-pill.is-warn { background: var(--inf-warn-bg); border-color: var(--inf-warn-line); }
.inf-console .inf-c-pill-sub { font-size: 14px; line-height: 20px; color: var(--inf-ink-muted); }
/* the facts line under a record's title */
.inf-console .inf-c-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 14.5px; line-height: 22px; color: var(--inf-ink-muted); }
.inf-console .inf-c-meta > span { min-width: 0; overflow-wrap: anywhere; }
/* a quieter text link (a panel's own link, "Add one"): regular weight */
.inf-console a.inf-c-link.inf-c-link-quiet { font-weight: 400; }
.inf-console a.inf-c-link.inf-c-link-dark { color: var(--inf-on-dark) !important; text-decoration-color: rgba(246, 247, 247, .4); }
.inf-console a.inf-c-link.inf-c-link-dark:hover { text-decoration-color: var(--inf-on-dark); }
.inf-console a.inf-c-link.inf-c-link-dark:focus-visible { outline-color: var(--inf-on-dark); }

/* The trunk page's columns, every tab: the Overview's grid and the form tabs' grid (infinitel-trunks.css) at 360px. */
.inf-console #tk-overview .inf-cx-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; }
.inf-console .inf-c-record-main, .inf-console .inf-c-record-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.inf-console .inf-c-record-main > .inf-c-panel, .inf-console .inf-c-record-side > .inf-c-panel { margin: 0; }
.inf-console .inf-c-record-side > .inf-c-panel + .inf-c-panel, .inf-console .div-summary .inf-c-panel + .inf-c-panel { margin-top: 0; }
.inf-console .div-summary.is-existing { display: flex; flex-direction: column; gap: 20px; }
/* the tabs sit 24px above both columns, on every tab */
.inf-console .inf-tk-overview-wrap > .tab-pane { padding-top: 0; }
.inf-console #tk-form-block .div-main .tab-content { padding-top: 0; }
.inf-console #tk-form-block .div-sip-trunk > .div-summary { margin-top: 0 !important; }
.inf-console .tk-body > #tk-teams-numbers { margin-top: 0; }
.inf-console .inf-tk-tabs-row .sip-trunk-row { padding-top: 0; }
@media (min-width: 992px) {
    .inf-console .tk-body { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 20px; }
}
/* Below 1200px wide the right-hand column goes under the work, on the form tabs as on the Overview (as below 992px). */
@media (max-width: 1199.98px) {
    .inf-console #tk-overview .inf-cx-grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .inf-console .tk-body { display: block; }
    .inf-console .tk-body > #tk-form-block, .inf-console .tk-body > #tk-form-block > form { display: block; }
    .inf-console .tk-body > #tk-form-block.d-none { display: none !important; }
    .inf-console .tk-body #tk-form-block .div-sip-trunk.div-main { display: flex; }
    .inf-console .tk-body #tk-form-block .div-sip-trunk.div-main > * { flex: 0 0 100%; max-width: 100%; }
    .inf-console .tk-body #tk-form-block .div-sip-trunk.div-main > .sip-trunk-row:first-child { order: 1; }
    .inf-console .tk-body #tk-form-block .div-sip-trunk.div-main > .sip-trunk-row:last-child { order: 2; }
    .inf-console .tk-body #tk-form-block .div-sip-trunk.div-main > .div-summary { order: 3; margin-top: 24px !important; }
    .inf-console .tk-body > #tk-teams-numbers, .inf-console .tk-body > #tk-remove { margin-top: 20px; }
}
@media (max-width: 991.98px) {
    .inf-console #tk-form-block .div-sip-trunk.div-main > .div-summary { margin-top: 24px !important; }
}

/* "Connection." (siptrunks/status-panel, console): the status panel's body unchanged, read as the mock-up's state: a
   40px circle in the state's tone (a tick for the positive state, ! for one that needs a look, a line otherwise),
   the word beside it and the sentence under the word. Today's call figures beneath, when there are any. */
.inf-console .inf-c-connection { container-type: inline-size; }
.inf-console .inf-c-connection #inf-ts-body:has(> .inf-ts-state) { position: relative; padding-left: 54px; min-height: 40px; }
.inf-console .inf-c-connection .inf-ts-state { margin: 0; min-height: 24px; }
.inf-console .inf-c-connection .inf-ts-state::before {
    content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: #f0f2f3 no-repeat center / 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352636c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
}
.inf-console .inf-c-connection .inf-ts-state:has(.is-ok)::before {
    background-color: var(--inf-ok-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317663a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.inf-console .inf-c-connection .inf-ts-state:has(.is-attention)::before {
    background-color: var(--inf-warn-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a4b00' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E");
}
body.inf-console .inf-ts.inf-c-connection .inf-ts-state .inf-ts-badge {
    font-size: 17px !important; line-height: 24px !important; font-weight: 500 !important; color: var(--inf-ink) !important; white-space: normal;
}
body.inf-console .inf-ts.inf-c-connection .inf-ts-state .inf-ts-badge::before { content: none; }
.inf-console .inf-c-connection .inf-ts-message { margin: 2px 0 0; max-width: none; font-size: 14.5px; line-height: 1.5; color: var(--inf-ink-muted); }
.inf-console .inf-c-connection .inf-ts-loading { margin: 0; font-size: 14.5px; line-height: 24px; color: var(--inf-ink-muted); }
.inf-console .inf-c-connection .inf-ts-details { margin-top: 16px; padding-top: 16px; border-top-color: var(--inf-line-soft); gap: 12px 24px; }
.inf-console .inf-c-connection .inf-ts-details dt { margin-bottom: 2px; color: var(--inf-ink-muted); }
.inf-console .inf-c-connection .inf-ts-details dd { font-size: 14.5px; }
.inf-console .inf-c-connection .inf-ts-timeline, .inf-console .inf-c-connection .inf-ts-guide, .inf-console .inf-c-connection .inf-ts-staff { margin-top: 16px; }
.inf-console .inf-c-connection .inf-ts-staff, .inf-console .inf-c-connection .inf-ts-guide { border-radius: var(--inf-c-radius-control); }
.inf-console .inf-c-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; }
.inf-console .inf-c-figures > div { padding: 12px 14px; border-radius: var(--inf-c-radius-control); background: var(--inf-surface); min-width: 0; }
.inf-console .inf-c-figures dt { margin: 0; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--inf-ink-muted); }
.inf-console .inf-c-figures dd { margin: 2px 0 0; font-size: 20px; line-height: 28px; font-weight: 400; color: var(--inf-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inf-console .inf-c-figures-note { margin: 20px 0 0; padding: 12px 14px; border-radius: var(--inf-c-radius-control); background: var(--inf-surface); font-size: 14px; line-height: 20px; color: var(--inf-ink-muted); }
@container (max-width: 559.98px) {
    .inf-console .inf-c-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "Phone system settings." (console): label and value in rows 48px tall, the copy buttons at the end of the row. */
.inf-console .inf-tk-settings { container-type: inline-size; }
.inf-console .inf-tk-settings .inf-cx-hint { margin: -4px 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--inf-ink-muted); max-width: 70ch; text-wrap: pretty; }
.inf-console .inf-tk-settings .inf-tk-creds { margin: 0; }
.inf-console .inf-tk-settings .inf-tk-creds > div {
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; column-gap: 24px; min-height: 48px; padding: 8px 0; box-sizing: border-box;
    border-top: 1px solid var(--inf-line-soft); font-size: 14.5px;
}
.inf-console .inf-tk-settings .inf-tk-creds > div:first-child { border-top: 0; padding-top: 8px; }
.inf-console .inf-tk-settings .inf-tk-creds dt { color: var(--inf-ink-muted); }
.inf-console .inf-tk-settings .inf-tk-creds code { font-size: 14px; }
.inf-console .inf-tk-settings .inf-tk-act .btn {
    height: 32px; padding: 0 12px !important; border-radius: var(--inf-radius-pill) !important; border: 1px solid var(--inf-c-line-control) !important;
    background: var(--inf-panel) !important; color: var(--inf-ink) !important; font-size: 13.5px !important; font-weight: 500; line-height: 30px; box-shadow: none !important;
}
.inf-console .inf-tk-settings .inf-tk-act .btn:hover { border-color: var(--inf-ink) !important; }
.inf-console .inf-tk-settings .inf-cx-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--inf-ink-muted); }
@container (max-width: 519.98px) {
    .inf-console .inf-tk-settings .inf-tk-creds > div { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 10px 0; }
    .inf-console .inf-tk-settings .inf-tk-creds dt { grid-column: 1 / -1; }
}

/* "Recent calls." (siptrunks/_recent-calls): a small table; where the panel is narrow, each call is two lines (when and
   the outcome, then from, to and how long), so nothing scrolls sideways. */
.inf-console .inf-c-recent { container-type: inline-size; }
.inf-console table.inf-c-mini-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; color: var(--inf-ink); }
.inf-console table.inf-c-mini-table th {
    padding: 10px 12px; border-bottom: 1px solid var(--inf-line); text-align: left; white-space: nowrap;
    font-size: 13px; font-weight: 500; color: var(--inf-ink-muted);
}
.inf-console table.inf-c-mini-table td { padding: 12px; border-bottom: 1px solid var(--inf-line-soft); white-space: nowrap; vertical-align: middle; }
.inf-console table.inf-c-mini-table tr > :first-child { padding-left: 0; }
.inf-console table.inf-c-mini-table tr > :last-child { padding-right: 0; }
.inf-console table.inf-c-mini-table tbody tr:last-child td { border-bottom: 0; }
.inf-console table.inf-c-mini-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.inf-console table.inf-c-mini-table .inf-c-mini-from, .inf-console table.inf-c-mini-table .inf-c-mini-to { font-variant-numeric: tabular-nums; }
.inf-console table.inf-c-mini-table .inf-c-mini-k { display: none; }
@container (max-width: 579.98px) {
    .inf-console table.inf-c-mini-table thead { display: none; }
    .inf-console table.inf-c-mini-table, .inf-console table.inf-c-mini-table tbody { display: block; }
    .inf-console table.inf-c-mini-table tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when outcome" "from dur" "to dur";
        column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--inf-line-soft);
    }
    .inf-console table.inf-c-mini-table tbody tr:last-child { border-bottom: 0; }
    .inf-console table.inf-c-mini-table td { display: block; padding: 0 !important; border: 0; white-space: normal; }
    .inf-console table.inf-c-mini-table .inf-c-mini-when { grid-area: when; font-weight: 500; }
    .inf-console table.inf-c-mini-table .inf-c-mini-outcome { grid-area: outcome; justify-self: end; }
    .inf-console table.inf-c-mini-table .inf-c-mini-from { grid-area: from; margin-top: 4px; color: var(--inf-ink-muted); }
    .inf-console table.inf-c-mini-table .inf-c-mini-to { grid-area: to; color: var(--inf-ink-muted); }
    .inf-console table.inf-c-mini-table .inf-c-mini-dur { grid-area: dur; align-self: end; color: var(--inf-ink-muted); }
    .inf-console table.inf-c-mini-table .inf-c-mini-k { display: inline; }
}

/* "Monthly cost." (siptrunks/_console-summary): the one dark panel on the page, for money. */
.inf-console .inf-c-panel.inf-c-dark-panel { background: #05080b; border-color: #05080b; color: var(--inf-on-dark); }
.inf-console .inf-c-dark-panel .inf-c-panel-title { color: var(--inf-on-dark); }
.inf-console .inf-c-cost-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.inf-console .inf-c-cost-figure { font-size: 36px; line-height: 1.1; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.inf-console .inf-c-cost-unit { font-size: 14px; color: var(--inf-on-dark-muted); }
.inf-console .inf-c-cost-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(246, 247, 247, .14); font-size: 14px; line-height: 20px; }
.inf-console .inf-c-cost-line > :first-child { color: var(--inf-on-dark-muted); min-width: 0; overflow-wrap: anywhere; }
.inf-console .inf-c-cost-amount { flex: none; font-variant-numeric: tabular-nums; }
.inf-console .inf-c-cost .inf-c-link-dark { display: inline-block; margin-top: 16px; }

/* "Details." and "Need a hand?" */
.inf-console .inf-c-props { margin: 0; font-size: 14px; line-height: 20px; }
.inf-console .inf-c-props > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--inf-line-soft); }
.inf-console .inf-c-props > div:first-child { border-top: 0; padding-top: 0; }
.inf-console .inf-c-props dt { flex: none; font-weight: 400; color: var(--inf-ink-muted); }
.inf-console .inf-c-props dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; color: var(--inf-ink); }
.inf-console .inf-c-props dd .inf-c-link { font-size: 14px; text-underline-offset: 3px; }
.inf-console .inf-c-help p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--inf-ink-muted); text-wrap: pretty; }
.inf-console .inf-c-help p a { color: var(--inf-ink) !important; text-decoration: underline; text-decoration-color: rgba(7, 19, 28, .3); text-underline-offset: 3px; }
.inf-console .inf-c-help > .inf-c-link { display: inline-block; margin-top: 14px; }
/* Stacked on a tablet or small laptop, the right-hand column's cards sit two across: the cost with the help beneath it,
   and the details beside them. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .inf-console .inf-c-record-side,
    .inf-console #tk-form-block .div-summary.is-existing:has(> .inf-c-cost) {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "cost details" "help details"; grid-template-rows: auto 1fr; gap: 20px; align-items: start;
    }
    .inf-console .inf-c-record-side > .inf-c-cost, .inf-console .div-summary.is-existing > .inf-c-cost { grid-area: cost; }
    .inf-console .inf-c-record-side > .inf-c-details, .inf-console .div-summary.is-existing > .inf-c-details { grid-area: details; }
    .inf-console .inf-c-record-side > .inf-c-help, .inf-console .div-summary.is-existing > .inf-c-help { grid-area: help; }
}
/* the trunk page's other panels (the form tabs' cards, the Teams set-up cards) title like the console's panels: 17/500 */
.inf-console .div-sip-trunk .inf-section-title,
.inf-console #tk-teams-numbers .inf-section-title,
.inf-console #tk-remove .inf-section-title,
.inf-console #tk-overview .inf-cx-card > h2,
.inf-console #tk-overview .inf-cx-card .inf-ts-stage-row h2 { font-size: 17px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }

/* --------------------------------------------------------------------------------------------- 7. the home page */
/* The home page (dashboard/console, approved mock-up "Main"): the greeting with the actions beside it, the figures, then
   the work on the left and the accounts, money and people on the right (360px); one column below 1200px wide. */
.inf-console .hd.hd-console { gap: 20px; }
.inf-console .hd-console .hd-hero { align-items: flex-start; gap: 16px 24px; margin-bottom: 4px; }
.inf-console .hd-console .hd-hero-text { gap: 0; flex: 1 1 320px; min-width: 0; }
.inf-console .hd-console .hd-hero h1 { margin-top: 6px; }
.inf-console .hd-console .hd-lede { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--inf-ink-muted); }
.inf-console .hd-console .hd-lede a { color: inherit !important; text-decoration: none; }
.inf-console .hd-console .hd-lede a:hover { color: var(--inf-ink) !important; text-decoration: underline; text-underline-offset: 4px; }
.inf-console .hd-console .hd-lede a:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: 3px; border-radius: 2px; }
.inf-console .hd-console .hd-hero-acts { flex: none; margin-top: 22px; }
.inf-console .hd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.inf-console .hd-main, .inf-console .hd-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 1199.98px) {
    .inf-console .hd-cols { grid-template-columns: minmax(0, 1fr); }
}
.inf-console .hd-console .hd-card { padding: 22px 24px 24px; }
.inf-console .hd-console .hd-card > h2 + * { margin-top: 12px; }
/* Needs you and Coming up: the state, then what and why, and the action on the right (as approved), where there's room. */
.inf-console .hd-console #hd-needs { container-type: inline-size; }
@container (min-width: 560px) {
    .inf-console .hd-console #hd-needs .hd-item { display: grid; grid-template-columns: 144px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; align-items: start; padding: 18px 0; }
    .inf-console .hd-console #hd-needs .hd-item > div:first-child { grid-column: 1; grid-row: 1 / span 2; }
    .inf-console .hd-console #hd-needs .hd-item > .hd-item-title { grid-column: 2; grid-row: 1; }
    .inf-console .hd-console #hd-needs .hd-item > .hd-item-detail { grid-column: 2; grid-row: 2; }
    .inf-console .hd-console #hd-needs .hd-item > .hd-link { grid-column: 3; grid-row: 1 / span 2; align-self: center; padding: 0; white-space: nowrap; }
}
.inf-console .hd-console .hd-item-title { font-size: 15px; }
.inf-console .hd-console .hd-item-detail { font-size: 14px; line-height: 1.55; }
.inf-console .hd-console .hd-link { font-size: 14px; font-weight: 500; text-decoration-color: rgba(7, 19, 28, .3) !important; }
/* Recent activity: what happened, and when on the right */
.inf-console .hd-console .hd-activity { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; font-size: 14px; }
.inf-console .hd-console .hd-activity .hd-when { order: 2; text-align: right; padding-top: 0; }
/* Your customers and Partners: a compact list, each with a summary line and its status word */
.inf-console .hd-compact .hd-item { gap: 2px; padding: 14px 0; }
.inf-console .hd-compact .hd-item-top { align-items: baseline; gap: 4px 12px; }
.inf-console .hd-compact .hd-item-title { font-size: 15px; font-weight: 500; text-decoration: none; }
.inf-console .hd-compact a.hd-item-title:hover, .inf-console .hd-compact .hd-switch.hd-item-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.inf-console .hd-compact .hd-item-detail { font-size: 13px; line-height: 1.45; }
.inf-console .hd-compact .inf-c-status { font-size: 13px; line-height: 20px; white-space: normal; justify-content: flex-end; text-align: right; }
.inf-console .hd-compact .inf-c-status .inf-c-dot { align-self: center; }
.inf-console .hd-compact .hd-head .hd-link { padding: 0; }
/* the right-hand column's cards: the billing panel stacks its two halves */
@media (min-width: 1200px) { .inf-console .hd-side .hd-billing { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.inf-console .hd-side .hd-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The partner or account manager, on the dark ground (the earlier card's words and actions). */
.inf-console .hd-am-dark { border-radius: var(--inf-c-radius-panel); padding: 22px 24px 24px; background: #05080b; color: var(--inf-on-dark); }
.inf-console .hd-am-dark h2 { margin: 0 0 16px; color: var(--inf-on-dark); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.inf-console .hd-am-dark .hd-am-who { display: flex; align-items: center; gap: 14px; }
.inf-console .hd-am-dark .inf-am-photo.is-lg { width: 44px; height: 44px; font-size: 14px; }
.inf-console .hd-am-dark .hd-am-name { margin: 0; font-size: 15px; font-weight: 500; color: var(--inf-on-dark); }
.inf-console .hd-am-dark .hd-am-role { margin: 1px 0 0; font-size: 13.5px; color: var(--inf-on-dark-muted); }
.inf-console .hd-am-dark .hd-am-blurb { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--inf-on-dark-muted); text-wrap: pretty; }
.inf-console .hd-am-dark .hd-am-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.inf-console .hd-am-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; box-sizing: border-box;
    border-radius: var(--inf-radius-pill); border: 1px solid rgba(246, 247, 247, .4); color: var(--inf-on-dark) !important;
    font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none !important;
}
.inf-console .hd-am-btn:hover { border-color: var(--inf-on-dark); }
.inf-console .hd-am-btn.is-light { background: var(--inf-on-dark); border-color: var(--inf-on-dark); color: #05080b !important; }
.inf-console .hd-am-btn.is-light:hover { background: #fff; }
.inf-console .hd-am-btn:focus-visible { outline: 2px solid var(--inf-teal-light); outline-offset: 2px; }
.inf-console .hd-am-dark .hd-am-foot { margin: 18px 0 0; padding: 0; border: 0; font-size: 13px; line-height: 1.55; color: var(--inf-on-dark-muted); }
.inf-console .hd-am-dark .hd-am-foot a { color: var(--inf-on-dark) !important; text-decoration: underline; text-decoration-color: rgba(246, 247, 247, .4); text-underline-offset: 3px; }
@media (max-width: 767.98px) {
    .inf-console .hd-console .hd-hero-acts { width: 100%; margin-top: 4px; }
    /* the primary with only the ⋯ menu beside it (a customer's Buy numbers): one row, the menu at its end */
    .inf-console .inf-c-actions:not(:has(> .inf-c-btn:not(.is-primary))) > .inf-c-btn.is-primary { flex: 1 1 auto; }
    .inf-console .hd-console .hd-card, .inf-console .hd-am-dark { padding: 18px 16px 20px; }
    .inf-console .hd-am-dark .hd-am-btn { flex: 1 1 auto; }
}
/* a figure's note that needs a look: the amber dot and the words, as every status (the triangle is the earlier look's) */
.inf-console .hd-console .hd-note-warn { gap: 8px; font-weight: 400; color: var(--inf-c-warn); }
.inf-console .hd-console .hd-note-warn svg { display: none; }
.inf-console .hd-console .hd-note-warn::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--inf-c-warn-dot); }
.inf-console .hd-side .hd-billing .hd-link-row.hd-end { padding-top: 2px; }
.inf-console .hd-side .hd-billing .hd-link-row .hd-link { padding: 4px 0; }
/* a card's closing note sits as close under its list as the list's own rows are apart */
.inf-console .hd-console .hd-rows + .hd-quiet.hd-end { padding-top: 0; }
/* The figures: every row full, whatever the width and however many there are (never an empty, shaded cell): four, five
   or six across where they fit; on a tablet five read three then two, six read three and three; two across on a phone,
   the last one full width when it is on its own. */
.inf-console .hd.hd-console { container-type: inline-size; }
.inf-console .hd-console .hd-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.inf-console .hd-console .hd-stats > .hd-stat { grid-column: span 2; }
.inf-console .hd-console .hd-stats.hd-stats-n5 > .hd-stat:nth-child(n+4) { grid-column: span 3; }
.inf-console .hd-console .hd-stats.hd-stats-n2 > .hd-stat { grid-column: span 3; }
.inf-console .hd-console .hd-stats.hd-stats-n1 > .hd-stat { grid-column: 1 / -1; }
@container (min-width: 600px) {
    .inf-console .hd-console .hd-stats.hd-stats-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .inf-console .hd-console .hd-stats.hd-stats-n4 > .hd-stat:nth-child(n) { grid-column: auto; }
}
@container (min-width: 820px) {
    .inf-console .hd-console .hd-stats.hd-stats-n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .inf-console .hd-console .hd-stats.hd-stats-n5 > .hd-stat:nth-child(n) { grid-column: auto; }
}
@container (min-width: 960px) {
    .inf-console .hd-console .hd-stats.hd-stats-n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .inf-console .hd-console .hd-stats.hd-stats-n6 > .hd-stat { grid-column: auto; }
}
@container (max-width: 599.98px) {
    .inf-console .hd-console .hd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inf-console .hd-console .hd-stats:is([class*="hd-stats-n"]) > .hd-stat:nth-child(n) { grid-column: auto; }
    .inf-console .hd-console .hd-stats:is([class*="hd-stats-n"]) > .hd-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------------------------- 8. one tab style */
/* Every tab bar in the console look is the console's underline tabs (x-console.tabs): the portal's contained bar
   (.inf-tabbar: 3CX, a trunk's page, a hosting server, a connectivity service), the underline tabs (.nav-tabs:
   connectivity, porting, People, Profile, forms) and SMS's pills. Same links, buttons and behaviour; one look:
   14.5px medium words, the open tab in ink with a 2px line, counts in quiet figures, no icons, 28px apart, scrolling
   sideways on a phone with a fade while more tabs follow (public/js/infinitel-portal.js). */
.inf-console .inf-tabbar,
.inf-console .nav-pills.inf-sms-tabs {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 28px; margin: 0 0 24px; padding: 0 !important; list-style: none;
    background: transparent; border: 0 !important; border-bottom: 1px solid var(--inf-line) !important; border-radius: 0; overflow-x: auto; scrollbar-width: none;
}
.inf-console .nav-pills.inf-sms-tabs { margin-top: 24px; }
.inf-console .nav-pills.inf-sms-tabs::-webkit-scrollbar { display: none; }
.inf-console .inf-tabbar .inf-tab,
.inf-console .div-main .inf-tabbar .nav-item .nav-link,
.inf-console .div-sip-trunk .inf-tabbar .nav-item .nav-link,
.inf-console .inf-tabbar .nav-link,
body.inf-console .nav-pills.inf-sms-tabs .nav-link {
    display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 12px 0 !important; margin: 0 0 -1px !important;
    border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important;
    color: var(--inf-ink-muted) !important; font-family: inherit; font-size: 14.5px !important; font-weight: 500 !important; line-height: 20px; white-space: nowrap;
    text-decoration: none !important; box-shadow: none !important;
}
.inf-console .inf-tabbar .inf-tab:hover,
.inf-console .div-main .inf-tabbar .nav-item .nav-link:hover,
.inf-console .inf-tabbar .nav-link:hover,
body.inf-console .nav-pills.inf-sms-tabs .nav-link:hover { color: var(--inf-ink) !important; background: transparent !important; }
.inf-console .inf-tabbar .inf-tab.is-active,
.inf-console .inf-tabbar .inf-tab[aria-current="page"],
.inf-console .inf-tabbar .inf-tab[aria-selected="true"],
.inf-console .div-main .inf-tabbar .nav-item .nav-link.active,
.inf-console .div-sip-trunk .inf-tabbar .nav-item .nav-link.active,
.inf-console .inf-tabbar .nav-link.active,
body.inf-console .nav-pills.inf-sms-tabs .nav-link.active {
    color: var(--inf-ink) !important; background: transparent !important; border-bottom-color: var(--inf-ink) !important;
}
.inf-console .inf-tabbar .inf-tab:focus-visible,
.inf-console .inf-tabbar .nav-link:focus-visible,
body.inf-console .nav-pills.inf-sms-tabs .nav-link:focus-visible { outline: 2px solid var(--inf-ink) !important; outline-offset: -2px; border-radius: 4px !important; }
.inf-console .inf-tabbar .inf-tab > i,
.inf-console .inf-tabbar .nav-link > i { display: none; }
.inf-console .inf-tabbar > li { display: flex; }
/* counts: quiet figures after the word, as on the console lists */
.inf-console .inf-tabbar .inf-tabbar-n,
.inf-console .inf-tabbar .inf-tab.is-active .inf-tabbar-n,
.inf-console .inf-tabbar .nav-link.active .inf-tabbar-n,
.inf-console .nav-tabs .inf-pt-count {
    min-width: 0; height: auto; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--inf-ink-soft);
    font-size: 14.5px; line-height: 20px; font-weight: 400; font-variant-numeric: tabular-nums;
}
/* the staff tabs after a line, under their quiet label */
.inf-console .inf-tabbar .inf-tabbar-div { margin: 12px -6px; }
.inf-console .inf-tabbar .inf-tabbar-label { gap: 5px; padding: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--inf-ink-soft); margin-right: -10px; }
.inf-console .inf-tabbar .inf-tabbar-label > i { font-size: 11px; }
/* a list page's tabs above its panel (porting, connectivity): the panel starts 24px below them, as on every page */
.inf-console .div-main-list:has(> [class*="col-"] > .nav-tabs:last-child) + .inf-cx-card { margin-top: 24px; }
/* the underline tabs: the same words, weight and spacing */
.inf-console .nav-tabs { gap: 28px; border-bottom: 1px solid var(--inf-line) !important; }
body.inf-console .content-wrapper .nav-tabs .nav-item .nav-link,
body.inf-console .content-wrapper .div-main .nav-tabs .nav-item a.nav-link {
    padding: 12px 0 !important; font-size: 14.5px !important; font-weight: 500 !important; line-height: 20px;
    color: var(--inf-ink-muted) !important; border-bottom: 2px solid transparent !important;
}
body.inf-console .content-wrapper .nav-tabs .nav-item .nav-link:hover { color: var(--inf-ink) !important; }
body.inf-console .content-wrapper .nav-tabs .nav-item .nav-link.active,
body.inf-console .content-wrapper .nav-tabs .nav-item.show .nav-link,
body.inf-console .content-wrapper .div-main .nav-tabs .nav-item a.nav-link.active { color: var(--inf-ink) !important; font-weight: 500 !important; border-bottom-color: var(--inf-ink) !important; }
body.inf-console .content-wrapper .nav-tabs .nav-item .nav-link:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: -2px; border-radius: 4px !important; }
.inf-console .div-main-list .nav-tabs > .nav-item { margin-right: 0; }
/* on a phone: one strip that scrolls sideways (never one tab per line), fading while more tabs follow */
@media (max-width: 767.98px) {
    .inf-console .inf-tabbar, .inf-console .nav-pills.inf-sms-tabs { gap: 24px; margin-bottom: 20px; }
    .inf-console .nav-tabs, .inf-console .div-main-list .nav-tabs { flex-wrap: nowrap !important; gap: 24px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
    .inf-console .div-main-list .nav-tabs > .nav-item { flex: 0 0 auto; flex-basis: auto; }
    body.inf-console .content-wrapper .div-main-list .nav-tabs > .nav-item > .nav-link { display: inline-flex !important; margin-bottom: 0 !important; white-space: nowrap; }
    .inf-console .inf-tabbar .inf-tab, .inf-console .div-main .inf-tabbar .nav-item .nav-link { font-size: 14.5px !important; padding: 12px 0 !important; }
    .inf-console .nav-tabs.has-more, .inf-console .nav-pills.inf-sms-tabs.has-more { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
    .inf-console .nav-tabs.has-less, .inf-console .nav-pills.inf-sms-tabs.has-less { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
    .inf-console .nav-tabs.has-less.has-more, .inf-console .nav-pills.inf-sms-tabs.has-less.has-more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
}
/* A list's segmented filters with counts are its tabs too: 3CX's systems by edition (.inf-h3-seg) and Teams users by
   number (.inf-tu-filter) read as underline tabs across the panel, the list's other filters beneath; a panel's period
   switch beside its title (.inf-sv-seg, a hosting server's monitoring) reads as underline tabs without the long line,
   as it shares the title's row. */
.inf-console .inf-h3-seg,
.inf-console .inf-tu-filter {
    display: flex; flex: 1 1 100%; flex-wrap: nowrap; gap: 28px; padding: 0; margin: 0 0 6px; background: transparent; border-radius: 0;
    border-bottom: 1px solid var(--inf-line); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none;
}
.inf-console .inf-h3-seg::-webkit-scrollbar, .inf-console .inf-tu-filter::-webkit-scrollbar { display: none; }
.inf-console .inf-sv-seg { display: inline-flex; gap: 20px; padding: 0; background: transparent; border-radius: 0; }
.inf-console .inf-h3-seg a,
.inf-console .inf-tu-filter button,
.inf-console .inf-sv-seg a {
    display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 12px 0; margin: 0 0 -1px; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; background: transparent; box-shadow: none; font-family: inherit; font-size: 14.5px; line-height: 20px; font-weight: 500;
    color: var(--inf-ink-muted); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.inf-console .inf-sv-seg a { padding: 6px 0; margin: 0; }
.inf-console .inf-h3-seg a:hover, .inf-console .inf-tu-filter button:hover, .inf-console .inf-sv-seg a:hover { color: var(--inf-ink); }
.inf-console .inf-h3-seg a.is-on,
.inf-console .inf-tu-filter button[aria-pressed="true"],
.inf-console .inf-sv-seg a.is-on { background: transparent; box-shadow: none; color: var(--inf-ink); border-bottom-color: var(--inf-ink); }
.inf-console .inf-h3-seg a:focus-visible, .inf-console .inf-tu-filter button:focus-visible, .inf-console .inf-sv-seg a:focus-visible { outline: 2px solid var(--inf-ink); outline-offset: -2px; border-radius: 4px; }
.inf-console .inf-h3-seg a span, .inf-console .inf-h3-seg a.is-on span, .inf-console .inf-tu-filter button span {
    margin: 0; font-size: 14.5px; font-weight: 400; color: var(--inf-ink-soft); font-variant-numeric: tabular-nums;
}
.inf-console .inf-tu-tools { row-gap: 14px; }
@media (max-width: 767.98px) {
    .inf-console .inf-h3-seg, .inf-console .inf-tu-filter { gap: 24px; }
    .inf-console .inf-h3-seg.has-more, .inf-console .inf-tu-filter.has-more { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
    .inf-console .inf-h3-seg.has-less, .inf-console .inf-tu-filter.has-less { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%); mask-image: linear-gradient(90deg, transparent, #000 18%); }
    .inf-console .inf-h3-seg.has-less.has-more, .inf-console .inf-tu-filter.has-less.has-more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
}