:root {
    --bg: #eef2f8;
    --panel: #ffffff;
    --text: #141c2d;
    --muted: #53617d;
    --primary: #1769d6;
    --primary-hover: #1257b0;
    --primary-soft: #dceaff;
    --border: #cfd8e6;
    --shadow: 0 10px 26px rgba(20, 33, 61, 0.10);
    --success: #0d9f6e;
    --success-soft: #d8f5eb;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --font-display: "Inter", system-ui, sans-serif;
}

body.dark {
    --bg: #0b1020;
    --panel: #141b2e;
    --text: #e7ebf7;
    --muted: #98a4c0;
    --primary: #6ea8ff;
    --primary-hover: #8bb8ff;
    --primary-soft: #1a2744;
    --border: #29314a;
    --shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    --success: #34d399;
    --success-soft: #123528;
    --warning: #fbbf24;
    --warning-soft: #3b2f12;
    --danger: #f87171;
    --danger-soft: #3b1c1c;
}

* { box-sizing: border-box; }
html {
    font-size: 88%;
}
body {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: .96rem;
    line-height: 1.45;
    background: var(--bg);
    color: var(--text);
}

.app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--panel);
    border-right: 1px solid var(--border);
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
}
.sidebar-main {
    display: block;
}
.sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
}
.menu-footer-link {
    text-decoration: none;
    color: var(--text);
    padding: 11px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu-footer-link:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.brand {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 22px;
}
.brand-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #27ce9a, #2a8bff);
}
.brand small { display: block; color: var(--muted); }

.menu { display: grid; gap: 6px; }
.menu a {
    text-decoration: none;
    color: var(--text);
    padding: 10px 11px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu a:hover, .menu a.active {
    background: var(--primary-soft);
    color: var(--primary);
}
.menu-inline-form {
    margin: 0;
}
.menu-btn-link {
    text-decoration: none;
    color: var(--text);
    padding: 10px 11px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.menu-btn-link:hover,
.menu-btn-link.is-active {
    background: var(--primary-soft);
    color: var(--primary);
}
.menu-btn-link--ready.is-active {
    background: color-mix(in srgb, #16a34a 12%, var(--panel));
    color: var(--text);
}
.menu-btn-link:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.operator-ready-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, #16a34a 10%, var(--panel));
    border: 1px solid color-mix(in srgb, #16a34a 25%, var(--border));
    font-size: .82rem;
    color: var(--text);
}
.menu-group {
    border-radius: 12px;
}
.menu-group summary {
    list-style: none;
    cursor: pointer;
    color: var(--text);
    padding: 10px 11px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}
.menu-group summary::-webkit-details-marker {
    display: none;
}
.menu-group summary:hover,
.menu-group[open] > summary,
.menu-group.is-section-active > summary {
    background: var(--primary-soft);
    color: var(--primary);
}
.menu-group.is-section-active > summary {
    font-weight: 600;
}
.menu-group .chevron {
    margin-left: auto;
    transition: transform .2s ease;
}
.menu-group[open] .chevron {
    transform: rotate(180deg);
}
.submenu {
    display: grid;
    gap: 4px;
    margin-top: 4px;
    padding-left: 12px;
}
.submenu a {
    font-size: .9rem;
    padding: 8px 10px;
}

.app-shell.nav-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}
.app-shell.nav-top .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}
.app-shell.nav-top .sidebar-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
.app-shell.nav-top .brand {
    margin: 0;
    padding-right: 10px;
    border-right: 1px solid var(--border);
}
.app-shell.nav-top .menu {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: visible;
    padding-bottom: 2px;
}
.app-shell.nav-top .menu > * {
    position: relative;
}
.app-shell.nav-top .menu > * + * {
    margin-left: 4px;
    padding-left: 10px;
}
.app-shell.nav-top .menu > * + *::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--border);
}
.app-shell.nav-top .menu > a,
.app-shell.nav-top .menu-group > summary,
.app-shell.nav-top .menu > .menu-ready-item,
.app-shell.nav-top .menu-inline-form button {
    border-radius: 10px;
    padding: 8px 10px;
    white-space: nowrap;
    font-size: .88rem;
}
.app-shell.nav-top .menu > .menu-inline-form {
    display: flex;
    align-items: center;
    position: relative;
}
.app-shell.nav-top .menu > .menu-ready-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 4px 10px;
    border-radius: 10px;
}
.app-shell.nav-top .menu > .menu-ready-item.is-active {
    background: color-mix(in srgb, #16a34a 12%, var(--panel));
}
.menu-ready-item__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    padding: 4px 0;
    cursor: pointer;
    white-space: nowrap;
}
.menu-ready-item__label:hover:not(:disabled) {
    color: var(--primary);
}
.menu-ready-item__label:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.menu-ready-item__switch {
    flex-shrink: 0;
}
.menu-ready-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 12px;
}
.menu-ready-item.is-active {
    background: color-mix(in srgb, #16a34a 10%, var(--panel));
}
.menu-ready-item--muted .menu-ready-item__label {
    color: var(--muted);
}
.menu-ready-item--muted .menu-ready-item__label:hover {
    color: var(--primary);
}
.app-shell.nav-top .menu-inline-form button {
    width: auto;
    text-align: center;
}
.app-shell.nav-top .menu > a.active,
.app-shell.nav-top .menu-group.is-section-active > summary {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}
.app-shell.nav-top .menu-group {
    position: relative;
}
.app-shell.nav-top .menu-group .submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 70;
    min-width: 240px;
    background: #f7f7f8;
    border: 1px solid #bfc3ca;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(19, 28, 45, 0.16);
    padding: 8px 0;
    margin-top: 0;
    gap: 0;
    display: none;
    overflow: visible;
}
.app-shell.nav-top .menu-group .submenu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 18px;
    width: 12px;
    height: 12px;
    background: #f7f7f8;
    border-top: 1px solid #bfc3ca;
    border-left: 1px solid #bfc3ca;
    transform: rotate(45deg);
}
.app-shell.nav-top .menu-group[open] .submenu {
    display: grid;
}
.app-shell.nav-top .submenu a {
    position: relative;
    padding: 8px 34px 8px 18px;
    white-space: nowrap;
    color: #303030;
    border-radius: 0;
    font-size: .88rem;
    line-height: 1.45;
}
.app-shell.nav-top .submenu a:hover,
.app-shell.nav-top .submenu a.active {
    background: #eceef2;
    color: #1f1f1f;
}
.app-shell.nav-top .submenu-cascade {
    position: relative;
}
.app-shell.nav-top .submenu-cascade-trigger {
    position: relative;
    display: block;
    padding: 8px 34px 8px 18px;
    white-space: nowrap;
    color: #303030;
    font-size: .88rem;
    cursor: default;
}
.app-shell.nav-top .submenu-cascade-trigger::after {
    content: "▸";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-52%);
    font-size: .88rem;
    color: #a1a6ad;
}
.app-shell.nav-top .submenu-cascade-menu {
    position: absolute;
    top: -8px;
    left: calc(100% - 6px);
    min-width: 200px;
    background: #f7f7f8;
    border: 1px solid #bfc3ca;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(19, 28, 45, 0.16);
    padding: 8px 0;
    display: none;
    z-index: 72;
}
.app-shell.nav-top .submenu-cascade:hover .submenu-cascade-menu,
.app-shell.nav-top .submenu-cascade:focus-within .submenu-cascade-menu,
.app-shell.nav-top .submenu-cascade.is-active .submenu-cascade-menu {
    display: block;
}
.app-shell.nav-top .submenu-cascade:hover .submenu-cascade-trigger,
.app-shell.nav-top .submenu-cascade.is-active .submenu-cascade-trigger {
    background: #eceef2;
    color: #1f1f1f;
}
.app-shell.nav-top .submenu-cascade-menu a {
    display: block;
}
.app-shell.nav-top .submenu-cascade-menu a::after {
    content: none;
}
.app-shell.nav-top .menu-group .chevron {
    margin-left: 2px;
}
.app-shell.nav-top .sidebar-footer {
    margin-top: 0;
    padding-top: 0;
}
.app-shell.nav-top .menu-footer-link {
    padding: 8px 10px;
    white-space: nowrap;
    font-size: .88rem;
}

.content { padding: 20px; }
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.topbar h1 { margin: 0; font-size: 1.55rem; }
.topbar p { margin: 6px 0 0; color: var(--muted); }
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--muted);
    background: var(--panel);
}
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #d93025;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}
.status-dot.online {
    background: #2fbf71;
    box-shadow: 0 0 0 3px rgba(47, 191, 113, 0.14);
}
.status-dot.paused {
    background: #f39c12;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.14);
}
.status-dot.offline {
    background: #d93025;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--panel);
}
.status-pill.online {
    color: #17894f;
    background: color-mix(in srgb, #2fbf71 12%, var(--panel));
    border-color: color-mix(in srgb, #2fbf71 28%, var(--border));
}
.status-pill.paused {
    color: #c97b00;
    background: color-mix(in srgb, #f39c12 12%, var(--panel));
    border-color: color-mix(in srgb, #f39c12 28%, var(--border));
}
.status-pill.offline {
    color: #c0392b;
    background: color-mix(in srgb, #d93025 10%, var(--panel));
    border-color: color-mix(in srgb, #d93025 24%, var(--border));
}

.grid { display: grid; gap: 14px; margin-bottom: 16px; }
.kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.two-col { grid-template-columns: 2fr 1fr; }
.channels-equal-cols { grid-template-columns: 1fr 1fr; }

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px;
    box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }

.kpi span { color: var(--muted); display: flex; gap: 8px; align-items: center; }
.kpi h2 { margin: 8px 0 0; font-size: 2rem; }
.dashboard-view-controls {
    margin-bottom: 10px;
    padding: 8px 12px;
}
.dashboard-view-controls-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.dashboard-view-title {
    margin-top: 0;
    font-size: .9rem;
}
.dashboard-view-radio-group {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 100%;
}
.dashboard-view-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    background: color-mix(in srgb, var(--panel) 88%, var(--primary-soft));
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.dashboard-view-option:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.dashboard-view-option input {
    margin: 0;
}
.dashboard-view-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 55%, var(--panel));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
.dashboard-view-option span {
    font-size: .78rem;
    font-weight: 600;
}
.dashboard-view-option:has(input:checked) span {
    color: var(--primary);
}
.dashboard-chart-card {
    min-height: 150px;
    padding: 8px 10px;
}
.dashboard-mini-charts-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.dashboard-mini-chart {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 8px;
    background: color-mix(in srgb, var(--panel) 94%, var(--primary-soft));
}
.dashboard-mini-chart.active {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}
.dashboard-mini-chart h4 {
    margin: 0 0 4px;
    font-size: .78rem;
    color: var(--muted);
    font-weight: 700;
}
.dashboard-mini-chart canvas {
    width: 100% !important;
    height: 80px !important;
}

.btn {
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    padding: 10px 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(42, 139, 255, 0.25);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover {
    filter: saturate(1.05);
    transform: translateY(-1px);
}
.btn.ghost {
    background: color-mix(in srgb, var(--primary-soft) 58%, var(--panel));
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(20, 33, 61, 0.08);
}
.btn.ghost:hover {
    background: color-mix(in srgb, var(--primary-soft) 76%, var(--panel));
}
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.channels-page {
    display: grid;
    gap: 16px;
}
.channels-page > section {
    margin: 0;
}
.channels-page .card h3 {
    margin-bottom: 12px;
}
.channels-page .quick-actions {
    gap: 12px;
}
.channels-page .quick-actions .btn {
    min-width: 96px;
    justify-content: center;
}
.channels-page .channel-pill {
    border-width: 1px;
    font-weight: 500;
}
.channels-page .channel-outbound {
    background: #eef5ff;
    border-color: #cfe0ff;
    color: #4a6fb0;
}
.channels-page .channel-inbound {
    background: #f6f0ff;
    border-color: #dbc9f8;
    color: #6c46a1;
}
.channels-page .channel-email {
    background: #fff2e2;
    border-color: #edcfab;
    color: #8b5c2d;
}
.channels-page .channel-whatsapp {
    background: #eaf8ec;
    border-color: #bfe0c8;
    color: #2f7646;
}
.channels-page .channel-pill.active {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
    filter: saturate(1.2);
    transform: translateY(-1px);
}
.channels-page .form-grid {
    margin-top: 10px;
}
.channels-page.channel-tab-outbound > section:not(:first-child).card,
.channels-page.channel-tab-outbound > section:not(:first-child) .card {
    background: #f3f8ff;
    border-color: #c9dcfb;
}
.channels-page.channel-tab-inbound > section:not(:first-child).card,
.channels-page.channel-tab-inbound > section:not(:first-child) .card {
    background: #f8f3ff;
    border-color: #d8c7f3;
}
.channels-page.channel-tab-email > section:not(:first-child).card,
.channels-page.channel-tab-email > section:not(:first-child) .card {
    background: #fff3e5;
    border-color: #e3c7a2;
}
.channels-page.channel-tab-whatsapp > section:not(:first-child).card,
.channels-page.channel-tab-whatsapp > section:not(:first-child) .card {
    background: #ebf8ec;
    border-color: #b6dbbf;
}
.channels-page .table-wrap table th,
.channels-page .table-wrap table td {
    padding-top: 11px;
    padding-bottom: 11px;
}

.badge-row { display: flex; gap: 8px; margin-top: 14px; }
.badge {
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 600;
    font-size: .8rem;
}

.table-wrap { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    text-align: left;
    border-bottom: 1px solid var(--border);
    padding: 12px 8px;
}
th { color: var(--muted); font-size: .82rem; letter-spacing: .02em; }
th { font-weight: 700; }
tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--bg) 72%, #ffffff);
}
body.dark tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--panel) 86%, #ffffff);
}
.text-center {
    text-align: center;
}
.outcomes-standard-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    max-height: 62vh;
}
.outcomes-standard-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--panel) 92%, var(--primary-soft));
}
.outcomes-standard-table th,
.outcomes-standard-table td {
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
    font-size: .86rem;
}
.outcomes-standard-table .outcome-name-col {
    min-width: 280px;
    white-space: normal;
}
.outcomes-campaign-toolbar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 40%, var(--panel)) 0%, var(--panel) 100%);
}
.outcomes-editor-layout {
    grid-template-columns: 1fr;
}
.outcomes-filter-form {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-soft) 20%, var(--panel));
}
.outcomes-campaign-create {
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
}
.outcome-create-form {
    background: color-mix(in srgb, var(--primary-soft) 18%, var(--panel));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
}
.outcome-create-form--compact {
    gap: 8px;
    padding: 10px;
}
.outcome-create-form--compact label {
    font-size: .8rem;
    gap: 4px;
}
.outcome-create-form--compact input,
.outcome-create-form--compact select {
    padding: 8px 9px;
    font-size: .84rem;
    min-height: 36px;
}
.outcome-create-form .form-actions .btn {
    box-shadow: 0 6px 14px rgba(52, 132, 246, 0.2);
}
.outcome-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    padding: 8px 10px;
    color: var(--text);
}
.outcome-create-form--compact .outcome-flag {
    padding: 7px 8px;
    min-height: 34px;
}
.outcome-flag input {
    width: auto;
}
.outcomes-campaign-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    max-height: 58vh;
}
.outcomes-campaign-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--panel) 90%, var(--primary-soft));
}
.outcomes-campaign-table th,
.outcomes-campaign-table td {
    font-size: .84rem;
    padding-top: 9px;
    padding-bottom: 9px;
    vertical-align: middle;
}
.outcomes-campaign-table input[type="text"],
.outcomes-campaign-table input[type="number"],
.outcomes-campaign-table select {
    min-width: 90px;
    padding: 7px 8px;
    font-size: .82rem;
}
.outcomes-campaign-list .table-actions .btn {
    min-width: 92px;
    justify-content: center;
}
.outcomes-campaign-list .table-actions {
    gap: 6px;
}
.outcomes-campaign-list th:first-child,
.outcomes-campaign-list td:first-child {
    min-width: 170px;
}
.bool-pill {
    display: inline-block;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
}
.bool-pill.yes {
    background: color-mix(in srgb, #1f9d55 20%, transparent);
    color: #187945;
}
.bool-pill.no {
    background: color-mix(in srgb, #c0392b 16%, transparent);
    color: #9f2f23;
}
body.dark .bool-pill.yes {
    color: #7fdca9;
}
body.dark .bool-pill.no {
    color: #ffb1a7;
}

.form-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.filter-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}
.live-filters-grid {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary-soft) 25%, var(--panel));
    margin-bottom: 14px;
}
.live-agent-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
label { font-size: .85rem; color: var(--muted); display: grid; gap: 6px; }
label { font-weight: 600; }
.inline-checkbox-label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 40px;
    padding-top: 18px;
    color: var(--text);
}
.inline-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}
input {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    border-radius: 10px;
    padding: 10px;
}
input::placeholder {
    color: color-mix(in srgb, var(--muted) 78%, #ffffff);
}
select {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    border-radius: 10px;
    padding: 10px;
}
textarea {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    border-radius: 10px;
    padding: 10px;
    resize: vertical;
}
textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 78%, #ffffff);
}
input[readonly],
textarea[readonly],
select:disabled,
input:disabled,
textarea:disabled {
    background: color-mix(in srgb, var(--panel) 70%, #ffffff);
    border-color: color-mix(in srgb, var(--border) 70%, #ffffff);
    color: color-mix(in srgb, var(--text) 78%, #ffffff);
    opacity: 1;
}
input:focus,
select:focus,
textarea:focus,
.btn:focus-visible,
.menu a:focus-visible,
.menu-group summary:focus-visible,
.menu-footer-link:focus-visible,
.contacts-tab-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 70%, #ffffff);
    outline-offset: 1px;
}
.form-actions { grid-column: 1 / -1; }
.half-row { grid-column: span 1; }
.form-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}
.form-pair-full {
    grid-column: 1 / -1;
}
.form-stacked-pairs {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.form-stacked-pairs .form-pair {
    width: 100%;
}
.form-stacked-pairs .field-hint {
    display: block;
    min-height: 1.2rem;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--muted);
}
.form-stacked-pairs .field-hint--empty {
    visibility: hidden;
    user-select: none;
}
.form-stacked-pairs .form-actions {
    margin-top: 4px;
}
.compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-filters-card article {
    width: 100%;
}
.user-filters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.inline-form {
    margin: 0;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.inline-form select[multiple] {
    min-width: 220px;
    min-height: 92px;
}
.inline-password-input {
    min-width: 120px;
    max-width: 140px;
    padding: 6px 8px;
}
.password-reset-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
}
.password-reset-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
}
.password-reset-modal__panel {
    position: relative;
    max-width: 520px;
    width: calc(100% - 24px);
    margin: 10vh auto 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.22);
    padding: 16px;
}
.campaign-config-form {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: center;
}
.campaign-channel-table {
    table-layout: fixed;
}
.campaign-channel-table__col-name { width: 26%; }
.campaign-channel-table__col-cli { width: 27%; }
.campaign-channel-table__col-did { width: 27%; }
.campaign-channel-table__col-action { width: 20%; }
.campaign-channel-table th,
.campaign-channel-table td {
    vertical-align: middle;
}
.campaign-channel-table__name {
    font-weight: 600;
}
.campaign-channel-table__select {
    width: 100%;
    min-width: 0;
}
.campaign-channel-table__action-head,
.campaign-channel-table__action {
    text-align: right;
    white-space: nowrap;
}
.campaign-channel-form-hidden {
    display: none;
}
.campaign-save-btn {
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 6px 18px rgba(42, 139, 255, 0.22);
}
.inline-reset {
    width: 100%;
}
.inline-reset input {
    min-width: 150px;
}
.table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
th.table-col-actions,
td.table-col-actions {
    text-align: center;
}
td.table-col-actions .table-actions {
    justify-content: center;
}
.json-preview {
    margin: 0;
    max-width: 260px;
    max-height: 140px;
    overflow: auto;
    font-size: .72rem;
    line-height: 1.35;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 90%, #f7f9fc);
}
.edit-row td {
    background: color-mix(in srgb, var(--primary-soft) 35%, var(--panel));
}
.subtle-card {
    box-shadow: none;
    margin: 8px 0;
}
.edit-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.full-width {
    grid-column: 1 / -1;
}
.btn-sm {
    padding: 6px 10px;
    font-size: .8rem;
}
.btn.ghost.btn-soft-open {
    background: #eef5ff;
    border-color: #c8dcff;
    color: #2c5fa8;
}
.btn.ghost.btn-soft-open:hover {
    background: #d6e7ff;
    border-color: #9fc0ff;
    color: #1f4d90;
}
.btn.ghost.btn-soft-order {
    background: #eef9f1;
    border-color: #bee3c9;
    color: #2d7a49;
}
.btn.ghost.btn-soft-order:hover {
    background: #d8f0df;
    border-color: #91cda7;
    color: #1f6538;
}
.contacts-headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.contacts-headline__title h3,
.contacts-headline__subtitle {
    margin: 0 0 4px;
}
.contacts-headline__identity {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.25;
}
.contacts-headline__subtitle {
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted);
}
.contacts-action-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.contacts-action-toolbar .btn {
    min-height: 34px;
    padding: 7px 11px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: 10px;
}
.contacts-action-toolbar .btn.ghost {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 45%, var(--panel));
    color: color-mix(in srgb, var(--text) 85%, #113a72);
}
.contacts-action-toolbar .btn.ghost:hover {
    background: color-mix(in srgb, var(--primary-soft) 72%, var(--panel));
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
}
.contacts-action-toolbar .btn:not(.ghost) {
    box-shadow: 0 5px 12px rgba(23, 105, 214, 0.26);
}
.contacts-action-toolbar .btn i {
    font-size: .92rem;
}
.contacts-id-col,
th.contacts-id-col {
    text-align: center;
    width: 120px;
}
.contacts-id-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.contact-access-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
    cursor: default;
}
.contact-access-icon--edit {
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 70%, var(--panel));
    border: 1px solid var(--border);
}
a.contact-access-icon {
    cursor: pointer;
    text-decoration: none;
}
a.contact-access-icon--edit:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.contact-access-icon--locked {
    color: #c0392b;
    background: color-mix(in srgb, #fee2e2 70%, var(--panel));
    border: 1px solid color-mix(in srgb, #c0392b 30%, var(--border));
}
.contacts-id-cell__link {
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}
.contacts-id-cell__link:hover {
    text-decoration: underline;
}
.contact-lock-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.contacts-detail-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    background: color-mix(in srgb, var(--primary-soft) 28%, var(--panel));
}
.contacts-detail-card h4 {
    margin: 0 0 12px;
    font-size: 1rem;
}
.contacts-detail-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.contacts-detail-form .form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.registry-status-auto .registry-status-display {
    background: var(--surface-2, #f4f6f8);
    color: var(--text-muted, #5c6670);
    cursor: default;
}
.registry-status-auto small {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
}
.input-action {
    display: flex;
    gap: 8px;
    align-items: center;
}
.input-action input {
    flex: 1;
}
.js-crm-dial-phone.is-in-call {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}
.js-crm-dial-phone.is-in-call:hover {
    background: color-mix(in srgb, var(--danger) 88%, #000);
    border-color: color-mix(in srgb, var(--danger) 88%, #000);
    color: #fff;
}
.js-crm-dial-phone.is-disabled,
.js-crm-dial-phone:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.telephony-inline-toast {
    position: fixed;
    right: 1rem;
    bottom: 5.5rem;
    z-index: 1200;
    max-width: min(28rem, calc(100vw - 2rem));
}
.table-wrap table tr:hover td {
    background: color-mix(in srgb, var(--primary-soft) 25%, var(--panel));
}
.contacts-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.contacts-tab-btn {
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    border-radius: 999px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    min-height: 33px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.contacts-tab-btn:hover {
    background: color-mix(in srgb, var(--primary-soft) 46%, var(--panel));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    color: color-mix(in srgb, var(--text) 86%, var(--primary));
    transform: translateY(-1px);
}
.contacts-tab-btn.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary-soft) 65%, var(--panel));
    color: var(--primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}
.contacts-tab-btn[data-tab-target="all-data"].active { background: #e7f0ff; }
.contacts-tab-btn[data-tab-target="extra-data"].active { background: #f2ebff; }
.contacts-tab-btn[data-tab-target="state"].active { background: #e8fff2; }
.contacts-tab-btn[data-tab-target="orders"].active { background: #fff5e6; }
.contacts-tab-btn[data-tab-target="appointments"].active { background: #e8fbff; }
.contacts-tab-btn[data-tab-target="calls"].active { background: #fdeeff; }
.contacts-tab-btn[data-tab-target="changes"].active { background: #f1f1f1; }
.contacts-tab-btn[data-tab-target="stats"].active { background: #eef6e8; }
.contacts-tab-btn[data-tab-target="attachments"].active { background: #fff0f7; }
.contacts-tabs-nav[data-active-tab="all-data"] .contacts-tab-btn.active { border-color: #3b82f6; color: #1d4ed8; }
.contacts-tabs-nav[data-active-tab="extra-data"] .contacts-tab-btn.active { border-color: #8b5cf6; color: #6d28d9; }
.contacts-tabs-nav[data-active-tab="state"] .contacts-tab-btn.active { border-color: #10b981; color: #047857; }
.contacts-tabs-nav[data-active-tab="orders"] .contacts-tab-btn.active { border-color: #f59e0b; color: #b45309; }
.contacts-tabs-nav[data-active-tab="appointments"] .contacts-tab-btn.active { border-color: #06b6d4; color: #0e7490; }
.contacts-tabs-nav[data-active-tab="calls"] .contacts-tab-btn.active { border-color: #ec4899; color: #be185d; }
.contacts-tabs-nav[data-active-tab="changes"] .contacts-tab-btn.active { border-color: #6b7280; color: #374151; }
.contacts-tabs-nav[data-active-tab="stats"] .contacts-tab-btn.active { border-color: #65a30d; color: #3f6212; }
.contacts-tabs-nav[data-active-tab="attachments"] .contacts-tab-btn.active { border-color: #d946ef; color: #a21caf; }
.contacts-detail-card {
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.contacts-detail-card.tab-theme-all-data { border-color: #bfdbfe; background: linear-gradient(180deg, #f8fbff 0%, var(--panel) 100%); }
.contacts-detail-card.tab-theme-extra-data { border-color: #ddd6fe; background: linear-gradient(180deg, #faf8ff 0%, var(--panel) 100%); }
.contacts-detail-card.tab-theme-state { border-color: #bbf7d0; background: linear-gradient(180deg, #f4fff8 0%, var(--panel) 100%); }
.contacts-detail-card.tab-theme-orders { border-color: #fed7aa; background: linear-gradient(180deg, #fffaf3 0%, var(--panel) 100%); }
.contacts-detail-card.tab-theme-appointments { border-color: #a5f3fc; background: linear-gradient(180deg, #f3fcff 0%, var(--panel) 100%); }
.contacts-detail-card.tab-theme-calls { border-color: #fbcfe8; background: linear-gradient(180deg, #fff6fb 0%, var(--panel) 100%); }
.contacts-detail-card.tab-theme-changes { border-color: #d1d5db; background: linear-gradient(180deg, #fafafa 0%, var(--panel) 100%); }
.contacts-detail-card.tab-theme-stats { border-color: #d9f99d; background: linear-gradient(180deg, #f8fdeb 0%, var(--panel) 100%); }
.contacts-detail-card.tab-theme-attachments { border-color: #f5d0fe; background: linear-gradient(180deg, #fff7fd 0%, var(--panel) 100%); }

.contact-job-type-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.contact-job-type-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: .84rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.contact-job-type-btn i {
    font-size: 1rem;
}
.contact-job-type-btn:hover {
    transform: translateY(-1px);
}
.contact-job-type-btn--status_reset {
    background: #e7f0ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.contact-job-type-btn--status_reset:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}
.contact-job-type-btn--status_reset.active {
    background: #dbeafe;
    color: #1e40af;
    border-color: #3b82f6;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .18);
}
.contact-job-type-btn--expiry_update {
    background: #fff5e6;
    color: #b45309;
    border-color: #fed7aa;
}
.contact-job-type-btn--expiry_update:hover {
    background: #ffedd5;
    border-color: #fdba74;
}
.contact-job-type-btn--expiry_update.active {
    background: #ffedd5;
    color: #9a3412;
    border-color: #f97316;
    box-shadow: 0 4px 14px rgba(249, 115, 22, .18);
}
.contact-job-type-btn--field_update {
    background: #e8fff2;
    color: #047857;
    border-color: #a7f3d0;
}
.contact-job-type-btn--field_update:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
}
.contact-job-type-btn--field_update.active {
    background: #d1fae5;
    color: #065f46;
    border-color: #10b981;
    box-shadow: 0 4px 14px rgba(16, 185, 129, .18);
}
.contact-job-panel {
    margin-top: 14px;
    border-radius: 16px;
    border-width: 1px;
    border-style: solid;
    box-shadow: none;
}
.contact-job-panel--status_reset {
    background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 55%, var(--panel) 100%);
    border-color: #bfdbfe;
}
.contact-job-panel--expiry_update {
    background: linear-gradient(180deg, #fff7ed 0%, #fffcf5 55%, var(--panel) 100%);
    border-color: #fed7aa;
}
.contact-job-panel--field_update {
    background: linear-gradient(180deg, #ecfdf5 0%, #f6fef9 55%, var(--panel) 100%);
    border-color: #a7f3d0;
}
body.dark .contact-job-type-btn--status_reset { background: #1e3a5f; color: #93c5fd; border-color: #1d4ed8; }
body.dark .contact-job-type-btn--status_reset.active { background: #1e40af; color: #dbeafe; }
body.dark .contact-job-type-btn--expiry_update { background: #4a2c0a; color: #fdba74; border-color: #9a3412; }
body.dark .contact-job-type-btn--expiry_update.active { background: #9a3412; color: #ffedd5; }
body.dark .contact-job-type-btn--field_update { background: #064e3b; color: #6ee7b7; border-color: #047857; }
body.dark .contact-job-type-btn--field_update.active { background: #047857; color: #d1fae5; }
body.dark .contact-job-panel--status_reset { background: linear-gradient(180deg, #172554 0%, var(--panel) 100%); border-color: #1d4ed8; }
body.dark .contact-job-panel--expiry_update { background: linear-gradient(180deg, #431407 0%, var(--panel) 100%); border-color: #9a3412; }
body.dark .contact-job-panel--field_update { background: linear-gradient(180deg, #064e3b 0%, var(--panel) 100%); border-color: #047857; }

.contact-tab-panel {
    display: none;
}
.contact-tab-panel.active {
    display: block;
}
.contact-state-summary {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--primary-soft) 35%, var(--panel));
}
.contact-state-summary h4 {
    margin: 0 0 8px;
    font-size: .88rem;
}
.contact-state-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    font-size: .83rem;
}
.agenda-calendar-grid {
    margin-top: 12px;
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
.agenda-controls-form {
    align-items: end;
}
.agenda-view-switch {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-soft) 38%, var(--panel));
}
.agenda-view-btn {
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: .84rem;
    padding: 7px 12px;
    cursor: pointer;
}
.agenda-view-btn:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, #fff 80%, var(--panel));
}
.agenda-view-btn.is-active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(42, 139, 255, 0.24);
}
.agenda-calendar-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.agenda-calendar-day {
    grid-template-columns: minmax(0, 260px);
}
.agenda-day-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    padding: 8px 9px;
    display: grid;
    gap: 2px;
}
.agenda-day-card.is-muted {
    opacity: .55;
}
.agenda-day-card.has-appointments {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 52%, var(--panel));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.agenda-day-card.is-today {
    border-color: #f4a000;
    background: #fff7e8;
    box-shadow: inset 0 0 0 1px rgba(244, 160, 0, 0.35), 0 0 0 2px rgba(244, 160, 0, 0.1);
}
.agenda-day-card.is-today strong::after {
    content: ' • Oggi';
    font-size: .72rem;
    color: #b56f00;
    font-weight: 700;
}
.agenda-day-card strong {
    font-size: .9rem;
}
.agenda-day-card span {
    font-size: .76rem;
    color: var(--muted);
}
.agenda-day-card small {
    font-size: .72rem;
    color: var(--primary);
    font-weight: 600;
}
.stats-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.stats-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: var(--panel);
    display: grid;
    gap: 6px;
}
.stats-card span {
    color: var(--muted);
    font-size: .8rem;
}
.stats-card strong {
    font-size: 1.2rem;
}
.settings-general-form {
    display: grid;
    gap: 12px;
}
.settings-panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color .18s ease, background-color .18s ease;
}
.settings-panel h4,
.settings-panel summary h4 {
    margin: 0 0 10px;
    font-size: .95rem;
}
.settings-panel--identity {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff 0%, var(--panel) 100%);
}
.settings-panel--identity h4 { color: #1d4ed8; }
.settings-panel--email {
    border-color: #c4b5fd;
    background: linear-gradient(180deg, #faf8ff 0%, var(--panel) 100%);
}
.settings-panel--email h4 { color: #6d28d9; }
.settings-panel--whatsapp {
    border-color: #86efac;
    background: linear-gradient(180deg, #f3fff7 0%, var(--panel) 100%);
}
.settings-panel--whatsapp h4 { color: #047857; }
.settings-panel--operations {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fffaf3 0%, var(--panel) 100%);
}
.settings-panel--operations h4 { color: #b45309; }
.settings-panel--dashboard {
    border-color: #bae6fd;
    background: linear-gradient(180deg, #eff8ff 0%, #f8fcff 55%, var(--panel) 100%);
}
.settings-panel--dashboard h4 { color: #0369a1; }
.settings-panel__hint {
    margin: -4px 0 12px;
    font-size: .82rem;
    line-height: 1.45;
}
.settings-panel--pbx-profile {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff 0%, var(--panel) 100%);
}
.settings-panel--pbx-profile h4 { color: #1d4ed8; }
.settings-panel--ami {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fff7f7 0%, var(--panel) 100%);
}
.settings-panel--ami h4 { color: #b91c1c; }
.settings-panel--dialplan {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb 0%, var(--panel) 100%);
}
.settings-panel--dialplan h4 { color: #b45309; }
.settings-panel--operator {
    border-color: #a5f3fc;
    background: linear-gradient(180deg, #f3fcff 0%, var(--panel) 100%);
}
.settings-panel--operator h4 { color: #0e7490; }
.settings-panel--ari {
    border-color: #fbcfe8;
    background: linear-gradient(180deg, #fff6fb 0%, var(--panel) 100%);
}
.settings-panel--ari h4 { color: #be185d; }
.settings-panel--guide {
    border-color: #d1d5db;
    background: linear-gradient(180deg, #fafafa 0%, var(--panel) 100%);
}
.settings-panel--guide summary {
    cursor: pointer;
    list-style: none;
}
.settings-panel--guide summary::-webkit-details-marker { display: none; }
.settings-panel--guide summary h4 {
    display: inline;
    color: #374151;
}
.settings-panel--ivr-params {
    border-color: #c4b5fd;
    background: linear-gradient(180deg, #faf8ff 0%, var(--panel) 100%);
    margin-top: 12px;
}
.settings-panel--ivr-params h4 { color: #6d28d9; }
.settings-panel--ivr-dialplan {
    border-color: #d1d5db;
    background: linear-gradient(180deg, #fafafa 0%, var(--panel) 100%);
}
.settings-panel--ivr-audio {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb 0%, var(--panel) 100%);
}
.settings-panel--ivr-audio h3 { color: #b45309; }
.settings-panel--ivr-did {
    border-color: #a7f3d0;
    background: linear-gradient(180deg, #f4fff8 0%, var(--panel) 100%);
}
.settings-panel--ivr-did h3 { color: #047857; }
.settings-section {
    border: 1px solid var(--border);
}
.settings-section--telephony-status {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff 0%, var(--panel) 100%);
}
.settings-section--asterisk-config {
    border-color: #e5e7eb;
}
.settings-section--ivr-runtime {
    border-color: #ddd6fe;
    background: linear-gradient(180deg, #faf8ff 0%, var(--panel) 100%);
}
.settings-section--ivr-flows {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff 0%, var(--panel) 100%);
}
.settings-section--ivr-assets {
    gap: 12px;
}
.settings-asterisk-form {
    display: grid;
    gap: 12px;
}
.settings-status-grid {
    margin-bottom: 1rem;
}
.settings-status-card {
    border-width: 1px;
    border-style: solid;
}
.settings-status-card--bridge {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff 0%, var(--panel) 100%);
}
.settings-status-card--ivr {
    border-color: #fbcfe8;
    background: linear-gradient(180deg, #fff6fb 0%, var(--panel) 100%);
}
.settings-status-card--ari {
    border-color: #c4b5fd;
    background: linear-gradient(180deg, #faf8ff 0%, var(--panel) 100%);
}
.settings-status-card--flows {
    border-color: #bbf7d0;
    background: linear-gradient(180deg, #f4fff8 0%, var(--panel) 100%);
}
.settings-deploy-actions {
    margin-top: 10px;
}
.settings-toggle-grid label {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--panel);
    color: var(--text);
}
.rules-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
}
.permission-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.permission-inline {
    gap: 6px;
    justify-content: flex-start;
}
.permission-check input {
    width: 18px;
    height: 18px;
}
.permission-grid {
    display: grid;
    gap: 6px;
}

.toast {
    margin-bottom: 12px;
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--panel);
}
.toast.success { border-color: #89d8b4; }
.toast.error { border-color: #ff9a9a; }
.muted { color: var(--muted); }

.auth-body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 10% 10%, #d8eaff 0, transparent 40%), var(--bg);
}
.auth-wrap {
    width: min(460px, calc(100vw - 24px));
}
.auth-card {
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 18px;
    padding: 26px;
}
.auth-card h1 {
    margin: 0 0 8px;
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.auth-brand-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border);
}
.auth-brand strong {
    display: block;
}
.auth-brand small {
    color: var(--muted);
}
.auth-password-warning {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #f2c27a;
    background: #fff7eb;
    color: #7a3e00;
    font-weight: 700;
    line-height: 1.45;
}
.auth-form {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}
.auth-form .btn {
    justify-content: center;
}
.auth-wrap--campaign-picker {
    width: min(920px, calc(100vw - 24px));
}
.auth-card--campaign-picker {
    padding: 18px 20px 20px;
}
.campaign-picker-form {
    margin-top: 8px;
}
.campaign-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.campaign-picker__title {
    margin: 0;
    font-size: 1.15rem;
}
.campaign-picker__refresh {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.campaign-picker__refresh:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.campaign-picker__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.campaign-picker__col {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 92%, var(--bg));
    padding: 10px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
}
.campaign-picker__col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.campaign-picker__col-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text);
}
.campaign-picker__count {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 14%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    color: var(--primary);
    font-size: .78rem;
    font-weight: 700;
}
.campaign-picker__filter {
    position: relative;
    display: block;
    margin-bottom: 8px;
}
.campaign-picker__filter i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.campaign-picker__filter input {
    width: 100%;
    padding-left: 34px;
}
.campaign-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    flex: 1;
    min-height: 260px;
}
.campaign-picker__list--selected {
    margin-top: 38px;
}
.campaign-picker__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.campaign-picker__item:last-child {
    border-bottom: 0;
}
.campaign-picker__item-label {
    font-size: .84rem;
    line-height: 1.35;
    color: var(--text);
    word-break: break-word;
    flex: 1;
    min-width: 0;
}
.campaign-picker__item-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.campaign-picker__priority {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.campaign-picker__star {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: color-mix(in srgb, var(--muted) 70%, #c8c8c8);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: .95rem;
    line-height: 1;
    transition: color .15s ease, transform .1s ease;
}
.campaign-picker__star:hover,
.campaign-picker__star:focus-visible {
    color: #f0b429;
    transform: scale(1.08);
    outline: none;
}
.campaign-picker__star.is-active {
    color: #f5b301;
}
.campaign-picker__item-action {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.campaign-picker__item-action:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--panel));
    color: var(--primary);
}
.campaign-picker__empty {
    padding: 16px 8px;
    font-size: .84rem;
}
.campaign-picker__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 35%, var(--panel));
}
.campaign-picker__go {
    min-width: 96px;
}
.campaign-picker__close {
    min-width: 110px;
    justify-content: center;
}
@media (max-width: 760px) {
    .campaign-picker__cols {
        grid-template-columns: 1fr;
    }
    .campaign-picker__list--selected {
        margin-top: 0;
    }
    .campaign-picker__col {
        min-height: 280px;
    }
}
    margin: 18px 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    display: grid;
    gap: 10px;
    background: var(--primary-soft);
}
.pause-status-box strong {
    font-size: 1.75rem;
}
.pause-timer-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pause-timer-item {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
}
.pause-timer-item p {
    margin: 0 0 4px;
}
@media (max-width: 640px) {
    .pause-timer-grid {
        grid-template-columns: 1fr;
    }
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.stats-header h2 {
    margin: 0 0 6px;
}
.stats-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.stats-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stats-kpi {
    border-radius: 14px;
}
.stats-kpi h2 {
    margin-top: 10px;
    font-size: 1.45rem;
}
.statistics-catalog {
    padding-top: 18px;
}
.statistics-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.statistics-catalog-column {
    border-right: 1px solid var(--border);
    padding-right: 14px;
}
.statistics-catalog-column:nth-child(3n) {
    border-right: 0;
    padding-right: 0;
}
.statistics-catalog-column h3 {
    margin: 0 0 10px;
    font-size: 1.55rem;
}
.statistics-catalog-column ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 10px;
}
.statistics-catalog-column li {
    color: var(--text);
}
.statistics-link {
    color: var(--text);
    text-decoration: none;
    border-radius: 8px;
    padding: 2px 6px;
    margin-left: -6px;
    display: inline-block;
}
.statistics-link:hover {
    background: var(--primary-soft);
    color: var(--primary);
}
.statistics-link.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}
.statistics-report-filters {
    margin-bottom: 10px;
}
.cti-groups-grid {
    display: grid;
    gap: 14px;
}
.cti-group-card {
    display: grid;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 14%, var(--panel));
}
.cti-group-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}
.cti-group-card-head h4 {
    margin: 0 0 4px;
    font-size: 1rem;
}
.cti-group-card-head .badge-row {
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.cti-group-card-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.cti-group-form {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: var(--panel);
}
.cti-group-form label {
    font-size: .84rem;
}
.cti-group-form select[multiple] {
    min-height: 144px;
}
.cti-group-fields {
    align-items: start;
    row-gap: 14px;
    column-gap: 16px;
}
.cti-group-fields > label {
    align-content: start;
}
.cti-group-fields input,
.cti-group-fields select {
    min-height: 42px;
}
.cti-group-fields label > small {
    margin-top: 2px;
    line-height: 1.25;
    min-height: 0;
}
.cti-group-fields .form-actions {
    grid-column: 1 / -1;
    margin-top: 2px;
}
.users-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.campaign-picker-suggestions {
    border: 1px solid #9ec2f7;
    border-radius: 10px;
    max-height: 180px;
    overflow: auto;
    background: #f6faff;
    display: none;
    box-shadow: 0 8px 22px rgba(42, 139, 255, 0.15);
}
.campaign-picker-suggestions.is-open {
    display: block;
}
.campaign-picker-item {
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #d4e4fb;
    background: transparent;
    padding: 9px 12px;
    color: var(--text);
    cursor: pointer;
    font-weight: 500;
}
.campaign-picker-item:last-child {
    border-bottom: 0;
}
.campaign-picker-item:hover {
    background: #e6f1ff;
    color: #1f5fbf;
}
.campaign-picker-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.campaign-picker-box {
    border: 1px solid #a7c7f5;
    border-radius: 10px;
    background: #f7fbff;
    padding: 8px;
    display: grid;
    gap: 8px;
    box-shadow: inset 0 0 0 1px #e3efff;
}
.campaign-picker-box .campaign-picker-input {
    border: 1px solid #87b2ef;
    border-radius: 8px;
    padding: 9px 11px;
    background: #ffffff;
    font-weight: 500;
}
.campaign-picker-box .campaign-picker-input:focus {
    outline: none;
    border-color: #4a91f0;
    box-shadow: 0 0 0 3px rgba(74, 145, 240, 0.18);
}
.campaign-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #a8c9f6;
    border-radius: 999px;
    background: #e8f2ff;
    color: #215cad;
    padding: 5px 9px;
    font-size: .82rem;
    font-weight: 600;
}
.campaign-chip button {
    border: 0;
    background: transparent;
    color: #5d78a2;
    cursor: pointer;
    padding: 0;
}
.campaign-chip--readonly {
    gap: 4px;
    pointer-events: none;
}
.campaign-chip--readonly i {
    font-size: .9em;
    opacity: .85;
}
.campaign-picker-label {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}
.campaign-picker-field {
    display: grid;
    gap: 8px;
}
.campaign-picker-empty {
    color: var(--muted);
    font-size: .84rem;
    font-style: italic;
}
.product-campaign-chips,
.campaign-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 360px;
}
.campaign-chips-list--sm {
    max-width: 280px;
    gap: 5px;
}
.campaign-chips-empty {
    color: var(--muted);
    font-size: .84rem;
    font-style: italic;
}
.campaign-chip--tone-1 {
    border-color: #9ec5f8;
    background: linear-gradient(135deg, #e8f2ff 0%, #f3f8ff 100%);
    color: #1f5fbf;
}
.campaign-chip--tone-2 {
    border-color: #9fd9b8;
    background: linear-gradient(135deg, #e8f8ef 0%, #f2fbf6 100%);
    color: #1d7a47;
}
.campaign-chip--tone-3 {
    border-color: #d4b8f5;
    background: linear-gradient(135deg, #f3ebff 0%, #f9f4ff 100%);
    color: #6b3fa8;
}
.campaign-chip--tone-4 {
    border-color: #f5c99a;
    background: linear-gradient(135deg, #fff4e8 0%, #fffaf3 100%);
    color: #a85f12;
}
.campaign-chips-list--sm .campaign-chip {
    font-size: .76rem;
    padding: 3px 8px;
}
.security-group-picker {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 4%, var(--panel));
}
.security-group-picker__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.security-group-picker__title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
}
.security-group-picker__hint,
.security-group-picker__empty,
.security-group-picker__disabled-note {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
}
.security-group-picker__disabled-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--muted) 10%, var(--panel));
}
.security-group-picker__grid,
.security-group-picker__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.security-group-picker .visibility-chip {
    display: inline-flex;
    margin: 0;
    cursor: pointer;
    font-weight: inherit;
    color: inherit;
    flex: 0 1 auto;
}
.security-group-picker .visibility-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.security-group-picker .visibility-chip__body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    max-width: 100%;
}
.security-group-picker .visibility-chip__body::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 35%, var(--border));
    flex-shrink: 0;
    transition: background .15s ease, transform .15s ease;
}
.security-group-picker .visibility-chip__name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
}
.security-group-picker .visibility-chip:hover .visibility-chip__body {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.security-group-picker .visibility-chip.is-selected .visibility-chip__body {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}
.security-group-picker .visibility-chip.is-selected .visibility-chip__body::before {
    background: color-mix(in srgb, var(--primary) 85%, var(--text));
    transform: scale(1.15);
}
.security-group-picker.is-disabled .security-group-picker__pills {
    opacity: .45;
    pointer-events: none;
}
.security-group-picker.is-disabled .visibility-chip {
    cursor: not-allowed;
}
.service-picker-chips {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--primary) 4%, var(--panel));
}
.service-picker-chips__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.service-picker-chips__title {
    font-size: .9rem;
    font-weight: 700;
}
.blacklist-scope-panel.is-hidden {
    display: none !important;
}
.blacklist-page .users-header-row {
    margin-bottom: 14px;
}
.blacklist-filters {
    align-items: end;
}
.blacklist-filter-field.is-disabled select {
    opacity: .55;
    cursor: not-allowed;
}
.blacklist-filter-field.is-disabled {
    opacity: .85;
}
.blacklist-filter-hint {
    display: block;
    margin-top: .35rem;
}
.blacklist-filters__actions {
    margin-top: .25rem;
}
.service-picker-chips .visibility-chip {
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}
.service-picker-chips .visibility-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.service-picker-chips .visibility-chip__body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.service-picker-chips .visibility-chip__body::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 35%, var(--border));
    flex-shrink: 0;
}
.service-picker-chips .visibility-chip.is-selected .visibility-chip__body {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}
.service-picker-chips .visibility-chip.is-selected .visibility-chip__body::before {
    background: color-mix(in srgb, var(--primary) 85%, var(--text));
    transform: scale(1.15);
}
.api-docs-box {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 8%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
}
.api-docs-box h3 {
    margin: 0 0 .5rem;
    font-size: 1rem;
}
.api-docs-box ul {
    margin: .5rem 0 0;
    padding-left: 1.2rem;
}
.api-token-reveal__code {
    display: block;
    margin: .6rem 0;
    padding: .65rem .8rem;
    border-radius: 8px;
    background: var(--panel);
    word-break: break-all;
    font-size: .85rem;
}
.api-user-password-details summary {
    list-style: none;
    cursor: pointer;
}
.api-user-password-form {
    margin-top: .5rem;
    min-width: 220px;
}
.campaign-chips-editor {
    margin-top: 8px;
}
.campaign-chips-editor summary {
    list-style: none;
    cursor: pointer;
    width: fit-content;
}
.campaign-chips-editor summary::-webkit-details-marker {
    display: none;
}
.campaign-chips-editor__select {
    margin-top: 8px;
    min-width: 220px;
    min-height: 110px;
}
.campaign-assoc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 16px;
}
.campaign-assoc-modal[hidden] {
    display: none !important;
}
.campaign-assoc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(2px);
}
.campaign-assoc-modal__panel {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    box-shadow: 0 22px 48px rgba(2, 6, 23, 0.28);
}
.campaign-assoc-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.campaign-assoc-modal__head h4 {
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.modal-open {
    overflow: hidden;
}

.order-settings-intro {
    margin: -4px 0 16px;
    max-width: 62ch;
}
.order-settings-create {
    display: grid;
    gap: 14px;
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary-soft) 16%, var(--panel));
}
.order-settings-create__fields {
    margin: 0;
}
.order-settings-create__required {
    align-self: end;
    min-height: 40px;
}
.order-settings-create__campaigns {
    padding: 12px;
    border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--border));
    border-radius: 12px;
    background: var(--panel);
}
.order-settings-table-wrap {
    border: 1px solid var(--border);
    border-radius: 14px;
}
.order-settings-table th,
.order-settings-table td {
    vertical-align: middle;
}
.order-settings-campaigns-cell {
    min-width: 220px;
}
.order-settings-campaigns {
    display: grid;
    gap: 8px;
}
.order-settings-campaigns .campaign-chips-list {
    margin: 0;
}
.order-field-campaign-edit-btn {
    justify-self: start;
}
.service-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}
.service-brand__logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 2px;
    flex-shrink: 0;
}
.service-brand__placeholder {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px dashed #b8c9e6;
    background: #f4f8ff;
    color: #5d78a2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.service-brand__name {
    font-weight: 600;
    color: var(--text);
}
.service-brand--preview {
    margin-top: -4px;
    padding: 8px 10px;
    border: 1px solid #d4e4fb;
    border-radius: 10px;
    background: #f7fbff;
}
.service-logo-field__box {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    align-items: start;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: color-mix(in srgb, var(--panel) 92%, #e8f2ff);
}
.service-logo-preview {
    width: 104px;
    height: 104px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.service-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.service-logo-preview--empty {
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
    gap: 6px;
    padding: 8px;
}
.service-logo-preview--empty i {
    font-size: 1.4rem;
}
.service-logo-field__inputs {
    display: grid;
    gap: 8px;
}
.service-logo-remove {
    margin-top: 2px;
}
@media (max-width: 720px) {
    .service-logo-field__box {
        grid-template-columns: 1fr;
    }
}
.security-rules-card {
    margin-bottom: 12px;
    border-color: #b8d4f8;
    background: linear-gradient(135deg, #f5f9ff 0%, #eef5ff 100%);
}
.security-rules-card h4 {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .95rem;
    color: #1f5fbf;
}
.rules-list--inline {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.visibility-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 320px;
}
.visibility-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #c5daf7;
    border-radius: 999px;
    background: #edf4ff;
    color: #2a5fae;
    padding: 4px 9px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.visibility-pill i {
    font-size: .9em;
    opacity: .9;
}
.sec-edit-two-col {
    align-items: start;
}
.sec-group-edit-page {
    display: grid;
    gap: 0;
}
.sec-group-edit-layout {
    display: grid;
    gap: 14px;
}
.sec-group-profile--banner {
    margin: 0;
}
.sec-group-profile--banner .sec-group-profile__hero {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    flex-wrap: wrap;
}
.sec-group-profile__copy {
    flex: 1 1 220px;
    min-width: 0;
}
.sec-group-profile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--section-accent, #3b82f6) 16%, var(--panel));
    color: color-mix(in srgb, var(--section-accent, #3b82f6) 72%, var(--text));
    font-size: 1.25rem;
    flex-shrink: 0;
}
.sec-group-profile__name {
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}
.sec-group-profile__desc {
    margin: 0;
    font-size: .82rem;
    line-height: 1.4;
}
.sec-group-stat {
    display: flex;
    gap: 8px;
    margin: 0;
    flex-wrap: wrap;
}
.sec-group-stat__value--status .badge {
    font-size: .72rem;
}
.sec-group-stat__item {
    display: grid;
    gap: 1px;
    min-width: 72px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--section-accent, #3b82f6) 18%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--section-accent, #3b82f6) 6%, var(--panel));
    text-align: center;
}
.sec-group-stat__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.sec-group-stat__label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
}
.sec-group-profile__link {
    flex-shrink: 0;
    white-space: nowrap;
}
.sec-visibility-stack {
    display: grid;
    gap: 10px;
    min-width: 0;
}
.sec-group-edit-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #c5daf7;
    border-radius: var(--radius-md);
    background: #f5f9ff;
    font-size: .84rem;
    line-height: 1.45;
}
.sec-visibility-form {
    display: grid;
    gap: 10px;
}
.sec-visibility-panel {
    padding: 14px 16px;
}
.sec-visibility-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.sec-visibility-panel__head h4 {
    margin: 0;
    padding: 0;
    border: 0;
}
.sec-visibility-panel__count {
    font-size: .78rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--section-accent) 70%, var(--text));
    background: color-mix(in srgb, var(--section-accent) 12%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--section-accent) 22%, var(--border));
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}
.sec-visibility-panel__count.is-hidden {
    display: none;
}
.sec-visibility-panel h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
}
.sec-visibility-panel h4 i {
    font-size: 1.05em;
    opacity: .9;
}
.sec-visibility-panel--sites { --section-accent: #3b82f6; }
.sec-visibility-panel--cti { --section-accent: #0891b2; }
.sec-visibility-panel--campaigns { --section-accent: #7c3aed; }
.sec-mode-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--section-accent) 20%, var(--border));
    background: color-mix(in srgb, var(--section-accent) 7%, var(--panel));
}
.sec-mode-option {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--muted);
}
.sec-mode-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.sec-mode-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sec-mode-option:hover span {
    color: var(--text);
}
.sec-mode-option.is-active span,
.sec-mode-option input:checked + span {
    background: var(--panel);
    color: color-mix(in srgb, var(--section-accent) 75%, var(--text));
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.sec-visibility-panel__mode-caption {
    margin: 8px 0 0;
    font-size: .8rem;
    line-height: 1.4;
}
.sec-visibility-panel__items {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed color-mix(in srgb, var(--section-accent) 18%, var(--border));
}
.sec-visibility-panel__items.is-collapsed {
    display: none;
}
.sec-visibility-panel__empty {
    margin: 0;
    font-size: .84rem;
    font-style: italic;
}
.visibility-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sec-visibility-panel .visibility-chip {
    display: inline-flex;
    margin: 0;
    cursor: pointer;
    font-weight: inherit;
    color: inherit;
    flex: 0 1 auto;
}
.sec-visibility-panel .visibility-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sec-visibility-panel .visibility-chip__body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    max-width: 100%;
}
.sec-visibility-panel .visibility-chip__body::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--section-accent) 35%, var(--border));
    flex-shrink: 0;
    transition: background .15s ease, transform .15s ease;
}
.sec-visibility-panel .visibility-chip__name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}
.sec-visibility-panel .visibility-chip:hover .visibility-chip__body {
    border-color: color-mix(in srgb, var(--section-accent) 35%, var(--border));
}
.sec-visibility-panel .visibility-chip.is-selected .visibility-chip__body {
    border-color: color-mix(in srgb, var(--section-accent) 55%, var(--border));
    background: color-mix(in srgb, var(--section-accent) 12%, var(--panel));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--section-accent) 16%, transparent);
}
.sec-visibility-panel .visibility-chip.is-selected .visibility-chip__body::before {
    background: color-mix(in srgb, var(--section-accent) 85%, var(--text));
    transform: scale(1.15);
}
.sec-visibility-actions {
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}
.sec-group-create-form {
    max-width: 520px;
}
@media (max-width: 720px) {
    .sec-group-profile--banner .sec-group-profile__hero {
        align-items: flex-start;
    }
    .sec-group-profile__link {
        width: 100%;
        justify-content: center;
    }
}
.sec-group-meta {
    display: grid;
    gap: 12px;
    margin: 0 0 14px;
}
.sec-group-meta div {
    display: grid;
    gap: 2px;
}
.sec-group-meta dt {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
}
.sec-group-meta dd {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
}
.cti-edit-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.muted-badge {
    background: color-mix(in srgb, var(--border) 64%, var(--panel));
    color: var(--muted);
}
.status-badge-active {
    background: #e9f8ef;
    color: #1f8f4e;
    border: 1px solid #bde6cb;
}
.status-badge-inactive {
    background: #fff2e8;
    color: #b65c1f;
    border: 1px solid #f2cfb4;
}
.btn.ghost.btn-soft-active {
    background: #e9f8ef;
    color: #1f8f4e;
    border-color: #bde6cb;
}
.btn.ghost.btn-soft-active:hover {
    background: #d9f2e4;
}
.btn.ghost.btn-soft-inactive {
    background: #fff2e8;
    color: #b65c1f;
    border-color: #f2cfb4;
}
.btn.ghost.btn-soft-inactive:hover {
    background: #ffe9db;
}

@media (max-width: 1024px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
    .kpi-grid, .two-col, .form-grid, .filter-grid, .campaign-config-form { grid-template-columns: 1fr; }
    .contacts-detail-form { grid-template-columns: 1fr; }
    .contacts-headline { flex-direction: column; align-items: flex-start; }
    .contacts-action-toolbar { justify-content: flex-start; }
    .input-action { flex-direction: column; align-items: stretch; }
    .stats-cards { grid-template-columns: 1fr; }
    .stats-header { flex-direction: column; }
    .stats-kpi-grid { grid-template-columns: 1fr; }
    .form-pair { grid-template-columns: 1fr; }
    .compact-form { grid-template-columns: 1fr; }
    .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
    .dashboard-view-controls-row { justify-content: flex-start; }
    .dashboard-view-radio-group { justify-content: flex-start; }
    .dashboard-mini-charts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .statistics-catalog-grid { grid-template-columns: 1fr; gap: 14px; }
    .statistics-catalog-column { border-right: 0; padding-right: 0; }
    .cti-group-card-head { flex-direction: column; }
    .cti-group-card-head .badge-row { justify-content: flex-start; }
    .cti-group-card-body { grid-template-columns: 1fr; }
    .users-header-row { flex-direction: column; }
    .agenda-calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agenda-calendar-day { grid-template-columns: 1fr; }
}

/* ── Professional polish ── */
.card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.card h3, .card h4 {
    letter-spacing: -0.02em;
}
.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: background .15s, border-color .15s, transform .1s;
}
.btn:not(.ghost):hover {
    background: var(--primary-hover);
}
.btn:active { transform: scale(0.98); }
.toast {
    border-radius: var(--radius-md);
    font-weight: 500;
}
.toast.success { background: var(--success-soft); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.toast.error { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }

.brand-logo-img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: contain;
    background: var(--panel);
    border: 1px solid var(--border);
}

.topbar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 12%, var(--panel)), var(--panel));
}
.topbar h1 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.topbar-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .88rem;
}

/* Telephony bar */
.page-contact-detail .telephony-bar,
body[data-order-workflow="1"] .telephony-bar {
    display: none !important;
}
.telephony-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--panel)), var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.telephony-bar__status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: .85rem;
    font-weight: 600;
}
.telephony-bar__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--muted);
    flex-shrink: 0;
}
.telephony-bar__dot.is-online { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.telephony-bar__dot.is-busy { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.telephony-bar__dot.is-offline { background: var(--danger); }
.telephony-bar__meta {
    color: var(--muted);
    font-size: .82rem;
}
.telephony-bar__dial {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 220px;
}
.telephony-bar__dial input {
    flex: 1;
    min-width: 140px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--panel);
    color: var(--text);
    font-size: .92rem;
}
.telephony-bar__call-state-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    max-width: 320px;
}
.telephony-bar__call-state {
    font-size: .82rem;
    color: var(--muted);
}
.telephony-bar__cli {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .78rem;
    line-height: 1.3;
}
.telephony-bar__cli-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .68rem;
}
.telephony-bar__cli-value {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.telephony-bar__cli.is-missing .telephony-bar__cli-value {
    color: var(--warning);
    font-weight: 500;
}
.telephony-bar__campaigns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.telephony-bar__campaigns .campaign-chip {
    font-size: .72rem;
    padding: 2px 8px;
}
.telephony-bar__wrapup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 10px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--warning) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}
.telephony-bar__wrapup-label {
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.telephony-bar__wrapup-select {
    min-width: 180px;
    max-width: 260px;
    font-size: .82rem;
    padding: 4px 8px;
}
.contact-call-wrapup {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    background: color-mix(in srgb, var(--warning) 10%, var(--panel));
}
.contact-call-wrapup h4 {
    margin: 0 0 var(--space-2);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.contact-call-wrapup p {
    margin: 0 0 var(--space-3);
}
.contact-call-wrapup__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
}
.contact-call-wrapup__outcome-field {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 320px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .78rem;
}
.contact-call-wrapup__schedule,
.telephony-bar__wrapup-schedule {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 10px;
    flex: 1 1 420px;
    min-width: 0;
}
.contact-call-wrapup__schedule.is-custom-datetime,
.telephony-bar__wrapup-schedule.is-custom-datetime {
    flex-wrap: nowrap;
}
.callback-preset-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .78rem;
    min-width: 170px;
    flex: 0 0 auto;
    margin: 0;
}
.callback-datetime-fields {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px 10px;
    flex: 0 0 auto;
}
.callback-datetime-fields label,
.callback-date-field,
.callback-time-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .78rem;
    margin: 0;
    min-width: 0;
}
.callback-field-label {
    line-height: 1.2;
    color: var(--muted);
    font-weight: 600;
}
.callback-datetime-fields input[type="date"],
.callback-datetime-fields input[type="time"],
.contact-call-wrapup__schedule input[type="date"],
.contact-call-wrapup__schedule input[type="time"],
.telephony-bar__wrapup-schedule input[type="date"],
.telephony-bar__wrapup-schedule input[type="time"] {
    width: 100%;
    min-width: 132px;
    max-width: 156px;
    box-sizing: border-box;
}
.contact-call-wrapup__schedule label,
.telephony-bar__wrapup-schedule label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .78rem;
    margin: 0;
}
.contact-call-wrapup__schedule select,
.callback-preset-field select {
    min-width: 170px;
    max-width: 220px;
}
.contact-call-wrapup__actions > .btn {
    flex: 0 0 auto;
    align-self: flex-end;
}
#contactOutcomeSchedule.contact-outcome-schedule-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 10px;
    grid-column: 1 / -1;
}
#contactOutcomeSchedule.contact-outcome-schedule-fields.is-custom-datetime {
    flex-wrap: nowrap;
}
@media (max-width: 960px) {
    .contact-call-wrapup__schedule.is-custom-datetime,
    .telephony-bar__wrapup-schedule.is-custom-datetime,
    #contactOutcomeSchedule.contact-outcome-schedule-fields.is-custom-datetime {
        flex-wrap: wrap;
    }
}
body.contact-wrapup-required .contacts-action-toolbar .js-wrapup-guard {
    opacity: 0.55;
}
body.contact-wrapup-required .contacts-tab-btn[data-tab-target="state"] {
    box-shadow: inset 0 -3px 0 var(--warning);
}
body.contact-wrapup-required #contactCallWrapup {
    border: 2px solid var(--warning);
    box-shadow: 0 0 0 3px var(--warning-soft);
}
body.contact-wrapup-required .contact-outcome-manual-field {
    display: none;
}
.contact-call-wrapup__actions select {
    min-width: 0;
    width: 100%;
}
.telephony-bar__hangup {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.telephony-bar__hangup:hover {
    background: color-mix(in srgb, var(--danger) 88%, #000);
    border-color: color-mix(in srgb, var(--danger) 88%, #000);
    color: #fff;
}
.telephony-bar__audio {
    display: none;
}
.is-hidden {
    display: none !important;
}

.operator-command-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 5%, var(--panel));
}
.operator-cmd-form {
    margin: 0;
}
.operator-cmd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.operator-cmd-btn:hover,
.operator-cmd-btn.is-active {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--panel));
    color: var(--text);
}
.operator-cmd-btn--ready.is-active {
    border-color: color-mix(in srgb, #16a34a 45%, var(--border));
    background: color-mix(in srgb, #16a34a 12%, var(--panel));
}
.operator-cmd-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.operator-command-bar__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, #16a34a 10%, var(--panel));
    border: 1px solid color-mix(in srgb, #16a34a 25%, var(--border));
    font-size: .82rem;
    color: var(--text);
}

/* Calls page */
.calls-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-4);
}
.calls-dial-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 6%, var(--panel)), var(--panel));
}
.calls-dial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--space-3);
    align-items: end;
}
.call-outcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}
.call-outcome-badge.is-active { background: var(--warning-soft); color: var(--warning); }
.call-outcome-badge.is-done { background: var(--success-soft); color: var(--success); }
.call-outcome-badge.is-fail { background: var(--danger-soft); color: var(--danger); }

.call-log-operator {
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.call-recorder-card {
    margin-top: 1rem;
    border: 1px solid var(--border);
}

.call-recorder-card.is-recording {
    border-color: var(--danger);
    box-shadow: 0 0 0 1px var(--danger-soft);
}

.call-recorder-card__head h4 {
    margin: 0 0 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.call-recorder-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.call-recorder-card__status.is-recording {
    color: var(--danger);
}

.call-recorder-card__status.is-success {
    color: var(--success);
}

.call-recorder-card__status.is-error {
    color: var(--danger);
}

.product-picker-field .product-picker-label,
.product-picker-field .campaign-picker-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.order-settings-table input[data-validation-pattern-wrap][hidden],
.order-settings-table input[data-field-choices-wrap][hidden] {
    display: none;
}

.option-settings-row .option-row-edit {
    display: none;
}

.option-settings-row.is-editing .option-row-view {
    display: none;
}

.option-settings-row.is-editing .option-row-edit {
    display: block;
}

.option-settings-row .option-row-edit-actions {
    display: none;
}

.option-settings-row.is-editing .option-row-view-actions {
    display: none;
}

.option-settings-row.is-editing .option-row-edit-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.option-settings-row.is-editing {
    background: color-mix(in srgb, var(--primary-soft) 22%, var(--panel));
}

.option-settings-row .option-row-view--bool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
}

/* Settings telephony */
.pbx-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.pbx-profile-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: var(--panel);
}
.pbx-profile-card:hover { border-color: var(--primary); }
.pbx-profile-card.is-selected {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.pbx-profile-card input { display: none; }
.pbx-profile-card strong { display: block; margin-bottom: 4px; }
.pbx-profile-card small { color: var(--muted); line-height: 1.4; }

.auth-card {
    box-shadow: 0 24px 60px rgba(20, 33, 61, 0.12);
    border: 1px solid var(--border);
}
body.dark .auth-card {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.auth-body {
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 12%, var(--bg)), var(--bg));
}

@media (max-width: 768px) {
    .calls-dial-grid, .pbx-profile-grid { grid-template-columns: 1fr; }
    .telephony-bar__dial { width: 100%; }
}

.form-section-title {
    margin: var(--space-4) 0 var(--space-2);
    font-size: .92rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.form-section-title:first-child {
    margin-top: 0;
}
.user-create-form {
    margin-top: var(--space-4);
}

/* ── Dashboard ── */
.dashboard-page {
    display: grid;
    gap: 16px;
}
.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 42%),
        linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 70%, var(--panel)), var(--panel));
    overflow: hidden;
    position: relative;
}
.dashboard-hero::after {
    content: "";
    position: absolute;
    inset: auto -40px -60px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    pointer-events: none;
}
.dashboard-hero__copy {
    position: relative;
    z-index: 1;
}
.dashboard-hero__eyebrow {
    margin: 0 0 6px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dashboard-hero__title {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}
.dashboard-hero__subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    max-width: 52ch;
}
.dashboard-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.dashboard-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    box-shadow: 0 8px 20px rgba(20, 33, 61, 0.06);
    font-size: .88rem;
    color: var(--muted);
}
.dashboard-hero__pill strong {
    color: var(--text);
    font-size: 1.05rem;
}
.dashboard-hero__pill--online {
    border-color: color-mix(in srgb, var(--success) 28%, var(--border));
    background: color-mix(in srgb, var(--success-soft) 55%, var(--panel));
}
.dashboard-hero__pill--paused {
    border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
    background: color-mix(in srgb, var(--warning-soft) 55%, var(--panel));
}

.kpi-grid--dashboard {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.kpi-grid--operator {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.dashboard-page .kpi-grid {
    gap: 10px;
    margin-bottom: 12px;
}
.kpi-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--kpi-tint, var(--primary)) 6%, var(--panel));
    border-color: color-mix(in srgb, var(--kpi-tint, var(--primary)) 14%, var(--border));
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: var(--kpi-accent, var(--primary));
}
.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(20, 33, 61, 0.08);
    border-color: color-mix(in srgb, var(--kpi-accent, var(--primary)) 28%, var(--border));
    background: color-mix(in srgb, var(--kpi-tint, var(--primary)) 9%, var(--panel));
}
.kpi-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--kpi-accent, var(--primary)) 12%, var(--panel));
    color: var(--kpi-accent, var(--primary));
    border: 1px solid color-mix(in srgb, var(--kpi-accent, var(--primary)) 18%, var(--border));
}
.kpi-card__body {
    min-width: 0;
}
.kpi-card__label {
    display: block;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.2;
}
.kpi-card__value {
    margin: 2px 0 0;
    font-size: 1.45rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.kpi-card--contacts { --kpi-accent: #2563eb; --kpi-tint: #2563eb; }
.kpi-card--campaigns { --kpi-accent: #7c3aed; --kpi-tint: #7c3aed; }
.kpi-card--calls { --kpi-accent: #0d9f6e; --kpi-tint: #0d9f6e; }
.kpi-card--appointments { --kpi-accent: #d97706; --kpi-tint: #d97706; }
.kpi-card--orders { --kpi-accent: #db2777; --kpi-tint: #db2777; }
.kpi-card--online { --kpi-accent: #059669; --kpi-tint: #059669; }
.kpi-card--paused { --kpi-accent: #ea580c; --kpi-tint: #ea580c; }
body.dark .kpi-card {
    background: color-mix(in srgb, var(--kpi-tint, var(--primary)) 10%, var(--panel));
}
body.dark .kpi-card:hover {
    background: color-mix(in srgb, var(--kpi-tint, var(--primary)) 14%, var(--panel));
}

.dashboard-panel {
    padding: 18px 20px 20px;
}
.dashboard-section-head {
    margin-bottom: 14px;
}
.dashboard-section-head__title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dashboard-section-head__title h3 {
    margin: 0;
}
.dashboard-section-head__subtitle {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .84rem;
}
.dashboard-section-head__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.dashboard-section-head__icon--live {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
}
.dashboard-section-head__icon--appointments {
    color: #d97706;
    background: color-mix(in srgb, #d97706 14%, var(--panel));
    border: 1px solid color-mix(in srgb, #d97706 24%, var(--border));
}
.dashboard-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 70%, var(--panel));
}
.dashboard-live-badge__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2fbf71;
    box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.45);
    animation: dashboard-live-pulse 1.8s ease-out infinite;
}
@keyframes dashboard-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(47, 191, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0); }
}

.dashboard-live-card {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 24%, var(--panel)), var(--panel) 120px);
}
.dashboard-filters {
    background: color-mix(in srgb, var(--primary-soft) 18%, var(--panel));
    border-style: dashed;
}
.dashboard-filters .form-actions {
    display: flex;
    gap: 8px;
    align-items: end;
}
.dashboard-table-wrap {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
}
.dashboard-live-table thead th {
    background: color-mix(in srgb, var(--primary-soft) 35%, var(--panel));
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}
.dashboard-live-table tbody tr:last-child td {
    border-bottom: 0;
}
.live-agent-operator {
    display: flex;
    align-items: center;
    gap: 10px;
}
.live-agent-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary-soft) 80%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    flex-shrink: 0;
}
.live-agent-name {
    font-weight: 600;
}
.live-agent-meta {
    color: var(--muted);
    font-size: .9rem;
}
.live-agent-recent-offline {
    display: block;
    margin-top: 4px;
}
.operator-activity-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--panel);
    white-space: nowrap;
}
.operator-activity-pill i {
    font-size: 1rem;
    line-height: 1;
}
.operator-activity-pill__label {
    line-height: 1.2;
}
.operator-activity-pill--waiting {
    color: #0e7490;
    background: color-mix(in srgb, #06b6d4 12%, var(--panel));
    border-color: color-mix(in srgb, #06b6d4 28%, var(--border));
}
.operator-activity-pill--in_call {
    color: #b42318;
    background: color-mix(in srgb, #ef4444 12%, var(--panel));
    border-color: color-mix(in srgb, #ef4444 28%, var(--border));
}
.operator-activity-pill--dashboard,
.operator-activity-pill--online {
    color: #17894f;
    background: color-mix(in srgb, #2fbf71 12%, var(--panel));
    border-color: color-mix(in srgb, #2fbf71 28%, var(--border));
}
.operator-activity-pill--agenda {
    color: #5b21b6;
    background: color-mix(in srgb, #8b5cf6 12%, var(--panel));
    border-color: color-mix(in srgb, #8b5cf6 28%, var(--border));
}
.operator-activity-pill--paused {
    color: #c97b00;
    background: color-mix(in srgb, #f39c12 12%, var(--panel));
    border-color: color-mix(in srgb, #f39c12 28%, var(--border));
}
.operator-activity-pill--offline {
    color: #c0392b;
    background: color-mix(in srgb, #d93025 10%, var(--panel));
    border-color: color-mix(in srgb, #d93025 24%, var(--border));
}
.operator-activity-wait {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.15rem;
    padding-left: 0.45rem;
    border-left: 1px solid color-mix(in srgb, currentColor 20%, var(--border));
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.operator-activity-wait__time {
    min-width: 2.5rem;
}
.dashboard-empty-state {
    text-align: center;
    padding: 34px 20px;
    color: var(--muted);
}
.dashboard-empty-state__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary-soft) 70%, var(--panel));
    border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--border));
}
.dashboard-empty-state strong {
    display: block;
    color: var(--text);
    margin-bottom: 6px;
}
.dashboard-empty-state p {
    margin: 0;
    font-size: .9rem;
}

@media (max-width: 1280px) {
    .kpi-grid--dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpi-grid--operator { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .filter-grid,
    .live-filters-grid.dashboard-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .kpi-grid--dashboard,
    .kpi-grid--operator {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-section-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .filter-grid,
    .live-filters-grid.dashboard-filters {
        grid-template-columns: 1fr;
    }
}

/* ── Outbound CLI guide (Canali) ── */
.outbound-cli-guide__steps {
    margin: 12px 0 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 10px;
}
.outbound-cli-guide__example {
    margin: 12px 0 0;
}

/* ── IVR Builder ── */
.ivr-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ivr-create-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.ivr-create-form input,
.ivr-create-form select {
    width: auto;
    min-width: 160px;
}
.ivr-did-assign-form select {
    min-width: 180px;
}
.ivr-audio-preview {
    width: 180px;
    height: 32px;
}
.ivr-editor-card {
    padding: 16px 18px 20px;
}
.ivr-editor-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.ivr-editor-title {
    margin: 8px 0 0;
}
.ivr-editor-head-actions {
    display: flex;
    gap: 8px;
}
.ivr-meta-form {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-soft) 18%, var(--panel));
}
.ivr-editor-layout {
    display: grid;
    grid-template-columns: 220px 1fr 280px;
    gap: 12px;
    min-height: 560px;
}
.ivr-palette,
.ivr-inspector,
.ivr-canvas-wrap {
    padding: 12px;
    margin: 0;
    min-height: 560px;
}
.ivr-palette h4,
.ivr-inspector h4 {
    margin: 0 0 8px;
}
.ivr-palette-help {
    font-size: .82rem;
    margin: 0 0 10px;
}
.ivr-palette-list {
    display: grid;
    gap: 8px;
}
.ivr-palette-node {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    color: var(--text);
    padding: 8px 10px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
}
.ivr-palette-node:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary-soft) 60%, var(--panel));
    color: var(--primary);
}
.ivr-placeholder-help {
    margin-top: 16px;
    font-size: .78rem;
    color: var(--muted);
}
.ivr-placeholder-help ul {
    margin: 8px 0 0;
    padding-left: 18px;
}
.ivr-canvas-wrap {
    overflow: hidden;
    position: relative;
}
.ivr-drawflow {
    width: 100%;
    height: 540px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--border) 35%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.ivr-drawflow .drawflow .drawflow-node {
    min-width: 170px;
    border-radius: 12px;
    border-width: 2px;
    background: var(--panel);
    box-shadow: var(--shadow);
}
.ivr-drawflow .drawflow .drawflow-node .ivr-node-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .82rem;
    padding: 2px 0;
}
.ivr-drawflow .drawflow .drawflow-node.ivr-node-incoming {
    border-color: #3b82f6;
    background: color-mix(in srgb, #3b82f6 8%, var(--panel));
    border-radius: 999px 999px 18px 18px;
}
.ivr-drawflow .drawflow .drawflow-node.ivr-node-query {
    border-color: #2563eb;
    background: color-mix(in srgb, #2563eb 8%, var(--panel));
    border-radius: 999px;
}
.ivr-drawflow .drawflow .drawflow-node.ivr-node-condition {
    border-color: #7c3aed;
    background: color-mix(in srgb, #7c3aed 8%, var(--panel));
    transform: rotate(0deg);
}
.ivr-drawflow .drawflow .drawflow-node.ivr-node-playback {
    border-color: #0d9f6e;
    background: color-mix(in srgb, #0d9f6e 8%, var(--panel));
}
.ivr-drawflow .drawflow .drawflow-node.ivr-node-action {
    border-color: #d97706;
    background: color-mix(in srgb, #d97706 8%, var(--panel));
}
.ivr-drawflow .drawflow .drawflow-node.ivr-node-hangup {
    border-color: #dc2626;
    background: color-mix(in srgb, #dc2626 8%, var(--panel));
}
.ivr-drawflow .connection .main-path {
    stroke: #4b6cb7;
    stroke-width: 3px;
}
.ivr-drawflow .ivr-output-true {
    background: #22c55e !important;
}
.ivr-drawflow .ivr-output-false {
    background: #ef4444 !important;
}
.ivr-inspector-form label {
    margin-bottom: 8px;
}
.ivr-inspector-form textarea {
    width: 100%;
    min-height: 110px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
}

@media (max-width: 1200px) {
    .ivr-editor-layout {
        grid-template-columns: 1fr;
    }
    .ivr-drawflow {
        height: 420px;
    }
}

.campaign-dialer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}
.campaign-dialer-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--panel) 92%, var(--primary) 8%);
}
.campaign-dialer-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.campaign-dialer-card__head h4 {
    margin: 0;
    font-size: 1rem;
}
.campaign-dialer-card__status {
    margin-top: 10px;
    font-size: .84rem;
    color: var(--muted);
}
.campaign-dialer-card__status.is-error {
    color: var(--danger, #dc2626);
}
.campaign-dialer-buffer {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.campaign-dialer-buffer__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
}
.campaign-dialer-buffer__meta {
    display: grid;
    gap: 2px;
}
.campaign-dialer-buffer__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.campaign-dialer-buffer__empty {
    padding: 10px 0;
}
.form-subsection-title {
    margin: 0 0 6px;
    font-size: .95rem;
}
.campaign-dialer-settings-card {
    margin-top: 14px;
}
.campaign-dialer-settings-card .form-stacked-pairs {
    margin-top: 12px;
}
.campaign-dialer-mode-row {
    max-width: none;
}
.campaign-dialer-mode-pair {
    grid-template-columns: minmax(0, 280px) minmax(0, 220px);
    max-width: 560px;
}
.campaign-dialer-mode-pair:has(.js-predictive-buffer-wrap.is-hidden) {
    grid-template-columns: minmax(0, 280px);
}
.campaign-dialer-mode-hint {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--border);
    background: color-mix(in srgb, var(--primary) 6%, var(--panel));
}
.campaign-edit-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.campaign-edit-form > .grid.two-col {
    gap: 14px;
    margin: 0;
}
.campaign-edit-section {
    --section-accent: var(--primary);
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--section-accent) 22%, var(--border));
    background: color-mix(in srgb, var(--section-accent) 9%, var(--panel));
    border-radius: var(--radius-md);
    box-shadow: none;
}
.campaign-edit-section h4 {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--section-accent) 18%, var(--border));
    color: color-mix(in srgb, var(--section-accent) 72%, var(--text));
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.campaign-edit-section--base { --section-accent: #3b82f6; }
.campaign-edit-section--outcomes { --section-accent: #059669; }
.campaign-edit-section--phones { --section-accent: #d97706; }
.campaign-edit-section--recording { --section-accent: #7c3aed; }
.campaign-edit-section--dialer { --section-accent: #0891b2; }
.campaign-edit-section--channels { --section-accent: #db2777; }
body.dark .campaign-edit-section {
    background: color-mix(in srgb, var(--section-accent) 16%, var(--panel));
    border-color: color-mix(in srgb, var(--section-accent) 32%, var(--border));
}
body.dark .campaign-edit-section h4 {
    color: color-mix(in srgb, var(--section-accent) 55%, var(--text));
}
.campaign-edit-form__actions {
    margin-top: 14px;
}
.campaign-edit-base-fields {
    margin-top: 0;
}
.campaign-edit-base-fields .form-pair--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc(50% - 6px);
}
.campaign-edit-base-fields .inline-checkbox-label {
    padding-top: 0;
    min-height: 0;
}
.campaign-edit-base-fields label small.field-hint {
    font-weight: 400;
}
@media (max-width: 900px) {
    .campaign-edit-base-fields .form-pair--single {
        max-width: none;
    }
}
.campaign-predictive-advanced {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed color-mix(in srgb, var(--section-accent, #0891b2) 22%, var(--border));
}
.campaign-predictive-layout {
    display: grid;
    gap: 12px;
}
.campaign-predictive-panel {
    --predictive-accent: #0891b2;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--predictive-accent) 20%, var(--border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--predictive-accent) 5%, var(--panel));
}
.campaign-predictive-panel--dialing { --predictive-accent: #0891b2; }
.campaign-predictive-panel--preassign { --predictive-accent: #6366f1; }
.campaign-predictive-panel--drop { --predictive-accent: #d97706; }
.campaign-predictive-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.campaign-predictive-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--predictive-accent) 14%, var(--panel));
    color: color-mix(in srgb, var(--predictive-accent) 78%, var(--text));
    font-size: 1.1rem;
    flex-shrink: 0;
}
.campaign-predictive-panel__title {
    margin: 0 0 2px;
    font-size: .9rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--predictive-accent) 72%, var(--text));
}
.campaign-predictive-panel__subtitle {
    margin: 0;
    font-size: .78rem;
    line-height: 1.35;
}
.predictive-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.predictive-metric-grid--drop {
    margin-top: 12px;
    margin-bottom: 0;
}
.predictive-metric {
    display: grid;
    gap: 6px;
    margin: 0;
    font-weight: inherit;
    color: inherit;
}
.predictive-metric--wide {
    grid-column: 1 / -1;
}
.predictive-metric__label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
}
.predictive-metric input {
    width: 100%;
}
.predictive-metric__hint {
    display: block;
    margin: 0;
    font-size: .74rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--muted);
}
.predictive-slider-field {
    display: grid;
    gap: 8px;
}
.predictive-slider-field--wide {
    grid-column: 1 / -1;
}
.predictive-slider-field__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.predictive-slider-field__value {
    font-size: .9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--predictive-accent, var(--primary)) 78%, var(--text));
    white-space: nowrap;
}
.predictive-slider-field__range {
    width: 100%;
    height: 28px;
    margin: 0;
    cursor: pointer;
    accent-color: color-mix(in srgb, var(--predictive-accent, var(--primary)) 82%, #2563eb);
}
.predictive-slider-field__range:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.predictive-toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.predictive-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--predictive-accent, #0891b2) 16%, var(--border));
    border-radius: 10px;
    background: var(--panel);
    cursor: pointer;
    font-weight: inherit;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.predictive-toggle-card:hover {
    border-color: color-mix(in srgb, var(--predictive-accent, #0891b2) 35%, var(--border));
}
.predictive-toggle-card--featured {
    margin-top: 4px;
}
.predictive-toggle-card__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.predictive-toggle-card__name {
    font-size: .84rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.predictive-toggle-card__hint {
    font-size: .74rem;
    line-height: 1.35;
    color: var(--muted);
}
.campaign-field-spacer {
    display: grid;
    gap: 6px;
    align-content: start;
}
.campaign-field-spacer__label {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    min-height: 1.02rem;
}
.campaign-field-spacer__control {
    min-height: 42px;
}
.campaign-dialer-settings-card .field-hint {
    display: block;
    min-height: 2.4rem;
    margin-top: 4px;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--muted);
}
.campaign-dialer-settings-card .field-hint--empty {
    visibility: hidden;
    user-select: none;
}
.campaign-dialer-settings-card .form-pair {
    align-items: end;
}
.campaign-dialer-settings-card .toggle-field {
    min-height: 42px;
    margin-top: 0;
}
.campaign-predictive-panel .field-hint {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
}
.toggle-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--panel);
}
.toggle-field__label {
    font-size: .9rem;
}
.toggle-switch {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.toggle-switch__track {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 35%, var(--border));
    transition: background .2s ease;
}
.toggle-switch__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    transition: transform .2s ease;
}
.toggle-switch input:checked + .toggle-switch__track {
    background: var(--primary);
}
.toggle-switch input:checked + .toggle-switch__track::after {
    transform: translateX(20px);
}
@media (max-width: 1100px) {
    .predictive-metric-grid,
    .predictive-toggle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .predictive-metric-grid,
    .predictive-toggle-grid {
        grid-template-columns: 1fr;
    }
    .campaign-dialer-mode-pair {
        grid-template-columns: 1fr;
        max-width: none;
    }
}

/* Barra di stato operatore (fissa in basso) */
body.has-status-bar .app-shell {
    padding-bottom: 34px;
}
.operator-status-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 32px;
    padding: 0 14px;
    background: #e6e6e6;
    border-top: 1px solid #c8c8c8;
    color: #333;
    font-size: 12px;
    line-height: 1.2;
}
.operator-status-bar__left,
.operator-status-bar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.operator-status-bar__left {
    justify-self: start;
    overflow: hidden;
}
.operator-status-bar__center {
    justify-self: center;
    max-width: min(520px, 42vw);
    padding: 2px 10px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #444;
}
.operator-status-bar__center.is-busy {
    color: #b45309;
}
.operator-status-bar__center.is-wrapup {
    color: #1d4ed8;
}
.operator-status-bar__right {
    justify-self: end;
}
.operator-status-bar__segment {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.operator-status-bar__sep {
    width: 1px;
    height: 14px;
    background: #b0b0b0;
    flex-shrink: 0;
}
.operator-status-bar__icon-btn {
    border: 0;
    background: transparent;
    color: #555;
    padding: 2px 4px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}
.operator-status-bar__icon-btn:hover {
    color: var(--primary);
}
.operator-status-bar__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 3px;
    padding: 0;
    cursor: default;
    color: #fff;
    font-size: 13px;
}
.operator-status-bar__phone.is-offline {
    background: #9a9a9a;
}
.operator-status-bar__phone.is-online {
    background: #22c55e;
}
.operator-status-bar__phone.is-busy {
    background: #f59e0b;
}
.operator-status-bar__webrtc-label {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #444;
}
.operator-status-bar__link {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.operator-status-bar__link:hover {
    color: var(--primary);
}

.audio-wizard-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.audio-wizard-modal.is-hidden {
    display: none;
}
.audio-wizard-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.audio-wizard-modal__panel {
    position: relative;
    width: min(520px, 100%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}
.audio-wizard-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.audio-wizard-modal__head h2 {
    margin: 0;
    font-size: 18px;
}
.audio-wizard-modal__close {
    border: 0;
    background: transparent;
    font-size: 20px;
    color: #888;
    cursor: pointer;
}
.audio-wizard-modal__body {
    padding: 16px 18px;
    display: grid;
    gap: 14px;
}
.audio-wizard-field {
    display: grid;
    gap: 6px;
    font-size: 13px;
}
.audio-wizard-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}
.audio-wizard-meter {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 12px;
}
.audio-wizard-meter__track {
    height: 8px;
    background: #ececec;
    border-radius: 999px;
    overflow: hidden;
}
.audio-wizard-meter__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #facc15, #f59e0b);
    transition: width 80ms linear;
}
.audio-wizard-test {
    justify-self: start;
    color: var(--primary);
}
.audio-wizard-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    background: #f5f5f5;
    border-top: 1px solid var(--border);
}
body.audio-wizard-open {
    overflow: hidden;
}

.page-ready .topbar {
    display: none;
}
.page-ready .content {
    padding: 0;
}

.operator-ready-screen {
    margin: 0;
    padding: 0;
    background: var(--panel);
    border: 0;
    box-shadow: none;
    overflow: hidden;
}
.operator-ready-screen__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px 22px;
    background: var(--panel);
}
.operator-ready-screen__title-wrap {
    min-width: 0;
}
.operator-ready-screen__title {
    margin: 0 0 10px;
    font-size: clamp(1.65rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
}
.operator-ready-screen__subtitle {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}
.operator-ready-screen__timer-box {
    flex-shrink: 0;
    min-width: 168px;
    padding: 18px 22px;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    background: #e9e9e9;
    text-align: center;
}
.operator-ready-screen__timer-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #666;
}
.operator-ready-screen__timer {
    display: block;
    font-size: clamp(1.75rem, 2.4vw, 2.15rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: #111;
}
.operator-ready-screen__banner {
    padding: 9px 32px;
    background: #d9e8f7;
    color: #2f6fad;
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.4;
    border: 0;
}
.operator-ready-screen__wait-hint {
    margin-left: 0.35rem;
    color: #1d5f99;
}
.operator-ready-screen__wait-hint strong {
    font-variant-numeric: tabular-nums;
}
.operator-ready-screen__extra {
    padding: 18px 32px 24px;
    color: var(--text);
    font-size: .95rem;
}
.operator-ready-screen__extra p {
    margin: 0;
}
.operator-ready-screen__extra--actions {
    padding-top: 22px;
}

/* Live agent board (supervisor) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.live-agent-board {
    position: relative;
    padding-bottom: 0;
}
.live-agent-board__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 14px;
}
.live-agent-board__toolbar {
    margin: 0;
}
.live-agent-board__toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.live-agent-board__filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary-soft) 75%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
}
.live-agent-board__refresh-label select {
    min-width: 52px;
    padding: 6px 8px;
    font-size: .82rem;
}
.live-agent-board__body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 0;
    min-height: 360px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--panel);
}
.live-agent-board.is-sidebar-collapsed .live-agent-board__body {
    grid-template-columns: 0 minmax(0, 1fr);
}
.live-agent-board.is-sidebar-collapsed .live-agent-board__sidebar {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
.live-agent-board__sidebar {
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 55%, var(--panel));
    overflow: auto;
    max-height: 70vh;
    transition: opacity .2s ease;
}
.live-agent-sidebar__section {
    border-bottom: 1px solid var(--border);
}
.live-agent-sidebar__section:last-child {
    border-bottom: 0;
}
.live-agent-sidebar__folder {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 700;
    font-size: .82rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.live-agent-sidebar__folder .live-agent-sidebar__caret {
    transition: transform .15s ease;
}
.live-agent-sidebar__folder:not(.is-open) .live-agent-sidebar__caret {
    transform: rotate(-90deg);
}
.live-agent-sidebar__tree {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
}
.live-agent-sidebar__tree.is-hidden {
    display: none;
}
.live-agent-sidebar__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 28px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .82rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.live-agent-sidebar__item:hover {
    background: color-mix(in srgb, var(--primary-soft) 45%, transparent);
}
.live-agent-sidebar__item.is-active {
    background: color-mix(in srgb, var(--primary) 14%, var(--panel));
    color: var(--primary);
    font-weight: 700;
}
.live-agent-board__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.live-agent-board.is-filtered .live-agent-board__main {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, var(--border));
}
.live-agent-board.is-filtered .live-agent-board__table-wrap {
    background: color-mix(in srgb, var(--primary-soft) 8%, var(--panel));
}
.live-agent-board.is-sidebar-compact .live-agent-sidebar__folder {
    padding-top: 8px;
    padding-bottom: 8px;
}
.live-agent-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--border);
}
.live-agent-summary__item {
    flex: 1 1 0;
    min-width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-right: 1px solid color-mix(in srgb, currentColor 12%, var(--border));
    color: #fff;
    text-align: center;
}
.live-agent-summary__item:last-child {
    border-right: 0;
}
.live-agent-summary__count {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.live-agent-summary__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    opacity: .95;
}
.live-agent-summary__item--logged { background: #6b7280; }
.live-agent-summary__item--ready { background: #16a34a; }
.live-agent-summary__item--assign { background: #ca8a04; }
.live-agent-summary__item--incall { background: #7c3aed; }
.live-agent-summary__item--wac { background: #0ea5e9; }
.live-agent-summary__item--agenda { background: #ea580c; }
.live-agent-board__table-wrap {
    border: 0;
    border-radius: 0;
    flex: 1;
}
.live-agent-board-table {
    font-size: .84rem;
}
.live-agent-board-table th,
.live-agent-board-table td {
    padding: 8px 10px;
    vertical-align: middle;
}
.live-agent-board-table__dots-col,
.live-agent-board-table__mode-col {
    width: 36px;
    text-align: center;
}
.live-agent-board-row__actions {
    white-space: nowrap;
}
.live-agent-board-action {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.live-agent-board-action:hover:not(:disabled) {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
.live-agent-board-action--danger:hover:not(:disabled) {
    color: #b42318;
    border-color: color-mix(in srgb, #ef4444 35%, var(--border));
}
.live-agent-board-action:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.live-agent-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}
.live-agent-dot--muted { background: #d1d5db; }
.live-agent-dot--logged { background: #9ca3af; }
.live-agent-dot--ready { background: #16a34a; }
.live-agent-dot--assign { background: #ca8a04; }
.live-agent-dot--incall { background: #7c3aed; }
.live-agent-dot--wac { background: #0ea5e9; }
.live-agent-dot--agenda { background: #ea580c; }
.live-agent-dot--offline { background: #d1d5db; }
.live-agent-login {
    font-weight: 800;
    letter-spacing: .02em;
    font-size: .82rem;
}
.live-agent-login--logged { color: #6b7280; }
.live-agent-login--ready { color: #16a34a; }
.live-agent-login--assign { color: #ca8a04; }
.live-agent-login--incall { color: #7c3aed; }
.live-agent-login--wac { color: #0ea5e9; }
.live-agent-login--agenda { color: #ea580c; }
.live-agent-mode-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 1rem;
}
.live-agent-mode-icon--ready { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, var(--panel)); }
.live-agent-mode-icon--assign { color: #ca8a04; background: color-mix(in srgb, #ca8a04 12%, var(--panel)); }
.live-agent-mode-icon--incall { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, var(--panel)); }
.live-agent-mode-icon--agenda { color: #ea580c; background: color-mix(in srgb, #ea580c 12%, var(--panel)); }
.live-agent-mode-icon--wac { color: #0ea5e9; background: color-mix(in srgb, #0ea5e9 12%, var(--panel)); }
.live-agent-mode-icon--dashboard { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, var(--panel)); }
.live-agent-mode-icon--contacts { color: #0891b2; background: color-mix(in srgb, #0891b2 12%, var(--panel)); }
.live-agent-mode-icon--calls { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, var(--panel)); }
.live-agent-mode-icon--orders { color: #db2777; background: color-mix(in srgb, #db2777 12%, var(--panel)); }
.live-agent-mode-icon--campaigns { color: #7c3aed; background: color-mix(in srgb, #7c3aed 12%, var(--panel)); }
.live-agent-mode-icon--lists { color: #0d9488; background: color-mix(in srgb, #0d9488 12%, var(--panel)); }
.live-agent-mode-icon--blacklist { color: #dc2626; background: color-mix(in srgb, #dc2626 12%, var(--panel)); }
.live-agent-mode-icon--products { color: #d97706; background: color-mix(in srgb, #d97706 12%, var(--panel)); }
.live-agent-mode-icon--services { color: #2563eb; background: color-mix(in srgb, #2563eb 12%, var(--panel)); }
.live-agent-mode-icon--channels { color: #4f46e5; background: color-mix(in srgb, #4f46e5 12%, var(--panel)); }
.live-agent-mode-icon--users { color: #9333ea; background: color-mix(in srgb, #9333ea 12%, var(--panel)); }
.live-agent-mode-icon--settings { color: #4b5563; background: color-mix(in srgb, #4b5563 12%, var(--panel)); }
.live-agent-mode-icon--sites { color: #059669; background: color-mix(in srgb, #059669 12%, var(--panel)); }
.live-agent-mode-icon--stats,
.live-agent-mode-icon--profile { color: #4b5563; background: color-mix(in srgb, #4b5563 12%, var(--panel)); }
.live-agent-mode-icon--logged { color: #6b7280; background: color-mix(in srgb, #6b7280 12%, var(--panel)); }
.live-agent-mode-icon--offline { color: #9ca3af; background: color-mix(in srgb, #9ca3af 12%, var(--panel)); }
.live-agent-elapsed {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: .82rem;
    color: var(--text);
}
.live-agent-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .82rem;
    color: var(--muted);
}
.live-agent-timer.is-active {
    font-weight: 700;
}
.live-agent-timer--pause.is-active {
    color: #b45309;
}
.live-agent-timer--wait.is-active {
    color: #2563eb;
}
.live-agent-board-row__group,
.live-agent-board-row__site,
.live-agent-board-row__campaign {
    color: var(--muted);
    font-size: .82rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-agent-board__badge {
    position: absolute;
    top: 18px;
    right: 18px;
}
@media (max-width: 960px) {
    .live-agent-board__body {
        grid-template-columns: 1fr;
    }
    .live-agent-board__sidebar {
        max-height: 220px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .live-agent-board.is-sidebar-collapsed .live-agent-board__sidebar {
        display: none;
    }
    .live-agent-board.is-sidebar-collapsed .live-agent-board__body {
        grid-template-columns: 1fr;
    }
    .live-agent-board__badge {
        position: static;
        margin: 12px 0 0;
        display: inline-flex;
    }
}