/* ==========================================================================
   MODULE: CONTROLS.CSS (LOOP 2 - ABSTRACTED NAMES MASTER)
   System Design Tokens: Structural Formats & Color Modifiers
   ========================================================================== */

/* --- 1. THE STRUCTURAL FOUNDATIONS (SCALE & PRESENCE) --- */

/* Hero/Global Action Elements (Formerly .header-btn) */
.valerie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 175px;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s ease, background-color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.valerie:active {
    transform: scale(0.95);
}

/* Core Platform Operators (Formerly .btn-admin-base) */
.clara {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #3a3a3c;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.clara:active {
    transform: scale(0.97);
}

/* Micro Contextual Elements (Formerly .btn-card-micro) */
.elise {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.elise:active {
    transform: scale(0.96);
}


/* --- 2. THE TEMPERAMENTS (COLOR & EMOTIONAL SKINS) --- */

/* Dawn (Sky Blue Primary Action) */
.dawn {
    background-color: #007aff !important;
    border-color: #007aff !important;
    color: #ffffff !important;
}
.dawn:hover {
    background-color: #1485ff !important;
    border-color: #1485ff !important;
}

/* Dusk (Charcoal / Safe Neutral Baseline) */
.dusk {
    background-color: #2c2c2e !important;
    border-color: #3a3a3c !important;
    color: #ffffff !important;
}
.dusk:hover {
    background-color: #3a3a3c !important;
    border-color: #48484a !important;
}

/* Mist (Translucent Glass / Ambient Secondary) */
.mist {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.mist:hover {
    background: rgba(0, 0, 0, 0.65) !important;
}

/* Alternate Ghostly Slate Blue Mist Variant */
.clara.mist {
    background-color: #2c333f !important;
    color: #f5f5f7 !important;
    border-color: #3d4656 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.clara.mist:hover {
    background-color: #37404f !important;
    border-color: #495468 !important;
}

/* Ivy (Soft, Welcoming Green Affirmation) */
.ivy {
    background-color: rgba(50, 215, 75, 0.12) !important;
    color: #32d74b !important;
    border-color: rgba(50, 215, 75, 0.3) !important;
}
.ivy:hover {
    background-color: rgba(50, 215, 75, 0.22) !important;
    border-color: rgba(50, 215, 75, 0.45) !important;
}

/* Solid Ivy Variant for Direct Processing Triggers */
.valerie.ivy {
    background-color: #32d74b !important;
    color: #161617 !important;
    border: none;
}
.valerie.ivy:hover {
    background-color: #2ec444 !important;
}

/* Ember (Critical Heat, Warnings, Destructive Real estate) */
.ember {
    background-color: rgba(255, 69, 58, 0.1) !important;
    color: #ff453a !important;
    border-color: rgba(255, 69, 58, 0.2) !important;
}
.ember:hover {
    background-color: rgba(255, 69, 58, 0.25) !important;
    border-color: #ff453a !important;
}

/* High-Impact Solid Ember (Formerly the severe .btn-danger alert) */
.valerie.ember,
.clara.ember-solid {
    background: #ff453a !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(255, 69, 58, 0.3);
}
.valerie.ember:hover,
.clara.ember-solid:hover {
    background-color: #ff3b30 !important;
}

/* Micro Image Card Overlay Ember Actions */
.elise.ember {
    background-color: rgba(255, 69, 58, 0.9) !important;
    color: #ffffff !important;
    border: none !important;
}
.elise.ember:hover {
    background-color: #ff453a !important;
}


/* --- 3. HARD RE-USABLE INTERACTION UTILITIES --- */

/* Absolute Neutral Navigation Triggers (Lightbox Flippers) */
.nav-trigger {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: none;
    padding: 20px 15px;
    font-size: 2rem;
    cursor: pointer;
    z-index: 100000;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.nav-trigger:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Operation Freeze State */
.frozen {
    background-color: #2c2c2e !important;
    color: #8e8e93 !important;
    border-color: #3a3a3c !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Explicit override to prevent scale jumps on locked utility indicators */
.clara.frozen:active {
    transform: none !important;
}

/* Ensure font adjustments pass clean to form selectors */
.panel-text-input {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.85rem;
}