/* ============================================
   HIDE INPUT FILE BUTTON (for custom file upload UI)
   ============================================ */
/* Hide the input file element - using ID selector for high specificity
   Keep pointer-events: auto so label clicks still work */
#profile-photo-file-input,
#change-photo-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	opacity: 0;
	z-index: -1;
	pointer-events: auto; /* Changed from none to allow label clicks */
}

/* Hide the browser's default file selector button pseudo-elements */
input[type="file"]#profile-photo-file-input::file-selector-button,
input[type="file"]#profile-photo-file-input::-webkit-file-upload-button,
input[type="file"]#change-photo-file-input::file-selector-button,
input[type="file"]#change-photo-file-input::-webkit-file-upload-button {
	display: none;
}

/* Hide the separate button element that browsers create (this is what actually worked!) */
input[type="button"][useragentpart="file-selector-button"] {
	display: none;
}

/* ============================================
   CARD PATTERN
   ============================================ */
.card {
    background: var(--background-neutral-light);
    border-radius: var(--border-radius-m);
    padding: var(--spacing-m);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
    .card:hover {
        box-shadow: var(--shadow-md);
    }
}

.card--elevated {
    box-shadow: var(--shadow-card);
}

/* ============================================
   BUTTON BASE PATTERN
   ============================================ */
.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-s) var(--spacing-m);
    border-radius: var(--border-radius-xl);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--font-size-xs);
    border: var(--border-width-thin) solid transparent;
    transition: opacity var(--transition-base);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    min-width: 0;
}

.btn-base:hover:not(:disabled) {
    opacity: 0.8;
}

.btn-base:active:not(:disabled) {
    opacity: 0.7;
}

.btn-base:disabled {
    cursor: not-allowed;
    border: var(--button-disabled-border);
    background: var(--button-disabled-background);
    color: var(--button-disabled-color);
}

.btn-base:focus-visible {
    outline: var(--border-width-thin) solid currentColor;
    outline-offset: var(--border-width-thin);
}

/* ============================================
   MODAL PATTERN
   ============================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop-color);
    z-index: var(--z-index-modal-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}

.modal-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-modal);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-m);
}

.modal-container--visible {
    pointer-events: auto;
}

/* ============================================
   DROPDOWN PATTERN
   ============================================ */
.dropdown-base {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xxs-2) var(--spacing-s);
    border-radius: var(--border-radius-m);
    background: var(--background-neutral-light-100);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    transition: background-color var(--transition-base);
}

.dropdown-base:hover {
    background: var(--background-neutral-light-50);
}

.dropdown-menu-base {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 100%;
    z-index: var(--z-index-dropdown);
    background: var(--background-neutral-light);
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xs);
    gap: var(--spacing-xs);
    border-radius: var(--border-radius-m);
    box-shadow: var(--shadow-card);
    max-height: 20rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ============================================
   INPUT PATTERN
   ============================================ */
.input-base {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-s);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-s);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    background: var(--color-background-white);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.input-base:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.125rem var(--primary-color-alpha-20);
}

.input-base:disabled {
    background: var(--background-neutral-light-50);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ============================================
   AVATAR PATTERN
   ============================================ */
.avatar-base {
    width: var(--avatar-size, 3.5rem);
    height: var(--avatar-size, 3.5rem);
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius, 1rem);
    border-width: var(--border-width, 2px);
    border-style: solid;
    border-color: var(--border-color, var(--border-invert));
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-white);
}

/* ============================================
   TAG/BADGE PATTERN
   ============================================ */
.tag-base {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xxs-2);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    line-height: 1rem;
    padding: var(--spacing-xxs-3) var(--spacing-xs);
}

.tag-outline {
    background: transparent;
    border: 1px solid currentColor;
}

.tag-filled {
    border: none;
}

/* ============================================
   LOADING SPINNER PATTERN
   ============================================ */
.spinner {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    border: 2px solid rgba(255, 255, 255, 0.30);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   EMPTY STATE PATTERN
   ============================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xxl-6) var(--spacing-xxl-2);
    text-align: center;
    border-radius: var(--border-radius-sm);
    background: var(--color-status-neutral-50);
}

.empty-state-icon {
    width: var(--empty-state-icon-size);
    height: var(--empty-state-icon-size);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-title {
    color: var(--text-regular-tertiary);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-normal);
}

.empty-state-description {
    color: var(--text-regular-tertiary);
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: var(--line-height-normal);
    white-space: pre-line;
}

/* ============================================
   RESPONSIVE CONTAINER PATTERN
   ============================================ */
.container-responsive {
    width: 100%;
    padding-left: var(--spacing-m);
    padding-right: var(--spacing-m);
}

@media (min-width: 48rem) {
    .container-responsive {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }
}

@media (min-width: 64rem) {
    .container-responsive {
        padding-left: var(--spacing-xxl-2);
        padding-right: var(--spacing-xxl-2);
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Toast: success = green, error = red */
#veleo-toast-root .veleo-toast--success {
    background: #31A354 !important;
    color: #fff !important;
}
#veleo-toast-root .veleo-toast--error {
    background: #F21010 !important;
    color: #fff !important;
}