/* ========================================
   Button Component
   ======================================== */

/* All buttons sharp corners (also enforced in app.css) */
.btn {
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.15s;
    text-align: left;
    justify-content: flex-start;
}

/* Sizes */
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }

/* Danger with metro red */
.btn-danger {
    background-color: var(--rdhub-red);
    border-color: var(--rdhub-red);
}
.btn-danger:hover {
    background-color: #c10f1e;
    border-color: #c10f1e;
}

.btn-outline-danger {
    color: var(--rdhub-red);
    border-color: var(--rdhub-red);
}
.btn-outline-danger:hover {
    background-color: var(--rdhub-red);
    border-color: var(--rdhub-red);
}

/* Success with metro green */
.btn-success {
    background-color: var(--rdhub-green);
    border-color: var(--rdhub-green);
}
.btn-success:hover {
    background-color: #0d6b0d;
    border-color: #0d6b0d;
}

/* Ghost button */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: #64748b;
}
.btn-ghost:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* Focus — no ring */
.btn:focus,
.btn:active:focus {
    box-shadow: none;
}

/* ========================================
   Icon-Text Alignment System
   ======================================== */

/* Icon standardization - fixed width for all FA5 icons */
.btn i.fas,
.btn i.far,
.btn i.fab,
.btn i.fal {
    width: 1.25em; /* Fixed width container */
    text-align: center; /* Center icon within fixed width */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* ========================================
   Functional Button Colors
   ======================================== */

/* Impersonate action - purple/mysterious */
.btn-outline-dark {
    background-color: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
}
.btn-outline-dark:hover {
    background-color: #6d28d9;
    border-color: #6d28d9;
    color: #ffffff;
}

/* Magic link - cyan/info action */
.btn-outline-secondary[type="submit"] {
    background-color: #0891b2;
    border-color: #0891b2;
    color: #ffffff;
}
.btn-outline-secondary[type="submit"]:hover {
    background-color: #0e7490;
    border-color: #0e7490;
    color: #ffffff;
}

/* Email verification - success/positive action */
.btn-outline-success {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}
.btn-outline-success:hover {
    background-color: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

/* Save/Primary actions - blue */
.btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
.btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

/* Edit link - slate/neutral */
.btn-outline-secondary[href] {
    background-color: #64748b;
    border-color: #64748b;
    color: #ffffff;
}
.btn-outline-secondary[href]:hover {
    background-color: #475569;
    border-color: #475569;
    color: #ffffff;
}