/* ==========================================================================
  VU Study Pool — Shared Button System (student, admin, public)
========================================================================== */

:root {
    --brand-navy: #02155A;
    --brand-deep: #040629;
    --brand-blue: #0242CA;
    --brand-electric: #108AF7;
    --brand-gold: #F8BB0A;
    --brand-gold-deep: #D98A19;
    --brand-white: #FFFFFF;
    --brand-surface: #F6F6F3;
    --brand-muted: #5B6475;
    --vu-navy: #02155A;
    --vu-navy-dark: #040629;
    --vu-navy-glow: rgba(2, 21, 90, 0.35);
    --vu-blue: #0242CA;
    --vu-blue-dark: #108AF7;
    --vu-blue-glow: rgba(16, 138, 247, 0.40);
    --vu-success: #16a34a;
    --vu-success-glow: rgba(22, 163, 74, 0.35);
    --vu-warning: #d97706;
    --vu-warning-glow: rgba(217, 119, 6, 0.35);
    --vu-danger: #dc2626;
    --vu-danger-glow: rgba(220, 38, 38, 0.35);
    --vu-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --vu-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-btn,
.outline-btn,
.outline-btn-danger,
.outline-btn-success,
.outline-btn-warning {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 0.938rem;
    letter-spacing: 0.015em;
    padding: 0.65rem 1.4rem;
    border-radius: 0.6rem;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    z-index: 1;
    border: none;
    line-height: 1.25;
    transition: transform 0.2s var(--vu-ease-elastic),
        box-shadow 0.25s var(--vu-ease-smooth),
        background-color 0.2s var(--vu-ease-smooth),
        border-color 0.2s var(--vu-ease-smooth),
        color 0.2s var(--vu-ease-smooth);
}

.theme-btn::before,
.outline-btn::before,
.outline-btn-danger::before,
.outline-btn-success::before,
.outline-btn-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    z-index: 2;
    pointer-events: none;
}

.theme-btn:hover::before,
.outline-btn:hover::before,
.outline-btn-danger:hover::before,
.outline-btn-success:hover::before,
.outline-btn-warning:hover::before {
    left: 140%;
}

.theme-btn:hover,
.outline-btn:hover,
.outline-btn-danger:hover,
.outline-btn-success:hover,
.outline-btn-warning:hover {
    transform: translateY(-3px);
}

.theme-btn:active,
.outline-btn:active,
.outline-btn-danger:active,
.outline-btn-success:active,
.outline-btn-warning:active {
    transform: translateY(-1px) scale(0.98);
}

.theme-btn:focus-visible,
.outline-btn:focus-visible,
.outline-btn-danger:focus-visible,
.outline-btn-success:focus-visible,
.outline-btn-warning:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 138, 247, 0.45);
}

.theme-btn:disabled,
.outline-btn:disabled,
.theme-btn.disabled,
.outline-btn.disabled {
    opacity: 0.55;
    pointer-events: none;
    transform: none;
}

.theme-btn i,
.outline-btn i,
.outline-btn-danger i,
.outline-btn-success i,
.outline-btn-warning i {
    font-size: 0.9em;
    transition: transform 0.2s var(--vu-ease-smooth);
}

.theme-btn:hover i,
.outline-btn:hover i,
.outline-btn-danger:hover i,
.outline-btn-success:hover i,
.outline-btn-warning:hover i {
    transform: translateX(2px);
}

/* Sizes */
.theme-btn.btn-sm,
.outline-btn.btn-sm,
.outline-btn-danger.btn-sm,
.outline-btn-success.btn-sm,
.outline-btn-warning.btn-sm {
    padding: 0.42rem 0.95rem;
    font-size: 0.8125rem;
    border-radius: 0.5rem;
}

.theme-btn.btn-lg,
.outline-btn.btn-lg {
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
    border-radius: 0.7rem;
}

/* Solid — dark (navy) */
.theme-btn.dark {
    background: linear-gradient(135deg, #00006d 0%, #02155A 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(2, 21, 90, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.theme-btn.dark:hover {
    background: linear-gradient(135deg, #0242CA 0%, #040629 100%);
    color: #ffffff;
    box-shadow: 0 8px 22px var(--vu-navy-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Solid — light (blue) */
.theme-btn.light {
    background: linear-gradient(135deg, #108AF7 0%, #0242CA 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(16, 138, 247, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.theme-btn.light:hover {
    background: linear-gradient(135deg, #0242CA 0%, #1d6592 100%);
    color: #ffffff;
    box-shadow: 0 8px 22px var(--vu-blue-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Solid — white (hero CTA) */
.theme-btn.white {
    background: #ffffff;
    color: #0242CA;
    border: 1px solid #0242CA;
    box-shadow: 0 4px 12px rgba(16, 138, 247, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.theme-btn.white:hover {
    color: #ffffff;
    background: transparent;
    border: 1px solid #ffffff;
}

/* Solid — success */
.theme-btn.success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.theme-btn.success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 8px 22px var(--vu-success-glow);
}

/* Solid — warning / gold */
.theme-btn.warning {
    background: linear-gradient(135deg, #F8BB0A 0%, #D98A19 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(217, 138, 25, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

a.theme-btn.warning:visited {
    color: #ffffff;
}

.theme-btn.warning:hover,
.theme-btn.warning:focus,
.theme-btn.warning:active {
    background: linear-gradient(135deg, #D98A19 0%, #b45309 100%);
    color: #ffffff;
    box-shadow: 0 8px 22px var(--vu-warning-glow);
}

/* Solid — danger */
.theme-btn.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.theme-btn.danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 8px 22px var(--vu-danger-glow);
}

/* Outline — dark navy (light backgrounds) */
.outline-btn.dark {
    background-color: transparent;
    color: #00006d;
    border: 1.5px solid #00006d;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.outline-btn.dark:hover {
    background-color: #00006d;
    color: #ffffff;
    border-color: #00006d;
    box-shadow: 0 6px 18px var(--vu-navy-glow);
}

/* Outline — primary blue (light backgrounds / dashboard cards) */
.outline-btn.primary {
    background-color: transparent;
    color: #0242CA;
    border: 1.5px solid #108AF7;
    box-shadow: 0 2px 6px rgba(16, 138, 247, 0.08);
}

.outline-btn.primary:hover {
    background-color: #108AF7;
    color: #ffffff;
    border-color: #108AF7;
    box-shadow: 0 6px 18px var(--vu-blue-glow);
}

/* Outline — light (dark backgrounds: hero, footer, PDF toolbar) */
.outline-btn.light {
    background-color: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
}

.outline-btn.light::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.outline-btn.light:hover {
    background-color: #ffffff;
    color: #00006d;
    border-color: #ffffff;
    box-shadow: 0 8px 22px rgba(255, 255, 255, 0.25);
}

/* Outline — semantic */
.outline-btn.success {
    background-color: transparent;
    color: var(--vu-success);
    border: 1.5px solid var(--vu-success);
}

.outline-btn.success:hover {
    background-color: var(--vu-success);
    color: #ffffff;
    box-shadow: 0 6px 18px var(--vu-success-glow);
}

.outline-btn.warning {
    background-color: transparent;
    color: var(--vu-warning);
    border: 1.5px solid var(--brand-gold);
}

.outline-btn.warning:hover {
    background: linear-gradient(135deg, #F8BB0A 0%, #D98A19 100%);
    color: #040629;
    box-shadow: 0 6px 18px var(--vu-warning-glow);
}

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

.outline-btn.danger:hover {
    background-color: var(--vu-danger);
    color: #ffffff;
    box-shadow: 0 6px 18px var(--vu-danger-glow);
}

/* Standalone compound classes (admin delete/reject buttons) */
.outline-btn-danger {
    background-color: transparent;
    color: var(--vu-danger);
    border: 1.5px solid var(--vu-danger);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.08);
}

.outline-btn-danger:hover {
    background-color: var(--vu-danger);
    color: #ffffff;
    box-shadow: 0 6px 18px var(--vu-danger-glow);
}

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

.outline-btn-success:hover {
    background-color: var(--vu-success);
    color: #ffffff;
}

.outline-btn-warning {
    background-color: transparent;
    color: var(--vu-warning);
    border: 1.5px solid var(--brand-gold);
}

.outline-btn-warning:hover {
    background: linear-gradient(135deg, #F8BB0A 0%, #D98A19 100%);
    color: #040629;
}

/* MCQ / exam option buttons built on outline system */
.option-btn.outline-btn.primary:hover:not(:disabled),
.option-btn.outline-btn.dark:hover:not(:disabled) {
    transform: translateY(-1px);
}

.option-btn.btn-success,
.option-btn.btn-danger {
    transform: none !important;
}

/* ==========================================================================
  Theme badges — solid + outline, matching theme-btn variants
========================================================================== */

.theme-badge,
.outline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    padding: 0.28rem 0.65rem;
    border-radius: 0.45rem;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
}

.theme-badge i,
.outline-badge i {
    font-size: 0.85em;
}

.theme-badge.sm,
.outline-badge.sm {
    font-size: 0.625rem;
    padding: 0.18rem 0.5rem;
    border-radius: 0.38rem;
}

.theme-badge.dark {
    background: linear-gradient(135deg, #00006d 0%, #02155A 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.theme-badge.light {
    background: linear-gradient(135deg, #108AF7 0%, #0242CA 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.theme-badge.white {
    background: #ffffff;
    color: #0242CA;
    border: 1px solid #0242CA;
}

.theme-badge.success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.theme-badge.warning {
    background: linear-gradient(135deg, #F8BB0A 0%, #D98A19 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-badge.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.outline-badge.dark {
    background-color: transparent;
    color: #00006d;
    border: 1.5px solid #00006d;
}

.outline-badge.primary {
    background-color: transparent;
    color: #0242CA;
    border: 1.5px solid #108AF7;
}

.outline-badge.light {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.outline-badge.success {
    background-color: transparent;
    color: var(--vu-success);
    border: 1.5px solid var(--vu-success);
}

.outline-badge.warning {
    background-color: transparent;
    color: var(--vu-warning);
    border: 1.5px solid var(--brand-gold);
}

.outline-badge.danger {
    background-color: transparent;
    color: var(--vu-danger);
    border: 1.5px solid var(--vu-danger);
}