:root {
    --pp-tone-a: #7c3aed;
    --pp-tone-b: #db2777;
    --pp-tone-c: #0891b2;
    --pp-tone-soft: #f5f3ff;
    --pp-tone-border: #ddd6fe;
}

body[data-pp-tone="academic"] { --pp-tone-a:#2563eb; --pp-tone-b:#7c3aed; --pp-tone-c:#db2777; --pp-tone-soft:#eff6ff; --pp-tone-border:#bfdbfe; }
body[data-pp-tone="health"] { --pp-tone-a:#059669; --pp-tone-b:#0891b2; --pp-tone-c:#2563eb; --pp-tone-soft:#ecfdf5; --pp-tone-border:#a7f3d0; }
body[data-pp-tone="care"] { --pp-tone-a:#0284c7; --pp-tone-b:#7c3aed; --pp-tone-c:#e11d48; --pp-tone-soft:#f0f9ff; --pp-tone-border:#bae6fd; }
body[data-pp-tone="quality"] { --pp-tone-a:#16a34a; --pp-tone-b:#0d9488; --pp-tone-c:#2563eb; --pp-tone-soft:#f0fdf4; --pp-tone-border:#bbf7d0; }
body[data-pp-tone="curriculum"] { --pp-tone-a:#4f46e5; --pp-tone-b:#9333ea; --pp-tone-c:#ea580c; --pp-tone-soft:#eef2ff; --pp-tone-border:#c7d2fe; }
body[data-pp-tone="admin"] { --pp-tone-a:#7c3aed; --pp-tone-b:#db2777; --pp-tone-c:#0891b2; --pp-tone-soft:#faf5ff; --pp-tone-border:#e9d5ff; }
body[data-pp-tone="student"] { --pp-tone-a:#0d9488; --pp-tone-b:#2563eb; --pp-tone-c:#7c3aed; --pp-tone-soft:#f0fdfa; --pp-tone-border:#99f6e4; }
body[data-pp-tone="document"] { --pp-tone-a:#0369a1; --pp-tone-b:#0d9488; --pp-tone-c:#4f46e5; --pp-tone-soft:#f0f9ff; --pp-tone-border:#bae6fd; }
body[data-pp-tone="finance"] { --pp-tone-a:#d97706; --pp-tone-b:#059669; --pp-tone-c:#2563eb; --pp-tone-soft:#fffbeb; --pp-tone-border:#fde68a; }
body[data-pp-tone="people"] { --pp-tone-a:#c026d3; --pp-tone-b:#7c3aed; --pp-tone-c:#0284c7; --pp-tone-soft:#fdf4ff; --pp-tone-border:#f5d0fe; }

.pp-shell-header {
    position: sticky;
    box-shadow: 0 1px 0 rgba(148, 163, 184, .16), 0 8px 24px rgba(15, 23, 42, .04);
}

.pp-shell-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pp-tone-a), var(--pp-tone-b), var(--pp-tone-c));
}

.pp-shell-main {
    background: linear-gradient(180deg, var(--pp-tone-soft) 0, #f4f6f9 230px);
}

.pp-vibrant-hero {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    background: linear-gradient(105deg, var(--pp-tone-a), var(--pp-tone-b) 58%, var(--pp-tone-c));
    box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
}

.pp-vibrant-hero .pp-hero-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--pp-tone-a);
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .14);
}

.pp-vibrant-hero .pp-hero-action {
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.pp-vibrant-hero .pp-hero-action:hover { background: rgba(255, 255, 255, .24); }

.pp-vibrant-metrics > :nth-child(5n+1) { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.pp-vibrant-metrics > :nth-child(5n+2) { background: linear-gradient(135deg, #f59e0b, #f97316); }
.pp-vibrant-metrics > :nth-child(5n+3) { background: linear-gradient(135deg, #10b981, #0d9488); }
.pp-vibrant-metrics > :nth-child(5n+4) { background: linear-gradient(135deg, #0ea5e9, #0891b2); }
.pp-vibrant-metrics > :nth-child(5n) { background: linear-gradient(135deg, #ec4899, #db2777); }

.pp-vibrant-metrics > * {
    border-color: rgba(255, 255, 255, .2) !important;
    color: #fff !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, .1);
}

.pp-vibrant-metrics > * :is(h1,h2,h3,h4,p,span,div,i) { color: inherit; }

.pp-color-band {
    border: 1px solid var(--pp-tone-border);
    border-radius: 8px;
    background: linear-gradient(100deg, var(--pp-tone-a), var(--pp-tone-b), var(--pp-tone-c));
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
}

@media print {
    .pp-shell-main { background: #fff !important; }
    .pp-shell-header::before { display: none; }

    /* Universal print suppression for all floating widgets, dialogs, loaders, and non-printable overlays */
    .no-print,
    .hide-on-export,
    .pp-user-chat,
    .pp-ai-help,
    #pp-music-control,
    #pp-music-frame,
    .pp-role-guide-widget,
    #pp-page-loader-overlay,
    .pp-loader-backdrop,
    #pp-ai-api-loader,
    .pp-ai-api-loader,
    .swal2-container,
    [data-user-chat],
    [data-ai-help],
    [data-role-guide-widget] {
        display: none !important;
        visibility: hidden !important;
    }
}

/* =========================================================================
   UNIVERSAL HIGH-CONTRAST BUTTON & PALETTE ENHANCEMENTS
   Ensures text and background colors never blend together across the system.
   ========================================================================= */

/* 1. Rose Palette (used in Public Site Admin and various alert/action buttons) */
.bg-rose-50 { background-color: #fff1f2 !important; }
.bg-rose-100 { background-color: #ffe4e6 !important; }
.bg-rose-200 { background-color: #fecdd3 !important; }
.bg-rose-500 { background-color: #f43f5e !important; }
.bg-rose-600 { background-color: #e11d48 !important; }
.bg-rose-700 { background-color: #be123c !important; }
.bg-rose-800 { background-color: #9f1239 !important; }
.bg-rose-900 { background-color: #881337 !important; }
.hover\:bg-rose-600:hover { background-color: #e11d48 !important; }
.hover\:bg-rose-700:hover { background-color: #be123c !important; }
.hover\:bg-rose-800:hover { background-color: #9f1239 !important; }
.hover\:bg-rose-900:hover { background-color: #881337 !important; }
.text-rose-500 { color: #f43f5e !important; }
.text-rose-600 { color: #e11d48 !important; }
.text-rose-700 { color: #be123c !important; }
.text-rose-800 { color: #9f1239 !important; }
.text-rose-900 { color: #881337 !important; }
.border-rose-200 { border-color: #fecdd3 !important; }
.border-rose-300 { border-color: #fda4af !important; }
.border-rose-400 { border-color: #fb7185 !important; }
.bg-rose-50\/60 { background-color: rgba(255, 241, 242, 0.6) !important; }
.bg-rose-50\/80 { background-color: rgba(255, 241, 242, 0.8) !important; }
.border-rose-200\/80 { border-color: rgba(254, 205, 211, 0.8) !important; }

/* 2. Violet Palette */
.bg-violet-600 { background-color: #7c3aed !important; }
.hover\:bg-violet-700:hover { background-color: #6d28d9 !important; }

/* 3. Arbitrary Hex Colors Used in Buttons & Badges Across Modules */
.bg-\[\#5f48df\] { background-color: #5f48df !important; }
.hover\:bg-\[\#4c37b8\]:hover { background-color: #4c37b8 !important; }
.hover\:bg-\[\#4f3bd0\]:hover { background-color: #4f3bd0 !important; }
.bg-\[\#725af0\] { background-color: #725af0 !important; }
.bg-\[\#4c37b8\] { background-color: #4c37b8 !important; }

.bg-\[\#8b5cf6\] { background-color: #8b5cf6 !important; }
.hover\:bg-\[\#7c3aed\]:hover { background-color: #7c3aed !important; }

/* #B894FF is pale lavender (contrast only 2.2:1 with white text) - map to vibrant purple #7c3aed for crisp contrast */
.bg-\[\#B894FF\] { background-color: #7c3aed !important; }
.hover\:bg-\[\#a67cff\]:hover { background-color: #6d28d9 !important; }

.bg-\[\#ef4444\] { background-color: #ef4444 !important; }
.hover\:bg-\[\#dc2626\]:hover { background-color: #dc2626 !important; }

.bg-\[\#10b981\] { background-color: #10b981 !important; }
.hover\:bg-\[\#059669\]:hover { background-color: #059669 !important; }

.bg-\[\#118b50\] { background-color: #118b50 !important; }
.hover\:bg-\[\#0e7442\]:hover { background-color: #0e7442 !important; }

.bg-\[\#059669\] { background-color: #059669 !important; }
.hover\:bg-\[\#047857\]:hover { background-color: #047857 !important; }

.bg-\[\#a855f7\] { background-color: #a855f7 !important; }
.hover\:bg-\[\#9333ea\]:hover { background-color: #9333ea !important; }

.bg-\[\#0284c7\] { background-color: #0284c7 !important; }
.bg-\[\#0ea5e9\] { background-color: #0ea5e9 !important; }
.bg-\[\#06c755\] { background-color: #06c755 !important; }
.hover\:bg-\[\#05b64e\]:hover { background-color: #05b64e !important; }

/* 4. White Alpha Overlays */
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.15) !important; }
.bg-white\/15 { background-color: rgba(255, 255, 255, 0.20) !important; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.25) !important; }
.bg-white\/25 { background-color: rgba(255, 255, 255, 0.30) !important; }
.hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.25) !important; }
.hover\:bg-white\/25:hover { background-color: rgba(255, 255, 255, 0.30) !important; }

/* 5. Contrast Enhancement for Amber/Yellow Buttons */
button.bg-amber-500.text-white,
a.bg-amber-500.text-white,
input[type="submit"].bg-amber-500.text-white,
input[type="button"].bg-amber-500.text-white {
    background-color: #d97706 !important; /* amber-600: strong contrast with white text */
    color: #ffffff !important;
}
button.bg-amber-500.text-white:hover,
a.bg-amber-500.text-white:hover,
input[type="submit"].bg-amber-500.text-white:hover,
input[type="button"].bg-amber-500.text-white:hover {
    background-color: #b45309 !important; /* amber-700 */
    color: #ffffff !important;
}

/* 6. Standard Bootstrap/General Button Classes Contrast Guarantee */
.btn-warning {
    background-color: #f59e0b !important;
    border-color: #d97706 !important;
    color: #0f172a !important; /* Dark text on bright yellow prevents blending */
}
.btn-warning:hover {
    background-color: #d97706 !important;
    color: #ffffff !important;
}
.btn-secondary {
    background-color: #64748b !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}
.btn-secondary:hover {
    background-color: #475569 !important;
    color: #ffffff !important;
}
.btn-success {
    background-color: #10b981 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}
.btn-success:hover {
    background-color: #059669 !important;
    color: #ffffff !important;
}
.btn-danger {
    background-color: #ef4444 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}
.btn-danger:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}
.btn-light {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}
.btn-light:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* 7. Universal Safety Fallback for All Action Buttons */
button[type="submit"].text-white:not([class*="bg-"]):not([style*="background"]),
input[type="submit"].text-white:not([class*="bg-"]):not([style*="background"]) {
    background-color: #2563eb !important;
    color: #ffffff !important;
}