/* Settings/admin feature styles. Split out of theme.css; loaded via index.html.
 * Shared tokens/UI-kit/layout (incl. the generic .table) live in theme.css. */

/* Settings: per-customer permissions table */
.permissions-table-wrap {
 display: block;
 overflow-x: auto;
 overscroll-behavior-x: contain;
 max-width: 100%;
 min-width: 0;
 contain: inline-size;
}

.permissions-table-wrap .table {
 min-width: 960px;
}

.permissions-table-wrap
 .table
 th:first-child,
.permissions-table-wrap
 .table
 td:first-child {
 position: sticky;
 left: 0;
 z-index: 1;
 background: var(--card);
 box-shadow: 1px 0 0 var(--border);
}

.permissions-table-wrap
 th:not(:first-child),
.permissions-table-wrap
 td:not(:first-child) {
 text-align: center;
}

.permissions-table-wrap th:nth-child(2),
.permissions-table-wrap
 td:nth-child(2) {
 text-align: left;
}

/* Settings: integration associations editor */
.association-actions {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
 align-items: stretch;
}

.association-action-row {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 min-width: 0;
}

.association-status {
 min-width: 0;
 font-size: 13px;
 line-height: var(--leading-tight);
 overflow-wrap: anywhere;
}

.association-diff {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
 padding: var(--space-3) 0;
 border-bottom: 1px solid var(--border);
}

.association-diff:last-child {
 border-bottom: 0;
}

.association-diff-label {
 font-weight: 600;
}

/* Individual association item cards use the bare .card (padding: 24px 0), so
 * their field rows sit flush against the side borders. Add horizontal padding
 * so labels/values are not right against the edge. */
.card.inset {
 padding-left: var(--space-4);
 padding-right: var(--space-4);
}

.dialog-body-wrap {
 position: relative;
}

.association-preview {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
}

.preview-row {
 display: flex;
 justify-content: space-between;
 gap: var(--space-3);
 padding: var(--space-2) 0;
 border-bottom: 1px solid var(--border);
}

.preview-row:last-child {
 border-bottom: 0;
}

.preview-label {
 font-weight: 500;
 color: var(--muted-foreground);
 flex-shrink: 0;
}

.preview-value {
 text-align: right;
 overflow-wrap: anywhere;
}

.association-warnings {
 padding: var(--space-3) var(--space-3);
 border-radius: var(--radius-md);
 background: #fef3c7;
 color: #92400e;
 font-size: 13px;
 line-height: var(--leading-normal);
}

.association-warnings p {
 margin: 0;
}

.association-warnings p + p {
 margin-top: var(--space-2);
}

.field-error {
 margin: 0;
 font-size: 13px;
 color: #dc2626;
}

.association-search-results {
 display: flex;
 flex-direction: column;
 gap: var(--space-1);
 margin-top: var(--space-2);
 max-height: 220px;
 overflow-y: auto;
 overscroll-behavior: contain;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 padding: var(--space-1);
 background: var(--background);
}

.association-search-section-title {
 padding: var(--space-2) var(--space-3)
  2px;
 font-size: 12px;
 font-weight: 600;
 color: var(--foreground);
}

.association-selected-summary {
 margin: 0;
 font-size: 13px;
}

.association-search-hit {
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 gap: var(--space-3);
 width: 100%;
 padding: var(--space-2) var(--space-3);
 border: 0;
 border-radius: var(--radius-sm);
 background: transparent;
 text-align: left;
 cursor: pointer;
 font: inherit;
 color: inherit;
}

.association-search-hit:hover,
.association-search-hit:focus-visible {
 background: var(--muted);
 outline: none;
}

.association-search-hit.is-selected {
 background: color-mix(
  in srgb,
  var(--primary) 10%,
  transparent
 );
}

.association-search-hit-check {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 16px;
 height: 16px;
 margin-top: 2px;
}

.association-search-hit-check.is-open {
 color: var(--border);
}

.association-search-hit-check.is-checked {
 color: var(--message-success);
}

.association-search-hit-body {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 2px;
 min-width: 0;
}

.association-search-hit-label {
 font-weight: 500;
}

.association-search-hit-subtitle {
 font-size: 12px;
}

.association-search-empty {
 padding: var(--space-2) var(--space-3);
 font-size: 13px;
}

.assoc-item {
 gap: var(--space-2);
}

.assoc-section-title {
 margin: 0.75rem 0 0.25rem;
 font-size: 0.95rem;
 font-weight: 600;
}

.assoc-summary {
 align-items: flex-start;
 gap: var(--space-3);
}

.assoc-company-deals {
 gap: var(--space-1);
 margin: 0 0 var(--space-1)
  var(--space-4);
 padding-left: var(--space-3);
 border-left: 2px solid var(--border);
}

.assoc-company-deal {
 display: flex;
 justify-content: space-between;
 gap: var(--space-3);
 font-size: 13px;
}

.assoc-summary__text {
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.assoc-summary__name {
 font-weight: 600;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.assoc-summary__meta {
 font-size: 12px;
}

.assoc-actions {
 flex-wrap: wrap;
 gap: var(--space-2);
 flex-shrink: 0;
}

.op-vault-discover {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
 margin-top: var(--space-2);
}

.op-vault-discover-status {
 font-size: 13px;
}

.op-vault-discover-list {
 display: flex;
 flex-direction: column;
 gap: var(--space-1);
 max-height: 220px;
 overflow-y: auto;
 overscroll-behavior: contain;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 padding: var(--space-1);
 background: var(--background);
}

.op-vault-discover-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-3);
 padding: var(--space-2) var(--space-3);
 border-radius: var(--radius-sm);
}

.op-vault-discover-row:hover {
 background: var(--muted);
}

.op-vault-discover-meta {
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.op-vault-discover-name {
 font-weight: 500;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.op-vault-discover-id {
 font-size: 12px;
 word-break: break-all;
}

.association-search-summary {
 padding: var(--space-1) var(--space-3)
  var(--space-2);
 font-size: 12px;
 border-bottom: 1px solid var(--border);
 margin-bottom: 2px;
}

.association-search-hit-status {
 font-size: 11px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.02em;
}

.association-search-hit-status.is-checking {
 color: var(
  --muted-foreground,
  #6b7280
 );
 font-weight: 500;
 text-transform: none;
 letter-spacing: 0;
}

.association-search-hit-status.is-available {
 color: var(--message-success);
}

.association-search-hit-status.is-taken {
 color: var(
  --muted-foreground,
  #6b7280
 );
}

.association-search-hit--taken {
 cursor: not-allowed;
 opacity: 0.6;
}

.association-search-hit--taken:hover,
.association-search-hit--taken:focus-visible {
 background: transparent;
}

.permission-yes,
.permission-no {
 font-weight: 700;
 font-size: 16px;
}

.permission-yes {
 color: var(--message-success);
}

.permission-no {
 color: var(--muted-foreground);
}

/* Customer switcher: category filter above the search box */
.customer-category-select {
 margin-bottom: var(--space-2);
 width: 100%;
}

/* System settings: client categories management card */
.category-block {
 gap: var(--space-1);
 padding: var(--space-2) 0;
 border-bottom: 1px solid var(--border);
}

.category-block:last-of-type {
 border-bottom: 0;
}

.category-row {
 flex: 1;
 min-width: 0;
 gap: var(--space-3);
 border: 0;
 background: transparent;
 text-align: left;
 cursor: pointer;
 font: inherit;
 color: inherit;
 padding: var(--space-1) 0;
}

.category-row:hover {
 color: var(--foreground);
}

.category-members {
 gap: 2px;
 padding: var(--space-1) 0
  var(--space-1) var(--space-2);
}

/* Resend-invitation modal option rows */
.resend-invite-option {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--space-3);
 padding: var(--space-3) var(--space-4);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
}

.resend-invite-option-text {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}

.resend-invite-option-label {
 font-weight: 600;
 font-size: 14px;
}

.resend-invite-option-desc {
 font-size: 13px;
 color: var(--muted-foreground);
 line-height: var(--leading-normal);
}