:root {
    --bg: #eef3f9;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --text: #172033;
    --muted: #667085;
    --primary: #0f4c81;
    --primary-2: #1aa3ff;
    --border: rgba(15, 76, 129, 0.13);
    --shadow: 0 16px 40px rgba(20, 35, 60, 0.09);
    --success: #168a52;
    --danger: #d14343;
    --warning: #d97706;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--text);
    font-family: Tahoma, Arial, sans-serif;
    background:
        radial-gradient(circle at 10% 0%, rgba(26, 163, 255, .10), transparent 28%),
        var(--bg);
}
button, input, select { font: inherit; }
a { color: inherit; }
small { display: block; color: var(--muted); line-height: 1.7; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 74px;
    padding: 12px clamp(18px, 5vw, 72px);
    display: flex;
    align-items: center;
    gap: 28px;
    color: #fff;
    background: linear-gradient(135deg, #0b365c, var(--primary), var(--primary-2));
    box-shadow: 0 8px 24px rgba(15, 76, 129, .22);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.brand-mark { font-size: 30px; }
.brand strong, .brand small { display: block; color: #fff; }
.brand small { margin-top: 4px; font-size: 11px; opacity: .75; }

.topnav {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
}
.topnav a {
    padding: 10px 12px;
    color: rgba(255,255,255,.86);
    text-decoration: none;
    border-radius: 12px;
}
.topnav a:hover { background: rgba(255,255,255,.12); }

.userbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-inline-start: 18px;
    border-inline-start: 1px solid rgba(255,255,255,.22);
}
.userbox strong, .userbox small { display: block; color: #fff; }
.userbox small { opacity: .72; font-size: 11px; }

.page-shell {
    width: min(1480px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 60px;
}

.page-heading {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}
.page-heading h1 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 42px); }
.page-heading p { margin: 0; color: var(--muted); }
.eyebrow {
    color: var(--primary) !important;
    font-size: 13px;
    font-weight: 700;
}

.primary-button,
.secondary-button,
.ghost-button,
.table-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    border-radius: 12px;
    border: 0;
}
.primary-button {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 9px 20px rgba(15, 76, 129, .18);
}
.secondary-button {
    color: var(--primary);
    background: #fff;
    border: 1px solid var(--border);
}
.ghost-button {
    min-height: 38px;
    padding: 8px 13px;
    color: inherit;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
}
.full-button { width: 100%; }

.filter-bar,
.filter-panel {
    margin-bottom: 24px;
    padding: 18px;
    display: flex;
    align-items: end;
    gap: 14px;
    flex-wrap: wrap;
    background: rgba(255,255,255,.9);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(20,35,60,.06);
}
.filter-panel label,
.filter-bar label {
    min-width: 145px;
    flex: 1 1 145px;
}
.filter-panel .search-field { flex-basis: 260px; }
label > span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
input, select {
    width: 100%;
    min-height: 43px;
    padding: 9px 12px;
    color: var(--text);
    background: #fff;
    border: 1px solid #dce4ee;
    border-radius: 11px;
    outline: none;
}
input:focus, select:focus {
    border-color: var(--primary-2);
    box-shadow: 0 0 0 3px rgba(26,163,255,.12);
}
.filter-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}
.filter-actions .ghost-button {
    color: var(--muted);
    background: var(--surface-soft);
    border-color: var(--border);
}

.metric-grid {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 14px;
}
.metric-card {
    min-height: 145px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
}
.metric-card span { color: var(--muted); font-size: 13px; }
.metric-card strong { margin: 9px 0 5px; font-size: 31px; }
.metric-card small { font-size: 11px; }
.metric-blue { border-top: 4px solid #1aa3ff; }
.metric-green { border-top: 4px solid var(--success); }
.metric-red { border-top: 4px solid var(--danger); }
.metric-orange { border-top: 4px solid var(--warning); }

.dashboard-grid,
.detail-grid {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
}
.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.panel {
    margin-bottom: 24px;
    padding: 22px;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
}
.panel-wide { min-width: 0; }
.panel-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.panel-heading h2 { margin: 0 0 6px; font-size: 21px; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 13px; }

.trend-chart {
    min-height: 270px;
    display: flex;
    align-items: stretch;
    gap: 7px;
    padding: 20px 4px 8px;
    overflow-x: auto;
    border-bottom: 1px solid #dce4ee;
}
.chart-column {
    min-width: 28px;
    flex: 1 0 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 3px;
}
.chart-bars {
    height: 220px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}
.chart-bar {
    width: 10px;
    min-height: 2px;
    border-radius: 7px 7px 2px 2px;
}
.chart-bar-total { background: linear-gradient(#1aa3ff, #0f4c81); }
.chart-bar-success { background: linear-gradient(#3cc988, #168a52); }
.chart-label {
    margin-top: 6px;
    color: var(--muted);
    font-size: 9px;
    white-space: nowrap;
    text-align: center;
}
.chart-empty {
    margin: auto;
    color: var(--muted);
}
.chart-legend {
    margin-top: 14px;
    display: flex;
    gap: 18px;
    color: var(--muted);
    font-size: 12px;
}
.chart-legend i {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-inline-end: 5px;
    border-radius: 3px;
}
.legend-total { background: #1aa3ff; }
.legend-success { background: #168a52; }

.status-list { display: grid; gap: 11px; }
.status-list > div {
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 9px;
    background: var(--surface-soft);
    border-radius: 13px;
}
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.status-new { background: #64748b !important; }
.status-follow { background: #1aa3ff !important; }
.status-unreachable { background: #d97706 !important; }
.status-success { background: #168a52 !important; }
.status-closed { background: #d14343 !important; }
.status-default { background: #64748b !important; }

.table-wrap {
    width: 100%;
    overflow-x: auto;
}
table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}
th, td {
    padding: 13px 12px;
    text-align: right;
    vertical-align: top;
    border-bottom: 1px solid #e8edf3;
}
th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    background: var(--surface-soft);
}
td { font-size: 13px; line-height: 1.75; }
td strong { display: block; }
.comment-cell { max-width: 290px; }
.table-link {
    min-height: 34px;
    padding: 6px 11px;
    color: var(--primary);
    background: rgba(26,163,255,.09);
}
.empty-cell, .empty-state {
    padding: 34px !important;
    color: var(--muted);
    text-align: center;
}
.danger-text { color: var(--danger); font-weight: 700; }

.status-badge {
    display: inline-flex;
    padding: 5px 9px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.action-card {
    padding: 22px;
    display: grid;
    gap: 6px;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
}
.action-card > span { font-size: 28px; }
.action-card strong { font-size: 17px; }
.danger-action { border-color: rgba(209,67,67,.26); }

.detail-list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #e8edf3;
    border: 1px solid #e8edf3;
    border-radius: 15px;
    overflow: hidden;
}
.detail-list > div {
    padding: 13px;
    background: #fff;
}
.detail-list dt { color: var(--muted); font-size: 11px; }
.detail-list dd { margin: 7px 0 0; font-size: 13px; font-weight: 700; }

.comment-box {
    min-height: 150px;
    padding: 18px;
    line-height: 2;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 15px;
}
.history-details { margin-top: 14px; }
.history-details summary { cursor: pointer; color: var(--primary); font-weight: 700; }
.history-details div {
    margin-top: 12px;
    padding: 15px;
    color: var(--muted);
    line-height: 2;
    white-space: normal;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 13px;
}

.timeline { position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    width: 2px;
    background: #dce4ee;
}
.timeline-item {
    position: relative;
    padding-right: 38px;
    padding-bottom: 22px;
}
.timeline-marker {
    position: absolute;
    top: 8px;
    right: 3px;
    z-index: 1;
    width: 16px;
    height: 16px;
    background: var(--primary-2);
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(26,163,255,.2);
}
.timeline-content {
    padding: 16px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.timeline-content header,
.timeline-content footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.timeline-content header span,
.timeline-content time,
.timeline-content footer {
    color: var(--muted);
    font-size: 11px;
}
.timeline-content p { margin: 13px 0; line-height: 2; }
.timeline-content footer { justify-content: flex-start; flex-wrap: wrap; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.pagination a {
    padding: 9px 15px;
    color: var(--primary);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.flash {
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 13px;
}
.flash-error { color: #8b1e1e; background: #fff0f0; border: 1px solid #f2b4b4; }
.flash-warning { color: #8a5200; background: #fff8e6; border: 1px solid #efd18b; }
.flash-success { color: #0d6a3d; background: #ecfbf3; border: 1px solid #a8dfc3; }
.flash-info { color: #0f4c81; background: #eef8ff; border: 1px solid #b7dcf4; }

.login-page,
.centered-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.login-card,
.state-card {
    width: min(100%, 460px);
    padding: 34px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(20,35,60,.13);
}
.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
}
.login-brand span { font-size: 28px; }
.login-heading { margin: 25px 0 22px; }
.login-icon, .state-icon { font-size: 45px; }
.login-heading h1, .state-card h1 { margin: 10px 0 8px; }
.login-heading p, .login-note, .state-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.9;
}
.login-form {
    display: grid;
    gap: 15px;
    text-align: right;
}
.login-note { margin-top: 18px; font-size: 11px; }
.state-card .primary-button { margin-top: 16px; }

@media (max-width: 1180px) {
    .metric-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}

@media (max-width: 850px) {
    .topbar { align-items: flex-start; flex-wrap: wrap; }
    .topnav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
    .userbox { margin-inline-start: auto; }
    .dashboard-grid, .detail-grid { grid-template-columns: 1fr; }
    .quick-actions { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .page-shell { width: min(100% - 20px, 1480px); padding-top: 22px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-card { min-height: 125px; padding: 16px; }
    .metric-card strong { font-size: 26px; }
    .userbox > span { display: none; }
    .brand strong { font-size: 13px; }
    .detail-list { grid-template-columns: 1fr; }
    .panel { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* =========================================================
   Vosough Wolf Reports — Visual Upgrade 3.1
   ========================================================= */
:root {
    --bg: #f2f5f9;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --surface-muted: #eef3f8;
    --text: #10243e;
    --muted: #6d7a8d;
    --primary: #125b91;
    --primary-2: #2c8fd0;
    --navy: #102a43;
    --border: rgba(16, 42, 67, .10);
    --border-strong: rgba(16, 42, 67, .16);
    --shadow: 0 14px 38px rgba(20, 38, 60, .07);
    --shadow-hover: 0 20px 50px rgba(20, 38, 60, .11);
    --success: #168a62;
    --danger: #d44f5c;
    --warning: #dd8a26;
    --violet: #7357c8;
    --cyan: #1c91b7;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 7% -10%, rgba(44, 143, 208, .12), transparent 32%),
        linear-gradient(180deg, #f8fafc 0, var(--bg) 380px);
}

.topbar {
    min-height: 72px;
    padding: 10px clamp(18px, 4vw, 64px);
    gap: 24px;
    color: #fff;
    background: rgba(16, 42, 67, .97);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 32px rgba(16,42,67,.18);
    backdrop-filter: blur(18px);
}

.brand { min-width: 210px; gap: 12px; }
.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    background: linear-gradient(145deg, #2c8fd0, #14527f);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px rgba(0,0,0,.15);
}
.brand strong { font-size: 14px; letter-spacing: .2px; }
.brand small { margin-top: 3px; font-size: 10px; color: rgba(255,255,255,.62); }

.topnav {
    margin: 0 auto;
    padding: 4px;
    gap: 3px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
}
.topnav a {
    min-height: 38px;
    padding: 8px 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.68);
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px;
    transition: .2s ease;
}
.topnav a:hover,
.topnav a.is-active {
    color: #fff;
    background: rgba(255,255,255,.12);
}
.topnav a.is-active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

.userbox {
    min-width: 210px;
    justify-content: flex-end;
    padding: 0;
    border: 0;
}
.user-avatar {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    color: #144e79;
    font-size: 14px;
    font-weight: 900;
    background: #eaf6ff;
    border-radius: 12px;
}
.user-identity strong { font-size: 12px; }
.user-identity small { font-size: 10px; color: rgba(255,255,255,.58); }
.logout-button {
    min-height: 34px;
    padding: 7px 11px;
    color: rgba(255,255,255,.72);
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
}
.logout-button:hover { color: #fff; background: rgba(255,255,255,.08); }

.page-shell {
    width: min(1540px, calc(100% - 34px));
    padding: 30px 0 70px;
}

.dashboard-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: clamp(24px, 3.5vw, 42px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(75, 172, 231, .42), transparent 35%),
        linear-gradient(125deg, #102a43, #164f78 65%, #177aa7);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    box-shadow: 0 22px 55px rgba(16,42,67,.18);
}
.dashboard-hero::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    left: -120px;
    bottom: -250px;
    border: 55px solid rgba(255,255,255,.045);
    border-radius: 50%;
}
.dashboard-hero-copy,
.hero-summary { position: relative; z-index: 1; }
.live-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.66);
    font-size: 11px;
}
.live-badge {
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d8fff0;
    font-weight: 700;
    background: rgba(25, 160, 110, .18);
    border: 1px solid rgba(85, 226, 174, .18);
    border-radius: 999px;
}
.live-badge i {
    width: 7px;
    height: 7px;
    background: #5ee4ad;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(94,228,173,.12);
}
.dashboard-hero h1 {
    margin: 13px 0 9px;
    font-size: clamp(27px, 3vw, 42px);
    letter-spacing: -.5px;
}
.dashboard-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 2;
}
.hero-summary {
    min-width: 290px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    backdrop-filter: blur(12px);
}
.hero-summary > div { padding: 12px 14px; }
.hero-summary > div + div { border-right: 1px solid rgba(255,255,255,.12); }
.hero-summary span,
.hero-summary strong { display: block; }
.hero-summary span { margin-bottom: 6px; color: rgba(255,255,255,.58); font-size: 10px; }
.hero-summary strong { font-size: 13px; }

.dashboard-filter {
    position: relative;
    margin-bottom: 18px;
    padding: 14px 16px;
    align-items: end;
    background: rgba(255,255,255,.90);
    border-radius: 18px;
    backdrop-filter: blur(16px);
}
.dashboard-filter .filter-title {
    min-width: 190px;
    margin-left: auto;
}
.filter-title span,
.filter-title small { display: block; }
.filter-title span { margin-bottom: 4px; font-size: 13px; font-weight: 800; }
.filter-title small { font-size: 10px; }
.dashboard-filter label { flex: 0 1 170px; }
.dashboard-filter .primary-button { min-width: 120px; }

.primary-metrics {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.insight-card {
    position: relative;
    overflow: hidden;
    min-height: 166px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: transform .22s ease, box-shadow .22s ease;
}
.insight-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.insight-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary-2);
}
.insight-card-success::before { background: var(--success); }
.insight-card-violet::before { background: var(--violet); }
.insight-card-danger::before { background: var(--danger); }
.metric-topline {
    margin-bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.metric-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
    background: rgba(44,143,208,.10);
    border-radius: 11px;
}
.insight-card-success .metric-icon { color: var(--success); background: rgba(22,138,98,.10); }
.insight-card-violet .metric-icon { color: var(--violet); background: rgba(115,87,200,.10); }
.insight-card-danger .metric-icon { color: var(--danger); background: rgba(212,79,92,.10); }
.metric-topline > a { color: var(--danger); font-size: 10px; font-weight: 800; text-decoration: none; }
.delta {
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 800;
    background: var(--surface-soft);
    border-radius: 999px;
}
.delta-up { color: var(--success); background: rgba(22,138,98,.09); }
.delta-down { color: var(--danger); background: rgba(212,79,92,.09); }
.delta-flat { color: var(--muted); }
.metric-label { color: var(--muted); font-size: 11px; font-weight: 700; }
.insight-card > strong { margin: 7px 0 5px; font-size: 32px; letter-spacing: -.5px; }
.insight-card > small { margin-top: auto; font-size: 10px; }

.secondary-metrics {
    margin-bottom: 18px;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(20,38,60,.045);
}
.mini-metric {
    min-width: 0;
    padding: 14px 15px;
    border-radius: 13px;
}
.mini-metric:hover { background: var(--surface-soft); }
.mini-metric span,
.mini-metric strong,
.mini-metric small { display: block; }
.mini-metric span { color: var(--muted); font-size: 10px; }
.mini-metric strong { margin: 5px 0 2px; font-size: 19px; }
.mini-metric small { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.analytics-grid {
    margin-bottom: 18px;
    display: grid;
    gap: 18px;
}
.analytics-grid-main { grid-template-columns: minmax(0, 2.05fr) minmax(300px, .95fr); }
.analytics-grid-secondary { grid-template-columns: minmax(0, 1.25fr) minmax(270px, .72fr) minmax(300px, 1fr); }
.analytics-card {
    min-width: 0;
    padding: 21px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--border);
    border-radius: 21px;
    box-shadow: var(--shadow);
}
.card-heading {
    min-height: 54px;
    margin-bottom: 17px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}
.card-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .25px;
}
.card-heading h2 { margin: 0 0 5px; font-size: 18px; }
.card-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.text-link { color: var(--primary); font-size: 10px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.modern-legend { margin: 0; flex-wrap: wrap; justify-content: flex-end; }
.modern-legend i { border-radius: 50%; }
.legend-leads { background: #2c8fd0; }
.legend-actions { background: #7357c8; }
.legend-appointments { background: #168a62; }

.svg-line-chart {
    position: relative;
    min-height: 310px;
    overflow: hidden;
}
.svg-line-chart svg { width: 100%; height: 310px; display: block; overflow: visible; }
.chart-grid-line { stroke: rgba(16,42,67,.08); stroke-width: 1; }
.chart-axis-label { fill: #8793a3; font-family: Tahoma, Arial, sans-serif; font-size: 9px; }
.chart-area-leads { fill: url(#leadsAreaGradient); }
.chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart-line-leads { stroke: #2c8fd0; stroke-width: 3; }
.chart-line-actions { stroke: #7357c8; stroke-width: 2.3; stroke-dasharray: 5 5; }
.chart-line-appointments { stroke: #168a62; stroke-width: 2.6; }
.chart-point { stroke: #fff; stroke-width: 2; }
.chart-point-leads { fill: #2c8fd0; }
.chart-point-actions { fill: #7357c8; }
.chart-point-appointments { fill: #168a62; }

.donut-layout {
    display: grid;
    grid-template-columns: minmax(150px, .9fr) minmax(150px, 1fr);
    align-items: center;
    gap: 14px;
}
.donut-chart { min-height: 205px; display: grid; place-items: center; }
.donut-chart svg { width: min(100%, 210px); height: auto; overflow: visible; }
.donut-center-value { fill: var(--text); font-family: Tahoma, Arial, sans-serif; font-size: 25px; font-weight: 900; }
.donut-center-label { fill: var(--muted); font-family: Tahoma, Arial, sans-serif; font-size: 9px; }
.donut-legend { display: grid; gap: 9px; }
.donut-legend > div {
    padding: 8px 9px;
    display: grid;
    grid-template-columns: 9px 1fr auto;
    align-items: center;
    gap: 8px;
    background: var(--surface-soft);
    border-radius: 10px;
}
.donut-legend i { width: 8px; height: 8px; border-radius: 50%; }
.donut-legend span { color: var(--muted); font-size: 10px; }
.donut-legend strong { font-size: 11px; }
[data-status-key="new"] i { background: #7b8797; }
[data-status-key="follow_up"] i { background: #2c8fd0; }
[data-status-key="unreachable"] i { background: #dd8a26; }
[data-status-key="appointment"] i { background: #168a62; }
[data-status-key="closed"] i { background: #d44f5c; }

.ranked-bars { display: grid; gap: 13px; }
.ranked-bar-row {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(90px, 1.25fr) 36px;
    align-items: center;
    gap: 12px;
}
.ranked-bar-label { min-width: 0; display: flex; align-items: center; gap: 9px; }
.ranked-bar-label > span {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 9px;
    font-weight: 900;
    background: rgba(44,143,208,.09);
    border-radius: 8px;
}
.ranked-bar-label strong,
.ranked-bar-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked-bar-label strong { font-size: 11px; }
.ranked-bar-label small { margin-top: 2px; font-size: 8px; }
.ranked-bar-track {
    height: 7px;
    overflow: hidden;
    background: #edf1f6;
    border-radius: 999px;
}
.ranked-bar-track i,
.conversion-cell span i {
    width: 0;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #2c8fd0, #1c91b7);
    border-radius: inherit;
    transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.ranked-bar-value { font-size: 11px; text-align: left; }

.conversion-card { text-align: center; }
.radial-gauge { min-height: 185px; display: grid; place-items: center; }
.radial-gauge svg { width: 185px; height: 185px; }
.gauge-track { fill: none; stroke: #e9eef4; stroke-width: 12; }
.gauge-value { fill: none; stroke: #168a62; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .9s ease; }
.gauge-number { fill: var(--text); font-family: Tahoma, Arial, sans-serif; font-size: 26px; font-weight: 900; }
.gauge-label { fill: var(--muted); font-family: Tahoma, Arial, sans-serif; font-size: 9px; }
.conversion-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.conversion-facts > div { min-width: 0; padding: 9px 7px; background: #fff; }
.conversion-facts span,
.conversion-facts strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversion-facts span { color: var(--muted); font-size: 8px; }
.conversion-facts strong { margin-top: 4px; font-size: 10px; }

.priority-list { display: grid; gap: 7px; }
.priority-list > a {
    padding: 10px;
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: 12px;
    transition: .2s ease;
}
.priority-list > a:hover { background: #fff; border-color: var(--border-strong); transform: translateX(-2px); }
.priority-state { width: 8px; height: 8px; background: var(--warning); border-radius: 50%; }
.priority-state.is-overdue { background: var(--danger); box-shadow: 0 0 0 4px rgba(212,79,92,.10); }
.priority-list strong,
.priority-list small { display: block; }
.priority-list strong { font-size: 11px; }
.priority-list small { margin-top: 3px; font-size: 8px; }
.priority-arrow { color: var(--muted); font-size: 13px; }
.compact-empty { padding: 22px !important; font-size: 10px; }

.team-performance-card { margin-bottom: 18px; }
.agent-chart {
    min-height: 190px;
    margin-bottom: 20px;
    display: grid;
    gap: 11px;
}
.agent-chart-row {
    display: grid;
    grid-template-columns: minmax(115px, .9fr) minmax(180px, 3fr) 64px;
    align-items: center;
    gap: 13px;
}
.agent-chart-name { overflow: hidden; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.agent-chart-track {
    height: 26px;
    display: flex;
    overflow: hidden;
    background: #edf1f6;
    border-radius: 8px;
}
.agent-chart-track i { height: 100%; display: block; transition: width .8s ease; }
.agent-chart-leads { background: #2c8fd0; }
.agent-chart-appointments { background: #168a62; }
.agent-chart-value { font-size: 10px; text-align: left; white-space: nowrap; }
.polished-table-wrap { border: 1px solid var(--border); border-radius: 14px; }
.performance-table th { padding-block: 11px; }
.performance-table td { vertical-align: middle; }
.agent-cell { display: flex; align-items: center; gap: 9px; }
.agent-cell > span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    background: rgba(44,143,208,.09);
    border-radius: 9px;
}
.agent-cell strong,
.agent-cell small { display: block; }
.agent-cell small { font-size: 8px; }
.conversion-cell { min-width: 90px; }
.conversion-cell > strong { margin-bottom: 5px; font-size: 10px; }
.conversion-cell > span { height: 5px; display: block; overflow: hidden; background: #edf1f6; border-radius: 999px; }

.professional-actions .action-card {
    grid-template-columns: 39px minmax(0, 1fr) auto;
    align-items: center;
}
.professional-actions .action-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    background: rgba(44,143,208,.09);
    border-radius: 12px;
}
.professional-actions .danger-action .action-icon { color: var(--danger); background: rgba(212,79,92,.09); }
.professional-actions strong,
.professional-actions small { display: block; }
.professional-actions small { margin-top: 3px; font-size: 9px; }
.professional-actions b { font-size: 20px; }

/* General page polish */
.page-heading { margin-bottom: 19px; }
.page-heading h1 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.35px; }
.panel,
.filter-panel { border-radius: 18px; box-shadow: var(--shadow); }
.table-wrap { scrollbar-width: thin; }
table { min-width: 880px; }
th { color: #758196; background: #f7f9fc; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: rgba(44,143,208,.025); }
.status-badge { box-shadow: none; }
.table-link { border: 1px solid rgba(44,143,208,.12); }
.login-card,
.state-card { border-radius: 22px; box-shadow: 0 25px 65px rgba(20,38,60,.12); }

@media (max-width: 1220px) {
    .primary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .secondary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .analytics-grid-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .priority-card { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
    .topbar { flex-wrap: wrap; }
    .brand, .userbox { min-width: auto; }
    .topnav { order: 3; width: 100%; justify-content: center; }
    .dashboard-hero { align-items: flex-start; flex-direction: column; }
    .hero-summary { width: 100%; }
    .analytics-grid-main,
    .analytics-grid-secondary { grid-template-columns: 1fr; }
    .priority-card { grid-column: auto; }
    .donut-layout { grid-template-columns: minmax(150px, .75fr) minmax(180px, 1fr); }
}

@media (max-width: 650px) {
    .page-shell { width: min(100% - 20px, 1540px); padding-top: 18px; }
    .topbar { position: static; padding: 10px; }
    .user-identity { display: none; }
    .topnav { overflow-x: auto; justify-content: flex-start; }
    .topnav a { white-space: nowrap; }
    .dashboard-hero { padding: 23px 19px; border-radius: 20px; }
    .dashboard-hero h1 { font-size: 27px; }
    .hero-summary { min-width: 0; }
    .dashboard-filter .filter-title { width: 100%; min-width: 0; }
    .dashboard-filter label { flex: 1 1 140px; }
    .dashboard-filter .primary-button { width: 100%; }
    .primary-metrics { grid-template-columns: 1fr 1fr; gap: 9px; }
    .insight-card { min-height: 150px; padding: 16px; }
    .insight-card > strong { font-size: 27px; }
    .secondary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-card { padding: 17px; border-radius: 17px; }
    .card-heading { flex-direction: column; }
    .modern-legend { justify-content: flex-start; }
    .svg-line-chart,
    .svg-line-chart svg { min-height: 260px; height: 260px; }
    .donut-layout { grid-template-columns: 1fr; }
    .donut-chart { min-height: 170px; }
    .ranked-bar-row { grid-template-columns: minmax(115px, 1fr) minmax(70px, 1fr) 32px; gap: 8px; }
    .agent-chart-row { grid-template-columns: 95px minmax(130px, 1fr) 54px; gap: 8px; }
}

@media (max-width: 430px) {
    .primary-metrics { grid-template-columns: 1fr; }
    .secondary-metrics { grid-template-columns: 1fr 1fr; }
    .hero-summary { grid-template-columns: 1fr; }
    .hero-summary > div + div { border-top: 1px solid rgba(255,255,255,.12); border-right: 0; }
}



/* Phase 4B — SIM Call Reporting */
.call-section-heading {
    margin: 36px 0 18px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}
.call-section-heading h2 { margin: 5px 0 7px; font-size: clamp(24px, 3vw, 32px); }
.call-section-heading p { margin: 0; color: var(--muted); line-height: 1.8; }
.call-metric-grid {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 13px;
}
.call-metric-card {
    min-height: 152px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(160deg, #fff, #f8fbfe);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(20,35,60,.075);
}
.call-metric-card > div:first-child { min-height: 29px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.call-metric-card > div a { color: var(--primary); font-size: 11px; font-weight: 700; text-decoration: none; }
.call-metric-card > span { margin-top: 11px; color: var(--muted); font-size: 12px; }
.call-metric-card > strong { margin: 6px 0 4px; font-size: 29px; }
.call-metric-card > small { font-size: 10px; }
.call-metric-icon { width: 29px; height: 29px; display: inline-grid; place-items: center; font-weight: 800; border-radius: 9px; background: #edf4fa; }
.call-metric-incoming { border-top: 3px solid #2c8fd0; }
.call-metric-outgoing { border-top: 3px solid #7257c7; }
.call-metric-answered { border-top: 3px solid #168a62; }
.call-metric-missed, .call-metric-open { border-top: 3px solid #d44f5c; }
.call-analytics-grid { margin-bottom: 20px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, .9fr); gap: 18px; }
.call-analytics-secondary { grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr); }
.call-line-chart { min-height: 300px; overflow-x: auto; }
.call-line-chart svg { width: 100%; min-width: 720px; height: auto; display: block; }
.call-chart-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.call-chart-incoming { stroke: #2c8fd0; }
.call-chart-outgoing { stroke: #7257c7; }
.call-chart-missed { stroke: #d44f5c; stroke-dasharray: 6 5; }
.call-chart-point-incoming { fill: #2c8fd0; }
.call-chart-point-outgoing { fill: #7257c7; }
.call-chart-point-missed { fill: #d44f5c; }
.legend-call-incoming { background: #2c8fd0 !important; }
.legend-call-outgoing { background: #7257c7 !important; }
.legend-call-missed { background: #d44f5c !important; }
.call-donut-chart { width: min(230px, 100%); margin: auto; }
.call-donut-chart svg { width: 100%; height: auto; display: block; }
.call-result-legend { display: grid; gap: 10px; }
.call-result-legend > div { display: grid; grid-template-columns: 11px 1fr auto; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.call-result-legend i { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.call-result-legend [data-call-result-key="answered"] i { background: #168a62; }
.call-result-legend [data-call-result-key="missed"] i { background: #d44f5c; }
.call-result-legend [data-call-result-key="not_connected"] i { background: #dd8a26; }
.call-result-neutral { background: #7257c7 !important; }
.hourly-call-chart { min-height: 250px; display: flex; align-items: flex-end; gap: 5px; padding: 14px 5px 4px; overflow-x: auto; border-bottom: 1px solid #e4eaf1; }
.hourly-call-column { min-width: 27px; flex: 1 0 27px; display: grid; grid-template-rows: 210px auto; gap: 7px; text-align: center; }
.hourly-call-bars { height: 210px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.hourly-call-bars i { width: 7px; min-height: 2px; border-radius: 5px 5px 1px 1px; transition: height .35s ease; }
.hourly-incoming { background: #2c8fd0; }
.hourly-outgoing { background: #7257c7; }
.hourly-call-column small { font-size: 8px; white-space: nowrap; }
.callback-list, .recent-call-list { display: grid; gap: 8px; }
.callback-list > a, .recent-call-list > a {
    padding: 11px 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: var(--surface-soft);
    border: 1px solid transparent;
    border-radius: 13px;
}
.callback-list > a:hover, .recent-call-list > a:hover { border-color: var(--border); background: #fff; }
.callback-list strong, .recent-call-list strong { display: block; font-size: 13px; }
.callback-list small, .recent-call-list small { font-size: 10px; }
.callback-status-dot { width: 11px; height: 11px; border-radius: 50%; background: #d44f5c; box-shadow: 0 0 0 4px rgba(212,79,92,.1); }
.callback-attempted { background: #dd8a26 !important; }
.callback-completed { background: #168a62 !important; }
.callback-label { max-width: 145px; color: var(--danger); font-size: 9px; text-align: left; }
.call-team-card, .recent-calls-card { margin-bottom: 24px; }
.call-agent-chart { margin-bottom: 22px; display: grid; gap: 12px; }
.call-agent-row { display: grid; grid-template-columns: 130px 1fr 95px; align-items: center; gap: 12px; }
.call-agent-name { font-size: 12px; font-weight: 700; }
.call-agent-track { height: 11px; display: flex; overflow: hidden; background: #edf1f6; border-radius: 999px; }
.call-agent-track i { height: 100%; transition: width .45s ease; }
.call-agent-answered { background: #168a62; }
.call-agent-unanswered { background: #cbd5e1; }
.call-agent-value { color: var(--muted); font-size: 10px; text-align: left; }
.call-direction-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; font-weight: 800; border-radius: 11px; }
.call-direction-incoming { background: #2c8fd0; }
.call-direction-outgoing { background: #7257c7; }
.call-result-badge, .call-direction-badge, .callback-badge { display: inline-flex; padding: 5px 8px; font-size: 10px; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.call-result-answered { color: #0d6948; background: #e8f8f1; }
.call-result-missed, .call-result-rejected { color: #a52d39; background: #fff0f2; }
.call-result-not-connected { color: #95570c; background: #fff7e7; }
.call-result-blocked, .call-result-unknown { color: #526171; background: #eef2f6; }
.call-direction-badge.call-direction-incoming { color: #17608f; background: #eaf6fd; }
.call-direction-badge.call-direction-outgoing { color: #59429e; background: #f0edfb; }
.callback-badge { max-width: 190px; white-space: normal; line-height: 1.55; }
.callback-pending { color: #a52d39; background: #fff0f2; }
.callback-attempted { color: #95570c; background: #fff7e7; }
.callback-completed { color: #0d6948; background: #e8f8f1; }
.call-page-summary, .lead-call-summary { margin-bottom: 20px; display: grid; grid-template-columns: repeat(6, minmax(130px,1fr)); gap: 11px; }
.call-page-summary article, .lead-call-summary article { padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 8px 22px rgba(20,35,60,.055); }
.call-page-summary span, .lead-call-summary span { color: var(--muted); font-size: 11px; }
.call-page-summary strong, .lead-call-summary strong { margin-top: 6px; display: block; font-size: 21px; }
.summary-danger { border-top: 3px solid #d44f5c !important; }
.summary-warning { border-top: 3px solid #dd8a26 !important; }
.calls-table { min-width: 1120px; }
.ownership-warning { color: #b26d12; }
.heading-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.timeline-legend { display: flex; gap: 15px; color: var(--muted); font-size: 11px; }
.timeline-legend i { width: 9px; height: 9px; display: inline-block; margin-inline-end: 5px; border-radius: 50%; }
.timeline-legend-call { background: #2c8fd0; }
.timeline-legend-workflow { background: #7257c7; }
.unified-timeline .timeline-marker { width: 24px; height: 24px; right: -1px; display: grid; place-items: center; color: #fff; font-size: 10px; border: 3px solid #fff; }
.timeline-kind-call .timeline-marker { background: #2c8fd0; }
.timeline-kind-workflow .timeline-marker { background: #7257c7; }
.timeline-call-details { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.timeline-call-details span { padding: 6px 9px; color: var(--muted); font-size: 10px; background: #fff; border: 1px solid var(--border); border-radius: 9px; }
@media (max-width: 1180px) {
    .call-metric-grid { grid-template-columns: repeat(3, minmax(150px,1fr)); }
    .call-page-summary, .lead-call-summary { grid-template-columns: repeat(3, minmax(130px,1fr)); }
}
@media (max-width: 850px) {
    .call-analytics-grid, .call-analytics-secondary { grid-template-columns: 1fr; }
    .call-section-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
    .call-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .call-metric-card { min-height: 135px; padding: 14px; }
    .call-page-summary, .lead-call-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .call-agent-row { grid-template-columns: 100px 1fr; }
    .call-agent-value { grid-column: 2; }
    .callback-label { display: none; }
}

/* Case service editor */
.case-service-form {
    margin-bottom: 20px;
    padding: 15px;
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr) auto;
    align-items: end;
    gap: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.case-service-form label,
.case-service-form label span {
    display: block;
}

.case-service-form label span {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.case-service-form select {
    width: 100%;
    min-height: 43px;
    padding: 9px 12px;
    color: inherit;
    font: inherit;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.case-service-form .primary-button {
    min-height: 43px;
    white-space: nowrap;
}

.case-service-note {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.9;
}

@media (max-width: 620px) {
    .case-service-form {
        grid-template-columns: 1fr;
    }

    .case-service-form .primary-button {
        width: 100%;
    }
}

/* Case workflow form */
.case-workflow-panel {
    overflow: visible;
}

.case-workflow-form {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        minmax(240px, 1fr);
    gap: 16px;
}

.case-workflow-form label,
.case-workflow-form label > span {
    display: block;
}

.case-workflow-form label > span {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.case-workflow-form select,
.case-workflow-form input,
.case-workflow-form textarea {
    width: 100%;
    padding: 10px 12px;
    color: inherit;
    font: inherit;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    box-sizing: border-box;
}

.case-workflow-form select,
.case-workflow-form input {
    min-height: 44px;
}

.case-workflow-form textarea {
    min-height: 112px;
    line-height: 1.9;
    resize: vertical;
}

.case-workflow-form select:focus,
.case-workflow-form input:focus,
.case-workflow-form textarea:focus {
    border-color: var(--primary);
    outline: 2px solid
        color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
        );
}

.case-workflow-form label small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.8;
}

.workflow-comment-field,
.workflow-current-follow-up,
.workflow-submit-row {
    grid-column: 1 / -1;
}

.workflow-current-follow-up {
    padding: 11px 13px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.9;
}

.workflow-current-follow-up strong {
    margin-left: 5px;
}

.workflow-submit-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.workflow-submit-row .primary-button {
    min-width: 130px;
    min-height: 44px;
}

.workflow-submit-row p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.8;
}

@media (max-width: 720px) {
    .case-workflow-form {
        grid-template-columns: 1fr;
    }

    .workflow-operation-field,
    .workflow-follow-up-field,
    .workflow-comment-field,
    .workflow-current-follow-up,
    .workflow-submit-row {
        grid-column: 1;
    }

    .workflow-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .workflow-submit-row .primary-button {
        width: 100%;
    }
}

/* Case assignment management */
.case-assignment-panel {
    overflow: visible;
}

.current-assignee {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 3px;
}

.current-assignee span {
    color: var(--muted);
    font-size: 10px;
}

.current-assignee strong {
    font-size: 12px;
}

.case-assignment-form {
    display: grid;
    grid-template-columns:
        minmax(220px, .8fr)
        minmax(280px, 1.2fr);
    gap: 16px;
}

.case-assignment-form label,
.case-assignment-form label > span {
    display: block;
}

.case-assignment-form label > span {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.case-assignment-form select,
.case-assignment-form textarea {
    width: 100%;
    padding: 10px 12px;
    color: inherit;
    font: inherit;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    box-sizing: border-box;
}

.case-assignment-form select {
    min-height: 44px;
}

.case-assignment-form textarea {
    min-height: 92px;
    line-height: 1.9;
    resize: vertical;
}

.case-assignment-form select:focus,
.case-assignment-form textarea:focus {
    border-color: var(--primary);
    outline: 2px solid
        color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
        );
}

.case-assignment-form label small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.8;
}

.assignment-submit-row {
    display: flex;
    align-items: center;
    grid-column: 1 / -1;
    gap: 14px;
}

.assignment-submit-row .primary-button {
    min-width: 145px;
    min-height: 44px;
}

.assignment-submit-row p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.8;
}

@media (max-width: 720px) {
    .current-assignee {
        align-items: flex-start;
    }

    .case-assignment-form {
        grid-template-columns: 1fr;
    }

    .assignment-agent-field,
    .assignment-reason-field,
    .assignment-submit-row {
        grid-column: 1;
    }

    .assignment-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .assignment-submit-row .primary-button {
        width: 100%;
    }
}

/* Customer profile form */
.customer-profile-form {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.customer-profile-form label,
.customer-profile-form label > span {
    display: block;
}

.customer-profile-form label > span {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.customer-profile-form input,
.customer-profile-form select,
.customer-profile-form textarea {
    width: 100%;
    padding: 10px 12px;
    color: inherit;
    font: inherit;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    box-sizing: border-box;
}

.customer-profile-form input,
.customer-profile-form select {
    min-height: 44px;
}

.customer-profile-form textarea {
    min-height: 110px;
    line-height: 1.9;
    resize: vertical;
}

.customer-profile-form input:focus,
.customer-profile-form select:focus,
.customer-profile-form textarea:focus {
    border-color: var(--primary);
    outline: 2px solid
        color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
        );
}

.customer-profile-form label small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.8;
}

.customer-profile-notes-field,
.customer-profile-submit-row {
    grid-column: 1 / -1;
}

.customer-profile-submit-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.customer-profile-submit-row .primary-button {
    min-width: 170px;
    min-height: 44px;
}

.customer-profile-submit-row p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.8;
}

@media (max-width: 720px) {
    .customer-profile-form {
        grid-template-columns: 1fr;
    }

    .customer-profile-notes-field,
    .customer-profile-submit-row {
        grid-column: 1;
    }

    .customer-profile-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-profile-submit-row .primary-button {
        width: 100%;
    }
}

/* Customer phone manager */
.customer-phone-manager {
    margin: 22px 0;
    padding: 18px;
    background: rgba(248, 250, 252, 0.75);
    border: 1px solid var(--border);
    border-radius: 14px;
}

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

.customer-phone-heading h3 {
    margin: 0 0 4px;
    font-size: 14px;
}

.customer-phone-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.8;
}

.customer-phone-list {
    display: grid;
    gap: 10px;
}

.customer-phone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.customer-phone-value {
    min-width: 0;
}

.customer-phone-value strong {
    display: block;
    direction: ltr;
    text-align: right;
    font-size: 14px;
}

.customer-phone-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px;
    color: var(--muted);
    font-size: 9px;
}

.customer-phone-meta span {
    padding: 3px 7px;
    background: #f1f5f9;
    border-radius: 999px;
}

.customer-phone-meta
.customer-phone-primary-badge {
    color: #166534;
    background: #dcfce7;
    font-weight: 700;
}

.customer-phone-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.customer-phone-actions form {
    margin: 0;
}

.customer-phone-primary-button,
.customer-phone-delete-button {
    min-height: 36px;
    padding: 7px 10px;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.customer-phone-primary-button:hover {
    border-color: var(--primary);
}

.customer-phone-delete-button {
    color: #b91c1c;
    border-color: #fecaca;
}

.customer-phone-delete-button:hover {
    background: #fef2f2;
}

.customer-phone-add-form {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        auto;
    align-items: end;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.customer-phone-add-form label,
.customer-phone-add-form label > span {
    display: block;
}

.customer-phone-add-form label > span {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.customer-phone-add-form input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    direction: ltr;
    text-align: left;
    color: inherit;
    font: inherit;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 11px;
    box-sizing: border-box;
}

.customer-phone-add-form input:focus {
    border-color: var(--primary);
    outline: 2px solid
        color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
        );
}

.customer-phone-add-form .primary-button {
    min-height: 44px;
    white-space: nowrap;
}

.customer-phone-add-form > p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.8;
}

@media (max-width: 720px) {
    .customer-phone-row {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-phone-actions {
        width: 100%;
    }

    .customer-phone-actions form {
        flex: 1;
    }

    .customer-phone-primary-button,
    .customer-phone-delete-button {
        width: 100%;
    }

    .customer-phone-add-form {
        grid-template-columns: 1fr;
    }

    .customer-phone-add-form
    .primary-button {
        width: 100%;
    }
}