/* contacts_2 UI kit
 * Canonical product UI extracted from the B2B workspace.
 * Page styles may define domain-specific layouts, but shared controls and states live here.
 */

:root {
    --basic-700: #34415f;
    --basic-800: #222b45;
    --success-600: #08704f;
    --info-600: #1657bb;
    --warning-600: #8a5b00;
    --danger-600: #b4234d;

    --ui-canvas: #f3f6fb;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f7f9fc;
    --ui-surface-selected: #eef4ff;
    --ui-border: #d8dfeb;
    --ui-border-strong: #c5cee0;
    --ui-text: var(--basic-900);
    --ui-text-secondary: var(--basic-700);
    --ui-text-muted: var(--basic-600);
    --ui-focus: rgba(51, 102, 255, 0.24);

    --ui-radius-control: 10px;
    --ui-radius-card: 14px;
    --ui-radius-panel: 16px;
    --ui-shadow-panel: 0 4px 8px rgba(34, 43, 69, 0.07);
    --ui-shadow-popover: 0 8px 24px rgba(34, 43, 69, 0.14);

    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-7: 28px;
    --ui-space-8: 32px;

    --ui-duration-fast: 140ms;
    --ui-duration: 200ms;
    --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --z-dropdown: 30;
    --z-sticky: 40;
    --z-modal-backdrop: 60;
    --z-modal: 70;
    --z-toast: 80;
    --z-tooltip: 90;

    /* Compatibility aliases used by Search/B2C modules. */
    --border-color: var(--ui-border);
    --text-muted: var(--ui-text-muted);
    --shadow-soft: var(--ui-shadow-panel);
    --shadow-card: none;
}

html {
    scrollbar-gutter: stable;
}

body.ui-app {
    color: var(--ui-text);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

[hidden],
.ui-hidden {
    display: none !important;
}

::selection {
    background: rgba(51, 102, 255, 0.2);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}

h1,
h2,
h3 {
    color: var(--ui-text);
    text-wrap: balance;
}

p,
li,
.subtle-text,
.muted,
.lead {
    text-wrap: pretty;
}

.lead,
.muted,
.subtle-text,
.mini-meta,
.upload-state,
.field-hint,
.panel-description {
    color: var(--ui-text-muted);
}

input::placeholder,
textarea::placeholder {
    color: var(--ui-text-muted) !important;
    opacity: 1;
}

.shell {
    width: min(100%, 1220px);
}

.app-header {
    align-items: center;
}

.app-header-actions {
    align-items: center;
}

.brand-chip {
    border-radius: var(--ui-radius-control);
}

.app-nav {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-card);
    background: var(--ui-surface);
    box-shadow: 0 2px 6px rgba(34, 43, 69, 0.06);
}

.nav-link {
    border-radius: 9px;
    color: var(--ui-text-muted);
}

.nav-link:hover {
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

.nav-link.active,
.nav-link[aria-current="page"] {
    background: var(--primary-500);
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(51, 102, 255, 0.24);
}

.panel {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-panel);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-panel);
}

.section-card,
.card,
.stat-card,
.mini-card,
.fold-card {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: none;
}

.section-card,
.card,
.stat-card,
.mini-card {
    background: var(--ui-surface);
}

.button {
    min-height: 42px;
    border-radius: var(--ui-radius-control);
    box-shadow: 0 3px 8px rgba(51, 102, 255, 0.2);
    transition:
        background-color var(--ui-duration-fast) var(--ui-ease),
        border-color var(--ui-duration-fast) var(--ui-ease),
        color var(--ui-duration-fast) var(--ui-ease),
        box-shadow var(--ui-duration-fast) var(--ui-ease),
        transform var(--ui-duration-fast) var(--ui-ease);
}

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

.button:active:not(:disabled) {
    transform: translateY(0);
}

.button.secondary,
.button.ghost,
.button.danger {
    box-shadow: none;
}

.button.secondary {
    background: var(--ui-surface);
    border-color: rgba(51, 102, 255, 0.32);
}

.button.danger {
    color: var(--danger-600);
}

.button[aria-busy="true"],
.button.is-loading {
    cursor: progress;
}

input,
textarea,
select {
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius-control);
    color: var(--ui-text);
}

input:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) {
    border-color: #aeb9cc;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--ui-focus);
}

input:disabled,
textarea:disabled,
select:disabled {
    background: var(--ui-surface-muted);
    color: var(--ui-text-muted);
    cursor: not-allowed;
}

.label,
label {
    color: var(--ui-text-secondary);
}

.notice {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-card);
    background: var(--ui-surface-muted);
    color: var(--ui-text-secondary);
}

.notice.error,
.notice.danger {
    border-color: rgba(180, 35, 77, 0.3);
    background: rgba(255, 61, 113, 0.08);
}

.notice.error strong,
.notice.danger strong {
    color: var(--danger-600);
}

.notice.warning {
    border-color: rgba(255, 170, 0, 0.36);
    background: rgba(255, 170, 0, 0.1);
}

.notice.warning strong {
    color: var(--warning-600);
}

.notice.info {
    border-color: rgba(51, 102, 255, 0.24);
    background: rgba(51, 102, 255, 0.07);
}

.notice.info strong {
    color: var(--info-600);
}

.notice.success {
    border-color: rgba(0, 166, 111, 0.28);
    background: rgba(0, 166, 111, 0.08);
}

.notice.success strong {
    color: var(--success-600);
}

.badge,
.status-badge {
    border-radius: 9px;
}

.tone-success,
.badge.success {
    background: rgba(0, 166, 111, 0.11);
    color: var(--success-600);
}

.tone-info,
.badge.primary,
.badge.info {
    background: rgba(51, 102, 255, 0.1);
    color: var(--primary-700);
}

.tone-warning,
.badge.warning {
    background: rgba(255, 170, 0, 0.14);
    color: var(--warning-600);
}

.tone-danger,
.badge.danger {
    background: rgba(255, 61, 113, 0.11);
    color: var(--danger-600);
}

.tone-neutral,
.badge.secondary {
    background: var(--basic-300);
    color: var(--ui-text-secondary);
}

.table-shell {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-card);
}

th {
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

td {
    color: var(--ui-text-secondary);
}

tbody tr:hover > td {
    background: rgba(247, 249, 252, 0.72);
}

/* Identifier values are always rendered in full. Layouts must wrap or scroll,
   never mask, shorten, clip, or replace part of an identifier. */
.ui-identifier,
[data-identifier] {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.help-trigger,
.ui-help {
    border-color: var(--ui-border-strong);
    color: var(--ui-text-secondary);
}

.help-popover,
.ui-tooltip {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-popover);
}

/* Layout primitives */
.ui-page {
    display: grid;
    gap: var(--ui-space-5);
    min-width: 0;
}

.ui-section-header,
.panel-header,
.panel-meta,
.ui-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    min-width: 0;
}

.panel-meta {
    align-items: center;
    flex-wrap: wrap;
}

.ui-section-heading {
    display: grid;
    gap: var(--ui-space-1);
    min-width: 0;
}

.ui-section-heading > p {
    max-width: 68ch;
    color: var(--ui-text-muted);
}

.ui-mt-2 {
    margin-top: var(--ui-space-2);
}

.ui-text-sm {
    font-size: 14px;
}

.ui-justify-between {
    justify-content: space-between;
    flex-wrap: wrap;
}

.ui-split-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.75fr);
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-panel);
    background: var(--ui-surface);
}

.ui-split-primary,
.ui-split-aside {
    min-width: 0;
    padding: var(--ui-space-7);
}

.ui-split-aside {
    border-left: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
}

.ui-filter-grid,
.field-grid,
.ui-range-grid,
.ui-form-grid {
    display: grid;
    gap: var(--ui-space-4);
}

.ui-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.field-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ui-range-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

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

.ui-field-wide {
    grid-column: 1 / -1;
}

.ui-range-pair {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--ui-space-2);
}

.ui-range-pair > span {
    color: var(--ui-text-muted);
    font-size: 13px;
    font-weight: 600;
}

/* Interactive patterns */
.ui-segmented {
    display: flex;
    gap: var(--ui-space-1);
    padding: var(--ui-space-1);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    background: var(--ui-surface-muted);
}

.ui-segmented > * {
    flex: 1 1 0;
}

.ui-tabs,
.web-tabs {
    display: flex;
    gap: var(--ui-space-1);
    overflow-x: auto;
    padding: var(--ui-space-1);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    background: var(--ui-surface-muted);
}

.ui-tab,
.web-tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ui-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.ui-tab:hover,
.web-tab:hover {
    color: var(--ui-text);
}

.ui-tab[aria-selected="true"],
.web-tab[aria-selected="true"] {
    background: var(--ui-surface);
    color: var(--primary-700);
    box-shadow: 0 2px 6px rgba(34, 43, 69, 0.1);
}

.web-tab::after {
    display: none;
}

.time-chip input:focus-visible + span {
    outline: 3px solid var(--ui-focus);
    outline-offset: 2px;
}

.ui-empty {
    display: grid;
    justify-items: start;
    gap: var(--ui-space-2);
    min-height: 140px;
    align-content: center;
    padding: var(--ui-space-6);
    color: var(--ui-text-muted);
}

.ui-empty h3,
.ui-empty strong {
    color: var(--ui-text);
}

.ui-list {
    display: grid;
}

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

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

.ui-list-row:hover {
    background: var(--ui-surface-muted);
}

.ui-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--basic-400);
}

.ui-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-500);
    transition: width var(--ui-duration) var(--ui-ease);
}

@media (max-width: 900px) {
    .ui-split-panel {
        grid-template-columns: 1fr;
    }

    .ui-split-aside {
        border-top: 1px solid var(--ui-border);
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .shell {
        padding: 20px 14px 32px;
    }

    .panel,
    .section-card,
    .card {
        border-radius: var(--ui-radius-card);
    }

    .toolbar > .button,
    .button {
        width: auto;
    }

    .app-header-actions > .button {
        width: 100%;
    }

    .app-nav {
        scrollbar-width: thin;
    }

    .app-nav::-webkit-scrollbar {
        display: block;
        height: 4px;
    }

    .app-nav::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--ui-border-strong);
    }

    .ui-section-header,
    .panel-header,
    .ui-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-split-primary,
    .ui-split-aside {
        padding: var(--ui-space-5);
    }

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

    .ui-field-wide {
        grid-column: auto;
    }

    .ui-range-pair {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}