/* =========================================================
   Modern buttons: one look for admin dashboard + frontend.
   Loaded last. Colours/padding only apply where a button has
   no inline style for them, so intentional inline variants
   (e.g. red "Delete Items") keep working.
   ========================================================= */
:root {
    --btn-radius: 10px;
    --btn-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    --btn-shadow-hover: 0 6px 14px rgba(30, 58, 138, 0.22);
    --btn-ring: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

/* Shared shape */
.btn-primary, .btn-secondary, .btn-outline, .btn-outline-danger, .btn-outline-warning,
.btn-cancel, .btn-save, .btn-create, .btn-upload, .btn-edit, .btn-delete, .btn-sm,
.btn-icon-outline, .btn-quick-view, .btn-bulk-delete, .btn-bulk-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: var(--btn-radius) !important;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease,
                box-shadow .2s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Primary */
.btn-primary, .btn-save, .btn-create {
    padding: 11px 22px;
    font-size: 0.95rem;
    border: 1px solid transparent;
    background: linear-gradient(180deg, #2B4DB0 0%, var(--primary-color, #1E3A8A) 100%);
    color: #fff;
    box-shadow: var(--btn-shadow);
}
.btn-primary:hover, .btn-save:hover, .btn-create:hover {
    background: linear-gradient(180deg, #2B4DB0 0%, var(--primary-hover, #172B66) 100%);
    color: #fff;
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-1px);
}

/* Secondary / outline / cancel */
.btn-secondary, .btn-outline, .btn-cancel, .btn-upload {
    padding: 10px 20px;
    font-size: 0.95rem;
    background: #fff;
    border: 1px solid #CBD5E1;
    color: #334155;
    box-shadow: var(--btn-shadow);
}
.btn-secondary:hover, .btn-outline:hover, .btn-cancel:hover, .btn-upload:hover {
    background: #F1F5F9;
    border-color: #94A3B8;
    color: #0F172A;
    transform: translateY(-1px);
}

/* Danger / warning outlines */
.btn-outline-danger, .btn-delete {
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #FCA5A5;
    color: #DC2626;
}
.btn-outline-danger:hover, .btn-delete:hover { background: #FEF2F2; border-color: #F87171; transform: translateY(-1px); }

.btn-outline-warning {
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #FCD34D;
    color: #B45309;
}
.btn-outline-warning:hover { background: #FFFBEB; transform: translateY(-1px); }

/* Small / icon buttons */
.btn-sm { padding: 6px 14px; font-size: 0.85rem; }
.btn-icon-outline { background: #fff; border: 1px solid #CBD5E1; color: #334155; }
.btn-icon-outline:hover { background: #F1F5F9; border-color: #94A3B8; }

/* Press + focus + disabled */
.btn-primary:active, .btn-secondary:active, .btn-outline:active, .btn-cancel:active,
.btn-save:active, .btn-outline-danger:active { transform: translateY(0); box-shadow: none; }

.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-outline:focus-visible,
.btn-cancel:focus-visible, .btn-save:focus-visible, .btn-outline-danger:focus-visible,
.btn-bulk-delete:focus-visible, .btn-bulk-move:focus-visible {
    outline: none;
    box-shadow: var(--btn-ring);
}

.btn-primary:disabled, .btn-secondary:disabled, .btn-outline:disabled, .btn-save:disabled,
.btn-cancel:disabled, .btn-primary[disabled], .btn-outline[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}

@media (max-width: 600px) {
    .btn-primary, .btn-save, .btn-create, .btn-secondary, .btn-outline { padding: 10px 16px; }
}