/* 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;
}

.pipeline-mapping-link {
 color: var(--primary);
 text-decoration: underline;
 text-underline-offset: 2px;
}

/* Settings: Deal board templates list — each mapping renders as its own
 * card (title + actions, a field grid, and a feature-flag-overrides strip)
 * instead of one dense muted line. */
.pipeline-mapping-list {
 gap: 12px;
}

.pipeline-mapping-card-title {
 font-weight: 600;
}

.pipeline-mapping-fields {
 display: grid;
 grid-template-columns: repeat(
  auto-fit,
  minmax(180px, 1fr)
 );
 gap: 10px 20px;
}

.pipeline-mapping-field {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}

.pipeline-mapping-field-label {
 font-size: 12px;
}

.pipeline-mapping-field-value {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px;
 overflow-wrap: anywhere;
}

.pipeline-mapping-flags {
 display: flex;
 flex-direction: column;
 gap: 6px;
 padding-top: 12px;
 border-top: 1px solid var(--border);
}

.pipeline-mapping-flag-badges {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}

/* Settings: association card field rows (Space/Folder/List/Team/Assignee) —
 * a resolved real name renders as the primary link, with the raw id/email
 * kept as smaller muted secondary text underneath. */
.assoc-field-value {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 2px;
 min-width: 0;
 text-align: right;
}

.assoc-field-link {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 color: var(--primary);
 text-decoration: underline;
 text-underline-offset: 2px;
 overflow-wrap: anywhere;
}

.assoc-field-link svg {
 flex-shrink: 0;
}

.assoc-field-id {
 font-size: 12px;
 overflow-wrap: anywhere;
}

/* 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;
}

.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;
}

.assoc-item {
 gap: 8px;
}

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

.assoc-summary {
 align-items: flex-start;
 gap: 12px;
}

.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: 6px;
 flex-shrink: 0;
}

.op-vault-discover {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-top: 6px;
}

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

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

.op-vault-discover-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 8px 10px;
 border-radius: 4px;
}

.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: 4px 10px 6px;
 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(--success, #16a34a);
}

.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: #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: scrollable cards + accordion headers */
.system-settings-grid > .card {
 max-height: 50dvh;
 overflow-y: auto;
 overflow-x: hidden;
}

.settings-accordion > .card-header {
 padding-left: 0;
 padding-right: 0;
}

.settings-accordion-toggle {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
 width: 100%;
 padding: 0 24px;
 border: 0;
 background: transparent;
 color: inherit;
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.settings-accordion-toggle:hover {
 color: var(--foreground);
}

.settings-accordion-toggle:focus-visible {
 outline: 2px solid
  var(--ring, var(--primary));
 outline-offset: 2px;
}

.settings-accordion-text {
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 6px;
 flex: 1;
}

.settings-accordion-toggle svg {
 flex-shrink: 0;
 margin-top: 2px;
 transition: transform 0.15s ease;
 color: var(--muted-foreground);
}

.user-teams-reveal {
 margin-top: 6px;
}

.user-teams-reveal .collapse {
 border-radius: var(--radius-md);
}

.user-teams-list {
 gap: 2px;
 padding-top: 2px;
}

/* 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;
}

/* Resend-invitation modal option rows */
.resend-invite-option {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 12px 14px;
 border: 1px solid var(--border);
 border-radius: 8px;
 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: 1.4;
}

.sync-rule {
 padding: 12px 0;
 border-bottom: 1px solid var(--border);
 gap: 12px;
 display: flex;
 flex-direction: column;
}

.sync-rule:last-of-type {
 border-bottom: 0;
}

.sync-rule-title-block {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}

.sync-rule-title {
 font-weight: 600;
}

.sync-rule-summary {
 font-size: 13px;
}

.sync-then {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.sync-then-label {
 font-size: 12px;
 font-weight: 600;
 color: var(--muted-foreground);
}

.sync-then-list {
 margin: 0;
 padding-left: 1.2rem;
 display: flex;
 flex-direction: column;
 gap: 4px;
 font-size: 13px;
}

.sync-when,
.sync-target-head,
.sync-setter,
.sync-add-target,
.sync-rule-actions {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-end;
 gap: 8px;
}

.sync-rule-actions {
 align-items: center;
}

.sync-field {
 display: flex;
 flex-direction: column;
 gap: 4px;
 min-width: 0;
}

.sync-field-label {
 font-size: 12px;
 font-weight: 600;
 color: var(--muted-foreground);
}

.sync-target {
 padding: 8px 0 8px 12px;
 border-left: 2px solid var(--border);
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.sync-select {
 width: auto;
 min-width: 10rem;
}

.sync-prop-panel {
 min-width: 16rem;
 max-width: 22rem;
}

.sync-prop-results {
 max-height: 16rem;
 overflow: auto;
 display: flex;
 flex-direction: column;
}

.sync-prop-item {
 text-align: left;
 border: 0;
 background: transparent;
 color: inherit;
 font: inherit;
 padding: 6px 8px;
 cursor: pointer;
}

.sync-prop-item:hover {
 background: var(--muted);
}

.sync-setter > .btn {
 flex-shrink: 0;
}

.sync-target-head > .btn,
.sync-add-target > .btn {
 flex-shrink: 0;
}

.dialog.sync-edit-dialog {
 max-width: 40rem;
 max-height: calc(100vh - 32px);
 overflow: hidden;
}

.dialog.sync-edit-dialog
 .sync-edit-body {
 overflow: auto;
 min-height: 0;
}

.dialog.sync-edit-dialog
 .dialog-footer {
 justify-content: space-between;
}

.sync-edit-footer-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}

.dialog.dialog-wide {
 width: min(96rem, calc(100vw - 32px));
 max-width: min(
  96rem,
  calc(100vw - 32px)
 );
 max-height: calc(100vh - 32px);
 overflow: hidden;
}

.dialog.dialog-wide .sync-audit-body,
.dialog.dialog-wide .sync-history-body {
 flex: 1 1 auto;
 min-width: 0;
 min-height: 12rem;
 overflow: auto;
}

.dialog.dialog-wide .table-wrap {
 overflow-x: auto;
 max-width: 100%;
}

.dialog.dialog-wide .table {
 width: max-content;
 min-width: 72rem;
}

.dialog.dialog-wide .dialog-footer {
 flex-shrink: 0;
}

.sync-status-live,
.sync-status-ok,
.sync-status-fail {
 gap: 6px;
 align-items: center;
}

.portal-invites-select {
 width: 1%;
 white-space: nowrap;
 vertical-align: middle;
}

.portal-invites-select-head {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 cursor: pointer;
 color: inherit;
 font: inherit;
 font-weight: 500;
}

.portal-invites-check {
 margin: 0;
}

.dialog.portal-invite-action-dialog {
 max-width: 36rem;
}

.portal-invites-stats {
 gap: 6px;
}

.portal-invites-status {
 display: flex;
 flex-direction: column;
 gap: 2px;
 font-size: 12px;
 line-height: 1.35;
 min-width: 12rem;
}

.portal-invites-status.is-busy {
 color: var(--muted-foreground);
}

.portal-invites-status.is-ok {
 color: var(--success, #15803d);
}

.portal-invites-status.is-fail {
 color: var(--destructive);
}

.portal-invites-status.is-mixed {
 color: var(--foreground);
}

.dialog.portal-invites-dialog {
 width: min(72rem, calc(100vw - 32px));
 max-width: min(
  72rem,
  calc(100vw - 32px)
 );
 max-height: calc(100vh - 32px);
 overflow: hidden;
}

.portal-invites-dialog-body {
 flex: 1 1 auto;
 min-width: 0;
 min-height: 12rem;
 overflow: auto;
}

.dialog.portal-invites-dialog
 .table-wrap {
 overflow-x: auto;
 max-width: 100%;
}

.dialog.portal-invites-dialog
 .dialog-footer {
 flex-shrink: 0;
}

@media (max-width: 720px) {
 .dialog.dialog-wide {
  overflow: hidden;
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  max-height: calc(
   100vh - 24px -
    env(safe-area-inset-top) -
    env(safe-area-inset-bottom)
  );
 }

 .dialog.portal-invites-dialog {
  width: calc(100vw - 24px);
  max-width: calc(100vw - 24px);
  max-height: calc(
   100vh - 24px -
    env(safe-area-inset-top) -
    env(safe-area-inset-bottom)
  );
 }
}