:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --text: #172033;
    --muted: #687386;
    --line: #e5eaf2;
    --brand: #0f6bff;
    --brand2: #062b70;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 1px solid var(--line);
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
}

    button:disabled {
        cursor: not-allowed;
    }

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
    background: #ffffff;
    color: var(--text);
}

    input:focus,
    textarea:focus,
    select:focus {
        border-color: #8cb4ff;
        outline: 3px solid rgba(15, 107, 255, 0.1);
    }

textarea {
    min-height: 100px;
}

label {
    display: block;
    margin: 12px 0 6px;
    font-weight: 800;
}

h1 {
    margin: 0 0 8px;
    font-size: 34px;
}

h2 {
    margin: 0 0 12px;
}

code {
    border-radius: 6px;
    background: #eef3ff;
    padding: 2px 6px;
}

/* =========================================================
   GENERAL APPLICATION SHELL
   ========================================================= */

.app-shell {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    min-height: 100vh;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 22px;
    background: #07172f;
    color: #ffffff;
}

    .side-nav a {
        color: #dbe7ff;
        text-decoration: none;
        padding: 12px 14px;
        border-radius: 12px;
    }

        .side-nav a.active,
        .side-nav a:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
        }

.primary-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-spacer {
    flex: 1;
}

.content {
    min-width: 0;
    padding: 24px 28px;
}

.auth-content {
    min-height: 100vh;
    padding: 28px;
    background: radial-gradient( circle at top left, #eaf2ff 0, #f6f8fc 38%, #eef3f9 100% );
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    margin-bottom: 26px;
    padding: 13px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
}

    .topbar span {
        display: block;
        color: #aeb9ca;
        font-size: 12px;
    }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-identity strong,
.topbar-identity span {
    display: block;
}

.logout-button {
    border-color: #d9e0ea;
    background: #ffffff;
    color: #334155;
    white-space: nowrap;
}

    .logout-button:hover {
        border-color: #f3b3b3;
        background: #fff5f5;
        color: #b91c1c;
    }

/* =========================================================
   BRANDING
   ========================================================= */

.brand {
    display: block;
    margin-bottom: 22px;
}

.brand-logo {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
    padding: 8px;
    border-radius: 12px;
    background: #ffffff;
}

.brand > span {
    display: block;
    margin: 8px 0 0 10px;
    color: #aeb9ca;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #10b981, #0f6bff);
    font-weight: 800;
}

.engine-card {
    margin-top: 18px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
}

    .engine-card strong,
    .engine-card span {
        display: block;
    }

    .engine-card.simulation {
        background: #493415;
    }

    .engine-card.native {
        background: #123e31;
    }

/* =========================================================
   COMMON COMPONENTS
   ========================================================= */

.lead {
    max-width: 940px;
    color: var(--muted);
    font-size: 17px;
}

.grid {
    display: grid;
    gap: 16px;
    margin: 18px 0;
}

.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 18px;
}

.narrow {
    max-width: 560px;
}

.stat-card,
.panel {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 10px 25px rgba(22, 35, 58, 0.04);
}

    .stat-card span,
    .stat-card small,
    .task-row span,
    .task-row small,
    .list-row small {
        color: var(--muted);
    }

    .stat-card strong {
        display: block;
        margin: 8px 0;
        font-size: 34px;
    }

.hero-card,
.page-title {
    margin-bottom: 18px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff, #eef5ff);
}

.eyebrow {
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

    .eyebrow.light {
        color: #8fb8ff;
    }

.pill {
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    background: #eef5ff;
    color: var(--brand2);
    padding: 7px 12px;
    font-size: 13px;
}

.primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.wide {
    width: 100%;
    margin-top: 20px;
}

.toolbar {
    display: flex;
    gap: 10px;
    margin: 18px 0;
}

.timeline {
    display: grid;
    gap: 14px;
}

    .timeline div,
    .list-row,
    .task-row {
        border-top: 1px solid var(--line);
        padding: 14px 0;
    }

.task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

    .task-row strong,
    .task-row span {
        display: block;
    }

.status {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #ffe2a8;
    border-radius: 12px;
    background: #fff8e6;
}

.error-status {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #9f1239;
}

.success-status {
    border-color: #bbf7d0;
    background: #effcf4;
    color: #166534;
}

.empty-state {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #ffffff;
}

.list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.list-item {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
}

/* =========================================================
   TABLES
   ========================================================= */

.table-card {
    margin-top: 18px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

th {
    background: #f8fbff;
    color: #4b5b73;
}

/* =========================================================
   LOGIN
   ========================================================= */

.login-only-shell {
    min-height: calc(100vh - 56px);
    max-width: 1320px;
    margin: 0 auto;
}

.login-shell {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    gap: 24px;
    min-height: calc(100vh - 150px);
}

.login-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px;
    border-radius: 26px;
    background: linear-gradient(145deg, #07172f, #19396f);
    color: #ffffff;
}

.login-logo {
    width: min(520px, 100%);
    margin-bottom: 28px;
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
}

.login-brand-panel h1 {
    font-size: 42px;
    line-height: 1.1;
}

.login-brand-panel p {
    color: #dbe7ff;
    font-size: 17px;
    line-height: 1.7;
}

.login-form {
    align-self: center;
    width: 100%;
    max-width: 620px;
    padding: 34px;
}

.login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-intro {
    margin: 0 0 22px;
    color: var(--muted);
    line-height: 1.6;
}

.login-submit {
    min-height: 48px;
}

.login-benefits {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    color: #e7efff;
}

    .login-benefits span {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .login-benefits span::before {
            content: "✓";
            display: grid;
            place-items: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            color: #7ef0b5;
            font-weight: 900;
        }

.mode-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 13px 16px;
    border-radius: 14px;
}

    .mode-banner strong,
    .mode-banner span {
        display: block;
    }

    .mode-banner.warning {
        border: 1px solid #f4d27d;
        background: #fff6df;
        color: #6b4b00;
    }

    .mode-banner.success {
        border: 1px solid #9fe0b8;
        background: #e9fbf1;
        color: #155c34;
    }

.login-brand-panel .mode-banner {
    margin-top: 24px;
}

/* =========================================================
   ROUTE LOADING
   ========================================================= */

.route-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 100vh;
    background: #f5f7fb;
    color: var(--brand2);
}

    .route-loading img {
        width: 76px;
        height: 76px;
        object-fit: contain;
        border-radius: 20px;
        box-shadow: 0 16px 40px rgba(6, 43, 112, 0.16);
    }

/* =========================================================
   REGISTRATION STATUS
   ========================================================= */

.registration-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
}

    .registration-dot.registered {
        background: #22c55e;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
    }

    .registration-dot.registering {
        background: #f59e0b;
    }

    .registration-dot.failed {
        background: #ef4444;
    }

    .registration-dot.offline {
        background: #94a3b8;
    }

/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient( 135deg, #ffffff 0, #f3f7ff 60%, #e9f2ff 100% );
    box-shadow: 0 18px 46px rgba(26, 52, 94, 0.06);
}

    .dashboard-welcome h1 {
        font-size: 32px;
    }

.dashboard-presence {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 330px;
    padding: 14px 16px;
    border: 1px solid #dce7f7;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

    .dashboard-presence div {
        flex: 1;
    }

    .dashboard-presence strong,
    .dashboard-presence small {
        display: block;
    }

    .dashboard-presence small {
        margin-top: 3px;
        color: var(--muted);
    }

.dashboard-warning {
    margin: 14px 0;
    padding: 12px 15px;
    border: 1px solid #f5d58b;
    border-radius: 14px;
    background: #fff8e7;
    color: #714f00;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.dashboard-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 150px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #ffffff;
    text-align: left;
    box-shadow: 0 10px 28px rgba(15, 34, 65, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .dashboard-metric:hover {
        border-color: #bcd2f5;
        box-shadow: 0 18px 36px rgba(15, 34, 65, 0.09);
        transform: translateY(-2px);
    }

    .dashboard-metric .metric-icon {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        margin-bottom: 12px;
        border-radius: 12px;
        background: #edf4ff;
        color: #0f5bd4;
        font-size: 20px;
    }

    .dashboard-metric small {
        color: var(--muted);
        font-weight: 700;
    }

    .dashboard-metric strong {
        margin: 5px 0;
        color: var(--text);
        font-size: 24px;
    }

    .dashboard-metric em {
        color: var(--muted);
        font-size: 12px;
        font-style: normal;
    }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
    gap: 18px;
}

    .dashboard-grid > .panel {
        margin: 0;
    }

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .section-heading h2 {
        font-size: 21px;
    }

    .section-heading .eyebrow {
        margin: 0 0 5px;
    }

    .section-heading button {
        padding: 8px 11px;
        font-size: 12px;
    }

.dashboard-list {
    display: grid;
}

.dashboard-list-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

    .dashboard-list-row:first-child {
        border-top: 0;
    }

    .dashboard-list-row strong,
    .dashboard-list-row small {
        display: block;
    }

    .dashboard-list-row small {
        margin-top: 4px;
        color: var(--muted);
    }

.priority-indicator {
    width: 10px;
    height: 42px;
    border-radius: 999px;
    background: #94a3b8;
}

    .priority-indicator.high {
        background: #ef4444;
    }

    .priority-indicator.normal {
        background: #3b82f6;
    }

    .priority-indicator.low {
        background: #22c55e;
    }

.status-chip {
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #234b88;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.compact-empty {
    padding: 22px;
    border: 1px dashed #cbd8e8;
    border-radius: 16px;
    background: #fafcff;
    text-align: center;
}

    .compact-empty strong,
    .compact-empty span {
        display: block;
    }

    .compact-empty span {
        margin-top: 5px;
        color: var(--muted);
    }

.quick-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .quick-action-grid button {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        padding: 14px;
        text-align: left;
    }

        .quick-action-grid button > span {
            display: grid;
            grid-row: 1 / 3;
            place-items: center;
            width: 32px;
            height: 32px;
            border-radius: 10px;
            background: #edf4ff;
            color: #0f5bd4;
            font-size: 17px;
        }

    .quick-action-grid strong,
    .quick-action-grid small {
        display: block;
    }

    .quick-action-grid small {
        margin-top: 2px;
        color: var(--muted);
        font-weight: 500;
    }

.meeting-date-box {
    display: grid;
    place-items: center;
    align-content: center;
    width: 48px;
    height: 52px;
    border-radius: 12px;
    background: #edf4ff;
    color: #173f78;
}

    .meeting-date-box strong {
        font-size: 19px;
        line-height: 1;
    }

    .meeting-date-box small {
        margin-top: 3px;
        font-size: 10px;
        text-transform: uppercase;
    }

.online-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

    .online-contact-grid button {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 9px;
        align-items: center;
        gap: 9px;
        padding: 10px;
        text-align: left;
    }

        .online-contact-grid button span strong,
        .online-contact-grid button span small {
            display: block;
        }

        .online-contact-grid button span small {
            margin-top: 2px;
            color: var(--muted);
            font-weight: 500;
        }

        .online-contact-grid button i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
        }

.contact-avatar {
    display: grid !important;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8f0ff;
    color: #173f78;
    font-weight: 800;
}

/* =========================================================
   CALLS PAGE
   ========================================================= */

.calls-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.call-status-summary {
    flex-shrink: 0;
    text-align: right;
}

    .call-status-summary strong {
        margin-left: 8px;
    }

    .call-status-summary small {
        display: block;
        margin-top: 4px;
        color: var(--muted);
    }

.phone-workspace {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(300px, 1fr) minmax(320px, 1.05fr);
    align-items: stretch;
    gap: 18px;
}

    .phone-workspace > .panel {
        min-width: 0;
        min-height: 600px;
    }

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .panel-heading h2 {
        margin-bottom: 3px;
    }

    .panel-heading small {
        color: var(--muted);
    }

.text-button {
    padding: 7px 10px;
    border-color: transparent;
    background: transparent;
    color: var(--brand);
    font-size: 12px;
}

    .text-button:hover:not(:disabled) {
        background: #eef5ff;
    }

    .text-button.danger {
        color: #c83c3c;
    }

        .text-button.danger:hover:not(:disabled) {
            background: #fff0f0;
        }

    .text-button:disabled {
        opacity: 0.45;
    }

/* =========================================================
   CALL HISTORY
   ========================================================= */

.recents-panel {
    min-width: 0;
    overflow: hidden;
}

.history-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

    .history-filters .search-box {
        min-width: 0;
        margin: 0;
    }

    .history-filters input,
    .history-filters select {
        height: 42px;
    }

.call-history-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

.recent-call {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px 82px;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 78px;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid #e5eaf2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .recent-call:hover {
        border-color: #bfd0e5;
        box-shadow: 0 8px 22px rgba(17, 43, 73, 0.08);
        transform: translateY(-1px);
    }

.recent-call-main {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .recent-call-main:hover,
    .recent-call-main:focus {
        background: transparent;
    }

    .recent-call-main:focus-visible {
        outline: 2px solid #2f80ed;
        outline-offset: 3px;
    }

.recent-call .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    margin: 0;
    border-radius: 50%;
    background: #eaf1fb;
    color: #173b65;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
}

.recent-call-details {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 4px;
    overflow: hidden;
}

.recent-call-name {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #172033;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-call-meta {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 5px;
    overflow: hidden;
    color: #687386;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

    .recent-call-meta span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .recent-call-meta span:first-child {
            flex-shrink: 1;
        }

        .recent-call-meta span:last-child {
            flex-shrink: 0;
        }

.meta-separator {
    flex: 0 0 auto;
    color: #a1aaba;
}

.duration-label {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #8792a2;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

    .call-direction.outgoing {
        background: #e9f8f0;
        color: #16865c;
    }

    .call-direction.incoming {
        background: #eaf2ff;
        color: #2563b9;
    }

    .call-direction.missed {
        background: #fff0f0;
        color: #d14343;
    }

.history-actions {
    display: grid;
    grid-template-columns: repeat(2, 36px);
    align-items: center;
    justify-content: end;
    width: 82px;
    min-width: 82px;
    gap: 8px;
}

.history-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: #ffffff;
    color: #36465c;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .history-action:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    .history-action.call-again {
        border-color: #c8e8db;
        background: #f5fcf9;
        color: #13795b;
    }

        .history-action.call-again:hover:not(:disabled) {
            border-color: #86cfb5;
            background: #e8f8f1;
        }

    .history-action.delete-history {
        border-color: #f0d2d2;
        background: #fffafa;
        color: #c83c3c;
    }

        .history-action.delete-history:hover:not(:disabled) {
            border-color: #efaaaa;
            background: #fff0f0;
        }

    .history-action:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
    }

.empty-call-history {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

    .empty-call-history h3 {
        margin: 8px 0 4px;
        color: var(--text);
    }

/* =========================================================
   DIALER
   ========================================================= */

.dialer-panel {
    min-width: 0;
}

.number-display {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
}

    .number-display button {
        padding: 0;
        font-size: 20px;
    }

.dialpad {
    display: grid;
    grid-template-columns: repeat(3, 90px);
    gap: 10px;
    margin: 18px 0;
}

    .dialpad button {
        height: 62px;
    }

.desktop-dialpad {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

    .desktop-dialpad button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 68px;
    }

        .desktop-dialpad button:hover {
            border-color: #b8cae3;
            background: #f6f9fe;
        }

        .desktop-dialpad button strong {
            font-size: 22px;
        }

        .desktop-dialpad button small {
            min-height: 12px;
            color: var(--muted);
            font-size: 10px;
            letter-spacing: 0.12em;
        }

.call-button {
    width: 100%;
    padding: 14px;
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    font-size: 17px;
}

    .call-button:hover:not(:disabled) {
        border-color: #138a40;
        background: #138a40;
    }

    .call-button:disabled {
        opacity: 0.45;
    }

.call-card {
    padding: 18px;
    border: 1px dashed #bad2ff;
    border-radius: 18px;
    background: #f8fbff;
}

/* =========================================================
   ACTIVE CALL
   ========================================================= */

.active-call-panel {
    min-width: 0;
}

.idle-call,
.live-call {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    text-align: center;
}

.phone-orb {
    display: grid;
    place-items: center;
    width: 94px;
    height: 94px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #eef5ff;
    color: #15376b;
    font-size: 38px;
}

    .phone-orb.small {
        width: 58px;
        height: 58px;
        margin-bottom: 8px;
        font-size: 24px;
    }

.idle-call dl {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px 18px;
    margin-top: 22px;
    text-align: left;
}

.idle-call dt {
    color: var(--muted);
}

.idle-call dd {
    margin: 0;
    font-weight: 700;
}

.call-state-badge {
    padding: 7px 13px;
    border-radius: 999px;
    background: #edf4ff;
    color: #173d78;
    font-weight: 800;
}

.avatar,
.large-avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f0ff;
    color: #16386e;
    font-weight: 800;
}

.large-avatar {
    width: 110px;
    height: 110px;
    margin: 24px;
    font-size: 42px;
}

.duration {
    margin: 14px;
    font-size: 28px;
}

.call-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 18px;
}

    .call-controls button.active {
        border-color: #8cb4ff;
        background: #e8f0ff;
    }

    .call-controls .answer {
        border-color: #16a34a;
        background: #16a34a;
        color: #ffffff;
    }

        .call-controls .answer:hover {
            border-color: #138a40;
            background: #138a40;
        }

    .call-controls .hangup {
        border-color: #dc2626;
        background: #dc2626;
        color: #ffffff;
    }

        .call-controls .hangup:hover {
            border-color: #b91c1c;
            background: #b91c1c;
        }

.dtmf-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
}

/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 1320px) {
    .dashboard-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .phone-workspace {
        grid-template-columns: 1fr 1fr;
    }

    .active-call-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1250px) {
    .recent-call {
        grid-template-columns: minmax(0, 1fr) 36px;
    }

    .history-actions {
        grid-column: 1 / -1;
        display: flex;
        width: 100%;
        min-width: 0;
        justify-content: flex-end;
        padding-top: 9px;
        border-top: 1px solid #eef1f5;
    }
}

@media (max-width: 1000px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-presence {
        width: 100%;
        min-width: 0;
    }
}

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

    .side-nav {
        position: static;
        border-radius: 0;
    }

    .content {
        padding: 16px;
    }

    .four,
    .three,
    .split,
    .metric-grid,
    .two-col {
        grid-template-columns: 1fr;
    }

    .task-row {
        display: block;
    }

    .dialpad {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        min-height: 420px;
    }
}

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

    .topbar {
        height: auto;
        align-items: flex-start;
        gap: 12px;
    }

    .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .dashboard-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .quick-action-grid,
    .online-contact-grid {
        grid-template-columns: 1fr;
    }

    .phone-workspace {
        grid-template-columns: 1fr;
    }

    .active-call-panel {
        grid-column: auto;
    }

    .calls-title {
        display: block;
    }

    .call-status-summary {
        margin-top: 14px;
        text-align: left;
    }

    .login-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .history-filters {
        grid-template-columns: 1fr;
    }

    .recent-call {
        grid-template-columns: minmax(0, 1fr) 34px;
        padding: 10px;
    }

    .recent-call-main {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
    }

    .recent-call .avatar {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 15px;
    }

    .history-actions {
        grid-column: 1 / -1;
        display: flex;
        width: 100%;
        justify-content: flex-end;
        padding-top: 9px;
        border-top: 1px solid #eef1f5;
    }

    .call-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .dashboard-metrics {
        grid-template-columns: 1fr;
    }

    .dashboard-list-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

        .dashboard-list-row > .status-chip {
            grid-column: 2;
        }

    .dashboard-presence {
        flex-wrap: wrap;
    }

    .hero-card,
    .page-title {
        padding: 20px;
    }

    h1 {
        font-size: 28px;
    }

    .login-brand-panel {
        padding: 28px;
    }

        .login-brand-panel h1 {
            font-size: 34px;
        }

    .login-form {
        padding: 24px;
    }

    .idle-call dl {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .idle-call dt {
        margin-top: 8px;
    }

    .dtmf-row {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PRODUCTION MESSAGING WORKSPACE
   Keep this block at the END of site.css
   ========================================================= */

.messages-page {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: calc(100vh - 118px);
    min-height: 680px;
    overflow: hidden;
}

.messages-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 20px;
    margin-bottom: 14px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(15, 34, 65, 0.05);
}

.messages-toolbar-heading {
    min-width: 0;
}

.messages-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .messages-title-row h1 {
        margin: 0;
        font-size: 26px;
        line-height: 1.2;
    }

.messages-toolbar-heading > p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.messages-total-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.messages-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.messages-global-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(320px, 32vw);
    margin: 0;
    font-weight: 400;
}

    .messages-global-search > span {
        position: absolute;
        z-index: 1;
        left: 13px;
        color: #8591a3;
        font-size: 18px;
        pointer-events: none;
    }

    .messages-global-search input {
        height: 42px;
        padding: 9px 40px;
        border-radius: 12px;
        background: #f8fafc;
    }

    .messages-global-search button {
        position: absolute;
        right: 5px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        background: transparent;
    }

.new-message-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    white-space: nowrap;
}

.professional-messaging-workspace {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    gap: 14px;
    overflow: hidden;
}

    .professional-messaging-workspace > .panel {
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        border-radius: 18px;
    }

.conversation-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding: 0;
}

.conversation-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 18px 13px;
    border-bottom: 1px solid #edf1f6;
}

    .conversation-panel-header h2 {
        margin: 0;
        font-size: 18px;
    }

    .conversation-panel-header small {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 11px;
    }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 11px;
    background: #f8fafc;
    color: #334155;
    font-size: 18px;
}

    .icon-button:hover:not(:disabled) {
        border-color: #b9cbea;
        background: #eef5ff;
        color: var(--brand);
    }

.conversation-filter-bar {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid #edf1f6;
}

    .conversation-filter-bar button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        gap: 6px;
        padding: 5px 12px;
        border-color: transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 12px;
    }

        .conversation-filter-bar button:hover {
            background: #f1f5f9;
        }

        .conversation-filter-bar button.active {
            background: #e9f2ff;
            color: #1358b8;
        }

        .conversation-filter-bar button span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 19px;
            height: 19px;
            padding: 0 5px;
            border-radius: 999px;
            background: var(--brand);
            color: #ffffff;
            font-size: 10px;
        }

.conversation-list {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.conversation-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 11px;
    margin: 0;
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    border-radius: 0;
    background: #ffffff;
    color: inherit;
    text-align: left;
}

    .conversation-row:hover {
        background: #f8fbff;
    }

    .conversation-row.selected {
        box-shadow: inset 3px 0 0 var(--brand);
        background: #edf5ff;
    }

.conversation-avatar-wrapper {
    position: relative;
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
}

.conversation-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(145deg, #eaf2ff, #d7e7ff);
    color: #173f78;
    font-weight: 800;
}

    .conversation-avatar.large {
        width: 46px;
        height: 46px;
    }

    .conversation-avatar.extra-large {
        width: 78px;
        height: 78px;
        font-size: 25px;
    }

.presence-indicator {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #94a3b8;
}

    .presence-indicator.online {
        background: #22c55e;
    }

.conversation-summary {
    display: block;
    min-width: 0;
}

.conversation-name-row,
.conversation-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 8px;
}

    .conversation-name-row strong {
        overflow: hidden;
        color: var(--text);
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .conversation-name-row time {
        flex: 0 0 auto;
        color: #8a95a5;
        font-size: 10px;
        font-weight: 500;
    }

.conversation-extension-line {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #8290a3;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-preview-row {
    margin-top: 5px;
}

.conversation-preview {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-you-prefix {
    color: #40516a;
    font-weight: 700;
}

.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    flex: 0 0 auto;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

.conversation-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 9px 14px;
    border-top: 1px solid #edf1f6;
    background: #fafbfd;
    color: var(--muted);
    font-size: 10px;
}

.chat-panel {
    padding: 0;
}

.chat-layout {
    display: grid;
    grid-template-rows: 72px minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.professional-chat-header {
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 16px;
    padding: 11px 16px;
    border-bottom: 1px solid #e6ebf2;
    background: #ffffff;
}

.chat-header-leading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}

.chat-contact-details {
    display: block;
    min-width: 0;
}

    .chat-contact-details strong,
    .chat-contact-details small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-contact-details strong {
        font-size: 15px;
    }

    .chat-contact-details small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 500;
    }

.chat-header-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
}

.mobile-chat-back-button {
    display: none;
    width: 36px;
    height: 36px;
    padding: 0;
}

.chat-message-area {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 8px;
    padding: 20px 24px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(rgba(248, 250, 253, 0.96), rgba(242, 246, 251, 0.96)), radial-gradient(circle at top left, #eaf2ff, transparent 45%);
    scrollbar-width: thin;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.chat-placeholder,
.messaging-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
    padding: 30px;
    color: var(--muted);
    text-align: center;
}

    .chat-placeholder h2,
    .messaging-empty h3 {
        margin: 8px 0;
        color: var(--text);
    }

    .chat-placeholder p,
    .messaging-empty p {
        max-width: 440px;
        margin: 0 0 18px;
        line-height: 1.55;
    }

.message-orb {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #e8f1ff;
    font-size: 27px;
}

    .message-orb.large {
        width: 86px;
        height: 86px;
        font-size: 39px;
    }

.message-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 9px 0;
}

    .message-date-separator span {
        padding: 5px 11px;
        border: 1px solid #dce5ef;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        color: #718096;
        font-size: 10px;
        font-weight: 700;
    }

.chat-message-row {
    display: flex;
    width: 100%;
}

    .chat-message-row.mine {
        justify-content: flex-end;
    }

    .chat-message-row.theirs {
        justify-content: flex-start;
    }

.chat-bubble {
    position: relative;
    width: fit-content;
    max-width: min(70%, 660px);
    padding: 10px 12px 7px;
    border: 1px solid #dde5ef;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(22, 42, 75, 0.05);
}

.chat-message-row.mine .chat-bubble {
    border-color: #bdd5fa;
    border-bottom-right-radius: 5px;
    background: #e5f0ff;
}

.chat-message-row.theirs .chat-bubble {
    border-bottom-left-radius: 5px;
}

.message-body {
    margin: 0;
    color: #172033;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.message-metadata {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 5px;
    color: #78869a;
    font-size: 9px;
}

.message-status.read {
    color: #1473e6;
}

.message-status.failed {
    color: #d92d20;
}

.deleted-message {
    margin: 0;
    color: #7e8998;
    font-size: 12px;
    font-style: italic;
}

.reply-preview {
    display: grid;
    gap: 2px;
    margin-bottom: 7px;
    padding: 7px 9px;
    border-left: 3px solid var(--brand);
    border-radius: 7px;
    background: rgba(15, 107, 255, 0.08);
    color: #526177;
    font-size: 10px;
}

.message-actions {
    position: absolute;
    z-index: 4;
    top: -18px;
    right: 7px;
    display: none;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 34, 65, 0.14);
}

.chat-bubble:hover .message-actions {
    display: flex;
}

.message-actions button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
}

    .message-actions button:hover {
        background: #edf4ff;
    }

.message-reaction {
    position: absolute;
    right: 7px;
    bottom: -14px;
    min-width: 29px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 14px;
}

.reaction-menu {
    position: absolute;
    z-index: 6;
    right: 5px;
    bottom: calc(100% + 7px);
    display: flex;
    gap: 2px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(15, 34, 65, 0.18);
}

    .reaction-menu button {
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
    }

.voice-message-card {
    display: grid;
    grid-template-columns: 38px minmax(180px, 310px);
    align-items: center;
    gap: 9px;
    min-width: 250px;
}

    .voice-message-card > div {
        min-width: 0;
    }

    .voice-message-card strong {
        display: block;
        margin-bottom: 5px;
        font-size: 11px;
    }

    .voice-message-card audio {
        display: block;
        width: 100%;
        height: 34px;
    }

.media-message-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(15, 107, 255, 0.1);
    font-size: 18px;
}

.attachment-message-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    align-items: center;
    min-width: 260px;
    max-width: 430px;
    gap: 9px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    text-align: left;
}

    .attachment-message-card > span:nth-child(2) {
        min-width: 0;
    }

    .attachment-message-card strong,
    .attachment-message-card small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .attachment-message-card strong {
        font-size: 11px;
    }

    .attachment-message-card small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px;
    }

.attachment-open-icon {
    color: var(--brand);
}

.professional-message-composer {
    z-index: 4;
    padding: 11px 14px 9px;
    border-top: 1px solid #e3e9f1;
    background: #ffffff;
}

.composer-main-row {
    display: grid;
    grid-template-columns: 40px 40px minmax(0, 1fr) auto;
    align-items: end;
    gap: 7px;
}

.hidden-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.composer-tool-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8fafc;
    color: #445269;
    font-size: 17px;
    cursor: pointer;
}

    .composer-tool-button:hover {
        border-color: #afc7e8;
        background: #edf5ff;
    }

    .composer-tool-button.disabled {
        opacity: 0.45;
        pointer-events: none;
    }

.composer-input-wrapper {
    min-width: 0;
}

    .composer-input-wrapper textarea {
        display: block;
        width: 100%;
        min-height: 42px;
        max-height: 120px;
        margin: 0;
        padding: 10px 12px;
        resize: none;
        line-height: 1.4;
    }

.send-message-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 42px;
    gap: 6px;
    padding: 8px 16px;
}

.composer-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
    margin-top: 4px;
}

    .composer-footer-row small {
        color: #929cac;
        font-size: 9px;
    }

.conversation-syncing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 9px;
}

.composer-reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    padding: 7px 9px;
    border-left: 3px solid var(--brand);
    border-radius: 8px;
    background: #eef5ff;
    color: #526177;
    font-size: 10px;
}

    .composer-reply-preview button {
        width: 28px;
        height: 28px;
        padding: 0;
    }

.recording-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff6f6;
    color: #991b1b;
}

.recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    animation: sipcore-recording-pulse 1.1s infinite;
}

@keyframes sipcore-recording-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.75);
    }
}

.message-modal-backdrop {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(10, 24, 46, 0.58);
    backdrop-filter: blur(4px);
}

.message-modal {
    width: min(520px, 100%);
    overflow: hidden;
    border: 1px solid #dce4ee;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(8, 25, 52, 0.28);
}

.message-modal-header {
    position: relative;
    padding: 22px 58px 16px 22px;
    border-bottom: 1px solid var(--line);
}

    .message-modal-header h2 {
        margin: 3px 0 7px;
    }

    .message-modal-header p:last-child {
        margin: 0;
        color: var(--muted);
        line-height: 1.5;
    }

.modal-close-button {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    padding: 0;
}

.message-modal-body {
    padding: 18px 22px;
}

.optional-label {
    margin-left: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.message-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: #fafbfd;
}

.message-toast {
    position: fixed;
    z-index: 6000;
    top: 20px;
    right: 20px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    align-items: center;
    width: min(390px, calc(100vw - 40px));
    gap: 10px;
    padding: 11px;
    border: 1px solid #bfe6cd;
    border-radius: 13px;
    background: #f2fff7;
    box-shadow: 0 18px 45px rgba(15, 34, 65, 0.18);
}

    .message-toast.error {
        border-color: #f2bcbc;
        background: #fff5f5;
    }

.message-toast-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dff7e8;
    color: #166534;
    font-weight: 900;
}

.message-toast.error .message-toast-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.message-toast-content {
    min-width: 0;
}

    .message-toast-content strong,
    .message-toast-content span {
        display: block;
    }

    .message-toast-content span {
        margin-top: 2px;
        overflow: hidden;
        color: #566378;
        font-size: 11px;
        text-overflow: ellipsis;
    }

.message-toast > button {
    width: 30px;
    height: 30px;
    padding: 0;
}

.message-loading-spinner,
.mini-spinner {
    border-radius: 50%;
    border: 2px solid #dbe6f5;
    border-top-color: var(--brand);
    animation: sipcore-message-spin 0.8s linear infinite;
}

.message-loading-spinner {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
}

.mini-spinner {
    width: 12px;
    height: 12px;
}

@keyframes sipcore-message-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1100px) {
    .professional-messaging-workspace {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .messages-global-search {
        width: 230px;
    }

    .chat-bubble {
        max-width: 80%;
    }
}

@media (max-width: 820px) {
    .messages-page {
        height: calc(100vh - 92px);
        min-height: 560px;
    }

    .messages-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .messages-toolbar-actions {
        width: 100%;
    }

    .messages-global-search {
        width: auto;
        flex: 1;
    }

    .professional-messaging-workspace {
        display: block;
    }

    .conversation-panel,
    .chat-panel {
        width: 100%;
        height: 100%;
    }

        .conversation-panel.mobile-hidden {
            display: none;
        }

    .chat-panel {
        display: none;
    }

        .chat-panel.mobile-visible {
            display: block;
        }

    .mobile-chat-back-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .messages-page {
        height: auto;
        min-height: calc(100vh - 70px);
        overflow: visible;
    }

    .messages-toolbar {
        margin-bottom: 10px;
        padding: 12px;
    }

    .messages-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .new-message-button {
        width: 100%;
    }

    .professional-messaging-workspace {
        height: calc(100vh - 205px);
        min-height: 560px;
    }

    .professional-chat-header {
        padding: 9px 10px;
    }

    .chat-message-area {
        padding: 14px 10px 20px;
    }

    .chat-bubble {
        max-width: 91%;
    }

    .composer-main-row {
        grid-template-columns: 38px 38px minmax(0, 1fr);
    }

    .send-message-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .voice-message-card {
        grid-template-columns: 34px minmax(150px, 230px);
        min-width: 210px;
    }

    .attachment-message-card {
        min-width: 220px;
        max-width: 100%;
    }

    .recording-banner {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

        .recording-banner button {
            grid-column: auto;
        }

    .message-actions {
        position: static;
        display: flex;
        justify-content: flex-end;
        margin-top: 7px;
        border: 0;
        box-shadow: none;
    }

    .reaction-menu {
        position: static;
        margin-top: 7px;
    }
}
/* Blazor error UI must remain hidden until Blazor reports an error. */
#blazor-error-ui {
    display: none;
    position: fixed;
    z-index: 10000;
    right: 18px;
    bottom: 18px;
    left: 18px;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid #f1b8b8;
    border-radius: 14px;
    background: #fff4f4;
    color: #8f1d1d;
    box-shadow: 0 16px 42px rgba(20, 33, 61, 0.18);
}

    #blazor-error-ui .reload {
        color: #6b21a8;
        font-weight: 700;
    }

    #blazor-error-ui .dismiss {
        margin-left: auto;
        padding: 4px 10px;
    }

.auth-content {
    width: 100%;
    min-height: 100vh;
}

/* =========================================================
   CONTACTS DIRECTORY
   ========================================================= */

.contacts-page {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.contacts-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 34, 65, 0.05);
}

    .contacts-toolbar h1 {
        margin: 2px 0 6px;
    }

    .contacts-toolbar p:last-child {
        max-width: 720px;
        margin: 0;
        color: var(--muted);
    }

.contacts-toolbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
}

.contacts-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(340px, 32vw);
    margin: 0;
}

    .contacts-search > span {
        position: absolute;
        z-index: 1;
        left: 13px;
        color: #8794a7;
        font-size: 18px;
        pointer-events: none;
    }

    .contacts-search input {
        height: 42px;
        padding: 9px 40px;
        border-radius: 12px;
        background: #f8fafc;
    }

    .contacts-search button {
        position: absolute;
        right: 5px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        background: transparent;
    }

.contacts-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.contact-summary-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
}

.contact-summary-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #eaf2ff;
    color: #155fbf;
    font-size: 20px;
    font-weight: 800;
}

    .contact-summary-icon.online {
        color: #15803d;
    }

.contact-summary-card small,
.contact-summary-card strong,
.contact-summary-card span {
    display: block;
}

.contact-summary-card small {
    color: var(--muted);
    font-size: 11px;
}

.contact-summary-card strong {
    margin: 2px 0;
    color: var(--text);
    font-size: 24px;
}

.contact-summary-card div > span {
    color: #7a8799;
    font-size: 10px;
}

.contacts-panel {
    padding: 0;
    overflow: hidden;
}

.contacts-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

    .contacts-panel-header h2 {
        margin: 0;
    }

    .contacts-panel-header small {
        display: block;
        margin-top: 3px;
        color: var(--muted);
    }

.contacts-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .contacts-filter-tabs button {
        min-height: 34px;
        padding: 6px 13px;
        border-color: transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 12px;
    }

        .contacts-filter-tabs button:hover {
            background: #f1f5f9;
        }

        .contacts-filter-tabs button.active {
            background: #e8f2ff;
            color: #135ebc;
        }

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.contact-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    background: #ffffff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .contact-card:hover {
        transform: translateY(-2px);
        border-color: #b8cff0;
        box-shadow: 0 12px 28px rgba(15, 34, 65, 0.08);
    }

.contact-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #edf1f6;
}

.contact-avatar-wrapper {
    position: relative;
    flex: 0 0 auto;
}

.contact-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(145deg, #eaf2ff, #d6e7ff);
    color: #173f78;
    font-size: 16px;
    font-weight: 800;
}

.contact-presence {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 14px;
    height: 14px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #94a3b8;
}

    .contact-presence.online {
        background: #22c55e;
    }

.contact-identity {
    min-width: 0;
}

.contact-name-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}

    .contact-name-row h3 {
        margin: 0;
        overflow: hidden;
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.contact-identity p {
    margin: 3px 0 5px;
    color: var(--muted);
    font-size: 11px;
}

.federated-badge {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f0eaff;
    color: #6b3fc8;
    font-size: 9px;
    font-weight: 800;
}

.contact-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #718096;
    font-size: 10px;
    font-weight: 700;
}

    .contact-status > span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #94a3b8;
    }

    .contact-status.online {
        color: #15803d;
    }

        .contact-status.online > span {
            background: #22c55e;
        }

.contact-card-body {
    padding: 14px 16px;
}

    .contact-card-body dl {
        display: grid;
        gap: 9px;
        margin: 0;
    }

        .contact-card-body dl > div {
            display: grid;
            grid-template-columns: 72px minmax(0, 1fr);
            gap: 8px;
        }

    .contact-card-body dt {
        color: var(--muted);
        font-size: 10px;
    }

    .contact-card-body dd {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: var(--text);
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.contact-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

    .contact-permissions span {
        padding: 4px 8px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #526177;
        font-size: 9px;
        font-weight: 700;
    }

.contact-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 12px;
    border-top: 1px solid #edf1f6;
    background: #fafbfd;
}

.contact-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 38px;
    gap: 5px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 10px;
}

    .contact-action.primary-action {
        border-color: var(--brand);
        background: var(--brand);
        color: #ffffff;
    }

    .contact-action:disabled {
        opacity: 0.42;
    }

.contacts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 30px;
    color: var(--muted);
    text-align: center;
}

    .contacts-empty h3 {
        margin: 10px 0 6px;
        color: var(--text);
    }

    .contacts-empty p {
        max-width: 460px;
        margin: 0 0 18px;
    }

.contacts-empty-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eaf2ff;
    color: var(--brand);
    font-size: 25px;
    font-weight: 800;
}

.contacts-empty.error .contacts-empty-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.contacts-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe6f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: contacts-spin 0.8s linear infinite;
}

@keyframes contacts-spin {
    to {
        transform: rotate(360deg);
    }
}

.contact-toast {
    position: fixed;
    z-index: 5000;
    right: 20px;
    bottom: 20px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    width: min(380px, calc(100vw - 40px));
    gap: 10px;
    padding: 11px;
    border: 1px solid #bfe6cd;
    border-radius: 13px;
    background: #f2fff7;
    box-shadow: 0 18px 45px rgba(15, 34, 65, 0.16);
}

    .contact-toast > span {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #dcfce7;
        color: #166534;
        font-weight: 900;
    }

    .contact-toast strong {
        color: #2f4a3b;
        font-size: 11px;
    }

    .contact-toast button {
        width: 30px;
        height: 30px;
        padding: 0;
    }

@media (max-width: 1180px) {
    .contacts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contacts-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .contacts-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .contacts-toolbar-actions {
        width: 100%;
    }

    .contacts-search {
        width: auto;
        flex: 1;
    }

    .contacts-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .contacts-summary-grid,
    .contacts-grid {
        grid-template-columns: 1fr;
    }

    .contacts-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

        .contacts-toolbar-actions > button {
            width: 100%;
        }

    .contact-actions {
        grid-template-columns: 1fr;
    }
}

/* Append to SIPCore.App.Shared/wwwroot/css/app.css */
.wd-page {
    display: grid;
    gap: 14px;
    min-width: 0
}

.wd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff
}

    .wd-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px
    }

    .wd-toolbar p:last-child {
        margin: 0;
        color: var(--muted)
    }

.wd-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.wd-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(330px,30vw);
    margin: 0
}

    .wd-search span {
        position: absolute;
        left: 13px;
        color: #8794a7
    }

    .wd-search input {
        height: 42px;
        padding-left: 38px;
        border-radius: 12px;
        background: #f8fafc
    }

.wd-alert {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 14px;
    border-radius: 12px
}

    .wd-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b
    }

    .wd-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534
    }

.wd-tabs {
    display: flex;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    overflow-x: auto
}

    .wd-tabs button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-color: transparent;
        background: transparent
    }

        .wd-tabs button.active {
            background: #eaf2ff;
            color: #145fbd
        }

    .wd-tabs span {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        border-radius: 999px;
        background: #edf1f6;
        font-size: 9px
    }

.wd-loading, .wd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    padding: 30px;
    text-align: center;
    color: var(--muted)
}

.wd-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe6f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: wdspin .8s linear infinite
}

@keyframes wdspin {
    to {
        transform: rotate(360deg)
    }
}

.wd-metrics {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px
}

    .wd-metrics.three {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

.wd-metric-card {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff
}

    .wd-metric-card > span {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 21px;
        font-weight: 800
    }

    .wd-metric-card small, .wd-metric-card strong, .wd-metric-card em {
        display: block
    }

    .wd-metric-card strong {
        font-size: 25px
    }

    .wd-metric-card em {
        color: #8290a3;
        font-size: 9px;
        font-style: normal
    }

.wd-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
    gap: 14px
}

.wd-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px
}

    .wd-section-heading h2 {
        margin: 1px 0 0
    }

.wd-compact-task {
    display: grid;
    grid-template-columns: 5px minmax(0,1fr) auto;
    align-items: center;
    width: 100%;
    gap: 11px;
    padding: 11px 5px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    border-radius: 0;
    background: transparent;
    text-align: left
}

    .wd-compact-task i, .wd-task-title > i {
        width: 5px;
        height: 38px;
        border-radius: 999px;
        background: #4f8ee8
    }

        .wd-compact-task i.high, .wd-task-title > i.high {
            background: #ef4444
        }

        .wd-compact-task i.low, .wd-task-title > i.low {
            background: #22c55e
        }

    .wd-compact-task strong, .wd-compact-task small {
        display: block
    }

    .wd-compact-task small {
        color: var(--muted);
        font-size: 10px
    }

.wd-quick-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px
}

    .wd-quick-actions button {
        display: grid;
        grid-template-columns: 36px minmax(0,1fr);
        gap: 2px 9px;
        text-align: left
    }

        .wd-quick-actions button > span {
            grid-row: 1/3;
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #eaf2ff
        }

    .wd-quick-actions small {
        font-size: 9px;
        color: var(--muted)
    }

.wd-progress-row {
    display: grid;
    gap: 6px;
    margin: 12px 0
}

    .wd-progress-row > div:first-child {
        display: flex;
        justify-content: space-between
    }

.wd-progress {
    height: 7px;
    border-radius: 999px;
    background: #e8edf4;
    overflow: hidden
}

    .wd-progress i {
        display: block;
        height: 100%;
        background: var(--brand)
    }

.wd-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px
}

.wd-list-filters {
    display: flex;
    gap: 8px
}

    .wd-list-filters select {
        width: auto;
        min-width: 150px
    }

.wd-task-table {
    overflow-x: auto
}

.wd-task-table-head, .wd-task-row {
    display: grid;
    grid-template-columns: minmax(300px,1.7fr) 110px 130px 180px 125px 30px;
    align-items: center;
    min-width: 900px;
    gap: 10px
}

.wd-task-table-head {
    padding: 9px 12px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    color: #7c899a
}

.wd-task-row {
    width: 100%;
    padding: 12px;
    border: 0;
    border-top: 1px solid #edf1f6;
    border-radius: 0;
    background: #fff;
    text-align: left
}

    .wd-task-row:hover {
        background: #f7faff
    }

.wd-task-title {
    display: grid;
    grid-template-columns: 5px minmax(0,1fr);
    align-items: center;
    gap: 10px
}

    .wd-task-title strong, .wd-task-title small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .wd-task-title small {
        font-size: 9px;
        color: var(--muted)
    }

.wd-chip {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #526177;
    font-size: 9px
}

    .wd-chip.high {
        background: #fee2e2;
        color: #b91c1c
    }

    .wd-chip.low, .wd-chip.completed, .wd-chip.approved {
        background: #dcfce7;
        color: #166534
    }

    .wd-chip.in-progress {
        background: #dbeafe;
        color: #1d4ed8
    }

    .wd-chip.on-hold {
        background: #fef3c7;
        color: #92400e
    }

    .wd-chip.approval {
        background: #f3e8ff;
        color: #7e22ce
    }

    .wd-chip.cancelled, .wd-chip.rejected {
        background: #fee2e2;
        color: #b91c1c
    }

.wd-overdue {
    color: #dc2626;
    font-weight: 800
}

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

.wd-approval-card {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 15px;
    background: #fff
}

    .wd-approval-card header, .wd-approval-card footer, .wd-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px
    }

    .wd-approval-card footer {
        justify-content: flex-end
    }

.wd-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.wd-person-card {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    gap: 11px;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 15px
}

.wd-avatar-wrap {
    position: relative
}

.wd-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg,#eaf2ff,#d6e7ff);
    color: #173f78;
    font-size: 12px;
    font-weight: 800
}

.wd-avatar-wrap .wd-avatar {
    width: 52px;
    height: 52px
}

.wd-avatar-wrap i {
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #94a3b8
}

    .wd-avatar-wrap i.online {
        background: #22c55e
    }

.wd-person-card footer {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.wd-detail-shell {
    display: grid;
    gap: 14px
}

.wd-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 15px
}

.wd-detail-leading {
    display: flex;
    gap: 13px
}

.wd-back {
    width: 38px;
    height: 38px;
    padding: 0
}

.wd-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.wd-detail-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 14px
}

.wd-detail-main, .wd-detail-side {
    display: grid;
    align-content: start;
    gap: 14px
}

.wd-workflow-buttons {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.wd-inline-warning {
    padding: 9px 11px;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412
}

.wd-check-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #edf1f6
}

    .wd-check-row strong, .wd-check-row small {
        display: block
    }

    .wd-check-row.done strong {
        text-decoration: line-through;
        color: #718096
    }

.wd-file-list button {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    width: 100%;
    gap: 9px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    background: transparent;
    text-align: left
}

.wd-timeline > div {
    display: grid;
    grid-template-columns: 14px minmax(0,1fr);
    gap: 10px;
    padding-bottom: 15px
}

.wd-timeline i {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border: 2px solid #8fb7ec;
    border-radius: 50%
}

.wd-info-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

.wd-person-row {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

    .wd-person-row > div {
        display: flex;
        gap: 4px
    }

    .wd-person-row button {
        width: 31px;
        height: 31px;
        padding: 0
    }

.wd-approval-decision > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.wd-discussion-shell {
    display: grid;
    grid-template-rows: auto minmax(380px,1fr) auto;
    min-height: calc(100vh - 230px);
    padding: 0;
    overflow: hidden
}

.wd-discussion-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-bottom: 1px solid #e3e9f1
}

    .wd-discussion-header > div {
        flex: 1
    }

.wd-discussion-body {
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    background: #f7f9fc
}

.wd-comment {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 9px;
    max-width: 760px;
    margin: 0 0 12px calc(var(--depth) * 34px)
}

    .wd-comment > div {
        padding: 10px 12px;
        border: 1px solid #e0e7f0;
        border-radius: 14px;
        background: #fff
    }

    .wd-comment header {
        display: flex;
        justify-content: space-between
    }

.wd-comment-composer {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e3e9f1
}

.wd-reply-banner {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    padding: 7px 9px;
    border-left: 3px solid var(--brand);
    background: #eef5ff
}

.wd-form-header {
    display: flex;
    gap: 12px
}

.wd-form-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 14px
}

    .wd-form-grid main, .wd-form-grid aside {
        display: grid;
        align-content: start;
        gap: 14px
    }

.wd-form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.wd-toggle-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 9px;
    padding: 11px;
    border: 1px solid #e3e9f1;
    border-radius: 11px
}

.wd-checklist-builder {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 7px
}

.wd-draft-check {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

.wd-selector-list {
    display: grid;
    max-height: 300px;
    overflow-y: auto
}

    .wd-selector-list label {
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        gap: 9px;
        padding: 8px 2px;
        border-bottom: 1px solid #edf1f6
    }

.wd-save-button {
    width: 100%;
    min-height: 46px
}

.wd-edit-card {
    max-width: 820px
}

.wd-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.wd-empty > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 24px
}

.danger {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #fff !important
}

@media(max-width:1180px) {
    .wd-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .wd-toolbar-actions {
        width: 100%
    }

    .wd-search {
        width: auto;
        flex: 1
    }

    .wd-dashboard-grid, .wd-detail-grid, .wd-form-grid {
        grid-template-columns: 1fr
    }

    .wd-team-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .wd-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:760px) {
    .wd-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .wd-metrics, .wd-metrics.three, .wd-approval-grid, .wd-team-grid, .wd-quick-actions {
        grid-template-columns: 1fr
    }

    .wd-list-header, .wd-detail-header {
        align-items: stretch;
        flex-direction: column
    }

    .wd-list-filters, .wd-workflow-buttons, .wd-form-two, .wd-checklist-builder {
        display: grid;
        grid-template-columns: 1fr
    }

    .wd-comment {
        margin-left: 0 !important
    }

    .wd-comment-composer {
        grid-template-columns: 1fr
    }
}

/* WorkDesk attachment upload additions */
.wd-upload-box {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px dashed #b9c9de;
    border-radius: 13px;
    background: #f8fbff;
}

    .wd-upload-box input[type="file"] {
        width: 100%;
        padding: 9px;
        border: 1px solid #dce5f0;
        border-radius: 10px;
        background: #ffffff;
    }

    .wd-upload-box > small {
        color: var(--muted);
        font-size: 10px;
    }

.wd-selected-file {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #ffffff;
}

    .wd-selected-file > span:first-child {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: #eaf2ff;
    }

    .wd-selected-file strong,
    .wd-selected-file small {
        display: block;
    }

    .wd-selected-file small {
        margin-top: 2px;
        color: var(--muted);
        font-size: 9px;
    }

    .wd-selected-file button {
        width: 30px;
        height: 30px;
        padding: 0;
    }

/* Append to SIPCore.App.Shared/wwwroot/css/app.css */
.wd-page {
    display: grid;
    gap: 14px;
    min-width: 0
}

.wd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff
}

    .wd-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px
    }

    .wd-toolbar p:last-child {
        margin: 0;
        color: var(--muted)
    }

.wd-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.wd-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(330px,30vw);
    margin: 0
}

    .wd-search span {
        position: absolute;
        left: 13px;
        color: #8794a7
    }

    .wd-search input {
        height: 42px;
        padding-left: 38px;
        border-radius: 12px;
        background: #f8fafc
    }

.wd-alert {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 14px;
    border-radius: 12px
}

    .wd-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b
    }

    .wd-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534
    }

.wd-tabs {
    display: flex;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    overflow-x: auto
}

    .wd-tabs button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-color: transparent;
        background: transparent
    }

        .wd-tabs button.active {
            background: #eaf2ff;
            color: #145fbd
        }

    .wd-tabs span {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        border-radius: 999px;
        background: #edf1f6;
        font-size: 9px
    }

.wd-loading, .wd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    padding: 30px;
    text-align: center;
    color: var(--muted)
}

.wd-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe6f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: wdspin .8s linear infinite
}

@keyframes wdspin {
    to {
        transform: rotate(360deg)
    }
}

.wd-metrics {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px
}

    .wd-metrics.three {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

.wd-metric-card {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff
}

    .wd-metric-card > span {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 21px;
        font-weight: 800
    }

    .wd-metric-card small, .wd-metric-card strong, .wd-metric-card em {
        display: block
    }

    .wd-metric-card strong {
        font-size: 25px
    }

    .wd-metric-card em {
        color: #8290a3;
        font-size: 9px;
        font-style: normal
    }

.wd-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
    gap: 14px
}

.wd-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px
}

    .wd-section-heading h2 {
        margin: 1px 0 0
    }

.wd-compact-task {
    display: grid;
    grid-template-columns: 5px minmax(0,1fr) auto;
    align-items: center;
    width: 100%;
    gap: 11px;
    padding: 11px 5px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    border-radius: 0;
    background: transparent;
    text-align: left
}

    .wd-compact-task i, .wd-task-title > i {
        width: 5px;
        height: 38px;
        border-radius: 999px;
        background: #4f8ee8
    }

        .wd-compact-task i.high, .wd-task-title > i.high {
            background: #ef4444
        }

        .wd-compact-task i.low, .wd-task-title > i.low {
            background: #22c55e
        }

    .wd-compact-task strong, .wd-compact-task small {
        display: block
    }

    .wd-compact-task small {
        color: var(--muted);
        font-size: 10px
    }

.wd-quick-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px
}

    .wd-quick-actions button {
        display: grid;
        grid-template-columns: 36px minmax(0,1fr);
        gap: 2px 9px;
        text-align: left
    }

        .wd-quick-actions button > span {
            grid-row: 1/3;
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #eaf2ff
        }

    .wd-quick-actions small {
        font-size: 9px;
        color: var(--muted)
    }

.wd-progress-row {
    display: grid;
    gap: 6px;
    margin: 12px 0
}

    .wd-progress-row > div:first-child {
        display: flex;
        justify-content: space-between
    }

.wd-progress {
    height: 7px;
    border-radius: 999px;
    background: #e8edf4;
    overflow: hidden
}

    .wd-progress i {
        display: block;
        height: 100%;
        background: var(--brand)
    }

.wd-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px
}

.wd-list-filters {
    display: flex;
    gap: 8px
}

    .wd-list-filters select {
        width: auto;
        min-width: 150px
    }

.wd-task-table {
    overflow-x: auto
}

.wd-task-table-head, .wd-task-row {
    display: grid;
    grid-template-columns: minmax(300px,1.7fr) 110px 130px 180px 125px 30px;
    align-items: center;
    min-width: 900px;
    gap: 10px
}

.wd-task-table-head {
    padding: 9px 12px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    color: #7c899a
}

.wd-task-row {
    width: 100%;
    padding: 12px;
    border: 0;
    border-top: 1px solid #edf1f6;
    border-radius: 0;
    background: #fff;
    text-align: left
}

    .wd-task-row:hover {
        background: #f7faff
    }

.wd-task-title {
    display: grid;
    grid-template-columns: 5px minmax(0,1fr);
    align-items: center;
    gap: 10px
}

    .wd-task-title strong, .wd-task-title small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .wd-task-title small {
        font-size: 9px;
        color: var(--muted)
    }

.wd-chip {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #526177;
    font-size: 9px
}

    .wd-chip.high {
        background: #fee2e2;
        color: #b91c1c
    }

    .wd-chip.low, .wd-chip.completed, .wd-chip.approved {
        background: #dcfce7;
        color: #166534
    }

    .wd-chip.in-progress {
        background: #dbeafe;
        color: #1d4ed8
    }

    .wd-chip.on-hold {
        background: #fef3c7;
        color: #92400e
    }

    .wd-chip.approval {
        background: #f3e8ff;
        color: #7e22ce
    }

    .wd-chip.cancelled, .wd-chip.rejected {
        background: #fee2e2;
        color: #b91c1c
    }

.wd-overdue {
    color: #dc2626;
    font-weight: 800
}

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

.wd-approval-card {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 15px;
    background: #fff
}

    .wd-approval-card header, .wd-approval-card footer, .wd-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px
    }

    .wd-approval-card footer {
        justify-content: flex-end
    }

.wd-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.wd-person-card {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    gap: 11px;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 15px
}

.wd-avatar-wrap {
    position: relative
}

.wd-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg,#eaf2ff,#d6e7ff);
    color: #173f78;
    font-size: 12px;
    font-weight: 800
}

.wd-avatar-wrap .wd-avatar {
    width: 52px;
    height: 52px
}

.wd-avatar-wrap i {
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #94a3b8
}

    .wd-avatar-wrap i.online {
        background: #22c55e
    }

.wd-person-card footer {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.wd-detail-shell {
    display: grid;
    gap: 14px
}

.wd-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 15px
}

.wd-detail-leading {
    display: flex;
    gap: 13px
}

.wd-back {
    width: 38px;
    height: 38px;
    padding: 0
}

.wd-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.wd-detail-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 14px
}

.wd-detail-main, .wd-detail-side {
    display: grid;
    align-content: start;
    gap: 14px
}

.wd-workflow-buttons {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.wd-inline-warning {
    padding: 9px 11px;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412
}

.wd-check-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #edf1f6
}

    .wd-check-row strong, .wd-check-row small {
        display: block
    }

    .wd-check-row.done strong {
        text-decoration: line-through;
        color: #718096
    }

.wd-file-list button {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    width: 100%;
    gap: 9px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    background: transparent;
    text-align: left
}

.wd-timeline > div {
    display: grid;
    grid-template-columns: 14px minmax(0,1fr);
    gap: 10px;
    padding-bottom: 15px
}

.wd-timeline i {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border: 2px solid #8fb7ec;
    border-radius: 50%
}

.wd-info-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

.wd-person-row {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

    .wd-person-row > div {
        display: flex;
        gap: 4px
    }

    .wd-person-row button {
        width: 31px;
        height: 31px;
        padding: 0
    }

.wd-approval-decision > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.wd-discussion-shell {
    display: grid;
    grid-template-rows: auto minmax(380px,1fr) auto;
    min-height: calc(100vh - 230px);
    padding: 0;
    overflow: hidden
}

.wd-discussion-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-bottom: 1px solid #e3e9f1
}

    .wd-discussion-header > div {
        flex: 1
    }

.wd-discussion-body {
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    background: #f7f9fc
}

.wd-comment {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 9px;
    max-width: 760px;
    margin: 0 0 12px calc(var(--depth) * 34px)
}

    .wd-comment > div {
        padding: 10px 12px;
        border: 1px solid #e0e7f0;
        border-radius: 14px;
        background: #fff
    }

    .wd-comment header {
        display: flex;
        justify-content: space-between
    }

.wd-comment-composer {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e3e9f1
}

.wd-reply-banner {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    padding: 7px 9px;
    border-left: 3px solid var(--brand);
    background: #eef5ff
}

.wd-form-header {
    display: flex;
    gap: 12px
}

.wd-form-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 14px
}

    .wd-form-grid main, .wd-form-grid aside {
        display: grid;
        align-content: start;
        gap: 14px
    }

.wd-form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.wd-toggle-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 9px;
    padding: 11px;
    border: 1px solid #e3e9f1;
    border-radius: 11px
}

.wd-checklist-builder {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 7px
}

.wd-draft-check {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

.wd-selector-list {
    display: grid;
    max-height: 300px;
    overflow-y: auto
}

    .wd-selector-list label {
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        gap: 9px;
        padding: 8px 2px;
        border-bottom: 1px solid #edf1f6
    }

.wd-save-button {
    width: 100%;
    min-height: 46px
}

.wd-edit-card {
    max-width: 820px
}

.wd-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.wd-empty > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 24px
}

.danger {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #fff !important
}

@media(max-width:1180px) {
    .wd-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .wd-toolbar-actions {
        width: 100%
    }

    .wd-search {
        width: auto;
        flex: 1
    }

    .wd-dashboard-grid, .wd-detail-grid, .wd-form-grid {
        grid-template-columns: 1fr
    }

    .wd-team-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .wd-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:760px) {
    .wd-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .wd-metrics, .wd-metrics.three, .wd-approval-grid, .wd-team-grid, .wd-quick-actions {
        grid-template-columns: 1fr
    }

    .wd-list-header, .wd-detail-header {
        align-items: stretch;
        flex-direction: column
    }

    .wd-list-filters, .wd-workflow-buttons, .wd-form-two, .wd-checklist-builder {
        display: grid;
        grid-template-columns: 1fr
    }

    .wd-comment {
        margin-left: 0 !important
    }

    .wd-comment-composer {
        grid-template-columns: 1fr
    }
}


/* Modular WorkDesk additions */
.wd-description-text {
    margin: 0;
    line-height: 1.7;
    white-space: pre-wrap;
}

.wd-empty.compact {
    min-height: 180px;
}

.wd-upload-box {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px dashed #b9c9de;
    border-radius: 13px;
    background: #f8fbff;
}

    .wd-upload-box input[type="file"] {
        width: 100%;
        padding: 9px;
        border: 1px solid #dce5f0;
        border-radius: 10px;
        background: #ffffff;
    }

.wd-selected-file {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #ffffff;
}

    .wd-selected-file > span:first-child {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: #eaf2ff;
    }

    .wd-selected-file strong,
    .wd-selected-file small {
        display: block;
    }

    .wd-selected-file small {
        color: var(--muted);
        font-size: 9px;
    }
/* =========================================================
   SIPCORE MEETINGS — PRODUCTION WEB & DESKTOP
   ========================================================= */

.mt-page {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.mt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 34, 65, 0.05);
}

    .mt-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px;
    }

    .mt-toolbar p:last-child {
        max-width: 760px;
        margin: 0;
        color: var(--muted);
    }

.mt-toolbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
}

.mt-search,
.mt-participant-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

.mt-search {
    width: min(360px, 31vw);
}

    .mt-search > span,
    .mt-participant-search > span {
        position: absolute;
        z-index: 1;
        left: 13px;
        color: #8290a3;
        pointer-events: none;
    }

    .mt-search input,
    .mt-participant-search input {
        height: 42px;
        padding: 9px 40px;
        border-radius: 12px;
        background: #f8fafc;
    }

    .mt-search button {
        position: absolute;
        right: 5px;
        width: 31px;
        height: 31px;
        padding: 0;
        border: 0;
        background: transparent;
    }

.mt-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
}

    .mt-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b;
    }

    .mt-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534;
    }

    .mt-alert button {
        width: 30px;
        height: 30px;
        padding: 0;
    }

.mt-loading,
.mt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 30px;
    color: var(--muted);
    text-align: center;
}

    .mt-empty.compact {
        min-height: 180px;
    }

    .mt-empty > span {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 24px;
    }

    .mt-empty h3 {
        margin: 11px 0 5px;
        color: var(--text);
    }

    .mt-empty p {
        max-width: 460px;
        margin: 0 0 16px;
    }

.mt-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe6f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: mt-spin 0.8s linear infinite;
}

@keyframes mt-spin {
    to {
        transform: rotate(360deg);
    }
}

.mt-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.mt-summary-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
}

.mt-summary-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 21px;
    font-weight: 800;
}

    .mt-summary-icon.live {
        background: #dcfce7;
        color: #15803d;
    }

.mt-summary-card small,
.mt-summary-card strong,
.mt-summary-card em {
    display: block;
}

.mt-summary-card small {
    color: var(--muted);
    font-size: 10px;
}

.mt-summary-card strong {
    margin: 2px 0;
    font-size: 25px;
}

.mt-summary-card em {
    color: #8290a3;
    font-size: 9px;
    font-style: normal;
}

.mt-list-panel {
    padding: 0;
    overflow: hidden;
}

.mt-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

    .mt-list-header h2 {
        margin: 1px 0 0;
    }

.mt-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

    .mt-filter-tabs button {
        min-height: 34px;
        padding: 6px 13px;
        border-color: transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 11px;
    }

        .mt-filter-tabs button.active {
            background: #eaf2ff;
            color: #145fbd;
        }

.mt-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.mt-meeting-card {
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    background: #ffffff;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .mt-meeting-card:hover {
        transform: translateY(-2px);
        border-color: #b8cff0;
        box-shadow: 0 12px 28px rgba(15, 34, 65, 0.08);
    }

.mt-card-main {
    display: block;
    width: 100%;
    padding: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
}

    .mt-card-main header {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

.mt-meeting-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 20px;
}

.mt-card-title {
    min-width: 0;
}

    .mt-card-title strong,
    .mt-card-title small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mt-card-title small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 10px;
    }

.mt-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 9px;
    font-weight: 800;
}

    .mt-status.live {
        background: #dcfce7;
        color: #166534;
    }

    .mt-status.ended,
    .mt-status.cancelled {
        background: #fee2e2;
        color: #b91c1c;
    }

.mt-card-main > p {
    min-height: 40px;
    margin: 14px 0;
    color: #59677a;
    font-size: 11px;
    line-height: 1.55;
}

.mt-card-main dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

    .mt-card-main dl > div {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 8px;
    }

.mt-card-main dt {
    color: var(--muted);
    font-size: 9px;
}

.mt-card-main dd {
    margin: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-meeting-card footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 12px;
    border-top: 1px solid #edf1f6;
    background: #fafbfd;
}

.mt-form-shell,
.mt-detail-shell {
    display: grid;
    gap: 14px;
}

.mt-form-header,
.mt-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.mt-form-header {
    justify-content: flex-start;
}

.mt-back {
    width: 38px;
    height: 38px;
    padding: 0;
    flex: 0 0 auto;
}

.mt-form-header h1,
.mt-detail-header h1 {
    margin: 2px 0 5px;
}

.mt-form-header p:last-child {
    margin: 0;
    color: var(--muted);
}

.mt-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 14px;
}

    .mt-form-grid main,
    .mt-form-grid aside {
        display: grid;
        align-content: start;
        gap: 14px;
    }

.mt-form-card h2 {
    margin: 1px 0 14px;
}

.mt-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

    .mt-section-heading h2 {
        margin: 1px 0 0;
    }

.mt-option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0;
}

.mt-option-card,
.mt-toggle-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 12px;
    border: 1px solid #e3e9f1;
    border-radius: 12px;
    background: #ffffff;
}

    .mt-option-card.selected {
        border-color: #8bb6ec;
        background: #f3f8ff;
    }

    .mt-option-card strong,
    .mt-option-card small,
    .mt-toggle-row strong,
    .mt-toggle-row small {
        display: block;
    }

    .mt-option-card small,
    .mt-toggle-row small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px;
    }

.mt-form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mt-setting-stack {
    display: grid;
    align-items: end;
}

.mt-participant-panel {
    padding-bottom: 0;
    overflow: hidden;
}

.mt-selected-count {
    padding: 4px 8px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #145fbd;
    font-size: 9px;
    font-weight: 800;
}

.mt-participant-list {
    display: grid;
    max-height: 480px;
    margin: 12px -16px 0;
    overflow-y: auto;
}

    .mt-participant-list label {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 10px 16px;
        border-top: 1px solid #edf1f6;
    }

.mt-contact-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #173f78;
    font-size: 11px;
    font-weight: 800;
}

.mt-participant-list strong,
.mt-participant-list small {
    display: block;
}

.mt-participant-list small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.mt-form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .mt-form-actions button {
        min-height: 45px;
    }

.mt-detail-leading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mt-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--muted);
    font-size: 10px;
}

.mt-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mt-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
}

.mt-detail-main,
.mt-detail-side {
    display: grid;
    align-content: start;
    gap: 14px;
}

.mt-conference-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
}

.mt-conference-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 28px;
}

.mt-conference-card small,
.mt-conference-card strong,
.mt-conference-card span {
    display: block;
}

.mt-conference-card small {
    color: var(--muted);
    font-size: 10px;
}

.mt-conference-card strong {
    margin: 3px 0;
    color: #0c3972;
    font-size: 29px;
    letter-spacing: 1px;
}

.mt-conference-card span {
    color: var(--muted);
    font-size: 9px;
}

.mt-host-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.danger-outline {
    border-color: #ef4444 !important;
    background: #ffffff !important;
    color: #dc2626 !important;
}

.mt-inline-info,
.mt-help-text {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #59677a;
    font-size: 10px;
}

.mt-live-output {
    max-height: 360px;
    margin: 0;
    padding: 14px;
    overflow: auto;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #07162b;
    color: #d9e8ff;
    font-family: Consolas, monospace;
    font-size: 10px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.mt-member-control {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto auto;
    gap: 7px;
}

.mt-info-card h2,
.mt-access-card h2,
.mt-description-card h2 {
    margin-top: 0;
    font-size: 15px;
}

.mt-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6;
    font-size: 10px;
}

    .mt-info-row span {
        color: var(--muted);
    }

    .mt-info-row strong {
        max-width: 58%;
        overflow-wrap: anywhere;
        text-align: right;
    }

.mt-access-card {
    display: grid;
    gap: 10px;
}

    .mt-access-card > div {
        padding: 11px;
        border-radius: 10px;
        background: #f3f8ff;
    }

    .mt-access-card small,
    .mt-access-card strong {
        display: block;
    }

    .mt-access-card small {
        color: var(--muted);
        font-size: 9px;
    }

    .mt-access-card strong {
        margin-top: 3px;
        font-size: 18px;
    }

    .mt-access-card p,
    .mt-description-card p {
        margin: 0;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.6;
        white-space: pre-wrap;
    }

@media (max-width: 1220px) {
    .mt-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mt-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mt-form-grid,
    .mt-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    .mt-toolbar,
    .mt-list-header,
    .mt-detail-header {
        align-items: stretch;
        flex-direction: column;
    }

    .mt-toolbar-actions {
        width: 100%;
    }

    .mt-search {
        width: auto;
        flex: 1;
    }

    .mt-detail-actions {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .mt-summary-grid,
    .mt-card-grid,
    .mt-option-grid,
    .mt-form-two,
    .mt-form-actions,
    .mt-host-controls {
        grid-template-columns: 1fr;
    }

    .mt-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .mt-card-grid {
        padding: 12px;
    }

    .mt-meeting-card footer {
        grid-template-columns: 1fr;
    }

    .mt-conference-card {
        grid-template-columns: 54px minmax(0, 1fr);
    }

        .mt-conference-card > button {
            grid-column: 1 / -1;
        }

    .mt-member-control {
        grid-template-columns: 1fr;
    }
}
/* SIPCore Business Email — production desktop interface */
.em-page {
    display: grid;
    gap: 14px;
    min-width: 0
}

.em-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15,34,65,.05)
}

    .em-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px
    }

    .em-toolbar p:last-child {
        max-width: 780px;
        margin: 0;
        color: var(--muted)
    }

.em-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.em-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(350px,30vw);
    margin: 0
}

    .em-search > span {
        position: absolute;
        left: 13px;
        color: #8290a3
    }

    .em-search input {
        height: 42px;
        padding: 9px 40px;
        border-radius: 12px;
        background: #f8fafc
    }

    .em-search button {
        position: absolute;
        right: 5px;
        width: 31px;
        height: 31px;
        padding: 0;
        border: 0;
        background: transparent
    }

.em-alert {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px
}

    .em-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b
    }

    .em-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534
    }

    .em-alert button {
        width: 30px;
        height: 30px;
        padding: 0
    }

.em-loading, .em-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 30px;
    color: var(--muted);
    text-align: center
}

    .em-empty > span {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 24px
    }

    .em-empty h3 {
        margin: 11px 0 5px;
        color: var(--text)
    }

    .em-empty p {
        max-width: 460px;
        margin: 0 0 15px
    }

.em-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe6f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: em-spin .8s linear infinite
}

@keyframes em-spin {
    to {
        transform: rotate(360deg)
    }
}

.em-account-summary {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

    .em-account-summary article {
        display: grid;
        grid-template-columns: 48px minmax(0,1fr);
        align-items: center;
        gap: 12px;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff
    }

        .em-account-summary article > span {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: #eaf2ff;
            color: #1764c0;
            font-size: 21px
        }

    .em-account-summary small, .em-account-summary strong, .em-account-summary em {
        display: block
    }

    .em-account-summary small {
        color: var(--muted);
        font-size: 10px
    }

    .em-account-summary strong {
        margin: 2px 0;
        font-size: 20px
    }

    .em-account-summary em {
        color: #8290a3;
        font-size: 9px;
        font-style: normal
    }

.em-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px
}

    .em-section-header h2 {
        margin: 1px 0 0
    }

.em-account-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 13px
}

.em-account-card {
    display: grid;
    gap: 14px;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 15px
}

    .em-account-card header {
        display: grid;
        grid-template-columns: 46px minmax(0,1fr) auto;
        align-items: center;
        gap: 10px
    }

.em-account-avatar, .em-sender-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #173f78;
    font-size: 11px;
    font-weight: 800
}

.em-account-card header strong, .em-account-card header small {
    display: block
}

.em-account-card header small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px
}

.em-connection {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800
}

    .em-connection.connected {
        background: #dcfce7;
        color: #166534
    }

    .em-connection.disconnected {
        background: #fee2e2;
        color: #b91c1c
    }

.em-account-card dl {
    display: grid;
    gap: 8px;
    margin: 0
}

    .em-account-card dl > div {
        display: flex;
        justify-content: space-between;
        gap: 10px
    }

.em-account-card dt {
    color: var(--muted);
    font-size: 9px
}

.em-account-card dd {
    margin: 0;
    text-align: right;
    font-size: 9px;
    font-weight: 700
}

.em-account-card footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.em-form-shell, .em-detail-shell, .em-compose-shell {
    display: grid;
    gap: 14px
}

.em-form-header, .em-detail-toolbar, .em-compose-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px
}

.em-form-header {
    justify-content: flex-start
}

.em-back {
    width: 38px;
    height: 38px;
    padding: 0
}

.em-form-header h1, .em-detail-toolbar h1, .em-compose-header h1 {
    margin: 2px 0 5px
}

.em-form-header p:last-child {
    margin: 0;
    color: var(--muted)
}

.em-connect-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 14px
}

.em-form-card h2 {
    margin: 1px 0 14px
}

.em-form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.em-form-three {
    display: grid;
    grid-template-columns: minmax(0,1fr) 110px auto;
    align-items: end;
    gap: 10px
}

.em-inline-check {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    margin: 0
}

.em-divider {
    height: 1px;
    margin: 18px 0;
    background: #e7edf5
}

.em-toggle-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 9px;
    margin: 12px 0 0;
    padding: 11px;
    border: 1px solid #e3e9f1;
    border-radius: 11px
}

    .em-toggle-row strong, .em-toggle-row small {
        display: block
    }

    .em-toggle-row small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px
    }

.em-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 15px
}

.em-security-card {
    align-self: start;
    text-align: center
}

    .em-security-card > span {
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        margin: 0 auto 12px;
        border-radius: 18px;
        background: #eaf2ff;
        font-size: 27px
    }

    .em-security-card ul {
        padding-left: 20px;
        text-align: left;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.7
    }

.em-mailbox {
    display: grid;
    grid-template-columns: 220px minmax(360px,530px) minmax(260px,1fr);
    min-height: calc(100vh - 210px);
    padding: 0;
    overflow: hidden
}

.em-mail-sidebar {
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    border-right: 1px solid #e3e9f1;
    background: #f8fafc
}

.em-account-switcher {
    padding: 14px
}

    .em-account-switcher label {
        font-size: 9px
    }

.em-folder-list {
    display: grid;
    align-content: start;
    padding: 0 8px;
    overflow-y: auto
}

    .em-folder-list button {
        display: grid;
        grid-template-columns: 24px minmax(0,1fr) auto;
        align-items: center;
        gap: 7px;
        width: 100%;
        padding: 9px 10px;
        border-color: transparent;
        background: transparent;
        text-align: left
    }

        .em-folder-list button.active {
            background: #eaf2ff;
            color: #145fbd
        }

    .em-folder-list em {
        display: grid;
        place-items: center;
        min-width: 21px;
        height: 21px;
        padding: 0 5px;
        border-radius: 999px;
        background: #dbeafe;
        font-size: 8px;
        font-style: normal
    }

.em-mailbox-status {
    display: grid;
    grid-template-columns: 10px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e3e9f1
}

    .em-mailbox-status > span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #94a3b8
    }

        .em-mailbox-status > span.connected {
            background: #22c55e
        }

    .em-mailbox-status strong, .em-mailbox-status small {
        display: block
    }

    .em-mailbox-status small {
        color: var(--muted);
        font-size: 8px
    }

.em-message-list-pane {
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    min-width: 0;
    border-right: 1px solid #e3e9f1
}

    .em-message-list-pane > header {
        padding: 14px 16px;
        border-bottom: 1px solid #e3e9f1
    }

    .em-message-list-pane h2 {
        margin: 1px 0
    }

.em-message-list {
    min-height: 0;
    overflow-y: auto
}

.em-message-row {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    border-bottom: 1px solid #edf1f6;
    background: #fff
}

    .em-message-row.unread {
        background: #f6faff
    }

    .em-message-row.selected {
        background: #eaf2ff
    }

.em-star-button {
    width: 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #94a3b8
}

    .em-star-button.starred {
        color: #eab308
    }

.em-message-main {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left
}

.em-message-content {
    min-width: 0
}

.em-message-topline {
    display: flex;
    justify-content: space-between;
    gap: 8px
}

    .em-message-topline strong, .em-message-topline time {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .em-message-topline time {
        color: var(--muted);
        font-size: 8px
    }

.em-message-subject, .em-message-preview {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.em-message-subject {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700
}

.em-message-preview {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px
}

.em-paperclip {
    font-size: 11px
}

.em-load-more {
    margin: 10px
}

.em-preview-pane {
    display: grid;
    place-items: center;
    background: #fafbfd
}

.em-preview-placeholder {
    text-align: center;
    color: var(--muted)
}

    .em-preview-placeholder > span {
        font-size: 35px
    }

.em-detail-leading {
    display: flex;
    gap: 12px
}

.em-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

    .em-detail-actions button.active {
        background: #fff7cc;
        color: #8a6800
    }

.em-detail-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 14px
}

.em-detail-main, .em-detail-side {
    display: grid;
    align-content: start;
    gap: 14px
}

.em-message-detail-card > header {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) auto;
    gap: 11px
}

.em-sender-avatar.large {
    width: 52px;
    height: 52px
}

.em-message-detail-card header strong, .em-message-detail-card header small, .em-message-detail-card header span {
    display: block
}

.em-message-detail-card header small, .em-message-detail-card header span, .em-message-detail-card time {
    color: var(--muted);
    font-size: 9px
}

.em-message-body {
    padding: 22px 4px;
    line-height: 1.7;
    overflow-wrap: anywhere
}

    .em-message-body img {
        max-width: 100%;
        height: auto
    }

.em-attachment-section {
    padding-top: 13px;
    border-top: 1px solid #edf1f6
}

.em-attachment-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px
}

    .em-attachment-grid button {
        display: grid;
        grid-template-columns: 36px minmax(0,1fr) auto;
        align-items: center;
        gap: 8px;
        text-align: left
    }

    .em-attachment-grid strong, .em-attachment-grid small {
        display: block
    }

    .em-attachment-grid small {
        color: var(--muted);
        font-size: 8px
    }

.em-thread-item {
    border-bottom: 1px solid #edf1f6
}

    .em-thread-item summary {
        display: grid;
        grid-template-columns: 42px minmax(0,1fr) auto;
        align-items: center;
        gap: 9px;
        padding: 10px 0;
        cursor: pointer
    }

        .em-thread-item summary strong, .em-thread-item summary small {
            display: block
        }

        .em-thread-item summary small, .em-thread-item time {
            color: var(--muted);
            font-size: 8px
        }

    .em-thread-item > div {
        padding: 10px 52px 18px;
        line-height: 1.6
    }

.em-ai-card > header {
    display: flex;
    gap: 10px
}

    .em-ai-card > header > span {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #f3e8ff;
        color: #7e22ce;
        font-size: 21px
    }

.em-ai-card h2 {
    margin: 1px 0
}

.em-ai-result {
    display: grid;
    gap: 11px
}

    .em-ai-result section {
        padding: 10px;
        border-radius: 10px;
        background: #f8fafc
    }

    .em-ai-result small {
        color: var(--muted);
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase
    }

    .em-ai-result p {
        margin: 5px 0 0;
        line-height: 1.55
    }

    .em-ai-result ul {
        margin: 7px 0 0;
        padding-left: 18px
    }

.em-meeting-detected strong, .em-meeting-detected span {
    display: block;
    margin-top: 4px
}

.em-actions-card {
    display: grid;
    gap: 8px
}

    .em-actions-card h2 {
        margin-top: 0
    }

    .em-actions-card label span {
        display: block;
        margin-bottom: 4px;
        font-size: 9px
    }

.em-compose-card {
    padding: 0;
    overflow: hidden
}

.em-compose-account, .em-recipient-row, .em-subject-row {
    display: grid;
    grid-template-columns: 70px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid #edf1f6
}

.em-compose-account {
    grid-template-columns: 70px minmax(0,1fr)
}

.em-subject-row {
    grid-template-columns: 70px minmax(0,1fr)
}

    .em-compose-account label, .em-recipient-row label, .em-subject-row label {
        margin: 0;
        color: var(--muted);
        font-size: 9px
    }

    .em-compose-account select, .em-recipient-row input, .em-subject-row input {
        margin: 0;
        border: 0;
        background: transparent
    }

.em-reply-context {
    padding: 11px 14px;
    border-bottom: 1px solid #edf1f6;
    background: #f8fafc;
    font-size: 10px
}

.em-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-bottom: 1px solid #edf1f6
}

    .em-editor-toolbar button {
        width: 32px;
        height: 30px;
        padding: 0
    }

    .em-editor-toolbar span {
        flex: 1
    }

    .em-editor-toolbar small {
        color: var(--muted)
    }

.em-compose-body {
    min-height: 390px;
    margin: 0;
    padding: 18px;
    border: 0;
    border-radius: 0;
    resize: vertical
}

.em-compose-card > footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #edf1f6;
    background: #fafbfd
}

.danger {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #fff !important
}

@media(max-width:1200px) {
    .em-account-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .em-mailbox {
        grid-template-columns: 200px minmax(360px,1fr)
    }

    .em-preview-pane {
        display: none
    }

    .em-connect-grid, .em-detail-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:850px) {
    .em-toolbar, .em-detail-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .em-toolbar-actions {
        width: 100%
    }

    .em-search {
        width: auto;
        flex: 1
    }

    .em-account-summary {
        grid-template-columns: 1fr
    }

    .em-mailbox {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .em-mail-sidebar {
        grid-template-rows: auto auto auto;
        border-right: 0
    }

    .em-folder-list {
        display: flex;
        overflow-x: auto;
        padding: 8px
    }

        .em-folder-list button {
            min-width: max-content
        }

    .em-message-list-pane {
        min-height: 600px;
        border-right: 0
    }

    .em-form-three {
        grid-template-columns: 1fr 100px
    }

    .em-inline-check {
        grid-column: 1/-1
    }
}

@media(max-width:650px) {
    .em-toolbar-actions, .em-account-grid, .em-form-two, .em-form-three, .em-attachment-grid {
        display: grid;
        grid-template-columns: 1fr
    }

    .em-account-card footer {
        grid-template-columns: 1fr
    }

    .em-detail-actions {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .em-compose-account, .em-recipient-row, .em-subject-row {
        grid-template-columns: 1fr
    }

        .em-compose-account label, .em-recipient-row label, .em-subject-row label {
            display: none
        }

    .em-compose-card > footer {
        display: grid;
        grid-template-columns: 1fr
    }
}

/* =========================================================
   SIPCORE SETTINGS — PRODUCTION WEB & DESKTOP
   ========================================================= */

.st-page {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.st-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 34, 65, 0.05);
}

    .st-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px;
    }

    .st-toolbar p:last-child {
        max-width: 760px;
        margin: 0;
        color: var(--muted);
    }

.st-toolbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
}

.st-registration {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 145px;
    padding: 8px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

    .st-registration > i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #94a3b8;
    }

        .st-registration > i.registered {
            background: #22c55e;
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
        }

        .st-registration > i.registering {
            background: #f59e0b;
        }

        .st-registration > i.failed {
            background: #ef4444;
        }

    .st-registration small,
    .st-registration strong {
        display: block;
    }

    .st-registration small {
        color: var(--muted);
        font-size: 8px;
    }

    .st-registration strong {
        margin-top: 1px;
        font-size: 10px;
    }

.st-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
}

    .st-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b;
    }

    .st-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534;
    }

    .st-alert button {
        width: 30px;
        height: 30px;
        padding: 0;
    }

.st-profile-banner {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid #ccdcf1;
    border-radius: 18px;
    background: radial-gradient(circle at 90% 20%, rgba(59, 130, 246, 0.14), transparent 26%), linear-gradient(135deg, #f8fbff, #eef5ff);
}

.st-profile-avatar {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0d4b91, #2276d2);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 92, 174, 0.2);
    font-size: 20px;
    font-weight: 800;
}

    .st-profile-avatar.small {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        font-size: 16px;
    }

.st-profile-identity h2 {
    margin: 2px 0 7px;
    font-size: 22px;
}

.st-profile-identity > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

    .st-profile-identity > div span {
        padding: 4px 8px;
        border: 1px solid rgba(23, 100, 192, 0.15);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.7);
        color: #45617f;
        font-size: 9px;
        font-weight: 700;
    }

.st-profile-status {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.st-status-pill {
    padding: 6px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 9px;
    font-weight: 800;
}

    .st-status-pill.registered {
        background: #dcfce7;
        color: #166534;
    }

    .st-status-pill.registering {
        background: #fef3c7;
        color: #92400e;
    }

    .st-status-pill.failed {
        background: #fee2e2;
        color: #b91c1c;
    }

.st-profile-status small {
    color: var(--muted);
    font-size: 8px;
}

.st-settings-layout {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
}

.st-settings-nav {
    display: grid;
    align-content: start;
    gap: 5px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
}

    .st-settings-nav button {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 10px;
        border-color: transparent;
        border-radius: 11px;
        background: transparent;
        color: #526174;
        text-align: left;
    }

        .st-settings-nav button:hover {
            background: #f4f7fb;
        }

        .st-settings-nav button.active {
            border-color: #c8dcf5;
            background: #eaf2ff;
            color: #145fbd;
        }

        .st-settings-nav button > span:first-child {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: #f1f5f9;
            font-size: 15px;
        }

        .st-settings-nav button.active > span:first-child {
            background: #ffffff;
        }

    .st-settings-nav strong,
    .st-settings-nav small {
        display: block;
    }

    .st-settings-nav strong {
        font-size: 10px;
    }

    .st-settings-nav small {
        margin-top: 2px;
        color: #8793a5;
        font-size: 8px;
    }

.st-settings-content,
.st-section-stack {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.st-section-card {
    padding: 18px;
}

.st-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf1f6;
}

    .st-section-heading h2 {
        margin: 2px 0 5px;
        font-size: 19px;
    }

    .st-section-heading p:last-child {
        max-width: 680px;
        margin: 0;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.55;
    }

.st-section-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 20px;
}

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

.st-info-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e3e9f1;
    border-radius: 13px;
    background: #fafbfd;
}

    .st-info-card small,
    .st-info-card strong,
    .st-info-card p {
        display: block;
    }

    .st-info-card small {
        color: var(--muted);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .st-info-card strong {
        margin: 5px 0 3px;
        overflow-wrap: anywhere;
        font-size: 14px;
    }

    .st-info-card p {
        margin: 0;
        color: #8490a0;
        font-size: 8px;
    }

.st-account-help {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-color: #dbeafe;
    background: #f8fbff;
}

    .st-account-help > span {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #eaf2ff;
        color: #1764c0;
        font-weight: 800;
    }

    .st-account-help strong,
    .st-account-help p {
        display: block;
    }

    .st-account-help p {
        margin: 3px 0 0;
        color: var(--muted);
        font-size: 9px;
    }

.st-password-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 24px;
}

.st-password-form {
    max-width: 650px;
}

.st-password-field {
    position: relative;
    display: flex;
    align-items: center;
}

    .st-password-field input {
        padding-right: 68px;
    }

    .st-password-field button {
        position: absolute;
        right: 5px;
        min-width: 54px;
        height: 31px;
        padding: 0 8px;
        border-color: transparent;
        background: transparent;
        color: #1764c0;
        font-size: 8px;
    }

.st-password-submit {
    width: 100%;
    min-height: 43px;
    margin-top: 16px;
}

.st-field-error {
    margin: -4px 0 0;
    color: #dc2626;
    font-size: 9px;
}

.st-password-rules {
    align-self: start;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 14px;
    background: #f8fafc;
}

    .st-password-rules h3 {
        margin: 0 0 12px;
        font-size: 13px;
    }

.st-password-rule {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    color: #7b8796;
}

    .st-password-rule > span {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #e2e8f0;
        font-size: 9px;
    }

    .st-password-rule strong {
        font-size: 9px;
    }

    .st-password-rule.valid {
        color: #166534;
    }

        .st-password-rule.valid > span {
            background: #dcfce7;
        }

.st-security-note {
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    background: #fff7e6;
}

    .st-security-note strong {
        font-size: 9px;
    }

    .st-security-note p {
        margin: 4px 0 0;
        color: #7c6c4a;
        font-size: 8px;
        line-height: 1.5;
    }

.st-presence-card {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fbff, #eef6ff);
}

.st-presence-visual {
    position: relative;
    width: 62px;
}

    .st-presence-visual i {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 14px;
        height: 14px;
        border: 3px solid #eef6ff;
        border-radius: 50%;
        background: #94a3b8;
    }

        .st-presence-visual i.registered {
            background: #22c55e;
        }

        .st-presence-visual i.registering {
            background: #f59e0b;
        }

        .st-presence-visual i.failed {
            background: #ef4444;
        }

.st-presence-card small,
.st-presence-card strong,
.st-presence-card p {
    display: block;
}

.st-presence-card small {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.st-presence-card strong {
    margin-top: 3px;
    font-size: 17px;
}

.st-presence-card p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 9px;
}

.st-presence-explainer h3 {
    margin-top: 0;
}

.st-presence-explainer > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.st-presence-explainer article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    padding: 11px;
    border: 1px solid #e3e9f1;
    border-radius: 11px;
}

    .st-presence-explainer article > span {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: #eaf2ff;
        color: #1764c0;
    }

.st-presence-explainer strong,
.st-presence-explainer p {
    display: block;
}

.st-presence-explainer strong {
    font-size: 9px;
}

.st-presence-explainer p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.5;
}

.st-calling-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

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

.st-feature-card {
    display: grid;
    align-content: start;
    min-height: 175px;
    padding: 14px;
    border: 1px solid #e3e9f1;
    border-radius: 13px;
    background: #fafbfd;
}

    .st-feature-card > span {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 18px;
    }

    .st-feature-card h3 {
        margin: 11px 0 5px;
        font-size: 12px;
    }

    .st-feature-card p {
        margin: 0;
        color: var(--muted);
        font-size: 8px;
        line-height: 1.55;
    }

    .st-feature-card small {
        align-self: end;
        margin-top: 13px;
        color: #1764c0;
        font-size: 8px;
        font-weight: 800;
    }

.st-feature-note {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #fde68a;
    border-radius: 11px;
    background: #fffbeb;
}

    .st-feature-note strong {
        font-size: 9px;
    }

    .st-feature-note p {
        margin: 4px 0 0;
        color: #78643f;
        font-size: 8px;
        line-height: 1.55;
    }

@media (max-width: 1160px) {
    .st-password-layout {
        grid-template-columns: 1fr;
    }

    .st-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .st-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .st-toolbar-actions {
        justify-content: space-between;
        width: 100%;
    }

    .st-settings-layout {
        grid-template-columns: 1fr;
    }

    .st-settings-nav {
        display: flex;
        overflow-x: auto;
    }

        .st-settings-nav button {
            min-width: 190px;
        }
}

@media (max-width: 680px) {
    .st-profile-banner {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .st-profile-avatar {
        width: 58px;
        height: 58px;
        border-radius: 16px;
    }

    .st-profile-status {
        grid-column: 1 / -1;
        justify-items: start;
    }

    .st-info-grid,
    .st-calling-grid,
    .st-presence-explainer > div,
    .st-feature-grid {
        grid-template-columns: 1fr;
    }

    .st-presence-card {
        grid-template-columns: 62px minmax(0, 1fr);
    }

        .st-presence-card > button {
            grid-column: 1 / -1;
        }

    .st-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .st-registration {
        width: 100%;
    }
}
/* =========================================================
   SIPCORE AI WORKDESK REPORTS
   ========================================================= */

.air-page {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.air-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: radial-gradient(circle at 92% 16%, rgba(139, 92, 246, 0.09), transparent 25%), #ffffff;
    box-shadow: 0 8px 28px rgba(15, 34, 65, 0.05);
}

    .air-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px;
    }

    .air-toolbar p:last-child {
        max-width: 780px;
        margin: 0;
        color: var(--muted);
    }

.air-toolbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
}

.air-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(360px, 31vw);
    margin: 0;
}

    .air-search > span {
        position: absolute;
        left: 13px;
        z-index: 1;
        color: #8290a3;
        pointer-events: none;
    }

    .air-search input {
        height: 42px;
        padding: 9px 40px;
        border-radius: 12px;
        background: #f8fafc;
    }

    .air-search button {
        position: absolute;
        right: 5px;
        width: 31px;
        height: 31px;
        padding: 0;
        border: 0;
        background: transparent;
    }

.air-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
}

    .air-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b;
    }

    .air-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534;
    }

    .air-alert button {
        width: 30px;
        height: 30px;
        padding: 0;
    }

.air-loading,
.air-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 30px;
    color: var(--muted);
    text-align: center;
}

    .air-empty > span {
        display: grid;
        place-items: center;
        width: 60px;
        height: 60px;
        border-radius: 18px;
        background: #f3e8ff;
        color: #7e22ce;
        font-size: 27px;
    }

    .air-empty h3 {
        margin: 12px 0 5px;
        color: var(--text);
    }

    .air-empty p {
        max-width: 480px;
        margin: 0 0 16px;
    }

.air-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e8ddf7;
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: air-spin 0.8s linear infinite;
}

@keyframes air-spin {
    to {
        transform: rotate(360deg);
    }
}

.air-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.air-summary-card {
    display: grid;
    grid-template-columns: 49px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
}

    .air-summary-card > span {
        display: grid;
        place-items: center;
        width: 49px;
        height: 49px;
        border-radius: 14px;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 21px;
        font-weight: 800;
    }

        .air-summary-card > span.ready {
            background: #dcfce7;
            color: #15803d;
        }

        .air-summary-card > span.pending {
            background: #fef3c7;
            color: #a16207;
        }

        .air-summary-card > span.approval {
            background: #f3e8ff;
            color: #7e22ce;
        }

    .air-summary-card small,
    .air-summary-card strong,
    .air-summary-card em {
        display: block;
    }

    .air-summary-card small {
        color: var(--muted);
        font-size: 10px;
    }

    .air-summary-card strong {
        margin: 2px 0;
        font-size: 25px;
    }

    .air-summary-card em {
        color: #8290a3;
        font-size: 9px;
        font-style: normal;
    }

.air-report-panel {
    padding: 0;
    overflow: hidden;
}

.air-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

    .air-report-header h2 {
        margin: 1px 0 0;
    }

.air-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

    .air-filter-tabs button {
        min-height: 34px;
        padding: 6px 13px;
        border-color: transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 11px;
    }

        .air-filter-tabs button.active {
            background: #f3e8ff;
            color: #7e22ce;
        }

.air-report-explainer {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 14px 16px 0;
    padding: 11px 13px;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    background: #faf5ff;
}

    .air-report-explainer > span {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #f3e8ff;
        color: #7e22ce;
        font-size: 19px;
    }

    .air-report-explainer strong,
    .air-report-explainer p {
        display: block;
    }

    .air-report-explainer p {
        margin: 3px 0 0;
        color: #6d5b7d;
        font-size: 9px;
    }

.air-task-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.air-task-card {
    display: grid;
    align-content: start;
    gap: 13px;
    padding: 16px;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    background: #ffffff;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .air-task-card:hover {
        transform: translateY(-2px);
        border-color: #d8b4fe;
        box-shadow: 0 12px 28px rgba(61, 31, 94, 0.09);
    }

    .air-task-card > header {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

.air-task-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #f3e8ff;
    color: #7e22ce;
    font-size: 20px;
}

.air-task-title {
    min-width: 0;
}

    .air-task-title strong,
    .air-task-title small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .air-task-title small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 8px;
    }

.air-eligibility {
    max-width: 125px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 8px;
    font-weight: 800;
    text-align: center;
}

    .air-eligibility.ready {
        background: #dcfce7;
        color: #166534;
    }

    .air-eligibility.approval {
        background: #f3e8ff;
        color: #7e22ce;
    }

    .air-eligibility.pending {
        background: #fef3c7;
        color: #92400e;
    }

.air-task-card > p {
    min-height: 43px;
    margin: 0;
    color: #5d697a;
    font-size: 10px;
    line-height: 1.55;
}

.air-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.air-chip {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 8px;
    font-weight: 800;
}

    .air-chip.in-progress {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .air-chip.on-hold {
        background: #fef3c7;
        color: #92400e;
    }

    .air-chip.completed {
        background: #dcfce7;
        color: #166534;
    }

    .air-chip.approval {
        background: #f3e8ff;
        color: #7e22ce;
    }

    .air-chip.cancelled,
    .air-chip.critical {
        background: #fee2e2;
        color: #b91c1c;
    }

    .air-chip.high {
        background: #ffedd5;
        color: #c2410c;
    }

    .air-chip.low {
        background: #ecfeff;
        color: #0e7490;
    }

.air-progress-label {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 8px;
}

    .air-progress-label strong {
        color: var(--text);
    }

.air-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f6;
}

    .air-progress i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #7c3aed, #a855f7);
    }

.air-task-card dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

    .air-task-card dl > div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

.air-task-card dt {
    color: var(--muted);
    font-size: 8px;
}

.air-task-card dd {
    margin: 0;
    max-width: 62%;
    overflow: hidden;
    font-size: 8px;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.air-readiness-note {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 8px;
    border-radius: 10px;
    background: #f8fafc;
}

    .air-readiness-note > span {
        display: grid;
        place-items: center;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: #e2e8f0;
        font-size: 9px;
        font-weight: 800;
    }

    .air-readiness-note p {
        margin: 0;
        color: #667386;
        font-size: 8px;
        line-height: 1.45;
    }

    .air-readiness-note.ready {
        background: #f0fdf4;
    }

        .air-readiness-note.ready > span {
            background: #dcfce7;
            color: #166534;
        }

    .air-readiness-note.approval {
        background: #faf5ff;
    }

        .air-readiness-note.approval > span {
            background: #f3e8ff;
            color: #7e22ce;
        }

    .air-readiness-note.pending {
        background: #fffbeb;
    }

        .air-readiness-note.pending > span {
            background: #fef3c7;
            color: #92400e;
        }

.air-task-card footer {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 7px;
    margin-top: auto;
}

@media (max-width: 1220px) {
    .air-task-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .air-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .air-toolbar,
    .air-report-header {
        align-items: stretch;
        flex-direction: column;
    }

    .air-toolbar-actions {
        width: 100%;
    }

    .air-search {
        width: auto;
        flex: 1;
    }
}

@media (max-width: 650px) {
    .air-summary-grid,
    .air-task-grid {
        grid-template-columns: 1fr;
    }

    .air-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .air-task-grid {
        padding: 12px;
    }

    .air-task-card > header {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .air-eligibility {
        grid-column: 1 / -1;
        max-width: none;
    }

    .air-task-card footer {
        grid-template-columns: 1fr;
    }
}
.login-password-field {
    position: relative;
    display: flex;
    align-items: center;
}

    .login-password-field input {
        width: 100%;
        padding-right: 72px;
    }

.login-password-toggle {
    position: absolute;
    right: 6px;
    width: auto;
    min-width: 54px;
    height: 32px;
    padding: 0 9px;
    border-color: transparent;
    background: transparent;
    color: var(--brand);
    font-size: 9px;
}

.remember-login-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0;
    padding: 11px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #f8fafc;
    cursor: pointer;
}

    .remember-login-option input {
        width: 17px;
        height: 17px;
        margin: 2px 0 0;
    }

    .remember-login-option strong,
    .remember-login-option small {
        display: block;
    }

    .remember-login-option small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px;
        line-height: 1.45;
    }

.login-advanced-settings {
    margin: 10px 0 16px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #ffffff;
}

    .login-advanced-settings summary {
        color: #526174;
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
    }

    .login-advanced-settings[open] summary {
        margin-bottom: 12px;
    }

.login-restoring {
    display: grid;
    justify-items: center;
    gap: 15px;
    min-height: 360px;
    align-content: center;
    text-align: center;
}

.login-restoring-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #dbe7f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: login-session-spin 0.8s linear infinite;
}

@keyframes login-session-spin {
    to {
        transform: rotate(360deg);
    }
}

:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --text: #172033;
    --muted: #687386;
    --line: #e5eaf2;
    --brand: #0f6bff;
    --brand2: #062b70;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 1px solid var(--line);
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
}

    button:disabled {
        cursor: not-allowed;
    }

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
    background: #ffffff;
    color: var(--text);
}

    input:focus,
    textarea:focus,
    select:focus {
        border-color: #8cb4ff;
        outline: 3px solid rgba(15, 107, 255, 0.1);
    }

textarea {
    min-height: 100px;
}

label {
    display: block;
    margin: 12px 0 6px;
    font-weight: 800;
}

h1 {
    margin: 0 0 8px;
    font-size: 34px;
}

h2 {
    margin: 0 0 12px;
}

code {
    border-radius: 6px;
    background: #eef3ff;
    padding: 2px 6px;
}

/* =========================================================
   GENERAL APPLICATION SHELL
   ========================================================= */

.app-shell {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    min-height: 100vh;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 22px;
    background: #07172f;
    color: #ffffff;
}

    .side-nav a {
        color: #dbe7ff;
        text-decoration: none;
        padding: 12px 14px;
        border-radius: 12px;
    }

        .side-nav a.active,
        .side-nav a:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
        }

.primary-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-spacer {
    flex: 1;
}

.content {
    min-width: 0;
    padding: 24px 28px;
}

.auth-content {
    min-height: 100vh;
    padding: 28px;
    background: radial-gradient( circle at top left, #eaf2ff 0, #f6f8fc 38%, #eef3f9 100% );
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    margin-bottom: 26px;
    padding: 13px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
}

    .topbar span {
        display: block;
        color: #aeb9ca;
        font-size: 12px;
    }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-identity strong,
.topbar-identity span {
    display: block;
}

.logout-button {
    border-color: #d9e0ea;
    background: #ffffff;
    color: #334155;
    white-space: nowrap;
}

    .logout-button:hover {
        border-color: #f3b3b3;
        background: #fff5f5;
        color: #b91c1c;
    }

/* =========================================================
   BRANDING
   ========================================================= */

.brand {
    display: block;
    margin-bottom: 22px;
}

.brand-logo {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
    padding: 8px;
    border-radius: 12px;
    background: #ffffff;
}

.brand > span {
    display: block;
    margin: 8px 0 0 10px;
    color: #aeb9ca;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #10b981, #0f6bff);
    font-weight: 800;
}

.engine-card {
    margin-top: 18px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
}

    .engine-card strong,
    .engine-card span {
        display: block;
    }

    .engine-card.simulation {
        background: #493415;
    }

    .engine-card.native {
        background: #123e31;
    }

/* =========================================================
   COMMON COMPONENTS
   ========================================================= */

.lead {
    max-width: 940px;
    color: var(--muted);
    font-size: 17px;
}

.grid {
    display: grid;
    gap: 16px;
    margin: 18px 0;
}

.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 18px;
}

.narrow {
    max-width: 560px;
}

.stat-card,
.panel {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 10px 25px rgba(22, 35, 58, 0.04);
}

    .stat-card span,
    .stat-card small,
    .task-row span,
    .task-row small,
    .list-row small {
        color: var(--muted);
    }

    .stat-card strong {
        display: block;
        margin: 8px 0;
        font-size: 34px;
    }

.hero-card,
.page-title {
    margin-bottom: 18px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff, #eef5ff);
}

.eyebrow {
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

    .eyebrow.light {
        color: #8fb8ff;
    }

.pill {
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    background: #eef5ff;
    color: var(--brand2);
    padding: 7px 12px;
    font-size: 13px;
}

.primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.wide {
    width: 100%;
    margin-top: 20px;
}

.toolbar {
    display: flex;
    gap: 10px;
    margin: 18px 0;
}

.timeline {
    display: grid;
    gap: 14px;
}

    .timeline div,
    .list-row,
    .task-row {
        border-top: 1px solid var(--line);
        padding: 14px 0;
    }

.task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

    .task-row strong,
    .task-row span {
        display: block;
    }

.status {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #ffe2a8;
    border-radius: 12px;
    background: #fff8e6;
}

.error-status {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #9f1239;
}

.success-status {
    border-color: #bbf7d0;
    background: #effcf4;
    color: #166534;
}

.empty-state {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #ffffff;
}

.list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.list-item {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
}

/* =========================================================
   TABLES
   ========================================================= */

.table-card {
    margin-top: 18px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

th {
    background: #f8fbff;
    color: #4b5b73;
}

/* =========================================================
   LOGIN
   ========================================================= */

.login-only-shell {
    min-height: calc(100vh - 56px);
    max-width: 1320px;
    margin: 0 auto;
}

.login-shell {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;
    gap: 24px;
    min-height: calc(100vh - 150px);
}

.login-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 46px;
    border-radius: 26px;
    background: linear-gradient(145deg, #07172f, #19396f);
    color: #ffffff;
}

.login-logo {
    width: min(520px, 100%);
    margin-bottom: 28px;
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
}

.login-brand-panel h1 {
    font-size: 42px;
    line-height: 1.1;
}

.login-brand-panel p {
    color: #dbe7ff;
    font-size: 17px;
    line-height: 1.7;
}

.login-form {
    align-self: center;
    width: 100%;
    max-width: 620px;
    padding: 34px;
}

.login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-intro {
    margin: 0 0 22px;
    color: var(--muted);
    line-height: 1.6;
}

.login-submit {
    min-height: 48px;
}

.login-benefits {
    display: grid;
    gap: 10px;
    margin: 18px 0;
    color: #e7efff;
}

    .login-benefits span {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .login-benefits span::before {
            content: "✓";
            display: grid;
            place-items: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            color: #7ef0b5;
            font-weight: 900;
        }

.mode-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 13px 16px;
    border-radius: 14px;
}

    .mode-banner strong,
    .mode-banner span {
        display: block;
    }

    .mode-banner.warning {
        border: 1px solid #f4d27d;
        background: #fff6df;
        color: #6b4b00;
    }

    .mode-banner.success {
        border: 1px solid #9fe0b8;
        background: #e9fbf1;
        color: #155c34;
    }

.login-brand-panel .mode-banner {
    margin-top: 24px;
}

/* =========================================================
   ROUTE LOADING
   ========================================================= */

.route-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 100vh;
    background: #f5f7fb;
    color: var(--brand2);
}

    .route-loading img {
        width: 76px;
        height: 76px;
        object-fit: contain;
        border-radius: 20px;
        box-shadow: 0 16px 40px rgba(6, 43, 112, 0.16);
    }

/* =========================================================
   REGISTRATION STATUS
   ========================================================= */

.registration-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
}

    .registration-dot.registered {
        background: #22c55e;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
    }

    .registration-dot.registering {
        background: #f59e0b;
    }

    .registration-dot.failed {
        background: #ef4444;
    }

    .registration-dot.offline {
        background: #94a3b8;
    }

/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient( 135deg, #ffffff 0, #f3f7ff 60%, #e9f2ff 100% );
    box-shadow: 0 18px 46px rgba(26, 52, 94, 0.06);
}

    .dashboard-welcome h1 {
        font-size: 32px;
    }

.dashboard-presence {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 330px;
    padding: 14px 16px;
    border: 1px solid #dce7f7;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

    .dashboard-presence div {
        flex: 1;
    }

    .dashboard-presence strong,
    .dashboard-presence small {
        display: block;
    }

    .dashboard-presence small {
        margin-top: 3px;
        color: var(--muted);
    }

.dashboard-warning {
    margin: 14px 0;
    padding: 12px 15px;
    border: 1px solid #f5d58b;
    border-radius: 14px;
    background: #fff8e7;
    color: #714f00;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.dashboard-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 150px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #ffffff;
    text-align: left;
    box-shadow: 0 10px 28px rgba(15, 34, 65, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .dashboard-metric:hover {
        border-color: #bcd2f5;
        box-shadow: 0 18px 36px rgba(15, 34, 65, 0.09);
        transform: translateY(-2px);
    }

    .dashboard-metric .metric-icon {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        margin-bottom: 12px;
        border-radius: 12px;
        background: #edf4ff;
        color: #0f5bd4;
        font-size: 20px;
    }

    .dashboard-metric small {
        color: var(--muted);
        font-weight: 700;
    }

    .dashboard-metric strong {
        margin: 5px 0;
        color: var(--text);
        font-size: 24px;
    }

    .dashboard-metric em {
        color: var(--muted);
        font-size: 12px;
        font-style: normal;
    }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    align-items: start;
    gap: 18px;
}

    .dashboard-grid > .panel {
        margin: 0;
    }

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .section-heading h2 {
        font-size: 21px;
    }

    .section-heading .eyebrow {
        margin: 0 0 5px;
    }

    .section-heading button {
        padding: 8px 11px;
        font-size: 12px;
    }

.dashboard-list {
    display: grid;
}

.dashboard-list-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

    .dashboard-list-row:first-child {
        border-top: 0;
    }

    .dashboard-list-row strong,
    .dashboard-list-row small {
        display: block;
    }

    .dashboard-list-row small {
        margin-top: 4px;
        color: var(--muted);
    }

.priority-indicator {
    width: 10px;
    height: 42px;
    border-radius: 999px;
    background: #94a3b8;
}

    .priority-indicator.high {
        background: #ef4444;
    }

    .priority-indicator.normal {
        background: #3b82f6;
    }

    .priority-indicator.low {
        background: #22c55e;
    }

.status-chip {
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef4ff;
    color: #234b88;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.compact-empty {
    padding: 22px;
    border: 1px dashed #cbd8e8;
    border-radius: 16px;
    background: #fafcff;
    text-align: center;
}

    .compact-empty strong,
    .compact-empty span {
        display: block;
    }

    .compact-empty span {
        margin-top: 5px;
        color: var(--muted);
    }

.quick-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .quick-action-grid button {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        padding: 14px;
        text-align: left;
    }

        .quick-action-grid button > span {
            display: grid;
            grid-row: 1 / 3;
            place-items: center;
            width: 32px;
            height: 32px;
            border-radius: 10px;
            background: #edf4ff;
            color: #0f5bd4;
            font-size: 17px;
        }

    .quick-action-grid strong,
    .quick-action-grid small {
        display: block;
    }

    .quick-action-grid small {
        margin-top: 2px;
        color: var(--muted);
        font-weight: 500;
    }

.meeting-date-box {
    display: grid;
    place-items: center;
    align-content: center;
    width: 48px;
    height: 52px;
    border-radius: 12px;
    background: #edf4ff;
    color: #173f78;
}

    .meeting-date-box strong {
        font-size: 19px;
        line-height: 1;
    }

    .meeting-date-box small {
        margin-top: 3px;
        font-size: 10px;
        text-transform: uppercase;
    }

.online-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

    .online-contact-grid button {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 9px;
        align-items: center;
        gap: 9px;
        padding: 10px;
        text-align: left;
    }

        .online-contact-grid button span strong,
        .online-contact-grid button span small {
            display: block;
        }

        .online-contact-grid button span small {
            margin-top: 2px;
            color: var(--muted);
            font-weight: 500;
        }

        .online-contact-grid button i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
        }

.contact-avatar {
    display: grid !important;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8f0ff;
    color: #173f78;
    font-weight: 800;
}

/* =========================================================
   CALLS PAGE
   ========================================================= */

.calls-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.call-status-summary {
    flex-shrink: 0;
    text-align: right;
}

    .call-status-summary strong {
        margin-left: 8px;
    }

    .call-status-summary small {
        display: block;
        margin-top: 4px;
        color: var(--muted);
    }

.phone-workspace {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(300px, 1fr) minmax(320px, 1.05fr);
    align-items: stretch;
    gap: 18px;
}

    .phone-workspace > .panel {
        min-width: 0;
        min-height: 600px;
    }

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .panel-heading h2 {
        margin-bottom: 3px;
    }

    .panel-heading small {
        color: var(--muted);
    }

.text-button {
    padding: 7px 10px;
    border-color: transparent;
    background: transparent;
    color: var(--brand);
    font-size: 12px;
}

    .text-button:hover:not(:disabled) {
        background: #eef5ff;
    }

    .text-button.danger {
        color: #c83c3c;
    }

        .text-button.danger:hover:not(:disabled) {
            background: #fff0f0;
        }

    .text-button:disabled {
        opacity: 0.45;
    }

/* =========================================================
   CALL HISTORY
   ========================================================= */

.recents-panel {
    min-width: 0;
    overflow: hidden;
}

.history-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

    .history-filters .search-box {
        min-width: 0;
        margin: 0;
    }

    .history-filters input,
    .history-filters select {
        height: 42px;
    }

.call-history-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

.recent-call {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px 82px;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 78px;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid #e5eaf2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .recent-call:hover {
        border-color: #bfd0e5;
        box-shadow: 0 8px 22px rgba(17, 43, 73, 0.08);
        transform: translateY(-1px);
    }

.recent-call-main {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .recent-call-main:hover,
    .recent-call-main:focus {
        background: transparent;
    }

    .recent-call-main:focus-visible {
        outline: 2px solid #2f80ed;
        outline-offset: 3px;
    }

.recent-call .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    margin: 0;
    border-radius: 50%;
    background: #eaf1fb;
    color: #173b65;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
}

.recent-call-details {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 4px;
    overflow: hidden;
}

.recent-call-name {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #172033;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-call-meta {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 5px;
    overflow: hidden;
    color: #687386;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

    .recent-call-meta span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .recent-call-meta span:first-child {
            flex-shrink: 1;
        }

        .recent-call-meta span:last-child {
            flex-shrink: 0;
        }

.meta-separator {
    flex: 0 0 auto;
    color: #a1aaba;
}

.duration-label {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #8792a2;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 34px;
    height: 34px;
    margin: 0;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

    .call-direction.outgoing {
        background: #e9f8f0;
        color: #16865c;
    }

    .call-direction.incoming {
        background: #eaf2ff;
        color: #2563b9;
    }

    .call-direction.missed {
        background: #fff0f0;
        color: #d14343;
    }

.history-actions {
    display: grid;
    grid-template-columns: repeat(2, 36px);
    align-items: center;
    justify-content: end;
    width: 82px;
    min-width: 82px;
    gap: 8px;
}

.history-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: #ffffff;
    color: #36465c;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

    .history-action:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    .history-action.call-again {
        border-color: #c8e8db;
        background: #f5fcf9;
        color: #13795b;
    }

        .history-action.call-again:hover:not(:disabled) {
            border-color: #86cfb5;
            background: #e8f8f1;
        }

    .history-action.delete-history {
        border-color: #f0d2d2;
        background: #fffafa;
        color: #c83c3c;
    }

        .history-action.delete-history:hover:not(:disabled) {
            border-color: #efaaaa;
            background: #fff0f0;
        }

    .history-action:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        transform: none;
    }

.empty-call-history {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 24px;
    color: var(--muted);
    text-align: center;
}

    .empty-call-history h3 {
        margin: 8px 0 4px;
        color: var(--text);
    }

/* =========================================================
   DIALER
   ========================================================= */

.dialer-panel {
    min-width: 0;
}

.number-display {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
}

    .number-display button {
        padding: 0;
        font-size: 20px;
    }

.dialpad {
    display: grid;
    grid-template-columns: repeat(3, 90px);
    gap: 10px;
    margin: 18px 0;
}

    .dialpad button {
        height: 62px;
    }

.desktop-dialpad {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

    .desktop-dialpad button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 68px;
    }

        .desktop-dialpad button:hover {
            border-color: #b8cae3;
            background: #f6f9fe;
        }

        .desktop-dialpad button strong {
            font-size: 22px;
        }

        .desktop-dialpad button small {
            min-height: 12px;
            color: var(--muted);
            font-size: 10px;
            letter-spacing: 0.12em;
        }

.call-button {
    width: 100%;
    padding: 14px;
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    font-size: 17px;
}

    .call-button:hover:not(:disabled) {
        border-color: #138a40;
        background: #138a40;
    }

    .call-button:disabled {
        opacity: 0.45;
    }

.call-card {
    padding: 18px;
    border: 1px dashed #bad2ff;
    border-radius: 18px;
    background: #f8fbff;
}

/* =========================================================
   ACTIVE CALL
   ========================================================= */

.active-call-panel {
    min-width: 0;
}

.idle-call,
.live-call {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    text-align: center;
}

.phone-orb {
    display: grid;
    place-items: center;
    width: 94px;
    height: 94px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #eef5ff;
    color: #15376b;
    font-size: 38px;
}

    .phone-orb.small {
        width: 58px;
        height: 58px;
        margin-bottom: 8px;
        font-size: 24px;
    }

.idle-call dl {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px 18px;
    margin-top: 22px;
    text-align: left;
}

.idle-call dt {
    color: var(--muted);
}

.idle-call dd {
    margin: 0;
    font-weight: 700;
}

.call-state-badge {
    padding: 7px 13px;
    border-radius: 999px;
    background: #edf4ff;
    color: #173d78;
    font-weight: 800;
}

.avatar,
.large-avatar {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f0ff;
    color: #16386e;
    font-weight: 800;
}

.large-avatar {
    width: 110px;
    height: 110px;
    margin: 24px;
    font-size: 42px;
}

.duration {
    margin: 14px;
    font-size: 28px;
}

.call-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 18px;
}

    .call-controls button.active {
        border-color: #8cb4ff;
        background: #e8f0ff;
    }

    .call-controls .answer {
        border-color: #16a34a;
        background: #16a34a;
        color: #ffffff;
    }

        .call-controls .answer:hover {
            border-color: #138a40;
            background: #138a40;
        }

    .call-controls .hangup {
        border-color: #dc2626;
        background: #dc2626;
        color: #ffffff;
    }

        .call-controls .hangup:hover {
            border-color: #b91c1c;
            background: #b91c1c;
        }

.dtmf-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
}

/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 1320px) {
    .dashboard-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .phone-workspace {
        grid-template-columns: 1fr 1fr;
    }

    .active-call-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1250px) {
    .recent-call {
        grid-template-columns: minmax(0, 1fr) 36px;
    }

    .history-actions {
        grid-column: 1 / -1;
        display: flex;
        width: 100%;
        min-width: 0;
        justify-content: flex-end;
        padding-top: 9px;
        border-top: 1px solid #eef1f5;
    }
}

@media (max-width: 1000px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-presence {
        width: 100%;
        min-width: 0;
    }
}

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

    .side-nav {
        position: static;
        border-radius: 0;
    }

    .content {
        padding: 16px;
    }

    .four,
    .three,
    .split,
    .metric-grid,
    .two-col {
        grid-template-columns: 1fr;
    }

    .task-row {
        display: block;
    }

    .dialpad {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        min-height: 420px;
    }
}

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

    .topbar {
        height: auto;
        align-items: flex-start;
        gap: 12px;
    }

    .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .dashboard-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .quick-action-grid,
    .online-contact-grid {
        grid-template-columns: 1fr;
    }

    .phone-workspace {
        grid-template-columns: 1fr;
    }

    .active-call-panel {
        grid-column: auto;
    }

    .calls-title {
        display: block;
    }

    .call-status-summary {
        margin-top: 14px;
        text-align: left;
    }

    .login-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .history-filters {
        grid-template-columns: 1fr;
    }

    .recent-call {
        grid-template-columns: minmax(0, 1fr) 34px;
        padding: 10px;
    }

    .recent-call-main {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
    }

    .recent-call .avatar {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 15px;
    }

    .history-actions {
        grid-column: 1 / -1;
        display: flex;
        width: 100%;
        justify-content: flex-end;
        padding-top: 9px;
        border-top: 1px solid #eef1f5;
    }

    .call-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .dashboard-metrics {
        grid-template-columns: 1fr;
    }

    .dashboard-list-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

        .dashboard-list-row > .status-chip {
            grid-column: 2;
        }

    .dashboard-presence {
        flex-wrap: wrap;
    }

    .hero-card,
    .page-title {
        padding: 20px;
    }

    h1 {
        font-size: 28px;
    }

    .login-brand-panel {
        padding: 28px;
    }

        .login-brand-panel h1 {
            font-size: 34px;
        }

    .login-form {
        padding: 24px;
    }

    .idle-call dl {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .idle-call dt {
        margin-top: 8px;
    }

    .dtmf-row {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PRODUCTION MESSAGING WORKSPACE
   Keep this block at the END of site.css
   ========================================================= */

.messages-page {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: calc(100vh - 118px);
    min-height: 680px;
    overflow: hidden;
}

.messages-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 20px;
    margin-bottom: 14px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(15, 34, 65, 0.05);
}

.messages-toolbar-heading {
    min-width: 0;
}

.messages-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .messages-title-row h1 {
        margin: 0;
        font-size: 26px;
        line-height: 1.2;
    }

.messages-toolbar-heading > p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.messages-total-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.messages-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.messages-global-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(320px, 32vw);
    margin: 0;
    font-weight: 400;
}

    .messages-global-search > span {
        position: absolute;
        z-index: 1;
        left: 13px;
        color: #8591a3;
        font-size: 18px;
        pointer-events: none;
    }

    .messages-global-search input {
        height: 42px;
        padding: 9px 40px;
        border-radius: 12px;
        background: #f8fafc;
    }

    .messages-global-search button {
        position: absolute;
        right: 5px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        background: transparent;
    }

.new-message-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    white-space: nowrap;
}

.professional-messaging-workspace {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    gap: 14px;
    overflow: hidden;
}

    .professional-messaging-workspace > .panel {
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        border-radius: 18px;
    }

.conversation-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding: 0;
}

.conversation-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 18px 13px;
    border-bottom: 1px solid #edf1f6;
}

    .conversation-panel-header h2 {
        margin: 0;
        font-size: 18px;
    }

    .conversation-panel-header small {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 11px;
    }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 11px;
    background: #f8fafc;
    color: #334155;
    font-size: 18px;
}

    .icon-button:hover:not(:disabled) {
        border-color: #b9cbea;
        background: #eef5ff;
        color: var(--brand);
    }

.conversation-filter-bar {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid #edf1f6;
}

    .conversation-filter-bar button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        gap: 6px;
        padding: 5px 12px;
        border-color: transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 12px;
    }

        .conversation-filter-bar button:hover {
            background: #f1f5f9;
        }

        .conversation-filter-bar button.active {
            background: #e9f2ff;
            color: #1358b8;
        }

        .conversation-filter-bar button span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 19px;
            height: 19px;
            padding: 0 5px;
            border-radius: 999px;
            background: var(--brand);
            color: #ffffff;
            font-size: 10px;
        }

.conversation-list {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.conversation-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 11px;
    margin: 0;
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    border-radius: 0;
    background: #ffffff;
    color: inherit;
    text-align: left;
}

    .conversation-row:hover {
        background: #f8fbff;
    }

    .conversation-row.selected {
        box-shadow: inset 3px 0 0 var(--brand);
        background: #edf5ff;
    }

.conversation-avatar-wrapper {
    position: relative;
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
}

.conversation-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(145deg, #eaf2ff, #d7e7ff);
    color: #173f78;
    font-weight: 800;
}

    .conversation-avatar.large {
        width: 46px;
        height: 46px;
    }

    .conversation-avatar.extra-large {
        width: 78px;
        height: 78px;
        font-size: 25px;
    }

.presence-indicator {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #94a3b8;
}

    .presence-indicator.online {
        background: #22c55e;
    }

.conversation-summary {
    display: block;
    min-width: 0;
}

.conversation-name-row,
.conversation-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 8px;
}

    .conversation-name-row strong {
        overflow: hidden;
        color: var(--text);
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .conversation-name-row time {
        flex: 0 0 auto;
        color: #8a95a5;
        font-size: 10px;
        font-weight: 500;
    }

.conversation-extension-line {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #8290a3;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-preview-row {
    margin-top: 5px;
}

.conversation-preview {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-you-prefix {
    color: #40516a;
    font-weight: 700;
}

.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    flex: 0 0 auto;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

.conversation-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 9px 14px;
    border-top: 1px solid #edf1f6;
    background: #fafbfd;
    color: var(--muted);
    font-size: 10px;
}

.chat-panel {
    padding: 0;
}

.chat-layout {
    display: grid;
    grid-template-rows: 72px minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.professional-chat-header {
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 16px;
    padding: 11px 16px;
    border-bottom: 1px solid #e6ebf2;
    background: #ffffff;
}

.chat-header-leading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}

.chat-contact-details {
    display: block;
    min-width: 0;
}

    .chat-contact-details strong,
    .chat-contact-details small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-contact-details strong {
        font-size: 15px;
    }

    .chat-contact-details small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 500;
    }

.chat-header-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
}

.mobile-chat-back-button {
    display: none;
    width: 36px;
    height: 36px;
    padding: 0;
}

.chat-message-area {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 8px;
    padding: 20px 24px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(rgba(248, 250, 253, 0.96), rgba(242, 246, 251, 0.96)), radial-gradient(circle at top left, #eaf2ff, transparent 45%);
    scrollbar-width: thin;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.chat-placeholder,
.messaging-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
    padding: 30px;
    color: var(--muted);
    text-align: center;
}

    .chat-placeholder h2,
    .messaging-empty h3 {
        margin: 8px 0;
        color: var(--text);
    }

    .chat-placeholder p,
    .messaging-empty p {
        max-width: 440px;
        margin: 0 0 18px;
        line-height: 1.55;
    }

.message-orb {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #e8f1ff;
    font-size: 27px;
}

    .message-orb.large {
        width: 86px;
        height: 86px;
        font-size: 39px;
    }

.message-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 9px 0;
}

    .message-date-separator span {
        padding: 5px 11px;
        border: 1px solid #dce5ef;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        color: #718096;
        font-size: 10px;
        font-weight: 700;
    }

.chat-message-row {
    display: flex;
    width: 100%;
}

    .chat-message-row.mine {
        justify-content: flex-end;
    }

    .chat-message-row.theirs {
        justify-content: flex-start;
    }

.chat-bubble {
    position: relative;
    width: fit-content;
    max-width: min(70%, 660px);
    padding: 10px 12px 7px;
    border: 1px solid #dde5ef;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(22, 42, 75, 0.05);
}

.chat-message-row.mine .chat-bubble {
    border-color: #bdd5fa;
    border-bottom-right-radius: 5px;
    background: #e5f0ff;
}

.chat-message-row.theirs .chat-bubble {
    border-bottom-left-radius: 5px;
}

.message-body {
    margin: 0;
    color: #172033;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.message-metadata {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 5px;
    color: #78869a;
    font-size: 9px;
}

.message-status.read {
    color: #1473e6;
}

.message-status.failed {
    color: #d92d20;
}

.deleted-message {
    margin: 0;
    color: #7e8998;
    font-size: 12px;
    font-style: italic;
}

.reply-preview {
    display: grid;
    gap: 2px;
    margin-bottom: 7px;
    padding: 7px 9px;
    border-left: 3px solid var(--brand);
    border-radius: 7px;
    background: rgba(15, 107, 255, 0.08);
    color: #526177;
    font-size: 10px;
}

.message-actions {
    position: absolute;
    z-index: 4;
    top: -18px;
    right: 7px;
    display: none;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 34, 65, 0.14);
}

.chat-bubble:hover .message-actions {
    display: flex;
}

.message-actions button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
}

    .message-actions button:hover {
        background: #edf4ff;
    }

.message-reaction {
    position: absolute;
    right: 7px;
    bottom: -14px;
    min-width: 29px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ffffff;
    font-size: 14px;
}

.reaction-menu {
    position: absolute;
    z-index: 6;
    right: 5px;
    bottom: calc(100% + 7px);
    display: flex;
    gap: 2px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(15, 34, 65, 0.18);
}

    .reaction-menu button {
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
    }

.voice-message-card {
    display: grid;
    grid-template-columns: 38px minmax(180px, 310px);
    align-items: center;
    gap: 9px;
    min-width: 250px;
}

    .voice-message-card > div {
        min-width: 0;
    }

    .voice-message-card strong {
        display: block;
        margin-bottom: 5px;
        font-size: 11px;
    }

    .voice-message-card audio {
        display: block;
        width: 100%;
        height: 34px;
    }

.media-message-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(15, 107, 255, 0.1);
    font-size: 18px;
}

.attachment-message-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    align-items: center;
    min-width: 260px;
    max-width: 430px;
    gap: 9px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    text-align: left;
}

    .attachment-message-card > span:nth-child(2) {
        min-width: 0;
    }

    .attachment-message-card strong,
    .attachment-message-card small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .attachment-message-card strong {
        font-size: 11px;
    }

    .attachment-message-card small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px;
    }

.attachment-open-icon {
    color: var(--brand);
}

.professional-message-composer {
    z-index: 4;
    padding: 11px 14px 9px;
    border-top: 1px solid #e3e9f1;
    background: #ffffff;
}

.composer-main-row {
    display: grid;
    grid-template-columns: 40px 40px minmax(0, 1fr) auto;
    align-items: end;
    gap: 7px;
}

.hidden-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.composer-tool-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8fafc;
    color: #445269;
    font-size: 17px;
    cursor: pointer;
}

    .composer-tool-button:hover {
        border-color: #afc7e8;
        background: #edf5ff;
    }

    .composer-tool-button.disabled {
        opacity: 0.45;
        pointer-events: none;
    }

.composer-input-wrapper {
    min-width: 0;
}

    .composer-input-wrapper textarea {
        display: block;
        width: 100%;
        min-height: 42px;
        max-height: 120px;
        margin: 0;
        padding: 10px 12px;
        resize: none;
        line-height: 1.4;
    }

.send-message-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 42px;
    gap: 6px;
    padding: 8px 16px;
}

.composer-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
    margin-top: 4px;
}

    .composer-footer-row small {
        color: #929cac;
        font-size: 9px;
    }

.conversation-syncing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 9px;
}

.composer-reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    padding: 7px 9px;
    border-left: 3px solid var(--brand);
    border-radius: 8px;
    background: #eef5ff;
    color: #526177;
    font-size: 10px;
}

    .composer-reply-preview button {
        width: 28px;
        height: 28px;
        padding: 0;
    }

.recording-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff6f6;
    color: #991b1b;
}

.recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    animation: sipcore-recording-pulse 1.1s infinite;
}

@keyframes sipcore-recording-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.75);
    }
}

.message-modal-backdrop {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(10, 24, 46, 0.58);
    backdrop-filter: blur(4px);
}

.message-modal {
    width: min(520px, 100%);
    overflow: hidden;
    border: 1px solid #dce4ee;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(8, 25, 52, 0.28);
}

.message-modal-header {
    position: relative;
    padding: 22px 58px 16px 22px;
    border-bottom: 1px solid var(--line);
}

    .message-modal-header h2 {
        margin: 3px 0 7px;
    }

    .message-modal-header p:last-child {
        margin: 0;
        color: var(--muted);
        line-height: 1.5;
    }

.modal-close-button {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    padding: 0;
}

.message-modal-body {
    padding: 18px 22px;
}

.optional-label {
    margin-left: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.message-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: #fafbfd;
}

.message-toast {
    position: fixed;
    z-index: 6000;
    top: 20px;
    right: 20px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    align-items: center;
    width: min(390px, calc(100vw - 40px));
    gap: 10px;
    padding: 11px;
    border: 1px solid #bfe6cd;
    border-radius: 13px;
    background: #f2fff7;
    box-shadow: 0 18px 45px rgba(15, 34, 65, 0.18);
}

    .message-toast.error {
        border-color: #f2bcbc;
        background: #fff5f5;
    }

.message-toast-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dff7e8;
    color: #166534;
    font-weight: 900;
}

.message-toast.error .message-toast-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.message-toast-content {
    min-width: 0;
}

    .message-toast-content strong,
    .message-toast-content span {
        display: block;
    }

    .message-toast-content span {
        margin-top: 2px;
        overflow: hidden;
        color: #566378;
        font-size: 11px;
        text-overflow: ellipsis;
    }

.message-toast > button {
    width: 30px;
    height: 30px;
    padding: 0;
}

.message-loading-spinner,
.mini-spinner {
    border-radius: 50%;
    border: 2px solid #dbe6f5;
    border-top-color: var(--brand);
    animation: sipcore-message-spin 0.8s linear infinite;
}

.message-loading-spinner {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
}

.mini-spinner {
    width: 12px;
    height: 12px;
}

@keyframes sipcore-message-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1100px) {
    .professional-messaging-workspace {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .messages-global-search {
        width: 230px;
    }

    .chat-bubble {
        max-width: 80%;
    }
}

@media (max-width: 820px) {
    .messages-page {
        height: calc(100vh - 92px);
        min-height: 560px;
    }

    .messages-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .messages-toolbar-actions {
        width: 100%;
    }

    .messages-global-search {
        width: auto;
        flex: 1;
    }

    .professional-messaging-workspace {
        display: block;
    }

    .conversation-panel,
    .chat-panel {
        width: 100%;
        height: 100%;
    }

        .conversation-panel.mobile-hidden {
            display: none;
        }

    .chat-panel {
        display: none;
    }

        .chat-panel.mobile-visible {
            display: block;
        }

    .mobile-chat-back-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .messages-page {
        height: auto;
        min-height: calc(100vh - 70px);
        overflow: visible;
    }

    .messages-toolbar {
        margin-bottom: 10px;
        padding: 12px;
    }

    .messages-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .new-message-button {
        width: 100%;
    }

    .professional-messaging-workspace {
        height: calc(100vh - 205px);
        min-height: 560px;
    }

    .professional-chat-header {
        padding: 9px 10px;
    }

    .chat-message-area {
        padding: 14px 10px 20px;
    }

    .chat-bubble {
        max-width: 91%;
    }

    .composer-main-row {
        grid-template-columns: 38px 38px minmax(0, 1fr);
    }

    .send-message-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .voice-message-card {
        grid-template-columns: 34px minmax(150px, 230px);
        min-width: 210px;
    }

    .attachment-message-card {
        min-width: 220px;
        max-width: 100%;
    }

    .recording-banner {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

        .recording-banner button {
            grid-column: auto;
        }

    .message-actions {
        position: static;
        display: flex;
        justify-content: flex-end;
        margin-top: 7px;
        border: 0;
        box-shadow: none;
    }

    .reaction-menu {
        position: static;
        margin-top: 7px;
    }
}
/* Blazor error UI must remain hidden until Blazor reports an error. */
#blazor-error-ui {
    display: none;
    position: fixed;
    z-index: 10000;
    right: 18px;
    bottom: 18px;
    left: 18px;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid #f1b8b8;
    border-radius: 14px;
    background: #fff4f4;
    color: #8f1d1d;
    box-shadow: 0 16px 42px rgba(20, 33, 61, 0.18);
}

    #blazor-error-ui .reload {
        color: #6b21a8;
        font-weight: 700;
    }

    #blazor-error-ui .dismiss {
        margin-left: auto;
        padding: 4px 10px;
    }

.auth-content {
    width: 100%;
    min-height: 100vh;
}

/* =========================================================
   CONTACTS DIRECTORY
   ========================================================= */

.contacts-page {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.contacts-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 34, 65, 0.05);
}

    .contacts-toolbar h1 {
        margin: 2px 0 6px;
    }

    .contacts-toolbar p:last-child {
        max-width: 720px;
        margin: 0;
        color: var(--muted);
    }

.contacts-toolbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
}

.contacts-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(340px, 32vw);
    margin: 0;
}

    .contacts-search > span {
        position: absolute;
        z-index: 1;
        left: 13px;
        color: #8794a7;
        font-size: 18px;
        pointer-events: none;
    }

    .contacts-search input {
        height: 42px;
        padding: 9px 40px;
        border-radius: 12px;
        background: #f8fafc;
    }

    .contacts-search button {
        position: absolute;
        right: 5px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        background: transparent;
    }

.contacts-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.contact-summary-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
}

.contact-summary-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #eaf2ff;
    color: #155fbf;
    font-size: 20px;
    font-weight: 800;
}

    .contact-summary-icon.online {
        color: #15803d;
    }

.contact-summary-card small,
.contact-summary-card strong,
.contact-summary-card span {
    display: block;
}

.contact-summary-card small {
    color: var(--muted);
    font-size: 11px;
}

.contact-summary-card strong {
    margin: 2px 0;
    color: var(--text);
    font-size: 24px;
}

.contact-summary-card div > span {
    color: #7a8799;
    font-size: 10px;
}

.contacts-panel {
    padding: 0;
    overflow: hidden;
}

.contacts-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

    .contacts-panel-header h2 {
        margin: 0;
    }

    .contacts-panel-header small {
        display: block;
        margin-top: 3px;
        color: var(--muted);
    }

.contacts-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .contacts-filter-tabs button {
        min-height: 34px;
        padding: 6px 13px;
        border-color: transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 12px;
    }

        .contacts-filter-tabs button:hover {
            background: #f1f5f9;
        }

        .contacts-filter-tabs button.active {
            background: #e8f2ff;
            color: #135ebc;
        }

.contacts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.contact-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    background: #ffffff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .contact-card:hover {
        transform: translateY(-2px);
        border-color: #b8cff0;
        box-shadow: 0 12px 28px rgba(15, 34, 65, 0.08);
    }

.contact-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #edf1f6;
}

.contact-avatar-wrapper {
    position: relative;
    flex: 0 0 auto;
}

.contact-avatar {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(145deg, #eaf2ff, #d6e7ff);
    color: #173f78;
    font-size: 16px;
    font-weight: 800;
}

.contact-presence {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 14px;
    height: 14px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #94a3b8;
}

    .contact-presence.online {
        background: #22c55e;
    }

.contact-identity {
    min-width: 0;
}

.contact-name-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}

    .contact-name-row h3 {
        margin: 0;
        overflow: hidden;
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.contact-identity p {
    margin: 3px 0 5px;
    color: var(--muted);
    font-size: 11px;
}

.federated-badge {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f0eaff;
    color: #6b3fc8;
    font-size: 9px;
    font-weight: 800;
}

.contact-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #718096;
    font-size: 10px;
    font-weight: 700;
}

    .contact-status > span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #94a3b8;
    }

    .contact-status.online {
        color: #15803d;
    }

        .contact-status.online > span {
            background: #22c55e;
        }

.contact-card-body {
    padding: 14px 16px;
}

    .contact-card-body dl {
        display: grid;
        gap: 9px;
        margin: 0;
    }

        .contact-card-body dl > div {
            display: grid;
            grid-template-columns: 72px minmax(0, 1fr);
            gap: 8px;
        }

    .contact-card-body dt {
        color: var(--muted);
        font-size: 10px;
    }

    .contact-card-body dd {
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: var(--text);
        font-size: 11px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.contact-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}

    .contact-permissions span {
        padding: 4px 8px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #526177;
        font-size: 9px;
        font-weight: 700;
    }

.contact-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 12px;
    border-top: 1px solid #edf1f6;
    background: #fafbfd;
}

.contact-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 38px;
    gap: 5px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 10px;
}

    .contact-action.primary-action {
        border-color: var(--brand);
        background: var(--brand);
        color: #ffffff;
    }

    .contact-action:disabled {
        opacity: 0.42;
    }

.contacts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 30px;
    color: var(--muted);
    text-align: center;
}

    .contacts-empty h3 {
        margin: 10px 0 6px;
        color: var(--text);
    }

    .contacts-empty p {
        max-width: 460px;
        margin: 0 0 18px;
    }

.contacts-empty-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eaf2ff;
    color: var(--brand);
    font-size: 25px;
    font-weight: 800;
}

.contacts-empty.error .contacts-empty-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.contacts-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe6f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: contacts-spin 0.8s linear infinite;
}

@keyframes contacts-spin {
    to {
        transform: rotate(360deg);
    }
}

.contact-toast {
    position: fixed;
    z-index: 5000;
    right: 20px;
    bottom: 20px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    width: min(380px, calc(100vw - 40px));
    gap: 10px;
    padding: 11px;
    border: 1px solid #bfe6cd;
    border-radius: 13px;
    background: #f2fff7;
    box-shadow: 0 18px 45px rgba(15, 34, 65, 0.16);
}

    .contact-toast > span {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #dcfce7;
        color: #166534;
        font-weight: 900;
    }

    .contact-toast strong {
        color: #2f4a3b;
        font-size: 11px;
    }

    .contact-toast button {
        width: 30px;
        height: 30px;
        padding: 0;
    }

@media (max-width: 1180px) {
    .contacts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contacts-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .contacts-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .contacts-toolbar-actions {
        width: 100%;
    }

    .contacts-search {
        width: auto;
        flex: 1;
    }

    .contacts-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .contacts-summary-grid,
    .contacts-grid {
        grid-template-columns: 1fr;
    }

    .contacts-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

        .contacts-toolbar-actions > button {
            width: 100%;
        }

    .contact-actions {
        grid-template-columns: 1fr;
    }
}

/* Append to SIPCore.App.Shared/wwwroot/css/app.css */
.wd-page {
    display: grid;
    gap: 14px;
    min-width: 0
}

.wd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff
}

    .wd-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px
    }

    .wd-toolbar p:last-child {
        margin: 0;
        color: var(--muted)
    }

.wd-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.wd-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(330px,30vw);
    margin: 0
}

    .wd-search span {
        position: absolute;
        left: 13px;
        color: #8794a7
    }

    .wd-search input {
        height: 42px;
        padding-left: 38px;
        border-radius: 12px;
        background: #f8fafc
    }

.wd-alert {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 14px;
    border-radius: 12px
}

    .wd-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b
    }

    .wd-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534
    }

.wd-tabs {
    display: flex;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    overflow-x: auto
}

    .wd-tabs button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-color: transparent;
        background: transparent
    }

        .wd-tabs button.active {
            background: #eaf2ff;
            color: #145fbd
        }

    .wd-tabs span {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        border-radius: 999px;
        background: #edf1f6;
        font-size: 9px
    }

.wd-loading, .wd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    padding: 30px;
    text-align: center;
    color: var(--muted)
}

.wd-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe6f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: wdspin .8s linear infinite
}

@keyframes wdspin {
    to {
        transform: rotate(360deg)
    }
}

.wd-metrics {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px
}

    .wd-metrics.three {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

.wd-metric-card {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff
}

    .wd-metric-card > span {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 21px;
        font-weight: 800
    }

    .wd-metric-card small, .wd-metric-card strong, .wd-metric-card em {
        display: block
    }

    .wd-metric-card strong {
        font-size: 25px
    }

    .wd-metric-card em {
        color: #8290a3;
        font-size: 9px;
        font-style: normal
    }

.wd-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
    gap: 14px
}

.wd-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px
}

    .wd-section-heading h2 {
        margin: 1px 0 0
    }

.wd-compact-task {
    display: grid;
    grid-template-columns: 5px minmax(0,1fr) auto;
    align-items: center;
    width: 100%;
    gap: 11px;
    padding: 11px 5px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    border-radius: 0;
    background: transparent;
    text-align: left
}

    .wd-compact-task i, .wd-task-title > i {
        width: 5px;
        height: 38px;
        border-radius: 999px;
        background: #4f8ee8
    }

        .wd-compact-task i.high, .wd-task-title > i.high {
            background: #ef4444
        }

        .wd-compact-task i.low, .wd-task-title > i.low {
            background: #22c55e
        }

    .wd-compact-task strong, .wd-compact-task small {
        display: block
    }

    .wd-compact-task small {
        color: var(--muted);
        font-size: 10px
    }

.wd-quick-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px
}

    .wd-quick-actions button {
        display: grid;
        grid-template-columns: 36px minmax(0,1fr);
        gap: 2px 9px;
        text-align: left
    }

        .wd-quick-actions button > span {
            grid-row: 1/3;
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #eaf2ff
        }

    .wd-quick-actions small {
        font-size: 9px;
        color: var(--muted)
    }

.wd-progress-row {
    display: grid;
    gap: 6px;
    margin: 12px 0
}

    .wd-progress-row > div:first-child {
        display: flex;
        justify-content: space-between
    }

.wd-progress {
    height: 7px;
    border-radius: 999px;
    background: #e8edf4;
    overflow: hidden
}

    .wd-progress i {
        display: block;
        height: 100%;
        background: var(--brand)
    }

.wd-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px
}

.wd-list-filters {
    display: flex;
    gap: 8px
}

    .wd-list-filters select {
        width: auto;
        min-width: 150px
    }

.wd-task-table {
    overflow-x: auto
}

.wd-task-table-head, .wd-task-row {
    display: grid;
    grid-template-columns: minmax(300px,1.7fr) 110px 130px 180px 125px 30px;
    align-items: center;
    min-width: 900px;
    gap: 10px
}

.wd-task-table-head {
    padding: 9px 12px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    color: #7c899a
}

.wd-task-row {
    width: 100%;
    padding: 12px;
    border: 0;
    border-top: 1px solid #edf1f6;
    border-radius: 0;
    background: #fff;
    text-align: left
}

    .wd-task-row:hover {
        background: #f7faff
    }

.wd-task-title {
    display: grid;
    grid-template-columns: 5px minmax(0,1fr);
    align-items: center;
    gap: 10px
}

    .wd-task-title strong, .wd-task-title small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .wd-task-title small {
        font-size: 9px;
        color: var(--muted)
    }

.wd-chip {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #526177;
    font-size: 9px
}

    .wd-chip.high {
        background: #fee2e2;
        color: #b91c1c
    }

    .wd-chip.low, .wd-chip.completed, .wd-chip.approved {
        background: #dcfce7;
        color: #166534
    }

    .wd-chip.in-progress {
        background: #dbeafe;
        color: #1d4ed8
    }

    .wd-chip.on-hold {
        background: #fef3c7;
        color: #92400e
    }

    .wd-chip.approval {
        background: #f3e8ff;
        color: #7e22ce
    }

    .wd-chip.cancelled, .wd-chip.rejected {
        background: #fee2e2;
        color: #b91c1c
    }

.wd-overdue {
    color: #dc2626;
    font-weight: 800
}

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

.wd-approval-card {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 15px;
    background: #fff
}

    .wd-approval-card header, .wd-approval-card footer, .wd-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px
    }

    .wd-approval-card footer {
        justify-content: flex-end
    }

.wd-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.wd-person-card {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    gap: 11px;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 15px
}

.wd-avatar-wrap {
    position: relative
}

.wd-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg,#eaf2ff,#d6e7ff);
    color: #173f78;
    font-size: 12px;
    font-weight: 800
}

.wd-avatar-wrap .wd-avatar {
    width: 52px;
    height: 52px
}

.wd-avatar-wrap i {
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #94a3b8
}

    .wd-avatar-wrap i.online {
        background: #22c55e
    }

.wd-person-card footer {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.wd-detail-shell {
    display: grid;
    gap: 14px
}

.wd-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 15px
}

.wd-detail-leading {
    display: flex;
    gap: 13px
}

.wd-back {
    width: 38px;
    height: 38px;
    padding: 0
}

.wd-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.wd-detail-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 14px
}

.wd-detail-main, .wd-detail-side {
    display: grid;
    align-content: start;
    gap: 14px
}

.wd-workflow-buttons {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.wd-inline-warning {
    padding: 9px 11px;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412
}

.wd-check-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #edf1f6
}

    .wd-check-row strong, .wd-check-row small {
        display: block
    }

    .wd-check-row.done strong {
        text-decoration: line-through;
        color: #718096
    }

.wd-file-list button {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    width: 100%;
    gap: 9px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    background: transparent;
    text-align: left
}

.wd-timeline > div {
    display: grid;
    grid-template-columns: 14px minmax(0,1fr);
    gap: 10px;
    padding-bottom: 15px
}

.wd-timeline i {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border: 2px solid #8fb7ec;
    border-radius: 50%
}

.wd-info-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

.wd-person-row {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

    .wd-person-row > div {
        display: flex;
        gap: 4px
    }

    .wd-person-row button {
        width: 31px;
        height: 31px;
        padding: 0
    }

.wd-approval-decision > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.wd-discussion-shell {
    display: grid;
    grid-template-rows: auto minmax(380px,1fr) auto;
    min-height: calc(100vh - 230px);
    padding: 0;
    overflow: hidden
}

.wd-discussion-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-bottom: 1px solid #e3e9f1
}

    .wd-discussion-header > div {
        flex: 1
    }

.wd-discussion-body {
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    background: #f7f9fc
}

.wd-comment {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 9px;
    max-width: 760px;
    margin: 0 0 12px calc(var(--depth) * 34px)
}

    .wd-comment > div {
        padding: 10px 12px;
        border: 1px solid #e0e7f0;
        border-radius: 14px;
        background: #fff
    }

    .wd-comment header {
        display: flex;
        justify-content: space-between
    }

.wd-comment-composer {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e3e9f1
}

.wd-reply-banner {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    padding: 7px 9px;
    border-left: 3px solid var(--brand);
    background: #eef5ff
}

.wd-form-header {
    display: flex;
    gap: 12px
}

.wd-form-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 14px
}

    .wd-form-grid main, .wd-form-grid aside {
        display: grid;
        align-content: start;
        gap: 14px
    }

.wd-form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.wd-toggle-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 9px;
    padding: 11px;
    border: 1px solid #e3e9f1;
    border-radius: 11px
}

.wd-checklist-builder {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 7px
}

.wd-draft-check {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

.wd-selector-list {
    display: grid;
    max-height: 300px;
    overflow-y: auto
}

    .wd-selector-list label {
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        gap: 9px;
        padding: 8px 2px;
        border-bottom: 1px solid #edf1f6
    }

.wd-save-button {
    width: 100%;
    min-height: 46px
}

.wd-edit-card {
    max-width: 820px
}

.wd-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.wd-empty > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 24px
}

.danger {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #fff !important
}

@media(max-width:1180px) {
    .wd-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .wd-toolbar-actions {
        width: 100%
    }

    .wd-search {
        width: auto;
        flex: 1
    }

    .wd-dashboard-grid, .wd-detail-grid, .wd-form-grid {
        grid-template-columns: 1fr
    }

    .wd-team-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .wd-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:760px) {
    .wd-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .wd-metrics, .wd-metrics.three, .wd-approval-grid, .wd-team-grid, .wd-quick-actions {
        grid-template-columns: 1fr
    }

    .wd-list-header, .wd-detail-header {
        align-items: stretch;
        flex-direction: column
    }

    .wd-list-filters, .wd-workflow-buttons, .wd-form-two, .wd-checklist-builder {
        display: grid;
        grid-template-columns: 1fr
    }

    .wd-comment {
        margin-left: 0 !important
    }

    .wd-comment-composer {
        grid-template-columns: 1fr
    }
}

/* WorkDesk attachment upload additions */
.wd-upload-box {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px dashed #b9c9de;
    border-radius: 13px;
    background: #f8fbff;
}

    .wd-upload-box input[type="file"] {
        width: 100%;
        padding: 9px;
        border: 1px solid #dce5f0;
        border-radius: 10px;
        background: #ffffff;
    }

    .wd-upload-box > small {
        color: var(--muted);
        font-size: 10px;
    }

.wd-selected-file {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #ffffff;
}

    .wd-selected-file > span:first-child {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: #eaf2ff;
    }

    .wd-selected-file strong,
    .wd-selected-file small {
        display: block;
    }

    .wd-selected-file small {
        margin-top: 2px;
        color: var(--muted);
        font-size: 9px;
    }

    .wd-selected-file button {
        width: 30px;
        height: 30px;
        padding: 0;
    }

/* Append to SIPCore.App.Shared/wwwroot/css/app.css */
.wd-page {
    display: grid;
    gap: 14px;
    min-width: 0
}

.wd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff
}

    .wd-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px
    }

    .wd-toolbar p:last-child {
        margin: 0;
        color: var(--muted)
    }

.wd-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.wd-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(330px,30vw);
    margin: 0
}

    .wd-search span {
        position: absolute;
        left: 13px;
        color: #8794a7
    }

    .wd-search input {
        height: 42px;
        padding-left: 38px;
        border-radius: 12px;
        background: #f8fafc
    }

.wd-alert {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 14px;
    border-radius: 12px
}

    .wd-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b
    }

    .wd-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534
    }

.wd-tabs {
    display: flex;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    overflow-x: auto
}

    .wd-tabs button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-color: transparent;
        background: transparent
    }

        .wd-tabs button.active {
            background: #eaf2ff;
            color: #145fbd
        }

    .wd-tabs span {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        border-radius: 999px;
        background: #edf1f6;
        font-size: 9px
    }

.wd-loading, .wd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    padding: 30px;
    text-align: center;
    color: var(--muted)
}

.wd-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe6f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: wdspin .8s linear infinite
}

@keyframes wdspin {
    to {
        transform: rotate(360deg)
    }
}

.wd-metrics {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px
}

    .wd-metrics.three {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

.wd-metric-card {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff
}

    .wd-metric-card > span {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 21px;
        font-weight: 800
    }

    .wd-metric-card small, .wd-metric-card strong, .wd-metric-card em {
        display: block
    }

    .wd-metric-card strong {
        font-size: 25px
    }

    .wd-metric-card em {
        color: #8290a3;
        font-size: 9px;
        font-style: normal
    }

.wd-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr);
    gap: 14px
}

.wd-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px
}

    .wd-section-heading h2 {
        margin: 1px 0 0
    }

.wd-compact-task {
    display: grid;
    grid-template-columns: 5px minmax(0,1fr) auto;
    align-items: center;
    width: 100%;
    gap: 11px;
    padding: 11px 5px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    border-radius: 0;
    background: transparent;
    text-align: left
}

    .wd-compact-task i, .wd-task-title > i {
        width: 5px;
        height: 38px;
        border-radius: 999px;
        background: #4f8ee8
    }

        .wd-compact-task i.high, .wd-task-title > i.high {
            background: #ef4444
        }

        .wd-compact-task i.low, .wd-task-title > i.low {
            background: #22c55e
        }

    .wd-compact-task strong, .wd-compact-task small {
        display: block
    }

    .wd-compact-task small {
        color: var(--muted);
        font-size: 10px
    }

.wd-quick-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px
}

    .wd-quick-actions button {
        display: grid;
        grid-template-columns: 36px minmax(0,1fr);
        gap: 2px 9px;
        text-align: left
    }

        .wd-quick-actions button > span {
            grid-row: 1/3;
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #eaf2ff
        }

    .wd-quick-actions small {
        font-size: 9px;
        color: var(--muted)
    }

.wd-progress-row {
    display: grid;
    gap: 6px;
    margin: 12px 0
}

    .wd-progress-row > div:first-child {
        display: flex;
        justify-content: space-between
    }

.wd-progress {
    height: 7px;
    border-radius: 999px;
    background: #e8edf4;
    overflow: hidden
}

    .wd-progress i {
        display: block;
        height: 100%;
        background: var(--brand)
    }

.wd-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px
}

.wd-list-filters {
    display: flex;
    gap: 8px
}

    .wd-list-filters select {
        width: auto;
        min-width: 150px
    }

.wd-task-table {
    overflow-x: auto
}

.wd-task-table-head, .wd-task-row {
    display: grid;
    grid-template-columns: minmax(300px,1.7fr) 110px 130px 180px 125px 30px;
    align-items: center;
    min-width: 900px;
    gap: 10px
}

.wd-task-table-head {
    padding: 9px 12px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    color: #7c899a
}

.wd-task-row {
    width: 100%;
    padding: 12px;
    border: 0;
    border-top: 1px solid #edf1f6;
    border-radius: 0;
    background: #fff;
    text-align: left
}

    .wd-task-row:hover {
        background: #f7faff
    }

.wd-task-title {
    display: grid;
    grid-template-columns: 5px minmax(0,1fr);
    align-items: center;
    gap: 10px
}

    .wd-task-title strong, .wd-task-title small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .wd-task-title small {
        font-size: 9px;
        color: var(--muted)
    }

.wd-chip {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #526177;
    font-size: 9px
}

    .wd-chip.high {
        background: #fee2e2;
        color: #b91c1c
    }

    .wd-chip.low, .wd-chip.completed, .wd-chip.approved {
        background: #dcfce7;
        color: #166534
    }

    .wd-chip.in-progress {
        background: #dbeafe;
        color: #1d4ed8
    }

    .wd-chip.on-hold {
        background: #fef3c7;
        color: #92400e
    }

    .wd-chip.approval {
        background: #f3e8ff;
        color: #7e22ce
    }

    .wd-chip.cancelled, .wd-chip.rejected {
        background: #fee2e2;
        color: #b91c1c
    }

.wd-overdue {
    color: #dc2626;
    font-weight: 800
}

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

.wd-approval-card {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 15px;
    background: #fff
}

    .wd-approval-card header, .wd-approval-card footer, .wd-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px
    }

    .wd-approval-card footer {
        justify-content: flex-end
    }

.wd-team-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.wd-person-card {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    gap: 11px;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 15px
}

.wd-avatar-wrap {
    position: relative
}

.wd-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg,#eaf2ff,#d6e7ff);
    color: #173f78;
    font-size: 12px;
    font-weight: 800
}

.wd-avatar-wrap .wd-avatar {
    width: 52px;
    height: 52px
}

.wd-avatar-wrap i {
    position: absolute;
    right: 0;
    bottom: 2px;
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #94a3b8
}

    .wd-avatar-wrap i.online {
        background: #22c55e
    }

.wd-person-card footer {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.wd-detail-shell {
    display: grid;
    gap: 14px
}

.wd-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 15px
}

.wd-detail-leading {
    display: flex;
    gap: 13px
}

.wd-back {
    width: 38px;
    height: 38px;
    padding: 0
}

.wd-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.wd-detail-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 14px
}

.wd-detail-main, .wd-detail-side {
    display: grid;
    align-content: start;
    gap: 14px
}

.wd-workflow-buttons {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.wd-inline-warning {
    padding: 9px 11px;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412
}

.wd-check-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #edf1f6
}

    .wd-check-row strong, .wd-check-row small {
        display: block
    }

    .wd-check-row.done strong {
        text-decoration: line-through;
        color: #718096
    }

.wd-file-list button {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    width: 100%;
    gap: 9px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    background: transparent;
    text-align: left
}

.wd-timeline > div {
    display: grid;
    grid-template-columns: 14px minmax(0,1fr);
    gap: 10px;
    padding-bottom: 15px
}

.wd-timeline i {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border: 2px solid #8fb7ec;
    border-radius: 50%
}

.wd-info-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

.wd-person-row {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

    .wd-person-row > div {
        display: flex;
        gap: 4px
    }

    .wd-person-row button {
        width: 31px;
        height: 31px;
        padding: 0
    }

.wd-approval-decision > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.wd-discussion-shell {
    display: grid;
    grid-template-rows: auto minmax(380px,1fr) auto;
    min-height: calc(100vh - 230px);
    padding: 0;
    overflow: hidden
}

.wd-discussion-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border-bottom: 1px solid #e3e9f1
}

    .wd-discussion-header > div {
        flex: 1
    }

.wd-discussion-body {
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    background: #f7f9fc
}

.wd-comment {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 9px;
    max-width: 760px;
    margin: 0 0 12px calc(var(--depth) * 34px)
}

    .wd-comment > div {
        padding: 10px 12px;
        border: 1px solid #e0e7f0;
        border-radius: 14px;
        background: #fff
    }

    .wd-comment header {
        display: flex;
        justify-content: space-between
    }

.wd-comment-composer {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e3e9f1
}

.wd-reply-banner {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    padding: 7px 9px;
    border-left: 3px solid var(--brand);
    background: #eef5ff
}

.wd-form-header {
    display: flex;
    gap: 12px
}

.wd-form-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 360px;
    gap: 14px
}

    .wd-form-grid main, .wd-form-grid aside {
        display: grid;
        align-content: start;
        gap: 14px
    }

.wd-form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.wd-toggle-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 9px;
    padding: 11px;
    border: 1px solid #e3e9f1;
    border-radius: 11px
}

.wd-checklist-builder {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 7px
}

.wd-draft-check {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6
}

.wd-selector-list {
    display: grid;
    max-height: 300px;
    overflow-y: auto
}

    .wd-selector-list label {
        display: grid;
        grid-template-columns: auto minmax(0,1fr);
        gap: 9px;
        padding: 8px 2px;
        border-bottom: 1px solid #edf1f6
    }

.wd-save-button {
    width: 100%;
    min-height: 46px
}

.wd-edit-card {
    max-width: 820px
}

.wd-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.wd-empty > span {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 24px
}

.danger {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #fff !important
}

@media(max-width:1180px) {
    .wd-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .wd-toolbar-actions {
        width: 100%
    }

    .wd-search {
        width: auto;
        flex: 1
    }

    .wd-dashboard-grid, .wd-detail-grid, .wd-form-grid {
        grid-template-columns: 1fr
    }

    .wd-team-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .wd-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:760px) {
    .wd-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .wd-metrics, .wd-metrics.three, .wd-approval-grid, .wd-team-grid, .wd-quick-actions {
        grid-template-columns: 1fr
    }

    .wd-list-header, .wd-detail-header {
        align-items: stretch;
        flex-direction: column
    }

    .wd-list-filters, .wd-workflow-buttons, .wd-form-two, .wd-checklist-builder {
        display: grid;
        grid-template-columns: 1fr
    }

    .wd-comment {
        margin-left: 0 !important
    }

    .wd-comment-composer {
        grid-template-columns: 1fr
    }
}


/* Modular WorkDesk additions */
.wd-description-text {
    margin: 0;
    line-height: 1.7;
    white-space: pre-wrap;
}

.wd-empty.compact {
    min-height: 180px;
}

.wd-upload-box {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px dashed #b9c9de;
    border-radius: 13px;
    background: #f8fbff;
}

    .wd-upload-box input[type="file"] {
        width: 100%;
        padding: 9px;
        border: 1px solid #dce5f0;
        border-radius: 10px;
        background: #ffffff;
    }

.wd-selected-file {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #ffffff;
}

    .wd-selected-file > span:first-child {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: #eaf2ff;
    }

    .wd-selected-file strong,
    .wd-selected-file small {
        display: block;
    }

    .wd-selected-file small {
        color: var(--muted);
        font-size: 9px;
    }
/* =========================================================
   SIPCORE MEETINGS — PRODUCTION WEB & DESKTOP
   ========================================================= */

.mt-page {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.mt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 34, 65, 0.05);
}

    .mt-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px;
    }

    .mt-toolbar p:last-child {
        max-width: 760px;
        margin: 0;
        color: var(--muted);
    }

.mt-toolbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
}

.mt-search,
.mt-participant-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

.mt-search {
    width: min(360px, 31vw);
}

    .mt-search > span,
    .mt-participant-search > span {
        position: absolute;
        z-index: 1;
        left: 13px;
        color: #8290a3;
        pointer-events: none;
    }

    .mt-search input,
    .mt-participant-search input {
        height: 42px;
        padding: 9px 40px;
        border-radius: 12px;
        background: #f8fafc;
    }

    .mt-search button {
        position: absolute;
        right: 5px;
        width: 31px;
        height: 31px;
        padding: 0;
        border: 0;
        background: transparent;
    }

.mt-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
}

    .mt-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b;
    }

    .mt-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534;
    }

    .mt-alert button {
        width: 30px;
        height: 30px;
        padding: 0;
    }

.mt-loading,
.mt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 30px;
    color: var(--muted);
    text-align: center;
}

    .mt-empty.compact {
        min-height: 180px;
    }

    .mt-empty > span {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 24px;
    }

    .mt-empty h3 {
        margin: 11px 0 5px;
        color: var(--text);
    }

    .mt-empty p {
        max-width: 460px;
        margin: 0 0 16px;
    }

.mt-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe6f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: mt-spin 0.8s linear infinite;
}

@keyframes mt-spin {
    to {
        transform: rotate(360deg);
    }
}

.mt-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.mt-summary-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
}

.mt-summary-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 21px;
    font-weight: 800;
}

    .mt-summary-icon.live {
        background: #dcfce7;
        color: #15803d;
    }

.mt-summary-card small,
.mt-summary-card strong,
.mt-summary-card em {
    display: block;
}

.mt-summary-card small {
    color: var(--muted);
    font-size: 10px;
}

.mt-summary-card strong {
    margin: 2px 0;
    font-size: 25px;
}

.mt-summary-card em {
    color: #8290a3;
    font-size: 9px;
    font-style: normal;
}

.mt-list-panel {
    padding: 0;
    overflow: hidden;
}

.mt-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

    .mt-list-header h2 {
        margin: 1px 0 0;
    }

.mt-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

    .mt-filter-tabs button {
        min-height: 34px;
        padding: 6px 13px;
        border-color: transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 11px;
    }

        .mt-filter-tabs button.active {
            background: #eaf2ff;
            color: #145fbd;
        }

.mt-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.mt-meeting-card {
    display: grid;
    grid-template-rows: 1fr auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    background: #ffffff;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .mt-meeting-card:hover {
        transform: translateY(-2px);
        border-color: #b8cff0;
        box-shadow: 0 12px 28px rgba(15, 34, 65, 0.08);
    }

.mt-card-main {
    display: block;
    width: 100%;
    padding: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
}

    .mt-card-main header {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

.mt-meeting-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 20px;
}

.mt-card-title {
    min-width: 0;
}

    .mt-card-title strong,
    .mt-card-title small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mt-card-title small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 10px;
    }

.mt-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 9px;
    font-weight: 800;
}

    .mt-status.live {
        background: #dcfce7;
        color: #166534;
    }

    .mt-status.ended,
    .mt-status.cancelled {
        background: #fee2e2;
        color: #b91c1c;
    }

.mt-card-main > p {
    min-height: 40px;
    margin: 14px 0;
    color: #59677a;
    font-size: 11px;
    line-height: 1.55;
}

.mt-card-main dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

    .mt-card-main dl > div {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 8px;
    }

.mt-card-main dt {
    color: var(--muted);
    font-size: 9px;
}

.mt-card-main dd {
    margin: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mt-meeting-card footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 12px;
    border-top: 1px solid #edf1f6;
    background: #fafbfd;
}

.mt-form-shell,
.mt-detail-shell {
    display: grid;
    gap: 14px;
}

.mt-form-header,
.mt-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.mt-form-header {
    justify-content: flex-start;
}

.mt-back {
    width: 38px;
    height: 38px;
    padding: 0;
    flex: 0 0 auto;
}

.mt-form-header h1,
.mt-detail-header h1 {
    margin: 2px 0 5px;
}

.mt-form-header p:last-child {
    margin: 0;
    color: var(--muted);
}

.mt-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 14px;
}

    .mt-form-grid main,
    .mt-form-grid aside {
        display: grid;
        align-content: start;
        gap: 14px;
    }

.mt-form-card h2 {
    margin: 1px 0 14px;
}

.mt-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

    .mt-section-heading h2 {
        margin: 1px 0 0;
    }

.mt-option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0;
}

.mt-option-card,
.mt-toggle-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 12px;
    border: 1px solid #e3e9f1;
    border-radius: 12px;
    background: #ffffff;
}

    .mt-option-card.selected {
        border-color: #8bb6ec;
        background: #f3f8ff;
    }

    .mt-option-card strong,
    .mt-option-card small,
    .mt-toggle-row strong,
    .mt-toggle-row small {
        display: block;
    }

    .mt-option-card small,
    .mt-toggle-row small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px;
    }

.mt-form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mt-setting-stack {
    display: grid;
    align-items: end;
}

.mt-participant-panel {
    padding-bottom: 0;
    overflow: hidden;
}

.mt-selected-count {
    padding: 4px 8px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #145fbd;
    font-size: 9px;
    font-weight: 800;
}

.mt-participant-list {
    display: grid;
    max-height: 480px;
    margin: 12px -16px 0;
    overflow-y: auto;
}

    .mt-participant-list label {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 10px 16px;
        border-top: 1px solid #edf1f6;
    }

.mt-contact-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #173f78;
    font-size: 11px;
    font-weight: 800;
}

.mt-participant-list strong,
.mt-participant-list small {
    display: block;
}

.mt-participant-list small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.mt-form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .mt-form-actions button {
        min-height: 45px;
    }

.mt-detail-leading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mt-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--muted);
    font-size: 10px;
}

.mt-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mt-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
}

.mt-detail-main,
.mt-detail-side {
    display: grid;
    align-content: start;
    gap: 14px;
}

.mt-conference-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
}

.mt-conference-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 28px;
}

.mt-conference-card small,
.mt-conference-card strong,
.mt-conference-card span {
    display: block;
}

.mt-conference-card small {
    color: var(--muted);
    font-size: 10px;
}

.mt-conference-card strong {
    margin: 3px 0;
    color: #0c3972;
    font-size: 29px;
    letter-spacing: 1px;
}

.mt-conference-card span {
    color: var(--muted);
    font-size: 9px;
}

.mt-host-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.danger-outline {
    border-color: #ef4444 !important;
    background: #ffffff !important;
    color: #dc2626 !important;
}

.mt-inline-info,
.mt-help-text {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #59677a;
    font-size: 10px;
}

.mt-live-output {
    max-height: 360px;
    margin: 0;
    padding: 14px;
    overflow: auto;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #07162b;
    color: #d9e8ff;
    font-family: Consolas, monospace;
    font-size: 10px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.mt-member-control {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto auto;
    gap: 7px;
}

.mt-info-card h2,
.mt-access-card h2,
.mt-description-card h2 {
    margin-top: 0;
    font-size: 15px;
}

.mt-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f6;
    font-size: 10px;
}

    .mt-info-row span {
        color: var(--muted);
    }

    .mt-info-row strong {
        max-width: 58%;
        overflow-wrap: anywhere;
        text-align: right;
    }

.mt-access-card {
    display: grid;
    gap: 10px;
}

    .mt-access-card > div {
        padding: 11px;
        border-radius: 10px;
        background: #f3f8ff;
    }

    .mt-access-card small,
    .mt-access-card strong {
        display: block;
    }

    .mt-access-card small {
        color: var(--muted);
        font-size: 9px;
    }

    .mt-access-card strong {
        margin-top: 3px;
        font-size: 18px;
    }

    .mt-access-card p,
    .mt-description-card p {
        margin: 0;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.6;
        white-space: pre-wrap;
    }

@media (max-width: 1220px) {
    .mt-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mt-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mt-form-grid,
    .mt-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    .mt-toolbar,
    .mt-list-header,
    .mt-detail-header {
        align-items: stretch;
        flex-direction: column;
    }

    .mt-toolbar-actions {
        width: 100%;
    }

    .mt-search {
        width: auto;
        flex: 1;
    }

    .mt-detail-actions {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .mt-summary-grid,
    .mt-card-grid,
    .mt-option-grid,
    .mt-form-two,
    .mt-form-actions,
    .mt-host-controls {
        grid-template-columns: 1fr;
    }

    .mt-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .mt-card-grid {
        padding: 12px;
    }

    .mt-meeting-card footer {
        grid-template-columns: 1fr;
    }

    .mt-conference-card {
        grid-template-columns: 54px minmax(0, 1fr);
    }

        .mt-conference-card > button {
            grid-column: 1 / -1;
        }

    .mt-member-control {
        grid-template-columns: 1fr;
    }
}
/* SIPCore Business Email — production desktop interface */
.em-page {
    display: grid;
    gap: 14px;
    min-width: 0
}

.em-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15,34,65,.05)
}

    .em-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px
    }

    .em-toolbar p:last-child {
        max-width: 780px;
        margin: 0;
        color: var(--muted)
    }

.em-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.em-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(350px,30vw);
    margin: 0
}

    .em-search > span {
        position: absolute;
        left: 13px;
        color: #8290a3
    }

    .em-search input {
        height: 42px;
        padding: 9px 40px;
        border-radius: 12px;
        background: #f8fafc
    }

    .em-search button {
        position: absolute;
        right: 5px;
        width: 31px;
        height: 31px;
        padding: 0;
        border: 0;
        background: transparent
    }

.em-alert {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px
}

    .em-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b
    }

    .em-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534
    }

    .em-alert button {
        width: 30px;
        height: 30px;
        padding: 0
    }

.em-loading, .em-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 30px;
    color: var(--muted);
    text-align: center
}

    .em-empty > span {
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 24px
    }

    .em-empty h3 {
        margin: 11px 0 5px;
        color: var(--text)
    }

    .em-empty p {
        max-width: 460px;
        margin: 0 0 15px
    }

.em-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #dbe6f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: em-spin .8s linear infinite
}

@keyframes em-spin {
    to {
        transform: rotate(360deg)
    }
}

.em-account-summary {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

    .em-account-summary article {
        display: grid;
        grid-template-columns: 48px minmax(0,1fr);
        align-items: center;
        gap: 12px;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff
    }

        .em-account-summary article > span {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: #eaf2ff;
            color: #1764c0;
            font-size: 21px
        }

    .em-account-summary small, .em-account-summary strong, .em-account-summary em {
        display: block
    }

    .em-account-summary small {
        color: var(--muted);
        font-size: 10px
    }

    .em-account-summary strong {
        margin: 2px 0;
        font-size: 20px
    }

    .em-account-summary em {
        color: #8290a3;
        font-size: 9px;
        font-style: normal
    }

.em-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px
}

    .em-section-header h2 {
        margin: 1px 0 0
    }

.em-account-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 13px
}

.em-account-card {
    display: grid;
    gap: 14px;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 15px
}

    .em-account-card header {
        display: grid;
        grid-template-columns: 46px minmax(0,1fr) auto;
        align-items: center;
        gap: 10px
    }

.em-account-avatar, .em-sender-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #173f78;
    font-size: 11px;
    font-weight: 800
}

.em-account-card header strong, .em-account-card header small {
    display: block
}

.em-account-card header small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px
}

.em-connection {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800
}

    .em-connection.connected {
        background: #dcfce7;
        color: #166534
    }

    .em-connection.disconnected {
        background: #fee2e2;
        color: #b91c1c
    }

.em-account-card dl {
    display: grid;
    gap: 8px;
    margin: 0
}

    .em-account-card dl > div {
        display: flex;
        justify-content: space-between;
        gap: 10px
    }

.em-account-card dt {
    color: var(--muted);
    font-size: 9px
}

.em-account-card dd {
    margin: 0;
    text-align: right;
    font-size: 9px;
    font-weight: 700
}

.em-account-card footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.em-form-shell, .em-detail-shell, .em-compose-shell {
    display: grid;
    gap: 14px
}

.em-form-header, .em-detail-toolbar, .em-compose-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px
}

.em-form-header {
    justify-content: flex-start
}

.em-back {
    width: 38px;
    height: 38px;
    padding: 0
}

.em-form-header h1, .em-detail-toolbar h1, .em-compose-header h1 {
    margin: 2px 0 5px
}

.em-form-header p:last-child {
    margin: 0;
    color: var(--muted)
}

.em-connect-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 14px
}

.em-form-card h2 {
    margin: 1px 0 14px
}

.em-form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.em-form-three {
    display: grid;
    grid-template-columns: minmax(0,1fr) 110px auto;
    align-items: end;
    gap: 10px
}

.em-inline-check {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    margin: 0
}

.em-divider {
    height: 1px;
    margin: 18px 0;
    background: #e7edf5
}

.em-toggle-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 9px;
    margin: 12px 0 0;
    padding: 11px;
    border: 1px solid #e3e9f1;
    border-radius: 11px
}

    .em-toggle-row strong, .em-toggle-row small {
        display: block
    }

    .em-toggle-row small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px
    }

.em-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 15px
}

.em-security-card {
    align-self: start;
    text-align: center
}

    .em-security-card > span {
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        margin: 0 auto 12px;
        border-radius: 18px;
        background: #eaf2ff;
        font-size: 27px
    }

    .em-security-card ul {
        padding-left: 20px;
        text-align: left;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.7
    }

.em-mailbox {
    display: grid;
    grid-template-columns: 220px minmax(360px,530px) minmax(260px,1fr);
    min-height: calc(100vh - 210px);
    padding: 0;
    overflow: hidden
}

.em-mail-sidebar {
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    border-right: 1px solid #e3e9f1;
    background: #f8fafc
}

.em-account-switcher {
    padding: 14px
}

    .em-account-switcher label {
        font-size: 9px
    }

.em-folder-list {
    display: grid;
    align-content: start;
    padding: 0 8px;
    overflow-y: auto
}

    .em-folder-list button {
        display: grid;
        grid-template-columns: 24px minmax(0,1fr) auto;
        align-items: center;
        gap: 7px;
        width: 100%;
        padding: 9px 10px;
        border-color: transparent;
        background: transparent;
        text-align: left
    }

        .em-folder-list button.active {
            background: #eaf2ff;
            color: #145fbd
        }

    .em-folder-list em {
        display: grid;
        place-items: center;
        min-width: 21px;
        height: 21px;
        padding: 0 5px;
        border-radius: 999px;
        background: #dbeafe;
        font-size: 8px;
        font-style: normal
    }

.em-mailbox-status {
    display: grid;
    grid-template-columns: 10px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e3e9f1
}

    .em-mailbox-status > span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #94a3b8
    }

        .em-mailbox-status > span.connected {
            background: #22c55e
        }

    .em-mailbox-status strong, .em-mailbox-status small {
        display: block
    }

    .em-mailbox-status small {
        color: var(--muted);
        font-size: 8px
    }

.em-message-list-pane {
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    min-width: 0;
    border-right: 1px solid #e3e9f1
}

    .em-message-list-pane > header {
        padding: 14px 16px;
        border-bottom: 1px solid #e3e9f1
    }

    .em-message-list-pane h2 {
        margin: 1px 0
    }

.em-message-list {
    min-height: 0;
    overflow-y: auto
}

.em-message-row {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    border-bottom: 1px solid #edf1f6;
    background: #fff
}

    .em-message-row.unread {
        background: #f6faff
    }

    .em-message-row.selected {
        background: #eaf2ff
    }

.em-star-button {
    width: 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #94a3b8
}

    .em-star-button.starred {
        color: #eab308
    }

.em-message-main {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left
}

.em-message-content {
    min-width: 0
}

.em-message-topline {
    display: flex;
    justify-content: space-between;
    gap: 8px
}

    .em-message-topline strong, .em-message-topline time {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .em-message-topline time {
        color: var(--muted);
        font-size: 8px
    }

.em-message-subject, .em-message-preview {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.em-message-subject {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 700
}

.em-message-preview {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px
}

.em-paperclip {
    font-size: 11px
}

.em-load-more {
    margin: 10px
}

.em-preview-pane {
    display: grid;
    place-items: center;
    background: #fafbfd
}

.em-preview-placeholder {
    text-align: center;
    color: var(--muted)
}

    .em-preview-placeholder > span {
        font-size: 35px
    }

.em-detail-leading {
    display: flex;
    gap: 12px
}

.em-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

    .em-detail-actions button.active {
        background: #fff7cc;
        color: #8a6800
    }

.em-detail-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 14px
}

.em-detail-main, .em-detail-side {
    display: grid;
    align-content: start;
    gap: 14px
}

.em-message-detail-card > header {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) auto;
    gap: 11px
}

.em-sender-avatar.large {
    width: 52px;
    height: 52px
}

.em-message-detail-card header strong, .em-message-detail-card header small, .em-message-detail-card header span {
    display: block
}

.em-message-detail-card header small, .em-message-detail-card header span, .em-message-detail-card time {
    color: var(--muted);
    font-size: 9px
}

.em-message-body {
    padding: 22px 4px;
    line-height: 1.7;
    overflow-wrap: anywhere
}

    .em-message-body img {
        max-width: 100%;
        height: auto
    }

.em-attachment-section {
    padding-top: 13px;
    border-top: 1px solid #edf1f6
}

.em-attachment-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px
}

    .em-attachment-grid button {
        display: grid;
        grid-template-columns: 36px minmax(0,1fr) auto;
        align-items: center;
        gap: 8px;
        text-align: left
    }

    .em-attachment-grid strong, .em-attachment-grid small {
        display: block
    }

    .em-attachment-grid small {
        color: var(--muted);
        font-size: 8px
    }

.em-thread-item {
    border-bottom: 1px solid #edf1f6
}

    .em-thread-item summary {
        display: grid;
        grid-template-columns: 42px minmax(0,1fr) auto;
        align-items: center;
        gap: 9px;
        padding: 10px 0;
        cursor: pointer
    }

        .em-thread-item summary strong, .em-thread-item summary small {
            display: block
        }

        .em-thread-item summary small, .em-thread-item time {
            color: var(--muted);
            font-size: 8px
        }

    .em-thread-item > div {
        padding: 10px 52px 18px;
        line-height: 1.6
    }

.em-ai-card > header {
    display: flex;
    gap: 10px
}

    .em-ai-card > header > span {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #f3e8ff;
        color: #7e22ce;
        font-size: 21px
    }

.em-ai-card h2 {
    margin: 1px 0
}

.em-ai-result {
    display: grid;
    gap: 11px
}

    .em-ai-result section {
        padding: 10px;
        border-radius: 10px;
        background: #f8fafc
    }

    .em-ai-result small {
        color: var(--muted);
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase
    }

    .em-ai-result p {
        margin: 5px 0 0;
        line-height: 1.55
    }

    .em-ai-result ul {
        margin: 7px 0 0;
        padding-left: 18px
    }

.em-meeting-detected strong, .em-meeting-detected span {
    display: block;
    margin-top: 4px
}

.em-actions-card {
    display: grid;
    gap: 8px
}

    .em-actions-card h2 {
        margin-top: 0
    }

    .em-actions-card label span {
        display: block;
        margin-bottom: 4px;
        font-size: 9px
    }

.em-compose-card {
    padding: 0;
    overflow: hidden
}

.em-compose-account, .em-recipient-row, .em-subject-row {
    display: grid;
    grid-template-columns: 70px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid #edf1f6
}

.em-compose-account {
    grid-template-columns: 70px minmax(0,1fr)
}

.em-subject-row {
    grid-template-columns: 70px minmax(0,1fr)
}

    .em-compose-account label, .em-recipient-row label, .em-subject-row label {
        margin: 0;
        color: var(--muted);
        font-size: 9px
    }

    .em-compose-account select, .em-recipient-row input, .em-subject-row input {
        margin: 0;
        border: 0;
        background: transparent
    }

.em-reply-context {
    padding: 11px 14px;
    border-bottom: 1px solid #edf1f6;
    background: #f8fafc;
    font-size: 10px
}

.em-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-bottom: 1px solid #edf1f6
}

    .em-editor-toolbar button {
        width: 32px;
        height: 30px;
        padding: 0
    }

    .em-editor-toolbar span {
        flex: 1
    }

    .em-editor-toolbar small {
        color: var(--muted)
    }

.em-compose-body {
    min-height: 390px;
    margin: 0;
    padding: 18px;
    border: 0;
    border-radius: 0;
    resize: vertical
}

.em-compose-card > footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #edf1f6;
    background: #fafbfd
}

.danger {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #fff !important
}

@media(max-width:1200px) {
    .em-account-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .em-mailbox {
        grid-template-columns: 200px minmax(360px,1fr)
    }

    .em-preview-pane {
        display: none
    }

    .em-connect-grid, .em-detail-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:850px) {
    .em-toolbar, .em-detail-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .em-toolbar-actions {
        width: 100%
    }

    .em-search {
        width: auto;
        flex: 1
    }

    .em-account-summary {
        grid-template-columns: 1fr
    }

    .em-mailbox {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .em-mail-sidebar {
        grid-template-rows: auto auto auto;
        border-right: 0
    }

    .em-folder-list {
        display: flex;
        overflow-x: auto;
        padding: 8px
    }

        .em-folder-list button {
            min-width: max-content
        }

    .em-message-list-pane {
        min-height: 600px;
        border-right: 0
    }

    .em-form-three {
        grid-template-columns: 1fr 100px
    }

    .em-inline-check {
        grid-column: 1/-1
    }
}

@media(max-width:650px) {
    .em-toolbar-actions, .em-account-grid, .em-form-two, .em-form-three, .em-attachment-grid {
        display: grid;
        grid-template-columns: 1fr
    }

    .em-account-card footer {
        grid-template-columns: 1fr
    }

    .em-detail-actions {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .em-compose-account, .em-recipient-row, .em-subject-row {
        grid-template-columns: 1fr
    }

        .em-compose-account label, .em-recipient-row label, .em-subject-row label {
            display: none
        }

    .em-compose-card > footer {
        display: grid;
        grid-template-columns: 1fr
    }
}

/* =========================================================
   SIPCORE SETTINGS — PRODUCTION WEB & DESKTOP
   ========================================================= */

.st-page {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.st-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 34, 65, 0.05);
}

    .st-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px;
    }

    .st-toolbar p:last-child {
        max-width: 760px;
        margin: 0;
        color: var(--muted);
    }

.st-toolbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
}

.st-registration {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 145px;
    padding: 8px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

    .st-registration > i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #94a3b8;
    }

        .st-registration > i.registered {
            background: #22c55e;
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
        }

        .st-registration > i.registering {
            background: #f59e0b;
        }

        .st-registration > i.failed {
            background: #ef4444;
        }

    .st-registration small,
    .st-registration strong {
        display: block;
    }

    .st-registration small {
        color: var(--muted);
        font-size: 8px;
    }

    .st-registration strong {
        margin-top: 1px;
        font-size: 10px;
    }

.st-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
}

    .st-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b;
    }

    .st-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534;
    }

    .st-alert button {
        width: 30px;
        height: 30px;
        padding: 0;
    }

.st-profile-banner {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid #ccdcf1;
    border-radius: 18px;
    background: radial-gradient(circle at 90% 20%, rgba(59, 130, 246, 0.14), transparent 26%), linear-gradient(135deg, #f8fbff, #eef5ff);
}

.st-profile-avatar {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0d4b91, #2276d2);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(18, 92, 174, 0.2);
    font-size: 20px;
    font-weight: 800;
}

    .st-profile-avatar.small {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        font-size: 16px;
    }

.st-profile-identity h2 {
    margin: 2px 0 7px;
    font-size: 22px;
}

.st-profile-identity > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

    .st-profile-identity > div span {
        padding: 4px 8px;
        border: 1px solid rgba(23, 100, 192, 0.15);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.7);
        color: #45617f;
        font-size: 9px;
        font-weight: 700;
    }

.st-profile-status {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.st-status-pill {
    padding: 6px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 9px;
    font-weight: 800;
}

    .st-status-pill.registered {
        background: #dcfce7;
        color: #166534;
    }

    .st-status-pill.registering {
        background: #fef3c7;
        color: #92400e;
    }

    .st-status-pill.failed {
        background: #fee2e2;
        color: #b91c1c;
    }

.st-profile-status small {
    color: var(--muted);
    font-size: 8px;
}

.st-settings-layout {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
}

.st-settings-nav {
    display: grid;
    align-content: start;
    gap: 5px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
}

    .st-settings-nav button {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        width: 100%;
        padding: 10px;
        border-color: transparent;
        border-radius: 11px;
        background: transparent;
        color: #526174;
        text-align: left;
    }

        .st-settings-nav button:hover {
            background: #f4f7fb;
        }

        .st-settings-nav button.active {
            border-color: #c8dcf5;
            background: #eaf2ff;
            color: #145fbd;
        }

        .st-settings-nav button > span:first-child {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: #f1f5f9;
            font-size: 15px;
        }

        .st-settings-nav button.active > span:first-child {
            background: #ffffff;
        }

    .st-settings-nav strong,
    .st-settings-nav small {
        display: block;
    }

    .st-settings-nav strong {
        font-size: 10px;
    }

    .st-settings-nav small {
        margin-top: 2px;
        color: #8793a5;
        font-size: 8px;
    }

.st-settings-content,
.st-section-stack {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.st-section-card {
    padding: 18px;
}

.st-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf1f6;
}

    .st-section-heading h2 {
        margin: 2px 0 5px;
        font-size: 19px;
    }

    .st-section-heading p:last-child {
        max-width: 680px;
        margin: 0;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.55;
    }

.st-section-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #eaf2ff;
    color: #1764c0;
    font-size: 20px;
}

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

.st-info-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e3e9f1;
    border-radius: 13px;
    background: #fafbfd;
}

    .st-info-card small,
    .st-info-card strong,
    .st-info-card p {
        display: block;
    }

    .st-info-card small {
        color: var(--muted);
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .st-info-card strong {
        margin: 5px 0 3px;
        overflow-wrap: anywhere;
        font-size: 14px;
    }

    .st-info-card p {
        margin: 0;
        color: #8490a0;
        font-size: 8px;
    }

.st-account-help {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-color: #dbeafe;
    background: #f8fbff;
}

    .st-account-help > span {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #eaf2ff;
        color: #1764c0;
        font-weight: 800;
    }

    .st-account-help strong,
    .st-account-help p {
        display: block;
    }

    .st-account-help p {
        margin: 3px 0 0;
        color: var(--muted);
        font-size: 9px;
    }

.st-password-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 24px;
}

.st-password-form {
    max-width: 650px;
}

.st-password-field {
    position: relative;
    display: flex;
    align-items: center;
}

    .st-password-field input {
        padding-right: 68px;
    }

    .st-password-field button {
        position: absolute;
        right: 5px;
        min-width: 54px;
        height: 31px;
        padding: 0 8px;
        border-color: transparent;
        background: transparent;
        color: #1764c0;
        font-size: 8px;
    }

.st-password-submit {
    width: 100%;
    min-height: 43px;
    margin-top: 16px;
}

.st-field-error {
    margin: -4px 0 0;
    color: #dc2626;
    font-size: 9px;
}

.st-password-rules {
    align-self: start;
    padding: 15px;
    border: 1px solid #e3e9f1;
    border-radius: 14px;
    background: #f8fafc;
}

    .st-password-rules h3 {
        margin: 0 0 12px;
        font-size: 13px;
    }

.st-password-rule {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    color: #7b8796;
}

    .st-password-rule > span {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #e2e8f0;
        font-size: 9px;
    }

    .st-password-rule strong {
        font-size: 9px;
    }

    .st-password-rule.valid {
        color: #166534;
    }

        .st-password-rule.valid > span {
            background: #dcfce7;
        }

.st-security-note {
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    background: #fff7e6;
}

    .st-security-note strong {
        font-size: 9px;
    }

    .st-security-note p {
        margin: 4px 0 0;
        color: #7c6c4a;
        font-size: 8px;
        line-height: 1.5;
    }

.st-presence-card {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fbff, #eef6ff);
}

.st-presence-visual {
    position: relative;
    width: 62px;
}

    .st-presence-visual i {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 14px;
        height: 14px;
        border: 3px solid #eef6ff;
        border-radius: 50%;
        background: #94a3b8;
    }

        .st-presence-visual i.registered {
            background: #22c55e;
        }

        .st-presence-visual i.registering {
            background: #f59e0b;
        }

        .st-presence-visual i.failed {
            background: #ef4444;
        }

.st-presence-card small,
.st-presence-card strong,
.st-presence-card p {
    display: block;
}

.st-presence-card small {
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
}

.st-presence-card strong {
    margin-top: 3px;
    font-size: 17px;
}

.st-presence-card p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 9px;
}

.st-presence-explainer h3 {
    margin-top: 0;
}

.st-presence-explainer > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.st-presence-explainer article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    padding: 11px;
    border: 1px solid #e3e9f1;
    border-radius: 11px;
}

    .st-presence-explainer article > span {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: #eaf2ff;
        color: #1764c0;
    }

.st-presence-explainer strong,
.st-presence-explainer p {
    display: block;
}

.st-presence-explainer strong {
    font-size: 9px;
}

.st-presence-explainer p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.5;
}

.st-calling-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

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

.st-feature-card {
    display: grid;
    align-content: start;
    min-height: 175px;
    padding: 14px;
    border: 1px solid #e3e9f1;
    border-radius: 13px;
    background: #fafbfd;
}

    .st-feature-card > span {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 18px;
    }

    .st-feature-card h3 {
        margin: 11px 0 5px;
        font-size: 12px;
    }

    .st-feature-card p {
        margin: 0;
        color: var(--muted);
        font-size: 8px;
        line-height: 1.55;
    }

    .st-feature-card small {
        align-self: end;
        margin-top: 13px;
        color: #1764c0;
        font-size: 8px;
        font-weight: 800;
    }

.st-feature-note {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #fde68a;
    border-radius: 11px;
    background: #fffbeb;
}

    .st-feature-note strong {
        font-size: 9px;
    }

    .st-feature-note p {
        margin: 4px 0 0;
        color: #78643f;
        font-size: 8px;
        line-height: 1.55;
    }

@media (max-width: 1160px) {
    .st-password-layout {
        grid-template-columns: 1fr;
    }

    .st-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .st-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .st-toolbar-actions {
        justify-content: space-between;
        width: 100%;
    }

    .st-settings-layout {
        grid-template-columns: 1fr;
    }

    .st-settings-nav {
        display: flex;
        overflow-x: auto;
    }

        .st-settings-nav button {
            min-width: 190px;
        }
}

@media (max-width: 680px) {
    .st-profile-banner {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .st-profile-avatar {
        width: 58px;
        height: 58px;
        border-radius: 16px;
    }

    .st-profile-status {
        grid-column: 1 / -1;
        justify-items: start;
    }

    .st-info-grid,
    .st-calling-grid,
    .st-presence-explainer > div,
    .st-feature-grid {
        grid-template-columns: 1fr;
    }

    .st-presence-card {
        grid-template-columns: 62px minmax(0, 1fr);
    }

        .st-presence-card > button {
            grid-column: 1 / -1;
        }

    .st-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .st-registration {
        width: 100%;
    }
}
/* =========================================================
   SIPCORE AI WORKDESK REPORTS
   ========================================================= */

.air-page {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.air-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: radial-gradient(circle at 92% 16%, rgba(139, 92, 246, 0.09), transparent 25%), #ffffff;
    box-shadow: 0 8px 28px rgba(15, 34, 65, 0.05);
}

    .air-toolbar h1 {
        margin: 2px 0 6px;
        font-size: 26px;
    }

    .air-toolbar p:last-child {
        max-width: 780px;
        margin: 0;
        color: var(--muted);
    }

.air-toolbar-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
}

.air-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(360px, 31vw);
    margin: 0;
}

    .air-search > span {
        position: absolute;
        left: 13px;
        z-index: 1;
        color: #8290a3;
        pointer-events: none;
    }

    .air-search input {
        height: 42px;
        padding: 9px 40px;
        border-radius: 12px;
        background: #f8fafc;
    }

    .air-search button {
        position: absolute;
        right: 5px;
        width: 31px;
        height: 31px;
        padding: 0;
        border: 0;
        background: transparent;
    }

.air-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
}

    .air-alert.error {
        border: 1px solid #fecaca;
        background: #fff5f5;
        color: #991b1b;
    }

    .air-alert.success {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #166534;
    }

    .air-alert button {
        width: 30px;
        height: 30px;
        padding: 0;
    }

.air-loading,
.air-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 30px;
    color: var(--muted);
    text-align: center;
}

    .air-empty > span {
        display: grid;
        place-items: center;
        width: 60px;
        height: 60px;
        border-radius: 18px;
        background: #f3e8ff;
        color: #7e22ce;
        font-size: 27px;
    }

    .air-empty h3 {
        margin: 12px 0 5px;
        color: var(--text);
    }

    .air-empty p {
        max-width: 480px;
        margin: 0 0 16px;
    }

.air-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e8ddf7;
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: air-spin 0.8s linear infinite;
}

@keyframes air-spin {
    to {
        transform: rotate(360deg);
    }
}

.air-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.air-summary-card {
    display: grid;
    grid-template-columns: 49px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
}

    .air-summary-card > span {
        display: grid;
        place-items: center;
        width: 49px;
        height: 49px;
        border-radius: 14px;
        background: #eaf2ff;
        color: #1764c0;
        font-size: 21px;
        font-weight: 800;
    }

        .air-summary-card > span.ready {
            background: #dcfce7;
            color: #15803d;
        }

        .air-summary-card > span.pending {
            background: #fef3c7;
            color: #a16207;
        }

        .air-summary-card > span.approval {
            background: #f3e8ff;
            color: #7e22ce;
        }

    .air-summary-card small,
    .air-summary-card strong,
    .air-summary-card em {
        display: block;
    }

    .air-summary-card small {
        color: var(--muted);
        font-size: 10px;
    }

    .air-summary-card strong {
        margin: 2px 0;
        font-size: 25px;
    }

    .air-summary-card em {
        color: #8290a3;
        font-size: 9px;
        font-style: normal;
    }

.air-report-panel {
    padding: 0;
    overflow: hidden;
}

.air-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

    .air-report-header h2 {
        margin: 1px 0 0;
    }

.air-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

    .air-filter-tabs button {
        min-height: 34px;
        padding: 6px 13px;
        border-color: transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--muted);
        font-size: 11px;
    }

        .air-filter-tabs button.active {
            background: #f3e8ff;
            color: #7e22ce;
        }

.air-report-explainer {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 14px 16px 0;
    padding: 11px 13px;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    background: #faf5ff;
}

    .air-report-explainer > span {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #f3e8ff;
        color: #7e22ce;
        font-size: 19px;
    }

    .air-report-explainer strong,
    .air-report-explainer p {
        display: block;
    }

    .air-report-explainer p {
        margin: 3px 0 0;
        color: #6d5b7d;
        font-size: 9px;
    }

.air-task-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.air-task-card {
    display: grid;
    align-content: start;
    gap: 13px;
    padding: 16px;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    background: #ffffff;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .air-task-card:hover {
        transform: translateY(-2px);
        border-color: #d8b4fe;
        box-shadow: 0 12px 28px rgba(61, 31, 94, 0.09);
    }

    .air-task-card > header {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

.air-task-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #f3e8ff;
    color: #7e22ce;
    font-size: 20px;
}

.air-task-title {
    min-width: 0;
}

    .air-task-title strong,
    .air-task-title small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .air-task-title small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 8px;
    }

.air-eligibility {
    max-width: 125px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 8px;
    font-weight: 800;
    text-align: center;
}

    .air-eligibility.ready {
        background: #dcfce7;
        color: #166534;
    }

    .air-eligibility.approval {
        background: #f3e8ff;
        color: #7e22ce;
    }

    .air-eligibility.pending {
        background: #fef3c7;
        color: #92400e;
    }

.air-task-card > p {
    min-height: 43px;
    margin: 0;
    color: #5d697a;
    font-size: 10px;
    line-height: 1.55;
}

.air-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.air-chip {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 8px;
    font-weight: 800;
}

    .air-chip.in-progress {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .air-chip.on-hold {
        background: #fef3c7;
        color: #92400e;
    }

    .air-chip.completed {
        background: #dcfce7;
        color: #166534;
    }

    .air-chip.approval {
        background: #f3e8ff;
        color: #7e22ce;
    }

    .air-chip.cancelled,
    .air-chip.critical {
        background: #fee2e2;
        color: #b91c1c;
    }

    .air-chip.high {
        background: #ffedd5;
        color: #c2410c;
    }

    .air-chip.low {
        background: #ecfeff;
        color: #0e7490;
    }

.air-progress-label {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 8px;
}

    .air-progress-label strong {
        color: var(--text);
    }

.air-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1f6;
}

    .air-progress i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #7c3aed, #a855f7);
    }

.air-task-card dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

    .air-task-card dl > div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

.air-task-card dt {
    color: var(--muted);
    font-size: 8px;
}

.air-task-card dd {
    margin: 0;
    max-width: 62%;
    overflow: hidden;
    font-size: 8px;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.air-readiness-note {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 8px;
    border-radius: 10px;
    background: #f8fafc;
}

    .air-readiness-note > span {
        display: grid;
        place-items: center;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: #e2e8f0;
        font-size: 9px;
        font-weight: 800;
    }

    .air-readiness-note p {
        margin: 0;
        color: #667386;
        font-size: 8px;
        line-height: 1.45;
    }

    .air-readiness-note.ready {
        background: #f0fdf4;
    }

        .air-readiness-note.ready > span {
            background: #dcfce7;
            color: #166534;
        }

    .air-readiness-note.approval {
        background: #faf5ff;
    }

        .air-readiness-note.approval > span {
            background: #f3e8ff;
            color: #7e22ce;
        }

    .air-readiness-note.pending {
        background: #fffbeb;
    }

        .air-readiness-note.pending > span {
            background: #fef3c7;
            color: #92400e;
        }

.air-task-card footer {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 7px;
    margin-top: auto;
}

@media (max-width: 1220px) {
    .air-task-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .air-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .air-toolbar,
    .air-report-header {
        align-items: stretch;
        flex-direction: column;
    }

    .air-toolbar-actions {
        width: 100%;
    }

    .air-search {
        width: auto;
        flex: 1;
    }
}

@media (max-width: 650px) {
    .air-summary-grid,
    .air-task-grid {
        grid-template-columns: 1fr;
    }

    .air-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .air-task-grid {
        padding: 12px;
    }

    .air-task-card > header {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .air-eligibility {
        grid-column: 1 / -1;
        max-width: none;
    }

    .air-task-card footer {
        grid-template-columns: 1fr;
    }
}

.login-password-field {
    position: relative;
    display: flex;
    align-items: center;
}

    .login-password-field input {
        width: 100%;
        padding-right: 72px;
    }

.login-password-toggle {
    position: absolute;
    right: 6px;
    width: auto;
    min-width: 54px;
    height: 32px;
    padding: 0 9px;
    border-color: transparent;
    background: transparent;
    color: var(--brand);
    font-size: 9px;
}

.remember-login-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0;
    padding: 11px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #f8fafc;
    cursor: pointer;
}

    .remember-login-option input {
        width: 17px;
        height: 17px;
        margin: 2px 0 0;
    }

    .remember-login-option strong,
    .remember-login-option small {
        display: block;
    }

    .remember-login-option small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px;
        line-height: 1.45;
    }

.login-advanced-settings {
    margin: 10px 0 16px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #ffffff;
}

    .login-advanced-settings summary {
        color: #526174;
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
    }

    .login-advanced-settings[open] summary {
        margin-bottom: 12px;
    }

.login-restoring {
    display: grid;
    justify-items: center;
    gap: 15px;
    min-height: 360px;
    align-content: center;
    text-align: center;
}

.login-restoring-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #dbe7f5;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: login-session-spin 0.8s linear infinite;
}

@keyframes login-session-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   MESSAGE THREAD AUTO-SCROLL
   Append this block to the END of app.css
   ========================================================= */

.chat-layout {
    position: relative;
}

.chat-message-area {
    scroll-padding-bottom: 24px;
}

.scroll-to-latest-button {
    position: absolute;
    z-index: 12;
    right: 24px;
    bottom: 118px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 12px 8px 9px;
    border: 1px solid #cbd9ec;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #1e4f91;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(15, 34, 65, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

    .scroll-to-latest-button:hover {
        border-color: #8fb5ea;
        background: #ffffff;
        box-shadow: 0 16px 36px rgba(15, 34, 65, 0.24);
        transform: translateY(-2px);
    }

    .scroll-to-latest-button:focus-visible {
        outline: 3px solid rgba(15, 107, 255, 0.22);
        outline-offset: 3px;
    }

.scroll-to-latest-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0f5fd2;
    font-size: 16px;
    line-height: 1;
}

.scroll-to-latest-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
}

@media (max-width: 820px) {
    .scroll-to-latest-button {
        right: 16px;
        bottom: 112px;
    }
}

@media (max-width: 520px) {
    .scroll-to-latest-button {
        right: 12px;
        bottom: 108px;
        min-height: 38px;
        padding: 7px 10px 7px 8px;
    }
}
/* =========================================================
   WORKDESK DISCUSSION — CONTAINED CHAT WORKSPACE
   Append this block to the VERY END of app.css
   ========================================================= */

.wd-discussion-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: min(760px, calc(100vh - 150px));
    height: min(760px, calc(100dvh - 150px));
    min-height: 560px;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(15, 34, 65, 0.08);
}

.wd-discussion-header {
    z-index: 3;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 16px;
    border-bottom: 1px solid #e7edf5;
    background: #ffffff;
}

.wd-back {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 11px;
}

.wd-discussion-heading {
    min-width: 0;
}

    .wd-discussion-heading .eyebrow {
        margin-bottom: 2px;
    }

    .wd-discussion-heading h2 {
        margin: 0;
        overflow: hidden;
        font-size: 17px;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wd-discussion-heading small {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 10px;
    }

.wd-discussion-refresh {
    white-space: nowrap;
}

.wd-discussion-thread-wrapper {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.wd-discussion-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    gap: 11px;
    padding: 20px 22px 28px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient( rgba(248, 250, 253, 0.96), rgba(243, 247, 252, 0.96)), radial-gradient( circle at top left, #e9f2ff, transparent 46%);
}

    .wd-discussion-body::-webkit-scrollbar {
        width: 9px;
    }

    .wd-discussion-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .wd-discussion-body::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: rgba(100, 116, 139, 0.4);
        background-clip: padding-box;
    }

.wd-discussion-end-marker {
    width: 100%;
    height: 1px;
    flex: 0 0 auto;
}

.wd-scroll-latest {
    position: absolute;
    z-index: 6;
    right: 18px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #d7e2ef;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    color: #234468;
    box-shadow: 0 10px 28px rgba(15, 34, 65, 0.18);
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(7px);
}

    .wd-scroll-latest:hover {
        transform: translateY(-1px);
        background: #ffffff;
    }

    .wd-scroll-latest > span:first-child {
        font-size: 16px;
        line-height: 1;
    }

    .wd-scroll-latest strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 21px;
        height: 21px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--brand);
        color: #ffffff;
        font-size: 9px;
    }

.wd-comment-composer {
    z-index: 4;
    display: grid;
    gap: 9px;
    padding: 12px 14px 11px;
    border-top: 1px solid #e4eaf2;
    background: #ffffff;
}

.wd-reply-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-left: 3px solid var(--brand);
    border-radius: 9px;
    background: #eef5ff;
    color: #40516a;
    font-size: 10px;
}

    .wd-reply-banner > div {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 7px;
    }

    .wd-reply-banner strong {
        color: #173f78;
    }

    .wd-reply-banner button {
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        padding: 0;
    }

.wd-comment-composer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

    .wd-comment-composer-row textarea {
        width: 100%;
        min-height: 54px;
        max-height: 150px;
        margin: 0;
        resize: vertical;
        border-radius: 13px;
        background: #f8fafc;
    }

.wd-send-comment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 46px;
    gap: 7px;
    white-space: nowrap;
}

.wd-comment-composer-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 12px;
    color: var(--muted);
}

    .wd-comment-composer-help small {
        font-size: 9px;
    }

        .wd-comment-composer-help small > span {
            margin: 0 5px;
        }

.wd-discussion-closed {
    color: #a15c13;
    font-weight: 700;
}

.wd-comment-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: wd-discussion-spin 0.8s linear infinite;
}

@keyframes wd-discussion-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 820px) {
    .wd-discussion-shell {
        height: calc(100vh - 118px);
        height: calc(100dvh - 118px);
        min-height: 520px;
        border-radius: 14px;
    }

    .wd-discussion-header {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        padding: 11px 12px;
    }

    .wd-discussion-refresh {
        width: 38px;
        height: 38px;
        overflow: hidden;
        padding: 0;
        font-size: 0;
    }

        .wd-discussion-refresh::before {
            content: "↻";
            font-size: 16px;
        }

    .wd-discussion-body {
        padding: 15px 13px 24px;
    }

    .wd-comment-composer-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .wd-send-comment {
        width: 100%;
    }

    .wd-comment-composer-help {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 520px) {
    .wd-discussion-shell {
        height: calc(100vh - 92px);
        height: calc(100dvh - 92px);
        min-height: 480px;
    }

    .wd-discussion-heading h2 {
        font-size: 14px;
    }

    .wd-scroll-latest {
        right: 12px;
        bottom: 12px;
    }
}

/* =========================================================
   SETTINGS — OUTBOUND PSTN NUMBER
   Append to the end of app.css
   ========================================================= */

.st-outbound-loading,
.st-outbound-empty {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border: 1px solid #dfe7f1;
    border-radius: 16px;
    background: #f8fafc;
}

    .st-outbound-loading p,
    .st-outbound-empty p {
        margin: 5px 0 0;
        color: var(--muted);
    }

    .st-outbound-empty > span {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
        border-radius: 15px;
        background: #edf3fb;
        font-size: 24px;
    }

    .st-outbound-empty h3 {
        margin: 0;
    }

.st-outbound-active {
    display: grid;
    gap: 18px;
}

.st-outbound-status-row {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #f0fdf4;
}

    .st-outbound-status-row > span:last-child {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .st-outbound-status-row small {
        color: #64748b;
    }

    .st-outbound-status-row strong {
        color: #15803d;
    }

.st-outbound-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

.st-outbound-number-card {
    padding: 24px;
    border: 1px solid #dce6f3;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff, #eef5ff);
}

    .st-outbound-number-card small {
        display: block;
        color: #64748b;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .st-outbound-number-card > strong {
        display: block;
        margin-top: 8px;
        color: #0b3268;
        font-size: clamp(25px, 4vw, 38px);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .st-outbound-number-card p {
        max-width: 680px;
        margin: 12px 0 0;
        color: #52647d;
    }

.st-outbound-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.st-inline-spinner {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 3px solid #d9e5f4;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: st-outbound-spin 0.8s linear infinite;
}

@keyframes st-outbound-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 820px) {
    .st-outbound-details {
        grid-template-columns: 1fr;
    }

    .st-outbound-loading,
    .st-outbound-empty {
        align-items: flex-start;
        padding: 18px;
    }
}