/**
 * Picxly — shared primary / secondary / outline buttons (dashboard, auth, Bootstrap pages).
 * Load after dashboard-revamp.css or adminlte; before revamp-theme when landing uses CSS variables.
 */
:root {
    --picxly-btn-primary-bg: #009e6b;
    --picxly-btn-primary-hover-bg: #008459;
    --picxly-btn-primary-shadow: 0 4px 12px rgba(0, 158, 107, 0.2);
    --picxly-btn-primary-focus-ring: 0 0 0 3px rgba(0, 158, 107, 0.25);
    --picxly-btn-secondary-bg: #617085;
    --picxly-btn-secondary-hover-bg: #4a5568;
    --picxly-btn-secondary-focus-ring: 0 0 0 3px rgba(97, 112, 133, 0.25);
    --picxly-btn-on-solid: #ffffff;
    --picxly-btn-radius: 12px;
    --picxly-btn-font-weight: 600;
    --picxly-btn-outline-border: #e2e8f0;
    --picxly-btn-outline-hover-bg: #f1f5f9;
    --picxly-btn-outline-text: #1a202c;
}

/* ---- Standalone classes (dashboard, modals) ---- */
.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
input[type="button"].btn-primary {
    box-sizing: border-box;
    background-color: var(--picxly-btn-primary-bg);
    color: var(--picxly-btn-on-solid);
    padding: 10px 20px;
    border-radius: var(--picxly-btn-radius);
    border: none;
    font-weight: var(--picxly-btn-font-weight);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

.btn-primary:hover {
    background-color: var(--picxly-btn-primary-hover-bg);
    box-shadow: var(--picxly-btn-primary-shadow);
}

.btn-primary:focus-visible {
    outline: none;
    box-shadow: var(--picxly-btn-primary-focus-ring);
}

.btn-primary:disabled,
.btn-primary.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary,
input[type="submit"].btn-secondary,
input[type="button"].btn-secondary {
    box-sizing: border-box;
    background-color: var(--picxly-btn-secondary-bg);
    color: var(--picxly-btn-on-solid);
    padding: 10px 20px;
    border-radius: var(--picxly-btn-radius);
    border: none;
    font-weight: var(--picxly-btn-font-weight);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn-secondary:hover {
    background-color: var(--picxly-btn-secondary-hover-bg);
}

.btn-secondary:focus-visible {
    outline: none;
    box-shadow: var(--picxly-btn-secondary-focus-ring);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-outline,
a.btn-outline,
button.btn-outline {
    box-sizing: border-box;
    background-color: transparent;
    border: 1.5px solid var(--picxly-btn-outline-border);
    color: var(--picxly-btn-outline-text);
    padding: 10px 20px;
    border-radius: var(--picxly-btn-radius);
    font-weight: var(--picxly-btn-font-weight);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
    background-color: var(--picxly-btn-outline-hover-bg);
    border-color: #cbd5e1;
}

.btn-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(226, 232, 240, 0.8);
}

.btn-outline:disabled,
.btn-outline.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- Bootstrap4 + AdminLTE: same Picxly look ---- */
.btn.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary,
input.btn.btn-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background-color: var(--picxly-btn-primary-bg) !important;
    border-color: var(--picxly-btn-primary-bg) !important;
    color: var(--picxly-btn-on-solid) !important;
    border-radius: var(--picxly-btn-radius);
    font-weight: var(--picxly-btn-font-weight);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--picxly-btn-primary-hover-bg) !important;
    border-color: var(--picxly-btn-primary-hover-bg) !important;
    color: var(--picxly-btn-on-solid) !important;
    box-shadow: var(--picxly-btn-primary-shadow);
}

.btn.btn-secondary,
a.btn.btn-secondary,
button.btn.btn-secondary,
input.btn.btn-secondary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background-color: var(--picxly-btn-secondary-bg) !important;
    border-color: var(--picxly-btn-secondary-bg) !important;
    color: var(--picxly-btn-on-solid) !important;
    border-radius: var(--picxly-btn-radius);
    font-weight: var(--picxly-btn-font-weight);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    background-color: var(--picxly-btn-secondary-hover-bg) !important;
    border-color: var(--picxly-btn-secondary-hover-bg) !important;
    color: var(--picxly-btn-on-solid) !important;
}

/* Outline / ghost Bootstrap variants → Picxly outline */
.btn.btn-outline-primary,
.btn.btn-outline-secondary {
    background-color: transparent !important;
    color: var(--picxly-btn-outline-text) !important;
    border: 1.5px solid var(--picxly-btn-outline-border) !important;
    border-radius: var(--picxly-btn-radius);
    font-weight: var(--picxly-btn-font-weight);
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-secondary:hover {
    background-color: var(--picxly-btn-outline-hover-bg) !important;
    border-color: #cbd5e1 !important;
    color: var(--picxly-btn-outline-text) !important;
}

/* Login / register: full-width CTAs */
.login-card-revamped .btn-primary,
.login-card-revamped .btn-secondary {
    width: 100%;
}

.login-card-revamped .btn-secondary {
    margin-top:5px;
}

.login-card-revamped .btn-primary {
    margin-top: 10px;
}

body.login-page-revamped.login-page--register .btn-secondary {
    margin-top: clamp(2px, 0.5dvh, 6px);
}

/* ---- Compact size (settings uploader, storage cards, toolbars) ---- */
.btn-primary.btn-sm,
button.btn-primary.btn-sm,
a.btn-primary.btn-sm,
.btn-secondary.btn-sm,
button.btn-secondary.btn-sm,
a.btn-secondary.btn-sm,
.btn-outline.btn-sm,
button.btn-outline.btn-sm,
a.btn-outline.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: var(--picxly-btn-radius);
}

/* ---- Outline: muted label-style actions (e.g. Remove) ---- */
.btn-outline.muted,
button.btn-outline.muted {
    color: #64748B;
}

.btn-outline.muted:hover,
button.btn-outline.muted:hover {
    color: #475569;
}

/* ---- Destructive outline (delete / remove album) ---- */
.btn-outline-danger,
.btn-danger-outline,
a.btn-outline-danger,
button.btn-outline-danger {
    box-sizing: border-box;
    background-color: transparent;
    border: 1.5px solid #fecaca;
    color: #dc2626;
    padding: 10px 20px;
    border-radius: var(--picxly-btn-radius);
    font-weight: var(--picxly-btn-font-weight);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-outline-danger:hover,
.btn-danger-outline:hover,
a.btn-outline-danger:hover,
button.btn-outline-danger:hover {
    background-color: #fef2f2;
    border-color: #f87171;
    color: #b91c1c;
}

.btn-outline-danger:focus-visible,
.btn-danger-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25);
}

/* ---- Amber CTA (storage upgrade emphasis) ---- */
.btn-amber,
button.btn-amber,
a.btn-amber {
    box-sizing: border-box;
    background-color: #d97706;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: var(--picxly-btn-radius);
    border: none;
    font-weight: var(--picxly-btn-font-weight);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.3;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-amber:hover,
button.btn-amber:hover,
a.btn-amber:hover {
    background-color: #b45309;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}

.btn-amber.btn-sm,
button.btn-amber.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

.btn-amber:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.3);
}

/* ---- Full-width block (plan cards, profile) ---- */
.btn-block,
button.btn-block {
    width: 100%;
    justify-content: center;
}