/**
 * UI PATTERNS
 * Standardized component styles for Quick Editor.
 */

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
    gap: var(--space-sm);
    user-select: none;
}

.btn-primary {
    background-color: var(--interactive-bg);
    color: var(--interactive-text);
}

.btn-primary:hover {
    background-color: var(--clr-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

.btn:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 2px;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--studio-border);
    color: var(--studio-text);
}

.btn-outline:hover {
    background: var(--studio-panel-light);
    border-color: var(--clr-primary);
}

/* --- Panels --- */
.card-panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md); /* Reduced from lg */
    padding: var(--space-sm) var(--space-md); /* Compact vertical padding */
    color: var(--panel-text);
    backdrop-filter: blur(10px);
}

.sidebar-section {
    border-bottom: 1px solid var(--panel-border);
    padding: var(--space-md) 0;
}

.section-title {
    font-size: 0.875rem;
    color: var(--studio-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* --- Inputs --- */
.input-field {
    width: 90%;
    background: var(--input-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    color: var(--input-text);
    font-family: inherit;
    transition: border-color 0.2s;
}

.input-field:focus {
    outline: none;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 4px var(--clr-primary-soft);
}

.input-field:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 2px;
}

/* --- Canvas Elements (Scale Aware) --- */
/* Elements on the canvas should use properties that respect --app-scale */
.scaled-element {
    --scale: var(--app-scale, 1);
    width: calc(var(--base-width, 100px) * var(--scale));
    height: calc(var(--base-height, 100px) * var(--scale));
    font-size: calc(var(--base-font, 1rem) * var(--scale));
    border-radius: calc(var(--radius-md) * var(--scale));
}

/* --- Utilities --- */
.text-dim { color: var(--studio-text-dim); }
.text-primary { color: var(--clr-primary); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-items-center { display: flex; align-items: center; }
.gap-sm { gap: var(--space-sm); }

/* --- Icon Accents --- */
.icon-blue { color: var(--clr-accent-blue); background-color: var(--clr-accent-blue-soft); }
.icon-green { color: var(--clr-accent-green); background-color: var(--clr-accent-green-soft); }
.icon-purple { color: var(--clr-accent-purple); background-color: var(--clr-accent-purple-soft); }

/* --- Avatar Patterns --- */
.avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    background-color: var(--panel-border);
    color: var(--panel-text);
}

/* --- Z-Axis Elevation Patterns --- */
.z-0 { box-shadow: var(--z-0); }
.z-1 { box-shadow: var(--z-1); }
.z-2 { box-shadow: var(--z-2); }
.z-3 { box-shadow: var(--z-3); }
.z-4 { box-shadow: var(--z-4); }

/* --- Interaction Protocols --- */
.interactive-lift {
    transition: transform var(--dur-fast) var(--ease-out-expo), 
                box-shadow var(--dur-fast) var(--ease-out-expo);
}
.interactive-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--z-3);
}

.interactive-squish {
    transition: transform var(--dur-fast) var(--ease-out-expo);
}
.interactive-squish:active {
    transform: scale(0.96);
}

/* --- Navigation & Containers --- */
.floating-card {
    background: var(--studio-panel);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}