/**
 * Suunta.ai Console - Buttons Component
 * ======================================
 * All button styles
 * Theme: Northern Lights v273
 * 
 * DESIGN RULES:
 * 
 * 1. EMERALD BUTTONS = DARK TEXT
 *    - Always use: color: var(--brand-blue-700)
 *    - Never use: color: white (poor contrast)
 * 
 * 2. FONT-WEIGHT = 400 or 500
 *    - Use font-weight: 400 or 500 only
 *    - Never bold button text
 * 
 * 3. HOVER EFFECTS
 *    - Background: var(--emerald-500) → var(--emerald-600) (darker)
 *    - Glow: box-shadow: var(--glow-accent)
 *    - Lift: transform: translateY(-1px)
 * 
 * 4. ICON ANIMATIONS (on hover)
 *    - Plus icons (+): rotate(90deg)
 *    - Arrow icons (→): translateX(3px)
 *    - Refresh icons (↻): rotate(180deg)
 *    - Default icons: scale(1.1)
 * 
 * 5. TRANSITION
 *    - All buttons: transition: all var(--duration-fast) var(--ease-smooth)
 *    - Icons: transition: transform var(--duration-fast) var(--ease-smooth)
 * 
 * EXAMPLE:
 * .btn-example {
 *     background: var(--emerald-500);
 *     color: var(--brand-blue-700);
 *     font-weight: 400;
 *     transition: all var(--duration-fast) var(--ease-smooth);
 * }
 * .btn-example i { transition: transform var(--duration-fast) var(--ease-smooth); }
 * .btn-example:hover {
 *     background: var(--emerald-600);
 *     box-shadow: var(--glow-accent);
 *     transform: translateY(-1px);
 * }
 * .btn-example:hover i { transform: scale(1.1); }
 */

/* ==========================================
   BASE BUTTON
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 400;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-smooth);
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn i {
    font-size: 0.875rem;
}

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

/* ==========================================
   BUTTON VARIANTS
   ========================================== */

/* Primary - Green accent with DARK text */
.btn-primary {
    background: var(--emerald-500);
    color: var(--brand-blue-700);
    font-weight: var(--font-weight-medium);
    transition: all var(--duration-fast) var(--ease-smooth);
}

.btn-primary i {
    color: var(--brand-blue-700);
    transition: transform var(--duration-fast) var(--ease-smooth);
}

.btn-primary:hover:not(:disabled) {
    background: var(--emerald-600);
    transform: translateY(-1px);
    box-shadow: var(--glow-accent);
}

.btn-primary:hover:not(:disabled) i {
    transform: translateX(2px);
}

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

/* Secondary - Ghost with border */
.btn-secondary {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--color-text-secondary);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--overlay-white-5);
    border-color: var(--glass-border-hover);
}

/* Ghost - No background */
.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--overlay-white-5);
    color: var(--color-text-primary);
}

.btn-ghost--danger {
    color: var(--red-400);
}

.btn-ghost--danger:hover:not(:disabled) {
    background: var(--overlay-red-10, rgba(239, 68, 68, 0.1));
    color: var(--red-500);
}

/* Danger - Red */
.btn-danger {
    background: var(--red-500);
    color: var(--white);
}

.btn-danger:hover:not(:disabled) {
    background: var(--red-600);
    box-shadow: var(--glow-error);
}

.btn-danger:active:not(:disabled) {
    transform: scale(0.98);
    box-shadow: none;
}

/* Warning - Yellow */
.btn-warning {
    background: var(--yellow-600-transparent);
    border: 1px solid var(--gold-600-transparent);
    color: var(--color-warning);
}

.btn-warning:hover:not(:disabled) {
    background: var(--gold-600-transparent);
}

/* Success - Emerald outline */
.btn-success {
    background: var(--emerald-alpha-10);
    border: 1px solid var(--emerald-alpha-30);
    color: var(--color-accent);
}

.btn-success:hover:not(:disabled) {
    background: var(--emerald-alpha-20);
}

/* Link style */
.btn-link {
    background: transparent;
    padding: 0;
    color: var(--emerald-500);
    font-weight: 400;
}

.btn-link:hover:not(:disabled) {
    color: var(--emerald-600);
    text-decoration: underline;
}

/* ==========================================
   BUTTON SIZES
   ========================================== */

.btn-sm {
    padding: var(--space-2) var(--space-3);
    min-height: 36px;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    position: relative;
}

.btn-sm i {
    font-size: 0.75rem;
}

.btn-sm::before {
    content: '';
    position: absolute;
    inset: -4px;
    pointer-events: none;
}

.btn-lg {
    padding: var(--space-3) var(--space-6);
    min-height: var(--touch-target-comfortable);
    font-size: var(--font-size-base);
    border-radius: var(--radius-md);
}

.btn-lg i {
    font-size: 1rem;
}

.btn-xl {
    padding: var(--space-4) var(--space-7);
    min-height: 52px;
    font-size: 1.0625rem;
    border-radius: var(--radius-lg);
}

/* ==========================================
   ICON BUTTONS
   ========================================== */

.btn-icon {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 0;
    border-radius: var(--radius-md);
}

.btn-icon.btn-sm {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: var(--radius-sm);
    position: relative;
}

.btn-icon.btn-sm::before {
    content: '';
    position: absolute;
    inset: -4px;
    pointer-events: none;
}

.btn-icon.btn-lg {
    width: var(--touch-target-comfortable);
    height: var(--touch-target-comfortable);
    min-width: var(--touch-target-comfortable);
    min-height: var(--touch-target-comfortable);
    border-radius: var(--radius-lg);
}

/* ==========================================
   BUTTON GROUPS
   ========================================== */

.btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-group--sm {
    gap: 8px;
}

.btn-group--vertical {
    flex-direction: column;
}

/* Connected buttons */
.btn-group--connected {
    gap: 0;
}

.btn-group--connected .btn {
    border-radius: 0;
}

.btn-group--connected .btn:first-child {
    border-radius: 8px 0 0 8px;
}

.btn-group--connected .btn:last-child {
    border-radius: 0 8px 8px 0;
}

.btn-group--connected .btn:not(:last-child) {
    /* Changed: rgba(255,255,255,0.1) -> var(--overlay-white-10) for light theme support */
    border-right: 1px solid var(--overlay-white-10);
}

/* ==========================================
   FOCUS CARD BUTTONS
   ========================================== */

.focus-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
}

.focus-btn--primary {
    background: var(--color-accent);
    color: var(--brand-blue-700);
    transition: all 0.2s ease;
}

.focus-btn--primary i {
    color: var(--brand-blue-700);
    transition: transform 0.2s ease;
}

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

.focus-btn--primary:hover i {
    transform: translateX(2px);
}

.focus-btn--secondary {
    /* Changed: rgba(255,255,255,0.05) -> var(--overlay-white-5) for light theme support */
    background: var(--overlay-white-5);
    color: var(--color-text-primary);
    border: 1px solid var(--glass-border);
}

.focus-btn--secondary:hover {
    /* Changed: rgba(255,255,255,0.08) -> var(--overlay-white-8) for light theme support */
    background: var(--overlay-white-8);
}

/* ==========================================
   ASK SUUNTA.AI BUTTON
   ========================================== */

.focus-ask-suunta-ai {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.focus-ask-suunta-ai:hover {
    /* Changed: rgba(255,255,255,0.08) -> var(--overlay-white-8) for light theme support */
    background: var(--overlay-white-8);
    color: var(--color-text-primary);
}

/* ==========================================
   QUICK ACTIONS
   ========================================== */

.quick-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    /* Changed: rgba(255,255,255,0.04) -> var(--overlay-white-4) for light theme support */
    background: var(--overlay-white-4);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.quick-action:hover {
    /* Changed: rgba(255,255,255,X) -> var(--overlay-white-*) for light theme support */
    background: var(--overlay-white-8);
    border-color: var(--overlay-white-12);
    color: var(--color-text-primary);
}

.quick-action i {
    font-size: 0.8125rem;
    opacity: 0.7;
}

.quick-action--primary {
    background: var(--color-accent-muted);
    border-color: var(--glass-border-accent);
    color: var(--color-accent);
}

.quick-action--primary:hover {
    background: var(--emerald-alpha-20);
    border-color: var(--emerald-alpha-40);
}

/* ==========================================
   LOADING STATE
   ========================================== */

.btn--loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn--loading .btn-text {
    opacity: 0;
}

.btn--loading .btn-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn--loading::after,
.btn--loading .btn-spinner::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin var(--duration-slower) linear infinite;
}

@supports selector(:has(*)) {
    .btn--loading:has(.btn-spinner)::after {
        content: none;
    }
}