/*
 * IMTOS webshop + back-office UI primitives.
 *
 * The visual layer for the reusable components rendered by the Twig macros in
 * templates/components/ui.html.twig. Every value is taken verbatim from the
 * Figma component library (file 1T8btiNYCKtIVdcZHZ3xa8, page "02 · Components").
 * Class-scoped only (.ui-*) so it never touches the website or the as-yet
 * unstyled raw admin markup.
 */

/* ============================================================ Button */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.15px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ui-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.ui-btn[disabled],
.ui-btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ui-btn--primary {
    background: var(--color-bg-brand);
    color: var(--color-text-on-brand);
}

.ui-btn--primary:hover {
    background: var(--color-bg-brand-hover);
}

.ui-btn--secondary {
    background: var(--color-bg-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.ui-btn--secondary:hover {
    background: var(--color-bg-subtle);
}

.ui-btn--ghost {
    padding-left: 14px;
    padding-right: 14px;
    background: transparent;
    color: var(--color-text-brand);
}

.ui-btn--ghost:hover {
    background: var(--color-bg-brand-subtle);
}

.ui-btn--sm {
    padding: 7px 14px;
    font-size: var(--text-base);
    line-height: 19px;
    letter-spacing: -0.14px;
}

.ui-btn--block {
    width: 100%;
}

/* ============================================================ Badge */

.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.ui-badge--has-dot {
    padding-left: 8px;
}

.ui-badge__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
}

.ui-badge--success {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-fg);
}

.ui-badge--warning {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-fg);
}

.ui-badge--neutral {
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
}

.ui-badge--info {
    background: var(--color-status-info-bg);
    color: var(--color-status-info-fg);
}

.ui-badge--brand {
    background: var(--color-bg-brand-subtle);
    color: var(--color-text-brand);
}

/* ============================================================ Field */

.ui-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ui-field__label {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 18px;
    color: var(--color-text-secondary);
}

.ui-field__req {
    color: var(--color-status-danger-solid);
}

.ui-field__input {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 22px;
    color: var(--color-text-primary);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ui-field__input::placeholder {
    color: var(--color-text-muted);
}

.ui-field__input:focus {
    outline: none;
    border-color: var(--color-bg-brand);
    box-shadow: var(--shadow-focus);
}

.ui-field__input:disabled {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.ui-field--error .ui-field__input {
    border-color: var(--color-status-danger-solid);
}

.ui-field--error .ui-field__input:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.ui-field__error {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-status-danger-fg);
}

.ui-field__help {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ============================================================ Checkbox */

.ui-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 18px;
    color: var(--color-text-primary);
    cursor: pointer;
}

.ui-checkbox__input {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 5px;
    background-color: var(--color-bg-surface);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 11px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.ui-checkbox__input:checked {
    border-color: var(--color-bg-brand);
    background-color: var(--color-bg-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4.6 4.4 8 11 1.3'/%3E%3C/svg%3E");
}

.ui-checkbox__input:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ============================================================ Utilities */

.ui-icon {
    flex: 0 0 auto;
}

.ui-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}