/* ========================================================================== 
   UNIQ UI POLISH
   Final control, contrast and solid-text rules loaded after every module.
   ========================================================================== */

:root {
    --control-radius: 10px;
    --pill-radius: 9px;
}

/* No hollow, stroked or shadow-generated typography anywhere in the app. */
h1, h2, h3, h4, h5, h6,
p, span, strong, b, small, label, a, button,
dt, dd, li, th, td, input, textarea, select,
.wordmark, .eyebrow, .field-label,
[class*="title"], [class*="heading"], [class*="label"] {
    -webkit-text-stroke: 0 transparent !important;
    -webkit-text-stroke-width: 0 !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

::selection {
    color: var(--cream);
    background: var(--accent);
}

/* Page titles are no longer focused on navigation, and manual focus is clean. */
h1:focus, h2:focus, h3:focus,
.page-header:focus, .content-frame:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Less circular controls throughout the product. */
.button, button.button,
.filter-chip, .day-tab,
.capacity-pill, .status-badge, .mini-tag,
.crm-filter, .crm-tab, .crm-view-option,
.crm-scope, .crm-issue-head span, .crm-issue-head strong,
.nav-notification-badge,
.notification-filter,
[class*="-pill"] {
    border-radius: var(--pill-radius) !important;
}

.button, button.button {
    color: var(--ink);
}

.button.primary,
button.button.primary,
.button.dark-button,
button.button.dark-button,
.dark-button {
    color: var(--cream) !important;
}

.button.subtle,
button.button.subtle {
    color: var(--ink) !important;
}

.dark-panel .button.subtle,
.dark-card .button.subtle,
.sidebar .button.subtle,
.publish-bar .button.subtle,
.referral-summary-card .button.subtle {
    color: var(--cream) !important;
    border-color: rgba(232, 229, 224, .24) !important;
}

/* Dark/active pills always receive light readable text. */
.filter-chip.active,
.day-tab.active,
.crm-filter.active,
.crm-tab.active,
.crm-view-option.active,
.nav-stack a.active,
.status-badge.accent-status,
.crm-scope.admin {
    color: var(--cream) !important;
    -webkit-text-fill-color: var(--cream) !important;
}

/* Light pills always retain dark readable text. */
.capacity-pill,
.status-badge.neutral,
.mini-tag.neutral,
.crm-filter:not(.active),
.crm-tab:not(.active),
.crm-view-option:not(.active) {
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
}

.status-badge.success { color: var(--success) !important; }
.status-badge.warning { color: var(--warning) !important; }
.status-badge.danger { color: var(--danger) !important; }

/* Tabs and chips never use browser outlines. Keyboard focus uses a soft halo. */
.crm-tabs,
.crm-directory-filters,
.crm-view-switch,
.day-tabs,
.filter-bar {
    outline: none !important;
}

.crm-tab,
.crm-filter,
.crm-view-option,
.day-tab,
.filter-chip {
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none;
}

.crm-tab:focus-visible,
.crm-filter:focus-visible,
.crm-view-option:focus-visible,
.day-tab:focus-visible,
.filter-chip:focus-visible,
.button:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 79, .18) !important;
}

/* CRM toolbar and display switch. */
.crm-directory-controls {
    display: grid;
    justify-items: end;
    gap: .7rem;
}

.crm-view-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.crm-view-switch > span {
    margin-right: .25rem;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.crm-view-option {
    min-height: 34px;
    padding: .48rem .72rem;
    border: 0;
    cursor: pointer;
    color: var(--ink);
    background: rgba(11, 11, 13, .07);
    font: inherit;
    font-size: .72rem;
    font-weight: 900;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.crm-view-option:hover {
    transform: translateY(-1px);
    background: rgba(11, 11, 13, .11);
}

.crm-view-option.active {
    background: var(--ink);
}

/* The default cards are less rounded and slightly denser. */
.crm-directory-card {
    border-radius: 16px !important;
}

.crm-directory-card-data > div {
    border-radius: 10px !important;
}

/* Row mode: maximum information density for large member bases. */
.crm-directory-grid.view-rows {
    grid-template-columns: 1fr;
    gap: .48rem;
}

.view-rows .crm-directory-card {
    display: grid;
    grid-template-columns: minmax(290px, .85fr) minmax(0, 1.65fr) 38px;
    align-items: center;
    gap: .8rem;
    padding: .78rem .9rem;
    border-radius: 12px !important;
}

.view-rows .crm-directory-card:hover {
    transform: translateX(2px);
}

.view-rows .crm-directory-card-head {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: .65rem;
}

.view-rows .avatar {
    width: 46px;
    height: 46px;
    font-size: .78rem;
}

.view-rows .crm-directory-card-head h2 {
    margin: .05rem 0;
    font-size: 1rem;
}

.view-rows .crm-directory-card-head p,
.view-rows .crm-directory-card-head span {
    font-size: .72rem;
}

.view-rows .crm-directory-card-data {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
}

.view-rows .crm-directory-card-data > div {
    min-width: 0;
    padding: .25rem .7rem;
    border-left: 1px solid rgba(11, 11, 13, .1);
    border-radius: 0 !important;
    background: transparent;
}

.view-rows .crm-directory-card-data strong,
.view-rows .crm-directory-card-data small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.view-rows .crm-directory-card-footer {
    justify-content: center;
    margin: 0;
}

.view-rows .crm-directory-card-footer span {
    display: none;
}

.view-rows .crm-directory-card-footer b {
    font-size: 1.35rem;
}

/* Compact mode: quick visual scanning with essential identity only. */
.crm-directory-grid.view-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

.view-compact .crm-directory-card {
    padding: .72rem;
    border-radius: 12px !important;
}

.view-compact .crm-directory-card-head {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .6rem;
}

.view-compact .avatar {
    width: 42px;
    height: 42px;
    font-size: .72rem;
}

.view-compact .crm-directory-card-head .status-badge {
    grid-column: 1 / -1;
    justify-self: start;
    padding: .32rem .48rem;
}

.view-compact .crm-directory-card-head h2 {
    margin: .02rem 0;
    font-size: .96rem;
}

.view-compact .crm-directory-card-head p,
.view-compact .crm-directory-card-head span {
    font-size: .7rem;
}

.view-compact .crm-directory-card-data {
    display: none;
}

.view-compact .crm-directory-card-footer {
    margin-top: .5rem;
    font-size: .72rem;
}

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

    .view-rows .crm-directory-card {
        grid-template-columns: minmax(260px, .85fr) minmax(0, 1.4fr) 34px;
    }

    .view-rows .crm-directory-card-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: .45rem;
    }
}

@media (max-width: 820px) {
    .crm-directory-controls {
        justify-items: stretch;
    }

    .crm-view-switch {
        justify-content: flex-start;
    }

    .view-rows .crm-directory-card {
        grid-template-columns: 1fr auto;
    }

    .view-rows .crm-directory-card-head {
        grid-column: 1;
    }

    .view-rows .crm-directory-card-data {
        grid-column: 1 / -1;
    }

    .view-rows .crm-directory-card-footer {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 620px) {
    .crm-directory-grid.view-compact {
        grid-template-columns: 1fr;
    }

    .view-rows .crm-directory-card {
        display: block;
    }

    .view-rows .crm-directory-card-data {
        grid-template-columns: 1fr;
        margin-top: .65rem;
    }

    .view-rows .crm-directory-card-data > div {
        padding: .45rem 0;
        border-left: 0;
        border-top: 1px solid rgba(11, 11, 13, .08);
    }

    .view-rows .crm-directory-card-footer {
        display: flex;
        justify-content: space-between;
        margin-top: .55rem;
    }

    .view-rows .crm-directory-card-footer span {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-view-option,
    .view-rows .crm-directory-card {
        transition: none;
    }
}