:root {
    color-scheme: light;
    --bg: #eef2f6;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-tint: #ecfdf5;
    --line: #d9e2ec;
    --line-strong: #c5d0dc;
    --text: #17212f;
    --muted: #64748b;
    --faint: #94a3b8;
    --brand: #10b981;
    --brand-strong: #047857;
    --brand-soft: #d1fae5;
    --blue: #2563eb;
    --violet: #4f46e5;
    --danger: #dc2626;
    --warning: #d97706;
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, .12);
    --topbar: 68px;
    --menu: 292px;
    --menu-medium: 220px;
    --menu-compact: 78px;
}

* { box-sizing: border-box; }
html {
    min-width: 320px;
    overflow-x: hidden;
}
body {
    margin: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Segoe UI, Arial, sans-serif;
    font-size: 14px;
}

h1, h2, h3 { margin: 0; letter-spacing: 0; }
h1 { font-size: 22px; line-height: 1.2; }
h2 { font-size: 16px; line-height: 1.25; }
h3 { font-size: 14px; line-height: 1.25; }
p { line-height: 1.45; }

input, select, textarea, button {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 9px 10px;
    font: inherit;
    min-width: 0;
}
input, select, textarea {
    background: #fff;
    color: var(--text);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(16, 185, 129, .22);
    border-color: var(--brand);
}
button {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    cursor: pointer;
    font-weight: 800;
}
button:hover { background: var(--brand-strong); }
button:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: .62;
}

.topbar {
    min-height: var(--topbar);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    background: #0f172a;
    color: #fff;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 12;
}
.topbar strong { display: block; font-size: 18px; }
.topbar span { color: #cbd5e1; font-size: 13px; }
.simulate { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.simulate input { background: rgba(255,255,255,.95); }
.session-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.session-user a {
    color: #0f172a;
    background: #fff;
    border-radius: var(--radius);
    padding: 7px 10px;
    text-decoration: none;
    font-weight: 800;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at top left, #14532d, #0f172a 45%, #020617);
}
.login-card {
    width: min(420px, calc(100vw - 28px));
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.login-card h1 { margin-bottom: 8px; }
.login-card p, .login-card small, .muted { color: var(--muted); }

.login-brand-image {
    display: block;
    width: min(220px, 100%);
    max-height: 92px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 18px;
}

.first-access-card > span {
    color: var(--crm-blue);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.first-access-card a {
    display: inline-flex;
    margin-top: 14px;
    color: var(--crm-blue-dark);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.contract-page {
    place-items: start center;
    padding: 34px 14px;
}

.contract-card {
    width: min(960px, 100%);
    display: grid;
    gap: 18px;
    background: #ffffff;
    border-radius: 10px;
    padding: 26px;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.contract-card > header {
    display: grid;
    gap: 10px;
}

.contract-card > header > span {
    color: var(--crm-blue);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.contract-card > header p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
}

.contract-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.contract-card dl div {
    min-width: 0;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.contract-card dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.contract-card dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-weight: 800;
}

.contract-text {
    max-height: min(52vh, 620px);
    overflow: auto;
    display: grid;
    gap: 14px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
}

.contract-text article {
    display: grid;
    gap: 6px;
}

.contract-text h2 {
    color: #0f172a;
    font-size: 15px;
}

.contract-text p {
    margin: 0;
    color: #334155;
}

.contract-accept-form {
    display: grid;
    gap: 12px;
}

.contract-accept-form label {
    display: grid;
    gap: 6px;
    font-weight: 800;
}

.contract-checkbox {
    grid-template-columns: auto 1fr;
    align-items: start;
    padding: 12px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

.contract-checkbox input {
    margin-top: 3px;
}

.contract-card > a {
    width: fit-content;
    color: var(--crm-blue-dark);
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 760px) {
    .contract-card {
        padding: 18px;
    }

    .contract-card dl {
        grid-template-columns: 1fr;
    }
}
.alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: var(--radius);
    padding: 10px;
    margin: 14px 0;
}

.with-menu {
    margin-left: var(--menu);
    transition: margin-left .18s ease;
}
.app-menu {
    position: fixed;
    left: 0;
    top: var(--topbar);
    bottom: 0;
    width: var(--menu);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .5) transparent;
    scrollbar-gutter: stable;
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 16px 0;
    z-index: 8;
    transition: width .18s ease;
}

.app-menu::-webkit-scrollbar {
    width: 8px;
    height: 0;
}

.app-menu::-webkit-scrollbar-track {
    background: transparent;
}

.app-menu::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .38);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.app-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, .58);
}
.menu-toggle {
    width: calc(100% - 32px);
    margin: 0 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--surface-soft);
    color: #334155;
    border-color: var(--line);
}
.menu-toggle:hover { background: #e2e8f0; color: #0f172a; }
.menu-toggle span { font-weight: 900; }
.menu-toggle b { font-size: 12px; }
.app-menu section { margin-bottom: 22px; }
.app-menu section > b {
    display: block;
    color: var(--brand);
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 26px 10px;
}
.app-menu a {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 44px;
    padding: 0 24px;
    color: #1f2937;
    text-decoration: none;
    border-left: 4px solid transparent;
}
.app-menu a span {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 900;
}
.app-menu a.on, .app-menu a:hover {
    border-left-color: var(--brand);
    color: var(--brand-strong);
    background: var(--surface-tint);
}
.app-menu a.on span, .app-menu a:hover span {
    background: var(--brand-soft);
    color: var(--brand-strong);
}
body.menu-collapsed .with-menu { margin-left: var(--menu-compact); }
body.menu-collapsed .app-menu { width: var(--menu-compact); }
body.menu-collapsed .menu-toggle {
    width: 42px;
    height: 42px;
    margin: 0 18px 18px;
    justify-content: center;
    padding: 0;
}
body.menu-collapsed .menu-toggle span { font-size: 0; }
body.menu-collapsed .menu-toggle span::after { content: ">>"; font-size: 13px; }
body.menu-collapsed .menu-toggle b,
body.menu-collapsed .app-menu section > b { display: none; }
body.menu-collapsed .app-menu a {
    justify-content: center;
    padding: 0;
    gap: 0;
    font-size: 0;
}
body.menu-collapsed .app-menu a span { font-size: 11px; width: 42px; }

.layout {
    display: grid;
    grid-template-columns: minmax(330px, 430px) minmax(460px, 1fr);
    gap: 14px;
    padding: 14px;
    height: calc(100vh - var(--topbar));
}
.page {
    padding: 18px;
    min-height: calc(100vh - var(--topbar));
}
.inbox, .chat, .lead-panel, .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.inbox, .chat, .lead-panel {
    min-height: 0;
    overflow: auto;
}
.panel { padding: 16px; margin-bottom: 14px; }
.panel p { margin: 8px 0 12px; }

.section-title, .chat-head, .tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
}
.section-title {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}
.section-title span,
.stats span,
.queue small,
.channel b,
.ticket span,
.ticket small,
.chat-head span,
.message small,
.empty p {
    color: var(--muted);
    font-size: 12px;
}

.grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}
.wide-panel { grid-column: span 2; }
.stack { display: grid; gap: 9px; }
.stack textarea { min-height: 88px; resize: vertical; }
.compact-form { margin-bottom: 12px; }
.compact-form textarea { min-height: 66px; }
.inline, .filters { display: flex; gap: 8px; flex-wrap: wrap; }
.check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.stats div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--surface-soft);
}
.stats b { display: block; font-size: 20px; }
.queue, .channel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.queue i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.queue small, .channel b { margin-left: auto; }

.inbox-tools {
    display: grid;
    grid-template-columns: 42px 42px 1fr 120px;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}
.icon-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #334155;
    background: var(--surface-soft);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 22px;
}
.inbox-tools label {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--line);
    background: #fbfdff;
}
.tabs a {
    color: var(--muted);
    text-align: center;
    text-decoration: none;
    padding: 13px 8px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 900;
    border-bottom: 2px solid transparent;
}
.tabs a.on {
    color: var(--brand-strong);
    border-bottom-color: var(--brand);
    background: #fff;
}
.tabs b, .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    color: var(--brand-strong);
    background: var(--brand-soft);
    font-size: 11px;
}
.filters {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.filters input, .filters select, .filters button { width: 100%; }

.ticket-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: stretch;
    border-bottom: 1px solid var(--line);
}
.ticket-row.active,
.ticket-row:hover { background: #f0fdf4; }
.ticket-row.live-new {
    background: #ecfdf5;
}
.ticket {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 10px 13px 14px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.ticket > div:not(.avatar) {
    min-width: 0;
}
.ticket strong, .ticket span { display: block; }
.ticket strong small { color: var(--brand); font-size: 11px; }
.ticket span {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
}
.ticket em {
    display: inline-block;
    margin-top: 6px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}
.ticket aside { text-align: right; flex: 0 0 66px; }
.ticket aside b {
    display: block;
    color: var(--blue);
    font-size: 11px;
    line-height: 1.2;
}
.ticket-actions {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 7px;
    padding-right: 6px;
}
.ticket-actions form { margin: 0; }
.transfer-actions form:first-child {
    width: 26px;
}
.transfer-actions details {
    position: relative;
}
.transfer-actions summary {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #2563eb;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}
.transfer-actions summary::-webkit-details-marker {
    display: none;
}
.transfer-actions summary:hover {
    background: rgba(15, 23, 42, .06);
}
.transfer-popover {
    position: absolute;
    top: -8px;
    right: 30px;
    z-index: 5;
    display: grid;
    grid-template-columns: 150px 38px;
    gap: 6px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.transfer-popover select {
    width: 150px;
    height: 30px;
    padding: 4px 7px;
    font-size: 12px;
}
.ticket-actions button,
.chat-actions button.accept {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    line-height: 1;
}
.ticket-actions button.accept,
.chat-actions button.accept {
    color: #16a34a;
}
.ticket-actions button.close {
    color: #ef4444;
}
.ticket-actions button.transfer {
    width: 38px;
    height: 30px;
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    font-size: 11px;
}
.ticket-actions button:hover,
.chat-actions button.accept:hover {
    background: rgba(15, 23, 42, .06);
}
.chat-actions button.accept {
    width: auto;
    min-width: 70px;
    height: 31px;
    padding: 0 10px;
    border-radius: var(--radius);
    border: 1px solid #bbf7d0;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
}
.avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #38bdf8, #0f766e);
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
}

.chat {
    display: flex;
    flex-direction: column;
}
.chat-head {
    justify-content: flex-start;
    background: #fff;
}
.contact-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
}
.contact-trigger h2 { margin-bottom: 2px; }
.contact-trigger:hover h2 { color: var(--brand-strong); }
.chat-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 12px;
}
.chat-actions form.transfer-form {
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-actions form.transfer-form select {
    min-height: 31px;
    max-width: 150px;
    padding: 5px 8px;
}
.chat-actions span, .chat-actions button {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px 8px;
    background: var(--surface-soft);
    color: #374151;
    font: inherit;
    font-weight: 800;
}
.chat-actions button {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}
.tag-row {
    display: grid;
    grid-template-columns: 1fr 140px 160px 120px 70px 80px;
    background: #fbfdff;
}
.messages {
    flex: 1;
    overflow: auto;
    padding: 18px;
    background:
        linear-gradient(rgba(248,250,252,.84), rgba(248,250,252,.84)),
        repeating-linear-gradient(45deg, #e2e8f0 0 1px, transparent 1px 18px);
}
.message {
    max-width: 72%;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.message p { margin: 5px 0 0; white-space: pre-wrap; }
.message small .status,
.message-status {
    margin-left: 6px;
    color: var(--muted);
    font-weight: 700;
}
.message.out, .message.bot {
    margin-left: auto;
    background: var(--brand-soft);
    border-color: #a7f3d0;
}
.message.system {
    margin-left: auto;
    margin-right: auto;
    background: #fff7ed;
}
.composer {
    display: grid;
    grid-template-columns: 180px 110px 1fr 120px;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid var(--line);
    background: #fff;
}
.composer textarea {
    resize: none;
    min-height: 70px;
}
.sign {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}
.flash {
    margin: 10px 14px 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-weight: 700;
}
.flash.success {
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
.flash.error {
    color: #9f1239;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

.attendance-bridge-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 14px 0;
    padding: 12px 14px;
    color: #7f1d1d;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    font-size: 13px;
}

.attendance-bridge-alert strong {
    flex: 0 0 auto;
    font-size: 14px;
}

.attendance-bridge-alert span {
    flex: 1 1 auto;
    color: #991b1b;
}

.attendance-bridge-alert code {
    flex: 0 0 auto;
    padding: 6px 9px;
    color: #10243a;
    background: rgba(15, 23, 42, .06);
    border-radius: 8px;
    white-space: nowrap;
}

.attendance-bridge-alert a {
    flex: 0 0 auto;
    color: #7f1d1d;
    font-weight: 800;
    text-decoration: underline;
}

.attendance-bridge-alert button {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: #7f1d1d;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(127, 29, 29, .22);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.attendance-bridge-alert button:disabled {
    cursor: wait;
    opacity: .72;
}

.attendance-bridge-alert.is-session_disconnected {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.attendance-bridge-alert.is-session_disconnected span,
.attendance-bridge-alert.is-session_disconnected a,
.attendance-bridge-alert.is-session_disconnected button {
    color: #92400e;
}

@media (max-width: 760px) {
    .attendance-bridge-alert {
        align-items: flex-start;
        flex-direction: column;
    }
}

.lead-panel {
    position: fixed;
    right: 0;
    top: var(--topbar);
    bottom: 0;
    width: min(420px, 94vw);
    display: flex;
    flex-direction: column;
    z-index: 20;
    transform: translateX(105%);
    transition: transform .18s ease;
    box-shadow: -18px 0 38px rgba(15, 23, 42, .16);
}
.lead-panel.open { transform: translateX(0); }
.lead-panel header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
}
.close-panel {
    margin-left: auto;
    background: var(--surface-soft);
    color: #334155;
    border-color: var(--line);
}
.lead-panel h3 { margin: 0 0 10px; font-size: 14px; }
.lead-panel section {
    padding: 14px;
    border-bottom: 1px solid var(--line);
}
.lead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}
.lead-actions a {
    color: #4338ca;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: var(--radius);
    padding: 7px 9px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}
.info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #eef2f7;
}
.info-row span { color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chips span {
    background: var(--surface-tint);
    border: 1px solid #bbf7d0;
    color: var(--brand-strong);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
}
.timeline article {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 8px;
    padding-bottom: 12px;
}
.timeline i {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 0 4px #eef2ff;
}
.timeline strong, .timeline small { display: block; }
.timeline p { margin: 4px 0; color: #4b5563; }
.timeline small { color: var(--muted); font-size: 11px; }

.automation-diagnostic {
    background: #fbfdff;
}

.automation-diagnostic-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.automation-diagnostic-decision {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    background: #eff6ff;
}

.automation-diagnostic-decision header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.automation-diagnostic-decision span,
.automation-diagnostic-decision small {
    color: #4f6b8c;
    font-size: 11px;
    font-weight: 750;
}

.automation-diagnostic-decision strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 13px;
}

.automation-diagnostic-decision p {
    margin: 6px 0 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.45;
}

.automation-diagnostic-facts {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.automation-diagnostic-facts section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .74);
}

.automation-diagnostic-facts section > span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1e3a8a;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.automation-diagnostic-facts dl {
    display: grid;
    grid-template-columns: minmax(96px, .56fr) minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    align-items: start;
}

.automation-diagnostic-facts dt {
    color: #4f6b8c;
    font-size: 10px;
    font-weight: 750;
}

.automation-diagnostic-facts dd {
    min-width: 0;
    margin: 0;
    color: #1e293b;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.automation-diagnostic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.automation-diagnostic-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    color: #075985;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
}

.automation-diagnostic-actions a:hover {
    color: #0c4a6e;
    background: #bae6fd;
}

.automation-diagnostic-decision.is-answered {
    border-color: #86efac;
    border-left-color: #16a34a;
    background: #f0fdf4;
}

.automation-diagnostic-decision.is-scheduled {
    border-color: #93c5fd;
    border-left-color: #2563eb;
    background: #eff6ff;
}

.automation-diagnostic-decision.is-none {
    border-color: #fde68a;
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.automation-diagnostic-decision.is-ignored {
    border-color: #cbd5e1;
    border-left-color: #64748b;
    background: #f8fafc;
}

.automation-diagnostic-summary div,
.automation-diagnostic-checks article,
.automation-diagnostic-events div {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.automation-diagnostic-summary div {
    padding: 9px 10px;
}

.automation-diagnostic-summary span,
.automation-diagnostic-events span,
.automation-diagnostic-events small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.automation-diagnostic-summary b {
    display: block;
    margin-top: 3px;
    color: var(--ink);
    font-size: 12px;
}

.automation-diagnostic-checks {
    display: grid;
    gap: 8px;
}

.automation-diagnostic-checks article {
    padding: 10px;
    border-left-width: 4px;
}

.automation-diagnostic-checks article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.automation-diagnostic-checks strong,
.automation-diagnostic-events strong {
    color: var(--ink);
    font-size: 12px;
}

.automation-diagnostic-checks article span {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.automation-diagnostic-checks p {
    margin: 7px 0 0;
    color: #4b5563;
    font-size: 12px;
    line-height: 1.45;
}

.automation-diagnostic-checks .is-ok {
    border-left-color: #16a34a;
}

.automation-diagnostic-checks .is-ok span {
    color: #166534;
    background: #dcfce7;
}

.automation-diagnostic-checks .is-pending {
    border-left-color: #f59e0b;
}

.automation-diagnostic-checks .is-pending span {
    color: #92400e;
    background: #fef3c7;
}

.automation-diagnostic-checks .is-blocked {
    border-left-color: #ef4444;
}

.automation-diagnostic-checks .is-blocked span {
    color: #991b1b;
    background: #fee2e2;
}

.automation-diagnostic-checks .is-disabled {
    border-left-color: #94a3b8;
}

.automation-diagnostic-checks .is-disabled span {
    color: #475569;
    background: #e2e8f0;
}

.automation-diagnostic-events {
    margin-top: 12px;
}

.automation-diagnostic-events summary {
    cursor: pointer;
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 800;
}

.automation-diagnostic-events div {
    margin-top: 8px;
    padding: 8px 10px;
}

.automation-diagnostic-events small {
    margin-top: 4px;
    color: #9f1239;
}

.code, .qrbox {
    display: block;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    margin: 10px 0;
    color: #334155;
}
.session-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.session-actions button { padding: 7px 9px; font-size: 12px; }
.qr-image {
    display: block;
    width: min(260px, 100%);
    aspect-ratio: 1;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    margin-top: 10px;
}
.qrbox small { display: block; color: var(--muted); margin-top: 8px; }

.kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 14px;
    overflow-x: auto;
}
.kanban-col {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    min-height: 420px;
    padding: 12px;
}
.kanban-col h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.kanban-col h2 i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.deal {
    display: block;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
}
.deal strong, .deal span, .deal small { display: block; }
.deal span, .deal small { color: var(--muted); font-size: 12px; margin-top: 5px; }

.metric-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.metric-line b { color: var(--brand-strong); }
.table-list { display: grid; gap: 8px; }
.table-list div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    background: #fff;
}
.table-list small {
    grid-column: 1 / -1;
    color: var(--muted);
}
.profiles-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.permission-form fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    background: #fff;
}
.permission-form legend {
    padding: 0 6px;
    font-weight: 900;
    color: #334155;
}
.empty {
    margin: auto;
    text-align: center;
    max-width: 420px;
    color: var(--muted);
}

.button-link, .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--brand);
    text-decoration: none;
    font-weight: 800;
}
.button-link {
    color: #052e16;
    background: var(--brand);
}
.button-secondary {
    color: #334155;
    background: #fff;
    border-color: var(--line-strong);
}
.toast {
    position: fixed;
    top: 0;
    right: 18px;
    z-index: 40;
    background: #fff;
    border-left: 5px solid var(--brand);
    box-shadow: var(--shadow-md);
    padding: 12px 18px;
    color: #166534;
    font-weight: 800;
}
.connections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    align-items: start;
}

.connection-bridge-health {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 8px;
}

.connection-bridge-health div {
    display: grid;
    gap: 4px;
}

.connection-bridge-health strong {
    color: #10243a;
    font-size: 14px;
}

.connection-bridge-health span {
    color: #5b6b83;
    font-size: 13px;
}

.connection-bridge-health-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #64748b;
    font-size: 12px;
}

.connection-bridge-health-meta b {
    color: inherit;
    font-weight: 800;
}

.connection-bridge-health code {
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.06);
    color: #10243a;
    font-size: 12px;
    white-space: nowrap;
}

.connection-bridge-health.is-offline {
    border-color: #fecaca;
    background: #fff5f5;
}

.connection-bridge-health.is-offline strong {
    color: #991b1b;
}

.connection-bridge-health.is-online {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.connection-bridge-health.is-online strong {
    color: #166534;
}

.connection-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.connection-card header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}
.connection-card h2 { font-size: 17px; }
.connection-card header span,
.connection-info span {
    color: var(--muted);
    font-size: 12px;
}
.round-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #2ddc7f;
    color: #064e3b;
    font-weight: 900;
}
.pill {
    margin-left: auto;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
}
.pill.ok {
    color: #166534;
    background: #bbf7d0;
}
.connection-body {
    display: grid;
    gap: 12px;
    padding: 18px;
}
.status-line {
    display: grid;
    grid-template-columns: 24px minmax(90px, auto) 1fr;
    gap: 10px;
    align-items: center;
}
.status-mark {
    width: 18px;
    height: 18px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background: #111827;
}
.status-mark.pending {
    clip-path: polygon(15% 15%, 85% 15%, 85% 85%, 15% 85%, 15% 65%, 0 65%, 0 35%, 15% 35%);
}
.status-mark.connected { background: #111827; }
meter {
    width: 100%;
    height: 8px;
    accent-color: var(--brand);
}
.connection-info {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 10px;
    align-items: center;
}
.connection-info b {
    font-weight: 600;
}

.connection-triage-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #cfe0ee;
    border-radius: 8px;
    background: #f6fbff;
}

.connection-triage-summary div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.connection-triage-summary span {
    color: #5b6b83;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.connection-triage-summary strong {
    color: #10243a;
    font-size: 14px;
    font-weight: 800;
}

.connection-triage-summary small {
    color: #61708a;
    line-height: 1.35;
}

.connection-triage-summary > b {
    padding: 5px 9px;
    color: #0f5f8a;
    background: #eaf6fd;
    border: 1px solid #c8dfef;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.connection-triage-summary.is-manual {
    background: #fff8ed;
    border-color: #f0d6aa;
}

.connection-triage-summary.is-manual > b {
    color: #92400e;
    background: #fff4dd;
    border-color: #f0d6aa;
}

.connection-triage-checklist {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #fbfdff;
}

.connection-triage-checklist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.connection-triage-checklist-head span {
    color: #5b6b83;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.connection-triage-checklist-head b {
    padding: 4px 8px;
    color: #0f5f8a;
    background: #eaf6fd;
    border: 1px solid #c8dfef;
    border-radius: 999px;
    font-size: 12px;
}

.connection-triage-checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.connection-triage-checklist-grid article {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #ffffff;
}

.connection-triage-checklist-grid article::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #94a3b8;
}

.connection-triage-checklist-grid article.is-ok::before {
    background: #16a34a;
}

.connection-triage-checklist-grid article.is-warning::before {
    background: #f59e0b;
}

.connection-triage-checklist-grid strong {
    color: #10243a;
    font-size: 12px;
    font-weight: 850;
}

.connection-triage-checklist-grid small {
    color: #61708a;
    font-size: 11px;
    line-height: 1.35;
}

.connection-queue-diagnostics {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #fbfdff;
}

.connection-queue-diagnostics-head,
.connection-queue-diagnostic {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.connection-queue-diagnostics-head {
    justify-content: space-between;
}

.connection-queue-diagnostics-head span {
    color: #5b6b83;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.connection-queue-diagnostics-head b {
    color: #34445a;
    font-size: 12px;
}

.connection-queue-stale-warning {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid #f0d6aa;
    border-radius: 8px;
    background: #fffaf1;
}

.connection-queue-stale-warning strong {
    color: #8a5a00;
    font-size: 12px;
}

.connection-queue-stale-warning span {
    color: #6b5a3a;
    font-size: 12px;
    line-height: 1.4;
}

.connection-queue-diagnostic {
    padding: 10px;
    border: 1px solid #dce7f1;
    border-radius: 8px;
    background: #fff;
}

.connection-queue-diagnostic > i {
    flex: 0 0 auto;
    width: 10px;
    height: 38px;
    border-radius: 999px;
    background: var(--queue-color, var(--brand));
}

.connection-queue-diagnostic > div {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.connection-queue-diagnostic strong {
    color: #10243a;
    font-size: 13px;
}

.connection-queue-diagnostic small,
.connection-queue-diagnostic span {
    color: #60708a;
    font-size: 12px;
    line-height: 1.35;
}

.connection-queue-diagnostic ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    max-width: 150px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.connection-queue-diagnostic li {
    padding: 3px 7px;
    border: 1px solid #c8dfef;
    border-radius: 999px;
    color: #0f5f8a;
    background: #eaf6fd;
    font-size: 11px;
    font-weight: 800;
}

.connection-queue-diagnostic.is-warning {
    border-color: #f0d6aa;
    background: #fffaf1;
}

.connection-queue-diagnostic.is-empty {
    border-style: dashed;
}

.connection-queue-diagnostic.is-empty > div {
    padding-left: 0;
}
.danger-outline {
    color: var(--danger);
    background: #fff;
    border-color: #f87171;
}
.danger-outline:hover {
    color: #fff;
    background: var(--danger);
}
.connection-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding: 12px 18px;
}
.connection-card footer a,
.link-danger {
    color: var(--brand);
    background: transparent;
    border: 0;
    padding: 0;
    text-decoration: none;
    font-weight: 800;
}
.link-danger { color: #e11d48; }
.qr-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, .82);
}
.qr-modal[hidden] { display: none; }
.qr-dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 400px) minmax(260px, 400px);
    width: min(800px, 96vw);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(0,0,0,.34);
}
.qr-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: #fff;
    color: #64748b;
    border: 0;
    font-size: 28px;
}
.qr-help, .qr-code-area {
    padding: 30px;
}
.qr-help {
    border-right: 1px solid var(--line);
}
.whatsapp-mark {
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    margin-bottom: 18px;
    border: 12px solid #25d366;
    border-radius: 999px;
    color: #25d366;
    font-size: 58px;
    transform: rotate(-18deg);
}
.qr-help h2 {
    font-size: 26px;
    line-height: 1.45;
    margin-bottom: 22px;
}
.qr-help ol {
    display: grid;
    gap: 18px;
    margin: 0;
    padding-left: 20px;
}
.qr-code-area {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
}
.qr-code-area img {
    width: min(276px, 100%);
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
}
.qr-code-area p,
.qr-code-area small {
    margin: 0;
    color: var(--muted);
}
.connection-form {
    display: grid;
    gap: 12px;
    max-width: 980px;
}
.form-band {
    display: grid;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}
.form-band label {
    display: grid;
    gap: 6px;
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 800;
}
.form-band input,
.form-band select,
.form-band textarea {
    color: var(--text);
    font-weight: 400;
}
.form-row {
    display: grid;
    gap: 14px;
}
.form-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: rgba(238, 242, 246, .92);
    border-top: 1px solid var(--line);
    padding: 14px 0;
}

@media (max-width: 1100px) {
    .layout { grid-template-columns: 1fr; height: auto; }
    .topbar { align-items: flex-start; flex-direction: column; position: static; }
    .simulate { justify-content: flex-start; }
    .with-menu { margin-left: 0; }
    .app-menu { position: static; width: auto; border-right: 0; }
    .composer, .tag-row { grid-template-columns: 1fr; }
    .wide-panel { grid-column: span 1; }
    .profiles-grid { grid-template-columns: 1fr; }
    .qr-dialog, .form-row.two, .form-row.three { grid-template-columns: 1fr; }
    .qr-help { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Conexões: cards e ações no mesmo padrão visual do painel admin. */
.connections-page {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 400;
}

.connections-page .ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.connections-page .ui-btn svg,
.connections-page .action-link svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.connections-page .ui-btn-primary {
    color: #ffffff;
    background: #2b6f9f;
    border: 1px solid #2b6f9f;
}

.connections-page .ui-btn-primary:hover {
    color: #ffffff;
    background: #245f88;
    border-color: #245f88;
    box-shadow: 0 3px 8px rgba(43, 111, 159, .18);
}

.connections-page .ui-btn-light {
    color: #2b6f9f;
    background: #eef7fc;
    border: 1px solid #c9dfed;
}

.connections-page .ui-btn-light:hover {
    color: #245f88;
    background: #e2f0f8;
    border-color: #a9cfe4;
}

.connections-page .ui-btn-danger {
    color: #b42318;
    background: #fff7f6;
    border: 1px solid #f6c4be;
}

.connections-page .ui-btn-danger:hover {
    color: #ffffff;
    background: #d92d20;
    border-color: #d92d20;
}

.connections-page .ui-btn-disabled {
    color: #607388;
    background: #eef2f6;
    border: 1px solid #d4dee8;
    cursor: not-allowed;
    box-shadow: none;
}

.connections-page .connection-limit-panel {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 340px) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #c9dfed;
    border-radius: 10px;
    background: #f6fbfe;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.connections-page .connection-limit-panel strong,
.connections-page .connection-limit-panel b {
    color: #102033;
    font-weight: 700;
}

.connections-page .connection-limit-panel span {
    display: block;
    margin-top: 2px;
    color: #496176;
    font-size: 12px;
}

.connections-page .connection-limit-panel meter {
    width: 100%;
    height: 12px;
}

.connections-page .connection-limit-panel.is-full {
    border-color: #e7c2bf;
    background: #fff8f7;
}

.connections-page .connections-grid {
    gap: 18px;
}

.connections-page .connection-card {
    border-color: #d8e2ec;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.connections-page .connection-card header {
    padding: 16px;
}

.connections-page .connection-card h2 {
    font-size: 16px;
    font-weight: 700;
}

.connections-page .round-avatar {
    color: #ffffff;
    background: linear-gradient(135deg, #2b6f9f, #25a4c8);
    font-weight: 650;
}

.connections-page .pill.ok {
    color: #176d98;
    background: #eaf4fb;
    font-weight: 600;
}

.connections-page .connection-body {
    gap: 11px;
    padding: 16px;
}

.connections-page .connection-alert {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid #d8e2ec;
    border-radius: 10px;
    background: #f8fafc;
}

.connections-page .connection-alert strong {
    display: block;
    margin-bottom: 2px;
    color: #102033;
    font-size: 13px;
    font-weight: 700;
}

.connections-page .connection-alert span {
    display: block;
    color: #496176;
    font-size: 12px;
    line-height: 1.4;
}

.connections-page .connection-alert.connected {
    border-color: #b9dce8;
    background: #edf8fc;
}

.connections-page .connection-alert.waiting {
    border-color: #c8deef;
    background: #f1f7fc;
}

.connections-page .connection-alert.error {
    border-color: #f2c7c3;
    background: #fff7f6;
}

.connections-page .status-mark {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    clip-path: none;
    background: #94a3b8;
    box-shadow: inset 0 0 0 4px #eef2f6;
}

.connections-page .status-mark.connected {
    background: #2596be;
    box-shadow: inset 0 0 0 4px #d9f0f7;
}

.connections-page .status-mark.waiting {
    background: #d89518;
    box-shadow: inset 0 0 0 4px #fff1cc;
}

.connections-page .status-mark.error {
    background: #d92d20;
    box-shadow: inset 0 0 0 4px #fee4e2;
}

.connections-page .status-mark.offline {
    background: #94a3b8;
    box-shadow: inset 0 0 0 4px #eef2f6;
}

.connections-page .status-line {
    display: grid;
    grid-template-columns: minmax(112px, auto) 1fr;
    gap: 10px;
    align-items: center;
    color: #496176;
    font-size: 12px;
}

.connections-page .session-status,
.connections-page .connection-info b {
    font-weight: 600;
}

.connections-page .connection-error b {
    color: #b42318;
}

.connections-page .connection-restart-guard b {
    color: #b45309;
}

.connections-page .connection-error.is-empty b {
    color: #496176;
}

.connections-page .connection-restart-guard.is-empty b {
    color: #496176;
}

.connections-page .connection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.connections-page .connection-card footer {
    padding: 11px 16px;
}

.connections-page .action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: #2b6f9f;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.connections-page .action-link.danger {
    color: #b42318;
}

.connection-edit-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(920px, 96vw);
    max-height: calc(100vh - 120px);
    overflow: hidden;
    gap: 0;
    max-width: none;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
}

.connection-edit-dialog > header {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f2f8fc, #ffffff);
    border-bottom: 1px solid #d8e2ec;
}

.connection-edit-ops {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.connection-edit-ops .ui-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
}

.connection-edit-body {
    min-height: 0;
    overflow-y: auto;
    padding: 14px 0 18px;
}

.connection-edit-dialog > header span {
    display: block;
    color: #176d98;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.connection-edit-dialog > header h2 {
    margin: 2px 0 0;
    color: #10243a;
    font-size: 22px;
    font-weight: 800;
}

.connection-edit-dialog .form-band {
    margin: 0 20px 14px;
}

.connection-edit-dialog .form-band h2 {
    margin: 0 0 4px;
    color: #10243a;
    font-size: 15px;
    font-weight: 800;
}

.connection-queue-picker {
    display: grid;
    gap: 10px;
}

.connection-queue-picker-head {
    display: grid;
    gap: 10px;
}

.connection-queue-picker-head > div:first-child {
    display: grid;
    gap: 3px;
}

.connection-queue-picker-head span {
    color: var(--crm-blue-dark);
    font-size: .85rem;
    font-weight: 800;
}

.connection-queue-picker-head small,
.connection-queue-picker > small {
    color: #61708a;
    font-size: .8rem;
}

.connection-queue-picker-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.connection-queue-picker-tools input {
    width: 100%;
    min-width: 0;
}

.connection-queue-picker-tools .btn {
    min-height: 38px;
    padding: 8px 12px;
}

.connection-queue-mode {
    padding: 10px 12px;
    color: #92400e;
    background: #fff8ed;
    border: 1px solid #f0d6aa;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.connection-queue-mode.is-auto,
.connection-queue-mode.is-menu {
    color: #0f5f8a;
    background: #eaf6fd;
    border-color: #c8dfef;
}

.connection-queue-picker-list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    max-height: 210px;
    overflow: auto;
    padding: 12px;
    border: 1px solid #d2dfec;
    border-radius: 8px;
    background: #f8fbfe;
}

.connection-queue-picker-list .crm-client-check {
    min-height: 40px;
    padding: 9px 10px;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
    background: #ffffff;
}

.connection-queue-picker-list .crm-client-check:hover {
    border-color: #9fc1dd;
    background: #f1f7fc;
}

.connection-queue-picker-list .crm-client-check span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connection-edit-dialog > footer.form-actions {
    z-index: 3;
    margin-top: 0;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #d8e2ec;
}

.connections-page .qr-dialog {
    border-radius: 12px;
}

.connections-page .qr-help h2 {
    font-size: 22px;
    font-weight: 700;
}

.diagnostics-modal {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, .72);
}

.diagnostics-modal[hidden] {
    display: none;
}

.diagnostics-dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(220px, 1fr);
    width: min(840px, 96vw);
    max-height: min(760px, 92vh);
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8e2ec;
    border-radius: 12px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
}

.diagnostics-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f2f8fc, #ffffff);
    border-bottom: 1px solid #d8e2ec;
}

.diagnostics-dialog header span {
    display: block;
    color: #176d98;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.diagnostics-dialog header h2 {
    margin: 3px 0 0;
    color: #102033;
    font-size: 20px;
}

.diagnostics-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #d8e2ec;
}

.diagnostics-summary div {
    min-width: 0;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.diagnostics-summary span {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 11px;
}

.diagnostics-summary b {
    display: block;
    overflow: hidden;
    color: #102033;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diagnostics-advice {
    padding: 0 20px 16px;
    border-bottom: 1px solid #d8e2ec;
}

.diagnostics-advice article {
    padding: 12px 14px;
    border: 1px solid #d7e7f5;
    border-radius: 8px;
    background: #f3f8fc;
}

.diagnostics-advice .diagnostics-warning {
    border-color: #f5d09a;
    background: #fff8eb;
}

.diagnostics-advice strong {
    display: block;
    margin-bottom: 4px;
    color: #102033;
}

.diagnostics-advice p {
    margin: 0;
    color: #496176;
    font-size: 13px;
    line-height: 1.45;
}

.diagnostics-log {
    display: grid;
    gap: 8px;
    align-content: start;
    overflow: auto;
    padding: 16px 20px 20px;
    background: #f4f7fb;
}

.diagnostics-log article {
    display: grid;
    grid-template-columns: 150px 190px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid #d8e2ec;
    border-radius: 8px;
    background: #ffffff;
}

.diagnostics-log time,
.diagnostics-log strong {
    color: #34495e;
    font-size: 12px;
}

.diagnostics-log code {
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 12px;
    white-space: normal;
}

@media (max-width: 860px) {
    .connections-page .connection-limit-panel {
        grid-template-columns: 1fr;
    }

    .diagnostics-summary,
    .diagnostics-log article {
        grid-template-columns: 1fr;
    }
}

/* Visual refresh: interface operacional mais limpa e tipografia mais nitida. */
:root {
    --bg: #f3f6fa;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --surface-tint: #e8f8ef;
    --line: #d8e0ea;
    --line-strong: #b8c4d3;
    --text: #111827;
    --muted: #667085;
    --faint: #98a2b3;
    --brand: #16c784;
    --brand-strong: #079455;
    --brand-soft: #dff8eb;
    --blue: #2563eb;
    --violet: #635bff;
    --danger: #e11d48;
    --warning: #d97706;
    --radius: 7px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 14px 38px rgba(16, 24, 40, .14);
}

html {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
strong, b { font-weight: 650; }

input, select, textarea, button {
    border-color: #cfd8e3;
    border-radius: 7px;
    font-weight: 500;
}

input, select, textarea {
    background: #fff;
}

button, .button-link {
    background: var(--brand);
    border-color: var(--brand);
    color: #052e1b;
    box-shadow: none;
}

button:hover, .button-link:hover {
    background: #0fb878;
    border-color: #0fb878;
}

.topbar {
    min-height: 62px;
    background: #ffffff;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .03);
}

.topbar strong {
    font-size: 17px;
    letter-spacing: 0;
}

.topbar span {
    color: var(--muted);
    font-size: 12px;
}

.session-user span {
    color: #344054;
}

.session-user a {
    color: #344054;
    background: #f2f4f7;
    border: 1px solid #d0d5dd;
    box-shadow: none;
}

.simulate input {
    min-height: 36px;
    background: #f8fafc;
    border-color: #d0d5dd;
}

.simulate button {
    min-height: 36px;
    color: #052e1b;
}

.app-menu {
    top: var(--topbar);
    background: #fbfcfe;
    border-right-color: #d6dde8;
    box-shadow: 1px 0 0 rgba(16, 24, 40, .02);
}

.menu-toggle {
    background: #fff;
    border-color: #d6dde8;
    color: #344054;
    font-weight: 650;
}

.app-menu section > b {
    color: var(--brand-strong);
    letter-spacing: .02em;
}

.app-menu a {
    color: #253142;
    border-left-width: 3px;
    font-weight: 500;
}

.app-menu a span {
    background: #eef2f6;
    color: #51637a;
    border-radius: 6px;
}

.app-menu a.on, .app-menu a:hover {
    color: #064e3b;
    background: #e9f9f1;
    border-left-color: var(--brand);
}

.app-menu a.on span, .app-menu a:hover span {
    background: #d6f5e5;
    color: #067647;
}

.page {
    padding: 18px;
}

.section-title {
    border-color: #d6dde8;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.section-title h1 {
    font-size: 23px;
}

.section-title span {
    font-size: 12px;
    color: #53657a;
}

.connections-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
}

.connection-card {
    border-color: #d6dde8;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .12s ease, box-shadow .12s ease;
}

.connection-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .10);
}

.connection-card header {
    padding: 18px;
    background: #fff;
}

.connection-card h2 {
    font-size: 17px;
    line-height: 1.2;
}

.connection-card header span,
.connection-info span {
    color: #667085;
    font-size: 12px;
}

.round-avatar {
    background: #dff8eb;
    color: #067647;
    border: 1px solid #b7ebcf;
}

.connection-body {
    background: #fbfcfe;
}

.status-line {
    grid-template-columns: 20px minmax(100px, auto) 1fr;
}

.status-mark,
.status-mark.pending {
    width: 12px;
    height: 12px;
    clip-path: none;
    border-radius: 999px;
    background: #98a2b3;
}

.status-mark.connected {
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(22, 199, 132, .14);
}

meter {
    height: 6px;
}

.connection-info {
    grid-template-columns: 78px 1fr;
}

.connection-info b {
    color: #111827;
    font-weight: 600;
}

.connection-card footer {
    background: #fff;
}

.connection-card footer a,
.link-danger {
    font-weight: 650;
}

.button-secondary {
    color: #344054;
    background: #fff;
    border-color: #cfd8e3;
}

.danger-outline {
    color: var(--danger);
    background: #fff;
    border-color: #fda4af;
}

.toast {
    border-left-color: var(--brand);
    color: #067647;
}

.form-band {
    border-color: #d6dde8;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.form-band label {
    color: #344054;
}

.live-notice {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 45;
    display: grid;
    gap: 4px;
    min-width: 280px;
    max-width: min(380px, calc(100vw - 36px));
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #b7ebcf;
    border-left: 5px solid var(--brand);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.live-notice[hidden] {
    display: none;
}

.live-notice strong {
    color: #064e3b;
}

.live-notice span {
    color: var(--muted);
    font-size: 12px;
}

/* Atendimento: rodada visual operacional. */
.layout {
    grid-template-columns: minmax(380px, 456px) minmax(640px, 1fr);
    gap: 0;
    padding: 0;
    background: #eef3f7;
}

.inbox,
.chat {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.inbox {
    background: #fbfcfe;
    border-right: 1px solid #d4dde8;
}

.chat {
    background: #f8fafc;
}

.inbox-tools {
    grid-template-columns: 36px auto 1fr 118px;
    gap: 10px;
    min-height: 58px;
    padding: 10px 14px;
    background: #ffffff;
    border-bottom-color: #e1e7ef;
}

.icon-btn {
    width: 30px;
    height: 30px;
    color: #334155;
    background: #f4f7fb;
    border: 1px solid #d9e2ec;
    font-size: 18px;
    font-weight: 600;
}

.inbox-tools .badge {
    justify-self: start;
    margin-left: 0;
}

.inbox-tools label {
    color: #475467;
    font-size: 12px;
    font-weight: 650;
}

.inbox-tools select {
    height: 34px;
    padding: 6px 9px;
    background: #fff;
    font-size: 12px;
}

.tabs {
    background: #fff;
    border-bottom-color: #e1e7ef;
}

.tabs a {
    padding: 12px 6px 11px;
    color: #667085;
    font-size: 10px;
    letter-spacing: .03em;
}

.tabs a.on {
    color: #047857;
    background: #f7fffb;
    border-bottom-width: 3px;
}

.tabs b,
.badge {
    min-width: 20px;
    height: 20px;
    color: #065f46;
    background: #dcfce7;
    font-size: 10px;
}

.filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
    border-bottom-color: #e1e7ef;
}

.filters input,
.filters select,
.filters button {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 12px;
}

.filters input,
.filters button {
    grid-column: 1 / -1;
}

.ticket-row {
    grid-template-columns: minmax(0, 1fr) 40px;
    min-height: 94px;
    background: #fff;
    border-bottom-color: #e5ebf2;
    transition: background .12s ease, box-shadow .12s ease;
}

.ticket-row.active {
    background: #ecfdf5;
    box-shadow: inset 3px 0 0 #10b981;
}

.ticket-row:hover {
    background: #f6fbff;
}

.ticket-row.live-new {
    background: #f0fdf4;
}

.ticket {
    align-items: flex-start;
    gap: 11px;
    padding: 14px 8px 13px 14px;
}

.ticket .avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.ticket strong {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #101828;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket strong small {
    flex: 0 0 auto;
    color: #059669;
    font-size: 10px;
    font-weight: 800;
}

.ticket span {
    max-width: none;
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}

.ticket em {
    max-width: 160px;
    padding: 3px 8px;
    color: #075985;
    background: #e0f2fe;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket aside {
    flex: 0 0 70px;
    padding-top: 1px;
}

.ticket aside b {
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
}

.ticket aside small {
    display: block;
    margin-top: 7px;
    color: #98a2b3;
}

.ticket-actions {
    gap: 8px;
    padding: 0 8px 0 0;
}

.ticket-actions button,
.ticket-actions summary {
    width: 22px;
    height: 22px;
    font-size: 0;
}

.ticket-actions button.accept::before {
    content: "OK";
    color: #059669;
    font-size: 10px;
    font-weight: 900;
}

.ticket-actions button.close::before {
    content: "X";
    color: #e11d48;
    font-size: 12px;
    font-weight: 800;
}

.transfer-actions summary::before {
    content: ">";
    color: #2563eb;
    font-size: 15px;
    font-weight: 900;
}

.transfer-popover {
    top: -7px;
    right: 28px;
    grid-template-columns: 164px 40px;
    border-color: #cfd8e3;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .16);
}

.transfer-popover select {
    width: 164px;
}

.chat-head {
    min-height: 72px;
    padding: 12px 16px;
    background: #ffffff;
    border-bottom-color: #dfe7f0;
}

.chat-head .avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0ea5e9, #0f766e);
}

.contact-trigger h2 {
    color: #101828;
    font-size: 17px;
}

.contact-trigger span {
    color: #667085;
    font-size: 12px;
}

.chat-actions {
    gap: 7px;
}

.chat-actions span,
.chat-actions button,
.chat-actions form.transfer-form select {
    min-height: 32px;
    border-color: #d0d7e2;
    background: #fff;
    color: #334155;
    font-size: 12px;
}

.chat-actions button {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.chat-actions form:last-child button {
    color: #be123c;
    background: #fff1f2;
    border-color: #fecdd3;
}

.tag-row {
    grid-template-columns: minmax(180px, 1fr) 140px 150px 124px 64px 78px;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom-color: #dfe7f0;
}

.tag-row input,
.tag-row select,
.tag-row button {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 12px;
}

.messages {
    padding: 22px 24px;
    background:
        linear-gradient(rgba(248,250,252,.94), rgba(248,250,252,.94)),
        radial-gradient(circle at 15% 10%, rgba(14,165,233,.08), transparent 28%),
        radial-gradient(circle at 85% 90%, rgba(16,185,129,.09), transparent 30%);
}

.message {
    max-width: min(680px, 72%);
    padding: 10px 12px 11px;
    margin-bottom: 10px;
    border-color: #dbe3ec;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.message small {
    color: #667085;
}

.message p {
    color: #111827;
    font-size: 13px;
}

.message.out,
.message.bot {
    background: #dcfce7;
    border-color: #a7f3d0;
}

.message.system {
    max-width: min(520px, 82%);
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.message.system.system-event {
    max-width: min(560px, 86%);
    margin: 8px auto 12px;
    padding: 6px 12px;
    color: #64748b;
    background: rgba(255, 255, 255, .68);
    border-color: #dbeafe;
    border-radius: 999px;
    box-shadow: none;
    text-align: center;
}

.message.system.system-event small {
    display: none;
}

.message.system.system-event p {
    margin: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.message-status {
    color: #047857;
    font-size: 11px;
}

.automation-chip {
    display: inline-flex;
    align-items: center;
    min-height: 16px;
    margin-left: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #2b6f9f;
    background: transparent;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    vertical-align: 1px;
}

.automation-chip::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 5px;
    background: currentColor;
    border-radius: 999px;
    opacity: .7;
}

.composer {
    grid-template-columns: 170px 96px minmax(260px, 1fr) 104px;
    align-items: stretch;
    gap: 9px;
    padding: 12px 14px;
    background: #ffffff;
    border-top-color: #dfe7f0;
}

.composer select,
.composer textarea,
.composer button {
    border-color: #cfd8e3;
}

.composer textarea {
    min-height: 56px;
    max-height: 120px;
    padding: 10px 12px;
    line-height: 1.35;
}

.composer button {
    color: #052e1b;
    background: #16c784;
}

.lead-panel {
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}

@media (max-width: 1280px) {
    .layout {
        grid-template-columns: minmax(350px, 420px) minmax(520px, 1fr);
    }

    .tag-row {
        grid-template-columns: 1fr 132px 140px;
    }

    .tag-row input[type="number"],
    .tag-row button {
        grid-column: auto;
    }
}

@media (max-width: 1100px) {
    .layout {
        gap: 12px;
        padding: 12px;
    }

    .inbox,
    .chat {
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .filters,
    .composer,
    .tag-row {
        grid-template-columns: 1fr;
    }
}

/* IPX identity pass: azul/preto/cinza, tipografia mais leve e menos verde. */
:root {
    --bg: #eef3f7;
    --surface: #ffffff;
    --surface-soft: #f6f8fb;
    --surface-tint: #edf5fb;
    --line: #d7e1eb;
    --line-strong: #b7c8d8;
    --text: #151a22;
    --muted: #667085;
    --faint: #9aa8b7;
    --brand: #2b8dbb;
    --brand-strong: #176d98;
    --brand-soft: #e6f2f8;
    --blue: #2b8dbb;
    --danger: #d92d20;
}

body {
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
}

strong,
b,
button,
.app-menu a,
.tabs a,
.ticket em {
    font-weight: 600;
}

h1,
h2,
h3 {
    font-weight: 600;
}

input,
select,
textarea,
button {
    font-weight: 400;
}

button,
.button-link,
.composer button,
.filters button,
.tag-row button {
    color: #ffffff;
    background: #2b8dbb;
    border-color: #2b8dbb;
}

button:hover,
.button-link:hover,
.composer button:hover,
.filters button:hover,
.tag-row button:hover {
    background: #176d98;
    border-color: #176d98;
}

.topbar {
    min-height: 64px;
    background: #ffffff;
    color: #151a22;
    border-bottom: 1px solid #d7e1eb;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
}

.brand img {
    display: block;
    width: 132px;
    height: 38px;
    object-fit: contain;
    object-position: left center;
}

.topbar strong {
    font-size: 15px;
    font-weight: 600;
}

.topbar span {
    color: #667085;
    font-size: 12px;
}

.simulate input {
    background: #ffffff;
    border-color: #cbd7e4;
}

.simulate button {
    color: #ffffff;
    background: #151a22;
    border-color: #151a22;
}

.session-user a {
    color: #151a22;
    background: #f6f8fb;
}

.app-menu {
    background: #ffffff;
}

.app-menu section > b {
    color: #176d98;
    font-weight: 600;
}

.app-menu a.on,
.app-menu a:hover {
    color: #151a22;
    background: #edf5fb;
    border-left-color: #2b8dbb;
}

.app-menu a.on span,
.app-menu a:hover span {
    color: #176d98;
    background: #dcecf5;
}

.inbox {
    background: #ffffff;
}

.tabs a.on {
    color: #176d98;
    background: #ffffff;
    border-bottom-color: #2b8dbb;
}

.tabs b,
.badge {
    color: #176d98;
    background: #e6f2f8;
}

.filters {
    background: #f6f8fb;
}

.ticket-row.active {
    background: #edf5fb;
    box-shadow: inset 3px 0 0 #2b8dbb;
}

.ticket-row:hover {
    background: #f6f8fb;
}

.ticket-row.live-new {
    background: #edf5fb;
}

.ticket .avatar,
.chat-head .avatar,
.avatar {
    background: linear-gradient(135deg, #2b8dbb, #176d98);
}

.ticket strong {
    color: #111827;
    font-size: 13px;
    font-weight: 600;
}

.ticket strong small {
    color: #176d98;
    font-weight: 600;
}

.ticket span,
.ticket small,
.chat-head span,
.message small {
    color: #667085;
}

.ticket em {
    color: #176d98;
    background: #e6f2f8;
}

.ticket aside b {
    color: #176d98;
    font-weight: 600;
}

.ticket-actions button.accept::before {
    color: #176d98;
}

.ticket-actions button.close::before {
    color: #d92d20;
}

.transfer-actions summary::before {
    color: #176d98;
}

.chat-head,
.tag-row,
.composer {
    background: #ffffff;
}

.contact-trigger h2 {
    font-weight: 600;
}

.chat-actions button {
    color: #176d98;
    background: #e6f2f8;
    border-color: #bfd8e7;
}

.chat-actions form:last-child button {
    color: #b42318;
    background: #fff5f4;
    border-color: #fecdca;
}

.messages {
    background: #f6f8fb;
}

.message {
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

.message p {
    font-size: 13px;
}

.message.out,
.message.bot {
    background: #e6f2f8;
    border-color: #bfd8e7;
}

.message-status {
    color: #176d98;
}

.live-notice {
    border-color: #bfd8e7;
    border-left-color: #2b8dbb;
}

.live-notice strong {
    color: #176d98;
}

/* Ajuste de contraste: menu escuro e conversa com textura. */
.app-menu {
    background: #111820;
    border-right-color: #233142;
    box-shadow: 1px 0 0 rgba(0, 0, 0, .18);
}

.menu-toggle {
    background: #182331;
    border-color: #2b3a4b;
    color: #d8e4ef;
}

.menu-toggle:hover {
    background: #223247;
    color: #ffffff;
}

.app-menu section > b {
    color: #7ab8d9;
}

.app-menu a {
    color: #d8e4ef;
}

.app-menu a span {
    color: #a9bed0;
    background: #1b2837;
}

.app-menu a.on,
.app-menu a:hover {
    color: #ffffff;
    background: #1f3448;
    border-left-color: #4ba0ca;
}

.app-menu a.on span,
.app-menu a:hover span {
    color: #ffffff;
    background: #2b8dbb;
}

.chat {
    background: #ebe5dc;
}

.messages {
    background-color: #ebe5dc;
    background-image:
        linear-gradient(rgba(244, 240, 233, .72), rgba(244, 240, 233, .72)),
        url("/assets/chat-pattern.svg");
    background-repeat: repeat;
    background-size: 360px 360px;
}

.message {
    border-color: rgba(194, 185, 174, .55);
    box-shadow: 0 1px 1px rgba(17, 24, 39, .08);
}

.message.out,
.message.bot {
    background: #d9f5c8;
    border-color: #bde8a9;
}

.message.system {
    background: #fff6d8;
    border-color: #ead18f;
}

/* Configuracoes administrativas. */
.settings-page {
    background: #f6f8fb;
}

.settings-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 10px;
}

.settings-head h1 {
    color: #176d98;
    font-size: 24px;
}

.settings-head span {
    color: #667085;
}

.settings-head strong {
    align-self: center;
    color: #176d98;
    background: #e6f2f8;
    border: 1px solid #bfd8e7;
    border-radius: var(--radius);
    padding: 8px 10px;
}

.settings-tabs {
    display: flex;
    gap: 22px;
    padding: 0 20px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #d7e1eb;
}

.settings-tabs a {
    min-width: 130px;
    padding: 15px 8px 13px;
    color: #667085;
    border-bottom: 3px solid transparent;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

.settings-tabs a.on {
    color: #176d98;
    border-bottom-color: #2b8dbb;
}

.settings-form {
    padding: 6px 20px 30px;
    background: #ffffff;
}

.setting-line,
.setting-box {
    display: grid;
    gap: 6px;
    color: #667085;
    font-size: 12px;
    padding-top: 17px;
}

.setting-line select {
    width: 100%;
    border-width: 0 0 1px;
    border-radius: 0;
    border-color: #98a2b3;
    padding: 0 28px 8px 0;
    color: #151a22;
    background: #ffffff;
    font-size: 15px;
}

.setting-line:focus-within select {
    border-color: #2b8dbb;
    outline: 0;
}

.setting-box textarea {
    min-height: 96px;
    border-color: #b7c8d8;
    color: #151a22;
    font-size: 14px;
    line-height: 1.45;
}

.setting-box small {
    color: #667085;
}

.settings-actions {
    margin-top: 14px;
}

.settings-actions button {
    min-width: 172px;
}

.settings-placeholder {
    margin: 20px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #d7e1eb;
    border-radius: var(--radius);
}

.settings-placeholder h2 {
    margin-bottom: 8px;
}

/* Configurações v2: página administrativa menos crua. */
.settings-page {
    background: #eef3f7;
    padding: 22px;
}

.settings-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.settings-hero span {
    display: block;
    margin-bottom: 4px;
    color: #176d98;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
}

.settings-hero h1 {
    color: #111820;
    font-size: 26px;
}

.settings-hero p {
    margin: 5px 0 0;
    color: #667085;
}

.settings-hero strong {
    color: #176d98;
    background: #e6f2f8;
    border: 1px solid #bfd8e7;
    border-radius: 8px;
    padding: 9px 12px;
}

.settings-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid #d7e1eb;
    border-radius: 10px;
}

.settings-tabs a {
    min-width: 118px;
    padding: 10px 14px;
    color: #526173;
    border-radius: 8px;
    border-bottom: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    font-size: 13px;
    font-weight: 600;
}

.settings-tabs a.on {
    color: #ffffff;
    background: #176d98;
    border-bottom: 0;
}

.settings-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.settings-summary,
.settings-card,
.settings-placeholder {
    background: #ffffff;
    border: 1px solid #d7e1eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}

.settings-summary {
    position: sticky;
    top: 78px;
    display: grid;
    gap: 14px;
    padding: 18px;
}

.settings-summary h2,
.settings-card h2 {
    color: #111820;
    font-size: 17px;
}

.settings-summary p {
    margin: 0;
    color: #667085;
}

.settings-summary div {
    display: grid;
    gap: 3px;
    padding: 12px;
    background: #f6f8fb;
    border: 1px solid #e3eaf1;
    border-radius: 9px;
}

.settings-summary b {
    color: #176d98;
}

.settings-summary span {
    color: #667085;
    font-size: 12px;
}

.settings-summary button {
    min-height: 40px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 16px;
}

.settings-card {
    padding: 18px;
}

.settings-card.wide {
    grid-column: 1 / -1;
}

.settings-card header {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
}

.settings-card header span {
    color: #667085;
}

.settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-fields.two {
    margin-bottom: 14px;
}

.settings-fields label,
.settings-textarea {
    display: grid;
    gap: 6px;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
}

.settings-fields input,
.settings-fields select,
.settings-textarea textarea {
    width: 100%;
    color: #111820;
    background: #ffffff;
    border: 1px solid #cbd7e4;
    border-radius: 8px;
}

.settings-fields select {
    min-height: 39px;
    padding: 8px 10px;
}

.settings-textarea {
    margin-top: 14px;
}

.settings-textarea textarea {
    min-height: 90px;
    padding: 10px 12px;
    line-height: 1.45;
    resize: vertical;
}

.settings-textarea small {
    color: #667085;
    font-weight: 400;
}

.settings-placeholder {
    margin: 0;
    padding: 24px;
}

@media (max-width: 1180px) {
    .settings-shell {
        grid-template-columns: 1fr;
    }

    .settings-summary {
        position: static;
    }
}

/* Dark mode base para o shell SaaS. A camada final fica no fim do arquivo. */
html[data-bs-theme="dark"],
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1722;
    --surface: #121d2b;
    --surface-soft: #172434;
    --surface-tint: #17344b;
    --line: #26384d;
    --line-strong: #334a64;
    --text: #e7eef8;
    --muted: #a9b8ca;
    --faint: #7f91a6;
}

html[data-bs-theme="dark"] body,
html[data-theme="dark"] body,
html[data-bs-theme="dark"] .ipx-urbix-shell,
html[data-theme="dark"] .ipx-urbix-shell {
    background: var(--bg);
    color: var(--text);
}

html[data-bs-theme="dark"] .topbar,
html[data-theme="dark"] .topbar {
    color: var(--text);
    background: #0b1220;
    border-bottom-color: #23344a;
}

html[data-bs-theme="dark"] .topbar strong,
html[data-theme="dark"] .topbar strong,
html[data-bs-theme="dark"] .topbar-user-button strong,
html[data-theme="dark"] .topbar-user-button strong {
    color: var(--text);
}

html[data-bs-theme="dark"] .topbar span,
html[data-theme="dark"] .topbar span,
html[data-bs-theme="dark"] .session-user span,
html[data-theme="dark"] .session-user span {
    color: var(--muted);
}

html[data-bs-theme="dark"] .topbar-btn-light,
html[data-theme="dark"] .topbar-btn-light,
html[data-bs-theme="dark"] .topbar-notification,
html[data-theme="dark"] .topbar-notification,
html[data-bs-theme="dark"] .topbar-user-button,
html[data-theme="dark"] .topbar-user-button {
    color: var(--text);
    background: #111c2a;
    border-color: #2a3d53;
}

html[data-bs-theme="dark"] .topbar-btn-light:hover,
html[data-theme="dark"] .topbar-btn-light:hover,
html[data-bs-theme="dark"] .topbar-notification:hover,
html[data-theme="dark"] .topbar-notification:hover,
html[data-bs-theme="dark"] .topbar-notification.has-new-message,
html[data-theme="dark"] .topbar-notification.has-new-message,
html[data-bs-theme="dark"] .topbar-user-button:hover,
html[data-theme="dark"] .topbar-user-button:hover,
html[data-bs-theme="dark"] .topbar-user-button[aria-expanded="true"],
html[data-theme="dark"] .topbar-user-button[aria-expanded="true"] {
    color: #dff4ff;
    background: #17344b;
    border-color: #315b78;
}

html[data-bs-theme="dark"] .topbar-notification span,
html[data-theme="dark"] .topbar-notification span {
    color: #ffffff;
    border-color: #111c2a;
}

html[data-bs-theme="dark"] .topbar-user-menu,
html[data-theme="dark"] .topbar-user-menu,
html[data-bs-theme="dark"] .topbar-notification-menu,
html[data-theme="dark"] .topbar-notification-menu,
html[data-bs-theme="dark"] .ipx-layout-customizer,
html[data-theme="dark"] .ipx-layout-customizer {
    color: var(--text);
    background: #0f1722;
    border-color: #25384e;
}

html[data-bs-theme="dark"] .topbar-user-menu header,
html[data-theme="dark"] .topbar-user-menu header,
html[data-bs-theme="dark"] .topbar-notification-menu header,
html[data-theme="dark"] .topbar-notification-menu header,
html[data-bs-theme="dark"] .ipx-layout-customizer .offcanvas-header,
html[data-theme="dark"] .ipx-layout-customizer .offcanvas-header {
    background: #111c2a;
    border-color: #25384e !important;
}

html[data-bs-theme="dark"] .topbar-user-menu a,
html[data-theme="dark"] .topbar-user-menu a,
html[data-bs-theme="dark"] .topbar-notification-item,
html[data-theme="dark"] .topbar-notification-item,
html[data-bs-theme="dark"] .topbar-notification-empty,
html[data-theme="dark"] .topbar-notification-empty {
    color: var(--text);
    background: #111c2a;
    border-color: #25384e;
}

html[data-bs-theme="dark"] .topbar-user-menu a:hover,
html[data-theme="dark"] .topbar-user-menu a:hover,
html[data-bs-theme="dark"] .topbar-notification-item:hover,
html[data-theme="dark"] .topbar-notification-item:hover {
    background: #17344b;
}

html[data-bs-theme="dark"] .page,
html[data-theme="dark"] .page,
html[data-bs-theme="dark"] .finance-page,
html[data-theme="dark"] .finance-page,
html[data-bs-theme="dark"] .crm-clients-page,
html[data-theme="dark"] .crm-clients-page,
html[data-bs-theme="dark"] .crm-plans-page,
html[data-theme="dark"] .crm-plans-page,
html[data-bs-theme="dark"] .settings-page,
html[data-theme="dark"] .settings-page,
html[data-bs-theme="dark"] .dashboard-page,
html[data-theme="dark"] .dashboard-page {
    background: var(--bg);
}

html[data-bs-theme="dark"] .panel,
html[data-theme="dark"] .panel,
html[data-bs-theme="dark"] .card,
html[data-theme="dark"] .card,
html[data-bs-theme="dark"] .urbix-card,
html[data-theme="dark"] .urbix-card,
html[data-bs-theme="dark"] .urbix-modal-card,
html[data-theme="dark"] .urbix-modal-card,
html[data-bs-theme="dark"] .crm-client-dialog,
html[data-theme="dark"] .crm-client-dialog,
html[data-bs-theme="dark"] .crm-plan-dialog,
html[data-theme="dark"] .crm-plan-dialog,
html[data-bs-theme="dark"] .finance-dialog,
html[data-theme="dark"] .finance-dialog,
html[data-bs-theme="dark"] .settings-summary,
html[data-theme="dark"] .settings-summary,
html[data-bs-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-card,
html[data-bs-theme="dark"] .settings-placeholder,
html[data-theme="dark"] .settings-placeholder {
    color: var(--text);
    background: var(--surface) !important;
    border-color: var(--line) !important;
}

html[data-bs-theme="dark"] .crm-clients-hero,
html[data-theme="dark"] .crm-clients-hero,
html[data-bs-theme="dark"] .crm-plans-hero,
html[data-theme="dark"] .crm-plans-hero,
html[data-bs-theme="dark"] .finance-hero,
html[data-theme="dark"] .finance-hero,
html[data-bs-theme="dark"] .settings-hero,
html[data-theme="dark"] .settings-hero {
    background:
        linear-gradient(135deg, rgba(47, 120, 170, .2), rgba(18, 29, 43, 0) 60%),
        var(--surface) !important;
}

html[data-bs-theme="dark"] h1,
html[data-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-theme="dark"] h3,
html[data-bs-theme="dark"] strong,
html[data-theme="dark"] strong,
html[data-bs-theme="dark"] .settings-card h2,
html[data-theme="dark"] .settings-card h2 {
    color: var(--text);
}

html[data-bs-theme="dark"] p,
html[data-theme="dark"] p,
html[data-bs-theme="dark"] small,
html[data-theme="dark"] small,
html[data-bs-theme="dark"] .muted,
html[data-theme="dark"] .muted {
    color: var(--muted);
}

html[data-bs-theme="dark"] input,
html[data-theme="dark"] input,
html[data-bs-theme="dark"] select,
html[data-theme="dark"] select,
html[data-bs-theme="dark"] textarea,
html[data-theme="dark"] textarea {
    color: var(--text);
    background: #0f1722;
    border-color: #30445c;
}

html[data-bs-theme="dark"] input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-bs-theme="dark"] textarea::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #7f91a6;
}

html[data-bs-theme="dark"] .crm-client-dialog header,
html[data-theme="dark"] .crm-client-dialog header,
html[data-bs-theme="dark"] .crm-plan-dialog header,
html[data-theme="dark"] .crm-plan-dialog header,
html[data-bs-theme="dark"] .finance-dialog header,
html[data-theme="dark"] .finance-dialog header,
html[data-bs-theme="dark"] .urbix-modal-card header,
html[data-theme="dark"] .urbix-modal-card header,
html[data-bs-theme="dark"] .crm-client-dialog footer,
html[data-theme="dark"] .crm-client-dialog footer,
html[data-bs-theme="dark"] .crm-plan-dialog footer,
html[data-theme="dark"] .crm-plan-dialog footer,
html[data-bs-theme="dark"] .finance-dialog footer,
html[data-theme="dark"] .finance-dialog footer,
html[data-bs-theme="dark"] .urbix-modal-card footer,
html[data-theme="dark"] .urbix-modal-card footer {
    background: #111c2a !important;
    border-color: #25384e !important;
}

html[data-bs-theme="dark"] .finance-scope-grid article,
html[data-theme="dark"] .finance-scope-grid article,
html[data-bs-theme="dark"] .finance-metrics article,
html[data-theme="dark"] .finance-metrics article,
html[data-bs-theme="dark"] .crm-clients-metrics article,
html[data-theme="dark"] .crm-clients-metrics article,
html[data-bs-theme="dark"] .crm-plans-metrics article,
html[data-theme="dark"] .crm-plans-metrics article {
    background: var(--surface) !important;
    border-color: var(--line) !important;
}

/* Ponte visual com o template Urbix. As telas antigas continuam usando as
   classes IPX, mas o shell passa a respeitar tokens e preferências do Urbix. */
.ipx-urbix-shell {
    font-family: var(--bs-font-sans-serif, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    background: var(--body-bg);
    height: 100vh;
    overflow: hidden;
}

.ipx-urbix-shell #layout-wrapper {
    height: 100vh;
    overflow: hidden;
}

.ipx-urbix-shell .topbar.ipx-app-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1035;
    min-height: 64px;
    background: var(--bs-body-bg, #ffffff);
    color: var(--bs-body-color, #151a22);
    border-bottom: 1px solid var(--bs-border-color, #d7e1eb);
}

.ipx-urbix-shell .with-menu {
    height: calc(100vh - var(--topbar));
    margin-top: var(--topbar);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ipx-urbix-shell .layout.with-menu {
    overflow: hidden;
}

.ipx-urbix-shell .topbar.ipx-app-header .brand span {
    color: var(--bs-secondary-color, #667085);
}

.ipx-customizer-button {
    width: 38px;
    padding: 0;
}

.ipx-customizer-button i {
    font-size: 18px;
    line-height: 1;
}

.ipx-layout-customizer {
    width: min(420px, 100vw);
}

.ipx-layout-customizer .offcanvas-header {
    background: linear-gradient(135deg, #f3f9fd 0%, #ffffff 100%);
}

.ipx-layout-customizer .offcanvas-title {
    margin: 0;
    color: #101828;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
}

.ipx-customizer-section {
    display: grid;
    gap: 12px;
    padding: 0 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e4edf5;
}

.ipx-customizer-section:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.ipx-customizer-label {
    color: #35506b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ipx-radio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ipx-swatch-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.ipx-radio-card,
.ipx-swatch-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    color: #24364a;
    background: #f8fbfd;
    border: 1px solid #d8e5ef;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.ipx-radio-card:has(input:checked),
.ipx-swatch-card:has(input:checked) {
    color: #0b5f91;
    background: #eaf6fc;
    border-color: #2f94c5;
    box-shadow: 0 0 0 3px rgba(47, 148, 197, .12);
}

.ipx-radio-card input,
.ipx-swatch-card input {
    accent-color: #2f94c5;
}

.ipx-swatch-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 72px;
}

.theme-swatch {
    display: block;
    width: 100%;
    height: 22px;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
}

.theme-swatch-default { background: linear-gradient(90deg, #2f78aa, #151a22); }
.theme-swatch-cyan { background: linear-gradient(90deg, #0891b2, #0e7490); }
.theme-swatch-blue { background: linear-gradient(90deg, #2563eb, #1d4ed8); }
.theme-swatch-purple { background: linear-gradient(90deg, #7c3aed, #5b21b6); }
.theme-dot-auto { background: linear-gradient(135deg, #ffffff 0 48%, #17212f 50%); }

.ipx-customizer-footer {
    padding-top: 4px;
}

.ipx-customizer-footer .btn {
    width: 100%;
    justify-content: center;
}

html[data-bs-theme="dark"] {
    color-scheme: dark;
}

html[data-bs-theme="dark"] .ipx-urbix-shell {
    --body-bg: #0f1722;
}

html[data-bs-theme="dark"] .ipx-layout-customizer .offcanvas-header,
html[data-bs-theme="dark"] .ipx-radio-card {
    background: #111c2a;
}

html[data-bs-theme="dark"] .ipx-layout-customizer .offcanvas-title,
html[data-bs-theme="dark"] .ipx-radio-card {
    color: #e8eef6;
}

html[data-bs-theme="dark"] .ipx-customizer-section {
    border-color: #243449;
}

html[data-bs-theme="dark"] .ipx-radio-card:has(input:checked) {
    color: #dff4ff;
    background: #17344b;
}

html[data-bs-theme="dark"] .ipx-swatch-card {
    color: #e8eef6;
    background: #111c2a;
}

html[data-bs-theme="dark"] .ipx-swatch-card:has(input:checked) {
    color: #dff4ff;
    background: #17344b;
}

html[data-theme-colors="default"] {
    --theme-primary: #2f78aa;
    --theme-primary-dark: #245f88;
    --theme-primary-soft: #eaf5fb;
}

html[data-theme-colors="cyan"] {
    --theme-primary: #0891b2;
    --theme-primary-dark: #0e7490;
    --theme-primary-soft: #e6f7fb;
}

html[data-theme-colors="blue"] {
    --theme-primary: #2563eb;
    --theme-primary-dark: #1d4ed8;
    --theme-primary-soft: #eff6ff;
}

html[data-theme-colors="purple"] {
    --theme-primary: #7c3aed;
    --theme-primary-dark: #5b21b6;
    --theme-primary-soft: #f3eefe;
}

html[data-theme-colors] {
    --brand: var(--theme-primary);
    --brand-strong: var(--theme-primary-dark);
    --brand-soft: var(--theme-primary-soft);
    --blue: var(--theme-primary);
}

html[data-theme-colors] .urbix-admin-page,
html[data-theme-colors] .finance-page,
html[data-theme-colors] .crm-clients-page,
html[data-theme-colors] .crm-plans-page,
html[data-theme-colors] .settings-page,
html[data-theme-colors] .dashboard-page {
    --urbix-primary: var(--theme-primary);
    --urbix-primary-dark: var(--theme-primary-dark);
    --urbix-primary-soft: var(--theme-primary-soft);
    --finance-blue: var(--theme-primary);
    --finance-blue-dark: var(--theme-primary-dark);
    --finance-blue-soft: var(--theme-primary-soft);
    --crm-blue: var(--theme-primary);
    --crm-blue-dark: var(--theme-primary-dark);
    --crm-blue-soft: var(--theme-primary-soft);
    --plan-blue: var(--theme-primary);
    --plan-blue-dark: var(--theme-primary-dark);
    --plan-blue-soft: var(--theme-primary-soft);
    --settings-blue: var(--theme-primary);
    --settings-blue-dark: var(--theme-primary-dark);
    --settings-blue-soft: var(--theme-primary-soft);
    --dash-blue: var(--theme-primary);
    --dash-blue-dark: var(--theme-primary-dark);
    --dash-blue-soft: var(--theme-primary-soft);
}

html[data-content-width="box"] body {
    background:
        linear-gradient(90deg, rgba(15, 23, 42, .05), rgba(15, 23, 42, 0) 18%, rgba(15, 23, 42, 0) 82%, rgba(15, 23, 42, .05)),
        var(--bg);
}

html[data-content-width="box"] .page,
html[data-content-width="box"] .layout {
    max-width: 1360px;
    margin-right: auto;
}

html[data-sidebar-color="brand"] .app-menu {
    background: linear-gradient(180deg, color-mix(in srgb, var(--theme-primary, #2f78aa) 72%, #0f172a) 0%, #15384e 48%, #112b3f 100%);
}

html[data-sidebar-color="dark"] .app-menu {
    background: #101923;
}

html[data-sidebar-color="light"] .app-menu {
    background: #ffffff;
    border-right-color: #d8e4ef;
}

html[data-sidebar-color="light"] .app-menu section > b,
html[data-sidebar-color="light"] .app-menu a {
    color: #334155;
}

html[data-sidebar-color="light"] .app-menu a.on,
html[data-sidebar-color="light"] .app-menu a:hover {
    color: #0b5f91;
    background: #eaf6fc;
}

html[data-sidebar="icon"] body:not(.menu-collapsed) .app-menu,
html[data-sidebar="icon"] body.menu-collapsed .app-menu {
    width: var(--menu-compact);
}

html[data-sidebar="icon"] body:not(.menu-collapsed) .page,
html[data-sidebar="icon"] body.menu-collapsed .page {
    margin-left: var(--menu-compact);
}

html[data-sidebar="icon"] body:not(.menu-collapsed) .app-menu section > b,
html[data-sidebar="icon"] body.menu-collapsed .app-menu section > b {
    display: none;
}

html[data-sidebar="medium"] .app-menu {
    width: var(--menu-medium);
}

html[data-sidebar="medium"] .with-menu,
html[data-sidebar="medium"] .page {
    margin-left: var(--menu-medium);
}

html[data-sidebar="medium"] .app-menu a {
    padding-inline: 16px;
}

html[data-sidebar="icon-hover"] .app-menu {
    width: var(--menu-compact);
}

html[data-sidebar="icon-hover"] .with-menu,
html[data-sidebar="icon-hover"] .page {
    margin-left: var(--menu-compact);
}

html[data-sidebar="icon-hover"] .app-menu:hover {
    width: var(--menu);
    box-shadow: 10px 0 28px rgba(15, 23, 42, .16);
}

html[data-sidebar="icon-hover"] .app-menu:hover section > b {
    display: block;
}

html[data-sidebar="icon-hover"] .app-menu:hover a {
    justify-content: flex-start;
    gap: 13px;
    padding: 0 24px;
    font-size: 14px;
}

html[data-sidebar="icon-hover"] .app-menu:hover a span {
    width: 28px;
}

html[dir="rtl"] .app-menu {
    right: 0;
    left: auto;
    border-right: 0;
    border-left: 1px solid var(--line);
}

html[dir="rtl"] .with-menu,
html[dir="rtl"] .page {
    margin-right: var(--menu);
    margin-left: 0;
}

html[dir="rtl"][data-sidebar="medium"] .with-menu,
html[dir="rtl"][data-sidebar="medium"] .page {
    margin-right: var(--menu-medium);
    margin-left: 0;
}

html[dir="rtl"][data-sidebar="icon"] .with-menu,
html[dir="rtl"][data-sidebar="icon"] .page,
html[dir="rtl"][data-sidebar="icon-hover"] .with-menu,
html[dir="rtl"][data-sidebar="icon-hover"] .page {
    margin-right: var(--menu-compact);
    margin-left: 0;
}

html[dir="rtl"] .app-menu a {
    border-left: 0;
    border-right: 4px solid transparent;
}

html[dir="rtl"] .app-menu a.on,
html[dir="rtl"] .app-menu a:hover {
    border-right-color: var(--brand);
}

.access-profile-dialog footer .btn-primary.access-profile-save {
    color: #ffffff !important;
    background: #2f78aa !important;
    border-color: #2f78aa !important;
    box-shadow: 0 8px 18px rgba(47, 120, 170, .22) !important;
}

.access-profile-dialog footer .btn-primary.access-profile-save:hover,
.access-profile-dialog footer .btn-primary.access-profile-save:focus {
    color: #ffffff !important;
    background: #245f88 !important;
    border-color: #245f88 !important;
}

/* Padrão Urbix aplicado nas áreas administrativas em migração. */
.urbix-admin-page {
    --urbix-primary: #2f78aa;
    --urbix-primary-dark: #245f88;
    --urbix-primary-soft: #eaf5fb;
    --urbix-border: #d9e6f0;
    --urbix-muted: #60738a;
    --urbix-text: #111827;
}

.urbix-admin-page .urbix-card,
.urbix-modal-card {
    background: var(--bs-card-bg, #ffffff);
    border: 1px solid var(--urbix-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.urbix-admin-page .panel {
    border-color: var(--urbix-border);
}

.urbix-admin-page h1,
.urbix-admin-page h2,
.urbix-admin-page h3 {
    letter-spacing: 0;
}

.urbix-admin-page .ipx-btn-primary,
.urbix-admin-page .btn-primary,
.urbix-modal-card .btn-primary,
.urbix-admin-page .finance-new-button:not(.finance-new-button-light) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    color: #ffffff !important;
    background: var(--urbix-primary) !important;
    border-color: var(--urbix-primary) !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 8px 18px rgba(47, 120, 170, .16);
}

.urbix-admin-page .ipx-btn-primary:hover,
.urbix-admin-page .btn-primary:hover,
.urbix-modal-card .btn-primary:hover,
.urbix-admin-page .finance-new-button:not(.finance-new-button-light):hover {
    color: #ffffff !important;
    background: var(--urbix-primary-dark) !important;
    border-color: var(--urbix-primary-dark) !important;
}

.urbix-modal-card footer .btn-primary:not(:disabled),
.urbix-modal-dialog footer .btn-primary:not(:disabled),
.crm-client-dialog footer .btn-primary:not(:disabled),
.crm-plan-dialog footer .btn-primary:not(:disabled),
.tenant-user-dialog footer .btn-primary:not(:disabled),
.tenant-queue-dialog footer .btn-primary:not(:disabled),
.quick-reply-dialog footer .btn-primary:not(:disabled),
.finance-dialog footer .btn-primary:not(:disabled),
.access-profile-dialog footer .btn-primary:not(:disabled) {
    color: #ffffff !important;
    background: var(--urbix-primary) !important;
    border-color: var(--urbix-primary) !important;
    opacity: 1 !important;
    box-shadow: 0 8px 18px rgba(47, 120, 170, .18) !important;
}

.urbix-modal-card footer .btn-primary:not(:disabled):hover,
.urbix-modal-dialog footer .btn-primary:not(:disabled):hover,
.crm-client-dialog footer .btn-primary:not(:disabled):hover,
.crm-plan-dialog footer .btn-primary:not(:disabled):hover,
.tenant-user-dialog footer .btn-primary:not(:disabled):hover,
.tenant-queue-dialog footer .btn-primary:not(:disabled):hover,
.quick-reply-dialog footer .btn-primary:not(:disabled):hover,
.finance-dialog footer .btn-primary:not(:disabled):hover,
.access-profile-dialog footer .btn-primary:not(:disabled):hover {
    color: #ffffff !important;
    background: var(--urbix-primary-dark) !important;
    border-color: var(--urbix-primary-dark) !important;
}

.urbix-modal-card footer .btn-primary:not(:disabled) svg,
.urbix-modal-dialog footer .btn-primary:not(:disabled) svg,
.crm-client-dialog footer .btn-primary:not(:disabled) svg,
.crm-plan-dialog footer .btn-primary:not(:disabled) svg,
.tenant-user-dialog footer .btn-primary:not(:disabled) svg,
.tenant-queue-dialog footer .btn-primary:not(:disabled) svg,
.quick-reply-dialog footer .btn-primary:not(:disabled) svg,
.finance-dialog footer .btn-primary:not(:disabled) svg,
.access-profile-dialog footer .btn-primary:not(:disabled) svg {
    color: #ffffff !important;
    stroke: currentColor !important;
}

.urbix-admin-page .btn-light,
.urbix-modal-card .btn-light,
.urbix-admin-page .finance-new-button-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    color: #28415c !important;
    background: #f7fbfe !important;
    border: 1px solid #cfe0ec !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.urbix-admin-page .btn-light:hover,
.urbix-modal-card .btn-light:hover,
.urbix-admin-page .finance-new-button-light:hover {
    color: var(--urbix-primary-dark) !important;
    background: var(--urbix-primary-soft) !important;
    border-color: #b7d4e7 !important;
}

.urbix-admin-page .btn-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0 !important;
    border-radius: 8px;
}

.urbix-admin-page .btn-soft-primary {
    color: var(--urbix-primary-dark) !important;
    background: var(--urbix-primary-soft) !important;
    border: 1px solid #c4ddec !important;
}

.urbix-admin-page .btn-soft-primary:hover {
    color: #ffffff !important;
    background: var(--urbix-primary) !important;
    border-color: var(--urbix-primary) !important;
}

.urbix-admin-page .btn-soft-danger,
.urbix-admin-page button.danger,
.urbix-admin-page .finance-icon-button.danger {
    color: #b42318 !important;
    background: #fff5f4 !important;
    border: 1px solid #f3c7c3 !important;
}

.urbix-admin-page .btn-soft-danger:hover,
.urbix-admin-page button.danger:hover,
.urbix-admin-page .finance-icon-button.danger:hover {
    color: #ffffff !important;
    background: #b42318 !important;
    border-color: #b42318 !important;
}

.urbix-admin-page .crm-clients-table,
.urbix-admin-page .crm-plans-table,
.urbix-admin-page .finance-table {
    gap: 6px;
}

.urbix-admin-page .crm-clients-row,
.urbix-admin-page .crm-plans-row,
.urbix-admin-page .finance-row {
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}

.urbix-admin-page .crm-clients-row-head,
.urbix-admin-page .crm-plans-row-head,
.urbix-admin-page .finance-row-head {
    font-size: 12px;
    font-weight: 800;
}

.urbix-admin-page .crm-plans-search button,
.urbix-admin-page .crm-plans-actions > button,
.urbix-admin-page .crm-plan-dialog footer button {
    min-height: 38px;
}

.urbix-admin-page .crm-plans-row button {
    display: inline-grid;
    place-items: center;
}

.urbix-admin-page .ipx-btn-primary:disabled,
.urbix-admin-page .btn-primary:disabled,
.urbix-modal-card .btn-primary:disabled {
    color: #e8eef6 !important;
    background: #9fb8ca !important;
    border-color: #9fb8ca !important;
    box-shadow: none;
    cursor: not-allowed;
}

.urbix-modal-card {
    overflow: hidden;
}

.urbix-modal-card header {
    background:
        linear-gradient(135deg, rgba(47, 120, 170, .14), rgba(255, 255, 255, 0) 62%),
        #f8fbfd !important;
    border-bottom: 1px solid var(--urbix-border) !important;
}

.urbix-modal-card footer {
    background: #f7fafc !important;
    border-top: 1px solid var(--urbix-border) !important;
}

.urbix-modal-card input:not([type="checkbox"]),
.urbix-modal-card select,
.urbix-modal-card textarea {
    min-height: 38px;
    border-color: #cbd9e6 !important;
    border-radius: 8px !important;
    color: var(--urbix-text);
    font-size: 13px;
}

.urbix-modal-card input:not([type="checkbox"]):focus,
.urbix-modal-card select:focus,
.urbix-modal-card textarea:focus {
    border-color: var(--urbix-primary) !important;
    box-shadow: 0 0 0 3px rgba(47, 120, 170, .14);
    outline: 0;
}

.confirm-dialog.urbix-modal-card {
    border-radius: 8px;
}

/* Corrige a herança do `.card` do Bootstrap nos headers administrativos. */
.urbix-admin-page .crm-clients-hero,
.urbix-admin-page .crm-plans-hero,
.urbix-admin-page .finance-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    text-align: left;
}

.urbix-admin-page .crm-clients-hero > div:first-child,
.urbix-admin-page .crm-plans-hero > div:first-child,
.urbix-admin-page .finance-hero > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.urbix-admin-page .crm-clients-hero-icon,
.urbix-admin-page .crm-plans-hero-icon,
.urbix-admin-page .finance-hero-icon {
    flex: 0 0 48px;
    margin-left: auto;
}

.urbix-admin-page .finance-hero-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.urbix-admin-page .finance-hero-actions .finance-hero-icon {
    margin-left: 0;
}

@media (max-width: 760px) {
    .urbix-admin-page .crm-clients-hero,
    .urbix-admin-page .crm-plans-hero,
    .urbix-admin-page .finance-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .urbix-admin-page .crm-clients-hero-icon,
    .urbix-admin-page .crm-plans-hero-icon,
    .urbix-admin-page .finance-hero-icon,
    .urbix-admin-page .finance-hero-actions {
        margin-left: 0;
    }
}

@media (max-width: 760px) {
    .settings-page {
        padding: 14px;
    }

    .settings-tabs {
        overflow-x: auto;
    }

    .settings-grid,
    .settings-fields {
        grid-template-columns: 1fr;
    }

    .business-hours-row,
    .queue-hours-row,
    .business-hours-row > div,
    .queue-hours-row > div,
    .holiday-row {
        grid-template-columns: 1fr;
    }
}

/* Configurações administrativas: padrão de painel IPX. */
.settings-page {
    --settings-blue: #2b6f9f;
    --settings-blue-dark: #173f5f;
    --settings-blue-soft: #eaf4fb;
    --settings-black: #111827;
    --settings-line: #d8e2ec;
    --settings-muted: #64748b;
    background: #f3f6f9;
    padding: 20px;
}

.settings-page .panel {
    border: 1px solid var(--settings-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.settings-hero {
    min-height: 104px;
    padding: 20px 22px;
    background:
        linear-gradient(135deg, rgba(43, 111, 159, .12), rgba(255, 255, 255, 0) 58%),
        #ffffff;
}

.settings-hero h1 {
    color: var(--settings-black);
    font-size: 24px;
    font-weight: 750;
}

.settings-hero p {
    max-width: 620px;
    color: var(--settings-muted);
}

.settings-hero strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--settings-blue-dark);
    background: var(--settings-blue-soft);
    border-color: #c8dfef;
    font-weight: 750;
}

.settings-hero strong svg,
.settings-tabs svg,
.settings-card header svg,
.settings-save svg,
.settings-placeholder > svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.settings-tabs {
    gap: 4px;
    padding: 5px;
    background: #ffffff;
    border-color: var(--settings-line);
    border-radius: 8px;
}

.settings-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 116px;
    min-height: 40px;
    color: #475569;
    border-radius: 6px;
    font-weight: 700;
}

.settings-tabs a.on,
.settings-tabs a:hover {
    color: var(--settings-blue-dark);
    background: var(--settings-blue-soft);
}

.settings-shell {
    grid-template-columns: 292px minmax(0, 1fr);
}

.settings-summary {
    gap: 16px;
    padding: 18px;
    background: #ffffff;
}

.settings-summary > div:first-child span {
    display: block;
    margin-bottom: 4px;
    color: var(--settings-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.settings-summary h2,
.settings-card h2,
.settings-placeholder h2 {
    color: var(--settings-black);
    font-weight: 750;
}

.settings-kpis {
    display: grid;
    gap: 10px;
    margin: 0;
}

.settings-kpis div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e3eaf1;
    border-radius: 8px;
}

.settings-kpis dt {
    color: var(--settings-muted);
    font-size: 12px;
    font-weight: 700;
}

.settings-kpis dd {
    margin: 0;
    padding: 4px 8px;
    color: var(--settings-blue-dark);
    background: var(--settings-blue-soft);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.settings-kpis dd.good {
    color: #166085;
    background: #e6f4fb;
}

.settings-kpis dd.muted {
    color: #475569;
    background: #edf2f7;
}

.settings-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    background: var(--settings-blue);
    border-color: var(--settings-blue);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
}

.settings-save:hover {
    background: var(--settings-blue-dark);
    border-color: var(--settings-blue-dark);
}

.settings-save-danger {
    background: #b42318;
    border-color: #b42318;
}

.settings-save-danger:hover {
    background: #8f1d14;
    border-color: #8f1d14;
}

.settings-grid {
    align-items: start;
}

.settings-card {
    padding: 18px;
    background: #ffffff;
}

.settings-logo-shell {
    align-items: start;
}

.settings-logo-preview,
.settings-logo-placeholder {
    display: grid;
    place-items: center;
    min-height: 120px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.settings-logo-preview img {
    max-width: 220px;
    max-height: 96px;
    object-fit: contain;
}

.settings-logo-placeholder {
    color: var(--settings-blue-dark);
    font-size: 42px;
    font-weight: 900;
}

.settings-card-wide {
    grid-column: 1 / -1;
}

.settings-card header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.settings-card header > span {
    display: inline-grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: var(--settings-blue);
    background: var(--settings-blue-soft);
    border-radius: 8px;
}

.settings-card header p {
    margin: 4px 0 0;
    color: var(--settings-muted);
}

.settings-fields {
    gap: 14px;
}

.settings-automation-groups,
.settings-message-groups {
    display: grid;
    gap: 12px;
}

.settings-automation-group,
.settings-message-group {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e3eaf1;
    border-radius: 8px;
}

.settings-automation-group > div:first-child,
.settings-message-group > div:first-child {
    display: grid;
    gap: 3px;
}

.settings-automation-group b,
.settings-message-group b {
    color: var(--settings-blue-dark);
    font-size: 13px;
    font-weight: 850;
}

.settings-automation-group > div:first-child span,
.settings-message-group > div:first-child span {
    color: var(--settings-muted);
    font-size: 12px;
    line-height: 1.35;
}

.settings-cooldown-list {
    display: grid;
    gap: 10px;
}

.settings-cooldown-list > div:first-child {
    display: grid;
    gap: 3px;
}

.settings-cooldown-list dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.settings-cooldown-list dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #d8e2ec;
    border-radius: 8px;
}

.settings-cooldown-list dt {
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.settings-cooldown-list dd {
    margin: 0;
    color: var(--settings-blue-dark);
    font-size: 12px;
    font-weight: 850;
}

.settings-cooldown-list small {
    grid-column: 1 / -1;
    color: var(--settings-muted);
    font-size: 11px;
    line-height: 1.35;
}

.settings-fields label,
.settings-textarea {
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.settings-fields label > span,
.settings-textarea > span {
    min-height: 16px;
}

.settings-fields select,
.settings-textarea textarea {
    border-color: #cbd7e4;
    border-radius: 8px;
    color: var(--settings-black);
    background: #ffffff;
}

.settings-fields input:focus,
.settings-fields select:focus,
.settings-textarea textarea:focus {
    outline: 3px solid rgba(43, 111, 159, .18);
    border-color: var(--settings-blue);
}

.settings-textarea textarea {
    min-height: 96px;
}

.triage-preview {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    color: #334155;
    background: #f5f8fb;
    border: 1px solid #d8e2ec;
    border-radius: 8px;
}

.triage-preview > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.triage-preview span {
    color: var(--settings-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.triage-preview strong {
    padding: 4px 8px;
    color: var(--settings-blue-dark);
    background: var(--settings-blue-soft);
    border-radius: 999px;
    font-size: 12px;
}

.triage-preview pre {
    margin: 0;
    padding: 12px;
    white-space: pre-wrap;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd7e4;
    border-radius: 8px;
    font: 500 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.triage-preview p,
.triage-preview small {
    margin: 0;
    color: var(--settings-muted);
}

.triage-preview .triage-preview-warning {
    padding: 10px 12px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-weight: 750;
}

.triage-flow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.triage-flow-steps article {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #d8e2ec;
    border-radius: 8px;
}

.triage-flow-steps b {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #0f5f8a;
    background: #eaf6fd;
    border-radius: 999px;
    font-size: 12px;
}

.triage-flow-steps span {
    color: #334155;
    font-size: 12px;
    line-height: 1.35;
    text-transform: none;
}

.triage-connection-map {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.triage-connection-map > span {
    display: block;
    margin-top: 2px;
}

.triage-connection-map article {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #d8e2ec;
    border-radius: 8px;
}

.triage-connection-map article strong {
    padding: 0;
    color: #10243a;
    background: transparent;
    border-radius: 0;
    font-size: 13px;
}

.triage-map-badge {
    justify-self: start;
    padding: 3px 7px;
    color: #0f5f8a;
    background: #eaf6fd;
    border: 1px solid #c8dfef;
    border-radius: 999px;
    font-size: 11px;
}

.triage-map-badge.is-manual {
    color: #92400e;
    background: #fff4dd;
    border-color: #f0d6aa;
}

.scheduled-messages-row {
    grid-template-columns: minmax(240px, 1.4fr) minmax(180px, 1fr) minmax(180px, .9fr) minmax(110px, .55fr) minmax(100px, auto);
}

.scheduled-message-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.scheduled-message-actions form {
    margin: 0;
}

.scheduled-messages-page .urbix-search-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.scheduled-messages-page .urbix-search-form input,
.scheduled-messages-page .urbix-search-form select {
    min-height: 38px;
}

.scheduled-messages-page .urbix-search-form input {
    min-width: 240px;
}

.scheduled-messages-page {
    display: grid;
    gap: 16px;
    align-content: start;
}

.scheduled-messages-page .crm-clients-hero,
.scheduled-messages-page .crm-clients-metrics,
.scheduled-messages-page .scheduled-runtime-panel,
.scheduled-messages-page .crm-clients-table-panel {
    margin-top: 0;
    margin-bottom: 0;
}

.scheduled-messages-page .crm-clients-metrics {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.scheduled-runtime-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
}

.scheduled-runtime-panel span {
    color: var(--crm-blue-dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.scheduled-runtime-panel h2 {
    margin: 2px 0 4px;
    color: var(--crm-text);
    font-size: 18px;
}

.scheduled-runtime-panel p,
.scheduled-runtime-panel small {
    margin: 0;
    color: var(--crm-muted);
}

.scheduled-runtime-panel code {
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    padding: 7px 10px;
    color: var(--crm-blue-dark);
    background: var(--crm-blue-soft);
    border: 1px solid #c8dfef;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.scheduled-runtime-panel .scheduled-runtime-last {
    margin-top: 9px;
    color: #365877;
    font-size: 12px;
    line-height: 1.45;
}

.scheduled-runtime-panel .scheduled-runtime-last.is-warning {
    color: #92400e;
}

.scheduled-runtime-status {
    display: grid;
    justify-items: end;
    gap: 8px;
    text-align: right;
}

.scheduled-runtime-status form {
    margin: 0;
}

.scheduled-runtime-diagnostics {
    flex: 1 1 100%;
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.scheduled-runtime-diagnostics > strong {
    color: var(--text);
    font-size: 14px;
}

.scheduled-runtime-diagnostics > div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.scheduled-runtime-diagnostics span {
    display: grid;
    gap: 4px;
    padding: 10px;
    color: var(--muted);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}

.scheduled-runtime-diagnostics span b {
    color: var(--text);
}

.scheduled-runtime-diagnostics span small {
    color: var(--muted);
}

.scheduled-runtime-diagnostics span.is-warning {
    color: #92400e;
    background: #fff8eb;
    border-color: #f2d195;
}

.scheduled-runtime-diagnostics span.is-alert {
    color: #9f1239;
    background: #fff1f2;
    border-color: #fecdd3;
}

.scheduled-campaigns-panel {
    margin-top: 16px;
}

.scheduled-campaign-risk {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    background: #fff8eb;
    border-color: #f2d195;
}

.scheduled-campaign-risk strong {
    color: #8a4b00;
    font-size: 14px;
}

.scheduled-campaign-risk p {
    max-width: 1040px;
    margin: 0;
    color: #69410a;
    line-height: 1.45;
}

.scheduled-campaign-disabled {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    background: #f7fbff;
    border-color: #bfdef0;
}

.scheduled-campaign-disabled strong {
    color: var(--crm-blue-dark);
    font-size: 14px;
}

.scheduled-campaign-disabled p {
    max-width: 1040px;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.scheduled-campaign-preview-form {
    align-items: start;
}

.scheduled-campaign-preview-form label {
    align-content: start;
}

.scheduled-campaign-preview-form select:not([multiple]) {
    min-height: 48px;
}

.scheduled-campaign-preview-form .urbix-form-actions {
    align-self: end;
}

.scheduled-campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.contact-list-inline-form {
    margin-bottom: 16px;
    padding: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.contact-lists-row {
    grid-template-columns: minmax(260px, 1.4fr) minmax(90px, .4fr) minmax(130px, .5fr) minmax(180px, auto);
}

.contact-lists-row input,
.contact-lists-row select {
    width: 100%;
    min-height: 36px;
    border-color: #cbd7e4;
    border-radius: 8px;
}

.contact-lists-row span:first-child {
    display: grid;
    gap: 6px;
}

.contact-list-detail-panel {
    margin-top: 16px;
}

.contact-list-detail-panel > header,
.contact-list-member-panel > header,
.contact-list-add-panel > header {
    align-items: flex-start;
    gap: 16px;
}

.contact-list-detail-panel > header span,
.contact-list-add-panel > header h3,
.contact-list-member-panel > header h3 {
    margin: 0;
}

.contact-list-detail-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    text-align: right;
}

.contact-list-detail-meta strong,
.contact-list-detail-meta small {
    display: block;
}

.contact-list-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
    gap: 16px;
    align-items: start;
}

.contact-list-member-panel,
.contact-list-add-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
}

.contact-list-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.contact-list-search-form input {
    min-width: 220px;
}

.contact-list-members-row {
    grid-template-columns: minmax(220px, 1.1fr) minmax(140px, .65fr) minmax(160px, .8fr) minmax(110px, auto);
}

.contact-list-members-row > span:first-child {
    display: grid;
    gap: 3px;
}

.contact-list-add-form {
    display: grid;
    gap: 10px;
}

.contact-list-add-form label {
    display: grid;
    gap: 6px;
}

.contact-list-add-form select {
    min-height: 220px;
}

.contact-list-empty {
    margin: 0;
    padding: 16px;
    color: var(--muted);
}

@media (max-width: 760px) {
    .contact-list-detail-grid {
        grid-template-columns: 1fr;
    }

    .contact-list-detail-meta {
        justify-content: flex-start;
        text-align: left;
        flex-wrap: wrap;
    }

    .contact-list-members-row {
        grid-template-columns: 1fr;
    }
}

.scheduled-campaign-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.scheduled-campaign-card > header,
.scheduled-campaign-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.scheduled-campaign-card strong,
.scheduled-campaign-card small {
    display: block;
}

.scheduled-campaign-card small,
.scheduled-campaign-card p {
    color: var(--muted);
}

.scheduled-campaign-card p {
    margin: 0;
}

.scheduled-campaign-attachments {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    color: #176d98;
    background: #e8f3fb;
    border: 1px solid #bfdef0;
    border-radius: 999px;
    font-weight: 800;
}

.scheduled-campaign-attachment-panel,
.scheduled-campaign-filter-panel,
.scheduled-campaign-guard,
.scheduled-campaign-file-preview,
.scheduled-campaign-confirmation {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.scheduled-campaign-attachment-panel strong,
.scheduled-campaign-filter-panel strong,
.scheduled-campaign-guard strong,
.scheduled-campaign-file-preview strong,
.scheduled-campaign-confirmation strong {
    color: var(--text);
}

.scheduled-campaign-guard span,
.scheduled-campaign-confirmation small {
    color: var(--muted);
    line-height: 1.45;
}

.scheduled-campaign-filter-panel p {
    margin: 0;
    color: var(--muted);
}

.scheduled-campaign-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scheduled-campaign-filter-chips span,
.scheduled-campaign-filter-chips small {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    color: #176d98;
    background: #e8f3fb;
    border: 1px solid #bfdef0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.scheduled-campaign-filter-chips small {
    color: var(--muted);
    background: var(--surface);
    border-color: var(--line);
}

.scheduled-campaign-confirmation {
    background: #f4f9fc;
    border-color: #bfdef0;
}

.scheduled-campaign-confirm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.scheduled-campaign-confirm-grid span {
    min-width: 0;
    padding: 10px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
}

.scheduled-campaign-confirm-grid b {
    display: block;
    color: var(--text);
    font-size: 16px;
}

.scheduled-campaign-file-list,
.scheduled-campaign-file-preview {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.scheduled-campaign-file-list {
    display: grid;
    gap: 8px;
}

.scheduled-campaign-file-list span,
.scheduled-campaign-file-preview span {
    min-width: 0;
    padding: 8px 10px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.scheduled-campaign-file-list small,
.scheduled-campaign-file-preview small {
    color: var(--muted);
    font-weight: 800;
}

.scheduled-campaign-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.scheduled-campaign-stats span {
    min-width: 0;
    padding: 8px;
    color: var(--muted);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
}

.scheduled-campaign-stats b {
    display: block;
    color: var(--text);
    font-size: 16px;
}

.scheduled-campaign-card footer form {
    margin: 0;
}

.crm-client-status.pending {
    color: #1d4ed8;
    background: #dbeafe;
}

.crm-client-status.sent {
    color: #047857;
    background: #d1fae5;
}

.crm-client-status.failed {
    color: #b91c1c;
    background: #fee2e2;
}

.crm-client-status.canceled {
    color: #475569;
    background: #e2e8f0;
}

.business-hours-grid,
.queue-hours-grid,
.holiday-list {
    display: grid;
    gap: 10px;
}

.business-hours-row,
.queue-hours-row,
.holiday-row {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: 12px;
    align-items: end;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
}

.business-hours-row > div,
.queue-hours-row > div,
.holiday-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 10px;
}

.holiday-row {
    grid-template-columns: minmax(180px, 1fr) 170px 150px auto;
}

.business-hours-row label,
.queue-hours-row label,
.holiday-row label {
    margin: 0;
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.business-hours-row label:not(.urbix-form-check),
.queue-hours-row label:not(.urbix-form-check),
.holiday-row label:not(.urbix-form-check) {
    display: grid;
    gap: 6px;
}

.business-hours-row input,
.queue-hours-row input,
.holiday-row input {
    width: 100%;
    border-color: #cbd7e4;
    border-radius: 8px;
}

.holiday-add {
    justify-self: start;
    margin-top: 12px;
}

.holiday-remove {
    align-self: end;
    min-height: 39px;
    white-space: nowrap;
}

.holidays-table-row {
    grid-template-columns: minmax(220px, 1.4fr) minmax(140px, .7fr) minmax(130px, .7fr) minmax(96px, auto);
}

html[data-bs-theme="dark"] .business-hours-row,
html[data-theme="dark"] .business-hours-row,
html[data-bs-theme="dark"] .queue-hours-row,
html[data-theme="dark"] .queue-hours-row,
html[data-bs-theme="dark"] .holiday-row,
html[data-theme="dark"] .holiday-row {
    background: #111820;
    border-color: #263446;
}

html[data-bs-theme="dark"] .triage-preview,
html[data-theme="dark"] .triage-preview {
    color: var(--text);
    background: rgba(255, 255, 255, .03);
    border-color: var(--line-strong);
}

html[data-bs-theme="dark"] .triage-preview pre,
html[data-theme="dark"] .triage-preview pre {
    color: var(--text);
    background: #0f1f32;
    border-color: var(--line-strong);
}

html[data-bs-theme="dark"] .triage-connection-map article,
html[data-theme="dark"] .triage-connection-map article {
    background: #0f1f32;
    border-color: var(--line-strong);
}

html[data-bs-theme="dark"] .triage-connection-map article strong,
html[data-theme="dark"] .triage-connection-map article strong {
    color: #e2edf7;
}

html[data-bs-theme="dark"] .business-hours-row label,
html[data-theme="dark"] .business-hours-row label,
html[data-bs-theme="dark"] .queue-hours-row label,
html[data-theme="dark"] .queue-hours-row label,
html[data-bs-theme="dark"] .holiday-row label,
html[data-theme="dark"] .holiday-row label {
    color: #d8e4ef;
}

.settings-placeholder {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 104px;
    background: #ffffff;
}

.settings-placeholder > svg {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 10px;
    color: var(--settings-blue);
    background: var(--settings-blue-soft);
    border-radius: 8px;
}

@media (max-width: 760px) {
    .settings-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-tabs a {
        min-width: max-content;
    }
}

/* Financeiro administrativo. */
.finance-page {
    --finance-blue: #2b6f9f;
    --finance-blue-dark: #173f5f;
    --finance-blue-soft: #eaf4fb;
    --finance-line: #d8e2ec;
    --finance-muted: #64748b;
    --finance-text: #111827;
    background: #f3f6f9;
    padding: 20px;
}

.finance-page .panel {
    border: 1px solid var(--finance-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.finance-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 104px;
    padding: 20px 22px;
    background:
        linear-gradient(135deg, rgba(43, 111, 159, .12), rgba(255, 255, 255, 0) 58%),
        #ffffff;
}

.finance-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.finance-hero-actions form {
    margin: 0;
}

.finance-hero span {
    display: block;
    margin-bottom: 4px;
    color: var(--finance-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.finance-hero h1 {
    color: var(--finance-text);
    font-size: 24px;
    font-weight: 750;
}

.finance-hero p {
    max-width: 640px;
    margin: 5px 0 0;
    color: var(--finance-muted);
}

.finance-hero-icon,
.finance-metrics svg {
    display: inline-grid;
    place-items: center;
    color: var(--finance-blue);
    background: var(--finance-blue-soft);
    border-radius: 8px;
}

.finance-hero-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}

.finance-page svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.finance-hero-icon svg {
    width: 24px;
    height: 24px;
}

.finance-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.finance-scope-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.finance-scope-grid article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 86px;
    padding: 18px;
    margin-bottom: 0;
    background: #ffffff;
}

.finance-scope-grid article.active {
    border-color: #bdd5e8;
    background: #fbfdff;
}

.finance-scope-grid svg {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 9px;
    color: var(--finance-blue);
    background: var(--finance-blue-soft);
    border-radius: 8px;
}

.finance-scope-grid span {
    display: block;
    color: var(--finance-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.finance-scope-grid strong {
    display: block;
    margin-top: 2px;
    color: var(--finance-text);
    font-size: 15px;
    font-weight: 750;
}

.finance-scope-grid p {
    margin: 3px 0 0;
    color: var(--finance-muted);
    font-size: 12px;
}

.finance-metrics article {
    display: grid;
    gap: 8px;
    margin-bottom: 0;
    background: #ffffff;
}

.finance-metrics svg {
    width: 34px;
    height: 34px;
    padding: 8px;
}

.finance-metrics span {
    color: var(--finance-muted);
    font-size: 12px;
    font-weight: 700;
}

.finance-metrics strong {
    color: var(--finance-text);
    font-size: 20px;
    font-weight: 750;
}

.finance-metrics small {
    color: var(--finance-muted);
    font-size: 11px;
}

.finance-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 16px;
    align-items: start;
}

.finance-form,
.finance-table-panel {
    background: #ffffff;
}

.billing-page .finance-layout.has-billing-pix {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
}

.billing-pix-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: #ffffff;
}

.billing-pix-panel header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.billing-pix-panel header > span {
    display: inline-grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: var(--finance-blue);
    background: var(--finance-blue-soft);
    border-radius: 8px;
}

.billing-pix-panel h2 {
    color: var(--finance-text);
    font-size: 17px;
    font-weight: 750;
}

.billing-pix-panel p,
.billing-pix-panel dt {
    color: var(--finance-muted);
}

.billing-pix-panel p {
    margin-top: 4px;
}

.billing-pix-panel dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.billing-pix-panel dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    background: #f8fafc;
    border: 1px solid #e3eaf1;
    border-radius: 8px;
}

.billing-pix-panel dt,
.billing-pix-panel dd {
    margin: 0;
    font-size: 12px;
}

.billing-pix-panel dd {
    color: var(--finance-text);
    font-weight: 700;
    text-align: right;
}

.billing-pix-panel label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.billing-pix-panel input {
    width: 100%;
    color: var(--finance-text);
    background: #f8fafc;
    border-color: #cbd7e4;
    border-radius: 8px;
}

.billing-pix-panel select,
.billing-pix-panel textarea {
    width: 100%;
    color: var(--finance-text);
    background: var(--surface);
    border-color: var(--line-strong);
    border-radius: 8px;
}

.billing-pix-panel textarea {
    min-height: 84px;
    resize: vertical;
}

.billing-pix-reference {
    display: grid;
    gap: 4px;
    padding: 12px;
}

.billing-pix-reference span {
    color: var(--finance-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.billing-pix-reference strong {
    color: var(--finance-text);
    font-size: 13px;
}

.billing-pix-reference small {
    color: var(--finance-muted);
    line-height: 1.35;
}

.billing-pix-reference em {
    width: fit-content;
    padding: 4px 8px;
    color: #047857;
    background: #d1fae5;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.billing-pix-qr {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px;
    text-align: center;
}

.billing-pix-qr[hidden] {
    display: none;
}

.billing-pix-qr span {
    color: var(--finance-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.billing-pix-qr img,
.billing-pix-qr svg {
    width: min(190px, 100%);
    height: auto;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
}

.billing-pix-qr small {
    color: var(--finance-muted);
    line-height: 1.35;
}

.billing-copy-pix {
    width: 100%;
}

.finance-new-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    color: #ffffff;
    background: var(--finance-blue);
    border: 1px solid var(--finance-blue);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
    white-space: nowrap;
}

.finance-new-button:hover {
    background: var(--finance-blue-dark);
    border-color: var(--finance-blue-dark);
}

.finance-new-button-light {
    color: var(--finance-blue-dark);
    background: var(--finance-blue-soft);
    border-color: #c8dfef;
}

.finance-new-button-light:hover {
    color: #ffffff;
    background: var(--finance-blue);
    border-color: var(--finance-blue);
}

.finance-form header,
.finance-table-panel header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.finance-form h2,
.finance-table-panel h2 {
    color: var(--finance-text);
    font-size: 17px;
    font-weight: 750;
}

.finance-form p,
.finance-table-panel header span {
    margin: 4px 0 0;
    color: var(--finance-muted);
}

.finance-modal {
    --finance-blue: #2b6f9f;
    --finance-blue-dark: #173f5f;
    --finance-blue-soft: #eaf4fb;
    --finance-line: #d8e2ec;
    --finance-muted: #64748b;
    --finance-text: #111827;
    position: fixed;
    inset: 0;
    z-index: 72;
    display: grid;
    place-items: center;
    padding: 18px;
}

.finance-modal[hidden] {
    display: none;
}

.finance-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(15, 23, 42, .52);
    border: 0;
    border-radius: 0;
    backdrop-filter: blur(2px);
}

.finance-modal-backdrop:hover {
    background: rgba(15, 23, 42, .52);
}

.finance-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 28px));
    max-height: calc(100vh - 34px);
    overflow: auto;
    padding: 0;
    background: #ffffff;
    border: 1px solid var(--finance-line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.finance-dialog header,
.finance-dialog footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.finance-dialog header {
    padding: 18px 20px;
    margin-bottom: 0;
    background:
        linear-gradient(135deg, rgba(43, 111, 159, .14), rgba(255, 255, 255, 0) 62%),
        #f8fbfd;
    border-bottom: 1px solid var(--finance-line);
}

.finance-dialog header span {
    display: block;
    margin-bottom: 4px;
    color: var(--finance-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.finance-dialog header button {
    color: var(--finance-blue-dark);
    background: var(--finance-blue-soft);
    border-color: #c8dfef;
    font-size: 12px;
    font-weight: 650;
}

.finance-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px 0;
}

.finance-form-grid label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.finance-form-grid input,
.finance-form-grid select {
    width: 100%;
    border-color: #cbd7e4;
    border-radius: 8px;
    color: var(--finance-text);
}

.finance-form-grid input:focus,
.finance-form-grid select:focus {
    outline: 3px solid rgba(43, 111, 159, .18);
    border-color: var(--finance-blue);
}

.finance-full {
    grid-column: 1 / -1;
}

.finance-errors {
    display: grid;
    gap: 5px;
    margin: 14px 20px 0;
    padding: 10px;
    color: #991b1b;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    font-size: 12px;
}

.finance-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 162px;
    min-height: 42px;
    margin-top: 0;
    background: var(--finance-blue);
    border-color: var(--finance-blue);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
}

.finance-submit:hover {
    background: var(--finance-blue-dark);
    border-color: var(--finance-blue-dark);
}

.finance-dialog footer {
    margin-top: 18px;
    padding: 14px 20px 18px;
    justify-content: flex-end;
    background: #f8fafc;
    border-top: 1px solid var(--finance-line);
}

.finance-cancel {
    min-height: 42px;
    color: #334155;
    background: #f8fafc;
    border-color: #d8e2ec;
    font-size: 13px;
    font-weight: 650;
}

.finance-cancel:hover {
    color: var(--finance-blue-dark);
    background: #eef7fc;
    border-color: #c8dfef;
}

.finance-table {
    display: grid;
    gap: 8px;
}

.finance-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) 110px 120px 110px 96px 90px 82px;
    gap: 12px;
    align-items: center;
    min-height: 56px;
    padding: 10px 12px;
}

.billing-page .finance-row {
    grid-template-columns: minmax(180px, 1.5fr) 110px 120px 110px 110px 112px;
}

.finance-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    color: #176d98;
    background: #edf6fc;
    border: 1px solid #c7ddeb;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.finance-row-action svg {
    width: 15px;
    height: 15px;
}

.billing-print-area {
    display: none;
}

.finance-row-head {
    min-height: 40px;
    color: var(--finance-muted);
    background: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.finance-row strong,
.finance-row small {
    display: block;
}

.finance-row strong {
    color: var(--finance-text);
}

.finance-row small {
    margin-top: 3px;
    color: var(--finance-muted);
    font-size: 12px;
}

.finance-status {
    display: inline-flex;
    justify-content: center;
    min-width: 72px;
    padding: 4px 8px;
    color: #475569;
    background: #edf2f7;
    border-radius: 999px;
    font-size: 12px;
}

.finance-status.open {
    color: var(--finance-blue-dark);
    background: var(--finance-blue-soft);
}

.finance-status.paid {
    color: #166085;
    background: #e6f4fb;
}

.finance-status.canceled {
    color: #991b1b;
    background: #fff1f2;
}

.finance-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.finance-row-actions form {
    display: inline-flex;
    margin: 0;
}

.finance-icon-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--finance-blue);
    background: var(--finance-blue-soft);
    border: 1px solid #c8dfef;
    border-radius: 8px;
}

.finance-icon-button.danger {
    color: #b42318;
    background: #fff5f4;
    border-color: #f4c7c3;
}

.finance-icon-button.danger:hover {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 18px;
}

.confirm-modal[hidden] {
    display: none;
}

.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(15, 23, 42, .52);
    border: 0;
    border-radius: 0;
    backdrop-filter: blur(2px);
}

.confirm-dialog {
    position: relative;
    z-index: 1;
    width: min(440px, calc(100vw - 32px));
    padding: 18px;
    background: #ffffff;
    border: 1px solid #d8e2ec;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .26);
}

.confirm-dialog header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.confirm-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #2b6f9f;
    background: #eaf4fb;
    border-radius: 8px;
}

.confirm-icon.danger {
    color: #b42318;
    background: #fff5f4;
}

.confirm-dialog svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.confirm-dialog span {
    display: block;
    margin-bottom: 2px;
    color: #2b6f9f;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.confirm-dialog h2 {
    color: #111827;
    font-size: 18px;
    font-weight: 750;
}

.confirm-dialog p {
    margin: 0;
    color: #475569;
    line-height: 1.5;
}

.confirm-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
    font-size: 13px;
    font-weight: 650;
}

.btn-danger:hover {
    background: #912018;
    border-color: #912018;
}

/* Registros excluídos. */
.deleted-records-page {
    --deleted-blue: #2b6f9f;
    --deleted-blue-dark: #173f5f;
    --deleted-blue-soft: #eaf4fb;
    --deleted-line: #d8e2ec;
    --deleted-muted: #64748b;
    --deleted-text: #111827;
    background: #f3f6f9;
    padding: 20px;
}

.deleted-records-page .panel {
    border: 1px solid var(--deleted-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.deleted-records-page svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.deleted-records-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 104px;
    padding: 20px 22px;
    background:
        linear-gradient(135deg, rgba(43, 111, 159, .12), rgba(255, 255, 255, 0) 58%),
        #ffffff;
}

.deleted-records-hero span {
    display: block;
    margin-bottom: 4px;
    color: var(--deleted-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.deleted-records-hero h1 {
    color: var(--deleted-text);
    font-size: 24px;
    font-weight: 750;
}

.deleted-records-hero p {
    max-width: 720px;
    margin: 5px 0 0;
    color: var(--deleted-muted);
}

.deleted-records-hero-icon,
.deleted-records-metrics svg {
    display: inline-grid;
    place-items: center;
    color: var(--deleted-blue);
    background: var(--deleted-blue-soft);
    border-radius: 8px;
}

.deleted-records-hero-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
}

.deleted-records-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.deleted-records-metrics article {
    display: grid;
    gap: 8px;
    margin-bottom: 0;
    background: #ffffff;
}

.deleted-records-metrics svg {
    width: 34px;
    height: 34px;
    padding: 8px;
}

.deleted-records-metrics span {
    color: var(--deleted-muted);
    font-size: 12px;
    font-weight: 700;
}

.deleted-records-metrics strong {
    color: var(--deleted-text);
    font-size: 22px;
    font-weight: 750;
}

.deleted-records-panel {
    margin-top: 14px;
    background: #ffffff;
}

.deleted-records-panel header {
    margin-bottom: 14px;
}

.deleted-records-panel h2 {
    color: var(--deleted-text);
    font-size: 17px;
    font-weight: 750;
}

.deleted-records-panel p {
    margin: 4px 0 0;
    color: var(--deleted-muted);
}

.deleted-records-table {
    display: grid;
    gap: 8px;
}

.deleted-records-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 160px 150px 48px;
    gap: 12px;
    align-items: center;
    min-height: 56px;
    padding: 10px 12px;
}

.deleted-records-row:not(.deleted-records-row-head):hover {
    border-color: #bdd5e8;
}

.deleted-records-row-head {
    min-height: 40px;
    color: var(--deleted-muted);
    background: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.deleted-records-row strong,
.deleted-records-row small {
    display: block;
}

.deleted-records-row strong {
    color: var(--deleted-text);
}

.deleted-records-row small {
    margin-top: 3px;
    color: var(--deleted-muted);
    font-size: 12px;
}

.deleted-records-row form {
    margin: 0;
}

.deleted-records-row button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--deleted-blue);
    background: var(--deleted-blue-soft);
    border: 1px solid #c8dfef;
    border-radius: 8px;
}

.deleted-records-row button:hover {
    color: #ffffff;
    background: var(--deleted-blue);
    border-color: var(--deleted-blue);
}

@media (max-width: 1180px) {
    .finance-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .finance-scope-grid {
        grid-template-columns: 1fr;
    }

    .finance-layout {
        grid-template-columns: 1fr;
    }

    .billing-page .finance-layout.has-billing-pix {
        grid-template-columns: 1fr;
    }

    .finance-table-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .finance-page {
        padding: 14px;
    }

    .finance-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .finance-metrics,
    .finance-scope-grid,
    .finance-layout,
    .finance-form-grid {
        grid-template-columns: 1fr;
    }

    .finance-row,
    .finance-row-head {
        grid-template-columns: 1fr;
    }

    .billing-page .finance-row,
    .billing-page .finance-row-head {
        grid-template-columns: 1fr;
    }

    .finance-row-head {
        display: none;
    }
}

@media print {
    body * {
        visibility: hidden !important;
    }

    .billing-print-area,
    .billing-print-area * {
        visibility: visible !important;
    }

    .billing-print-area {
        position: fixed;
        inset: 0;
        display: block !important;
        padding: 28px;
        color: #111827;
        background: #ffffff;
        font-family: Arial, sans-serif;
    }

    .billing-print-area header {
        padding-bottom: 18px;
        border-bottom: 2px solid #111827;
    }

    .billing-print-area header span {
        color: #176d98;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .billing-print-area h1 {
        margin: 5px 0;
        font-size: 28px;
    }

    .billing-print-area p {
        margin: 0;
        color: #475569;
    }

    .billing-print-area dl {
        display: grid;
        gap: 0;
        margin: 24px 0;
        border: 1px solid #cbd5e1;
    }

    .billing-print-area dl div {
        display: grid;
        grid-template-columns: 190px minmax(0, 1fr);
        border-bottom: 1px solid #cbd5e1;
    }

    .billing-print-area dl div:last-child {
        border-bottom: 0;
    }

    .billing-print-area dt,
    .billing-print-area dd {
        margin: 0;
        padding: 10px 12px;
    }

    .billing-print-area dt {
        background: #f1f5f9;
        font-weight: 800;
    }

    .billing-print-area footer {
        display: flex;
        justify-content: space-between;
        padding-top: 16px;
        border-top: 1px solid #cbd5e1;
    }
}

/* Landing pública de cadastro SaaS. */
.public-signup-page {
    --signup-blue: #176d98;
    --signup-blue-dark: #0d4668;
    --signup-ink: #10243a;
    --signup-muted: #607086;
    --signup-line: #d8e4ef;
    display: grid;
    gap: 22px;
    min-height: calc(100vh - 82px);
    padding: 28px clamp(18px, 4vw, 52px) 42px;
    background: #f4f8fb;
}

.signup-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 24px;
    align-items: center;
    min-height: 360px;
    padding: clamp(28px, 5vw, 58px);
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(13, 70, 104, .94), rgba(23, 109, 152, .86)),
        url('/assets/brand/ipx-connect-icon.png') center / cover no-repeat;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
}

.signup-hero-copy span {
    display: block;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    opacity: .86;
}

.signup-hero-copy h1 {
    max-width: 740px;
    margin: 8px 0 12px;
    color: #ffffff;
    font-size: clamp(34px, 5vw, 62px);
    font-weight: 850;
    line-height: 1.02;
}

.signup-hero-copy p {
    max-width: 620px;
    color: rgba(255, 255, 255, .88);
    font-size: 17px;
    line-height: 1.55;
}

.signup-hero-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.signup-hero-board div,
.signup-hero-board section {
    display: grid;
    gap: 4px;
    padding: 14px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
}

.signup-hero-board section {
    grid-column: 1 / -1;
}

.signup-hero-board span,
.signup-hero-board small {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
}

.signup-hero-board strong,
.signup-hero-board b {
    color: #ffffff;
    font-size: 24px;
}

.signup-alert {
    padding: 13px 15px;
    color: #14532d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-weight: 700;
}

.signup-alert-error {
    display: grid;
    gap: 4px;
    color: #991b1b;
    background: #fff1f2;
    border-color: #fecdd3;
}

.signup-layout {
    display: grid;
    grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.signup-plans,
.signup-form {
    background: #ffffff;
    border: 1px solid var(--signup-line);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

.signup-plans {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.signup-plans h2,
.signup-form h2 {
    margin: 0;
    color: var(--signup-ink);
    font-size: 20px;
    font-weight: 850;
}

.signup-plan-card {
    display: grid;
    gap: 8px;
    padding: 15px;
    border: 1px solid var(--signup-line);
    border-radius: 8px;
    cursor: pointer;
}

.signup-plan-card.is-selected,
.signup-plan-card:has(input:checked) {
    border-color: var(--signup-blue);
    box-shadow: 0 0 0 3px rgba(23, 109, 152, .12);
}

.signup-plan-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.signup-plan-card span {
    color: var(--signup-blue);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.signup-plan-card strong {
    color: var(--signup-ink);
    font-size: 24px;
}

.signup-plan-card strong small,
.signup-plan-card p,
.signup-plan-card li {
    color: var(--signup-muted);
    font-size: 13px;
}

.signup-plan-card ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
}

.signup-form {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.signup-form header span {
    display: block;
    color: var(--signup-blue);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.signup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.signup-grid label {
    display: grid;
    gap: 7px;
    color: #42526a;
    font-size: 13px;
    font-weight: 800;
}

.signup-grid input {
    width: 100%;
    min-height: 42px;
    color: var(--signup-ink);
    background: #ffffff;
    border: 1px solid #cbd7e4;
    border-radius: 8px;
}

.signup-full {
    grid-column: 1 / -1;
}

.signup-form footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
}

.signup-form footer a {
    color: var(--signup-blue);
    font-weight: 800;
    text-decoration: none;
}

.signup-form footer button {
    min-height: 42px;
    padding: 0 18px;
    color: #ffffff;
    background: var(--signup-blue);
    border: 1px solid var(--signup-blue);
    border-radius: 8px;
    font-weight: 850;
}

.signup-form footer button:hover {
    background: var(--signup-blue-dark);
    border-color: var(--signup-blue-dark);
}

@media (max-width: 920px) {
    .signup-hero,
    .signup-layout,
    .signup-grid {
        grid-template-columns: 1fr;
    }
}

/* Landing pública profissional. */
.public-landing-body {
    margin: 0;
    color: #10243a;
    background: #f5f8fb;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.public-landing-body * {
    box-sizing: border-box;
}

.landing-navbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
    padding: 14px clamp(18px, 4vw, 56px);
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid #dbe7f1;
    backdrop-filter: blur(14px);
}

.landing-brand,
.landing-navbar nav,
.landing-nav-actions,
.landing-hero-actions,
.landing-final-cta div {
    display: flex;
    align-items: center;
}

.landing-brand {
    gap: 12px;
    color: #10243a;
    font-weight: 900;
    text-decoration: none;
}

.landing-brand img {
    width: 118px;
    height: 38px;
    object-fit: contain;
}

.landing-navbar nav {
    gap: 22px;
}

.landing-navbar a {
    color: #42526a;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.landing-nav-actions,
.landing-hero-actions,
.landing-final-cta div {
    gap: 10px;
}

.landing-primary,
.landing-secondary,
.landing-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 900;
    text-decoration: none;
}

.landing-primary {
    color: #ffffff !important;
    background: #176d98;
    border: 1px solid #176d98;
}

.landing-secondary,
.landing-login {
    color: #176d98 !important;
    background: #ffffff;
    border: 1px solid #c7ddeb;
}

.landing-page {
    display: grid;
    gap: 34px;
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 38px;
    align-items: center;
    min-height: calc(100vh - 76px);
    padding: clamp(46px, 7vw, 92px) clamp(18px, 5vw, 72px);
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(8, 42, 68, .96), rgba(23, 109, 152, .88)),
        url('/assets/brand/ipx-connect-icon.png') center / 76% no-repeat;
}

.landing-hero-copy > span,
.landing-section-title span,
.landing-flow > div span,
.landing-signup > div > span {
    display: block;
    color: #2b83ad;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.landing-hero-copy > span {
    color: #aee4ff;
}

.landing-hero h1 {
    max-width: 820px;
    margin: 12px 0 18px;
    color: #ffffff;
    font-size: clamp(38px, 6vw, 76px);
    font-weight: 950;
    line-height: 1.02;
}

.landing-hero p {
    max-width: 680px;
    color: rgba(255, 255, 255, .86);
    font-size: 18px;
    line-height: 1.6;
}

.landing-hero-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 610px;
    margin-top: 22px;
    padding: 13px 15px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
}

.landing-hero-proof b {
    color: #ffffff;
    white-space: nowrap;
}

.landing-hero-proof span {
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
}

.landing-product-shot {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .25);
    backdrop-filter: blur(12px);
}

.landing-product-shot header,
.landing-product-shot section,
.landing-product-shot li,
.landing-stats article,
.landing-feature-grid article,
.landing-flow li,
.landing-audience article,
.landing-plan-card,
.landing-form,
.landing-faq details,
.landing-final-cta {
    border-radius: 8px;
}

.landing-product-shot header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
}

.landing-product-shot header span,
.landing-product-shot small,
.landing-product-shot li,
.landing-ticket-grid span {
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
}

.landing-ticket-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.landing-ticket-grid article,
.landing-product-shot section,
.landing-product-shot li {
    padding: 14px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
}

.landing-ticket-grid strong {
    display: block;
    margin-top: 7px;
    color: #ffffff;
    font-size: 28px;
}

.landing-product-shot section {
    display: grid;
    gap: 8px;
}

.landing-product-shot section b {
    color: #ffffff;
    font-size: 18px;
}

.landing-product-shot section span {
    display: block;
    color: rgba(255, 255, 255, .78);
    margin-top: 3px;
}

.landing-product-shot ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-stats,
.landing-section,
.landing-flow,
.landing-audience,
.landing-signup,
.landing-faq,
.landing-final-cta {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
}

.landing-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: -54px;
}

.landing-stats article,
.landing-feature-grid article,
.landing-flow,
.landing-audience article,
.landing-plan-card,
.landing-form,
.landing-faq details,
.landing-final-cta {
    background: #ffffff;
    border: 1px solid #dbe7f1;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

.landing-stats article {
    display: grid;
    gap: 6px;
    min-height: 116px;
    padding: 18px;
}

.landing-stats strong,
.landing-feature-grid b,
.landing-flow b,
.landing-audience b,
.landing-plan-card strong,
.landing-final-cta h2 {
    color: #10243a;
}

.landing-stats span,
.landing-feature-grid p,
.landing-flow span,
.landing-audience span,
.landing-plan-card p,
.landing-plan-card li,
.landing-signup p,
.landing-signup li,
.landing-faq p,
.landing-final-cta p {
    color: #607086;
    line-height: 1.5;
}

.landing-section,
.landing-audience,
.landing-faq {
    display: grid;
    gap: 18px;
    padding-top: 36px;
}

.landing-section-title {
    max-width: 760px;
}

.landing-section-title h2,
.landing-flow h2,
.landing-signup h2 {
    margin: 7px 0 0;
    color: #10243a;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 950;
    line-height: 1.08;
}

.landing-feature-grid,
.landing-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.landing-feature-grid article {
    display: grid;
    gap: 8px;
    padding: 20px;
}

.landing-feature-grid b {
    font-size: 18px;
}

.landing-flow {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 24px;
    align-items: start;
    padding: 28px;
}

.landing-flow ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.landing-flow li {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 15px 15px 15px 54px;
    background: #f8fbfd;
    border: 1px solid #dbe7f1;
    counter-increment: step;
}

.landing-flow li::before {
    content: counter(step);
    position: absolute;
    left: 15px;
    top: 15px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #ffffff;
    background: #176d98;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.landing-audience > div:last-child {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.landing-audience article {
    display: grid;
    gap: 8px;
    padding: 18px;
}

.landing-plan-card {
    display: grid;
    gap: 10px;
    padding: 20px;
    cursor: pointer;
}

.landing-plan-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.landing-plan-card.is-selected,
.landing-plan-card:has(input:checked) {
    border-color: #176d98;
    box-shadow: 0 0 0 3px rgba(23, 109, 152, .13), 0 18px 48px rgba(15, 23, 42, .08);
}

.landing-plan-card > span {
    color: #176d98;
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
}

.landing-plan-card strong {
    font-size: 32px;
}

.landing-plan-card strong small {
    color: #607086;
    font-size: 14px;
}

.landing-plan-card ul,
.landing-signup ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 19px;
}

.landing-empty-plans {
    grid-column: 1 / -1;
    display: grid;
    gap: 5px;
    padding: 20px;
    background: #ffffff;
    border: 1px dashed #9fb8ca;
    border-radius: 8px;
}

.landing-signup {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 22px;
    align-items: start;
    padding-top: 34px;
}

.landing-signup > div {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 12px;
}

.landing-form {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.landing-form h3 {
    margin: 0 0 12px;
    color: #10243a;
    font-size: 18px;
}

.landing-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.landing-form label {
    display: grid;
    gap: 7px;
    color: #42526a;
    font-size: 13px;
    font-weight: 850;
}

.landing-form input {
    width: 100%;
    min-height: 44px;
    color: #10243a;
    background: #ffffff;
    border: 1px solid #cbd7e4;
    border-radius: 8px;
}

.landing-form-full {
    grid-column: 1 / -1;
}

.landing-form footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
}

.landing-form footer a {
    color: #176d98;
    font-weight: 900;
    text-decoration: none;
}

.landing-form button {
    min-height: 44px;
    padding: 0 18px;
    color: #ffffff;
    background: #176d98;
    border: 1px solid #176d98;
    border-radius: 8px;
    font-weight: 950;
}

.landing-form button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.landing-alert {
    display: grid;
    gap: 4px;
    padding: 12px;
    color: #14532d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-weight: 800;
}

.landing-alert-error {
    color: #991b1b;
    background: #fff1f2;
    border-color: #fecdd3;
}

.landing-faq details {
    padding: 18px;
}

.landing-faq summary {
    color: #10243a;
    cursor: pointer;
    font-size: 17px;
    font-weight: 900;
}

.landing-faq p {
    margin: 12px 0 0;
}

.landing-final-cta {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-top: 26px;
    padding: clamp(28px, 5vw, 54px);
    text-align: center;
    background: #10243a;
}

.landing-final-cta h2 {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 4vw, 48px);
}

.landing-final-cta p {
    max-width: 640px;
    margin: 0;
    color: rgba(255, 255, 255, .75);
}

.landing-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 24px clamp(18px, 5vw, 72px);
    color: #607086;
    background: #ffffff;
    border-top: 1px solid #dbe7f1;
}

.landing-footer a {
    color: #176d98;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 1040px) {
    .landing-navbar nav {
        display: none;
    }

    .landing-hero,
    .landing-flow,
    .landing-signup {
        grid-template-columns: 1fr;
    }

    .landing-signup > div {
        position: static;
    }

    .landing-stats,
    .landing-feature-grid,
    .landing-plan-grid,
    .landing-audience > div:last-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .landing-navbar,
    .landing-nav-actions,
    .landing-form footer,
    .landing-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .landing-brand {
        justify-content: center;
    }

    .landing-hero {
        min-height: auto;
    }

    .landing-product-shot {
        display: none;
    }

    .landing-stats,
    .landing-feature-grid,
    .landing-plan-grid,
    .landing-audience > div:last-child,
    .landing-form-grid,
    .landing-ticket-grid {
        grid-template-columns: 1fr;
    }

    .landing-hero-actions,
    .landing-final-cta div {
        align-items: stretch;
        flex-direction: column;
    }

    .landing-form-full {
        grid-column: auto;
    }
}

/* Dashboard operacional. */
.dashboard-page {
    --dash-blue: #2b6f9f;
    --dash-blue-dark: #173f5f;
    --dash-blue-soft: #eaf4fb;
    --dash-line: #d8e2ec;
    --dash-muted: #64748b;
    --dash-text: #111827;
    background: #f3f6f9;
    padding: 20px;
}

.dashboard-page .panel {
    border: 1px solid var(--dash-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.dashboard-page svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 104px;
    padding: 20px 22px;
    background:
        linear-gradient(135deg, rgba(43, 111, 159, .12), rgba(255, 255, 255, 0) 58%),
        #ffffff;
}

.dashboard-hero span {
    display: block;
    margin-bottom: 4px;
    color: var(--dash-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-hero h1 {
    color: var(--dash-text);
    font-size: 24px;
    font-weight: 750;
}

.dashboard-hero p {
    max-width: 660px;
    margin: 5px 0 0;
    color: var(--dash-muted);
}

.dashboard-action,
.dashboard-card header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    color: var(--dash-blue-dark);
    background: var(--dash-blue-soft);
    border: 1px solid #c8dfef;
    border-radius: 8px;
    padding: 8px 12px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-action:hover,
.dashboard-card header a:hover {
    color: #ffffff;
    background: var(--dash-blue);
    border-color: var(--dash-blue);
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
}

.dashboard-metrics article {
    display: grid;
    gap: 8px;
    margin-bottom: 0;
    background: #ffffff;
}

.dashboard-metrics svg {
    width: 34px;
    height: 34px;
    padding: 8px;
    color: var(--dash-blue);
    background: var(--dash-blue-soft);
    border-radius: 8px;
}

.dashboard-metrics span {
    color: var(--dash-muted);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-metrics strong {
    color: var(--dash-text);
    font-size: 22px;
    font-weight: 750;
}

.dashboard-metrics small {
    color: var(--dash-muted);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
    gap: 14px;
    margin-top: 14px;
    align-items: start;
}

.dashboard-grid-single {
    grid-template-columns: 1fr;
}

.dashboard-grid-overview {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
}

.dashboard-grid-overview > .dashboard-card,
.dashboard-side-stack > .dashboard-card {
    margin-bottom: 0;
}

.dashboard-side-stack {
    display: grid;
    gap: 14px;
    align-content: start;
}

.dashboard-card {
    background: #ffffff;
}

.dashboard-card-wide {
    grid-row: span 2;
}

.dashboard-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.dashboard-card h2 {
    color: var(--dash-text);
    font-size: 17px;
    font-weight: 750;
}

.dashboard-card p {
    margin: 4px 0 0;
    color: var(--dash-muted);
}

.dashboard-table {
    display: grid;
    gap: 8px;
}

.dashboard-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.25fr) 132px 120px 140px minmax(160px, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 56px;
    padding: 10px 12px;
    text-decoration: none;
}

.dashboard-row:not(.dashboard-row-head):hover {
    border-color: #bdd5e8;
}

.dashboard-row-head {
    min-height: 40px;
    color: var(--dash-muted);
    background: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-row strong,
.dashboard-row small {
    display: block;
}

.dashboard-row strong {
    color: var(--dash-text);
}

.dashboard-row small {
    margin-top: 3px;
    color: var(--dash-muted);
    font-size: 12px;
}

.dashboard-status,
.dashboard-channels b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
    color: #526173;
    background: transparent;
    border-radius: 0;
    font-size: 12px;
    font-weight: 650;
}

.dashboard-status.waiting,
.dashboard-status.queued {
    color: #8a5a00;
    background: transparent;
}

.dashboard-status.active,
.dashboard-channels b.connected {
    color: var(--dash-blue-dark);
    background: transparent;
}

.dashboard-status.resolved,
.dashboard-status.closed {
    color: #526173;
    background: transparent;
}

.dashboard-status::before,
.dashboard-channels b::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #94a3b8;
}

.dashboard-status.waiting::before,
.dashboard-status.queued::before {
    background: #d89b22;
}

.dashboard-status.active::before,
.dashboard-channels b.connected::before {
    background: var(--dash-blue);
}

.dashboard-status.resolved::before,
.dashboard-status.closed::before {
    background: #94a3b8;
}

.dashboard-stack,
.dashboard-channels {
    display: grid;
    gap: 10px;
}

.dashboard-stack div,
.dashboard-channels div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e3eaf1;
    border-radius: 8px;
}

.dashboard-stack span,
.dashboard-channels small {
    color: var(--dash-muted);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-stack strong,
.dashboard-channels strong {
    color: var(--dash-text);
}

.dashboard-channels span {
    display: grid;
    gap: 2px;
}

.tenant-health-card {
    display: grid;
    gap: 14px;
}

.tenant-health-card header {
    margin-bottom: 0;
}

.tenant-health-limits,
.tenant-health-summary {
    display: grid;
    gap: 10px;
}

.tenant-health-limit,
.tenant-health-summary-item {
    display: grid;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e3eaf1;
    border-radius: 8px;
}

.tenant-health-limit {
    grid-template-columns: minmax(170px, 1fr) minmax(64px, max-content) minmax(150px, .8fr);
}

.tenant-health-summary-item {
    grid-template-columns: minmax(170px, 1fr) minmax(64px, max-content);
}

.tenant-health-limit span,
.tenant-health-summary-item span {
    color: var(--dash-muted);
    font-size: 12px;
    font-weight: 700;
}

.tenant-health-limit strong,
.tenant-health-summary-item strong {
    justify-self: end;
    min-width: 64px;
    color: var(--dash-text);
    text-align: right;
}

.tenant-health-limit small {
    justify-self: end;
    color: var(--dash-muted);
    font-size: 12px;
    text-align: right;
}

.tenant-health-table .dashboard-row {
    grid-template-columns: minmax(170px, 1fr) 132px minmax(220px, 2fr);
}

@media (max-width: 1180px) {
    .dashboard-metrics,
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-card-wide {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .dashboard-grid-single,
    .dashboard-grid-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .dashboard-page {
        padding: 14px;
    }

    .dashboard-hero,
    .dashboard-card header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-metrics,
    .dashboard-grid,
    .dashboard-row,
    .dashboard-row-head {
        grid-template-columns: 1fr;
    }

    .dashboard-row-head {
        display: none;
    }

    .tenant-health-limit,
    .tenant-health-summary-item,
    .tenant-health-table .dashboard-row {
        grid-template-columns: 1fr;
    }

    .tenant-health-limit strong,
    .tenant-health-summary-item strong,
    .tenant-health-limit small {
        justify-self: start;
        text-align: left;
    }
}

/* Clientes contratantes do CRM. */
.crm-clients-page {
    --crm-blue: #2b6f9f;
    --crm-blue-dark: #173f5f;
    --crm-blue-soft: #eaf4fb;
    --crm-line: #d8e2ec;
    --crm-muted: #64748b;
    --crm-text: #111827;
    background: #f3f6f9;
    padding: 20px;
}

.crm-clients-page .panel {
    border: 1px solid var(--crm-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.crm-clients-page svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crm-clients-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 104px;
    padding: 20px 22px;
    background:
        linear-gradient(135deg, rgba(43, 111, 159, .12), rgba(255, 255, 255, 0) 58%),
        #ffffff;
}

.crm-clients-hero span {
    display: block;
    margin-bottom: 4px;
    color: var(--crm-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.crm-clients-hero h1 {
    color: var(--crm-text);
    font-size: 24px;
    font-weight: 750;
}

.crm-clients-hero p {
    max-width: 720px;
    margin: 5px 0 0;
    color: var(--crm-muted);
}

.crm-clients-hero-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: var(--crm-blue);
    background: var(--crm-blue-soft);
    border-radius: 8px;
}

.crm-clients-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
}

.crm-clients-metrics article {
    display: grid;
    gap: 6px;
    margin-bottom: 0;
    background: #ffffff;
}

.crm-clients-metrics span {
    color: var(--crm-muted);
    font-size: 12px;
    font-weight: 700;
}

.crm-clients-metrics strong {
    color: var(--crm-text);
    font-size: 22px;
    font-weight: 750;
}

.crm-clients-table-panel {
    margin-top: 14px;
    background: #ffffff;
}

.crm-clients-table-panel header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.crm-clients-table-panel h2 {
    color: var(--crm-text);
    font-size: 17px;
    font-weight: 750;
}

.crm-clients-table-panel p {
    margin: 4px 0 0;
    color: var(--crm-muted);
}

.crm-clients-actions,
.crm-clients-search {
    display: flex;
    gap: 8px;
}

.crm-clients-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.crm-clients-search input {
    min-width: 220px;
}

.crm-clients-search button,
.crm-clients-actions > button,
.crm-client-dialog footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
}

.crm-clients-search button,
.crm-clients-actions > button,
.crm-client-dialog footer .btn-primary {
    background: var(--crm-blue);
    border-color: var(--crm-blue);
}

.crm-clients-search button:hover,
.crm-clients-actions > button:hover,
.crm-client-dialog footer .btn-primary:hover {
    background: var(--crm-blue-dark);
    border-color: var(--crm-blue-dark);
}

.crm-clients-table {
    display: grid;
    gap: 8px;
}

.crm-clients-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.35fr) 130px 120px 120px 130px 90px 82px;
    gap: 12px;
    align-items: center;
    min-height: 56px;
    padding: 10px 12px;
}

.crm-clients-row.selected,
.crm-clients-row:not(.crm-clients-row-head):hover {
    border-color: #bdd5e8;
}

.crm-clients-row-head {
    min-height: 40px;
    color: var(--crm-muted);
    background: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.crm-clients-row strong,
.crm-clients-row small {
    display: block;
}

.crm-clients-row strong {
    color: var(--crm-text);
}

.crm-clients-row small {
    margin-top: 3px;
    color: var(--crm-muted);
    font-size: 12px;
}

.crm-clients-row button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--crm-blue);
    background: var(--crm-blue-soft);
    border: 1px solid #c8dfef;
    border-radius: 8px;
    padding: 0;
}

.crm-client-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.crm-client-row-actions form {
    display: inline-flex;
    margin: 0;
}

.crm-clients-row button.danger {
    color: #b42318;
    background: #fff5f4;
    border-color: #f4c7c3;
}

.crm-clients-row button.danger:hover {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}

.crm-client-status {
    display: inline-flex;
    align-items: center;
    color: #526173;
    font-size: 12px;
    font-weight: 650;
}

.crm-client-status::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #94a3b8;
}

.crm-client-status.active {
    color: var(--crm-blue-dark);
}

.crm-client-status.queued,
.crm-client-status.pending {
    color: #1d4ed8;
    background: #dbeafe;
}

.crm-client-status.running {
    color: #92400e;
    background: #fef3c7;
}

.crm-client-status.finished,
.crm-client-status.sent {
    color: #047857;
    background: #d1fae5;
}

.crm-client-status.failed {
    color: #b91c1c;
    background: #fee2e2;
}

.crm-client-status.canceled {
    color: #475569;
    background: #e2e8f0;
}

.scheduled-campaign-recipient-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.scheduled-campaign-recipient-actions form {
    margin: 0;
}

.tenant-users-row {
    grid-template-columns: minmax(210px, 1fr) 120px minmax(190px, .75fr) minmax(190px, .75fr) 100px 150px 54px;
}

.tenant-user-coverage {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.tenant-user-coverage > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tenant-user-coverage > header h2 {
    color: var(--crm-text);
    font-size: 18px;
}

.tenant-user-coverage > header p {
    margin: 4px 0 0;
    color: var(--crm-muted);
}

.tenant-user-coverage-alert,
.tenant-user-coverage-ok {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.tenant-user-coverage-alert {
    color: #92400e;
    background: #fff4dd;
    border: 1px solid #f0d6aa;
}

.tenant-user-coverage-ok {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.tenant-user-coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.tenant-user-coverage-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dce7f1;
    border-radius: 8px;
    background: #fff;
}

.tenant-user-coverage-item > i {
    flex: 0 0 auto;
    width: 10px;
    height: 42px;
    border-radius: 999px;
    background: var(--queue-color, var(--crm-blue-dark));
}

.tenant-user-coverage-item > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.tenant-user-coverage-item strong {
    color: var(--crm-text);
    font-size: 13px;
}

.tenant-user-coverage-item small,
.tenant-user-coverage-item span,
.tenant-user-coverage-item em {
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 1.35;
}

.tenant-user-coverage-item em {
    font-style: normal;
}

.tenant-user-coverage-item.is-warning {
    border-color: #f0d6aa;
    background: #fffaf1;
}

.tenant-user-coverage-item.is-ok {
    border-color: #c8dfef;
    background: #f6fbff;
}

.tenant-user-queues {
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
}

.tenant-user-queues-head {
    display: grid;
    gap: 10px;
}

.tenant-user-queues-head > div:first-child {
    display: grid;
    gap: 3px;
}

.tenant-user-queues-head span {
    color: var(--crm-blue-dark);
    font-size: .85rem;
    font-weight: 800;
}

.tenant-user-queues-head small {
    color: #61708a;
    font-size: .8rem;
}

.tenant-user-queues-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
}

.tenant-user-queues-tools input {
    width: 100%;
    min-width: 0;
}

.tenant-user-queues-tools .btn {
    min-height: 38px;
    padding: 8px 12px;
}

.tenant-user-queues-list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    max-height: 210px;
    overflow: auto;
    padding: 12px;
    border: 1px solid #d2dfec;
    border-radius: 8px;
    background: #f8fbfe;
}

.tenant-user-queues-list .crm-client-check {
    min-height: 40px;
    padding: 9px 10px;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
    background: #ffffff;
}

.tenant-user-queues-list .crm-client-check:hover {
    border-color: #9fc1dd;
    background: #f1f7fc;
}

.tenant-user-queues-list .crm-client-check span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-user-queue-summary {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.tenant-user-queue-summary strong {
    color: var(--crm-text);
    font-size: 13px;
    line-height: 1.25;
}

.tenant-user-queue-summary small {
    color: var(--crm-muted);
    line-height: 1.35;
}

.tenant-user-queue-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tenant-user-queue-chips em {
    max-width: 100%;
    padding: 4px 8px;
    overflow: hidden;
    color: var(--crm-blue-dark);
    background: var(--crm-blue-soft);
    border: 1px solid #cce1ef;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-user-queue-summary-all {
    padding: 8px 10px;
    background: #f1f8fd;
    border: 1px solid #d4e7f3;
    border-radius: 8px;
}

.tenant-user-queue-summary-empty {
    gap: 5px;
}

.tenant-user-queue-checklist {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.tenant-user-queue-checklist small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 5px 7px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    font-size: 11px;
    line-height: 1.2;
}

.tenant-user-queue-checklist b,
.tenant-user-queue-checklist span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-user-queue-checklist b {
    color: var(--crm-text);
}

.tenant-user-queue-checklist span {
    color: var(--crm-muted);
}

.tenant-user-queue-checklist .is-ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.tenant-user-queue-checklist .is-warning {
    border-color: #f0d6aa;
    background: #fffaf1;
}

.tenant-user-queues-note {
    color: #50617a;
    line-height: 1.4;
}

html[data-bs-theme="dark"] .tenant-user-queues-list,
html[data-theme="dark"] .tenant-user-queues-list {
    border-color: rgba(148, 163, 184, .24);
    background: rgba(15, 23, 42, .42);
}

html[data-bs-theme="dark"] .tenant-user-queues-list .crm-client-check,
html[data-theme="dark"] .tenant-user-queues-list .crm-client-check {
    border-color: rgba(148, 163, 184, .22);
    background: rgba(15, 23, 42, .62);
}

html[data-bs-theme="dark"] .tenant-user-queues-list .crm-client-check:hover,
html[data-theme="dark"] .tenant-user-queues-list .crm-client-check:hover {
    border-color: rgba(125, 211, 252, .45);
    background: rgba(14, 116, 144, .18);
}

html[data-bs-theme="dark"] .tenant-user-queue-chips em,
html[data-theme="dark"] .tenant-user-queue-chips em {
    color: #bae6fd;
    background: rgba(14, 116, 144, .24);
    border-color: rgba(125, 211, 252, .3);
}

html[data-bs-theme="dark"] .tenant-user-queue-summary-all,
html[data-theme="dark"] .tenant-user-queue-summary-all {
    background: rgba(14, 116, 144, .16);
    border-color: rgba(125, 211, 252, .25);
}

html[data-bs-theme="dark"] .tenant-user-queue-checklist small,
html[data-theme="dark"] .tenant-user-queue-checklist small {
    color: var(--muted);
    background: rgba(15, 23, 42, .42);
    border-color: rgba(148, 163, 184, .24);
}

html[data-bs-theme="dark"] .tenant-user-queue-checklist b,
html[data-bs-theme="dark"] .tenant-user-queue-checklist span,
html[data-theme="dark"] .tenant-user-queue-checklist b,
html[data-theme="dark"] .tenant-user-queue-checklist span {
    color: var(--muted);
}

html[data-bs-theme="dark"] :is(.tenant-user-coverage, .tenant-user-coverage-item),
html[data-theme="dark"] :is(.tenant-user-coverage, .tenant-user-coverage-item) {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
}

html[data-bs-theme="dark"] :is(.tenant-user-coverage h2, .tenant-user-coverage-item strong),
html[data-theme="dark"] :is(.tenant-user-coverage h2, .tenant-user-coverage-item strong) {
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.tenant-user-coverage p, .tenant-user-coverage-item small, .tenant-user-coverage-item span, .tenant-user-coverage-item em),
html[data-theme="dark"] :is(.tenant-user-coverage p, .tenant-user-coverage-item small, .tenant-user-coverage-item span, .tenant-user-coverage-item em) {
    color: var(--muted) !important;
}

html[data-bs-theme="dark"] .tenant-user-queues-note,
html[data-theme="dark"] .tenant-user-queues-note {
    color: #a8bed6;
}

.tenant-user-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.tenant-user-action-menu {
    position: relative;
}

.tenant-user-action-menu summary {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--crm-blue-dark);
    background: var(--crm-blue-soft);
    border: 1px solid #c8dfef;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}

.tenant-user-action-menu summary::-webkit-details-marker {
    display: none;
}

.tenant-user-action-menu > div {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 190px;
    padding: 7px;
    border: 1px solid #d7e6f2;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
}

.tenant-user-action-menu form {
    display: contents;
}

.tenant-user-action-menu button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #1f3349;
    font-size: 12px;
    font-weight: 750;
}

.tenant-user-action-menu button:hover {
    color: var(--crm-blue-dark);
    background: #edf6fc;
}

.tenant-user-action-menu button svg {
    width: 16px;
    height: 16px;
}

.tenant-user-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 20px;
}

.tenant-user-modal[hidden] {
    display: none;
}

.tenant-user-dialog {
    width: min(720px, 96vw);
}

.access-profiles-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto;
    align-items: center;
}

.access-profiles-hero-summary {
    display: grid;
    gap: 4px;
    align-self: stretch;
    align-content: center;
    padding: 14px 16px;
    background: #f8fbfd;
    border: 1px solid #dbe7f1;
    border-radius: 8px;
}

.access-profiles-hero-summary span,
.access-profile-context-grid span,
.permissions-grid article header span {
    color: var(--crm-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.access-profiles-hero-summary strong {
    color: var(--crm-text);
    font-size: 15px;
}

.access-profiles-hero-summary small {
    color: var(--crm-muted);
    font-size: 12px;
}

.access-profiles-table .tenant-users-row {
    grid-template-columns: minmax(240px, 1fr) 210px 120px 120px 42px;
}

.access-profile-count {
    display: block;
    color: var(--crm-text);
    font-size: 13px;
}

.access-profile-dialog {
    width: min(1040px, 96vw);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 34px);
    overflow: hidden;
}

.access-profile-dialog .crm-client-grid {
    flex: 0 0 auto;
}

.access-profile-dialog footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.access-profile-context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 20px 0;
}

.access-profile-context-grid article {
    display: grid;
    gap: 4px;
    min-height: 96px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #dbe7f1;
    border-radius: 8px;
}

.access-profile-context-grid article.active {
    background: #eef7fd;
    border-color: #bad7ea;
    box-shadow: inset 4px 0 0 #2b6f9f;
}

.access-profile-context-grid strong {
    color: #111827;
    font-size: 14px;
}

.access-profile-context-grid p,
.permissions-grid article header p {
    margin: 0;
    color: #526173;
    font-size: 12px;
    line-height: 1.35;
}

.access-profile-dialog footer .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 170px;
    min-height: 42px;
    padding: 0 18px;
    color: #ffffff;
    background: #2b6f9f !important;
    border-color: #2b6f9f !important;
    box-shadow: 0 10px 22px rgba(43, 111, 159, .22);
    opacity: 1;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0;
}

.access-profile-dialog footer .btn-primary:hover,
.access-profile-dialog footer .btn-primary:focus-visible {
    color: #ffffff;
    background: #173f5f !important;
    border-color: #173f5f !important;
}

.access-profile-dialog footer .btn-primary svg {
    color: #ffffff;
    stroke: currentColor;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 18px 20px 22px;
    overflow: auto;
}

.permissions-grid article {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 0;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}

.permissions-grid article.context-permissions {
    background: #f4f9fd;
    border-color: #bad7ea;
}

.permissions-grid article header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px 14px 12px;
    border-bottom: 1px solid #e0e8f0;
    background: rgba(255, 255, 255, .58);
}

.permissions-grid article header > div:first-child {
    display: grid;
    gap: 7px;
}

.permissions-grid h3 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    line-height: 1.15;
}

.permission-group-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.permission-group-actions button {
    min-height: 28px;
    padding: 0 10px;
    color: #2b6f9f;
    background: #eaf4fb;
    border: 1px solid #c8dfef;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 750;
}

.permission-group-actions button:hover {
    color: #ffffff;
    background: #2b6f9f;
    border-color: #2b6f9f;
}

.permission-options {
    display: grid;
    gap: 2px;
    padding: 0 12px 14px;
}

.permissions-grid label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 34px;
    margin: 0;
    padding: 8px 6px;
    color: var(--muted);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.permissions-grid label:hover {
    background: rgba(43, 111, 159, .07);
}

.permissions-grid label input {
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.permissions-grid label span {
    display: grid;
    gap: 0;
}

.permissions-grid label b {
    color: #334155;
    font-size: 13px;
    line-height: 1.25;
}

.permissions-grid label small {
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
}

.access-profile-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
    min-height: 39px;
}

.access-profile-toggle span {
    grid-column: 1 / -1;
}

.access-profile-toggle input {
    width: 18px;
    height: 18px;
}

.access-profile-toggle b {
    color: #334155;
    font-size: 12px;
}

.tenant-queues-row {
    grid-template-columns: minmax(190px, 1fr) 90px 90px minmax(180px, .9fr) minmax(300px, 1.25fr) 100px 42px;
}

.queue-operation-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    padding: 14px;
}

.queue-operation-guide article {
    display: grid;
    gap: 4px;
    padding: 12px;
    background: #f8fbfe;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
}

.queue-operation-guide b {
    color: var(--crm-blue-dark);
    font-size: 13px;
}

.queue-operation-guide span {
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 1.4;
}

.queue-usage-summary,
.queue-ops-summary {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.queue-usage-summary strong {
    color: var(--crm-text);
    font-size: 13px;
}

.queue-diagnostic-line {
    display: block;
    color: var(--crm-text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.queue-diagnostic-line.is-warning {
    color: #92400e;
}

.queue-diagnostic-line.is-ok {
    color: #166534;
}

.queue-diagnostic-line.is-neutral {
    color: #475569;
}

.queue-usage-summary small,
.queue-ops-summary small {
    color: var(--crm-muted);
    line-height: 1.35;
}

.queue-usage-summary em {
    display: block;
    color: #475569;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

.queue-usage-summary-empty strong {
    color: #92400e;
}

.queue-usage-summary-empty em {
    color: #92400e;
}

.queue-readiness-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.queue-readiness-checklist article {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
}

.queue-readiness-checklist article::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #94a3b8;
}

.queue-readiness-checklist article.is-ok::before {
    background: #16a34a;
}

.queue-readiness-checklist article.is-warning::before {
    background: #f59e0b;
}

.queue-readiness-checklist strong {
    color: #10243a;
    font-size: 11px;
    font-weight: 850;
}

.queue-readiness-checklist small {
    color: #61708a;
    font-size: 10px;
    line-height: 1.3;
}

.queue-ops-summary > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.queue-ops-summary > .queue-readiness-checklist {
    display: grid;
}

.queue-ops-summary b {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.queue-ops-summary b.on {
    color: #0f5f8a;
    background: #eaf6fd;
    border-color: #c8dfef;
}

.quick-replies-row {
    grid-template-columns: minmax(280px, 1fr) 150px 120px 96px;
}

.bot-flows-row {
    grid-template-columns: minmax(250px, 1.2fr) minmax(150px, .8fr) minmax(140px, .7fr) minmax(180px, .9fr) 110px 96px;
}

.bot-flows-page {
    display: grid;
    gap: 16px;
    align-content: start;
}

.bot-flows-page .crm-clients-hero,
.bot-flows-page .crm-clients-metrics,
.bot-flows-page .bot-flow-rules-guide,
.bot-flows-page .bot-flow-coverage,
.bot-flows-page .bot-flow-builder,
.bot-flows-page .crm-clients-table-panel {
    margin-top: 0;
    margin-bottom: 0;
}

.bot-flows-page .crm-clients-metrics {
    gap: 16px;
}

.bot-flow-rules-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.bot-flow-rules-guide article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
    align-items: start;
}

.bot-flow-rules-guide article span {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--crm-blue-dark);
    background: var(--crm-blue-soft);
    border: 1px solid #c8dfef;
    border-radius: 8px;
    font-weight: 900;
}

.bot-flow-rules-guide article strong {
    align-self: center;
    color: var(--crm-text);
    font-size: 14px;
}

.bot-flow-rules-guide article p {
    grid-column: 2;
    margin: 0;
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 1.45;
}

.bot-flow-coverage {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.bot-flow-coverage > header span {
    color: var(--crm-blue-dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.bot-flow-coverage > header h2 {
    margin: 2px 0 0;
    color: var(--crm-text);
    font-size: 18px;
}

.bot-flow-coverage > header p {
    margin: 3px 0 0;
    color: var(--crm-muted);
}

.bot-flow-coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.bot-flow-coverage-grid article {
    display: grid;
    gap: 5px;
    padding: 12px;
    background: #f8fbfe;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
}

.bot-flow-coverage-grid article.is-ok {
    border-color: #b7e4c7;
    background: #f3fcf6;
}

.bot-flow-coverage-grid article.is-warning {
    border-color: #f4d38a;
    background: #fffbeb;
}

.bot-flow-coverage-grid article strong {
    color: var(--crm-text);
}

.bot-flow-coverage-grid article span,
.bot-flow-coverage-grid article p {
    margin: 0;
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 1.35;
}

.bot-flow-builder {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.bot-flow-builder > header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.bot-flow-builder > header span {
    color: var(--crm-blue-dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.bot-flow-builder > header h2 {
    margin: 2px 0 0;
    color: var(--crm-text);
    font-size: 18px;
}

.bot-flow-builder > header p {
    margin: 3px 0 0;
    color: var(--crm-muted);
}

.bot-flow-lanes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.bot-flow-lane {
    display: grid;
    gap: 12px;
    align-content: start;
    min-height: 120px;
    padding: 12px;
    background: #f8fbfe;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
}

.bot-flow-lane > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.bot-flow-lane > header strong {
    color: var(--crm-text);
}

.bot-flow-lane > header small {
    color: var(--crm-muted);
    line-height: 1.35;
}

.bot-flow-lane ol {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bot-flow-lane li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
}

.bot-flow-lane li > span {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--crm-blue-dark);
    background: var(--crm-blue-soft);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
}

.bot-flow-lane li div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.bot-flow-lane li strong,
.bot-flow-lane li small,
.bot-flow-lane li em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-flow-lane li small {
    color: var(--crm-muted);
}

.bot-flow-lane li em {
    color: #0f5f8a;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.bot-flow-lane li .bot-flow-priority-note {
    white-space: normal;
    color: #4b6b84;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.bot-flow-lane li .bot-flow-priority-note.is-warning {
    color: #92400e;
}

.bot-flow-lane li .bot-flow-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
}

.bot-flow-lane li .bot-flow-map-actions form {
    margin: 0;
}

.bot-flow-lane li .bot-flow-map-actions button {
    min-height: 28px;
    padding: 4px 8px;
    color: var(--crm-blue-dark);
    background: #ffffff;
    border: 1px solid #c8dfef;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.bot-flow-lane li .bot-flow-map-actions button:hover {
    background: var(--crm-blue-soft);
}

.bot-flow-trigger-summary,
.bot-flow-route-summary,
.bot-flow-action-summary {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.bot-flow-trigger-summary code {
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    overflow: hidden;
    color: #0f5f8a;
    background: #eaf6fd;
    border: 1px solid #c8dfef;
    border-radius: 8px;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-flow-route-summary b {
    color: var(--crm-blue-dark);
    font-size: 11px;
    text-transform: uppercase;
}

.bot-flow-route-summary small,
.bot-flow-action-summary small {
    color: var(--crm-muted);
    line-height: 1.35;
}

.bot-flow-route-summary em {
    color: #4b6b84;
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}

.bot-flow-route-summary em.is-warning,
.bot-flow-transfer-diagnostic.is-warning {
    color: #92400e;
}

.bot-flow-transfer-diagnostic {
    color: #4b6b84;
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}

.bot-flow-diagnostic-chip,
.bot-flow-modal-warning {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid #c8dfef;
    border-radius: 999px;
    color: #0f5f8a;
    background: #eaf6fd;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.bot-flow-diagnostic-chip.is-warning,
.bot-flow-modal-warning[data-status="warning"] {
    color: #92400e;
    background: #fff7ed;
    border-color: #fed7aa;
}

.bot-flow-diagnostic-chip.is-info,
.bot-flow-modal-warning[data-status="info"] {
    color: #475569;
    background: #f8fafc;
    border-color: #d7e3ee;
}

.bot-flow-priority-diagnostic {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    background: #f3fcf6;
    border: 1px solid #b7e4c7;
    border-radius: 8px;
}

.bot-flow-priority-diagnostic strong {
    color: #166534;
    font-size: 12px;
}

.bot-flow-priority-diagnostic span {
    color: #4b6b84;
    font-size: 12px;
    line-height: 1.35;
}

.bot-flow-priority-diagnostic.is-warning {
    background: #fff7ed;
    border-color: #fed7aa;
}

.bot-flow-priority-diagnostic.is-warning strong {
    color: #92400e;
}

.bot-flow-priority-diagnostic.is-info {
    background: #f8fafc;
    border-color: #d7e3ee;
}

.bot-flow-priority-diagnostic.is-info strong {
    color: #475569;
}

[data-bot-flow-queue-usage-note] {
    display: block;
    margin-top: 5px;
    color: #5b6b83;
    font-size: 12px;
    line-height: 1.35;
}

.bot-flow-action-summary > b {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    padding: 3px 7px;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #dbe5ef;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.bot-flow-action-summary > b.on {
    color: #0f5f8a;
    background: #eaf6fd;
    border-color: #c8dfef;
}

.bot-flow-form {
    display: grid;
    gap: 14px;
    padding: 18px 20px 0;
}

.bot-flow-form-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d8e4ef;
    border-radius: 8px;
    background: #fbfdff;
}

.bot-flow-form-section > header {
    display: grid;
    gap: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5edf5;
}

.bot-flow-form-section > header span {
    color: var(--crm-blue-dark);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.bot-flow-form-section > header p {
    margin: 0;
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 1.4;
}

.bot-flow-form .bot-flow-grid {
    padding: 0;
}

.bot-flow-preview {
    display: grid;
    gap: 12px;
    margin: 0 20px 18px;
    padding: 16px;
}

.bot-flow-preview header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.bot-flow-preview header span {
    color: var(--crm-blue-dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.bot-flow-preview h3 {
    margin: 2px 0 0;
    font-size: 16px;
}

.bot-flow-preview strong {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid #d7e3ee;
    border-radius: 999px;
    color: #475569;
    background: #f8fafc;
    font-size: 12px;
}

.bot-flow-preview[data-matched="1"] strong {
    border-color: #b7e4c7;
    color: #166534;
    background: #ecfdf3;
}

.bot-flow-preview label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.bot-flow-preview label span {
    color: #50627c;
    font-size: 12px;
    font-weight: 700;
}

.bot-flow-preview-result {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px dashed #c8dfef;
    border-radius: 8px;
    background: rgba(43, 111, 159, .05);
}

.bot-flow-preview-result span {
    color: var(--crm-blue-dark);
    font-weight: 800;
}

.bot-flow-preview-result p {
    margin: 0;
    color: #334155;
    white-space: pre-wrap;
}

html[data-theme="dark"] .bot-flow-preview strong {
    border-color: rgba(148, 163, 184, .35);
    color: #cbd5e1;
    background: rgba(15, 23, 42, .45);
}

html[data-theme="dark"] .bot-flow-rules-guide article span,
html[data-theme="dark"] .bot-flow-trigger-summary code,
html[data-theme="dark"] .bot-flow-action-summary > b.on {
    color: #bae6fd;
    background: rgba(14, 116, 144, .22);
    border-color: rgba(125, 211, 252, .28);
}

html[data-theme="dark"] .bot-flow-action-summary > b {
    color: #94a3b8;
    background: rgba(15, 23, 42, .45);
    border-color: rgba(148, 163, 184, .28);
}

html[data-theme="dark"] .bot-flow-coverage-grid article {
    background: rgba(15, 23, 42, .35);
    border-color: rgba(148, 163, 184, .24);
}

html[data-theme="dark"] .bot-flow-coverage-grid article.is-ok {
    background: rgba(22, 101, 52, .16);
    border-color: rgba(74, 222, 128, .28);
}

html[data-theme="dark"] .bot-flow-coverage-grid article.is-warning {
    background: rgba(146, 64, 14, .16);
    border-color: rgba(251, 191, 36, .3);
}

html[data-theme="dark"] .bot-flow-coverage > header span,
html[data-theme="dark"] .bot-flow-diagnostic-chip {
    color: #bae6fd;
}

html[data-theme="dark"] .bot-flow-diagnostic-chip,
html[data-theme="dark"] .bot-flow-modal-warning {
    background: rgba(14, 116, 144, .22);
    border-color: rgba(125, 211, 252, .28);
}

html[data-theme="dark"] .bot-flow-diagnostic-chip.is-warning,
html[data-theme="dark"] .bot-flow-modal-warning[data-status="warning"] {
    color: #fbbf24;
    background: rgba(146, 64, 14, .18);
    border-color: rgba(251, 191, 36, .3);
}

html[data-theme="dark"] .bot-flow-diagnostic-chip.is-info,
html[data-theme="dark"] .bot-flow-modal-warning[data-status="info"] {
    color: #cbd5e1;
    background: rgba(15, 23, 42, .45);
    border-color: rgba(148, 163, 184, .28);
}

html[data-theme="dark"] .bot-flow-priority-diagnostic {
    background: rgba(22, 101, 52, .16);
    border-color: rgba(74, 222, 128, .28);
}

html[data-theme="dark"] .bot-flow-priority-diagnostic strong {
    color: #86efac;
}

html[data-theme="dark"] .bot-flow-priority-diagnostic span {
    color: var(--muted);
}

html[data-theme="dark"] .bot-flow-priority-diagnostic.is-warning {
    background: rgba(146, 64, 14, .18);
    border-color: rgba(251, 191, 36, .3);
}

html[data-theme="dark"] .bot-flow-priority-diagnostic.is-warning strong {
    color: #fbbf24;
}

html[data-theme="dark"] .bot-flow-priority-diagnostic.is-info {
    background: rgba(15, 23, 42, .45);
    border-color: rgba(148, 163, 184, .28);
}

html[data-theme="dark"] .bot-flow-priority-diagnostic.is-info strong {
    color: #cbd5e1;
}

html[data-theme="dark"] .bot-flow-form-section {
    background: rgba(15, 23, 42, .35);
    border-color: rgba(148, 163, 184, .24);
}

html[data-theme="dark"] .bot-flow-form-section > header {
    border-bottom-color: rgba(148, 163, 184, .2);
}

html[data-theme="dark"] .bot-flow-form-section > header span {
    color: #bae6fd;
}

html[data-theme="dark"] .bot-flow-form-section > header p {
    color: var(--muted);
}

html[data-theme="dark"] .bot-flow-lane {
    background: rgba(15, 23, 42, .35);
    border-color: rgba(148, 163, 184, .24);
}

html[data-theme="dark"] .bot-flow-lane li {
    background: rgba(15, 23, 42, .48);
    border-color: rgba(148, 163, 184, .24);
}

html[data-theme="dark"] .bot-flow-lane li > span {
    color: #bae6fd;
    background: rgba(14, 116, 144, .22);
}

html[data-theme="dark"] .bot-flow-lane li em {
    color: #7dd3fc;
}

html[data-theme="dark"] .bot-flow-lane li .bot-flow-priority-note {
    color: var(--muted);
}

html[data-theme="dark"] .bot-flow-lane li .bot-flow-priority-note.is-warning {
    color: #fbbf24;
}

html[data-theme="dark"] :is(.bot-flow-route-summary em, .bot-flow-transfer-diagnostic, [data-bot-flow-queue-usage-note]) {
    color: var(--muted) !important;
}

html[data-theme="dark"] :is(.bot-flow-route-summary em.is-warning, .bot-flow-transfer-diagnostic.is-warning) {
    color: #fbbf24 !important;
}

html[data-theme="dark"] .bot-flow-lane li .bot-flow-map-actions button {
    color: #bae6fd;
    background: rgba(15, 23, 42, .55);
    border-color: rgba(125, 211, 252, .28);
}

html[data-theme="dark"] .bot-flow-lane li .bot-flow-map-actions button:hover {
    background: rgba(14, 116, 144, .22);
}

html[data-theme="dark"] .bot-flow-preview[data-matched="1"] strong {
    border-color: rgba(74, 222, 128, .35);
    color: #86efac;
    background: rgba(22, 101, 52, .18);
}

html[data-theme="dark"] .bot-flow-preview-result {
    border-color: rgba(148, 163, 184, .3);
    background: rgba(15, 23, 42, .25);
}

html[data-theme="dark"] .bot-flow-preview-result p {
    color: #dbeafe;
}

.contact-tags-row {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) 120px 96px;
}

.tag-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--tag-color, #2b6f9f);
    box-shadow: 0 0 0 3px rgba(47, 120, 170, .12);
    vertical-align: -1px;
}

.contact-tag-modal input[type="color"] {
    min-height: 40px;
    padding: 4px;
}

.quick-reply-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.quick-reply-actions form {
    margin: 0;
}

.quick-reply-shortcut {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    color: var(--crm-blue-dark);
    background: var(--crm-blue-soft);
    border: 1px solid #c8dfef;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.queue-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--queue-color);
    box-shadow: 0 0 0 3px rgba(43, 111, 159, .12);
}

html[data-theme="dark"] .queue-usage-summary-empty strong {
    color: #fbbf24;
}

html[data-theme="dark"] .queue-usage-summary em {
    color: #cbd5e1;
}

html[data-theme="dark"] .queue-usage-summary-empty em {
    color: #fbbf24;
}

html[data-theme="dark"] .queue-diagnostic-line {
    color: #e2e8f0;
}

html[data-theme="dark"] .queue-diagnostic-line.is-warning {
    color: #fbbf24;
}

html[data-theme="dark"] .queue-diagnostic-line.is-ok {
    color: #86efac;
}

html[data-theme="dark"] .queue-diagnostic-line.is-neutral {
    color: #cbd5e1;
}

html[data-theme="dark"] .queue-ops-summary b {
    color: #94a3b8;
    background: rgba(15, 23, 42, .45);
    border-color: rgba(148, 163, 184, .28);
}

html[data-theme="dark"] .queue-ops-summary b.on {
    color: #bae6fd;
    background: rgba(14, 116, 144, .22);
    border-color: rgba(125, 211, 252, .28);
}

.tenant-queue-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 20px;
}

.tenant-queue-modal[hidden] {
    display: none;
}

.quick-reply-modal,
.task-modal,
.deal-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 20px;
}

.quick-reply-modal[hidden],
.task-modal[hidden],
.deal-modal[hidden] {
    display: none;
}

.quick-reply-dialog,
.task-dialog,
.deal-dialog {
    width: min(780px, 96vw);
}

.quick-reply-grid textarea {
    width: 100%;
    min-height: 170px;
    resize: vertical;
    border-color: #cbd7e4;
    border-radius: 8px;
    color: var(--crm-text);
}

.tenant-queue-dialog {
    width: min(720px, 96vw);
}

.crm-client-status.active::before {
    background: var(--crm-blue);
}

.crm-client-status.suspended::before {
    background: #d89b22;
}

.crm-client-modal {
    --crm-blue: #2b6f9f;
    --crm-blue-dark: #173f5f;
    --crm-blue-soft: #eaf4fb;
    --crm-line: #d8e2ec;
    --crm-text: #111827;
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 18px;
}

.crm-client-modal[hidden] {
    display: none;
}

.crm-client-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(2px);
}

.crm-client-dialog {
    position: relative;
    z-index: 1;
    width: min(720px, calc(100vw - 28px));
    max-height: calc(100vh - 34px);
    overflow: auto;
    background: #ffffff;
    border: 1px solid var(--crm-line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    padding: 0;
}

.crm-client-dialog svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crm-client-dialog header,
.crm-client-dialog footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.crm-client-dialog header {
    padding: 18px 20px;
    margin-bottom: 0;
    background:
        linear-gradient(135deg, rgba(43, 111, 159, .14), rgba(255, 255, 255, 0) 62%),
        #f8fbfd;
    border-bottom: 1px solid var(--crm-line);
}

.crm-client-dialog header span {
    display: block;
    margin-bottom: 4px;
    color: var(--crm-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.crm-client-dialog h2 {
    color: var(--crm-text);
    font-size: 18px;
    font-weight: 750;
}

.crm-client-dialog header button {
    color: var(--crm-blue-dark);
    background: var(--crm-blue-soft);
    border-color: #c8dfef;
    font-size: 12px;
    font-weight: 650;
}

.crm-client-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px 0;
}

.crm-client-grid label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.crm-client-grid label small {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.crm-client-onboarding {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
    padding: 14px;
    border: 1px solid #d7e6f2;
    border-radius: 10px;
    background: #f7fbff;
}

.crm-client-onboarding[hidden] {
    display: none;
}

.crm-client-onboarding > div {
    grid-column: 1 / -1;
    display: grid;
    gap: 3px;
}

.crm-client-onboarding > div span {
    color: var(--crm-blue-dark);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.crm-client-onboarding > div small {
    color: #526173;
    font-size: 12px;
    font-weight: 600;
}

.crm-client-grid .crm-client-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 39px;
    margin-top: 22px;
}

.crm-client-grid .crm-client-block-check {
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 12px;
    min-height: auto;
    margin-top: 2px;
    padding: 12px 14px;
    border: 1px solid #d7e6f2;
    border-radius: 10px;
    background: #f8fbff;
}

.crm-client-grid .crm-client-block-check input[type="checkbox"],
.crm-client-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--crm-blue);
}

.crm-client-block-check span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.crm-client-block-check strong {
    color: #1f3349;
    font-size: 12px;
    font-weight: 800;
}

.crm-client-block-check small {
    color: #526173;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.crm-client-grid input:not([type="checkbox"]),
.crm-client-grid select {
    width: 100%;
    border-color: #cbd7e4;
    border-radius: 8px;
    color: var(--crm-text);
}

.crm-client-grid input:not([type="checkbox"]):focus,
.crm-client-grid select:focus {
    outline: 3px solid rgba(43, 111, 159, .18);
    border-color: var(--crm-blue);
}

.crm-client-full {
    grid-column: 1 / -1;
}

.crm-client-errors {
    display: grid;
    gap: 5px;
    padding: 10px;
    color: #991b1b;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    font-size: 12px;
    margin: 12px 20px 0;
}

.crm-client-dialog footer {
    margin-top: 18px;
    padding: 14px 20px 18px;
    justify-content: flex-end;
    background: #f8fafc;
    border-top: 1px solid var(--crm-line);
}

.crm-client-dialog footer .btn-muted {
    color: #334155;
    background: #f8fafc;
    border-color: #d8e2ec;
}

.crm-client-dialog footer .btn-primary {
    min-width: 154px;
    color: #ffffff;
    background: var(--crm-blue);
    border-color: var(--crm-blue);
    box-shadow: 0 8px 18px rgba(43, 111, 159, .18);
}

.crm-client-dialog footer .btn-primary:hover {
    background: var(--crm-blue-dark);
    border-color: var(--crm-blue-dark);
}

.crm-client-dialog footer .btn-primary svg {
    color: #ffffff;
    stroke: currentColor;
}

@media (max-width: 820px) {
    .crm-clients-page {
        padding: 14px;
    }

    .crm-clients-hero,
    .crm-clients-table-panel header {
        align-items: flex-start;
        flex-direction: column;
    }

    .access-profiles-hero,
    .access-profile-context-grid,
    .access-profiles-table .tenant-users-row {
        grid-template-columns: 1fr;
    }

    .quick-replies-row,
    .bot-flows-row,
    .crm-clients-metrics,
    .crm-client-grid,
    .crm-clients-row,
    .crm-clients-row-head {
        grid-template-columns: 1fr;
    }

    .crm-clients-search {
        width: 100%;
        flex-direction: column;
    }

    .crm-clients-actions {
        width: 100%;
        flex-direction: column;
    }

    .crm-clients-search input {
        min-width: 0;
    }

    .crm-clients-row-head {
        display: none;
    }
}

/* Planos comerciais do CRM. */
.crm-plans-page,
.crm-plan-modal {
    --plan-blue: #2b6f9f;
    --plan-blue-dark: #173f5f;
    --plan-blue-soft: #eaf4fb;
    --plan-line: #d8e2ec;
    --plan-muted: #64748b;
    --plan-text: #111827;
}

.crm-plans-page {
    background: #f3f6f9;
    padding: 20px;
}

.crm-plans-page .panel {
    border: 1px solid var(--plan-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.crm-plans-page svg,
.crm-plan-dialog svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crm-plans-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 104px;
    padding: 20px 22px;
    background:
        linear-gradient(135deg, rgba(43, 111, 159, .12), rgba(255, 255, 255, 0) 58%),
        #ffffff;
}

.crm-plans-hero span {
    display: block;
    margin-bottom: 4px;
    color: var(--plan-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.crm-plans-hero h1 {
    color: var(--plan-text);
    font-size: 24px;
    font-weight: 750;
}

.crm-plans-hero p {
    max-width: 720px;
    margin: 5px 0 0;
    color: var(--plan-muted);
}

.crm-plans-hero-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: var(--plan-blue);
    background: var(--plan-blue-soft);
    border-radius: 8px;
}

.crm-plans-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
}

.crm-plans-metrics article {
    display: grid;
    gap: 6px;
    margin-bottom: 0;
    background: #ffffff;
}

.crm-plans-metrics span {
    color: var(--plan-muted);
    font-size: 12px;
    font-weight: 700;
}

.crm-plans-metrics strong {
    color: var(--plan-text);
    font-size: 22px;
    font-weight: 750;
}

.crm-plans-table-panel {
    margin-top: 14px;
    background: #ffffff;
}

.crm-plans-table-panel header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.crm-plans-table-panel h2 {
    color: var(--plan-text);
    font-size: 17px;
    font-weight: 750;
}

.crm-plans-table-panel p {
    margin: 4px 0 0;
    color: var(--plan-muted);
}

.crm-plans-actions,
.crm-plans-search {
    display: flex;
    gap: 8px;
}

.crm-plans-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.crm-plans-search input {
    min-width: 220px;
}

.crm-plans-search button,
.crm-plans-actions > button,
.crm-plan-dialog footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
}

.crm-plans-search button,
.crm-plans-actions > button,
.crm-plan-dialog footer .btn-primary {
    color: #ffffff;
    background: var(--plan-blue);
    border-color: var(--plan-blue);
}

.crm-plans-search button:hover,
.crm-plans-actions > button:hover,
.crm-plan-dialog footer .btn-primary:hover {
    background: var(--plan-blue-dark);
    border-color: var(--plan-blue-dark);
}

.crm-plans-table {
    display: grid;
    gap: 8px;
}

.crm-plans-row {
    display: grid;
    grid-template-columns: minmax(170px, 1.3fr) 116px 82px 126px 98px minmax(150px, 1fr) 82px 82px;
    gap: 12px;
    align-items: center;
    min-height: 56px;
    padding: 10px 12px;
}

.crm-plans-row:not(.crm-plans-row-head):hover {
    border-color: #bdd5e8;
}

.crm-plans-row-head {
    min-height: 40px;
    color: var(--plan-muted);
    background: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.crm-plans-row strong,
.crm-plans-row small {
    display: block;
}

.crm-plans-row strong {
    color: var(--plan-text);
}

.crm-plans-row small {
    margin-top: 3px;
    color: var(--plan-muted);
    font-size: 12px;
}

.crm-plans-row button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--plan-blue);
    background: var(--plan-blue-soft);
    border: 1px solid #c8dfef;
    border-radius: 8px;
    padding: 0;
}

.crm-plan-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.crm-plan-row-actions form {
    display: inline-flex;
    margin: 0;
}

.crm-plans-row button.danger {
    color: #b42318;
    background: #fff5f4;
    border-color: #f4c7c3;
}

.crm-plans-row button.danger:hover {
    color: #ffffff;
    background: #b42318;
    border-color: #b42318;
}

.crm-plan-status {
    display: inline-flex;
    align-items: center;
    color: #526173;
    font-size: 12px;
    font-weight: 650;
}

.crm-plan-status::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #94a3b8;
}

.crm-plan-status.active {
    color: var(--plan-blue-dark);
}

.crm-plan-status.active::before {
    background: var(--plan-blue);
}

.crm-plan-modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 18px;
}

.crm-plan-modal[hidden] {
    display: none;
}

.crm-plan-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(2px);
}

.crm-plan-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 28px));
    max-height: calc(100vh - 34px);
    overflow: auto;
    background: #ffffff;
    border: 1px solid var(--plan-line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.crm-plan-dialog header,
.crm-plan-dialog footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.crm-plan-dialog header {
    padding: 18px 20px;
    background:
        linear-gradient(135deg, rgba(43, 111, 159, .14), rgba(255, 255, 255, 0) 62%),
        #f8fbfd;
    border-bottom: 1px solid var(--plan-line);
}

.crm-plan-dialog header span {
    display: block;
    margin-bottom: 4px;
    color: var(--plan-blue);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.crm-plan-dialog h2 {
    color: var(--plan-text);
    font-size: 18px;
    font-weight: 750;
}

.crm-plan-dialog header button {
    color: var(--plan-blue-dark);
    background: var(--plan-blue-soft);
    border-color: #c8dfef;
    font-size: 12px;
    font-weight: 650;
}

.crm-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px 0;
}

.crm-plan-grid label,
.crm-plan-checks label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.crm-plan-grid input {
    width: 100%;
    border-color: #cbd7e4;
    border-radius: 8px;
    color: var(--plan-text);
}

.crm-plan-grid input:focus {
    outline: 3px solid rgba(43, 111, 159, .18);
    border-color: var(--plan-blue);
}

.crm-plan-full {
    grid-column: 1 / -1;
}

.crm-plan-checks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 20px 0;
}

.crm-plan-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e3eaf1;
    border-radius: 8px;
}

.crm-plan-errors {
    display: grid;
    gap: 5px;
    padding: 10px;
    color: #991b1b;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    font-size: 12px;
    margin: 12px 20px 0;
}

.crm-plan-dialog footer {
    margin-top: 18px;
    padding: 14px 20px 18px;
    justify-content: flex-end;
    background: #f8fafc;
    border-top: 1px solid var(--plan-line);
}

.crm-plan-dialog footer .btn-muted {
    color: #334155;
    background: #f8fafc;
    border-color: #d8e2ec;
}

.crm-plan-dialog footer .btn-primary {
    min-width: 140px;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(43, 111, 159, .18);
}

@media (max-width: 980px) {
    .crm-plans-row,
    .crm-plans-row-head,
    .crm-plan-checks {
        grid-template-columns: 1fr;
    }

    .crm-plans-row-head {
        display: none;
    }
}

@media (max-width: 820px) {
    .crm-plans-page {
        padding: 14px;
    }

    .crm-plans-hero,
    .crm-plans-table-panel header {
        align-items: flex-start;
        flex-direction: column;
    }

    .crm-plans-metrics,
    .crm-plan-grid {
        grid-template-columns: 1fr;
    }

    .crm-plans-actions,
    .crm-plans-search {
        width: 100%;
        flex-direction: column;
    }

    .crm-plans-search input {
        min-width: 0;
    }
}

/* Composer estilo WhatsApp: baixo por padrao, cresce com texto. */
.composer {
    grid-template-columns: 38px 170px 82px minmax(220px, 1fr) 72px;
    align-items: end;
    gap: 8px;
    padding: 8px 10px;
    background: #f0f2f5;
}

.emoji-wrap {
    position: relative;
    display: grid;
    align-items: end;
}

.emoji-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    color: #68737d;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
}

.emoji-toggle:hover {
    color: #176d98;
    background: rgba(43, 141, 187, .10);
}

.emoji-panel {
    position: absolute;
    left: 0;
    bottom: 44px;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(6, 32px);
    gap: 4px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #d7e1eb;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(17, 24, 39, .18);
}

.emoji-panel[hidden] {
    display: none;
}

.emoji-panel button {
    width: 32px;
    height: 32px;
    padding: 0;
    background: #ffffff;
    border: 0;
    border-radius: 7px;
    font-size: 18px;
}

.emoji-panel button:hover {
    background: #edf5fb;
}

.composer select,
.composer .sign,
.composer .send-button {
    min-height: 38px;
}

.composer select {
    height: 38px;
    padding: 7px 9px;
    background: #ffffff;
}

.composer .sign {
    justify-content: center;
    padding-bottom: 0;
    font-size: 12px;
}

.composer textarea {
    min-height: 38px;
    max-height: 132px;
    height: 38px;
    padding: 10px 14px;
    overflow-y: auto;
    resize: none;
    border-radius: 18px;
    background: #ffffff;
    line-height: 18px;
}

.composer .send-button {
    height: 38px;
    align-self: end;
}

@media (max-width: 1100px) {
    .composer {
        grid-template-columns: 38px 1fr 72px;
    }

    .composer select,
    .composer .sign {
        grid-column: 1 / -1;
    }
}

/* Barra compacta da lista de atendimentos. */
.inbox-modebar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: #ffffff;
    border-bottom: 1px solid #d9e2ec;
}

.mode-action {
    display: grid;
    place-items: center;
    min-height: 52px;
    color: #5c6b7b;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    font: 800 12px/1.1 Arial, Helvetica, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.mode-action span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: #edf3f8;
}

.mode-action:hover,
.mode-action.on {
    color: #176d98;
    border-bottom-color: #2b8dbb;
}

.mode-action:hover span,
.mode-action.on span {
    background: #dcecf6;
}

.inbox-tools {
    grid-template-columns: 34px auto 1fr 118px;
    min-height: 54px;
    padding: 9px 12px;
    background: #ffffff;
}

.filters[hidden] {
    display: none !important;
}

.filters {
    grid-template-columns: 1fr 1fr;
    padding: 12px;
    background: #f5f8fb;
}

.filters-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #1f3448;
    font-size: 12px;
}

.filters-head strong {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.filters-head a {
    color: #176d98;
    font-weight: 700;
    text-decoration: none;
}

.filters-head a:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .mode-action {
        min-height: 46px;
    }

    .filters {
        grid-template-columns: 1fr;
    }
}

/* Ações da fila: texto claro e sem o antigo "OK" apertado. */
.ticket-row {
    grid-template-columns: minmax(0, 1fr) 82px;
}

.ticket-actions {
    gap: 6px;
    padding: 0 10px 0 0;
}

.ticket-actions button {
    font-size: 0;
}

.ticket-actions summary {
    font-size: 11px;
}

.ticket-actions button.accept,
.chat-actions button.accept {
    width: 66px;
    height: 26px;
    color: #176d98;
    background: #e8f3fb;
    border: 1px solid #bdd7e8;
    border-radius: 999px;
    font-weight: 800;
}

.ticket-actions button.accept::before {
    content: "Aceitar" !important;
    color: inherit;
    font-size: 11px;
    font-weight: 800;
}

.ticket-actions button.close {
    width: 28px;
    height: 24px;
    justify-self: center;
    color: #d92d20;
    background: transparent;
    font-weight: 900;
}

.ticket-actions button.close::before {
    content: "X" !important;
    color: inherit;
    font-size: 13px;
    font-weight: 900;
}

.ticket-actions button.accept:hover {
    background: #d9ecf7;
}

.ticket-actions button.close:hover {
    background: #fff1f2;
}

.transfer-actions form:first-child {
    width: auto;
}

/* Botões de atendimento com leitura clara no lugar de siglas/ícones crus. */
.ticket-row {
    grid-template-columns: minmax(0, 1fr) 104px;
}

.ticket-actions {
    align-content: center;
    justify-items: stretch;
    padding-right: 10px;
}

.ticket-actions form,
.ticket-actions details {
    width: 100%;
}

.ticket-actions button.accept,
.ticket-actions button.close,
.transfer-actions summary {
    width: 82px;
    height: 26px;
    border-radius: 999px;
    font-size: 0;
    font-weight: 800;
}

.ticket-actions button.close {
    color: #b42318;
    background: #fff5f5;
    border: 1px solid #fecaca;
}

.ticket-actions button.close::before {
    content: "Encerrar" !important;
    color: inherit;
    font-size: 11px;
    font-weight: 800;
}

.transfer-actions summary {
    color: #175cd3;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.transfer-actions summary::before {
    content: "Transferir" !important;
    color: inherit;
    font-size: 11px;
    font-weight: 800;
}

.ticket-actions button.accept:hover {
    background: #d9ecf7;
    border-color: #9ec9df;
}

.ticket-actions button.close:hover {
    background: #ffe4e6;
    border-color: #fda4af;
}

.transfer-actions summary:hover {
    background: #dbeafe;
}

.transfer-popover {
    right: 92px;
}

.history-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 14px;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.history-divider::before,
.history-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(126, 143, 162, .35);
}

.history-divider span {
    padding: 6px 10px;
    border: 1px solid #d8e2ec;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
}

.history-divider.current {
    color: #176d98;
}

.history-divider.current span {
    border-color: #b9d9eb;
    background: #e8f3fb;
}

/* Admin panel refresh for the attendance list. */
:root {
    --panel-primary: #2b6f9f;
    --panel-primary-dark: #1f567c;
    --panel-border: #d8dee6;
    --panel-muted: #6c757d;
    --panel-bg: #f4f6f9;
    --panel-soft: #f8f9fa;
}

.inbox {
    background: #ffffff;
    border-right: 1px solid var(--panel-border);
}

.inbox-modebar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px 0;
    background: #ffffff;
    border-bottom: 1px solid var(--panel-border);
}

.mode-action {
    min-height: 38px;
    padding: 0 10px 8px;
    color: #495057;
    border-bottom: 2px solid transparent;
    font: 700 12px/1.2 Arial, Helvetica, sans-serif;
}

.mode-action span {
    min-width: auto;
    height: 26px;
    padding: 0 10px;
    color: inherit;
    background: transparent;
    border-radius: 6px;
}

.mode-action:hover,
.mode-action.on {
    color: var(--panel-primary-dark);
    border-bottom-color: var(--panel-primary);
}

.mode-action:hover span,
.mode-action.on span {
    background: #eef5fa;
}

.inbox-tools {
    grid-template-columns: 32px auto 1fr 118px;
    min-height: 52px;
    padding: 9px 12px;
    background: var(--panel-soft);
    border-bottom: 1px solid var(--panel-border);
}

.icon-btn {
    width: 28px;
    height: 28px;
    color: #344054;
    background: #ffffff;
    border: 1px solid #cfd7e2;
    border-radius: 6px;
    font-size: 17px;
}

.badge,
.tabs b {
    min-width: 19px;
    height: 19px;
    color: #1f567c;
    background: #e8f3fb;
    border: 1px solid #d6e8f3;
    font-size: 10px;
}

.inbox-tools label {
    color: #495057;
    font-size: 12px;
    font-weight: 600;
}

.inbox-tools select,
.filters input,
.filters select {
    min-height: 34px;
    color: #212529;
    background: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .03);
}

.tabs {
    background: #ffffff;
    border-bottom: 1px solid var(--panel-border);
}

.tabs a {
    padding: 11px 8px 10px;
    color: #495057;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
}

.tabs a.on {
    color: var(--panel-primary-dark);
    background: #ffffff;
    border-bottom-color: var(--panel-primary);
}

.filters {
    padding: 12px;
    background: var(--panel-soft);
    border-bottom: 1px solid var(--panel-border);
}

.filters button {
    min-height: 34px;
    color: #ffffff;
    background: var(--panel-primary);
    border: 1px solid var(--panel-primary);
    border-radius: 6px;
    font-weight: 700;
}

.ticket-row {
    grid-template-columns: minmax(0, 1fr) 92px;
    min-height: 92px;
    background: #ffffff;
    border-bottom: 1px solid #e4e9ef;
    box-shadow: none;
}

.ticket-row.active {
    background: #f2f8fc;
    box-shadow: inset 3px 0 0 var(--panel-primary);
}

.ticket-row:hover {
    background: #f8fbfd;
}

.ticket {
    gap: 10px;
    padding: 13px 8px 13px 14px;
}

.ticket .avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2b6f9f, #2286b8);
    font-size: 13px;
    font-weight: 800;
}

.ticket strong {
    gap: 5px;
    color: #17212b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.ticket strong small {
    color: var(--panel-primary);
    font-size: 10px;
    font-weight: 700;
}

.ticket span {
    margin-top: 4px;
    color: #495057;
    font-size: 12px;
}

.ticket em {
    margin-top: 7px;
    padding: 2px 8px;
    color: #1f567c;
    background: #e8f3fb;
    border: 1px solid #d6e8f3;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

.ticket aside {
    flex: 0 0 58px;
    text-align: right;
}

.ticket aside b {
    color: var(--panel-primary-dark);
    font-size: 11px;
    font-weight: 700;
}

.ticket aside small {
    color: #8a97a5;
    font-size: 11px;
}

.ticket-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    padding: 0 10px 0 0;
}

.ticket-actions button.accept,
.ticket-actions button.close,
.transfer-actions summary {
    width: 74px;
    height: 25px;
    border-radius: 6px;
    box-shadow: none;
}

.ticket-actions button.accept,
.chat-actions button.accept {
    color: #ffffff;
    background: var(--panel-primary);
    border: 1px solid var(--panel-primary);
}

.ticket-actions button.accept::before {
    content: "Aceitar" !important;
    color: #ffffff;
}

.transfer-actions summary {
    color: var(--panel-primary-dark);
    background: #ffffff;
    border: 1px solid #a9cfe2;
}

.transfer-actions summary::before {
    content: "Transferir" !important;
}

.ticket-actions button.close {
    color: #b42318;
    background: #ffffff;
    border: 1px solid #f1aeb5;
}

.ticket-actions button.close::before {
    content: "Encerrar" !important;
}

.ticket-actions button.accept:hover {
    background: #245f89;
    border-color: #245f89;
}

.transfer-actions summary:hover {
    background: #eef5fa;
}

.ticket-actions button.close:hover {
    background: #fff5f5;
}

.transfer-popover {
    right: 84px;
    border-radius: 8px;
}

/* Urbix-inspired attendance shell: estrutura visual nova, leve e local. */
.attendance-shell {
    --ux-bg: #f3f6f9;
    --ux-card: #ffffff;
    --ux-border: #e5e9f0;
    --ux-border-strong: #d2dae5;
    --ux-text: #202733;
    --ux-muted: #697586;
    --ux-primary: #2b6f9f;
    --ux-primary-soft: #eaf4fb;
    --ux-danger: #d92d20;
    grid-template-columns: minmax(430px, 500px) minmax(560px, 1fr);
    gap: 0;
    padding: 18px;
    background: var(--ux-bg);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 400;
}

.attendance-shell .ux-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.attendance-shell .ux-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.attendance-shell .ux-btn-primary {
    color: #ffffff;
    background: var(--ux-primary);
    border: 1px solid var(--ux-primary);
}

.attendance-shell .ux-btn-primary:hover {
    color: #ffffff;
    background: #245f88;
    border-color: #245f88;
    box-shadow: 0 3px 8px rgba(43, 111, 159, .18);
}

.attendance-shell .ux-btn-light {
    color: var(--ux-primary);
    background: #eef7fc;
    border: 1px solid #c9dfed;
}

.attendance-shell .ux-btn-light:hover {
    color: #245f88;
    background: #e2f0f8;
    border-color: #a9cfe4;
}

.attendance-shell .ux-btn-danger {
    color: #b42318;
    background: #fff7f6;
    border: 1px solid #f6c4be;
}

.attendance-shell .ux-btn-danger:hover {
    color: #ffffff;
    background: var(--ux-danger);
    border-color: var(--ux-danger);
}

.attendance-shell .inbox,
.attendance-shell .chat {
    border-color: var(--ux-border);
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.attendance-shell .inbox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px 0 0 14px;
}

.attendance-shell .chat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 0;
    border-radius: 0 14px 14px 0;
}

.attendance-shell .inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 14px;
    background: var(--ux-card);
}

.attendance-shell .inbox-header h1 {
    color: var(--ux-text);
    font-size: 18px;
    font-weight: 700;
}

.attendance-shell .inbox-header span {
    display: block;
    margin-top: 3px;
    color: var(--ux-muted);
    font-size: 12px;
}

.attendance-shell .inbox-add {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--ux-primary);
    background: var(--ux-primary-soft);
    border: 1px solid #d5e9f5;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.attendance-shell .inbox-modebar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0 18px 14px;
    border-bottom: 0;
    background: var(--ux-card);
}

.attendance-shell .mode-action {
    min-height: 34px;
    padding: 0;
    color: var(--ux-muted);
    background: #f6f8fb;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.attendance-shell .mode-action span {
    height: auto;
    padding: 0;
    background: transparent;
}

.attendance-shell .mode-action.on,
.attendance-shell .mode-action:hover {
    color: var(--ux-primary);
    background: var(--ux-primary-soft);
    border-color: #cfe6f3;
}

.attendance-shell .inbox-tools {
    grid-template-columns: 32px auto 1fr 128px;
    min-height: 54px;
    padding: 10px 18px;
    background: #fbfcfe;
    border-top: 1px solid var(--ux-border);
    border-bottom: 1px solid var(--ux-border);
}

.attendance-shell .icon-btn {
    width: 30px;
    height: 30px;
    color: var(--ux-muted);
    background: #ffffff;
    border: 1px solid var(--ux-border-strong);
    border-radius: 9px;
    font-size: 15px;
}

.attendance-shell .inbox-tools select,
.attendance-shell .filters input,
.attendance-shell .filters select {
    min-height: 36px;
    border-color: var(--ux-border-strong);
    border-radius: 9px;
}

.attendance-shell .tabs {
    background: #ffffff;
    border-bottom: 1px solid var(--ux-border);
}

.attendance-shell .tabs a {
    padding: 13px 6px 12px;
    color: var(--ux-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

.attendance-shell .tabs a.on {
    color: var(--ux-primary);
    border-bottom-color: var(--ux-primary);
}

.attendance-shell .tabs b,
.attendance-shell .badge {
    color: var(--ux-primary);
    background: var(--ux-primary-soft);
    border: 0;
}

.attendance-shell .filters {
    padding: 14px 18px;
    background: #fbfcfe;
}

.attendance-shell .ticket-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) 48px;
    min-height: 90px;
    background: #ffffff;
    border-bottom: 1px solid var(--ux-border);
    transition: background .14s ease;
    overflow: hidden;
}

.attendance-shell .ticket-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    background: #ffffff;
}

.attendance-shell .ticket-list::-webkit-scrollbar {
    width: 10px;
}

.attendance-shell .ticket-list::-webkit-scrollbar-track {
    background: #f3f6f9;
}

.attendance-shell .ticket-list::-webkit-scrollbar-thumb {
    background: #c8d3df;
    border: 2px solid #f3f6f9;
    border-radius: 999px;
}

.attendance-shell .ticket-list::-webkit-scrollbar-thumb:hover {
    background: #9fb0c1;
}

.attendance-shell .ticket-row.active {
    background: #eef7fc;
    box-shadow: inset 4px 0 0 var(--ux-primary);
}

.attendance-shell .ticket-row.has-unread {
    background: #f0f9ff;
    box-shadow: inset 4px 0 0 #2f95c7;
}

.attendance-shell .ticket-row.has-unread:not(.active):hover {
    background: #eaf7ff;
}

.attendance-shell .ticket-row.has-unread .ticket strong {
    color: #0b5f91;
    font-weight: 900;
}

.attendance-shell .ticket-row:hover {
    background: #f8fbfd;
}

.attendance-shell .ticket {
    gap: 12px;
    padding: 14px 8px 14px 32px;
}

.attendance-shell .ticket-queue-ribbon {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    color: #ffffff;
    background: var(--ticket-queue-color, #2b6f9f);
    border-right: 1px solid rgba(255, 255, 255, .26);
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

.attendance-shell .ticket-queue-ribbon.is-empty {
    background: #94a3b8;
}

.attendance-shell .ticket-queue-ribbon span {
    display: block;
    max-height: 78px;
    overflow: hidden;
    letter-spacing: 0;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.attendance-shell .ticket.locked {
    cursor: default;
}

.attendance-shell .ticket .avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2b6f9f, #25a4c8);
    box-shadow: 0 8px 18px rgba(43, 111, 159, .18);
    overflow: hidden;
}

.attendance-shell .ticket strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ux-text);
    font-size: 13px;
    font-weight: 650;
    min-width: 0;
}

.attendance-shell .ticket strong small {
    flex: 0 0 auto;
    color: var(--ux-primary);
    font-size: 10px;
}

.attendance-shell .ticket-preview-mark {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: #0d8bd7;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8a13.133 13.133 0 0 1-1.66 2.043C11.879 11.332 10.12 12.5 8 12.5s-3.879-1.168-5.168-2.457A13.133 13.133 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8a13.133 13.133 0 0 1-1.66 2.043C11.879 11.332 10.12 12.5 8 12.5s-3.879-1.168-5.168-2.457A13.133 13.133 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.attendance-shell .ticket span {
    margin-top: 5px;
    color: #4b5563;
    font-size: 12px;
}

.attendance-shell .ticket strong .ticket-preview-mark {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 0;
    color: #0d8bd7;
    font-size: 0;
}

.attendance-shell .ticket em {
    margin-top: 7px;
    padding: 3px 8px;
    color: var(--ux-primary);
    background: var(--ux-primary-soft);
    border: 0;
    border-radius: 999px;
    font-size: 10px;
}

.attendance-shell .ticket-triage-chip,
.attendance-shell .ticket-unread-chip,
.preview-triage-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 4px 8px;
    color: #855c00;
    background: #fff7d6;
    border: 1px solid #f0d37a;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.2;
}

.attendance-shell .ticket-triage-chip[hidden],
.attendance-shell .ticket-unread-chip[hidden],
.preview-triage-chip[hidden] {
    display: none;
}

.attendance-shell .ticket-unread-chip {
    color: #075985;
    background: #dff3ff;
    border-color: #9bd8f5;
    font-weight: 900;
}

.attendance-shell .ticket-triage-chip.is-completed,
.preview-triage-chip.is-completed {
    color: #0f766e;
    background: #e4f8f4;
    border-color: #9bd8ce;
}

.triage-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    color: #855c00;
    background: #fff7d6;
    border-top: 1px solid #f0d37a;
    border-bottom: 1px solid #f0d37a;
    font-size: 12px;
}

.triage-context strong {
    color: inherit;
}

.triage-context.is-completed {
    color: #0f766e;
    background: #e4f8f4;
    border-color: #9bd8ce;
}

.attendance-shell .ticket aside {
    flex: 0 0 86px;
}

.attendance-shell .ticket aside span {
    display: block;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.attendance-shell .ticket aside b {
    color: var(--ux-primary);
    font-size: 11px;
}

.attendance-shell .ticket aside small {
    color: #8a94a6;
}

.attendance-shell .ticket-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-right: 10px;
}

.attendance-shell .ticket-actions button.accept,
.attendance-shell .ticket-actions button.close,
.attendance-shell .transfer-actions summary {
    width: 76px;
    height: 28px;
    border-radius: 9px;
    font-size: 0;
}

.attendance-shell .ticket-actions button.accept {
    background: var(--ux-primary);
    border-color: var(--ux-primary);
}

.attendance-shell .ticket-actions button.accept::before {
    content: "Aceitar" !important;
    color: #ffffff;
    font-size: 11px;
}

.attendance-shell .transfer-actions summary {
    color: var(--ux-primary);
    background: #ffffff;
    border: 1px solid #c5dfef;
}

.attendance-shell .transfer-actions summary::before {
    content: "Transferir" !important;
    color: inherit;
    font-size: 11px;
}

.attendance-shell .ticket-actions button.close {
    color: var(--ux-danger);
    background: #ffffff;
    border: 1px solid #f3b3ad;
}

.attendance-shell .ticket-actions button.close::before {
    content: "Encerrar" !important;
    color: inherit;
    font-size: 11px;
}

.attendance-shell .chat-head {
    min-height: 76px;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--ux-border);
}

.attendance-shell .chat-head .avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2b6f9f, #25a4c8);
    overflow: hidden;
}

.attendance-shell .avatar img,
.preview-dialog .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attendance-shell .contact-trigger h2 {
    color: var(--ux-text);
    font-size: 16px;
    font-weight: 700;
}

.attendance-shell .contact-trigger span {
    color: var(--ux-muted);
    font-size: 12px;
}

.attendance-shell .contact-trigger,
.attendance-shell .contact-trigger:hover,
.attendance-shell .contact-trigger:focus {
    min-height: auto;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}

.attendance-shell .contact-trigger:hover h2,
.attendance-shell .contact-trigger:focus h2 {
    color: var(--ux-primary);
}

.attendance-shell .contact-trigger:focus-visible h2 {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.attendance-shell .chat-actions {
    gap: 8px;
}

.attendance-shell .chat-actions span,
.attendance-shell .chat-actions button,
.attendance-shell .chat-actions form.transfer-form select {
    min-height: 34px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.attendance-shell .chat-actions span {
    display: inline-flex;
    align-items: center;
    color: #315472;
    background: #f8fbfd;
    border-color: #cddbe7;
}

.attendance-shell .chat-actions .attendance-state-pill {
    color: #166534;
    background: #ecfdf3;
    border-color: #bbf7d0;
    font-weight: 800;
}

.attendance-shell .chat-actions .attendance-state-pill.is-finished::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 7px;
    background: #16a34a;
    border-radius: 999px;
}

.attendance-shell .chat-actions button {
    min-width: 82px;
}

.attendance-shell .tag-row-status {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 10px;
    color: #315472;
    background: #f8fbfd;
    border: 1px solid #cddbe7;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.attendance-shell .chat-actions form.transfer-form select {
    color: #315472;
    background: #ffffff;
    border-color: #cddbe7;
}

.attendance-shell .chat-actions form.transfer-form {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: min(760px, 68vw);
}

.attendance-shell .chat-actions form.transfer-form select {
    width: 136px;
    max-width: 150px;
}

.attendance-shell .tag-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 140px 150px 130px 64px 80px;
    gap: 10px;
    padding: 12px 16px;
    background: #fbfcfe;
    border-bottom: 1px solid var(--ux-border);
}

.attendance-shell .messages {
    flex: 1;
    padding: 22px 26px;
    background:
        linear-gradient(rgba(238, 233, 224, .86), rgba(238, 233, 224, .86)),
        radial-gradient(circle at 18px 18px, rgba(107, 114, 128, .12) 1.4px, transparent 1.6px),
        radial-gradient(circle at 7px 32px, rgba(107, 114, 128, .08) 1px, transparent 1.3px),
        linear-gradient(45deg, transparent 47%, rgba(107, 114, 128, .07) 48%, rgba(107, 114, 128, .07) 52%, transparent 53%),
        linear-gradient(-45deg, transparent 47%, rgba(107, 114, 128, .055) 48%, rgba(107, 114, 128, .055) 52%, transparent 53%);
    background-color: #efe7dc;
    background-size: auto, 42px 42px, 52px 52px, 74px 74px, 86px 86px;
}

.attendance-shell .message {
    max-width: min(720px, 76%);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

.attendance-shell .message.out,
.attendance-shell .message.bot {
    background: #dff4ff;
    border: 1px solid #c5e8f8;
}

.attendance-shell .message.in {
    background: #ffffff;
}

.group-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: #176d98;
    background: #e8f3fb;
    border: 1px solid #c7dfed;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.group-chip {
    margin-left: 6px;
    padding: 4px 6px;
    vertical-align: 1px;
}

.message-media {
    display: block;
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 10px;
    background: #f8fafc;
}

.message-media:first-child {
    margin-top: 0;
}

.message-media img {
    display: block;
    width: min(320px, 100%);
    max-height: 360px;
    object-fit: contain;
    background: #ffffff;
}

.message-video {
    display: block;
    width: min(360px, 100%);
    max-height: 420px;
    margin-top: 8px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 10px;
}

.message-video:first-child {
    margin-top: 0;
}

.message-audio {
    display: block;
    width: min(320px, 100%);
    height: 42px;
    margin-top: 8px;
}

.message-audio:first-child {
    margin-top: 0;
}

.message-file {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
    max-width: min(360px, 78vw);
    margin-top: 8px;
    padding: 10px;
    color: var(--text);
    background: rgba(255, 255, 255, .84);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
}

.message-file span {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #176d98;
    background: #e8f3fb;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}

.message-file b,
.message-file small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-file b {
    font-size: 13px;
}

.message-file small {
    color: var(--muted);
    font-size: 11px;
}

.preview-message .message-media img {
    width: min(280px, 100%);
    max-height: 300px;
}

.attendance-shell .composer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #ffffff;
    border-top: 1px solid var(--ux-border);
}

.attachment-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #2b6f9f;
    background: #e6f4fb;
    border: 1px solid #bfd8e7;
    border-radius: 999px;
    cursor: pointer;
}

.attachment-button:hover {
    color: #ffffff;
    background: #2b6f9f;
}

.attachment-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.attachment-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.attachment-preview-strip {
    flex: 0 0 100%;
    display: grid;
    gap: 8px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #d8e2ec;
    border-radius: 10px;
}

.attachment-preview-strip[hidden] {
    display: none;
}

.attachment-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #34495e;
    font-size: 12px;
}

.attachment-preview-head button,
.attachment-thumb button {
    min-height: auto;
    padding: 0;
    color: #b42318;
    background: transparent;
    border: 0;
    font-size: 12px;
    font-weight: 700;
}

.attachment-preview-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.attachment-thumb {
    position: relative;
    display: grid;
    grid-template-rows: 66px auto;
    gap: 5px;
    width: 84px;
    flex: 0 0 84px;
    margin: 0;
}

.attachment-thumb-media {
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #176d98;
    background: #e8f3fb;
    border: 1px solid #c9dfed;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

.attachment-thumb-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-thumb span {
    overflow: hidden;
    color: #34495e;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-thumb button {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #ffffff;
    background: #d92d20;
    border-radius: 999px;
    line-height: 1;
}

.attendance-shell .composer textarea {
    flex: 1 1 280px;
    min-width: 220px;
    border-color: var(--ux-border-strong);
    border-radius: 999px;
}

.quick-reply-wrap {
    position: relative;
    flex: 1 1 280px;
    min-width: 220px;
}

.quick-reply-wrap textarea {
    width: 100%;
}

.quick-reply-popover {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 12;
    display: grid;
    gap: 6px;
    max-height: min(320px, 54vh);
    overflow: auto;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #cbd7e4;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
}

.quick-reply-popover[hidden] {
    display: none;
}

.quick-reply-popover header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 5px;
    border-bottom: 1px solid #edf2f7;
}

.quick-reply-popover header strong {
    color: #173f5f;
    font-size: 12px;
}

.quick-reply-popover header small {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.quick-reply-list {
    display: grid;
    gap: 5px;
}

.quick-reply-option {
    appearance: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    width: 100%;
    min-height: auto;
    padding: 9px 10px;
    text-align: left;
    color: #173f5f;
    background: #ffffff;
    border: 1px solid #dce7f1;
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
}

.quick-reply-option:hover {
    color: #0f2f48;
    background: #f4f8fb;
    border-color: #b9d8ed;
}

.quick-reply-option.is-active {
    color: #0f2f48;
    background: #edf7fd;
    border-color: #8fc5e4;
    box-shadow: inset 3px 0 0 #2f78aa;
}

.quick-reply-option strong {
    overflow: hidden;
    color: #173f5f;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-reply-option code {
    color: #2b6f9f;
    background: #f7fbff;
    border: 1px solid #d8e2ec;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

.quick-reply-option span {
    grid-column: 1 / -1;
    overflow: hidden;
    color: #526173;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-shell .send-button {
    flex: 0 0 92px;
    border-radius: 10px;
}

.attendance-shell .composer.is-sending {
    opacity: 0.82;
}

.attendance-shell .composer.is-sending .attachment-button,
    .attendance-shell .composer.is-sending .sign,
    .attendance-shell .composer.is-sending .emoji-toggle,
.attendance-shell .composer.is-sending [data-attachments-clear],
.attendance-shell .composer.is-sending [data-remove-attachment] {
    pointer-events: none;
}

.attendance-shell .composer textarea[readonly] {
    color: #64748b;
    background: #f8fafc;
}

.button-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #ffffff;
    border-radius: 999px;
    vertical-align: -2px;
    animation: button-spin 0.7s linear infinite;
}

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

.attendance-shell .composer .sign {
    flex: 0 0 auto;
}

@media (max-width: 1120px) {
    .attendance-shell {
        grid-template-columns: 360px minmax(0, 1fr);
    }

    .attendance-shell .tag-row,
    .attendance-shell .composer {
        grid-template-columns: 1fr;
    }

    .attendance-shell .composer {
        flex-wrap: wrap;
    }

    .quick-reply-wrap,
    .attendance-shell .composer textarea {
        flex-basis: 100%;
    }
}

/* Ações com ícones no estilo Bootstrap Icons, sem carregar a biblioteca inteira. */
.attendance-shell .ticket-actions {
    align-items: center;
    gap: 2px;
}

.attendance-shell .ticket-actions form {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0;
}

.attendance-shell .ticket-actions a.preview,
.attendance-shell .ticket-actions button.accept,
.attendance-shell .ticket-actions button.close,
.attendance-shell .transfer-actions summary {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 10px;
    font-size: 0;
    line-height: 1;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    text-decoration: none;
}

.attendance-shell .ticket-actions a.preview span {
    display: none;
}

.attendance-shell .ticket-actions a.preview::before,
.attendance-shell .ticket-actions button.accept::before,
.attendance-shell .ticket-actions button.close::before,
.attendance-shell .transfer-actions summary::before {
    content: "" !important;
    width: 17px;
    height: 17px;
    background: currentColor;
    color: inherit;
    font-size: 0;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.attendance-shell .ticket-actions a.preview {
    color: #0d8bd7;
}

.attendance-shell .ticket-actions a.preview::before {
    width: 18px;
    height: 18px;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8a13.133 13.133 0 0 1-1.66 2.043C11.879 11.332 10.12 12.5 8 12.5s-3.879-1.168-5.168-2.457A13.133 13.133 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8a13.133 13.133 0 0 1-1.66 2.043C11.879 11.332 10.12 12.5 8 12.5s-3.879-1.168-5.168-2.457A13.133 13.133 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E");
}

.attendance-shell .ticket-actions button.accept {
    color: #16a34a;
    background: transparent;
    border-color: transparent;
}

.attendance-shell .ticket-actions button.accept::before {
    width: 18px;
    height: 18px;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 5.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 9.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 5.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 9.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z'/%3E%3C/svg%3E");
}

.attendance-shell .transfer-actions summary {
    color: var(--ux-primary);
    background: transparent;
    border-color: transparent;
}

.attendance-shell .transfer-actions summary::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5A.5.5 0 0 1 1.5 4h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 1 1-.708-.708L13.293 5H1.5A.5.5 0 0 1 1 4.5zm14 7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 11H14.5a.5.5 0 0 1 .5.5z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5A.5.5 0 0 1 1.5 4h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 1 1-.708-.708L13.293 5H1.5A.5.5 0 0 1 1 4.5zm14 7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 11H14.5a.5.5 0 0 1 .5.5z'/%3E%3C/svg%3E");
}

.attendance-shell .ticket-actions button.close {
    color: var(--ux-danger);
    background: transparent;
    border-color: transparent;
}

.attendance-shell .ticket-actions button.close::before {
    width: 16px;
    height: 16px;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.attendance-shell .ticket-actions a.preview:hover {
    color: #086ca8;
    background: transparent;
}

.attendance-shell .ticket-actions button.accept:hover {
    color: #0f7a35;
    background: transparent;
}

.attendance-shell .transfer-actions summary:hover {
    color: #174d72;
    background: transparent;
}

.attendance-shell .ticket-actions button.close:hover {
    color: #a61910;
    background: transparent;
}

.attendance-shell .ticket-actions a.preview,
.attendance-shell .ticket-actions a.preview:hover,
.attendance-shell .ticket-actions button.accept,
.attendance-shell .ticket-actions button.accept:hover,
.attendance-shell .ticket-actions button.close,
.attendance-shell .ticket-actions button.close:hover,
.attendance-shell .transfer-actions summary,
.attendance-shell .transfer-actions summary:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.attendance-shell .transfer-actions .transfer-popover {
    top: -12px;
    right: 34px;
    grid-template-columns: 150px;
    width: 178px;
    gap: 8px;
    padding: 10px;
    border-color: #cddbe7;
    border-radius: 10px;
}

.attendance-shell .transfer-actions .transfer-popover select,
.attendance-shell .transfer-actions .transfer-popover button.transfer {
    width: 100%;
    height: 34px;
    border-radius: 8px;
    font-size: 12px;
}

.attendance-shell .transfer-actions .transfer-popover button.transfer {
    color: #ffffff;
    background: var(--ux-primary);
    border-color: var(--ux-primary);
}

.attendance-shell .transfer-actions .transfer-popover {
    display: none;
}

.has-transfer-modal {
    overflow: hidden;
}

.transfer-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 24px;
}

.transfer-modal[hidden] {
    display: none;
}

.transfer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}

.transfer-dialog {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d8e2ec;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
}

.transfer-dialog header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    background: #f7fafc;
    border-bottom: 1px solid #d8e2ec;
}

.transfer-dialog header span {
    display: block;
    margin-bottom: 4px;
    color: #2b6f9f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.transfer-dialog h2 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}

.transfer-dialog header button,
.transfer-dialog footer .btn-muted {
    min-height: 36px;
    padding: 0 14px;
    color: #334155;
    background: #ffffff;
    border: 1px solid #cddbe7;
    border-radius: 9px;
    font-weight: 800;
}

.transfer-fields {
    display: grid;
    gap: 14px;
    padding: 18px 20px 8px;
}

.transfer-fields label {
    display: grid;
    gap: 7px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.transfer-fields select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cddbe7;
    border-radius: 10px;
    font-size: 14px;
}

.transfer-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px 20px;
}

.transfer-dialog footer .btn-primary {
    min-height: 38px;
    padding: 0 16px;
    color: #ffffff;
    background: #2b6f9f;
    border: 1px solid #2b6f9f;
    border-radius: 9px;
    font-weight: 900;
}

.has-preview-modal {
    overflow: hidden;
}

.preview-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 28px;
}

.preview-modal[hidden] {
    display: none;
}

.has-message-image-modal {
    overflow: hidden;
}

.message-image-modal {
    position: fixed;
    inset: 0;
    z-index: 1105;
    display: grid;
    place-items: center;
    padding: 24px;
}

.message-image-modal[hidden] {
    display: none;
}

.message-image-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .84);
    backdrop-filter: blur(4px);
}

.message-image-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1120px, 96vw);
    max-height: min(840px, 92vh);
    overflow: hidden;
    background: #0b1220;
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.message-image-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: #e2e8f0;
    background: rgba(15, 23, 42, .96);
    border-bottom: 1px solid rgba(148, 163, 184, .2);
}

.message-image-dialog header div {
    min-width: 0;
}

.message-image-dialog header span {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.message-image-dialog h2 {
    max-width: min(620px, 48vw);
    margin: 2px 0 0;
    overflow: hidden;
    color: #f8fafc;
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-image-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.message-image-tools b {
    min-width: 48px;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.message-image-tools a,
.message-image-tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    color: #dbeafe;
    background: rgba(37, 99, 235, .18);
    border: 1px solid rgba(147, 197, 253, .28);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.message-image-tools button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.message-image-stage {
    display: grid;
    min-height: 280px;
    max-height: calc(92vh - 78px);
    overflow: auto;
    place-items: center;
    padding: 16px;
    background: #050816;
}

.message-image-stage.is-zoomed {
    place-items: start center;
}

.message-image-stage img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 96px);
    object-fit: contain;
    border-radius: 6px;
    transform: scale(var(--message-image-zoom, 1));
    transform-origin: top center;
    transition: transform .12s ease;
}

.message-image-stage.is-zoomed img {
    max-width: none;
    max-height: none;
    margin: 18px auto;
}

@media (max-width: 640px) {
    .message-image-modal {
        padding: 10px;
    }

    .message-image-dialog {
        width: 100%;
        max-height: 94vh;
    }

    .message-image-dialog header {
        flex-wrap: wrap;
    }

    .message-image-tools {
        justify-content: flex-start;
        width: 100%;
    }

    .message-image-dialog h2 {
        max-width: 100%;
    }

    .message-image-stage {
        padding: 8px;
    }
}

.preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
}

.preview-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(260px, 1fr) auto;
    width: min(720px, 100%);
    max-height: min(860px, calc(100vh - 56px));
    overflow: hidden;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 26px 80px rgba(15, 23, 42, .35);
}

.preview-dialog header {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #d8e2ec;
}

.preview-dialog .avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #ffffff;
    background: linear-gradient(135deg, #2b6f9f, #25a4c8);
    border-radius: 999px;
    font-weight: 900;
    overflow: hidden;
}

.preview-dialog h2 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.preview-dialog header span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.preview-dialog button {
    min-height: 34px;
    padding: 0 14px;
    color: #2b6f9f;
    background: #eaf4fb;
    border: 1px solid #cfe4f0;
    border-radius: 8px;
    font-weight: 800;
}

.preview-messages {
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px;
    background-color: #efe7dc;
    background-image:
        radial-gradient(circle at 18px 20px, rgba(94, 80, 63, .08) 0 1.5px, transparent 2px),
        radial-gradient(circle at 70px 54px, rgba(94, 80, 63, .07) 0 1.5px, transparent 2px),
        linear-gradient(135deg, rgba(255, 255, 255, .22) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255, 255, 255, .18) 25%, transparent 25%);
    background-size: 88px 88px, 96px 96px, 34px 34px, 34px 34px;
}

.preview-ticket-marker {
    width: fit-content;
    max-width: 82%;
    margin: 14px auto;
    padding: 6px 14px;
    color: #2b6f9f;
    background: #dff2fb;
    border: 1px solid #bddded;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.preview-message {
    width: fit-content;
    max-width: min(78%, 520px);
    margin: 8px 0;
    padding: 9px 12px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.preview-message.out {
    margin-left: auto;
    background: #d9fdd3;
}

.preview-message span {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 11px;
}

.preview-message p,
.preview-loading {
    margin: 0;
    color: #111827;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.preview-loading {
    padding: 18px;
    text-align: center;
}

.preview-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 12px 18px;
    background: #ffffff;
    border-top: 1px solid #d8e2ec;
}

.preview-dialog footer small {
    color: #64748b;
    font-size: 12px;
}

.app-menu a .menu-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    color: #9fb3c8;
    background: rgba(148, 163, 184, .13);
    border-radius: 9px;
    font-size: 0;
    line-height: 1;
}

.app-menu a .menu-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-menu a.on .menu-icon,
.app-menu a:hover .menu-icon {
    color: #ffffff;
    background: #2f95c7;
}

body.menu-collapsed .app-menu a .menu-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    font-size: 0;
}

body.menu-collapsed .app-menu a .menu-icon svg {
    width: 18px;
    height: 18px;
}

@keyframes modalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalDialogIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.qr-modal:not([hidden]),
.crm-client-modal:not([hidden]),
.crm-plan-modal:not([hidden]),
.tenant-user-modal:not([hidden]),
.tenant-queue-modal:not([hidden]),
.quick-reply-modal:not([hidden]),
.task-modal:not([hidden]),
.deal-modal:not([hidden]),
.finance-modal:not([hidden]),
.confirm-modal:not([hidden]),
.transfer-modal:not([hidden]),
.preview-modal:not([hidden]),
.contact-create-modal:not([hidden]),
.contact-ticket-modal:not([hidden]),
.contact-history-modal:not([hidden]),
.contact-detail-modal:not([hidden]),
.contact-photo-modal:not([hidden]),
.contact-edit-modal:not([hidden]) {
    animation: modalBackdropIn .16s ease-out both;
}

.qr-modal:not([hidden]) .qr-dialog,
.crm-client-modal:not([hidden]) .crm-client-dialog,
.crm-plan-modal:not([hidden]) .crm-plan-dialog,
.tenant-user-modal:not([hidden]) .tenant-user-dialog,
.tenant-queue-modal:not([hidden]) .tenant-queue-dialog,
.quick-reply-modal:not([hidden]) .quick-reply-dialog,
.task-modal:not([hidden]) .task-dialog,
.deal-modal:not([hidden]) .deal-dialog,
.finance-modal:not([hidden]) .finance-dialog,
.confirm-modal:not([hidden]) .confirm-dialog,
.transfer-modal:not([hidden]) .transfer-dialog,
.preview-modal:not([hidden]) .preview-dialog,
.contact-create-modal:not([hidden]) .contact-create-dialog,
.contact-ticket-modal:not([hidden]) .contact-ticket-dialog,
.contact-history-modal:not([hidden]) .contact-history-dialog,
.contact-detail-modal:not([hidden]) .contact-detail-dialog,
.contact-photo-modal:not([hidden]) .contact-photo-dialog,
.contact-edit-modal:not([hidden]) .contact-edit-dialog {
    animation: modalDialogIn .2s cubic-bezier(.2, .8, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .qr-modal:not([hidden]),
    .crm-client-modal:not([hidden]),
    .crm-plan-modal:not([hidden]),
    .tenant-user-modal:not([hidden]),
    .tenant-queue-modal:not([hidden]),
    .quick-reply-modal:not([hidden]),
    .task-modal:not([hidden]),
    .deal-modal:not([hidden]),
    .finance-modal:not([hidden]),
    .confirm-modal:not([hidden]),
    .transfer-modal:not([hidden]),
    .preview-modal:not([hidden]),
    .contact-create-modal:not([hidden]),
    .contact-ticket-modal:not([hidden]),
    .contact-history-modal:not([hidden]),
    .contact-detail-modal:not([hidden]),
    .contact-photo-modal:not([hidden]),
    .contact-edit-modal:not([hidden]),
    .qr-modal:not([hidden]) .qr-dialog,
    .crm-client-modal:not([hidden]) .crm-client-dialog,
    .crm-plan-modal:not([hidden]) .crm-plan-dialog,
    .tenant-user-modal:not([hidden]) .tenant-user-dialog,
    .tenant-queue-modal:not([hidden]) .tenant-queue-dialog,
    .quick-reply-modal:not([hidden]) .quick-reply-dialog,
    .task-modal:not([hidden]) .task-dialog,
    .deal-modal:not([hidden]) .deal-dialog,
    .finance-modal:not([hidden]) .finance-dialog,
    .confirm-modal:not([hidden]) .confirm-dialog,
    .transfer-modal:not([hidden]) .transfer-dialog,
    .preview-modal:not([hidden]) .preview-dialog,
    .contact-create-modal:not([hidden]) .contact-create-dialog,
    .contact-ticket-modal:not([hidden]) .contact-ticket-dialog,
    .contact-history-modal:not([hidden]) .contact-history-dialog,
    .contact-detail-modal:not([hidden]) .contact-detail-dialog,
    .contact-photo-modal:not([hidden]) .contact-photo-dialog,
    .contact-edit-modal:not([hidden]) .contact-edit-dialog {
        animation: none;
    }
}

/* Preferências visuais do usuário e avisos descartáveis. */
:root {
    --brand: #2f95c7;
    --brand-strong: #1f6f9f;
    --brand-soft: #e6f4fb;
    --surface-tint: #eef8fc;
    --focus-ring: rgba(47, 149, 199, .22);
    --menu-bg: #163247;
    --menu-bg-2: #1f4561;
    --menu-line: rgba(190, 218, 235, .18);
    --menu-text: #eaf5fb;
    --menu-muted: #9fc6dc;
    --menu-icon-bg: rgba(234, 245, 251, .12);
    --menu-active: #2f95c7;
}

html[data-theme="soft"] {
    --bg: #f4f8fb;
    --surface: #ffffff;
    --surface-soft: #f7fbfd;
    --line: #d8e8f1;
    --text: #152432;
}

html[data-theme="dark"] {
    color-scheme: light;
    --bg: #e9eef4;
    --surface: #ffffff;
    --surface-soft: #f3f6fa;
    --line: #c8d4df;
    --line-strong: #aebfce;
    --text: #111827;
    --muted: #526173;
    --faint: #7b8da1;
    --surface-tint: #e6f2f8;
}

html[data-menu="black"] {
    --menu-bg: #111820;
    --menu-bg-2: #1b2837;
    --menu-line: rgba(148, 163, 184, .2);
    --menu-text: #d8e4ef;
    --menu-muted: #9fb3c8;
    --menu-icon-bg: rgba(148, 163, 184, .13);
    --menu-active: #2f95c7;
}

html[data-menu="white"] {
    --menu-bg: #ffffff;
    --menu-bg-2: #eef7fc;
    --menu-line: #d8e8f1;
    --menu-text: #1f3448;
    --menu-muted: #577184;
    --menu-icon-bg: #eaf4fb;
    --menu-active: #2f95c7;
}

input:focus,
select:focus,
textarea:focus {
    outline-color: var(--focus-ring);
    border-color: var(--brand);
}

.topbar {
    background: #101923;
}

.app-menu {
    background: var(--menu-bg);
    border-right-color: var(--menu-line);
    box-shadow: 1px 0 0 rgba(0, 0, 0, .12);
}

.menu-toggle {
    background: var(--menu-bg-2);
    border-color: var(--menu-line);
    color: var(--menu-text);
}

.menu-toggle:hover {
    background: color-mix(in srgb, var(--menu-bg-2) 82%, #ffffff);
    color: var(--menu-text);
}

.app-menu section > b {
    color: var(--menu-muted);
}

.app-menu a {
    color: var(--menu-text);
}

.app-menu a .menu-icon,
.app-menu a span {
    color: var(--menu-muted);
    background: var(--menu-icon-bg);
}

.app-menu a.on,
.app-menu a:hover {
    color: var(--menu-text);
    background: var(--menu-bg-2);
    border-left-color: var(--menu-active);
}

.app-menu a.on .menu-icon,
.app-menu a:hover .menu-icon,
.app-menu a.on span,
.app-menu a:hover span {
    color: #ffffff;
    background: var(--menu-active);
}

html[data-menu="white"] .app-menu a.on .menu-icon,
html[data-menu="white"] .app-menu a:hover .menu-icon,
html[data-menu="white"] .app-menu a.on span,
html[data-menu="white"] .app-menu a:hover span {
    color: #ffffff;
}

.topbar-theme {
    position: relative;
    margin-left: auto;
}

.topbar-theme-toggle {
    width: 38px;
    padding-inline: 0;
}

.topbar-theme-toggle[aria-expanded="true"] {
    color: #176d98;
    background: #eef7fc;
    border-color: #c9dfed;
}

.topbar-theme-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    width: 240px;
    padding: 12px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #d7e1eb;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.topbar-theme-menu[hidden] {
    display: none;
}

.topbar-theme-menu header {
    display: grid;
    gap: 2px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}

.topbar-theme-menu header strong {
    color: #101828;
    font-size: 13px;
    font-weight: 750;
}

.topbar-theme-menu header span {
    color: #667085;
    font-size: 12px;
}

.topbar-theme-group {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.topbar-theme-group b {
    color: #475467;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.topbar-theme-menu .theme-control button {
    background: #f8fafc;
    border-color: #d7e1eb;
}

.topbar-theme-menu .theme-control button.on {
    outline-color: #2f95c7;
}

.topbar-notification-wrap {
    position: relative;
}

.topbar-notification {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #344054;
    background: #f8fafc;
    border: 1px solid #d7e1eb;
    border-radius: 8px;
    font: inherit;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.topbar-notification:hover,
.topbar-notification.has-new-message {
    color: #176d98;
    background: #eef7fc;
    border-color: #c9dfed;
}

.topbar-notification.has-new-message {
    transform: translateY(-1px);
}

.topbar-notification i {
    font-size: 19px;
    line-height: 1;
}

.topbar-notification span {
    position: absolute;
    top: -6px;
    right: -7px;
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    color: #ffffff;
    background: #dc2626;
    border: 2px solid #ffffff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
}

.topbar-notification span[hidden] {
    display: none;
}

.topbar-notification-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: min(360px, calc(100vw - 24px));
    max-height: min(640px, calc(100vh - 92px));
    overflow: auto;
    padding: 12px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #d7e1eb;
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}

.topbar-notification-menu[hidden] {
    display: none;
}

.topbar-notification-menu header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}

.topbar-notification-menu header strong {
    display: block;
    color: #101828;
    font-size: 14px;
    font-weight: 850;
}

.topbar-notification-menu header small {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 12px;
}

.topbar-notification-menu header nav {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
}

.topbar-notification-menu header a {
    flex: 0 0 auto;
    padding: 7px 9px;
    color: #176d98;
    background: #eef7fc;
    border: 1px solid #c9dfed;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.topbar-notification-menu header a[hidden] {
    display: none;
}

.topbar-notification-section {
    display: grid;
    gap: 8px;
}

.topbar-notification-section + .topbar-notification-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #edf2f7;
}

.topbar-notification-section b {
    color: #475467;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.topbar-notification-item {
    display: grid;
    gap: 3px;
    padding: 10px;
    color: #101828;
    background: #f8fafc;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
    text-decoration: none;
}

.topbar-notification-item + .topbar-notification-item {
    margin-top: 7px;
}

.topbar-notification-item:hover {
    color: #0b5f91;
    background: #eef7fc;
    border-color: #c9dfed;
}

.topbar-notification-item strong {
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-notification-item small,
.topbar-notification-item span,
.topbar-notification-empty {
    color: #667085;
    font-size: 12px;
}

.topbar-notification-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-notification-empty {
    margin: 0;
    padding: 10px;
    background: #f8fafc;
    border: 1px dashed #d7e1eb;
    border-radius: 8px;
}

.topbar-user {
    position: relative;
}

.topbar-user-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 0 10px 0 6px;
    color: #344054;
    background: #f8fafc;
    border: 1px solid #d7e1eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
}

.topbar-user-button:hover,
.topbar-user-button[aria-expanded="true"] {
    color: #176d98;
    background: #eef7fc;
    border-color: #c9dfed;
}

.topbar-user-button span,
.topbar-user-menu header > span {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #ffffff;
    background: #2f95c7;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.topbar-user-button strong {
    max-width: 140px;
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    width: 260px;
    padding: 10px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #d7e1eb;
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.topbar-user-menu[hidden] {
    display: none;
}

.topbar-user-menu header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid #edf2f7;
}

.topbar-user-menu header strong,
.topbar-user-menu header small {
    display: block;
}

.topbar-user-menu header strong {
    color: #101828;
    font-size: 13px;
    font-weight: 750;
}

.topbar-user-menu header small {
    margin-top: 2px;
    color: #667085;
    font-size: 12px;
}

.topbar-user-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 0 9px;
    color: #344054;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.topbar-user-menu a:hover {
    color: #176d98;
    background: #eef7fc;
}

.topbar-user-menu a svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-page {
    display: grid;
    gap: 14px;
    align-content: start;
}

.profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.profile-hero span {
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-hero p {
    margin: 8px 0 0;
    color: var(--muted);
}

.profile-avatar {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #ffffff;
    background: var(--brand);
    border-radius: 50%;
    font-size: 20px;
    font-weight: 800;
}

.profile-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.profile-card div {
    display: grid;
    gap: 4px;
    padding: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.profile-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.profile-card strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 750;
}

.profile-preferences {
    align-items: center;
}

.profile-preferences small {
    color: var(--muted);
    font-size: 12px;
}

.profile-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px;
    color: var(--text);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 750;
}

.profile-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
}

.profile-preferences button {
    justify-self: end;
}

.theme-control {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.theme-control:last-child {
    margin-bottom: 0;
}

.theme-control button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 32px;
    padding: 0;
    border-color: var(--menu-line);
    background: var(--menu-bg-2);
}

.theme-control button.on {
    outline: 2px solid var(--menu-active);
    outline-offset: 2px;
}

.theme-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
}

.theme-dot-light { background: #ffffff; }
.theme-dot-soft { background: #eaf4fb; }
.theme-dot-dark { background: #6b7d90; }
.menu-dot-blue { background: #2f95c7; }
.menu-dot-black { background: #111820; }
.menu-dot-white { background: #ffffff; border-color: #cbd5e1; }

html[data-theme="dark"] .topbar-theme-menu {
    color: #1f2937;
    background: #ffffff;
    border-color: #c8d4df;
}

.flash {
    position: fixed;
    top: calc(var(--topbar) + 16px + var(--toast-offset, 0px));
    right: 18px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
    min-height: 52px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
    color: #1f2937;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
    transition: opacity .18s ease, transform .18s ease;
}

.flash.success {
    color: #17405c;
    border: 1px solid #c8dfef;
    border-left: 4px solid #2b6f9f;
}

.flash.error {
    color: #9f1239;
    border: 1px solid #fecdd3;
    border-left: 4px solid #dc2626;
}

.flash > svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #2b6f9f;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flash button {
    margin-left: auto;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    color: currentColor;
    background: #f8fafc;
    border: 1px solid #d8e2ec;
    line-height: 1;
    font-size: 18px;
    font-weight: 400;
}

.flash button:hover {
    color: #173f5f;
    background: #eaf4fb;
    border-color: #bdd5e8;
}

.flash.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .inbox,
html[data-theme="dark"] .chat,
html[data-theme="dark"] .lead-panel,
html[data-theme="dark"] .settings-summary,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-placeholder {
    background: #ffffff;
    border-color: var(--line);
}

html[data-theme="dark"] .message.out,
html[data-theme="dark"] .message.bot,
.message.out,
.message.bot {
    background: #e6f4fb;
    border-color: #b9dff1;
}

.reports-page {
    display: block;
}

.report-filters {
    margin-bottom: 14px;
}

.report-filters form {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 12px;
    align-items: end;
}

.report-filters label {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.report-filters input,
.report-filters select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cddbe7;
    border-radius: 9px;
    font-size: 14px;
}

.report-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.report-filter-actions a,
.report-filter-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    font-weight: 900;
}

.report-filter-actions a {
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #d8e2ec;
}

.report-filter-actions button {
    color: #ffffff;
    background: #2b6f9f;
    border: 1px solid #2b6f9f;
}

.report-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.report-metrics .panel {
    display: grid;
    gap: 4px;
}

.report-metrics b {
    color: #0f172a;
    font-size: 24px;
    font-weight: 900;
}

.report-metrics span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.report-table-panel {
    overflow: hidden;
}

.report-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.report-table-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
}

.report-table-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.report-table {
    display: grid;
    gap: 0;
    overflow-x: auto;
}

.report-row {
    display: grid;
    grid-template-columns: 170px minmax(170px, 1.4fr) 130px 130px 150px 150px 140px;
    gap: 12px;
    align-items: center;
    min-width: 1040px;
    padding: 12px 10px;
}

.report-row-head {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.report-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .report-filters form,
    .report-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.contacts-page {
    display: block;
}

.contacts-page a {
    text-decoration: none;
}

.contacts-page {
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 400;
}

.contacts-layout {
    display: grid;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.contacts-list-panel,
.contact-detail-panel {
    min-height: calc(100vh - 132px);
}

.contacts-toolbar {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.contacts-search {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(140px, .7fr) minmax(150px, .8fr) auto auto;
    gap: 8px;
}

.contacts-search input,
.contacts-search select,
.contact-create input,
.contact-create textarea,
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid #cddbe7;
    border-radius: 9px;
    color: #0f172a;
    background: #ffffff;
    font-size: 14px;
}

.contacts-search input,
.contacts-search select,
.contact-create input,
.contact-form input {
    height: 40px;
    padding: 0 12px;
}

.contacts-search button,
.contact-create button,
.contact-form button {
    min-height: 40px;
    padding: 0 14px;
    color: #ffffff;
    background: #2b6f9f;
    border: 1px solid #2b6f9f;
    border-radius: 9px;
    font-weight: 600;
}

.contacts-toolbar-actions {
    display: flex;
    justify-content: flex-end;
}

.contacts-toolbar-actions a,
.contact-create summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    color: #2b6f9f;
    background: #eaf4fb;
    border: 1px solid #cfe4f0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.contact-create {
    margin-bottom: 12px;
}

.contact-create summary {
    width: 100%;
    cursor: pointer;
    list-style: none;
}

.contact-create summary::-webkit-details-marker {
    display: none;
}

.contact-create form {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.contact-create textarea {
    min-height: 74px;
    padding: 10px 12px;
    resize: vertical;
}

.contacts-list {
    display: grid;
    gap: 8px;
}

.contact-list-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    color: #0f172a;
    border: 1px solid transparent;
    border-radius: 10px;
}

.contact-list-row.active,
.contact-list-row:hover {
    background: #eaf4fb;
    border-color: #cfe4f0;
}

.contact-list-row strong,
.contact-list-row span,
.contact-list-row small {
    display: block;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-list-row strong {
    font-size: 14px;
    font-weight: 900;
}

.contact-list-row span {
    color: #475569;
    font-size: 12px;
}

.contact-list-row small {
    color: #2b6f9f;
    font-size: 11px;
    font-weight: 800;
}

.contact-detail-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.contact-detail-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
}

.contact-detail-head span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
}

.contact-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 18px;
    padding-top: 16px;
}

.contact-detail-grid h3 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 15px;
}

.contact-form {
    display: grid;
    gap: 12px;
}

.contact-form label {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.contact-form textarea {
    min-height: 112px;
    padding: 10px 12px;
    resize: vertical;
}

.contact-summary {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.contact-summary div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
}

.contact-summary span {
    color: #64748b;
    font-size: 12px;
}

.contact-summary b {
    color: #0f172a;
    font-size: 12px;
    text-align: right;
}

.contact-history {
    display: grid;
    gap: 8px;
}

.contact-history a {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    text-decoration: none;
}

.contact-history a:hover {
    border-color: #b7d8ea;
    background: #f8fbfd;
}

.contact-history strong {
    color: #2b6f9f;
    font-size: 13px;
    text-decoration: none;
}

.contact-history span,
.contact-history small {
    color: #64748b;
    font-size: 12px;
    text-decoration: none;
}

@media (max-width: 1180px) {
    .contacts-layout,
    .contact-detail-grid {
        grid-template-columns: 1fr;
    }
}

.contacts-topbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(520px, 760px) auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.contacts-topbar h1 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    font-weight: 700;
}

.contacts-topbar > div:first-child span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.contacts-main-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.contacts-topbar .ui-btn,
.contacts-main-actions .ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.contacts-topbar .ui-btn svg,
.contacts-main-actions .ui-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contacts-topbar .ui-btn-primary,
.contacts-main-actions .ui-btn-primary {
    color: #ffffff;
    background: #2b6f9f;
    border: 1px solid #2b6f9f;
}

.contacts-topbar .ui-btn-primary:hover,
.contacts-main-actions .ui-btn-primary:hover {
    background: #245f88;
    border-color: #245f88;
    box-shadow: 0 3px 8px rgba(43, 111, 159, .18);
}

.contacts-topbar .ui-btn-light,
.contacts-main-actions .ui-btn-light {
    color: #2b6f9f;
    background: #eef7fc;
    border: 1px solid #c9dfed;
}

.contacts-topbar .ui-btn-light:hover,
.contacts-main-actions .ui-btn-light:hover {
    color: #245f88;
    background: #e2f0f8;
    border-color: #a9cfe4;
}

.contacts-table-panel {
    overflow: hidden;
}

.contacts-bulk-list-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(190px, .9fr) auto auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.contacts-bulk-list-form > div {
    display: grid;
    gap: 3px;
}

.contacts-bulk-list-form strong {
    color: var(--text);
}

.contacts-bulk-list-form span {
    color: var(--muted);
    font-size: 12px;
}

.contacts-bulk-list-form select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.contacts-bulk-list-form button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.contacts-table {
    display: grid;
    overflow-x: auto;
}

.contacts-row {
    display: grid;
    grid-template-columns: 44px 82px minmax(220px, 1.5fr) minmax(150px, 1fr) minmax(180px, 1fr) 150px 90px 150px;
    gap: 12px;
    align-items: center;
    min-width: 1120px;
    padding: 10px 12px;
}

.contacts-row-head {
    font-size: 12px;
    font-weight: 600;
}

.contacts-row .avatar {
    width: 42px;
    height: 42px;
    overflow: hidden;
    font-size: 13px;
    background: linear-gradient(135deg, #2b6f9f, #25a4c8);
    border-radius: 9px;
}

.contacts-row .avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contacts-row strong,
.contacts-row small {
    display: block;
}

.contacts-row strong {
    font-size: 14px;
    font-weight: 650;
}

.contacts-row small {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.contacts-row > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #15803d;
    border-radius: 999px;
    box-shadow: inset 0 0 0 4px #dcfce7;
}

.contact-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.contact-actions form {
    margin: 0;
}

.contact-actions button,
.contact-actions a {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 9px;
}

.contact-actions button:hover,
.contact-actions a:hover {
    color: #2b6f9f;
    background: #eaf4fb;
}

.contact-actions svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-avatar-link,
.contact-name-link {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    box-shadow: none;
}

.contact-avatar-link {
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
}

.contact-avatar-link:hover,
.contact-name-link:hover {
    background: transparent;
    color: #2b6f9f;
}

.contact-name-link {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-detail-panel {
    margin-top: 14px;
}

.contact-detail-head {
    grid-template-columns: 58px minmax(0, 1fr) auto;
}

.contact-detail-head > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #d8e2ec;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.contact-create-modal,
.contact-ticket-modal,
.contact-history-modal,
.contact-detail-modal,
.contact-photo-modal,
.contact-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 72;
    display: grid;
    place-items: center;
    padding: 24px;
}

.contact-create-modal[hidden],
.contact-ticket-modal[hidden],
.contact-history-modal[hidden],
.contact-detail-modal[hidden],
.contact-photo-modal[hidden],
.contact-edit-modal[hidden] {
    display: none;
}

.contact-create-backdrop,
.contact-ticket-backdrop,
.contact-history-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}

.contact-create-dialog,
.contact-ticket-dialog,
.contact-history-dialog,
.contact-detail-dialog,
.contact-photo-dialog,
.contact-edit-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    width: min(430px, 100%);
    padding: 18px;
    background: #ffffff;
    border: 1px solid #d8e2ec;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .32);
}

.contact-create-dialog,
.contact-edit-dialog {
    width: min(760px, 100%);
}

.contact-create-dialog header,
.contact-ticket-dialog header,
.contact-history-dialog header,
.contact-detail-dialog header,
.contact-photo-dialog header,
.contact-edit-dialog header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.contact-create-dialog header span,
.contact-ticket-dialog header span,
.contact-history-dialog header span,
.contact-detail-dialog header span,
.contact-photo-dialog header span,
.contact-edit-dialog header span,
.contact-ticket-dialog label span {
    color: #2b6f9f;
    font-size: 12px;
    font-weight: 900;
}

.contact-create-dialog h2,
.contact-ticket-dialog h2,
.contact-history-dialog h2,
.contact-detail-dialog h2,
.contact-photo-dialog h2,
.contact-edit-dialog h2 {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: 18px;
}

.contact-create-dialog header button,
.contact-ticket-dialog header button,
.contact-history-dialog header button,
.contact-detail-dialog header button,
.contact-photo-dialog header button,
.contact-edit-dialog header button {
    min-height: 34px;
    padding: 0 12px;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #d8e2ec;
    border-radius: 9px;
    font-weight: 800;
}

.contact-create-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.contact-create-grid label {
    display: grid;
    gap: 7px;
    color: #2b6f9f;
    font-size: 12px;
    font-weight: 800;
}

.contact-create-full {
    grid-column: 1 / -1;
}

.contact-create-grid input:not([type="checkbox"]),
.contact-create-grid textarea {
    width: 100%;
    border: 1px solid #cddbe7;
    border-radius: 10px;
    color: #0f172a;
    background: #ffffff;
    font-size: 14px;
    font-weight: 400;
}

.contact-create-grid input:not([type="checkbox"]) {
    height: 42px;
    padding: 0 12px;
}

.contact-create-grid input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 16px;
    accent-color: #2b6f9f;
}

.contact-create-grid .urbix-form-check {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    justify-self: end;
    width: min(260px, 100%);
    color: #1f5f8d;
    line-height: 1.35;
}

.contact-create-grid .urbix-form-check span {
    font-size: 12px;
    font-weight: 800;
}

.contact-create-grid textarea {
    min-height: 108px;
    padding: 10px 12px;
    resize: vertical;
}

.contact-create-errors {
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    color: #991b1b;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.contact-ticket-dialog label {
    display: grid;
    gap: 7px;
}

.contact-ticket-dialog select {
    height: 42px;
    padding: 0 12px;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cddbe7;
    border-radius: 10px;
}

.contact-create-dialog footer,
.contact-ticket-dialog footer,
.contact-edit-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.contact-create-dialog .btn-muted,
.contact-create-dialog .btn-primary,
.contact-ticket-dialog .btn-muted,
.contact-ticket-dialog .btn-primary,
.contact-edit-dialog .btn-muted,
.contact-edit-dialog .btn-primary {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    font-weight: 900;
}

.contact-create-dialog .btn-muted,
.contact-ticket-dialog .btn-muted,
.contact-edit-dialog .btn-muted {
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #d8e2ec;
}

.contact-create-dialog .btn-primary,
.contact-ticket-dialog .btn-primary,
.contact-edit-dialog .btn-primary {
    color: #ffffff;
    background: #2b6f9f;
    border: 1px solid #2b6f9f;
}

.contact-history-dialog {
    width: min(620px, 100%);
}

.contact-detail-dialog {
    width: min(680px, 100%);
}

.contact-detail-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #d8e2ec;
    border-radius: 12px;
}

.contact-detail-photo {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(135deg, #2b6f9f, #25a4c8);
    border-radius: 14px;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
}

.contact-detail-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-detail-photo button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: inherit;
}

.contact-detail-photo button:hover {
    filter: brightness(.95);
}

.contact-photo-dialog {
    width: min(760px, 100%);
}

.contact-photo-full {
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: 14px;
    background: #0f172a;
    border-radius: 12px;
}

.contact-photo-full img {
    display: block;
    max-width: 100%;
    max-height: min(68vh, 680px);
    object-fit: contain;
    border-radius: 10px;
}

.contact-detail-card strong,
.contact-detail-card span {
    display: block;
}

.contact-detail-card strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-detail-card > div > span {
    margin-top: 4px;
    color: #64748b;
}

.contact-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.contact-detail-tags span,
.contact-detail-tags small {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    color: #1f6f9f;
    background: #e6f4fb;
    border: 1px solid #c9dfed;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.contact-detail-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.contact-detail-summary div,
.contact-detail-notes {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #d8e2ec;
    border-radius: 10px;
}

.contact-detail-summary span,
.contact-detail-notes span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.contact-detail-summary b {
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-detail-notes p {
    margin: 0;
    color: #334155;
    white-space: pre-wrap;
}

.contact-edit-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.contact-edit-summary div {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #d8e2ec;
    border-radius: 10px;
}

.contact-edit-summary span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.contact-edit-summary b {
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-history-list {
    display: grid;
    gap: 10px;
    max-height: min(520px, 70vh);
    overflow: auto;
}

.contact-history-list a {
    display: grid;
    gap: 4px;
    padding: 12px;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #d8e2ec;
    border-radius: 10px;
    text-decoration: none;
}

.contact-history-list a:hover {
    border-color: #9bc6df;
    background: #eef7fc;
}

.contact-history-list strong {
    color: #0b5f91;
    font-size: 13px;
    font-weight: 900;
}

.contact-history-list span,
.contact-history-list small {
    color: #475569;
    font-size: 12px;
}

@media (max-width: 1200px) {
    .contacts-topbar {
        grid-template-columns: 1fr;
    }

    .contacts-search,
    .contacts-bulk-list-form {
        grid-template-columns: 1fr;
    }

    .contacts-main-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .contact-create-grid {
        grid-template-columns: 1fr;
    }

    .contact-detail-card,
    .contact-detail-summary {
        grid-template-columns: 1fr;
    }

    .contact-edit-summary {
        grid-template-columns: 1fr;
    }
}

/* Topbar padronizada no mesmo estilo dos botões do painel admin. */
.topbar {
    min-height: 64px;
    gap: 14px;
    padding: 10px 18px;
    background: #ffffff;
    color: #151a22;
    border-bottom: 1px solid #d7e1eb;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
}

.brand img {
    display: block;
    width: 132px;
    height: 38px;
    object-fit: contain;
    object-position: left center;
}

.topbar strong {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}

.topbar span,
.session-user span {
    color: #667085;
    font-size: 12px;
}

.topbar .topbar-notification span {
    color: #ffffff;
    font-size: 10px;
}

.simulate {
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.simulate input {
    width: 190px;
    min-height: 38px;
    padding: 0 12px;
    background: #ffffff;
    border-color: #cbd7e4;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
}

.simulate input[name="message"] {
    width: 210px;
}

.topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.topbar-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topbar-btn-light,
.session-user a.topbar-btn-light {
    color: #344054;
    background: #f8fafc;
    border: 1px solid #d7e1eb;
    font-weight: 600;
}

.topbar-btn-light:hover,
.session-user a.topbar-btn-light:hover {
    color: #176d98;
    background: #eef7fc;
    border-color: #c9dfed;
}

.topbar-btn-dark,
.simulate .topbar-btn-dark {
    color: #ffffff;
    background: #151a22;
    border: 1px solid #151a22;
}

.topbar-btn-dark:hover,
.simulate .topbar-btn-dark:hover {
    color: #ffffff;
    background: #2b6f9f;
    border-color: #2b6f9f;
    box-shadow: 0 3px 8px rgba(43, 111, 159, .18);
}

@media (max-width: 1180px) {
    .ipx-urbix-shell,
    .ipx-urbix-shell #layout-wrapper {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        position: static;
    }

    .ipx-urbix-shell .topbar.ipx-app-header {
        position: static;
    }

    .ipx-urbix-shell .with-menu {
        height: auto;
        margin-top: 0;
        overflow: visible;
    }

    .simulate {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .topbar-theme {
        margin-left: 0;
    }

    .topbar-user-menu,
    .topbar-theme-menu {
        left: 0;
        right: auto;
    }
}

/* Tema global final: mantido no fim para vencer telas legadas com cores fixas. */
html[data-bs-theme="dark"],
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1722;
    --surface: #121d2b;
    --surface-soft: #172434;
    --surface-tint: #17344b;
    --line: #26384d;
    --line-strong: #334a64;
    --text: #e7eef8;
    --muted: #a9b8ca;
    --faint: #7f91a6;
}

html[data-bs-theme="dark"] body,
html[data-theme="dark"] body,
html[data-bs-theme="dark"] .ipx-urbix-shell,
html[data-theme="dark"] .ipx-urbix-shell,
html[data-bs-theme="dark"] .page,
html[data-theme="dark"] .page,
html[data-bs-theme="dark"] .settings-page,
html[data-theme="dark"] .settings-page,
html[data-bs-theme="dark"] .dashboard-page,
html[data-theme="dark"] .dashboard-page,
html[data-bs-theme="dark"] .finance-page,
html[data-theme="dark"] .finance-page,
html[data-bs-theme="dark"] .crm-clients-page,
html[data-theme="dark"] .crm-clients-page,
html[data-bs-theme="dark"] .crm-plans-page,
html[data-theme="dark"] .crm-plans-page {
    background: var(--bg) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] .topbar,
html[data-theme="dark"] .topbar,
html[data-bs-theme="dark"] .panel,
html[data-theme="dark"] .panel,
html[data-bs-theme="dark"] .card,
html[data-theme="dark"] .card,
html[data-bs-theme="dark"] .urbix-card,
html[data-theme="dark"] .urbix-card,
html[data-bs-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .dashboard-hero,
html[data-bs-theme="dark"] .dashboard-card,
html[data-theme="dark"] .dashboard-card,
html[data-bs-theme="dark"] .dashboard-metric,
html[data-theme="dark"] .dashboard-metric,
html[data-bs-theme="dark"] .settings-hero,
html[data-theme="dark"] .settings-hero,
html[data-bs-theme="dark"] .settings-tabs,
html[data-theme="dark"] .settings-tabs,
html[data-bs-theme="dark"] .settings-summary,
html[data-theme="dark"] .settings-summary,
html[data-bs-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-card,
html[data-bs-theme="dark"] .settings-placeholder,
html[data-theme="dark"] .settings-placeholder,
html[data-bs-theme="dark"] .finance-hero,
html[data-theme="dark"] .finance-hero,
html[data-bs-theme="dark"] .finance-table-panel,
html[data-theme="dark"] .finance-table-panel,
html[data-bs-theme="dark"] .crm-clients-hero,
html[data-theme="dark"] .crm-clients-hero,
html[data-bs-theme="dark"] .crm-clients-table-panel,
html[data-theme="dark"] .crm-clients-table-panel,
html[data-bs-theme="dark"] .crm-plans-hero,
html[data-theme="dark"] .crm-plans-hero,
html[data-bs-theme="dark"] .crm-plans-table-panel,
html[data-theme="dark"] .crm-plans-table-panel,
html[data-bs-theme="dark"] .contacts-table-panel,
html[data-theme="dark"] .contacts-table-panel,
html[data-bs-theme="dark"] .contacts-topbar,
html[data-theme="dark"] .contacts-topbar,
html[data-bs-theme="dark"] .topbar-user-menu,
html[data-theme="dark"] .topbar-user-menu,
html[data-bs-theme="dark"] .topbar-theme-menu,
html[data-theme="dark"] .topbar-theme-menu,
html[data-bs-theme="dark"] .urbix-customizer,
html[data-theme="dark"] .urbix-customizer,
html[data-bs-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .connection-card,
html[data-theme="dark"] .connection-card,
html[data-bs-theme="dark"] .diagnostics-dialog,
html[data-theme="dark"] .diagnostics-dialog,
html[data-bs-theme="dark"] .report-table-panel,
html[data-theme="dark"] .report-table-panel,
html[data-bs-theme="dark"] .deleted-records-table-panel,
html[data-theme="dark"] .deleted-records-table-panel {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer,
html[data-theme="dark"] .modal-footer,
html[data-bs-theme="dark"] .dashboard-stack div,
html[data-theme="dark"] .dashboard-stack div,
html[data-bs-theme="dark"] .dashboard-channels div,
html[data-theme="dark"] .dashboard-channels div,
html[data-bs-theme="dark"] .tenant-health-limit,
html[data-theme="dark"] .tenant-health-limit,
html[data-bs-theme="dark"] .tenant-health-summary-item,
html[data-theme="dark"] .tenant-health-summary-item,
html[data-bs-theme="dark"] .settings-summary div,
html[data-theme="dark"] .settings-summary div,
html[data-bs-theme="dark"] .settings-kpis div,
html[data-theme="dark"] .settings-kpis div,
html[data-bs-theme="dark"] .settings-automation-group,
html[data-theme="dark"] .settings-automation-group,
html[data-bs-theme="dark"] .settings-cooldown-list dl > div,
html[data-theme="dark"] .settings-cooldown-list dl > div,
html[data-bs-theme="dark"] .triage-preview .triage-preview-warning,
html[data-theme="dark"] .triage-preview .triage-preview-warning,
html[data-bs-theme="dark"] .settings-message-group,
html[data-theme="dark"] .settings-message-group,
html[data-bs-theme="dark"] .finance-scope-grid article,
html[data-theme="dark"] .finance-scope-grid article,
html[data-bs-theme="dark"] .finance-metrics article,
html[data-theme="dark"] .finance-metrics article,
html[data-bs-theme="dark"] .crm-clients-metrics article,
html[data-theme="dark"] .crm-clients-metrics article,
html[data-bs-theme="dark"] .crm-plans-metrics article,
html[data-theme="dark"] .crm-plans-metrics article,
html[data-bs-theme="dark"] .connection-body,
html[data-theme="dark"] .connection-body,
html[data-bs-theme="dark"] .connection-alert,
html[data-theme="dark"] .connection-alert,
html[data-bs-theme="dark"] .diagnostics-summary div,
html[data-theme="dark"] .diagnostics-summary div,
html[data-bs-theme="dark"] .diagnostics-advice article,
html[data-theme="dark"] .diagnostics-advice article,
html[data-bs-theme="dark"] .diagnostics-log article,
html[data-theme="dark"] .diagnostics-log article,
html[data-bs-theme="dark"] .report-metrics .panel,
html[data-theme="dark"] .report-metrics .panel {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] input,
html[data-theme="dark"] input,
html[data-bs-theme="dark"] select,
html[data-theme="dark"] select,
html[data-bs-theme="dark"] textarea,
html[data-theme="dark"] textarea,
html[data-bs-theme="dark"] .form-control,
html[data-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-theme="dark"] .form-select,
html[data-bs-theme="dark"] .simulate input,
html[data-theme="dark"] .simulate input {
    background-color: #0f1b29 !important;
    border-color: var(--line-strong) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-bs-theme="dark"] textarea::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #8092a8 !important;
}

html[data-bs-theme="dark"] h1,
html[data-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-theme="dark"] h4,
html[data-bs-theme="dark"] strong,
html[data-theme="dark"] strong,
html[data-bs-theme="dark"] label,
html[data-theme="dark"] label,
html[data-bs-theme="dark"] th,
html[data-theme="dark"] th,
html[data-bs-theme="dark"] b,
html[data-theme="dark"] b,
html[data-bs-theme="dark"] .report-metrics b,
html[data-theme="dark"] .report-metrics b,
html[data-bs-theme="dark"] .report-table-head h2,
html[data-theme="dark"] .report-table-head h2,
html[data-bs-theme="dark"] .connection-alert strong,
html[data-theme="dark"] .connection-alert strong,
html[data-bs-theme="dark"] .connection-info b,
html[data-theme="dark"] .connection-info b,
html[data-bs-theme="dark"] .diagnostics-summary b,
html[data-theme="dark"] .diagnostics-summary b,
html[data-bs-theme="dark"] .diagnostics-advice strong,
html[data-theme="dark"] .diagnostics-advice strong,
html[data-bs-theme="dark"] .diagnostics-log code,
html[data-theme="dark"] .diagnostics-log code,
html[data-bs-theme="dark"] .access-profile-count,
html[data-theme="dark"] .access-profile-count,
html[data-bs-theme="dark"] .access-profile-context-grid strong,
html[data-theme="dark"] .access-profile-context-grid strong,
html[data-bs-theme="dark"] .permissions-grid label b,
html[data-theme="dark"] .permissions-grid label b,
html[data-bs-theme="dark"] .settings-cooldown-list dt,
html[data-theme="dark"] .settings-cooldown-list dt,
html[data-bs-theme="dark"] .settings-cooldown-list dd,
html[data-theme="dark"] .settings-cooldown-list dd {
    color: var(--text) !important;
}

html[data-bs-theme="dark"] p,
html[data-theme="dark"] p,
html[data-bs-theme="dark"] small,
html[data-theme="dark"] small,
html[data-bs-theme="dark"] td,
html[data-theme="dark"] td,
html[data-bs-theme="dark"] .muted,
html[data-theme="dark"] .muted,
html[data-bs-theme="dark"] .text-muted,
html[data-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .topbar span,
html[data-theme="dark"] .topbar span,
html[data-bs-theme="dark"] .session-user span,
html[data-theme="dark"] .session-user span,
html[data-bs-theme="dark"] .dashboard-subtitle,
html[data-theme="dark"] .dashboard-subtitle,
html[data-bs-theme="dark"] .settings-subtitle,
html[data-theme="dark"] .settings-subtitle,
html[data-bs-theme="dark"] .finance-subtitle,
html[data-theme="dark"] .finance-subtitle,
html[data-bs-theme="dark"] .crm-clients-subtitle,
html[data-theme="dark"] .crm-clients-subtitle,
html[data-bs-theme="dark"] .crm-plans-subtitle,
html[data-theme="dark"] .crm-plans-subtitle,
html[data-bs-theme="dark"] .report-table-head span,
html[data-theme="dark"] .report-table-head span,
html[data-bs-theme="dark"] .report-metrics span,
html[data-theme="dark"] .report-metrics span,
html[data-bs-theme="dark"] .report-filters label,
html[data-theme="dark"] .report-filters label,
html[data-bs-theme="dark"] .connection-card header span,
html[data-theme="dark"] .connection-card header span,
html[data-bs-theme="dark"] .connection-info span,
html[data-theme="dark"] .connection-info span,
html[data-bs-theme="dark"] .connection-alert span,
html[data-theme="dark"] .connection-alert span,
html[data-bs-theme="dark"] .status-line,
html[data-theme="dark"] .status-line,
html[data-bs-theme="dark"] .diagnostics-summary span,
html[data-theme="dark"] .diagnostics-summary span,
html[data-bs-theme="dark"] .diagnostics-log time,
html[data-theme="dark"] .diagnostics-log time,
html[data-bs-theme="dark"] .diagnostics-log strong,
html[data-theme="dark"] .diagnostics-log strong,
html[data-bs-theme="dark"] .access-profiles-hero-summary small,
html[data-theme="dark"] .access-profiles-hero-summary small,
html[data-bs-theme="dark"] .access-profile-context-grid p,
html[data-theme="dark"] .access-profile-context-grid p,
html[data-bs-theme="dark"] .permissions-grid article header p,
html[data-theme="dark"] .permissions-grid article header p,
html[data-bs-theme="dark"] .permissions-grid label small,
html[data-theme="dark"] .permissions-grid label small {
    color: var(--muted) !important;
}

html[data-bs-theme="dark"] .topbar-btn-light,
html[data-theme="dark"] .topbar-btn-light,
html[data-bs-theme="dark"] .session-user a.topbar-btn-light,
html[data-theme="dark"] .session-user a.topbar-btn-light,
html[data-bs-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-light,
html[data-bs-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-secondary {
    background: var(--surface-soft) !important;
    border-color: var(--line-strong) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] .btn-outline-primary,
html[data-theme="dark"] .btn-outline-primary,
html[data-bs-theme="dark"] .settings-tab,
html[data-theme="dark"] .settings-tab {
    background: #102237 !important;
    border-color: var(--line-strong) !important;
    color: #bfe5ff !important;
}

html[data-bs-theme="dark"] .settings-tab.active,
html[data-theme="dark"] .settings-tab.active,
html[data-bs-theme="dark"] .settings-tab:hover,
html[data-theme="dark"] .settings-tab:hover {
    background: #163b58 !important;
    border-color: #2d8bc7 !important;
    color: #e8f7ff !important;
}

html[data-bs-theme="dark"] .badge,
html[data-theme="dark"] .badge,
html[data-bs-theme="dark"] .status-badge,
html[data-theme="dark"] .status-badge {
    border-color: var(--line-strong) !important;
}

html[data-bs-theme="dark"] .connection-alert.connected,
html[data-theme="dark"] .connection-alert.connected,
html[data-bs-theme="dark"] .connection-alert.waiting,
html[data-theme="dark"] .connection-alert.waiting {
    background: #102237 !important;
    border-color: #315c78 !important;
}

html[data-bs-theme="dark"] .connection-alert.error,
html[data-theme="dark"] .connection-alert.error {
    background: #2a1517 !important;
    border-color: #7a3130 !important;
}

html[data-bs-theme="dark"] .connections-page .connection-limit-panel,
html[data-theme="dark"] .connections-page .connection-limit-panel {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] .connections-page .connection-limit-panel.is-full,
html[data-theme="dark"] .connections-page .connection-limit-panel.is-full {
    background: #2a1517 !important;
    border-color: #7a3130 !important;
}

html[data-bs-theme="dark"] .connections-page .connection-limit-panel span,
html[data-theme="dark"] .connections-page .connection-limit-panel span {
    color: var(--muted) !important;
}

html[data-bs-theme="dark"] .diagnostics-log,
html[data-theme="dark"] .diagnostics-log {
    background: #0f1722 !important;
}

html[data-bs-theme="dark"] .diagnostics-advice .diagnostics-warning,
html[data-theme="dark"] .diagnostics-advice .diagnostics-warning {
    background: #2a2113 !important;
    border-color: #76501c !important;
}

html[data-bs-theme="dark"] .connection-card header,
html[data-theme="dark"] .connection-card header,
html[data-bs-theme="dark"] .connection-card footer,
html[data-theme="dark"] .connection-card footer {
    background: #121d2b !important;
    border-color: var(--line) !important;
}

html[data-bs-theme="dark"] .connection-card h2,
html[data-theme="dark"] .connection-card h2 {
    color: var(--text) !important;
}

html[data-bs-theme="dark"] .connections-page .pill.ok,
html[data-theme="dark"] .connections-page .pill.ok {
    color: #bfe5ff !important;
    background: #102237 !important;
    border: 1px solid #315c78 !important;
}

html[data-bs-theme="dark"] .connections-page .action-link,
html[data-theme="dark"] .connections-page .action-link {
    color: #8ed7ff !important;
}

html[data-bs-theme="dark"] .connections-page .action-link.danger,
html[data-theme="dark"] .connections-page .action-link.danger {
    color: #ffaaa3 !important;
}

html[data-bs-theme="dark"] .attendance-shell,
html[data-theme="dark"] .attendance-shell {
    --ux-bg: #0f1722;
    --ux-card: #121d2b;
    --ux-border: #26384d;
    --ux-border-strong: #334a64;
    --ux-text: #e7eef8;
    --ux-muted: #a9b8ca;
    --ux-primary: #45a7d8;
    --ux-primary-soft: #102237;
    background: var(--ux-bg) !important;
}

html[data-bs-theme="dark"] .attendance-shell .inbox,
html[data-theme="dark"] .attendance-shell .inbox,
html[data-bs-theme="dark"] .attendance-shell .chat,
html[data-theme="dark"] .attendance-shell .chat,
html[data-bs-theme="dark"] .attendance-shell .inbox-header,
html[data-theme="dark"] .attendance-shell .inbox-header,
html[data-bs-theme="dark"] .attendance-shell .inbox-modebar,
html[data-theme="dark"] .attendance-shell .inbox-modebar,
html[data-bs-theme="dark"] .attendance-shell .chat-head,
html[data-theme="dark"] .attendance-shell .chat-head,
html[data-bs-theme="dark"] .attendance-shell .tag-row,
html[data-theme="dark"] .attendance-shell .tag-row,
html[data-bs-theme="dark"] .attendance-shell .composer,
html[data-theme="dark"] .attendance-shell .composer {
    background: var(--ux-card) !important;
    border-color: var(--ux-border) !important;
    color: var(--ux-text) !important;
}

html[data-bs-theme="dark"] .attendance-shell .inbox-tools,
html[data-theme="dark"] .attendance-shell .inbox-tools,
html[data-bs-theme="dark"] .attendance-shell .filters,
html[data-theme="dark"] .attendance-shell .filters,
html[data-bs-theme="dark"] .attendance-shell .tabs,
html[data-theme="dark"] .attendance-shell .tabs,
html[data-bs-theme="dark"] .attendance-shell .ticket-list,
html[data-theme="dark"] .attendance-shell .ticket-list {
    background: #101a27 !important;
    border-color: var(--ux-border) !important;
    color: var(--ux-text) !important;
}

html[data-bs-theme="dark"] .attendance-shell .ticket-row,
html[data-theme="dark"] .attendance-shell .ticket-row {
    background: #121d2b !important;
    border-color: var(--ux-border) !important;
}

html[data-bs-theme="dark"] .attendance-shell .ticket-row.active,
html[data-theme="dark"] .attendance-shell .ticket-row.active {
    background: #102237 !important;
    box-shadow: inset 4px 0 0 var(--ux-primary) !important;
}

html[data-bs-theme="dark"] .attendance-shell .ticket-row.has-unread,
html[data-theme="dark"] .attendance-shell .ticket-row.has-unread {
    background: #102237 !important;
    box-shadow: inset 4px 0 0 #45a7d8 !important;
}

html[data-bs-theme="dark"] .attendance-shell .ticket-row:hover,
html[data-theme="dark"] .attendance-shell .ticket-row:hover {
    background: #172434 !important;
}

html[data-bs-theme="dark"] .attendance-shell .ticket-unread-chip,
html[data-theme="dark"] .attendance-shell .ticket-unread-chip {
    color: #bfe5ff;
    background: #0b324a;
    border-color: #315c78;
}

html[data-bs-theme="dark"] .attendance-shell .ticket-triage-chip,
html[data-theme="dark"] .attendance-shell .ticket-triage-chip,
html[data-bs-theme="dark"] .preview-triage-chip,
html[data-theme="dark"] .preview-triage-chip,
html[data-bs-theme="dark"] .triage-context,
html[data-theme="dark"] .triage-context {
    color: #f5df9b;
    background: #3a321e;
    border-color: #685830;
}

html[data-bs-theme="dark"] .attendance-shell .ticket-triage-chip.is-completed,
html[data-theme="dark"] .attendance-shell .ticket-triage-chip.is-completed,
html[data-bs-theme="dark"] .preview-triage-chip.is-completed,
html[data-theme="dark"] .preview-triage-chip.is-completed,
html[data-bs-theme="dark"] .triage-context.is-completed,
html[data-theme="dark"] .triage-context.is-completed {
    color: #94f0dd;
    background: #12352f;
    border-color: #21695d;
}

html[data-bs-theme="dark"] .attendance-shell .messages,
html[data-theme="dark"] .attendance-shell .messages {
    background:
        radial-gradient(circle at 18px 18px, rgba(142, 215, 255, .08) 1.4px, transparent 1.6px),
        radial-gradient(circle at 7px 32px, rgba(142, 215, 255, .055) 1px, transparent 1.3px),
        linear-gradient(45deg, transparent 47%, rgba(142, 215, 255, .04) 48%, rgba(142, 215, 255, .04) 52%, transparent 53%),
        linear-gradient(-45deg, transparent 47%, rgba(142, 215, 255, .035) 48%, rgba(142, 215, 255, .035) 52%, transparent 53%) !important;
    background-color: #0f1722 !important;
}

html[data-bs-theme="dark"] .attendance-shell .message,
html[data-theme="dark"] .attendance-shell .message {
    color: var(--ux-text) !important;
    border-color: var(--ux-border) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
}

html[data-bs-theme="dark"] .attendance-shell .message.in,
html[data-theme="dark"] .attendance-shell .message.in {
    background: #182537 !important;
}

html[data-bs-theme="dark"] .attendance-shell .message.out,
html[data-theme="dark"] .attendance-shell .message.out,
html[data-bs-theme="dark"] .attendance-shell .message.bot,
html[data-theme="dark"] .attendance-shell .message.bot {
    background: #102f45 !important;
    border-color: #285a76 !important;
}

html[data-bs-theme="dark"] .attendance-shell .message.system,
html[data-theme="dark"] .attendance-shell .message.system {
    background: #3a321e !important;
    border-color: #685830 !important;
    color: #f5df9b !important;
}

html[data-bs-theme="dark"] .attendance-shell .message.system.system-event,
html[data-theme="dark"] .attendance-shell .message.system.system-event {
    background: rgba(30, 41, 59, .78) !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"] .attendance-shell .message.system.system-event p,
html[data-theme="dark"] .attendance-shell .message.system.system-event p {
    color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .attendance-shell .automation-chip,
html[data-theme="dark"] .attendance-shell .automation-chip {
    border-color: rgba(96, 165, 250, .38) !important;
    color: #bfdbfe !important;
    background: rgba(30, 64, 175, .22) !important;
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic,
html[data-theme="dark"] .attendance-shell .automation-diagnostic {
    background: #101a27;
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-decision,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-decision {
    background: #102237;
    border-color: #315c78;
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-decision header,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-decision header {
    border-color: transparent;
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-decision p,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-decision p,
html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-decision span,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-decision span,
html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-decision small,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-decision small {
    color: var(--ux-muted);
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-decision strong,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-decision strong {
    color: var(--ux-text);
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-facts section,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-facts section {
    background: rgba(15, 23, 42, .36);
    border-color: rgba(148, 163, 184, .22);
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-facts section > span,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-facts section > span,
html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-facts dd,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-facts dd {
    color: var(--ux-text);
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-facts dt,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-facts dt {
    color: var(--ux-muted);
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-actions a,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-actions a {
    color: #bfdbfe;
    background: rgba(59, 130, 246, .18);
    border-color: rgba(147, 197, 253, .24);
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-actions a:hover,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-actions a:hover {
    color: #e0f2fe;
    background: rgba(59, 130, 246, .28);
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-summary div,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-summary div,
html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-checks article,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-checks article,
html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-events div,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-events div {
    background: #121d2b;
    border-color: var(--ux-border);
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-summary b,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-summary b,
html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-checks strong,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-checks strong,
html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-events strong,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-events strong {
    color: var(--ux-text);
}

html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-checks p,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-checks p,
html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-summary span,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-summary span,
html[data-bs-theme="dark"] .attendance-shell .automation-diagnostic-events span,
html[data-theme="dark"] .attendance-shell .automation-diagnostic-events span {
    color: var(--ux-muted);
}

html[data-bs-theme="dark"] .attendance-shell .inbox-header h1,
html[data-theme="dark"] .attendance-shell .inbox-header h1,
html[data-bs-theme="dark"] .attendance-shell .contact-trigger h2,
html[data-theme="dark"] .attendance-shell .contact-trigger h2,
html[data-bs-theme="dark"] .attendance-shell .ticket strong,
html[data-theme="dark"] .attendance-shell .ticket strong,
html[data-bs-theme="dark"] .attendance-shell .message p,
html[data-theme="dark"] .attendance-shell .message p {
    color: var(--ux-text) !important;
}

html[data-bs-theme="dark"] .attendance-shell .inbox-header span,
html[data-theme="dark"] .attendance-shell .inbox-header span,
html[data-bs-theme="dark"] .attendance-shell .contact-trigger span,
html[data-theme="dark"] .attendance-shell .contact-trigger span,
html[data-bs-theme="dark"] .attendance-shell .ticket span,
html[data-theme="dark"] .attendance-shell .ticket span,
html[data-bs-theme="dark"] .attendance-shell .ticket aside span,
html[data-theme="dark"] .attendance-shell .ticket aside span,
html[data-bs-theme="dark"] .attendance-shell .ticket aside small,
html[data-theme="dark"] .attendance-shell .ticket aside small,
html[data-bs-theme="dark"] .attendance-shell .message small,
html[data-theme="dark"] .attendance-shell .message small {
    color: var(--ux-muted) !important;
}

html[data-bs-theme="dark"] .attendance-shell .mode-action,
html[data-theme="dark"] .attendance-shell .mode-action,
html[data-bs-theme="dark"] .attendance-shell .icon-btn,
html[data-theme="dark"] .attendance-shell .icon-btn,
html[data-bs-theme="dark"] .attendance-shell .transfer-actions summary,
html[data-theme="dark"] .attendance-shell .transfer-actions summary {
    background: #172434 !important;
    border-color: var(--ux-border) !important;
    color: var(--ux-muted) !important;
}

html[data-bs-theme="dark"] .attendance-shell .mode-action.on,
html[data-theme="dark"] .attendance-shell .mode-action.on,
html[data-bs-theme="dark"] .attendance-shell .mode-action:hover,
html[data-theme="dark"] .attendance-shell .mode-action:hover,
html[data-bs-theme="dark"] .attendance-shell .tabs a.on,
html[data-theme="dark"] .attendance-shell .tabs a.on {
    color: #bfe5ff !important;
    background: #102237 !important;
    border-color: #315c78 !important;
}

html[data-bs-theme="dark"] .attendance-shell .inbox-tools select,
html[data-theme="dark"] .attendance-shell .inbox-tools select,
html[data-bs-theme="dark"] .attendance-shell .filters input,
html[data-theme="dark"] .attendance-shell .filters input,
html[data-bs-theme="dark"] .attendance-shell .filters select,
html[data-theme="dark"] .attendance-shell .filters select,
html[data-bs-theme="dark"] .attendance-shell .tag-row input,
html[data-theme="dark"] .attendance-shell .tag-row input,
html[data-bs-theme="dark"] .attendance-shell .tag-row select,
html[data-theme="dark"] .attendance-shell .tag-row select,
html[data-bs-theme="dark"] .attendance-shell .composer textarea,
html[data-theme="dark"] .attendance-shell .composer textarea {
    background: #0f1b29 !important;
    border-color: var(--ux-border-strong) !important;
    color: var(--ux-text) !important;
}

html[data-bs-theme="dark"] .attendance-shell .quick-reply-popover,
html[data-theme="dark"] .attendance-shell .quick-reply-popover,
html[data-bs-theme="dark"] .attendance-shell .quick-reply-option,
html[data-theme="dark"] .attendance-shell .quick-reply-option {
    background: #101a27 !important;
    border-color: var(--ux-border) !important;
    color: var(--ux-text) !important;
}

html[data-bs-theme="dark"] .attendance-shell .quick-reply-popover header,
html[data-theme="dark"] .attendance-shell .quick-reply-popover header {
    border-color: var(--ux-border) !important;
}

html[data-bs-theme="dark"] .attendance-shell .quick-reply-option:hover,
html[data-theme="dark"] .attendance-shell .quick-reply-option:hover,
html[data-bs-theme="dark"] .attendance-shell .quick-reply-option.is-active,
html[data-theme="dark"] .attendance-shell .quick-reply-option.is-active {
    background: #172434 !important;
    border-color: var(--ux-border-strong) !important;
}

html[data-bs-theme="dark"] .attendance-shell .quick-reply-option.is-active,
html[data-theme="dark"] .attendance-shell .quick-reply-option.is-active {
    box-shadow: inset 3px 0 0 var(--urbix-primary, #2f78aa) !important;
}

html[data-bs-theme="dark"] .attendance-bridge-alert,
html[data-theme="dark"] .attendance-bridge-alert {
    color: #fecaca !important;
    background: rgba(127, 29, 29, .24) !important;
    border-color: rgba(248, 113, 113, .36) !important;
}

html[data-bs-theme="dark"] .attendance-bridge-alert span,
html[data-theme="dark"] .attendance-bridge-alert span {
    color: #fecaca !important;
}

html[data-bs-theme="dark"] .attendance-bridge-alert code,
html[data-theme="dark"] .attendance-bridge-alert code {
    color: var(--ux-text) !important;
    background: rgba(255, 255, 255, .08) !important;
}

html[data-bs-theme="dark"] .attendance-bridge-alert button,
html[data-theme="dark"] .attendance-bridge-alert button {
    color: #fecaca !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(248, 113, 113, .28) !important;
}

html[data-bs-theme="dark"] .attendance-bridge-alert a,
html[data-theme="dark"] .attendance-bridge-alert a {
    color: #fecaca !important;
}

html[data-bs-theme="dark"] .attendance-bridge-alert.is-session_disconnected,
html[data-theme="dark"] .attendance-bridge-alert.is-session_disconnected {
    color: #fde68a !important;
    background: rgba(146, 64, 14, .22) !important;
    border-color: rgba(251, 191, 36, .36) !important;
}

html[data-bs-theme="dark"] .attendance-bridge-alert.is-session_disconnected span,
html[data-theme="dark"] .attendance-bridge-alert.is-session_disconnected span,
html[data-bs-theme="dark"] .attendance-bridge-alert.is-session_disconnected a,
html[data-theme="dark"] .attendance-bridge-alert.is-session_disconnected a,
html[data-bs-theme="dark"] .attendance-bridge-alert.is-session_disconnected button,
html[data-theme="dark"] .attendance-bridge-alert.is-session_disconnected button {
    color: #fde68a !important;
}

html[data-bs-theme="dark"] .attendance-shell .quick-reply-popover strong,
html[data-theme="dark"] .attendance-shell .quick-reply-popover strong,
html[data-bs-theme="dark"] .attendance-shell .quick-reply-option strong,
html[data-theme="dark"] .attendance-shell .quick-reply-option strong {
    color: var(--ux-text) !important;
}

html[data-bs-theme="dark"] .attendance-shell .quick-reply-popover small,
html[data-theme="dark"] .attendance-shell .quick-reply-popover small,
html[data-bs-theme="dark"] .attendance-shell .quick-reply-option span,
html[data-theme="dark"] .attendance-shell .quick-reply-option span {
    color: var(--ux-muted) !important;
}

html[data-bs-theme="dark"] .attendance-shell .message-media,
html[data-theme="dark"] .attendance-shell .message-media,
html[data-bs-theme="dark"] .attendance-shell .message-video,
html[data-theme="dark"] .attendance-shell .message-video,
html[data-bs-theme="dark"] .attendance-shell .message-audio,
html[data-theme="dark"] .attendance-shell .message-audio,
html[data-bs-theme="dark"] .attendance-shell .message-file,
html[data-theme="dark"] .attendance-shell .message-file {
    background: #101a27 !important;
    border-color: var(--ux-border) !important;
    color: var(--ux-text) !important;
}

.qr-modal,
.diagnostics-modal,
.crm-client-modal,
.crm-plan-modal,
.tenant-user-modal,
.tenant-queue-modal,
.quick-reply-modal,
.task-modal,
.deal-modal,
.finance-modal,
.confirm-modal,
.transfer-modal,
.preview-modal,
.contact-create-modal,
.contact-ticket-modal,
.contact-history-modal,
.contact-detail-modal,
.contact-photo-modal,
.contact-edit-modal {
    align-items: flex-start;
    justify-items: center;
    padding-top: 88px;
    padding-bottom: 28px;
    overflow: auto;
}

.qr-dialog,
.diagnostics-dialog,
.crm-client-dialog,
.crm-plan-dialog,
.tenant-user-dialog,
.tenant-queue-dialog,
.quick-reply-dialog,
.task-dialog,
.deal-dialog,
.finance-dialog,
.confirm-dialog,
.transfer-dialog,
.preview-dialog,
.contact-create-dialog,
.contact-ticket-dialog,
.contact-history-dialog,
.contact-detail-dialog,
.contact-photo-dialog,
.contact-edit-dialog {
    max-height: calc(100vh - 116px);
}

@media (max-width: 760px) {
    .qr-modal,
    .diagnostics-modal,
    .crm-client-modal,
    .crm-plan-modal,
    .tenant-user-modal,
    .tenant-queue-modal,
    .quick-reply-modal,
    .task-modal,
    .deal-modal,
    .finance-modal,
    .confirm-modal,
    .transfer-modal,
    .preview-modal,
    .contact-create-modal,
    .contact-ticket-modal,
    .contact-history-modal,
    .contact-detail-modal,
    .contact-photo-modal,
    .contact-edit-modal {
        padding-top: 20px;
    }

    .qr-dialog,
    .diagnostics-dialog,
    .crm-client-dialog,
    .crm-plan-dialog,
    .tenant-user-dialog,
    .tenant-queue-dialog,
    .quick-reply-dialog,
    .task-dialog,
    .deal-dialog,
    .finance-dialog,
    .confirm-dialog,
    .transfer-dialog,
    .preview-dialog,
    .contact-create-dialog,
    .contact-ticket-dialog,
    .contact-history-dialog,
    .contact-detail-dialog,
    .contact-photo-dialog,
    .contact-edit-dialog {
        max-height: calc(100vh - 40px);
    }
}

/* Shared Urbix modal primitives for migrated dialogs. */
.urbix-modal-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    box-shadow: var(--shadow-md);
}

.urbix-modal-dialog > header,
.urbix-modal-dialog > footer {
    border-color: var(--line);
}

.urbix-modal-dialog > header :is(span, small),
.urbix-modal-dialog > footer :is(span, small),
.urbix-modal-dialog .muted {
    color: var(--muted);
}

.urbix-modal-dialog :is(input:not([type="checkbox"]), select, textarea) {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--text);
}

.urbix-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.urbix-form-grid label {
    display: grid;
    gap: 7px;
}

.urbix-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.urbix-summary-grid > * {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    color: var(--text);
}

.urbix-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.urbix-check-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    color: var(--text);
}

.urbix-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.urbix-panel > header,
.urbix-table-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.urbix-panel > header h2,
.urbix-panel > header p {
    margin: 0;
}

.urbix-panel > header p,
.urbix-table-caption,
.urbix-muted {
    color: var(--muted);
}

.urbix-table {
    display: grid;
    gap: 8px;
}

.urbix-table-row {
    display: grid;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
}

.urbix-table-row:not(.urbix-table-head):hover {
    background: var(--surface-soft);
}

.urbix-table-head {
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.urbix-table-row strong {
    color: var(--text);
}

.urbix-table-row small,
.urbix-table-row .muted {
    color: var(--muted);
}

.urbix-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-weight: 700;
}

.urbix-alert-success {
    background: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .35);
    color: #166534;
}

.urbix-form {
    display: grid;
    gap: 14px;
}

.urbix-form-section {
    display: grid;
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.urbix-form-section h2,
.urbix-form-section p {
    margin: 0;
}

.urbix-form-section p {
    color: var(--muted);
}

.urbix-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.urbix-field-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.urbix-form label,
.urbix-form-field {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-weight: 800;
}

.urbix-form label > span,
.urbix-form-field > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.urbix-form :is(input:not([type="checkbox"]), select, textarea) {
    width: 100%;
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--text);
}

.urbix-form :is(input:not([type="checkbox"]), select, textarea):focus {
    border-color: var(--brand);
    outline: 2px solid rgba(47, 120, 170, .2);
}

.urbix-form-check {
    display: flex !important;
    align-items: center;
    gap: 9px;
    color: var(--text);
}

.urbix-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.urbix-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.urbix-search-form input {
    min-width: min(230px, 42vw);
}

html[data-bs-theme="dark"] .urbix-panel,
html[data-theme="dark"] .urbix-panel,
html[data-bs-theme="dark"] .urbix-table-row,
html[data-theme="dark"] .urbix-table-row,
html[data-bs-theme="dark"] .urbix-alert,
html[data-theme="dark"] .urbix-alert,
html[data-bs-theme="dark"] .urbix-form-section,
html[data-theme="dark"] .urbix-form-section {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.urbix-table-head, .urbix-table-row:not(.urbix-table-head):hover),
html[data-theme="dark"] :is(.urbix-table-head, .urbix-table-row:not(.urbix-table-head):hover) {
    background: var(--surface-soft) !important;
}

html[data-bs-theme="dark"] .urbix-alert-success,
html[data-theme="dark"] .urbix-alert-success {
    background: rgba(34, 197, 94, .14) !important;
    border-color: rgba(34, 197, 94, .34) !important;
    color: #bbf7d0 !important;
}

@media (max-width: 760px) {
    .urbix-form-grid,
    .urbix-summary-grid {
        grid-template-columns: 1fr;
    }

    .urbix-panel > header,
    .urbix-table-toolbar,
    .urbix-search-form,
    .urbix-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .urbix-field-grid,
    .urbix-field-grid.cols-3 {
        grid-template-columns: 1fr;
    }

    .urbix-search-form input {
        min-width: 0;
    }
}

/* Urbix modal standardization: keep legacy dialogs visually consistent in every theme. */
html[data-bs-theme="dark"] :is(
    .urbix-modal-dialog,
    .qr-dialog,
    .diagnostics-dialog,
    .crm-client-dialog,
    .crm-plan-dialog,
    .tenant-user-dialog,
    .tenant-queue-dialog,
    .finance-dialog,
    .confirm-dialog,
    .transfer-dialog,
    .preview-dialog,
    .contact-create-dialog,
    .contact-ticket-dialog,
    .contact-history-dialog,
    .contact-detail-dialog,
    .contact-photo-dialog,
    .contact-edit-dialog,
    .urbix-modal-card
),
html[data-theme="dark"] :is(
    .urbix-modal-dialog,
    .qr-dialog,
    .diagnostics-dialog,
    .crm-client-dialog,
    .crm-plan-dialog,
    .tenant-user-dialog,
    .tenant-queue-dialog,
    .finance-dialog,
    .confirm-dialog,
    .transfer-dialog,
    .preview-dialog,
    .contact-create-dialog,
    .contact-ticket-dialog,
    .contact-history-dialog,
    .contact-detail-dialog,
    .contact-photo-dialog,
    .contact-edit-dialog,
    .urbix-modal-card
) {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .36) !important;
}

html[data-bs-theme="dark"] :is(
    .urbix-modal-dialog,
    .qr-dialog,
    .diagnostics-dialog,
    .crm-client-dialog,
    .crm-plan-dialog,
    .tenant-user-dialog,
    .tenant-queue-dialog,
    .finance-dialog,
    .confirm-dialog,
    .transfer-dialog,
    .preview-dialog,
    .contact-create-dialog,
    .contact-ticket-dialog,
    .contact-history-dialog,
    .contact-detail-dialog,
    .contact-photo-dialog,
    .contact-edit-dialog,
    .urbix-modal-card
) :is(header, footer),
html[data-theme="dark"] :is(
    .urbix-modal-dialog,
    .qr-dialog,
    .diagnostics-dialog,
    .crm-client-dialog,
    .crm-plan-dialog,
    .tenant-user-dialog,
    .tenant-queue-dialog,
    .finance-dialog,
    .confirm-dialog,
    .transfer-dialog,
    .preview-dialog,
    .contact-create-dialog,
    .contact-ticket-dialog,
    .contact-history-dialog,
    .contact-detail-dialog,
    .contact-photo-dialog,
    .contact-edit-dialog,
    .urbix-modal-card
) :is(header, footer) {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(
    .contact-edit-summary div,
    .contact-history-list a,
    .diagnostics-summary div,
    .diagnostics-log article,
    .preview-message,
    .preview-messages,
    .crm-plan-checks label,
    .permission-group,
    .access-profile-context-grid article
),
html[data-theme="dark"] :is(
    .contact-edit-summary div,
    .contact-history-list a,
    .diagnostics-summary div,
    .diagnostics-log article,
    .preview-message,
    .preview-messages,
    .crm-plan-checks label,
    .permission-group,
    .access-profile-context-grid article
) {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(
    .contact-edit-summary div span,
    .contact-history-list a small,
    .crm-plan-checks label,
    .permission-group small,
    .access-profile-context-grid p
),
html[data-theme="dark"] :is(
    .contact-edit-summary div span,
    .contact-history-list a small,
    .crm-plan-checks label,
    .permission-group small,
    .access-profile-context-grid p
) {
    color: var(--muted) !important;
}

html[data-bs-theme="dark"] :is(
    .contact-edit-summary div b,
    .contact-history-list a strong
),
html[data-theme="dark"] :is(
    .contact-edit-summary div b,
    .contact-history-list a strong
) {
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.connection-form .form-band, .connection-form .form-actions),
html[data-theme="dark"] :is(.connection-form .form-band, .connection-form .form-actions) {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] .connection-form :is(label, h2),
html[data-theme="dark"] .connection-form :is(label, h2) {
    color: var(--text) !important;
}

html[data-bs-theme="dark"] .connection-form .muted,
html[data-theme="dark"] .connection-form .muted {
    color: var(--muted) !important;
}

html[data-bs-theme="dark"] .connection-queue-picker-list,
html[data-theme="dark"] .connection-queue-picker-list {
    border-color: rgba(148, 163, 184, .24);
    background: rgba(15, 23, 42, .42);
}

html[data-bs-theme="dark"] .connection-queue-picker-list .crm-client-check,
html[data-theme="dark"] .connection-queue-picker-list .crm-client-check {
    border-color: rgba(148, 163, 184, .22);
    background: rgba(15, 23, 42, .62);
}

html[data-bs-theme="dark"] .connection-queue-picker-list .crm-client-check:hover,
html[data-theme="dark"] .connection-queue-picker-list .crm-client-check:hover {
    border-color: rgba(125, 211, 252, .45);
    background: rgba(14, 116, 144, .18);
}

html[data-bs-theme="dark"] :is(.connection-bridge-health, .connection-triage-summary, .connection-triage-checklist, .connection-triage-checklist-grid article, .connection-queue-diagnostics, .connection-queue-diagnostic, .connection-queue-stale-warning, .connection-queue-mode, .triage-flow-steps article, .queue-operation-guide article, .queue-readiness-checklist article),
html[data-theme="dark"] :is(.connection-bridge-health, .connection-triage-summary, .connection-triage-checklist, .connection-triage-checklist-grid article, .connection-queue-diagnostics, .connection-queue-diagnostic, .connection-queue-stale-warning, .connection-queue-mode, .triage-flow-steps article, .queue-operation-guide article, .queue-readiness-checklist article) {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.connection-bridge-health span, .connection-bridge-health-meta, .connection-triage-summary span, .connection-triage-summary small, .connection-triage-checklist-head span, .connection-triage-checklist-grid small, .connection-queue-diagnostics-head span, .connection-queue-diagnostic span, .connection-queue-diagnostic small, .connection-queue-stale-warning span, .triage-flow-steps span, .queue-operation-guide span, .queue-readiness-checklist small),
html[data-theme="dark"] :is(.connection-bridge-health span, .connection-bridge-health-meta, .connection-triage-summary span, .connection-triage-summary small, .connection-triage-checklist-head span, .connection-triage-checklist-grid small, .connection-queue-diagnostics-head span, .connection-queue-diagnostic span, .connection-queue-diagnostic small, .connection-queue-stale-warning span, .triage-flow-steps span, .queue-operation-guide span, .queue-readiness-checklist small) {
    color: var(--muted) !important;
}

html[data-bs-theme="dark"] :is(.connection-bridge-health strong, .connection-triage-summary strong, .connection-triage-checklist-head b, .connection-triage-checklist-grid strong, .connection-queue-diagnostics-head b, .connection-queue-diagnostic strong, .connection-queue-stale-warning strong, .queue-operation-guide b, .queue-readiness-checklist strong),
html[data-theme="dark"] :is(.connection-bridge-health strong, .connection-triage-summary strong, .connection-triage-checklist-head b, .connection-triage-checklist-grid strong, .connection-queue-diagnostics-head b, .connection-queue-diagnostic strong, .connection-queue-stale-warning strong, .queue-operation-guide b, .queue-readiness-checklist strong) {
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.qr-dialog, .diagnostics-dialog, .crm-client-dialog, .crm-plan-dialog, .tenant-user-dialog, .tenant-queue-dialog, .finance-dialog, .confirm-dialog, .transfer-dialog, .preview-dialog, .contact-create-dialog, .contact-ticket-dialog, .contact-history-dialog, .contact-edit-dialog, .urbix-modal-card) :is(header, footer, .qr-help, .qr-code-area, .diagnostics-summary, .diagnostics-log, .contact-edit-summary, .preview-messages),
html[data-theme="dark"] :is(.qr-dialog, .diagnostics-dialog, .crm-client-dialog, .crm-plan-dialog, .tenant-user-dialog, .tenant-queue-dialog, .finance-dialog, .confirm-dialog, .transfer-dialog, .preview-dialog, .contact-create-dialog, .contact-ticket-dialog, .contact-history-dialog, .contact-edit-dialog, .urbix-modal-card) :is(header, footer, .qr-help, .qr-code-area, .diagnostics-summary, .diagnostics-log, .contact-edit-summary, .preview-messages) {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.qr-dialog, .diagnostics-dialog, .crm-client-dialog, .crm-plan-dialog, .tenant-user-dialog, .tenant-queue-dialog, .finance-dialog, .confirm-dialog, .transfer-dialog, .preview-dialog, .contact-create-dialog, .contact-ticket-dialog, .contact-history-dialog, .contact-edit-dialog, .urbix-modal-card) :is(input:not([type="checkbox"]), select, textarea),
html[data-theme="dark"] :is(.qr-dialog, .diagnostics-dialog, .crm-client-dialog, .crm-plan-dialog, .tenant-user-dialog, .tenant-queue-dialog, .finance-dialog, .confirm-dialog, .transfer-dialog, .preview-dialog, .contact-create-dialog, .contact-ticket-dialog, .contact-history-dialog, .contact-edit-dialog, .urbix-modal-card) :is(input:not([type="checkbox"]), select, textarea) {
    background: #0f1b29 !important;
    border-color: var(--line-strong) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.qr-dialog, .diagnostics-dialog, .crm-client-dialog, .crm-plan-dialog, .tenant-user-dialog, .tenant-queue-dialog, .finance-dialog, .confirm-dialog, .transfer-dialog, .preview-dialog, .contact-create-dialog, .contact-ticket-dialog, .contact-history-dialog, .contact-edit-dialog, .urbix-modal-card) :is(h2, h3, strong, b, label),
html[data-theme="dark"] :is(.qr-dialog, .diagnostics-dialog, .crm-client-dialog, .crm-plan-dialog, .tenant-user-dialog, .tenant-queue-dialog, .finance-dialog, .confirm-dialog, .transfer-dialog, .preview-dialog, .contact-create-dialog, .contact-ticket-dialog, .contact-history-dialog, .contact-edit-dialog, .urbix-modal-card) :is(h2, h3, strong, b, label) {
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.qr-dialog, .diagnostics-dialog, .crm-client-dialog, .crm-plan-dialog, .tenant-user-dialog, .tenant-queue-dialog, .finance-dialog, .confirm-dialog, .transfer-dialog, .preview-dialog, .contact-create-dialog, .contact-ticket-dialog, .contact-history-dialog, .contact-edit-dialog, .urbix-modal-card) :is(p, small, span, label > span),
html[data-theme="dark"] :is(.qr-dialog, .diagnostics-dialog, .crm-client-dialog, .crm-plan-dialog, .tenant-user-dialog, .tenant-queue-dialog, .finance-dialog, .confirm-dialog, .transfer-dialog, .preview-dialog, .contact-create-dialog, .contact-ticket-dialog, .contact-history-dialog, .contact-edit-dialog, .urbix-modal-card) :is(p, small, span, label > span) {
    color: var(--muted) !important;
}

html[data-bs-theme="dark"] :is(.contact-history-list a, .diagnostics-summary div, .diagnostics-log article, .preview-message),
html[data-theme="dark"] :is(.contact-history-list a, .diagnostics-summary div, .diagnostics-log article, .preview-message) {
    background: #101a27 !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.contact-detail-card, .contact-detail-summary div, .contact-detail-notes),
html[data-theme="dark"] :is(.contact-detail-card, .contact-detail-summary div, .contact-detail-notes) {
    background: var(--surface-soft) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.contact-detail-card strong, .contact-detail-summary b, .contact-detail-notes p),
html[data-theme="dark"] :is(.contact-detail-card strong, .contact-detail-summary b, .contact-detail-notes p) {
    color: var(--text) !important;
}

html[data-bs-theme="dark"] :is(.qr-close, .contact-create-dialog header button, .contact-ticket-dialog header button, .contact-history-dialog header button, .contact-detail-dialog header button, .contact-photo-dialog header button, .contact-edit-dialog header button, .crm-client-dialog header button, .crm-plan-dialog header button, .finance-dialog header button, .transfer-dialog header button, .preview-dialog button),
html[data-theme="dark"] :is(.qr-close, .contact-create-dialog header button, .contact-ticket-dialog header button, .contact-history-dialog header button, .contact-detail-dialog header button, .contact-photo-dialog header button, .contact-edit-dialog header button, .crm-client-dialog header button, .crm-plan-dialog header button, .finance-dialog header button, .transfer-dialog header button, .preview-dialog button) {
    background: #172434 !important;
    border-color: var(--line-strong) !important;
    color: var(--text) !important;
}

/* Regra final para evitar que a cascata do template deixe botões Salvar apagados. */
.urbix-modal-card footer button.urbix-modal-save.btn.btn-primary,
.urbix-modal-dialog footer button.urbix-modal-save.btn.btn-primary,
.crm-client-dialog footer button.urbix-modal-save.btn.btn-primary,
.crm-plan-dialog footer button.urbix-modal-save.btn.btn-primary,
.tenant-user-dialog footer button.urbix-modal-save.btn.btn-primary,
.tenant-queue-dialog footer button.urbix-modal-save.btn.btn-primary,
.quick-reply-dialog footer button.urbix-modal-save.btn.btn-primary,
.finance-dialog footer button.urbix-modal-save.btn.btn-primary,
.access-profile-dialog footer button.urbix-modal-save.btn.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 162px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    color: #ffffff !important;
    background: var(--urbix-primary, #2f78aa) !important;
    border: 1px solid var(--urbix-primary, #2f78aa) !important;
    border-radius: 8px !important;
    opacity: 1 !important;
    box-shadow: 0 10px 22px rgba(47, 120, 170, .22) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.urbix-modal-card footer button.urbix-modal-save.btn.btn-primary:hover,
.urbix-modal-card footer button.urbix-modal-save.btn.btn-primary:focus-visible,
.urbix-modal-dialog footer button.urbix-modal-save.btn.btn-primary:hover,
.urbix-modal-dialog footer button.urbix-modal-save.btn.btn-primary:focus-visible,
.crm-client-dialog footer button.urbix-modal-save.btn.btn-primary:hover,
.crm-client-dialog footer button.urbix-modal-save.btn.btn-primary:focus-visible,
.crm-plan-dialog footer button.urbix-modal-save.btn.btn-primary:hover,
.crm-plan-dialog footer button.urbix-modal-save.btn.btn-primary:focus-visible,
.tenant-user-dialog footer button.urbix-modal-save.btn.btn-primary:hover,
.tenant-user-dialog footer button.urbix-modal-save.btn.btn-primary:focus-visible,
.tenant-queue-dialog footer button.urbix-modal-save.btn.btn-primary:hover,
.tenant-queue-dialog footer button.urbix-modal-save.btn.btn-primary:focus-visible,
.quick-reply-dialog footer button.urbix-modal-save.btn.btn-primary:hover,
.quick-reply-dialog footer button.urbix-modal-save.btn.btn-primary:focus-visible,
.finance-dialog footer button.urbix-modal-save.btn.btn-primary:hover,
.finance-dialog footer button.urbix-modal-save.btn.btn-primary:focus-visible,
.access-profile-dialog footer button.urbix-modal-save.btn.btn-primary:hover,
.access-profile-dialog footer button.urbix-modal-save.btn.btn-primary:focus-visible {
    color: #ffffff !important;
    background: var(--urbix-primary-dark, #1f5f89) !important;
    border-color: var(--urbix-primary-dark, #1f5f89) !important;
}

.urbix-modal-card footer button.urbix-modal-save.btn.btn-primary svg,
.urbix-modal-dialog footer button.urbix-modal-save.btn.btn-primary svg,
.crm-client-dialog footer button.urbix-modal-save.btn.btn-primary svg,
.crm-plan-dialog footer button.urbix-modal-save.btn.btn-primary svg,
.tenant-user-dialog footer button.urbix-modal-save.btn.btn-primary svg,
.tenant-queue-dialog footer button.urbix-modal-save.btn.btn-primary svg,
.quick-reply-dialog footer button.urbix-modal-save.btn.btn-primary svg,
.finance-dialog footer button.urbix-modal-save.btn.btn-primary svg,
.access-profile-dialog footer button.urbix-modal-save.btn.btn-primary svg {
    width: 16px !important;
    height: 16px !important;
    color: #ffffff !important;
    stroke: currentColor !important;
}

.tasks-row {
    grid-template-columns: minmax(220px, 1.6fr) minmax(130px, .8fr) 140px 110px 120px 96px;
}

.tasks-filter,
.kanban-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.tasks-filter input,
.tasks-filter select,
.kanban-filter input,
.kanban-filter select {
    min-height: 38px;
    padding: 0 10px;
    border-color: var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}

.tasks-filter input,
.kanban-filter input {
    min-width: 190px;
}

.task-priority {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.task-priority-low {
    color: #166534;
    background: #dcfce7;
}

.task-priority-normal {
    color: #1d4ed8;
    background: #dbeafe;
}

.task-priority-high {
    color: #991b1b;
    background: #fee2e2;
}

.kanban-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 2fr) auto;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.kanban-toolbar h2,
.kanban-toolbar p {
    margin: 0;
}

.kanban-toolbar p {
    color: var(--muted);
}

.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    gap: 16px;
    overflow-x: auto;
    padding: 8px 0 12px;
}

.kanban-column {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 260px;
    min-height: 124px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--stage-color, var(--urbix-primary));
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.kanban-page .crm-clients-metrics {
    gap: 14px;
    margin-bottom: 16px;
}

.kanban-column > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.kanban-column > header div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-column > header span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--stage-color, var(--urbix-primary));
}

.kanban-column > header b {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    color: var(--text);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.kanban-column-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    color: var(--muted);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
}

.kanban-column-summary span {
    color: var(--text);
    font-weight: 900;
}

.kanban-cards {
    display: grid;
    gap: 10px;
}

.kanban-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.kanban-card + .kanban-card {
    margin-top: 2px;
}

.tasks-calendar-panel {
    margin-top: 16px;
}

.tasks-calendar-panel.is-loading {
    opacity: .68;
    pointer-events: none;
}

.tasks-calendar-panel > header,
.tasks-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tasks-calendar-panel h2,
.tasks-calendar-panel p {
    margin: 0;
}

.tasks-calendar-panel p {
    color: var(--muted);
}

.tasks-calendar-nav .btn {
    min-height: 34px;
    padding: 0 12px;
}

.tasks-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 14px;
    overflow-x: auto;
}

.tasks-calendar-weekday {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.tasks-calendar-day {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 118px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.tasks-calendar-day[data-calendar-day] {
    cursor: pointer;
}

.tasks-calendar-day[data-calendar-day]:hover {
    border-color: var(--urbix-primary);
    background: color-mix(in srgb, var(--surface) 82%, var(--urbix-primary) 18%);
}

.tasks-calendar-day.is-muted {
    opacity: .58;
}

.tasks-calendar-day.is-today {
    border-color: var(--urbix-primary);
    box-shadow: inset 0 0 0 1px var(--urbix-primary);
}

.tasks-calendar-day strong {
    color: var(--text);
    font-size: 13px;
}

.tasks-calendar-day div {
    display: grid;
    gap: 5px;
}

.tasks-calendar-item {
    display: block;
    overflow: hidden;
    width: 100%;
    min-height: 22px;
    padding: 4px 7px;
    border: 0;
    border-radius: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
}

button.tasks-calendar-item {
    cursor: pointer;
}

.kanban-card strong {
    color: var(--text);
    font-size: 14px;
}

.kanban-card span {
    color: var(--urbix-primary);
    font-weight: 900;
}

.kanban-card small {
    color: var(--muted);
}

.kanban-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kanban-card footer form,
.kanban-card footer select {
    min-width: 0;
}

.kanban-card footer select {
    max-width: 150px;
    min-height: 34px;
    padding: 0 8px;
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
    font-size: 12px;
}

@media (max-width: 960px) {
    .tasks-row {
        grid-template-columns: minmax(180px, 1fr) 120px 120px;
    }

    .tasks-row span:nth-child(2),
    .tasks-row span:nth-child(4),
    .tasks-row span:nth-child(5) {
        display: none;
    }

    .kanban-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* Correção final do popover de respostas rápidas: ele fica dentro do composer,
   então precisa vencer regras antigas de botões do campo de envio. */
.attendance-shell .composer .quick-reply-popover button.quick-reply-option {
    color: #173f5f !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #dce7f1 !important;
    box-shadow: none !important;
}

.attendance-shell .composer .quick-reply-popover button.quick-reply-option:hover {
    color: #0f2f48 !important;
    background: #f4f8fb !important;
    background-color: #f4f8fb !important;
    border-color: #b9d8ed !important;
}

.attendance-shell .composer .quick-reply-popover button.quick-reply-option.is-active {
    color: #0f2f48 !important;
    background: #edf7fd !important;
    background-color: #edf7fd !important;
    border-color: #8fc5e4 !important;
    box-shadow: inset 3px 0 0 #2f78aa !important;
}

.attendance-shell .composer .quick-reply-popover button.quick-reply-option strong {
    color: #173f5f !important;
}

.attendance-shell .composer .quick-reply-popover button.quick-reply-option span {
    color: #526173 !important;
}

.attendance-shell .composer .quick-reply-popover button.quick-reply-option code {
    color: #2b6f9f !important;
    background: #f7fbff !important;
    background-color: #f7fbff !important;
    border-color: #d8e2ec !important;
}

.attendance-shell .message > .message-meta-legacy {
    display: none;
}

.attendance-shell .message > .message-meta,
.preview-message > span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    color: #4f6b86;
    font-size: 11px;
    font-weight: 700;
}

.attendance-shell .message p {
    margin-right: 54px;
}

.attendance-shell .message-footer,
.preview-message .message-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-height: 16px;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1;
}

.attendance-shell .message-footer time,
.preview-message .message-footer time {
    white-space: nowrap;
}

.attendance-shell .message-footer .message-status,
.preview-message .message-footer .message-status {
    margin-left: 0;
    color: #0b6c9f;
    font-size: 10px;
    font-weight: 800;
}

.attendance-shell .ticket aside time {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

html[data-bs-theme="dark"] .attendance-shell .message > .message-meta,
html[data-theme="dark"] .attendance-shell .message > .message-meta,
html[data-bs-theme="dark"] .preview-message > span,
html[data-theme="dark"] .preview-message > span,
html[data-bs-theme="dark"] .attendance-shell .message-footer,
html[data-theme="dark"] .attendance-shell .message-footer,
html[data-bs-theme="dark"] .preview-message .message-footer,
html[data-theme="dark"] .preview-message .message-footer,
html[data-bs-theme="dark"] .attendance-shell .ticket aside time,
html[data-theme="dark"] .attendance-shell .ticket aside time {
    color: #94a3b8;
}

.attendance-shell .message {
    position: relative;
    width: fit-content;
    min-width: 92px;
    max-width: min(520px, 64%);
    padding: 8px 10px 5px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
}

.attendance-shell .message.out,
.attendance-shell .message.bot {
    margin-left: auto;
    border-top-right-radius: 2px;
}

.attendance-shell .message.in {
    margin-right: auto;
    border-top-left-radius: 2px;
}

.attendance-shell .message.in::before,
.attendance-shell .message.out::before,
.attendance-shell .message.bot::before {
    content: "";
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}

.attendance-shell .message.in::before {
    left: -7px;
    border-top: 8px solid #ffffff;
    border-left: 8px solid transparent;
}

.attendance-shell .message.out::before,
.attendance-shell .message.bot::before {
    right: -7px;
    border-top: 8px solid #dff4ff;
    border-right: 8px solid transparent;
}

.attendance-shell .message p {
    margin: 0 42px 0 0;
    line-height: 1.35;
}

.attendance-shell .message-signature {
    font-weight: 800;
}

.attendance-shell .message.has-image-media,
.attendance-shell .message.has-video-media,
.attendance-shell .message.has-audio-media {
    max-width: min(384px, 86%);
    padding: 4px 5px 4px;
}

.attendance-shell .message.has-image-media .message-media {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 0;
    border-radius: 8px;
}

.attendance-shell .message.has-video-media .message-video {
    width: min(360px, 100%);
    margin-top: 0;
    border-radius: 8px;
}

.attendance-shell .message.has-audio-media {
    max-width: min(344px, 86%);
    padding: 7px 8px 5px;
}

.attendance-shell .message.has-audio-media .message-audio {
    width: min(320px, 100%);
    margin-top: 0;
}

.attendance-shell .message.has-image-media .message-media img {
    width: auto;
    max-width: min(320px, 100%);
    max-height: 360px;
    object-fit: contain;
}

.attendance-shell .message.has-image-media p,
.attendance-shell .message.has-video-media p,
.attendance-shell .message.has-audio-media p {
    max-width: 360px;
    margin: 5px 64px 0 2px;
}

.attendance-shell .message-footer {
    min-height: 13px;
    margin-top: 1px;
    font-size: 10px;
}

.attendance-shell .message-footer .message-status {
    font-size: 9px;
}

.attendance-shell .message > .message-meta {
    margin-bottom: 4px;
}

.attendance-shell .message.is-automation > .message-meta {
    gap: 4px;
    margin: 0 28px 5px 2px;
    color: #2b6f9f;
    font-weight: 400;
}

.attendance-shell .message.is-automation.has-image-media > .message-meta,
.attendance-shell .message.is-automation.has-video-media > .message-meta,
.attendance-shell .message.is-automation.has-audio-media > .message-meta {
    margin: 0 28px 4px 3px;
}

.attendance-shell .message-menu-trigger {
    position: absolute;
    top: 3px;
    right: 5px;
    display: none;
    width: 22px;
    height: 22px;
    color: #64748b;
    background: rgba(255, 255, 255, .72);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    line-height: 1;
}

.attendance-shell .message-menu-trigger::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
}

.attendance-shell .message.in .message-menu-trigger {
    right: 5px;
}

.attendance-shell .message:hover .message-menu-trigger {
    display: grid;
    place-items: center;
}

.message-actions-menu {
    position: fixed;
    z-index: 5000;
    display: grid;
    min-width: 180px;
    padding: 6px 0;
    background: #ffffff;
    border: 1px solid #d8e2ec;
    border-radius: 6px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .18);
}

.message-actions-menu[hidden] {
    display: none;
}

.message-actions-menu button {
    width: 100%;
    padding: 10px 16px;
    color: #1f2937;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
}

.message-actions-menu button:hover {
    background: #f1f5f9;
}

.message-reaction-picker {
    display: flex;
    gap: 2px;
    padding: 4px 8px;
    border-top: 1px solid #eef2f6;
    border-bottom: 1px solid #eef2f6;
}

.message-reaction-picker button {
    width: 28px;
    padding: 6px 0;
    text-align: center;
}

.message-quote {
    display: grid;
    gap: 2px;
    margin: 0 0 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, .58);
    border-left: 3px solid #2f95c7;
    border-radius: 6px;
}

.message-quote strong,
.message-quote span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-quote strong {
    color: #174d73;
    font-size: 11px;
}

.message-quote span,
.message-forwarded {
    color: #64748b;
    font-size: 11px;
}

.message-forwarded {
    margin-bottom: 4px;
    font-style: italic;
}

.message-reactions {
    position: absolute;
    right: 8px;
    bottom: -12px;
    display: inline-flex;
    gap: 2px;
    padding: 2px 5px;
    background: #ffffff;
    border: 1px solid #d8e2ec;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
    font-size: 12px;
}

.composer-reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    padding: 7px 9px;
    background: #edf7fd;
    border-left: 3px solid #2f95c7;
    border-radius: 7px;
}

.composer-reply-preview[hidden] {
    display: none;
}

.composer-reply-preview div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.composer-reply-preview strong,
.composer-reply-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-reply-preview strong {
    color: #174d73;
    font-size: 11px;
}

.composer-reply-preview span {
    color: #64748b;
    font-size: 12px;
}

.composer-reply-preview button {
    color: #64748b;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 18px;
}

.message-forward-modal,
.message-edit-modal,
.message-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
}

.message-forward-modal[hidden] {
    display: none;
}

.message-edit-modal[hidden] {
    display: none;
}

.message-delete-modal[hidden] {
    display: none;
}

.message-forward-dialog,
.message-edit-dialog,
.message-delete-dialog {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    overflow: hidden;
}

.message-edit-preview {
    display: flex;
    justify-content: flex-end;
    padding: 22px 18px;
    background: rgba(239, 236, 229, .72);
}

.message-edit-dialog textarea {
    width: 100%;
    min-height: 104px;
    resize: vertical;
}

.message-delete-body {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.message-delete-body > p {
    margin: 0;
    color: #4b5563;
}

.message-forward-preview {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px;
    color: #4b5563;
    background: #f8fafc;
    border: 1px solid #d8e2ec;
    border-radius: 8px;
}

.attendance-shell .message.is-deleted p {
    color: #64748b;
    font-style: italic;
}

.message-deleted-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: #4b5563;
    font-size: 12px;
}

.message-deleted-notice::after {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid #ef4444;
    border-radius: 999px;
    background: linear-gradient(135deg, transparent 42%, #ef4444 43%, #ef4444 57%, transparent 58%);
}

html[data-bs-theme="dark"] .attendance-shell .message.in::before,
html[data-theme="dark"] .attendance-shell .message.in::before {
    border-top-color: #182537;
}

html[data-bs-theme="dark"] .attendance-shell .message.out::before,
html[data-theme="dark"] .attendance-shell .message.out::before,
html[data-bs-theme="dark"] .attendance-shell .message.bot::before,
html[data-theme="dark"] .attendance-shell .message.bot::before {
    border-top-color: #102f45;
}

html[data-bs-theme="dark"] .message-actions-menu,
html[data-theme="dark"] .message-actions-menu,
html[data-bs-theme="dark"] .message-reactions,
html[data-theme="dark"] .message-reactions {
    color: var(--ux-text);
    background: #132033;
    border-color: var(--ux-border);
}

html[data-bs-theme="dark"] .message-actions-menu button,
html[data-theme="dark"] .message-actions-menu button {
    color: var(--ux-text);
}

html[data-bs-theme="dark"] .message-actions-menu button:hover,
html[data-theme="dark"] .message-actions-menu button:hover {
    background: #1c2d43;
}

html[data-bs-theme="dark"] .message-quote,
html[data-theme="dark"] .message-quote,
html[data-bs-theme="dark"] .composer-reply-preview,
html[data-theme="dark"] .composer-reply-preview,
html[data-bs-theme="dark"] .message-forward-preview,
html[data-theme="dark"] .message-forward-preview {
    color: var(--ux-text);
    background: #14263a;
    border-color: #285a76;
}

html[data-bs-theme="dark"] .message-delete-body > p,
html[data-theme="dark"] .message-delete-body > p,
html[data-bs-theme="dark"] .message-deleted-notice,
html[data-theme="dark"] .message-deleted-notice {
    color: var(--ux-muted);
}

@media (max-width: 760px) {
    .attendance-shell .message {
        max-width: 86%;
    }
}