/* Component: field */

.sm-field {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
    /* Keep label + control packed at the top when a neighbor field is taller */
    align-content: start;
    align-items: start;
}

.sm-field label,
.sm-field .sm-field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sm-ink);
}

.sm-field__help,
.sm-field .sm-muted {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sm-muted);
}

.sm-profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    align-items: start;
}

.sm-profile-fields--narrow {
    max-width: 520px;
    grid-template-columns: 1fr;
}

@media (max-width: 782px) {
    .sm-profile-fields { grid-template-columns: 1fr; }
}

.sm-app.sm-app .sm-input,
.sm-app.sm-app .sm-select,
.sm-app.sm-app .sm-textarea,
.wp-core-ui .sm-app .sm-input,
.wp-core-ui .sm-app .sm-select,
.wp-core-ui .sm-app .sm-textarea,
.wp-core-ui .sm-app .regular-text,
.wp-core-ui .sm-app .widefat,
.wp-core-ui .sm-app .small-text,
.wp-core-ui .sm-app input[type="text"],
.wp-core-ui .sm-app input[type="email"],
.wp-core-ui .sm-app input[type="password"],
.wp-core-ui .sm-app input[type="number"],
.wp-core-ui .sm-app input[type="url"],
.wp-core-ui .sm-app input[type="search"],
.wp-core-ui .sm-app input[type="tel"],
.wp-core-ui .sm-app input[type="date"],
.wp-core-ui .sm-app input[type="datetime-local"],
.wp-core-ui .sm-app input[type="time"],
.wp-core-ui .sm-app input[type="month"],
.wp-core-ui .sm-app input[type="week"],
.wp-core-ui .sm-app select,
.wp-core-ui .sm-app textarea,
.sm-app .sm-input,
.sm-app .sm-select,
.sm-app .sm-textarea,
.sm-app .regular-text,
.sm-app .widefat,
.sm-app .small-text,
.sm-app input[type="text"],
.sm-app input[type="email"],
.sm-app input[type="password"],
.sm-app input[type="number"],
.sm-app input[type="url"],
.sm-app input[type="search"],
.sm-app input[type="tel"],
.sm-app input[type="date"],
.sm-app input[type="datetime-local"],
.sm-app input[type="time"],
.sm-app input[type="month"],
.sm-app input[type="week"],
.sm-app select,
.sm-app textarea {
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--sm-border, var(--sm-line-strong, #CBD5E1));
    border-radius: var(--sm-input-radius, var(--sm-radius-sm, 10px));
    font: inherit;
    line-height: 1.4;
    background: #fff;
    color: var(--sm-ink, #0F172A);
    box-shadow: none;
    transition: border-color .15s var(--sm-ease, ease), box-shadow .15s var(--sm-ease, ease);
}

.sm-app .small-text {
    width: auto;
    max-width: 6rem;
}

.sm-app select,
.sm-app .sm-select,
.wp-core-ui .sm-app select,
.wp-core-ui .sm-app .sm-select {
    appearance: none;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, var(--sm-muted) 50%),
        linear-gradient(135deg, var(--sm-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
}

.sm-app .sm-textarea,
.sm-app textarea,
.wp-core-ui .sm-app textarea {
    min-height: 96px;
    resize: vertical;
}

.sm-app .sm-input:focus,
.sm-app .sm-select:focus,
.sm-app .sm-textarea:focus,
.sm-app .regular-text:focus,
.sm-app .widefat:focus,
.sm-app .small-text:focus,
.sm-app input[type="text"]:focus,
.sm-app input[type="email"]:focus,
.sm-app input[type="password"]:focus,
.sm-app input[type="number"]:focus,
.sm-app input[type="url"]:focus,
.sm-app input[type="search"]:focus,
.sm-app input[type="tel"]:focus,
.sm-app input[type="date"]:focus,
.sm-app select:focus,
.sm-app textarea:focus,
.wp-core-ui .sm-app input:focus,
.wp-core-ui .sm-app select:focus,
.wp-core-ui .sm-app textarea:focus {
    outline: none;
    border-color: var(--sm-accent);
    box-shadow: 0 0 0 3px var(--sm-accent-soft);
}

.sm-app input[type="hidden"],
.wp-core-ui .sm-app input[type="hidden"] {
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.sm-app input[type="file"],
.sm-app input[type="range"],
.wp-core-ui .sm-app input[type="file"],
.wp-core-ui .sm-app input[type="range"] {
    width: auto;
    min-height: 0;
    padding: 0;
    border: initial;
    border-radius: initial;
    background: initial;
    box-shadow: none;
}

.sm-app input[type="checkbox"],
.sm-app input[type="radio"],
.wp-core-ui .sm-app input[type="checkbox"],
.wp-core-ui .sm-app input[type="radio"] {
    appearance: auto;
    -webkit-appearance: auto;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    min-height: 1.125rem;
    margin: 0 0.35rem 0 0;
    padding: 0;
    vertical-align: middle;
    accent-color: var(--sm-accent, #4F46E5);
    border: 1px solid var(--sm-border, #CBD5E1);
    background: #fff;
    box-shadow: none;
    cursor: pointer;
}

.sm-app input[type="radio"],
.wp-core-ui .sm-app input[type="radio"] {
    border-radius: 50%;
}

.sm-app input[type="checkbox"],
.wp-core-ui .sm-app input[type="checkbox"] {
    border-radius: 4px;
}

.sm-app input[type="color"],
.wp-core-ui .sm-app input[type="color"] {
    appearance: auto;
    -webkit-appearance: auto;
    width: 48px;
    height: 42px;
    min-width: 48px;
    min-height: 42px;
    padding: 2px;
    border: 1px solid var(--sm-border, #CBD5E1);
    border-radius: var(--sm-input-radius, 10px);
    background: #fff;
    box-shadow: none;
    cursor: pointer;
}

.sm-app .sm-toggle__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
}

.sm-toolbar--filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.sm-toolbar--filters .sm-input,
.sm-toolbar--filters .sm-select,
.sm-toolbar--filters input,
.sm-toolbar--filters select {
    flex: 1 1 160px;
    min-width: 140px;
    width: auto;
}

.sm-toolbar--filters .button {
    flex: 0 0 auto;
}

.sm-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}