/* 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;
 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: 8px;
 align-items: stretch;
}

.association-action-row {
 display: flex;
 align-items: center;
 gap: 10px;
 min-width: 0;
}

.association-status {
 min-width: 0;
 font-size: 13px;
 line-height: 1.35;
 overflow-wrap: anywhere;
}

.association-diff {
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding: 10px 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: 16px;
 padding-right: 16px;
}

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

.dialog-body-wrap.lookup-loading {
 pointer-events: none;
 opacity: 0.65;
}

.lookup-loading-msg {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 14px;
 color: var(--muted-foreground);
 background: rgba(255, 255, 255, 0.7);
 z-index: 1;
}

.association-preview {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.preview-row {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding: 6px 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: 10px 12px;
 border-radius: 6px;
 background: #fef3c7;
 color: #92400e;
 font-size: 13px;
 line-height: 1.4;
}

.association-warnings p {
 margin: 0;
}

.association-warnings p + p {
 margin-top: 6px;
}

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

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

.association-search-hit {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 2px;
 width: 100%;
 padding: 8px 10px;
 border: 0;
 border-radius: 4px;
 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-label {
 font-weight: 500;
}

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

.association-search-empty {
 padding: 8px 10px;
 font-size: 13px;
}

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

.permission-yes {
 color: #16a34a;
}

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

/* Customer switcher: category filter above the search box */
.customer-category-select {
 margin-bottom: 6px;
 width: 100%;
}

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

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

.category-row {
 flex: 1;
 min-width: 0;
 gap: 10px;
 border: 0;
 background: transparent;
 text-align: left;
 cursor: pointer;
 font: inherit;
 color: inherit;
 padding: 4px 0;
}

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

.category-members {
 gap: 2px;
 padding: 4px 0 4px 8px;
}