/* Overrides Bootstrap's .btn-* so no Bootstrap blue/grey survives, without touching markup classes. */

.btn {
    font-weight: 600;
    font-size: 13.5px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    padding: 8px 16px;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                filter var(--duration-fast) var(--ease-out),
                background var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.btn:active { transform: translateY(1px); }
.btn:focus { box-shadow: none; }

.btn-sm { padding: 5px 11px; font-size: 12.5px; }

/* Default size for a bare icon dropped straight into a .btn (no wrapper div, no .btn-action) -
   without this the inline <svg> has no intrinsic size and blows up to the browser's replaced-element default. */
.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    vertical-align: -3px;
}

/* Primary = blue */
.btn-primary {
    background: linear-gradient(155deg, #4facfe 0%, var(--accent-blue) 100%);
    color: #06131f;
    box-shadow: var(--shadow-button);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-glow-blue); color: #06131f; }

/* Success = green (Start) */
.btn-success {
    background: linear-gradient(155deg, #57e29a 0%, var(--accent-green) 100%);
    color: #06251a;
    box-shadow: var(--shadow-button);
}
.btn-success:hover { filter: brightness(1.08); box-shadow: var(--shadow-glow-green); color: #06251a; }

/* Danger = red (Stop / destructive) */
.btn-danger {
    background: linear-gradient(155deg, #ff7a7a 0%, var(--accent-red) 100%);
    color: #2a0606;
    box-shadow: var(--shadow-button);
}
.btn-danger:hover { filter: brightness(1.08); box-shadow: var(--shadow-glow-red); color: #2a0606; }

/* Warning = orange (Restore / caution) */
.btn-warning {
    background: linear-gradient(155deg, #ffc266 0%, var(--accent-orange) 100%);
    color: #2b1a02;
    box-shadow: var(--shadow-button);
}
.btn-warning:hover { filter: brightness(1.08); color: #2b1a02; }

/* Secondary / outline-secondary = neutral surface button (Restart, cancel, filters) */
.btn-secondary,
.btn-outline-secondary {
    background: var(--card-hover-bg);
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: #26313f;
    border-color: #3a4657;
    color: var(--text);
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}
.btn-outline-primary:hover {
    background: var(--accent-blue-10);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.btn-link {
    color: var(--text-secondary);
    font-weight: 600;
}
.btn-link:hover { color: var(--text); }

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

/* Icon + label button used in the header (Start/Restart/Stop) */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-action svg {
    width: 15px;
    height: 15px;
}

/* Favorite star toggle - a single outline-star icon (_Icon "star") whose fill is flipped by
   data-favorite rather than swapping in a second "star-filled" icon, so site.js can update the
   visual state after an AJAX POST (see favorite-toggle handler) without touching innerHTML. SVG
   "fill" set via CSS always wins over the icon's own fill="none" presentation attribute. */
.favorite-toggle[data-favorite="true"] svg {
    fill: currentColor;
}