/* Utilizatori & Setări — doar ce lipsește din sistemul de design.
   Totul pe variabile CSS (variables.css). */

/* ---------- Descriere rol (modal utilizator) ---------- */
.role-desc {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--color-accent-soft);
    border-radius: var(--radius-input);
    color: var(--color-accent);
    font-size: var(--fs-12);
    font-weight: 500;
}
.role-desc .material-icons { font-size: 15px; }

/* ---------- Setări: grila de informații (card Aplicație) ---------- */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3) var(--sp-4);
}

.info-label {
    font-size: var(--fs-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--color-ink-faint);
    display: flex;
    align-items: center;
    gap: 6px;
}
.info-label .material-icons { font-size: 15px; }

.info-item .info-value { margin-top: 2px; font-size: var(--fs-13); }

.info-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-3);
    font-size: var(--fs-12);
}
.info-note .material-icons { font-size: 15px; }

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

/* ---------- Setări: configurare sincronizare ---------- */
.sync-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 var(--sp-4);
}

.interval-preview {
    margin-top: 4px;
    font-size: var(--fs-11);
    color: var(--color-ink-faint);
}

/* ---------- Setări: nomenclatoare ---------- */
.nomen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.nomen-panel {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-card);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-surface);
}

.nomen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.nomen-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: var(--fs-13);
}
.nomen-item:last-child { border-bottom: none; }

.nomen-icon { font-size: 17px; color: var(--color-ink-faint); }
.nomen-name { font-weight: 600; }

.nomen-tax-main {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.nomen-due { font-size: var(--fs-11); color: var(--color-ink-soft); white-space: nowrap; }

.nomen-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
    visibility: hidden;
}
.nomen-item:hover .nomen-actions { visibility: visible; }
.nomen-tax-main + .badge { margin-left: 0; }

.nomen-empty { padding: var(--sp-2) 0; font-size: var(--fs-12); }

.nomen-unavailable {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--sp-3) 0;
    font-size: var(--fs-12);
}
.nomen-unavailable .material-icons { font-size: 16px; }

/* ---------- Setări: backfill ---------- */
.backfill-run {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.backfill-run:last-of-type { border-bottom: none; }

.backfill-run-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* ---------- Compatibilitate FormBuilder ----------
   form-builder.js emite .form-input/.form-textarea/.form-grid-2/.form-hint/
   .form-checkbox-wrapper, care nu există în components.css (acolo e .form-control).
   Scoped sub .form-builder ca să nu atingă restul aplicației. */
.form-builder .form-input,
.form-builder .form-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-input);
    background: var(--color-surface);
    font-family: inherit;
    font-size: var(--fs-13);
    color: var(--color-ink);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-builder .form-input:focus,
.form-builder .form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}
.form-builder .form-input.error,
.form-builder .form-textarea.error { border-color: var(--color-danger); }

.form-builder input[type="color"].form-input {
    padding: 2px 4px;
    height: 36px;
    cursor: pointer;
}

.form-builder .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--sp-4);
}

.form-builder .form-hint {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-11);
    color: var(--color-ink-faint);
}

.form-builder .form-error {
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: var(--fs-11);
    color: var(--color-danger);
}
.form-builder .form-error .material-icons { font-size: 13px; }

.form-builder .form-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    padding-top: var(--sp-2);
}
.form-builder .form-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .nomen-grid { grid-template-columns: 1fr; }
    .form-builder .form-grid-2 { grid-template-columns: 1fr; }
    .nomen-actions { visibility: visible; }
}