/*
 * Global spacing refinement
 *
 * This file is intentionally loaded after the phase styles. It gives every
 * application area one shared rhythm without changing its visual language or
 * feature-specific layout.
 */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --page-gutter: clamp(28px, 3vw, 44px);
    --page-block-start: 32px;
    --page-block-end: 64px;
    --page-max-width: 1600px;
    --section-gap: 22px;
    --panel-padding: clamp(22px, 1.8vw, 28px);
    --control-gap: 14px;
}

/* Application frame and primary page rhythm. */
.sidebar { padding: 26px 18px; }
.brand { padding-inline: 9px; padding-bottom: 26px; }
.brand-logo {
    display: block;
    width: 40px;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
    flex: 0 0 auto;
}
.sidebar-brand-logo { width: 40px; height: 40px; }
.login-brand-logo { width: 52px; height: 52px; }
.nav { gap: 5px; }
.nav a { min-height: 44px; padding-inline: 12px; }
.topbar {
    height: 94px;
    padding-inline: max(var(--page-gutter), calc((100% - var(--page-max-width)) / 2 + var(--page-gutter)));
}
.content {
    width: 100%;
    max-width: var(--page-max-width);
    padding: var(--page-block-start) var(--page-gutter) var(--page-block-end);
}
.content > * + * { margin-top: var(--section-gap); }

/* Shared surfaces and section headings. */
.welcome-card { padding: 30px 32px; }
.panel-head { padding: 24px var(--panel-padding); gap: var(--space-6); }
.panel-head h2 { margin-block: 3px; line-height: 1.3; }
.panel-head p { margin-top: 4px; line-height: 1.55; }
.panel-pad,
.telephony-health > .panel,
.telephony-admin-grid > .panel,
.detail-grid > .panel,
.dialer-console,
.countdown,
.export-panel { padding: var(--panel-padding); }
.telephony-admin-grid > .panel > .form-grid { padding: 0; margin-top: var(--space-5); }
.report-grid > .panel > :is(.trend-list, .compact-status),
.panel-head + .breakdown-list,
.panel-head + .agent-status-grid,
.panel-head + .scope-form { padding: var(--space-2) var(--panel-padding) var(--panel-padding); }
.report-grid > .panel > h2:first-child {
    margin: 0;
    padding: 24px var(--panel-padding);
    border-bottom: 1px solid var(--line);
    font-size: 18px;
    line-height: 1.3;
}
.scope-form + .scope-list { margin: 0 var(--panel-padding) var(--panel-padding); }
.check { padding: 21px var(--panel-padding); }
.metrics,
.report-metrics,
.report-grid,
.detail-grid,
.campaign-grid,
.due-grid,
.telephony-health,
.telephony-admin-grid,
.agent-status-grid { gap: var(--space-4); }
.metrics article,
.report-metrics article { padding: 22px; }
.detail-card,
.campaign-hero { padding: var(--panel-padding); }
.campaign-grid,
.due-grid { padding: var(--panel-padding); }
.campaign-tile,
.due-grid article,
.agent-status-grid article { padding: var(--space-5); }

/* Navigation, filters, forms, and action areas. */
.tabs { margin-block: 0; gap: var(--space-1); }
.tabs a { padding: 13px 18px; }
.toolbar,
.filter-bar,
.report-filters,
.assignment-form { gap: var(--control-gap); padding: 18px var(--panel-padding); }
.filter-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    background: #fbfcfe;
}
.filter-bar label,
.report-filters label { display: flex; flex-direction: column; gap: 7px; }
.report-filters { margin-bottom: 0; }
.report-filters small { padding-top: var(--space-1); line-height: 1.5; }
.report-nav { margin-bottom: 0; padding: 6px; gap: 6px; }
.report-nav a { padding: 10px 14px; }
.report-search { margin-bottom: 0; gap: var(--space-3); }
.form-grid { gap: 20px 22px; padding: var(--panel-padding); }
.form-grid label,
.form-grid fieldset,
.form-stack label,
.manage-card label { gap: var(--space-2); }
.form-actions { padding: 20px var(--panel-padding); gap: var(--space-3); }
.form-alert { margin: var(--space-5) var(--panel-padding) 0; }
.upload-zone { margin: var(--panel-padding); padding: var(--space-8) var(--panel-padding); }
.mapping-grid { padding: var(--space-3) var(--panel-padding) var(--panel-padding); }
.mapping-grid > * { padding: 13px 12px; }
.mapping-note { margin: 0 var(--panel-padding) var(--panel-padding); padding: var(--space-4) 18px; }
.preview-summary { padding: 22px var(--panel-padding); margin-bottom: 0; }
.preview-toolbar { padding: var(--space-4) var(--panel-padding); }
.confirm-bar { padding: 18px var(--space-6); }
.alert { padding: 14px 18px; margin-bottom: 0; line-height: 1.55; }

/* Tables and dense business lists retain density with more balanced cells. */
th { padding: 12px 20px; line-height: 1.4; }
td { padding: 16px 20px; line-height: 1.5; }
.empty-row { padding: 40px 24px; }
.pagination,
.report-pagination { padding: 18px var(--panel-padding); }
.assignment-list,
.scope-list { gap: var(--space-3); }
.assignment-list > div,
.scope-list > div { padding: 12px 14px; }

/* Workspace, follow-ups, timeline, reporting, and telephony panels. */
.workspace-grid { gap: var(--space-5); }
.lead-work-card,
.result-card { padding: var(--panel-padding); }
.lead-facts { margin-block: var(--space-5) var(--space-6); }
.lead-facts > div { padding: 17px; }
.call-control,
.callback-context,
.schedule-fields { padding: var(--space-4) 18px; }
.due-panel,
.timeline-panel,
.dialer-console,
.countdown,
.telephony-health,
.telephony-admin-grid,
.report-grid,
.report-metrics { margin-bottom: 0; }
.timeline { padding: var(--space-3) var(--panel-padding) var(--panel-padding); }
.timeline li { padding: 14px 0; }
.manage-card form { gap: var(--space-3); padding: var(--space-4) 0; }
.trend-list > div,
.compact-status > div,
.breakdown-list > div { padding-block: 12px; }
.workload-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.workload-copy strong,
.workload-copy small {
    display: block;
    line-height: 1.4;
}
.report-empty { padding: var(--space-8) var(--panel-padding); }
.event-list { margin-block: var(--space-5) 0; gap: var(--space-3); }

/* Sign-in receives the same balanced edge treatment. */
.guest {
    min-height: 100vh;
    min-height: 100svh;
    align-items: safe center;
    justify-items: center;
    padding: clamp(20px, 3vw, 30px);
}
.login-panel { padding: 48px 60px; }
.login-copy { margin: 60px 0 28px; }
.form-stack { gap: var(--space-5); }
.password-control { position: relative; display: block; }
.password-control input { width: 100%; padding-right: 46px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 34px;
    height: 34px;
    padding: 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    transform: translateY(-50%);
    display: grid;
    place-items: center;
}
.password-toggle:hover { background: #f1f4f9; color: var(--blue); }
.password-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.password-toggle-hide,
.password-toggle[aria-pressed="true"] .password-toggle-show { display: none; }
.password-toggle[aria-pressed="true"] .password-toggle-hide { display: block; }

@media (max-width: 1000px) {
    :root {
        --page-gutter: 28px;
        --page-block-start: 28px;
        --page-block-end: 52px;
        --panel-padding: 22px;
        --section-gap: 20px;
    }
    .sidebar { padding: 22px 11px; }
    .sidebar-brand-logo { width: 38px; height: 38px; }
    .telephony-admin-grid > .panel > .form-grid { padding: 0; }
}

@media (max-width: 700px) {
    :root {
        --page-gutter: 18px;
        --page-block-start: 22px;
        --page-block-end: 40px;
        --panel-padding: 18px;
        --section-gap: 16px;
        --control-gap: 12px;
    }
    .sidebar { padding: 10px 14px; }
    .sidebar-brand-logo { width: 34px; height: 34px; }
    .topbar { height: 76px; padding-inline: var(--page-gutter); }
    .content { padding: var(--page-block-start) var(--page-gutter) var(--page-block-end); }
    .welcome-card { padding: 24px var(--panel-padding); }
    .panel-head { padding: 20px var(--panel-padding); gap: var(--space-4); }
    .toolbar,
    .filter-bar,
    .report-filters,
    .assignment-form { padding: var(--space-4) var(--panel-padding); }
    .report-filters,
    .scope-form { grid-template-columns: 1fr; }
    th { padding: 11px 14px; }
    td { padding: 14px; }
    .guest { padding: 16px; }
    .login-shell { min-height: calc(100vh - 32px); min-height: calc(100svh - 32px); }
    .login-panel { padding: 32px 26px; }
    .login-copy { margin: 34px 0 26px; }
}