/* =====================================================================
   ChemFlow BPS — Modern Component Layer  ("Emerald Glass")
   Themes Bootstrap components onto the v2 token system: buttons, cards,
   badges, frosted-glass surfaces and form controls.
   Loaded after design_tokens.css and before main.css.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 *  Buttons
 * ------------------------------------------------------------------ */
.btn {
    --bs-btn-focus-shadow-rgb: 14, 163, 113;
    border-radius: var(--radius-pill);
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.6rem 1.5rem;
    border: 1px solid transparent;
    transition: transform var(--transition), box-shadow var(--transition),
                background-color var(--transition), border-color var(--transition);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(14, 163, 113, 0.25);
}

.btn-primary,
.btn-success {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background: var(--gradient-primary-deep);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(4, 127, 87, 0.34);
}

.btn-primary:active,
.btn-success:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-outline-primary {
    color: var(--color-primary-strong);
    border: 1.5px solid var(--color-primary);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

.btn-secondary {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border-strong);
    color: var(--color-heading);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--color-surface-alt);
    border-color: var(--color-primary);
    color: var(--color-primary-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Gold = the rare, premium pop */
.btn-warning {
    background: var(--gradient-gold);
    border-color: transparent;
    color: #3d2c00;
    box-shadow: var(--shadow-gold);
}

.btn-warning:hover,
.btn-warning:focus {
    background: var(--gradient-gold);
    border-color: transparent;
    color: #3d2c00;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(185, 129, 10, 0.34);
}

.btn-danger {
    background: var(--color-danger);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px rgba(225, 29, 72, 0.26);
}

.btn-danger:hover,
.btn-danger:focus {
    background: #be123c;
    border-color: transparent;
    transform: translateY(-2px);
}

.btn-link {
    color: var(--color-primary-strong);
    font-weight: 600;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 *  Cards
 * ------------------------------------------------------------------ */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--gradient-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

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

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-heading);
}

/* ------------------------------------------------------------------ *
 *  Frosted-glass surface utility
 * ------------------------------------------------------------------ */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}

.glass-strong {
    background: var(--glass-bg-strong);
}

/* Graceful fallback where backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass,
    .glass-strong {
        background: rgba(255, 255, 255, 0.92);
    }
}

/* ------------------------------------------------------------------ *
 *  Badges & pills
 * ------------------------------------------------------------------ */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--radius-pill);
    padding: 0.4em 0.85em;
}

.badge.bg-success,
.badge.text-bg-success { background: var(--color-success) !important; }
.badge.bg-warning,
.badge.text-bg-warning { background: var(--color-warning) !important; color: #3d2c00 !important; }
.badge.bg-danger,
.badge.text-bg-danger  { background: var(--color-danger) !important; }
.badge.bg-info,
.badge.text-bg-info    { background: var(--color-info) !important; color: #fff !important; }

/* ------------------------------------------------------------------ *
 *  Form controls (global baseline; page sheets may refine)
 * ------------------------------------------------------------------ */
.form-control,
.form-select {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control::placeholder { color: #9aa8a1; }

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-tint);
    background-color: #fff;
    outline: none;
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-tint);
}

/* Soft, modern table baseline (page sheets refine specific tables) */
.table {
    --bs-table-hover-bg: var(--color-surface-alt);
    color: var(--color-text);
}

/* Custom emerald scrollbar — pure polish */
* {
    scrollbar-color: var(--color-border-strong) transparent;
    scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-primary); background-clip: content-box; }