/* Global lively skin shared by role layouts and legacy wrappers */
.vibrant-shell {
    position: relative;
    isolation: isolate;
    overscroll-behavior-y: auto;
    background:
        radial-gradient(120% 90% at 12% 6%, rgba(0, 225, 255, 0.22) 0%, transparent 42%),
        radial-gradient(120% 95% at 88% 8%, rgba(176, 70, 255, 0.22) 0%, transparent 44%),
        radial-gradient(100% 86% at 52% 12%, rgba(255, 90, 190, 0.16) 0%, transparent 45%),
        radial-gradient(130% 92% at 50% 100%, rgba(35, 128, 255, 0.2) 0%, transparent 48%),
        linear-gradient(145deg, #070c1f 0%, #0d1330 52%, #1a1435 100%) !important;
    background-size: 120% 120%, 122% 122%, 125% 125%, 130% 130%, 100% 100%;
    animation: ambientBaseWave 10s ease-in-out infinite alternate;
}

.vibrant-shell > * {
    position: relative;
    z-index: 1;
}

/* Keep ambient layers visible behind content with deterministic stacking.
   Must also re-assert position:fixed and inset:0 because the generic
   .vibrant-shell > * { position: relative } rule above has equal specificity
   with .site-global-orbs / .site-bg-shapes but vibrant-ui.css loads last,
   so without these overrides those divs would fall into normal flow and
   cause a secondary document scrollbar. */
.vibrant-shell > .site-global-orbs {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
}

.vibrant-shell > .site-bg-shapes {
    display: none !important;
}

.vibrant-shell > #main-content {
    z-index: 3;
}

.vibrant-shell::before {
    content: "";
    position: fixed;
    inset: -22vh -18vw;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(42rem 28rem at 10% 14%, rgba(0, 255, 231, 0.3), transparent 70%),
        radial-gradient(40rem 30rem at 88% 15%, rgba(170, 88, 255, 0.34), transparent 72%),
        radial-gradient(38rem 28rem at 50% 96%, rgba(45, 165, 255, 0.3), transparent 72%),
        radial-gradient(36rem 24rem at 68% 62%, rgba(255, 80, 176, 0.24), transparent 72%),
        radial-gradient(30rem 24rem at 30% 80%, rgba(255, 160, 55, 0.2), transparent 74%);
    background-size: 140% 140%;
    background-position: 0% 0%;
    filter: blur(7px) saturate(128%);
    transform-origin: 50% 50%;
    opacity: 0.95;
    mix-blend-mode: screen;
    animation: ambientLayerDriftA 9s ease-in-out infinite alternate, ambientLayerPulseA 4.8s ease-in-out infinite;
    will-change: transform;
}

.vibrant-shell::after {
    content: "";
    position: fixed;
    inset: -18vh -14vw;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(35rem 24rem at 8% 12%, rgba(0, 248, 228, 0.28), transparent 70%),
        radial-gradient(36rem 24rem at 92% 9%, rgba(127, 66, 255, 0.3), transparent 72%),
        radial-gradient(34rem 24rem at 52% 100%, rgba(50, 140, 255, 0.28), transparent 70%),
        radial-gradient(30rem 20rem at 80% 80%, rgba(255, 120, 45, 0.22), transparent 72%),
        radial-gradient(28rem 18rem at 18% 50%, rgba(120, 255, 110, 0.16), transparent 74%);
    background-size: 135% 135%;
    background-position: 100% 100%;
    filter: blur(5px) saturate(126%);
    transform-origin: 50% 50%;
    opacity: 0.92;
    mix-blend-mode: screen;
    animation: ambientLayerDriftB 11s ease-in-out infinite alternate, ambientLayerPulseB 5.6s ease-in-out infinite;
    will-change: transform;
}

@keyframes ambientBaseWave {
    0% {
        background-position: 10% 5%, 90% 8%, 52% 14%, 50% 98%, 50% 50%;
    }
    100% {
        background-position: 18% 12%, 82% 15%, 48% 4%, 46% 88%, 50% 50%;
    }
}

@keyframes ambientLayerPulseA {
    0%, 100% {
        opacity: 0.88;
    }
    50% {
        opacity: 1;
    }
}

@keyframes ambientLayerPulseB {
    0%, 100% {
        opacity: 0.78;
    }
    50% {
        opacity: 0.98;
    }
}

@keyframes ambientLayerDriftA {
    0% {
        transform: translate3d(-4%, -2%, 0) scale(1.08) rotate(0deg);
        background-position: 0% 0%;
    }
    25% {
        transform: translate3d(5%, 3%, 0) scale(1.13) rotate(1.2deg);
        background-position: 35% 20%;
    }
    50% {
        transform: translate3d(-4%, 4%, 0) scale(1.1) rotate(-1.2deg);
        background-position: 70% 45%;
    }
    75% {
        transform: translate3d(4%, -4%, 0) scale(1.15) rotate(0.9deg);
        background-position: 45% 80%;
    }
    100% {
        transform: translate3d(-3%, 3%, 0) scale(1.1) rotate(-0.7deg);
        background-position: 100% 100%;
    }
}

@keyframes ambientLayerDriftB {
    0% {
        transform: translate3d(3%, -3%, 0) scale(1.08) rotate(0deg);
        background-position: 100% 100%;
    }
    20% {
        transform: translate3d(-5%, 4%, 0) scale(1.13) rotate(-1deg);
        background-position: 80% 70%;
    }
    40% {
        transform: translate3d(4%, -3%, 0) scale(1.1) rotate(1deg);
        background-position: 55% 45%;
    }
    60% {
        transform: translate3d(-4%, -4%, 0) scale(1.14) rotate(-0.9deg);
        background-position: 30% 25%;
    }
    80% {
        transform: translate3d(4.5%, 3.5%, 0) scale(1.12) rotate(0.8deg);
        background-position: 15% 10%;
    }
    100% {
        transform: translate3d(-3.5%, 3%, 0) scale(1.1) rotate(-0.6deg);
        background-position: 0% 0%;
    }
}

.vibrant-shell .glass-card,
.vibrant-shell .table-card,
.vibrant-shell .user-list-card,
.vibrant-shell .stat-card,
.vibrant-shell .card,
.vibrant-shell .modal-content,
.vibrant-shell .app-content .card,
.vibrant-shell .panel {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.vibrant-shell .glass-card:hover,
.vibrant-shell .table-card:hover,
.vibrant-shell .user-list-card:hover,
.vibrant-shell .stat-card:hover,
.vibrant-shell .card:hover,
.vibrant-shell .app-content .card:hover {
    border-color: rgba(0, 255, 231, 0.3);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.vibrant-shell .btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vibrant-shell .btn:hover {
    transform: translateY(-1px);
}

.vibrant-shell .btn-primary,
.vibrant-shell .btn-success,
.vibrant-shell .btn-info {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.vibrant-shell .table,
.vibrant-shell .table th,
.vibrant-shell .table td {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.vibrant-shell .table {
    --bs-table-bg: transparent;
    --bs-table-color: #e8ecf8;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-striped-color: #e8ecf8;
    --bs-table-active-bg: rgba(0, 255, 231, 0.08);
    --bs-table-active-color: #ffffff;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
    --bs-table-hover-color: #ffffff;
    color: #e8ecf8;
    background: transparent;
}

.vibrant-shell .table-responsive,
.vibrant-shell .table-responsive .table,
.vibrant-shell .table tbody,
.vibrant-shell .table tbody tr,
.vibrant-shell .table tbody td,
.vibrant-shell .table tbody th,
.vibrant-shell .dataTables_wrapper .dataTable,
.vibrant-shell .dataTables_wrapper .dataTable tbody,
.vibrant-shell .dataTables_wrapper .dataTable tbody tr,
.vibrant-shell .dataTables_wrapper .dataTable tbody td,
.vibrant-shell .dataTables_wrapper .dataTable tbody th {
    background-color: transparent !important;
}

.vibrant-shell .table > :not(caption) > * > * {
    background-color: transparent !important;
    box-shadow: none !important;
    color: #e8ecf8;
}

.vibrant-shell .table .text-dark,
.vibrant-shell .table .text-black,
.vibrant-shell .dataTables_wrapper .dataTable .text-dark,
.vibrant-shell .dataTables_wrapper .dataTable .text-black,
.vibrant-shell .table td[style*="color: #000"],
.vibrant-shell .table td[style*="color:#000"],
.vibrant-shell .table td[style*="color: black"],
.vibrant-shell .table td[style*="color:black"] {
    color: #e8ecf8 !important;
}

.vibrant-shell .table a:not(.btn),
.vibrant-shell .dataTables_wrapper .dataTable a:not(.btn) {
    color: #7af7ff;
}

.vibrant-shell .table a:not(.btn):hover,
.vibrant-shell .dataTables_wrapper .dataTable a:not(.btn):hover {
    color: #00ffe7;
}

.vibrant-shell .table thead th,
.vibrant-shell .table thead,
.vibrant-shell .dataTables_wrapper table thead th {
    background: linear-gradient(90deg, rgba(0, 255, 231, 0.12), rgba(127, 66, 167, 0.12));
}

.vibrant-shell .table tbody tr,
.vibrant-shell .dataTables_wrapper table tbody tr {
    transition: background-color 0.2s ease;
}

.vibrant-shell .table tbody tr:hover,
.vibrant-shell .dataTables_wrapper table tbody tr:hover {
    background: rgba(255, 255, 255, 0.06);
}

.vibrant-shell .form-control,
.vibrant-shell .form-select,
.vibrant-shell .select2-container--default .select2-selection--single,
.vibrant-shell .select2-container--default .select2-selection--multiple {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.vibrant-shell .form-control:focus,
.vibrant-shell .form-select:focus,
.vibrant-shell .select2-container--default.select2-container--focus .select2-selection--multiple,
.vibrant-shell .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(0, 255, 231, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 231, 0.12) !important;
}

.vibrant-shell .form-control:disabled,
.vibrant-shell .form-control[readonly],
.vibrant-shell .form-select:disabled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(224, 235, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(224, 235, 255, 0.92);
}

.vibrant-shell .form-control:disabled::placeholder,
.vibrant-shell .form-control[readonly]::placeholder {
    color: rgba(210, 220, 240, 0.62) !important;
}

.vibrant-shell .alert {
    border-radius: 12px;
    border-width: 1px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.vibrant-shell .navbar-custom,
.vibrant-shell .topbar,
.vibrant-shell .app-header {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 25px rgba(0, 0, 0, 0.2);
}

.vibrant-shell .content-area > *,
.vibrant-shell .container-fluid > *,
.vibrant-shell .app-content > * {
    animation: vividRise 0.32s ease;
}

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

/* ── Offcanvas dark theme ── */
.vibrant-shell .offcanvas,
.vibrant-shell .offcanvas-end {
    background: linear-gradient(160deg, #0d1b2a, #150d28) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e8ecf8 !important;
}

.vibrant-shell .offcanvas-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.vibrant-shell .offcanvas-title {
    color: #f0f6ff !important;
    font-weight: 700;
}

.vibrant-shell .offcanvas .btn-close,
.vibrant-shell .offcanvas-header .btn-close {
    filter: invert(1) brightness(2);
}

.vibrant-shell .offcanvas .form-label {
    color: #c8d8f0 !important;
}

.vibrant-shell .offcanvas .form-control,
.vibrant-shell .offcanvas .form-select {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #e8ecf8 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.vibrant-shell .offcanvas .form-control::placeholder {
    color: rgba(200, 216, 240, 0.4) !important;
}

.vibrant-shell .offcanvas .form-control:focus,
.vibrant-shell .offcanvas .form-select:focus {
    border-color: rgba(0, 255, 231, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 231, 0.12) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.vibrant-shell .offcanvas small.text-muted {
    color: rgba(180, 200, 230, 0.55) !important;
}

/* ── Modal dark theme ── */
.vibrant-shell .modal-content {
    background: linear-gradient(160deg, #0d1b2a, #150d28) !important;
    color: #e8ecf8 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.vibrant-shell .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.vibrant-shell .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.vibrant-shell .modal-title {
    color: #f0f6ff !important;
}

.vibrant-shell .modal .btn-close {
    filter: invert(1) brightness(2);
}

.vibrant-shell .modal .form-label {
    color: #c8d8f0 !important;
}

.vibrant-shell .modal .form-control,
.vibrant-shell .modal .form-select {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #e8ecf8 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.vibrant-shell .modal .form-control::placeholder {
    color: rgba(200, 216, 240, 0.4) !important;
}

.vibrant-shell .modal .form-control:focus {
    border-color: rgba(0, 255, 231, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 231, 0.12) !important;
}

.vibrant-shell .modal small.text-muted {
    color: rgba(180, 200, 230, 0.55) !important;
}

.corporate-footer {
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(90deg, rgba(12, 18, 35, 0.92), rgba(30, 18, 49, 0.9));
    backdrop-filter: blur(10px);
}

.corporate-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 1rem;
    align-items: center;
}

.corporate-footer__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.corporate-footer__logo {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(0, 255, 231, 0.35));
}

.portal-logo-invert {
    filter: invert(1) drop-shadow(0 0 6px rgba(0, 255, 231, 0.35));
}

.corporate-footer__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #e8ecf8;
}

.corporate-footer__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    color: rgba(232, 236, 248, 0.72);
}

.corporate-footer__contact,
.corporate-footer__rights {
    margin: 0;
    text-align: center;
    color: rgba(232, 236, 248, 0.84);
    font-size: 0.78rem;
}

.corporate-footer__contact p,
.corporate-footer__rights p {
    margin: 0.12rem 0;
}

.corporate-footer__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 255, 231, 0.9);
}

.corporate-footer a {
    color: #d9f8ff;
    text-decoration: none;
}

.corporate-footer a:hover {
    color: #00ffe7;
}

.corporate-footer__sep {
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0.4rem;
}

@media (max-width: 992px) {
    .corporate-footer__inner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1rem;
    }

    .corporate-footer__brand {
        justify-content: center;
    }
}

/* ── Website public footer (3-column design) ─────────────────────────────── */
.site-footer {
    background: #09101e;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #d8e4f0;
    padding: 0.55rem 0 0 !important;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.site-footer__columns {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 0.5rem 1.6rem;
    gap: 0.55rem;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.22rem;
}

.site-footer__col--grievance {
    justify-content: center;
}

.site-footer__col + .site-footer__col {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: 1.5rem;
}

.site-footer__col--brand {
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.site-footer__logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 255, 231, 0.35));
}

.site-footer__brand-name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #ffffff;
}

.site-footer__brand-tagline {
    margin: 0;
    font-size: 1.05rem;
    color: rgba(216, 228, 240, 0.65);
    font-style: italic;
}

.site-footer__heading {
    margin: 0 0 0.18rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(0, 255, 231, 0.85);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
}

.site-footer__info {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 400;
    color: rgba(216, 228, 240, 0.8);
    line-height: 1.4;
    text-align: center;
}

.site-footer__col--grievance .site-footer__info {
    margin-bottom: 0;
}

.site-footer__info a {
    color: rgba(216, 228, 240, 0.8);
    text-decoration: none;
    transition: color 0.2s;
    display: inline;
    line-height: 1.24;
    padding: 0;
}

.site-footer__info a:hover {
    color: #00ffe7;
}

.site-footer__bottom {
    text-align: center;
    padding: 0.25rem 1.6rem 0.35rem;
}

.site-footer__bottom p {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.24;
    color: rgba(216, 228, 240, 0.6);
    text-align: center;
}

@media (max-width: 768px) {
    .site-footer__columns {
        grid-template-columns: 1fr;
        padding: 1.2rem 1.2rem;
        gap: 1rem;
    }

    .site-footer__col + .site-footer__col {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-left: 0;
        padding-top: 0.85rem;
    }

    .site-footer__heading {
        font-size: 0.72rem;
    }

    .site-footer__info {
        font-size: 0.88rem;
    }

    .site-footer__bottom p {
        font-size: 0.82rem;
    }
}