/* Shared association surfaces use existing Bootstrap/theme controls and tokens.
   The component root contains all overrides, including admin's separate theme. */
.association-shell {
    --association-ink: var(--vf-ink, var(--bs-body-color));
    --association-muted: var(--vf-muted, var(--bs-secondary-color));
    --association-line: var(--vf-line, var(--bs-border-color));
    --association-surface: var(--vf-surface, var(--bs-body-bg));
    color: var(--association-ink);
    min-width: 0;
    overflow-wrap: anywhere;
}
.association-shell .association-panel {
    background: var(--association-surface);
    border: 1px solid var(--association-line);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
    min-width: 0;
}
.association-shell .association-muted { color: var(--association-muted); }
.association-shell .association-heading { font-size: 1.2rem; font-weight: 750; margin-bottom: 16px; }
.association-shell .association-small-heading { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.association-shell .association-heading-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 18px; }
.association-shell .association-intro { max-width: 68ch; margin-bottom: 20px; }
.association-shell .association-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 20px; }
.association-shell .association-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.association-shell .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; white-space: normal; }
.association-shell :is(.form-control, .form-select) { min-height: 46px; font-size: 16px; max-width: 100%; }
.association-shell textarea.form-control { min-height: 92px; }
.association-shell .form-text { color: var(--association-muted); line-height: 1.6; }
.association-shell [hidden] { display: none !important; }
.association-shell :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid rgb(var(--primary_color)); outline-offset: 3px; }
.association-shell .association-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.association-shell .association-tab { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--association-line); border-radius: 10px; color: var(--association-muted); text-decoration: none; font-weight: 650; background: var(--association-surface); }
.association-shell .association-tab.is-active { color: rgb(var(--primary_color)); border-color: rgb(var(--primary_color)); background: color-mix(in srgb, rgb(var(--primary_color)) 7%, var(--association-surface)); }
.association-shell .association-count { border-radius: 20px; padding: 1px 7px; background: color-mix(in srgb, currentColor 10%, var(--association-surface)); font-size: .8rem; }
.association-shell :is(.association-filter-panel, [data-association-business-links]) > summary { min-height: 44px; padding: 8px 0; cursor: pointer; font-weight: 650; }
.association-shell .association-filter-panel > summary i { margin-inline-end: 8px; }
.association-shell .association-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.association-shell .association-filters-actions { align-self: end; }
.association-shell .association-list-item { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.association-shell .association-list-body { min-width: 0; flex: 1; }
.association-shell .association-eyebrow { display: flex; flex-wrap: wrap; gap: 6px; color: var(--association-muted); font-size: .8rem; margin-bottom: 10px; }
.association-shell .association-acting { font-size: .875rem; margin: 12px 0; }
.association-shell .association-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.075rem; font-weight: 700; margin-bottom: 8px; line-height: 1.5; }
.association-shell .association-pair i { color: var(--association-muted); font-size: .875rem; }
.association-shell .association-result-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .875rem; }
.association-shell .association-status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 20px; font-size: .8rem; font-weight: 700; line-height: 1.45; }
.association-shell .association-status--muted { color: var(--association-muted); background: color-mix(in srgb, var(--association-muted) 10%, var(--association-surface)); }
.association-shell .association-status--success { color: var(--bs-success-text-emphasis, #0f5132); background: var(--bs-success-bg-subtle, #d1e7dd); }
.association-shell .association-status--warning { color: var(--bs-warning-text-emphasis, #664d03); background: var(--bs-warning-bg-subtle, #fff3cd); }
.association-shell .association-status--danger { color: var(--bs-danger-text-emphasis, #842029); background: var(--bs-danger-bg-subtle, #f8d7da); }
.association-shell .association-status--info { color: var(--bs-info-text-emphasis, #055160); background: var(--bs-info-bg-subtle, #cff4fc); }
.association-shell .association-facts { margin: 0; }
.association-shell .association-facts > div { min-width: 0; padding: 8px 0; }
.association-shell .association-facts dt { color: var(--association-muted); font-size: .8rem; font-weight: 500; margin-bottom: 4px; }
.association-shell .association-facts dd { margin: 0; font-weight: 600; }
.association-shell .association-facts-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 20px; margin-bottom: 16px; }
.association-shell .association-private-message { padding: 16px; background: color-mix(in srgb, rgb(var(--primary_color)) 4%, var(--association-surface)); border-radius: 12px; margin-top: 12px; }
.association-shell .association-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.association-shell .association-preview-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.association-shell .association-preview { border: 1px dashed var(--association-line); border-radius: 12px; padding: 16px; min-width: 0; }
.association-shell .association-action-grid { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.association-shell .association-action-grid > * { width: 100%; }
.association-shell .association-action-grid form .btn { width: 100%; }
.association-shell .association-timeline { list-style: none; padding: 0; margin: 0; }
.association-shell .association-event { position: relative; padding: 0 0 24px 24px; border-inline-start: 2px solid var(--association-line); margin-inline-start: 5px; }
[dir=rtl] .association-shell .association-event { padding-right: 24px; padding-left: 0; }
.association-shell .association-event::before { content: ''; position: absolute; inset-inline-start: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--primary_color)); }
.association-shell .association-event:last-child { padding-bottom: 0; }
.association-shell .association-event h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.association-shell .association-event-change > summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-size: .875rem; }
.association-shell .association-search { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: end; }
.association-shell .association-partner-results { padding: 0; margin: 16px 0 0; list-style: none; }
.association-shell .association-partner { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--association-ink); text-decoration: none; min-height: 68px; border-top: 1px solid var(--association-line); }
.association-shell .association-partner[aria-current] { color: rgb(var(--primary_color)); }
.association-shell .association-partner img { flex: none; width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--association-line); border-radius: 10px; }
.association-shell .association-partner-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.association-shell .association-partner > i { flex: none; }
.association-shell .association-submit { width: 100%; }
.association-shell .association-consent { display: flex; align-items: start; gap: 12px; min-height: 44px; padding: 14px; border: 1px solid var(--association-line); border-radius: 10px; cursor: pointer; }
.association-shell .association-pagination { margin-top: 20px; }
.association-shell .association-pagination .pagination { flex-wrap: wrap; }
.association-shell .association-public-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.association-shell .association-public-grid > div { min-width: 0; }
.association-shell .association-public-grid .vf-biz-card { height: 100%; }
.association-shell .association-public-group + .association-public-group { margin-top: 24px; }
.association-shell .association-public-title { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
/* The owner's request in steps (owner UX wave 3c, C3): for which business, the type cards, the chosen type, the rules; and the
   explained empty list, whose cards and rules read left-aligned inside the centred empty state. */
.association-shell .association-chooser-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: end; }
.association-shell .association-types { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.association-shell .association-types > li { min-width: 0; }
.association-shell .association-type { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 44px; padding: 16px; border: 1px solid var(--association-line); border-radius: 16px; background: var(--association-surface); color: var(--association-ink); text-align: start; text-decoration: none; }
.association-shell a.association-type[aria-current] { border-color: rgb(var(--primary_color)); box-shadow: inset 0 0 0 1px rgb(var(--primary_color)); }
.association-shell .association-type-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 1.05rem; font-weight: 750; }
.association-shell a.association-type .association-type-name { color: rgb(var(--primary_color)); }
.association-shell .association-type-where { display: flex; gap: 8px; color: var(--association-muted); font-size: .875rem; line-height: 1.5; }
.association-shell .association-type-where > i { flex: none; line-height: 1.5; }
.association-shell .association-chosen-type { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding-block: 8px; }
/* The request form a chosen partner leads to (#association-details), clear of the panel's top bar. */
.association-shell [data-association-form] { scroll-margin-top: 88px; }
.association-shell .association-change-type { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
.association-shell .association-rules { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, rgb(var(--primary_color)) 4%, var(--association-surface)); text-align: start; }
.association-shell .association-rules .association-rules-title { max-width: none; margin: 0 0 6px; color: var(--association-ink); }
.association-shell .association-rules ul { margin: 0; padding-inline-start: 1.2em; }
.association-shell .association-rules li + li { margin-top: 4px; }
.association-shell .association-explainer :is(.association-types, .association-rules) { justify-self: stretch; width: 100%; text-align: start; }
.association-shell .association-explainer .association-rules { margin-bottom: 0; }
@media (hover: hover) {
    .association-shell a.association-type:hover { border-color: rgb(var(--primary_color)); }
}
.association-admin .dashboard-tabs { flex-wrap: wrap; gap: 4px; white-space: normal; }
.association-admin .dashboard-tabs-item { min-height: 44px; white-space: normal; }
@media (max-width: 767.98px) {
    .dashboard-tabs.association-admin-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .dashboard-tabs.association-admin-tabs .dashboard-tabs-item { width: auto; min-width: 0; min-height: 44px; padding: 12px 8px; overflow-wrap: anywhere; }
}
@media (min-width: 576px) {
    .association-shell .association-tabs { display: flex; flex-wrap: wrap; }
    .association-shell .association-tab { flex: 1; }
    .association-shell .association-filters, .association-shell .association-facts-grid, .association-shell .association-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .association-shell .association-search, .association-shell .association-chooser-row { grid-template-columns: minmax(0, 1fr) auto; }
    .association-shell .association-search-source { grid-column: 1 / -1; }
    .association-shell .association-public-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .association-shell .association-action-grid > * { width: auto; flex: 1 1 200px; }
    .association-shell .association-submit { width: auto; }
}
@media (min-width: 768px) {
    .association-shell .association-panel { padding: 24px; }
    .association-shell .association-panel.association-chosen-type { padding-block: 8px; }
    .association-shell .association-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
    .association-shell .association-list-item { flex-direction: row; align-items: center; }
    .association-shell .association-list-item > .btn { flex: none; max-width: 200px; }
    .association-shell .association-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .association-shell .association-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .association-shell.association-public-full .association-public-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A step of the owner's request read on the page (associations.js, review fix 2026-09-28): the control pressed — „Caută”, a partner, a
   type — spins a ring where its icon or words were, and the old results fade, as the setup search does (business-owner.css). Without
   motion the control only dims; in forced colours (the text shows again there) no ring either. */
.association-shell [data-association-results][aria-busy="true"] { opacity: .55; }
.association-shell :is(.association-search button, a.association-partner, a.association-type)[aria-busy="true"] { position: relative; opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
    .association-shell :is(.association-search button, a.association-partner, a.association-type)[aria-busy="true"] { opacity: 1; }
    .association-shell .association-search button[aria-busy="true"] { color: transparent; }
    .association-shell a.association-partner[aria-busy="true"] > i { visibility: hidden; }
    .association-shell :is(.association-search button, a.association-partner, a.association-type)[aria-busy="true"]::after { content: ""; position: absolute;
        width: 18px; height: 18px; border: 2px solid rgb(var(--primary_color)); border-right-color: transparent; border-radius: 50%;
        animation: association-busy .7s linear infinite; }
    /* The pressed outline button turns primary (app.css): its ring turns white. */
    .association-shell .association-search button[aria-busy="true"]:is(:hover, :focus, :active)::after { border-color: #fff; border-right-color: transparent; }
    .association-shell .association-search button[aria-busy="true"]::after { inset: 0; margin: auto; }
    .association-shell a.association-partner[aria-busy="true"]::after { inset-inline-end: 0; top: calc(50% - 9px); }
    .association-shell a.association-type[aria-busy="true"]::after { top: 16px; inset-inline-end: 16px; }
}
@media (forced-colors: active) {
    .association-shell :is(.association-search button, a.association-partner, a.association-type)[aria-busy="true"] { opacity: .6; }
    .association-shell a.association-partner[aria-busy="true"] > i { visibility: visible; }
    .association-shell :is(.association-search button, a.association-partner, a.association-type)[aria-busy="true"]::after { display: none; }
}
@keyframes association-busy { to { transform: rotate(360deg); } }