/* ============================================================
   PLATFORMA SETTINGS-TABLE
   ------------------------------------------------------------
   Smart-save settings-UI: toggle-switch, setting-field-row,
   compact settings-table, collapsible info-card.

   Tidligere en del af platforma-admin-ux.css. Udskilt så
   SuperAdminSettings-stakken har sin egen lille CSS-boks og
   andre workbench-sider ikke loader unødig styling.
   Klasse-navne er uændrede — views kræver ingen tilpasning.
   ============================================================ */

/* ── Toggle-switch (erstatter raw "true"/"false" tekst-inputs) ── */
.platforma-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.platforma-toggle__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.platforma-toggle__track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--platforma-gray-300, #D1D5DB);
    transition: background 0.18s ease;
    flex-shrink: 0;
}

.platforma-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--platforma-white, #fff);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
    transition: transform 0.18s ease;
}

.platforma-toggle__input:checked + .platforma-toggle__track {
    background: var(--platforma-primary, #3699FF);
}

.platforma-toggle__input:checked + .platforma-toggle__track::after {
    transform: translateX(20px);
}

.platforma-toggle__input:focus-visible + .platforma-toggle__track {
    outline: 3px solid rgba(54, 153, 255, 0.3);
    outline-offset: 2px;
}

.platforma-toggle__label {
    font-size: var(--platforma-text-sm);
    font-weight: 500;
    color: var(--platforma-ink-primary, var(--platforma-gray-700));
    min-width: 2.5rem;
}

.platforma-toggle__input:checked ~ .platforma-toggle__label {
    color: var(--platforma-primary);
}

/* ── Setting-field-row (smart-save container) ─────────────────── */
.platforma-setting-field {
    display: flex;
    gap: var(--platforma-space-3);
    align-items: flex-start;
    padding: var(--platforma-space-3);
    border: 1px solid var(--platforma-surface-line, var(--platforma-gray-200));
    border-radius: var(--platforma-radius-md, 8px);
    background: var(--platforma-surface-card, var(--platforma-white));
    transition: border-color 0.18s ease, background 0.18s ease;
}

.platforma-setting-field.is-dirty {
    border-color: var(--platforma-warning, #F59E0B);
    background: rgba(245, 158, 11, 0.04);
}

.platforma-setting-field__body {
    flex: 1;
    min-width: 0;
}

.platforma-setting-field__label-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.platforma-setting-field__label {
    font-weight: 600;
    font-size: var(--platforma-text-sm);
    color: var(--platforma-ink-strong, var(--platforma-gray-900));
}

.platforma-setting-field__key-tooltip {
    position: relative;
    display: inline-flex;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--platforma-gray-200);
    color: var(--platforma-ink-muted, var(--platforma-gray-600));
    font-size: 10px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    cursor: help;
    border: none;
    padding: 0;
}

.platforma-setting-field__key-tooltip:hover {
    background: var(--platforma-gray-300);
    color: var(--platforma-ink-strong, var(--platforma-gray-900));
}

.platforma-setting-field__key-tooltip::before {
    content: attr(data-key);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--platforma-ink-strong, #0F172A);
    color: var(--platforma-white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    font-family: var(--platforma-font-mono, monospace);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.platforma-setting-field__key-tooltip:hover::before,
.platforma-setting-field__key-tooltip:focus::before {
    opacity: 1;
}

.platforma-setting-field__description {
    font-size: var(--platforma-text-xs);
    color: var(--platforma-ink-muted, var(--platforma-gray-500));
    margin: 0 0 var(--platforma-space-2) 0;
    line-height: 1.4;
}

.platforma-setting-field__control {
    margin-top: var(--platforma-space-2);
}

.platforma-setting-field__meta {
    display: flex;
    align-items: center;
    gap: var(--platforma-space-2);
    margin-top: var(--platforma-space-2);
    font-size: var(--platforma-text-xs);
    color: var(--platforma-ink-muted, var(--platforma-gray-500));
}

.platforma-setting-field__edited-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(54, 153, 255, 0.1);
    color: var(--platforma-primary);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.platforma-setting-field__reset {
    background: none;
    border: none;
    color: var(--platforma-ink-muted, var(--platforma-gray-500));
    font-size: var(--platforma-text-xs);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.platforma-setting-field__reset:hover {
    color: var(--platforma-ink-strong, var(--platforma-gray-900));
}

/* Actions-column — save + revert, kun synlig når dirty */
.platforma-setting-field__actions {
    display: none;
    flex-direction: column;
    gap: var(--platforma-space-2);
    min-width: 100px;
    padding-top: 1.25rem;
}

.platforma-setting-field.is-dirty .platforma-setting-field__actions {
    display: flex;
}

.platforma-setting-field__revert {
    background: none;
    border: none;
    color: var(--platforma-ink-muted, var(--platforma-gray-600));
    font-size: var(--platforma-text-xs);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    text-align: right;
}

.platforma-setting-field__revert:hover {
    color: var(--platforma-ink-strong, var(--platforma-gray-900));
}

/* Save-toast (vises kort efter save) */
.platforma-setting-field__saved-toast {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: var(--platforma-success, #10B981);
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.platforma-setting-field.is-just-saved .platforma-setting-field__saved-toast {
    opacity: 1;
}

/* ── Compact settings-table (erstatter store form-per-row-cards) ── */
.platforma-settings-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--platforma-surface-card, var(--platforma-white));
    border: 1px solid var(--platforma-surface-line, var(--platforma-gray-200));
    border-radius: var(--platforma-radius-md, 8px);
    overflow: hidden;
}

.platforma-settings-table thead {
    background: var(--platforma-gray-50);
}

.platforma-settings-table th {
    padding: var(--platforma-space-3) var(--platforma-space-4);
    text-align: left;
    font-size: var(--platforma-text-xs);
    font-weight: 600;
    color: var(--platforma-ink-muted, var(--platforma-gray-600));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--platforma-gray-200);
    white-space: nowrap;
}

.platforma-settings-table td {
    padding: var(--platforma-space-3) var(--platforma-space-4);
    border-bottom: 1px solid var(--platforma-gray-100);
    vertical-align: top;
    font-size: var(--platforma-text-sm);
}

.platforma-settings-table tbody tr:last-child td {
    border-bottom: none;
}

.platforma-settings-table tbody tr:hover {
    background: var(--platforma-gray-50);
}

.platforma-settings-table tbody tr.is-dirty {
    background: rgba(245, 158, 11, 0.06);
}

.platforma-settings-table tbody tr.is-just-saved {
    background: rgba(16, 185, 129, 0.08);
    transition: background 0.4s ease;
}

/* Kolonner */
.platforma-settings-table__col-name {
    width: 32%;
    min-width: 220px;
}

.platforma-settings-table__col-value {
    width: 32%;
    min-width: 200px;
}

.platforma-settings-table__col-status {
    width: 14%;
    min-width: 110px;
}

.platforma-settings-table__col-actions {
    width: 22%;
    min-width: 140px;
    text-align: right;
    white-space: nowrap;
}

/* Name-cell: label + description + tooltip-trigger */
.platforma-settings-table__name {
    font-weight: 600;
    color: var(--platforma-ink-strong, var(--platforma-gray-900));
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 2px;
}

.platforma-settings-table__description {
    font-size: var(--platforma-text-xs);
    color: var(--platforma-ink-muted, var(--platforma-gray-500));
    line-height: 1.4;
}

/* Status-pill */
.platforma-settings-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.platforma-settings-status--default {
    background: var(--platforma-gray-100);
    color: var(--platforma-ink-muted, var(--platforma-gray-600));
}

.platforma-settings-status--customized {
    background: rgba(54, 153, 255, 0.12);
    color: var(--platforma-primary);
}

/* Actions-cell: Save + revert, kun synlig når dirty */
.platforma-settings-table__actions {
    display: none;
    align-items: center;
    gap: var(--platforma-space-2);
    justify-content: flex-end;
}

.platforma-settings-table tbody tr.is-dirty .platforma-settings-table__actions {
    display: inline-flex;
}

.platforma-settings-table__saved-tag {
    display: none;
    align-items: center;
    color: var(--platforma-success, #10B981);
    font-weight: 600;
    font-size: var(--platforma-text-xs);
}

.platforma-settings-table tbody tr.is-just-saved .platforma-settings-table__saved-tag {
    display: inline-flex;
}

/* ── Collapsible info-card (payment provider "why pluggable"-mønster) ── */
.platforma-collapsible {
    border-left: 4px solid var(--platforma-primary);
    padding: 0 var(--platforma-space-4);
    background: var(--platforma-surface-card, var(--platforma-white));
    border-radius: 0 var(--platforma-radius-md, 8px) var(--platforma-radius-md, 8px) 0;
    border-top: 1px solid var(--platforma-surface-line, var(--platforma-gray-200));
    border-right: 1px solid var(--platforma-surface-line, var(--platforma-gray-200));
    border-bottom: 1px solid var(--platforma-surface-line, var(--platforma-gray-200));
}

.platforma-collapsible > summary {
    padding: var(--platforma-space-3) 0;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.platforma-collapsible > summary::-webkit-details-marker { display: none; }

.platforma-collapsible > summary::after {
    content: '▸';
    color: var(--platforma-ink-subtle, var(--platforma-gray-400));
    transition: transform 0.18s ease;
}

.platforma-collapsible[open] > summary::after {
    transform: rotate(90deg);
}

.platforma-collapsible > :not(summary) {
    padding-bottom: var(--platforma-space-3);
}