/* All font-size and font-family values inherit from html/body in main.css */

.form-section { margin-bottom: var(--space-lg); }
.form-section-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.form-grid   { display: grid; grid-template-columns: 1fr 1fr;     gap: var(--space-md); }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-md); }
.span-2 { grid-column: 1 / -1; }

.form-group { display: flex; flex-direction: column; gap: var(--space-xs); }

label {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.required { color: var(--color-danger); margin-left: 2px; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
textarea { resize: vertical; min-height: 80px; }

.field-hint { color: var(--color-text-muted); margin-top: var(--space-xs); }

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s, background 0.15s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
}
.btn:hover { opacity: 0.88; text-decoration: none; }
.btn:active { opacity: 0.75; }

.btn-primary { background: var(--color-primary); color: var(--color-surface); }
.btn-success { background: var(--color-success); color: var(--color-surface); }
.btn-danger  { background: var(--color-danger);  color: var(--color-surface); }
.btn-accent  { background: var(--color-accent);  color: var(--color-surface); }
.btn-dark    { background: var(--color-brand);   color: var(--color-surface); }
.btn-outline { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn-ghost   { background: transparent; border-color: transparent; color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-bg); opacity: 1; }

.btn-sm   { padding: var(--space-xs) var(--space-sm); }
.btn-lg   { padding: var(--space-md) var(--space-lg); }
.btn-full { width: 100%; justify-content: center; }

.form-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

/* form-group spacing — default adds top margin */
.form-group { margin-bottom: var(--space-md); }

/* Login form: no top border/padding on actions row */
.login-form-actions    { border: none; padding: 0; margin-top: var(--space-md); }
/* Compact actions row with no top border (used inside accordions) */
.form-actions-compact  { margin-top: var(--space-sm); border-top: none; padding-top: 0; }
/* Role code badge */
.role-code             { margin-left: var(--space-sm); color: var(--color-text-muted); }
/* Color picker */
.color-picker-group    { display: flex; align-items: center; gap: var(--space-sm); }
.color-picker-group input[type="color"] { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; background: var(--color-surface); }
.color-picker-hint     { color: var(--color-text-muted); }

.input-error { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(220,38,38,0.10); }

/* Select-type option builder (module field pages) */
.select-options-zone {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.option-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.option-row .form-group  { margin-bottom: 0; }
.option-row-remove       { margin-bottom: var(--space-xs); }

@media (max-width: 768px) {
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .span-2 { grid-column: 1; }
    .option-row { grid-template-columns: 1fr; }
}

/* ── Filter bar: override default width:100% on inputs ── */
.filters input, .filters select         { width: auto; }
.filters input[type="search"]           { width: 220px; }
.filters select                         { width: 160px; }