/* Shared theme inspired by the charcoal and lavender visual reference. */
:root {
    --bg: #1d2430;
    --surface: #2b323f;
    --surface-alt: #343b49;
    --input-bg: #343b49;
    --border: #414957;
    --border-strong: #596171;
    --text: #f8f9fc;
    --text-muted: #b7c0d0;
    --primary: #8850cf;
    --primary-hover: #7440b8;
    --primary-dark: #c6a4f1;
    --focus: #c6a4f1;
    --cp-bg: var(--bg);
    --cp-sidebar: #222936;
    --cp-header: #242b38;
    --cp-card: var(--surface);
    --cp-card-elevated: var(--surface-alt);
    --cp-card-hover: #3a4050;
    --cp-border: var(--border);
    --cp-border-strong: var(--border-strong);
    --cp-border-active: #a179d4;
    --cp-primary: #a678df;
    --cp-primary-light: #dec9f8;
    --cp-primary-dark: #7440b8;
    --cp-primary-bg: #40334f;
    --cp-text: var(--text);
    --cp-text-secondary: var(--text-muted);
    --cp-text-muted: #aab4c5;
    --cp-radius-control: 7px;
    --cp-radius-card: 12px;
    --shadow: 0 16px 40px rgb(10 15 24 / 15%);
}
body.app-body, body.auth-body {
    background: radial-gradient(ellipse at 0 0, #383f4b 0, transparent 55%), url('../img/caller-waves.svg') left top / cover fixed, var(--bg);
}
.auth-body {
    --auth-bg: var(--bg);
    --auth-line: var(--border);
    --auth-line-strong: var(--border-strong);
    --auth-input: var(--input-bg);
    --auth-text: var(--text);
    --auth-text-soft: var(--text-muted);
    --auth-text-muted: #aab4c5;
}
.auth-body::before, .auth-canvas { display: none; }
.workspace { background: transparent; }
.sidebar { background: rgb(34 41 54 / 96%); }
.workspace-header { background: rgb(36 43 56 / 88%); }
.nav a { padding-block: 11px; font-weight: 500; }
.nav a.active { background: var(--primary); border-color: transparent; color: #fff; border-radius: 24px; }
.nav a.active:hover { background: var(--primary-hover); }
.page-head h1 { font-size: clamp(28px, 3vw, 36px); font-weight: 600; letter-spacing: -.025em; }
.card, .agent-card { background: rgb(43 50 63 / 94%); }
.card-head { padding-block: 20px; }
.btn-primary, .auth-card .auth-submit {
    background: #e6d9f8;
    border-color: #e6d9f8;
    color: #653899;
    font-weight: 600;
    box-shadow: none;
}
.btn-primary:hover, .auth-card .auth-submit:hover {
    background: #f0e8fc;
    border-color: #f0e8fc;
    color: #572c89;
}
.btn-primary:active { background: #d5bced; border-color: #d5bced; color: #572c89; }
.field input[type="text"], .field input[type="tel"], .field input[type="date"],
.field input[type="number"], .field input[type="password"], .field input[type="datetime-local"],
.field select, .field textarea, .inline-form input[type="date"] { background: var(--input-bg); }
.field input::placeholder, .field textarea::placeholder { color: #aab4c5; }
.stats { background: rgb(43 50 63 / 76%); }
.stat-icon, .summary-stats .stat-icon { background: rgb(166 120 223 / 12%); color: var(--primary-dark); }
.summary-range-form { border-radius: 24px; }
.table th { background: #272e3b; }
.footer { border-top: 1px solid var(--border); background: transparent; }
.wallet-balance { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 7px 14px; border: 1px solid #8e6caf; border-radius: 9px; background: #40334f; color: #f0e8fc; white-space: nowrap; }
.wallet-balance:hover { color: #fff; background: #4b3b60; text-decoration: none; }
.wallet-balance svg { width: 22px; height: 22px; }
.wallet-balance small { display: block; font-size: 10px; color: #dec9f8; }
.wallet-balance strong { display: block; font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wallet-balance.is-empty { border-color: var(--orange); }
.auth-shell { max-width: 480px; }
.auth-card { padding: 40px 36px 30px; border-radius: 12px; background: rgb(43 50 63 / 92%); box-shadow: var(--shadow); }
.auth-app-name { font-size: 28px; color: var(--text); }
.auth-tagline { color: var(--text-muted); }
.auth-card .auth-input, .auth-card .field input[type="text"].auth-input,
.auth-card .field input[type="password"].auth-input { height: 52px; min-height: 52px; background: var(--input-bg); }
.auth-field-icon { height: 52px; }
.auth-card .auth-submit { min-height: 52px; }
.auth-pill { border-radius: 20px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.portsip-qr-setup { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; margin-bottom: 28px; }
.portsip-qr { width: min(304px, 100%); padding: 12px; border-radius: 12px; background: #fff; }
.portsip-qr[hidden] { display: none; }
.portsip-qr img { display: block; width: 280px; height: auto; max-width: 100%; aspect-ratio: 1; image-rendering: pixelated; }
.portsip-qr-copy { max-width: 560px; }
.portsip-qr-copy h3 { margin: 0 0 10px; font-size: 20px; }
.portsip-qr-copy p { color: var(--text-muted); }
.portsip-qr-copy .btn { margin: 4px 0; white-space: normal; text-align: center; }
@media (max-width: 720px) {
    .sidebar { background: #222936; }
    .auth-card { padding: 32px 24px 26px; }
    .mobile-shortcuts a.active { background: var(--primary); border-color: transparent; color: #fff; }
    .top-bar .server-clock { order: 0; }
    .top-bar .wallet-balance { order: 1; margin-left: auto; }
    .top-bar .user-menu { order: 2; }
    .top-bar .service-pill { order: 3; }
    .top-bar .sip-status { order: 4; }
    .top-bar .minute-pill { order: 5; }
    .portsip-qr-setup { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .portsip-qr { justify-self: center; }
}

/* Agent overview: compact cards and a single availability summary. */
.agents-overview .page-head { margin-bottom: 22px; }
.ag-stats { margin-bottom: 22px; }
.agents-overview .ag-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 340px)); align-items: stretch; gap: 16px; }
.agents-overview .ag-card { display: flex; flex-direction: column; min-width: 0; padding: 16px; border-radius: 10px; background: var(--surface); box-shadow: none; }
.agents-overview .ag-card-top { gap: 10px; min-height: 80px; }
.agents-overview .ag-avatar { border: 1px solid var(--primary); border-radius: 9px; background: #40334f; color: var(--primary-dark); }
.agents-overview .ag-name { margin: 0 0 4px; font-size: 16px; }
.agents-overview .ag-sub { line-height: 1.5; }
.agents-overview .ag-status { padding: 5px 9px; letter-spacing: .025em; }
.agents-overview .ag-off { background: var(--surface-alt); color: var(--text-muted); }
.agents-overview .ag-row { grid-template-columns: 102px minmax(0, 1fr); gap: 10px; min-height: 48px; padding: 9px 0; }
.agents-overview .ag-row dt { color: var(--text-muted); }
.agents-overview .ag-val-text { font-family: var(--font-ui); }
.agents-overview .ag-icon-btn { border-radius: 7px; }
.agents-overview .ag-card-actions { gap: 8px; margin-top: 16px; }
.agents-overview .ag-card-actions .btn { min-height: 36px; padding: 7px 10px; font-size: 12px; white-space: normal; line-height: 1.4; }
.agents-overview .ag-portsip { flex: 1; max-width: 106px; }
.agents-overview .ag-edit { flex: 1; }
.ag-phone-details { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.ag-phone-details summary { cursor: pointer; width: fit-content; }
.ag-phone-details[open] summary { margin-bottom: 8px; color: var(--primary-dark); }
.ag-delete { margin-top: 12px; text-align: right; }
.ag-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 380px; padding: 28px; border: 1px dashed var(--primary); border-radius: 10px; color: var(--text); text-align: center; background: radial-gradient(ellipse at center, rgb(136 80 207 / 14%), transparent 70%); transition: background-color .15s, border-color .15s; }
.ag-add:hover { color: var(--text); text-decoration: none; background-color: rgb(136 80 207 / 8%); border-color: var(--primary-dark); }
.ag-add-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border: 1px solid var(--primary); border-radius: 50%; color: var(--primary-dark); background: var(--bg); }
.ag-add-icon svg { width: 22px; height: 22px; }
.ag-add strong { font-size: 16px; }
.ag-add > span:last-child { max-width: 230px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.ag-add-full { border-color: var(--border-strong); background: transparent; }
.ag-add-full .ag-add-icon { border-color: var(--border-strong); color: var(--text-muted); }
.ag-empty { margin: 0 0 20px; }
@media (max-width: 720px) {
    .agents-overview .ag-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .agents-overview .ag-stats .stat { padding: 14px 12px; min-width: 0; }
    .agents-overview .ag-stats .stat:nth-child(2) { border-right: 0; }
    .agents-overview .ag-stats .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .agents-overview .ag-grid { grid-template-columns: minmax(0, 1fr); }
    .agents-overview .ag-card { padding: 14px; }
    .agents-overview .ag-add { min-height: 220px; }
}
@media (max-width: 360px) {
    .agents-overview .ag-card-top { flex-wrap: wrap; }
    .agents-overview .ag-status { margin-left: 56px; }
    .agents-overview .ag-row { grid-template-columns: 86px minmax(0, 1fr); }
    .agents-overview .ag-card-actions { flex-wrap: wrap; }
    .agents-overview .ag-stats .stat { gap: 8px; }
}

.ag-agency { display: block; margin-top: 4px; color: var(--primary-dark); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A shared pager for large lists, including independent histories. */
.list-pagination { flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 22px 0; }
.pagination-summary { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pagination-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.pagination-controls .btn { min-width: 36px; min-height: 36px; text-align: center; }
.pagination-controls .pagination-current { background: var(--primary); color: #fff; border-color: var(--primary); cursor: default; }
.pagination-gap { padding: 0 2px; color: var(--text-muted); }
@media (max-width: 720px) {
    .list-pagination { justify-content: center; flex-direction: column; }
    .pagination-controls .btn { padding-inline: 10px; }
}

/* Caller originals: subtle silhouettes and lavender signal details. */
.caller-icon .icon-wash { fill: currentColor; fill-opacity: .10; stroke: none; }
.caller-icon .icon-accent { stroke: var(--accent, #a77df4); }
.caller-icon .icon-dot { fill: var(--accent, #a77df4); stroke: none; }
.nav .caller-icon { width: 23px; height: 23px; flex: 0 0 23px; }
.nav a:hover .icon-wash, .nav a.active .icon-wash { fill-opacity: .20; }
.stat-icon .caller-icon { width: 25px; height: 25px; }

.access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 315px), 1fr)); gap: 18px; }
.access-card { padding: 20px; min-width: 0; }
.access-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.access-head > div { min-width: 0; }
.access-head h2 { font-size: 16px; margin: 3px 0 0; overflow-wrap: anywhere; }
.access-agency { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.access-emblem { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgb(167 125 244 / .12); color: #c3a6f4; flex: 0 0 44px; }
.access-emblem svg { width: 27px; height: 27px; }
.access-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 12px; }
.access-user { overflow-wrap: anywhere; margin: 5px 0 14px; }
.access-card > input { width: 100%; min-width: 0; margin-top: 5px; font-family: var(--font-mono, monospace); }
.access-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.access-manage { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.access-manage summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.access-manage .form { margin: 14px 0; gap: 8px; }
.access-manage input { width: 100%; min-width: 0; }
.access-feedback { min-height: 1.3em; margin: 12px 0 0; overflow-wrap: anywhere; }

/* Account panel: identity, balance and personal preferences. */
.user-menu > summary { list-style: none; user-select: none; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu[open] > summary { outline: 3px solid rgb(167 125 244 / .18); outline-offset: 3px; }
.user-menu-dropdown { display: none; width: min(330px, calc(100vw - 32px)); max-height: min(660px, calc(100dvh - 100px)); overflow-y: auto; padding: 0; margin-top: 10px; border-radius: 18px; border: 1px solid #565062; box-shadow: 0 18px 65px rgb(0 0 0 / .35); background: #2a303b; z-index: 120; }
.user-menu[open] .user-menu-dropdown { display: block; }
.account-identity { display: flex; gap: 12px; align-items: center; padding: 16px; background: linear-gradient(135deg, rgb(167 125 244 / .12), transparent 85%); }
.account-identity > div { min-width: 0; }
.account-initial { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 15px; background: #443651; border: 1px solid #805db3; color: #d5bdfa; font-size: 20px; font-weight: 600; }
.account-identity strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.account-username { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.account-role { display: inline-block; margin-top: 6px; padding: 3px 7px; border-radius: 6px; font-size: 10px; color: #d1b9f4; background: rgb(167 125 244 / .12); }
.account-balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 12px 10px; padding: 12px; border-radius: 12px; border: 1px solid #52445f; background: #39303f; color: var(--text); }
.account-balance > span { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.account-balance strong { white-space: nowrap; font-size: 17px; }
.account-balance svg { width: 21px; height: 21px; flex: 0 0 21px; }
.account-links { display: grid; gap: 3px; padding: 0 10px 10px; }
.account-links a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.account-links a:hover, .account-links a:focus-visible { background: rgb(167 125 244 / .10); }
.account-links a > svg { width: 24px; height: 24px; flex: 0 0 24px; color: #b8a4d0; }
.account-links a > span { min-width: 0; font-size: 12px; }
.account-links small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.account-links .account-arrow { margin-left: auto; color: var(--muted); font-size: 20px; }
.account-footer { padding: 12px 18px; border-top: 1px solid var(--border); background: rgb(0 0 0 / .08); }
.account-timezone { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.account-timezone svg { width: 14px; height: 14px; }
.user-menu-dropdown .account-footer form { margin: 0; }
.account-logout { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 0; border: 0; background: transparent; color: #ebbdc7; font: inherit; font-size: 12px; cursor: pointer; }
.account-logout:hover { color: #fff; }
@media (max-width: 720px) { .user-menu-dropdown { max-height: calc(100dvh - 160px); } }

.nav .caller-icon { width: 24px; height: 24px; flex-basis: 24px; }
.nav a.active { --accent: #f0e3ff; }
.nav a.active .caller-icon { color: #fff; }
.nav-soon > span { flex: 1; }
.access-card input { height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--input-bg); color: var(--text); }
.access-card input::placeholder { color: var(--text-muted); font-size: 12px; }
@media (max-width: 720px) { .user-menu-dropdown { max-height: calc(100dvh - 225px); } }

.brand.is-logo-only{display:flex;justify-content:center}.brand.is-logo-only .brand-mark{width:100%;max-width:210px;height:62px;border-radius:0;object-fit:contain}.brand-preview{object-fit:contain;border-radius:12px}.brand-fields{display:grid;gap:16px}

.user-menu-section{padding:12px 18px}.user-menu-langs{display:flex;gap:6px}.user-menu-lang{border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);padding:7px 12px;cursor:pointer}.user-menu-lang.is-current{background:var(--accent);color:#fff}.diagnostic-overview{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.diagnostic-overview h2{margin:0;font-size:18px}.diagnostic-overview p{margin:8px 0 0}.diagnostic-check[hidden]{display:none}

.user-menu-timezone{display:grid;gap:8px;min-width:0}.user-menu-timezone label{font-size:12px;font-weight:600}.user-menu-timezone select{width:100%;min-width:0;max-width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}.user-menu-timezone small{font-size:11px;color:var(--text-muted);line-height:1.4}.user-menu-timezone button{justify-self:start}

.portsip-readiness p{margin:8px 0 12px}.portsip-readiness-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.portsip-readiness-actions form{margin:0}.portsip-readiness[hidden]{display:none}

.account-preferences { margin: 0 10px 8px; }
.account-preferences > summary { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 10px; cursor: pointer; list-style: none; font-size: 12px; }
.account-preferences > summary::-webkit-details-marker { display: none; }
.account-preferences > summary:hover, .account-preferences > summary:focus-visible { background: rgb(167 125 244 / .10); }
.account-preferences > summary > svg { width: 24px; height: 24px; color: #b8a4d0; }
.account-preferences-arrow { margin-left: auto; font-size: 20px; transition: transform .15s; }
.account-preferences[open] .account-preferences-arrow { transform: rotate(90deg); }
.account-preferences .user-menu-section { padding: 10px; }
.account-preferences .user-menu-label { display: block; margin-bottom: 8px; }