/* ══════════════════════════════════════════════════════════════
   SUBPAGE GLASSMORPHISM OVERRIDES
   Transforms Bootstrap-styled subpages to match glassmorphism theme
   ══════════════════════════════════════════════════════════════ */

/* ─── Subpage Body Gradient (matches homepage) ─── */
body.pm-subpage-body {
    position: relative;
    background-color: #08080f !important;
}

body.pm-subpage-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(ellipse 100% 60% at 50% -10%, rgba(167, 139, 250, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 85% 40%, rgba(34, 211, 238, 0.12) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* Main content wrapper - Above gradient layer */
.main-content {
    position: relative;
    z-index: 1;
    background: transparent !important;
    min-height: calc(100vh - 160px);
}

/* Ensure containers don't block gradient */
.main-content > .container {
    background: transparent !important;
}

/* ─── Container & Layout ─── */
.main-content > .container {
    max-width: 1280px;
    padding: 120px 24px 80px;
}

.main-content > .container > .row {
    margin-bottom: var(--pm-space-3xl, 64px);
}

.main-content > .container > .row:last-child {
    margin-bottom: 0;
}

/* ─── Hero/Title Sections ─── */
.main-content h1.display-4,
.main-content h1.display-5 {
    font-family: var(--pm-font-display, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, var(--pm-accent-purple, #a78bfa) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.main-content h1 i {
    -webkit-text-fill-color: initial;
    background: none;
}

.main-content .lead,
.main-content .lead.text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.25rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Section Headings ─── */
.main-content h2.h3,
.main-content h2 {
    font-family: var(--pm-font-display, 'Outfit', sans-serif);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.75rem;
}

.main-content h3.h4,
.main-content h3 {
    font-family: var(--pm-font-display, 'Outfit', sans-serif);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95) !important;
}

.main-content h4.h5,
.main-content h4,
.main-content h5 {
    font-family: var(--pm-font-display, 'Outfit', sans-serif);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ─── Glass Cards ─── */
.main-content .card,
.main-content .card.bg-dark {
    background: var(--pm-glass-bg, rgba(255, 255, 255, 0.03)) !important;
    backdrop-filter: var(--pm-glass-blur, blur(20px));
    -webkit-backdrop-filter: var(--pm-glass-blur, blur(20px));
    border: 1px solid var(--pm-glass-border, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 16px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.main-content .card:hover {
    background: var(--pm-glass-bg-hover, rgba(255, 255, 255, 0.06)) !important;
    border-color: var(--pm-glass-border-hover, rgba(255, 255, 255, 0.15)) !important;
    transform: translateY(-2px);
    box-shadow: var(--pm-shadow-md, 0 8px 32px rgba(0, 0, 0, 0.4));
}

/* Card border colors based on Bootstrap border-* classes */
.main-content .card.border-success {
    border-color: rgba(34, 197, 94, 0.4) !important;
}
.main-content .card.border-success:hover {
    border-color: rgba(34, 197, 94, 0.6) !important;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
}

.main-content .card.border-info {
    border-color: rgba(34, 211, 238, 0.4) !important;
}
.main-content .card.border-info:hover {
    border-color: rgba(34, 211, 238, 0.6) !important;
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.2);
}

.main-content .card.border-warning {
    border-color: rgba(251, 191, 36, 0.4) !important;
}
.main-content .card.border-warning:hover {
    border-color: rgba(251, 191, 36, 0.6) !important;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
}

.main-content .card.border-primary {
    border-color: rgba(167, 139, 250, 0.4) !important;
}
.main-content .card.border-primary:hover {
    border-color: rgba(167, 139, 250, 0.6) !important;
    box-shadow: 0 0 30px rgba(167, 139, 250, 0.2);
}

.main-content .card.border-danger {
    border-color: rgba(239, 68, 68, 0.4) !important;
}
.main-content .card.border-danger:hover {
    border-color: rgba(239, 68, 68, 0.6) !important;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.2);
}

.main-content .card.border-secondary {
    border-color: rgba(156, 163, 175, 0.3) !important;
}

/* ─── Card Headers ─── */
.main-content .card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--pm-glass-border, rgba(255, 255, 255, 0.08));
    padding: 16px 20px;
}

.main-content .card-header.bg-info {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.1)) !important;
    border-bottom-color: rgba(34, 211, 238, 0.2);
}

.main-content .card-header.bg-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1)) !important;
    border-bottom-color: rgba(251, 191, 36, 0.2);
}
.main-content .card-header.bg-warning h4,
.main-content .card-header.bg-warning .text-dark {
    color: rgba(255, 255, 255, 0.95) !important;
}

.main-content .card-header.bg-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)) !important;
    border-bottom-color: rgba(34, 197, 94, 0.2);
}

.main-content .card-header.bg-primary {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.1)) !important;
    border-bottom-color: rgba(167, 139, 250, 0.2);
}

.main-content .card-header.bg-secondary {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.15), rgba(156, 163, 175, 0.08)) !important;
    border-bottom-color: rgba(156, 163, 175, 0.15);
}

.main-content .card-header h4,
.main-content .card-header h5 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ─── Card Body ─── */
.main-content .card-body {
    padding: 24px;
}

.main-content .card-body p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.main-content .card-body .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ─── Icon Containers ─── */
.main-content .rounded-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}

.main-content .rounded-circle.bg-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.15)) !important;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.main-content .rounded-circle.bg-info {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(34, 211, 238, 0.15)) !important;
    border: 1px solid rgba(34, 211, 238, 0.4);
}

.main-content .rounded-circle.bg-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 191, 36, 0.15)) !important;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.main-content .rounded-circle.bg-primary {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(167, 139, 250, 0.15)) !important;
    border: 1px solid rgba(167, 139, 250, 0.4);
}

.main-content .rounded-circle.bg-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.15)) !important;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.main-content .rounded-circle.bg-secondary {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.2), rgba(156, 163, 175, 0.1)) !important;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.main-content .rounded-circle i {
    font-size: 1.5rem;
}

/* Large icons in cards */
.main-content .card-body i.fs-1 {
    font-size: 3rem !important;
    margin-bottom: 16px;
}

.main-content i.text-success { color: #22c55e !important; }
.main-content i.text-info { color: var(--pm-accent-cyan, #22d3ee) !important; }
.main-content i.text-warning { color: var(--pm-accent-gold, #fbbf24) !important; }
.main-content i.text-primary { color: var(--pm-accent-purple, #a78bfa) !important; }
.main-content i.text-danger { color: #ef4444 !important; }
.main-content i.text-secondary { color: #9ca3af !important; }
.main-content i.text-white { color: white !important; }
.main-content i.text-dark { color: rgba(0, 0, 0, 0.9) !important; }

/* ─── Alerts / Highlight Boxes ─── */
.main-content .alert {
    background: var(--pm-glass-bg-strong, rgba(255, 255, 255, 0.08)) !important;
    backdrop-filter: var(--pm-glass-blur, blur(20px));
    -webkit-backdrop-filter: var(--pm-glass-blur, blur(20px));
    border: 1px solid var(--pm-glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 24px 32px;
}

.main-content .alert.alert-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05)) !important;
    border-color: rgba(34, 197, 94, 0.3);
}

.main-content .alert.alert-primary {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(167, 139, 250, 0.05)) !important;
    border-color: rgba(167, 139, 250, 0.3);
}

.main-content .alert.alert-info {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(34, 211, 238, 0.05)) !important;
    border-color: rgba(34, 211, 238, 0.3);
}

.main-content .alert.alert-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05)) !important;
    border-color: rgba(251, 191, 36, 0.3);
}

.main-content .alert-heading {
    font-family: var(--pm-font-display, 'Outfit', sans-serif);
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600;
}

.main-content .alert p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ─── Badges / Pills ─── */
.main-content .badge {
    font-family: var(--pm-font-body, 'DM Sans', sans-serif);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid transparent;
}

.main-content .badge.bg-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.15)) !important;
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac !important;
}

.main-content .badge.bg-info {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(34, 211, 238, 0.15)) !important;
    border-color: rgba(34, 211, 238, 0.4);
    color: #a5f3fc !important;
}

.main-content .badge.bg-primary {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(167, 139, 250, 0.15)) !important;
    border-color: rgba(167, 139, 250, 0.4);
    color: #c4b5fd !important;
}

.main-content .badge.bg-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 191, 36, 0.15)) !important;
    border-color: rgba(251, 191, 36, 0.4);
    color: #fde68a !important;
}
.main-content .badge.bg-warning.text-dark {
    color: #fde68a !important;
}

.main-content .badge.bg-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8) !important;
}

.main-content .badge.bg-light {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2);
}
.main-content .badge.bg-light.text-info {
    color: var(--pm-accent-cyan, #22d3ee) !important;
}
.main-content .badge.bg-light.text-success {
    color: #22c55e !important;
}

.main-content .badge.bg-dark {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ─── Buttons ─── */
.main-content .btn {
    font-family: var(--pm-font-body, 'DM Sans', sans-serif);
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 10px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* Primary Button - Purple gradient */
.main-content .btn-primary,
.main-content .btn-info {
    background: linear-gradient(135deg, var(--pm-accent-purple, #a78bfa), #8b5cf6) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
}

.main-content .btn-primary:hover,
.main-content .btn-info:hover {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(167, 139, 250, 0.4);
}

/* Success Button - Green accent */
.main-content .btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.main-content .btn-success:hover {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

/* Warning Button - Gold accent */
.main-content .btn-warning {
    background: linear-gradient(135deg, var(--pm-accent-gold, #fbbf24), #f59e0b) !important;
    border-color: transparent !important;
    color: rgba(0, 0, 0, 0.9) !important;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.main-content .btn-warning:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
}

/* Light Button */
.main-content .btn-light {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: transparent !important;
    color: #1a1a2e !important;
}

.main-content .btn-light:hover {
    background: white !important;
    transform: translateY(-1px);
}

/* Outline Buttons */
.main-content .btn-outline-info,
.main-content .btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--pm-accent-purple, #a78bfa) !important;
    color: var(--pm-accent-purple, #a78bfa) !important;
}

.main-content .btn-outline-info:hover,
.main-content .btn-outline-primary:hover {
    background: rgba(167, 139, 250, 0.15) !important;
    border-color: var(--pm-accent-purple-bright, #c4b5fd) !important;
    color: var(--pm-accent-purple-bright, #c4b5fd) !important;
}

.main-content .btn-outline-warning {
    background: transparent !important;
    border: 1px solid var(--pm-accent-gold, #fbbf24) !important;
    color: var(--pm-accent-gold, #fbbf24) !important;
}

.main-content .btn-outline-warning:hover {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: #fde68a !important;
    color: #fde68a !important;
}

.main-content .btn-outline-secondary {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.main-content .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}

.main-content .btn-outline-light {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}

.main-content .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: white !important;
}

/* ─── Lists ─── */
.main-content .list-unstyled li {
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.8);
}

.main-content .list-unstyled i.bi-check {
    font-weight: bold;
}

/* ─── Tables ─── */
.main-content .table,
.main-content .table.table-dark {
    background: var(--pm-glass-bg, rgba(255, 255, 255, 0.03));
    backdrop-filter: var(--pm-glass-blur, blur(20px));
    -webkit-backdrop-filter: var(--pm-glass-blur, blur(20px));
    border: 1px solid var(--pm-glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    overflow: hidden;
    --bs-table-bg: transparent;
    --bs-table-color: rgba(255, 255, 255, 0.9);
    --bs-table-border-color: rgba(255, 255, 255, 0.08);
}

.main-content .table thead {
    background: rgba(255, 255, 255, 0.05);
}

.main-content .table thead th {
    border-bottom: 1px solid var(--pm-glass-border, rgba(255, 255, 255, 0.08));
    padding: 16px;
    font-family: var(--pm-font-display, 'Outfit', sans-serif);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.main-content .table tbody tr {
    transition: background 0.2s ease;
}

.main-content .table.table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
    --bs-table-hover-bg: transparent;
}

.main-content .table tbody td {
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.main-content .table .text-success {
    color: #22c55e !important;
}

.main-content .table .text-danger {
    color: #ef4444 !important;
}

.main-content .table .text-warning {
    color: var(--pm-accent-gold, #fbbf24) !important;
}

/* ─── CTA Cards ─── */
.main-content .card.bg-primary {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(139, 92, 246, 0.15)) !important;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.main-content .card.bg-primary .card-body {
    padding: 48px 32px;
}

.main-content .card.bg-primary h3,
.main-content .card.bg-primary .lead {
    color: rgba(255, 255, 255, 0.95) !important;
}

.main-content .card.bg-primary .text-white {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ─── Text Utilities Override ─── */
.main-content .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

.main-content .text-white {
    color: rgba(255, 255, 255, 0.95) !important;
}

.main-content .text-light {
    color: rgba(255, 255, 255, 0.9) !important;
}

.main-content .small,
.main-content small {
    color: rgba(255, 255, 255, 0.6);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .main-content > .container {
        padding: 100px 16px 60px;
    }

    .main-content h1.display-4,
    .main-content h1.display-5 {
        font-size: 2rem;
    }

    .main-content .card-body {
        padding: 20px;
    }

    .main-content .alert {
        padding: 20px;
    }

    .main-content .badge {
        padding: 6px 12px;
        font-size: 0.875rem;
    }
}

/* ─── Animation on scroll ─── */
.main-content .card,
.main-content .alert {
    animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for grid items */
.main-content .col-lg-4:nth-child(1) .card,
.main-content .col-md-4:nth-child(1) .card,
.main-content .col-lg-6:nth-child(1) .card,
.main-content .col-md-6:nth-child(1) .card,
.main-content .col-md-3:nth-child(1) .card {
    animation-delay: 0.1s;
}

.main-content .col-lg-4:nth-child(2) .card,
.main-content .col-md-4:nth-child(2) .card,
.main-content .col-lg-6:nth-child(2) .card,
.main-content .col-md-6:nth-child(2) .card,
.main-content .col-md-3:nth-child(2) .card {
    animation-delay: 0.2s;
}

.main-content .col-lg-4:nth-child(3) .card,
.main-content .col-md-4:nth-child(3) .card,
.main-content .col-md-3:nth-child(3) .card {
    animation-delay: 0.3s;
}

.main-content .col-md-3:nth-child(4) .card {
    animation-delay: 0.4s;
}