/* ========================================
   Input & Button Override - Design System
   Overrides legacy classes to match SPC Design System
   ======================================== */

/* ========================================
   Input Override (.txt-box-primary)
   ======================================== */

.txt-box-primary,
input.txt-box-primary,
textarea.txt-box-primary,
select.txt-box-primary,
select.form-select.select {
    width: 100%;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-primary, #fafafa);
    background: var(--bg-input, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-default, 8px);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.txt-box-primary::placeholder {
    color: var(--text-muted, #52525b);
}

.txt-box-primary:hover:not(:disabled) {
    border-color: var(--border-hover, rgba(255, 255, 255, 0.15));
    background: var(--bg-input-focus, rgba(255, 255, 255, 0.08));
}

.txt-box-primary:focus:not(:disabled) {
    border-color: var(--color-primary-500, #0834bd);
    box-shadow: 0 0 0 3px var(--color-primary-100, rgba(8, 52, 189, 0.1));
    background: var(--bg-input-focus, rgba(255, 255, 255, 0.08));
}

.txt-box-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary, #111113);
    border-color: var(--border-default, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #52525b);
}

/* Textarea specific */
textarea.txt-box-primary {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

/* Select specific - will be styled by select2/choices override */
select.txt-box-primary.select {
    /* Let select2/choices handle the styling */
}

/* File input */
input[type="file"].txt-box-primary {
    padding: var(--space-2, 8px);
    cursor: pointer;
}

input[type="file"].txt-box-primary::file-selector-button {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    margin-right: var(--space-3, 12px);
    background: var(--bg-tertiary, #18181b);
    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm, 4px);
    color: var(--text-primary, #fafafa);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    cursor: pointer;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="file"].txt-box-primary::file-selector-button:hover {
    background: var(--bg-elevated, #1f1f23);
    border-color: var(--border-hover, rgba(255, 255, 255, 0.15));
}

/* Number input specific */
input[type="number"].txt-box-primary {
    -moz-appearance: textfield;
}

input[type="number"].txt-box-primary::-webkit-outer-spin-button,
input[type="number"].txt-box-primary::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Date input specific */
input[type="date"].txt-box-primary,
input[type="datetime-local"].txt-box-primary {
    position: relative;
}

input[type="date"].txt-box-primary::-webkit-calendar-picker-indicator,
input[type="datetime-local"].txt-box-primary::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="date"].txt-box-primary::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"].txt-box-primary::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Capitalize class */
.capitalize {
    text-transform: capitalize;
}

/* ========================================
   Button Override (.cbt)
   ======================================== */

.cbt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    line-height: 1.5;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-default, 8px);
    cursor: pointer;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    user-select: none;
}

.cbt:focus-visible {
    outline: 2px solid var(--color-primary-500, #0834bd);
    outline-offset: 2px;
}

.cbt:disabled,
.cbt.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.cbt svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Primary Button */
.cbt-primary {
    color: white;
    background-color: var(--color-primary-500, #0834bd);
    border-color: var(--color-primary-500, #0834bd);
}

.cbt-primary:hover:not(:disabled) {
    background-color: var(--color-primary-600, #062ca1);
    border-color: var(--color-primary-600, #062ca1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(8, 52, 189, 0.35);
}

.cbt-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

/* Secondary Button */
.cbt-secondary {
    color: var(--text-primary, #fafafa);
    background-color: var(--bg-card, rgba(255, 255, 255, 0.03));
    border-color: var(--border-default, rgba(255, 255, 255, 0.08));
}

.cbt-secondary:hover:not(:disabled) {
    background-color: var(--bg-card-hover, rgba(255, 255, 255, 0.06));
    border-color: var(--border-hover, rgba(255, 255, 255, 0.15));
    transform: translateY(-1px);
}

.cbt-secondary:active:not(:disabled) {
    transform: translateY(0);
}

/* Button Sizes */
.cbt.fs-sm {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
}

.cbt.fs-xs {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
}

.cbt.fs-lg {
    padding: var(--space-3, 12px) var(--space-6, 24px);
    font-size: var(--text-base, 1rem);
    border-radius: var(--radius-lg, 12px);
}

/* Full Width Button */
.cbt.w-100 {
    width: 100%;
}

/* Button with underline class */
.cbt.r-underline {
    text-decoration: none;
}

.cbt.r-underline:hover {
    text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .cbt {
        padding: var(--space-2, 8px) var(--space-3, 12px);
        font-size: var(--text-sm, 0.875rem);
    }
}