/* ===================================================================
   NEMSU OSWD Complaint System — Blue · White · Gold 
   =================================================================== */

:root {
    --nemsu-blue-900: #052654;
    --nemsu-blue-800: #0a3d7a;
    --nemsu-blue-700: #0d4f9f;
    --nemsu-blue-600: #1565c0;
    --nemsu-blue-100: #e8f1fb;
    --nemsu-blue-50: #f4f8fd;

    --nemsu-gold-600: #b8860b;
    --nemsu-gold-500: #c9a227;
    --nemsu-gold-400: #d4af37;
    --nemsu-gold-300: #e8c547;
    --nemsu-gold-100: #faf3dc;

    --nemsu-white: #ffffff;
    --nemsu-surface: #f7f9fc;
    --nemsu-border: rgba(10, 61, 122, 0.12);
    --nemsu-text: #1a2b42;
    --nemsu-text-muted: #5c6b80;

    --nemsu-radius: 14px;
    --nemsu-radius-sm: 10px;
    --nemsu-shadow: 0 10px 30px rgba(5, 38, 84, 0.08);
    --nemsu-shadow-hover: 0 16px 40px rgba(5, 38, 84, 0.14);

    --nemsu-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --nemsu-duration: 0.22s;
    --nemsu-focus-ring: 0 0 0 3px rgba(201, 162, 39, 0.45);
    --nemsu-on-primary: #ffffff;
    --nemsu-link: #0a3d7a;
    --nemsu-link-hover: #052654;

    --bs-primary: var(--nemsu-blue-700);
    --bs-primary-rgb: 13, 79, 159;
    --bs-link-color: var(--nemsu-blue-700);
    --bs-link-hover-color: var(--nemsu-blue-900);
    --bs-body-color: var(--nemsu-text);
    --bs-border-color: var(--nemsu-border);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--nemsu-text);
    background: var(--nemsu-surface);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ----- App shell (authenticated pages) ----- */
body.app-body {
    background:
        radial-gradient(ellipse 120% 80% at 100% -20%, rgba(201, 162, 39, 0.08), transparent 50%),
        radial-gradient(ellipse 80% 60% at -10% 100%, rgba(13, 79, 159, 0.06), transparent 45%),
        var(--nemsu-surface);
    min-height: 100vh;
}

body.app-body.is-ready main {
    animation: fadeSlideIn 0.45s var(--nemsu-ease) both;
}

/* ----- Auth pages ----- */
body.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(135deg, var(--nemsu-blue-900) 0%, var(--nemsu-blue-700) 45%, var(--nemsu-blue-600) 100%);
    position: relative;
    overflow-x: hidden;
}

body.auth-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.15), transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(255, 255, 255, 0.06), transparent 35%);
    pointer-events: none;
}

.auth-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 2rem 1rem;
}

.auth-card {
    border: none;
    border-radius: var(--nemsu-radius);
    box-shadow: var(--nemsu-shadow-hover);
    overflow: hidden;
    transition: opacity 0.5s var(--nemsu-ease), transform 0.5s var(--nemsu-ease);
}

@media (prefers-reduced-motion: no-preference) {
    body.auth-body.is-ready .auth-card {
        animation: authCardIn 0.55s var(--nemsu-ease) both;
    }
}

.auth-card .auth-card-accent {
    height: 5px;
    background: linear-gradient(90deg, var(--nemsu-gold-500), var(--nemsu-gold-300), var(--nemsu-gold-500));
    background-size: 200% 100%;
    animation: goldShimmer 4s ease-in-out infinite;
}

.auth-brand {
    text-align: center;
    margin-bottom: 1.25rem;
}

.auth-brand-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 3px solid var(--nemsu-gold-500);
    box-shadow: 0 8px 20px rgba(5, 38, 84, 0.25);
    overflow: hidden;
    padding: 2px;
}

.auth-brand-icon .nemsu-logo--auth {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.nemsu-logo--nav {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--nemsu-gold-400);
    background: #fff;
    flex-shrink: 0;
}

.auth-brand h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--nemsu-blue-900);
    margin: 0;
}

.auth-brand p {
    font-size: 0.875rem;
    color: var(--nemsu-text-muted);
    margin: 0.25rem 0 0;
}

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

@keyframes goldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ----- Navbar ----- */
.navbar.nemsu-navbar {
    background: linear-gradient(90deg, var(--nemsu-blue-900), var(--nemsu-blue-800)) !important;
    border-bottom: 3px solid var(--nemsu-gold-500);
    box-shadow: 0 4px 20px rgba(5, 38, 84, 0.2);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.navbar.nemsu-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: opacity var(--nemsu-duration) var(--nemsu-ease);
}

.navbar.nemsu-navbar .navbar-brand:hover {
    opacity: 0.92;
}

.navbar.nemsu-navbar .navbar-brand span {
    line-height: 1.2;
}

.navbar.nemsu-navbar .nav-link {
    transition: color var(--nemsu-duration) var(--nemsu-ease);
}

.navbar.nemsu-navbar .dropdown-menu {
    border: 1px solid var(--nemsu-border);
    border-radius: var(--nemsu-radius-sm);
    box-shadow: var(--nemsu-shadow);
    animation: dropdownIn 0.2s var(--nemsu-ease);
}

.navbar.nemsu-navbar .dropdown-item {
    transition: background-color var(--nemsu-duration) var(--nemsu-ease),
                padding-left var(--nemsu-duration) var(--nemsu-ease);
}

.navbar.nemsu-navbar .dropdown-item:hover {
    background-color: var(--nemsu-blue-50);
    padding-left: 1.35rem;
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----- Sidebar ----- */
.nemsu-sidebar,
.sidebar.nemsu-sidebar {
    padding: 0;
    background: var(--nemsu-white) !important;
    border-right: 1px solid var(--nemsu-border);
    overflow-y: auto;
    overflow-x: hidden;
}

.nemsu-sidebar .offcanvas-body,
.nemsu-sidebar__body {
    display: block;
    padding: 0.75rem 0.65rem 1.25rem;
    align-items: stretch;
    overflow-x: hidden;
}

.nemsu-sidebar .sidebar-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--nemsu-text-muted);
    padding: 0.35rem 0.85rem 0.5rem;
    margin: 0;
}

.nemsu-sidebar__section-label {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--nemsu-border);
}

.nemsu-sidebar__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.2rem;
    padding: 0;
    margin: 0;
}

.nemsu-sidebar .nav-item {
    width: 100%;
}

.nemsu-sidebar .nav-link {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--nemsu-text);
    padding: 0.65rem 0.85rem;
    margin: 0;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    width: 100%;
    text-decoration: none;
    transition: background-color var(--nemsu-duration) var(--nemsu-ease),
                color var(--nemsu-duration) var(--nemsu-ease),
                box-shadow var(--nemsu-duration) var(--nemsu-ease);
}

.nemsu-sidebar .nav-link i {
    flex-shrink: 0;
    width: 1.25rem;
    font-size: 1.05rem;
    line-height: 1;
    text-align: center;
    color: var(--nemsu-blue-600);
}

.nemsu-sidebar__text {
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nemsu-sidebar .nav-link:hover,
.nemsu-sidebar .nav-link:focus-visible {
    background: var(--nemsu-blue-50);
    color: var(--nemsu-blue-800);
}

/* Active link uses the same navy gradient as the top navbar, with a thin
   gold edge that echoes the navbar's gold underline. */
.nemsu-sidebar .nav-link.active {
    color: #ffffff;
    background: linear-gradient(90deg, var(--nemsu-blue-900), var(--nemsu-blue-800));
    box-shadow: inset 3px 0 0 var(--nemsu-gold-500), 0 2px 6px rgba(5, 38, 84, 0.25);
}

.nemsu-sidebar .nav-link.active i {
    color: var(--nemsu-gold-300);
}

@media (min-width: 768px) {
    .nemsu-sidebar-col {
        flex: 0 0 240px;
        width: 240px;
        max-width: 240px;
    }

    /* Fill the space beside the fixed-width sidebar instead of a % column,
       which overflows the row and wraps below the sidebar. */
    main.app-main {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
    }
}

/* At least a full screen tall (the 76px top padding sits under the fixed
   navbar). If the page were shorter, the sticky sidebar (76px from the top,
   100vh - 76px tall) would not fit and the browser would push it up behind
   the navbar, hiding its first links on short pages. */
main.app-main {
    padding-top: 76px;
    min-height: 100vh;
}

/* ----- Page header ----- */
.nemsu-page-header {
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--nemsu-border);
    animation: fadeSlideIn 0.45s var(--nemsu-ease) both;
}

.nemsu-page-header h1 {
    font-weight: 700;
    color: var(--nemsu-blue-900);
    letter-spacing: -0.02em;
}

.nemsu-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    background: var(--nemsu-white);
    border: 1px solid var(--nemsu-border);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--nemsu-text-muted);
    box-shadow: 0 2px 8px rgba(5, 38, 84, 0.04);
}

.nemsu-user-chip strong {
    color: var(--nemsu-blue-800);
}

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

/* ----- Callouts & alerts ----- */
.nemsu-callout {
    border-left: 4px solid var(--nemsu-gold-500);
    background: linear-gradient(90deg, var(--nemsu-gold-100), var(--nemsu-white));
    border-radius: var(--nemsu-radius-sm);
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    animation: fadeSlideIn 0.5s var(--nemsu-ease) 0.05s both;
}

.alert {
    border: none;
    border-radius: var(--nemsu-radius-sm);
    box-shadow: 0 4px 12px rgba(5, 38, 84, 0.06);
    animation: fadeSlideIn 0.35s var(--nemsu-ease);
}

.alert-info {
    background: var(--nemsu-blue-50);
    color: var(--nemsu-blue-900);
    border-left: 4px solid var(--nemsu-blue-600);
}

.alert-success {
    border-left: 4px solid #198754;
}

.alert-danger {
    border-left: 4px solid #dc3545;
}

/* ----- Cards ----- */
.card {
    border: 1px solid var(--nemsu-border);
    border-radius: var(--nemsu-radius);
    box-shadow: var(--nemsu-shadow);
    margin-bottom: 1.25rem;
    background: var(--nemsu-white);
    transition: box-shadow var(--nemsu-duration) var(--nemsu-ease),
                transform var(--nemsu-duration) var(--nemsu-ease);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--nemsu-shadow-hover);
}

.card-header {
    background: linear-gradient(180deg, var(--nemsu-white), var(--nemsu-blue-50));
    border-bottom: 1px solid var(--nemsu-border);
    font-weight: 600;
    color: var(--nemsu-blue-900);
    padding: 0.9rem 1.15rem;
}

.card-header.bg-warning {
    background: linear-gradient(180deg, var(--nemsu-gold-100), #fff8e7) !important;
    color: var(--nemsu-blue-900);
}

/* Stat cards */
.nemsu-stat-grid .nemsu-stat-card {
    border: none;
    color: var(--nemsu-white);
    position: relative;
    overflow: hidden;
    animation: statIn 0.5s var(--nemsu-ease) both;
}

.nemsu-stat-grid .col-md-3:nth-child(1) .nemsu-stat-card { animation-delay: 0.05s; }
.nemsu-stat-grid .col-md-3:nth-child(2) .nemsu-stat-card { animation-delay: 0.1s; }
.nemsu-stat-grid .col-md-3:nth-child(3) .nemsu-stat-card { animation-delay: 0.15s; }
.nemsu-stat-grid .col-md-3:nth-child(4) .nemsu-stat-card { animation-delay: 0.2s; }

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

.nemsu-stat-card::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.nemsu-stat-card .stat-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.25rem;
    opacity: 0.25;
}

.nemsu-stat-card .card-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.92;
    margin-bottom: 0.35rem;
}

.nemsu-stat-card h2 {
    font-weight: 800;
    font-size: 2rem;
    margin: 0;
}

.nemsu-stat-card--blue {
    background: linear-gradient(135deg, var(--nemsu-blue-900), var(--nemsu-blue-600));
}

.nemsu-stat-card--gold {
    background: linear-gradient(135deg, #8b6914, var(--nemsu-gold-500));
}

.nemsu-stat-card--sky {
    background: linear-gradient(135deg, #0d5a8a, var(--nemsu-blue-600));
}

.nemsu-stat-card--success {
    background: linear-gradient(135deg, #0d6e4a, #20a070);
}

/* ----- Tables ----- */
.table {
    --bs-table-hover-bg: var(--nemsu-blue-50);
}

.table thead th {
    background: var(--nemsu-blue-50);
    color: var(--nemsu-blue-900);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--nemsu-gold-400);
    padding: 0.85rem 0.75rem;
}

.table tbody tr {
    transition: transform var(--nemsu-duration) var(--nemsu-ease);
}

.table-hover tbody tr:hover {
    transform: scale(1.002);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(244, 248, 253, 0.6);
}

/* ----- Buttons ----- */
.btn {
    border-radius: var(--nemsu-radius-sm);
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    transition: transform var(--nemsu-duration) var(--nemsu-ease),
                box-shadow var(--nemsu-duration) var(--nemsu-ease),
                background-color var(--nemsu-duration) var(--nemsu-ease);
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: linear-gradient(180deg, var(--nemsu-blue-700), var(--nemsu-blue-800));
    border: 1px solid var(--nemsu-blue-900);
    box-shadow: 0 4px 12px rgba(13, 79, 159, 0.3);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(180deg, var(--nemsu-blue-600), var(--nemsu-blue-800));
    border-color: var(--nemsu-gold-500);
    box-shadow: 0 6px 18px rgba(13, 79, 159, 0.35);
}

.btn-warning {
    background: linear-gradient(180deg, var(--nemsu-gold-400), var(--nemsu-gold-600));
    border-color: #9a7209;
    color: var(--nemsu-blue-900);
}

.btn-warning:hover {
    background: linear-gradient(180deg, var(--nemsu-gold-300), var(--nemsu-gold-500));
    color: var(--nemsu-blue-900);
}

.btn-secondary {
    background: var(--nemsu-white);
    border: 1px solid var(--nemsu-border);
    color: var(--nemsu-text);
}

.btn-secondary:hover {
    background: var(--nemsu-blue-50);
    border-color: var(--nemsu-blue-600);
    color: var(--nemsu-blue-900);
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-outline-primary {
    border-color: var(--nemsu-blue-600);
    color: var(--nemsu-blue-700);
}

.btn-outline-primary:hover {
    background: var(--nemsu-blue-700);
    border-color: var(--nemsu-blue-700);
}

/* ----- Forms ----- */
.form-control,
.form-select {
    border-radius: var(--nemsu-radius-sm);
    border: 1px solid var(--nemsu-border);
    padding: 0.55rem 0.85rem;
    transition: border-color var(--nemsu-duration) var(--nemsu-ease),
                box-shadow var(--nemsu-duration) var(--nemsu-ease);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--nemsu-blue-600);
    box-shadow: 0 0 0 0.2rem rgba(13, 79, 159, 0.15);
}

.form-label {
    font-weight: 600;
    color: var(--nemsu-blue-900);
    font-size: 0.875rem;
}

.input-group-text {
    background: var(--nemsu-blue-50);
    border-color: var(--nemsu-border);
    color: var(--nemsu-blue-700);
}

/* ----- Badges ----- */
.badge {
    padding: 0.4em 0.75em;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.bg-primary {
    background: var(--nemsu-blue-700) !important;
}

.bg-info {
    background: var(--nemsu-blue-600) !important;
}

.bg-warning {
    background: var(--nemsu-gold-500) !important;
    color: var(--nemsu-blue-900) !important;
}

.bg-secondary {
    background: #6c7a8d !important;
}

/* ----- Timeline (complaint view) ----- */
.list-group-item {
    border-color: var(--nemsu-border);
    transition: background-color var(--nemsu-duration) var(--nemsu-ease);
}

.list-group-item:hover {
    background-color: var(--nemsu-blue-50);
}

/* ----- Footer strip (optional) ----- */
a {
    transition: color var(--nemsu-duration) var(--nemsu-ease);
}

.auth-body a {
    color: var(--nemsu-blue-700);
    font-weight: 600;
}

.auth-body a:hover {
    color: var(--nemsu-gold-600);
}

.table tbody td.text-center {
    padding: 2rem 1rem;
    color: var(--nemsu-text-muted);
}

/* ----- Complaint progress steps ----- */
.nemsu-progress-wrap {
    padding: 0.65rem 0.25rem 0.35rem;
}

.nemsu-progress-heading {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nemsu-text-muted);
    margin-bottom: 0.5rem;
}

.nemsu-progress {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.nemsu-progress-step {
    position: relative;
    flex: 1 1 0;
    min-width: 72px;
    text-align: center;
    padding: 0 0.35rem 0.5rem;
}

.nemsu-progress-marker {
    width: 28px;
    height: 28px;
    margin: 0 auto 0.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border: 2px solid var(--nemsu-border);
    background: var(--nemsu-white);
    color: var(--nemsu-text-muted);
    transition: background-color var(--nemsu-duration) var(--nemsu-ease),
        border-color var(--nemsu-duration) var(--nemsu-ease),
        color var(--nemsu-duration) var(--nemsu-ease);
}

.nemsu-progress-step--done .nemsu-progress-marker {
    background: var(--nemsu-blue-700);
    border-color: var(--nemsu-blue-700);
    color: var(--nemsu-white);
}

.nemsu-progress-step--current .nemsu-progress-marker {
    background: var(--nemsu-gold-400);
    border-color: var(--nemsu-gold-600);
    color: var(--nemsu-blue-900);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

.nemsu-progress-label {
    display: block;
    font-size: 0.65rem;
    line-height: 1.25;
    color: var(--nemsu-text-muted);
}

.nemsu-progress-step--done .nemsu-progress-label,
.nemsu-progress-step--current .nemsu-progress-label {
    color: var(--nemsu-blue-900);
    font-weight: 600;
}

.nemsu-progress-line {
    position: absolute;
    top: 14px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: var(--nemsu-border);
    z-index: 0;
}

.nemsu-progress-step--done .nemsu-progress-line {
    background: var(--nemsu-blue-600);
}

tr.nemsu-progress-row > td {
    background: var(--nemsu-blue-50) !important;
    border-top: none;
    padding-top: 0;
}

tr.nemsu-progress-row + tr td {
    border-top: none;
}

.nemsu-progress--compact .nemsu-progress-step {
    min-width: 64px;
}

.nemsu-progress-card {
    margin-bottom: 1.25rem;
}

/* ----- Notifications ----- */
.nemsu-nav-bell {
    font-size: 1.1rem;
}

.nemsu-notification-badge {
    position: absolute;
    top: 2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--nemsu-gold-400);
    color: var(--nemsu-blue-900);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--nemsu-blue-900);
}

.nemsu-notification-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.nemsu-notification-link:hover {
    color: var(--nemsu-blue-800);
}

.nemsu-notification-item {
    transition: background-color var(--nemsu-duration) var(--nemsu-ease);
}

.nemsu-notification-item--unread {
    background: var(--nemsu-blue-50);
    border-left: 4px solid var(--nemsu-gold-500);
}

.nemsu-notification-item:hover {
    background: var(--nemsu-gold-100);
}

.nemsu-footer-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--nemsu-text-muted);
    padding: 1.5rem 0 0.5rem;
}

/* ----- Responsive ----- */
@media (max-width: 767.98px) {
    main.app-main {
        padding-top: 76px;
    }

    .nemsu-user-chip {
        width: 100%;
        justify-content: center;
        margin-top: 0.75rem;
    }
}

/* ===================================================================
   Design system v2 — layout, auth split, a11y, dark mode
   =================================================================== */

.nemsu-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--nemsu-gold-500);
    color: #1a2b42;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

.nemsu-skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
    box-shadow: var(--nemsu-focus-ring);
}

:focus-visible {
    outline: none;
    box-shadow: var(--nemsu-focus-ring);
}

.nemsu-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.nemsu-badge i {
    font-size: 0.95em;
}

.auth-split {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .auth-split {
        grid-template-columns: minmax(280px, 42%) 1fr;
    }
}

.auth-panel-brand {
    display: none;
    background: linear-gradient(160deg, var(--nemsu-blue-900), var(--nemsu-blue-700));
    color: var(--nemsu-on-primary);
    padding: 2.5rem 2rem;
}

@media (min-width: 992px) {
    .auth-panel-brand {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.auth-panel-brand__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1rem 0 0.25rem;
}

.auth-panel-brand__campus {
    color: var(--nemsu-gold-300);
    font-weight: 600;
    margin-bottom: 1rem;
}

.auth-panel-brand__tagline {
    opacity: 0.92;
    max-width: 28rem;
}

.auth-panel-brand__list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.auth-panel-brand__list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.auth-panel-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--nemsu-surface);
}

.auth-panel-form__inner {
    width: 100%;
    max-width: 420px;
}

.auth-panel-form__inner--wide {
    max-width: 720px;
}

.auth-form-card {
    background: var(--nemsu-white);
    border: 1px solid var(--nemsu-border);
    border-radius: var(--nemsu-radius);
    box-shadow: var(--nemsu-shadow);
    padding: 1.75rem;
}

body.auth-body {
    display: block;
    background: var(--nemsu-surface);
}

.otp-input-group {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}

.otp-digit {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.65rem 0;
}

.nemsu-hero-card {
    background: linear-gradient(135deg, var(--nemsu-blue-50), var(--nemsu-white));
    border: 1px solid var(--nemsu-border);
    border-left: 4px solid var(--nemsu-gold-500);
    border-radius: var(--nemsu-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--nemsu-shadow);
}

.nemsu-complaint-card {
    border: 1px solid var(--nemsu-border);
    border-radius: var(--nemsu-radius-sm);
    padding: 1rem;
    background: var(--nemsu-white);
}

.nemsu-complaint-card--critical {
    border-color: rgba(220, 53, 69, 0.45);
    background: rgba(220, 53, 69, 0.04);
}

.nemsu-empty-state__icon {
    font-size: 2.5rem;
    color: var(--nemsu-blue-600);
    margin-bottom: 0.75rem;
}

.nemsu-table-wrap {
    max-height: 60vh;
    overflow: auto;
}

.nemsu-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--nemsu-white);
    box-shadow: inset 0 -1px 0 var(--nemsu-border);
}

.nemsu-panel .card-header {
    background: var(--nemsu-white);
    border-bottom: 1px solid var(--nemsu-border);
}

@media (min-width: 768px) {
    .offcanvas-md.nemsu-sidebar {
        position: sticky;
        top: 76px;
        height: calc(100vh - 76px);
        transform: none !important;
        visibility: visible !important;
        background: var(--nemsu-white);
        border-right: 1px solid var(--nemsu-border);
        box-shadow: none;
        width: 100%;
        max-width: 240px;
    }

    .offcanvas-md.nemsu-sidebar .offcanvas-header {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .nemsu-sidebar-col {
        flex: 0 0 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        overflow: visible;
    }

    .offcanvas.nemsu-sidebar {
        width: min(280px, 88vw);
    }

    .nemsu-sidebar .nav-link {
        padding: 0.75rem 1rem;
    }

    .nemsu-sidebar__text {
        white-space: normal;
    }
}

.nemsu-sidebar-toggle {
    text-decoration: none;
}

.btn-primary {
    --bs-btn-bg: var(--nemsu-blue-800);
    --bs-btn-border-color: var(--nemsu-blue-800);
    --bs-btn-hover-bg: var(--nemsu-blue-900);
    --bs-btn-hover-border-color: var(--nemsu-blue-900);
}

/* Wizard */
.nemsu-wizard-steps {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.nemsu-wizard-step-indicator {
    flex: 1;
    min-width: 120px;
    font-size: 0.8rem;
    color: var(--nemsu-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nemsu-wizard-step-indicator span {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--nemsu-border);
    font-weight: 700;
}

.nemsu-wizard-step-indicator.is-active span,
.nemsu-wizard-step-indicator.is-done span {
    background: var(--nemsu-blue-800);
    border-color: var(--nemsu-blue-800);
    color: #fff;
}

.nemsu-category-card {
    border: 2px solid var(--nemsu-border);
    border-radius: var(--nemsu-radius-sm);
    padding: 1rem;
    height: 100%;
    cursor: pointer;
    transition: border-color var(--nemsu-duration) var(--nemsu-ease), box-shadow var(--nemsu-duration) var(--nemsu-ease);
    background: var(--nemsu-white);
}

.nemsu-category-card:hover,
.nemsu-category-card.is-selected {
    border-color: var(--nemsu-gold-500);
    box-shadow: var(--nemsu-shadow);
}

.nemsu-category-card__icon {
    font-size: 1.5rem;
    color: var(--nemsu-blue-700);
    margin-bottom: 0.5rem;
    display: block;
}

.nemsu-file-drop {
    border: 2px dashed var(--nemsu-border);
    border-radius: var(--nemsu-radius-sm);
    padding: 1.25rem;
    text-align: center;
    background: var(--nemsu-blue-50);
}

.nemsu-file-drop.is-dragover {
    border-color: var(--nemsu-gold-500);
    background: var(--nemsu-gold-100);
}

.nemsu-review-list {
    margin: 0;
}

.nemsu-review-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--nemsu-border);
}

.nemsu-review-row dt {
    font-weight: 600;
    margin: 0;
}

.nemsu-review-row dd {
    margin: 0;
}

.nemsu-success-card__icon {
    font-size: 3rem;
    color: var(--bs-success);
    margin-bottom: 0.75rem;
}

/* View complaint */
.nemsu-sticky-panel {
    position: sticky;
    top: 88px;
}

.nemsu-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--nemsu-border);
}

.nemsu-timeline__item {
    position: relative;
    padding: 0 0 1.25rem 1.25rem;
}

.nemsu-timeline__marker {
    position: absolute;
    left: -0.55rem;
    top: 0;
    color: var(--nemsu-blue-700);
    font-size: 1.5rem;
    line-height: 1;
}

.nemsu-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 420px;
    overflow-y: auto;
}

.nemsu-chat-bubble {
    max-width: 92%;
    padding: 0.75rem 1rem;
    border-radius: var(--nemsu-radius-sm);
    border: 1px solid var(--nemsu-border);
    background: var(--nemsu-blue-50);
}

.nemsu-chat-bubble--mine {
    align-self: flex-end;
    background: var(--nemsu-gold-100);
    border-color: rgba(201, 162, 39, 0.35);
}

.nemsu-chat-bubble__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    align-items: center;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
}

.nemsu-chart-wrap {
    position: relative;
    min-height: 220px;
}

@media (max-width: 575.98px) {
    .nemsu-review-row {
        grid-template-columns: 1fr;
    }

    .nemsu-sticky-panel {
        position: static;
    }
}

/* ----- Stacked tables on phones -----
   Tables with .nemsu-table--stack turn each row into a labelled card below
   768px. Labels come from data-label, filled in by app.js from the header. */
@media (max-width: 767.98px) {
    .nemsu-table-wrap:has(.nemsu-table--stack) {
        max-height: none;
        overflow: visible;
    }

    .nemsu-table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .nemsu-table--stack,
    .nemsu-table--stack tbody,
    .nemsu-table--stack tr,
    .nemsu-table--stack td {
        display: block;
        width: 100%;
    }

    .nemsu-table--stack tr {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--nemsu-border);
    }

    .nemsu-table--stack tr:last-child {
        border-bottom: 0;
    }

    .nemsu-table--stack td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.3rem 1rem;
        border: 0;
        text-align: right !important;
        overflow-wrap: anywhere;
    }

    .nemsu-table--stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--nemsu-text-muted);
        text-align: left;
    }

    .nemsu-table--stack td.nemsu-td-full {
        display: block;
        text-align: left !important;
        padding-top: 0.5rem;
    }

    .nemsu-table--stack td.nemsu-td-full > .btn,
    .nemsu-table--stack td.nemsu-td-full form .btn,
    .nemsu-table--stack td.nemsu-td-full .btn-group {
        width: 100%;
        min-height: 40px;
    }

    .nemsu-table--stack td.nemsu-td-full form {
        align-items: stretch !important;
    }

    .nemsu-table--stack td.nemsu-td-full form.d-inline {
        display: block !important;
    }
}

/* ----- Navy container headers (all dashboards) -----
   Every card header inside the app gets the navbar's navy gradient and gold
   underline, so panels, the top bar and the active sidebar link match.
   The gold "Escalate case" header (.bg-warning-subtle) keeps its warning look. */
.app-body .card {
    border-color: rgba(10, 61, 122, 0.14);
}

.app-body .card-header:not(.bg-warning-subtle),
.app-body .nemsu-panel .card-header:not(.bg-warning-subtle) {
    background: linear-gradient(90deg, var(--nemsu-blue-900), var(--nemsu-blue-800));
    color: #ffffff;
    border-bottom: 2px solid var(--nemsu-gold-500);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.app-body .card-header:not(.bg-warning-subtle) :is(h1, h2, h3, h4, h5, h6, strong, span:not(.badge)) {
    color: inherit;
}

.app-body .card-header:not(.bg-warning-subtle) > i,
.app-body .card-header:not(.bg-warning-subtle) > span > i,
.app-body .card-header:not(.bg-warning-subtle) :is(h1, h2, h3, h4, h5, h6) > i {
    color: var(--nemsu-gold-300);
}

.app-body .card-header:not(.bg-warning-subtle) .text-muted,
.app-body .card-header:not(.bg-warning-subtle) small {
    color: rgba(255, 255, 255, 0.78) !important;
}

.app-body .card-header:not(.bg-warning-subtle) a:not(.btn) {
    color: var(--nemsu-gold-300);
}

.app-body .card-header:not(.bg-warning-subtle) .btn-outline-primary,
.app-body .card-header:not(.bg-warning-subtle) .btn-outline-secondary {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.6);
}

.app-body .card-header:not(.bg-warning-subtle) .btn-outline-primary:hover,
.app-body .card-header:not(.bg-warning-subtle) .btn-outline-secondary:hover {
    background: #ffffff;
    color: var(--nemsu-blue-900);
}

/* Primary actions inside a navy header use the gold accent so they stand out. */
.app-body .card-header:not(.bg-warning-subtle) .btn-primary {
    background: var(--nemsu-gold-500);
    border-color: var(--nemsu-gold-500);
    color: var(--nemsu-blue-900);
    font-weight: 600;
}

.app-body .card-header:not(.bg-warning-subtle) .btn-primary:hover {
    background: var(--nemsu-gold-400);
    border-color: var(--nemsu-gold-400);
}

/* ----- Analytics panels (OSWD Reports) -----
   Work in both modes: these rules use the app colour tokens, which the dark
   card rules further down switch to light-on-dark values when the card has
   data-bs-theme="dark". So in Light mode they are white cards with navy
   text; in Dark mode the same rules give the deep navy analytics look. */
.nemsu-analytics .form-label {
    color: var(--nemsu-text-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Chart area: a slightly tinted inset panel. */
.nemsu-analytics .nemsu-chart-wrap {
    background: var(--nemsu-blue-50);
    border: 1px solid var(--nemsu-border);
    border-radius: 12px;
    padding: 0.75rem 0.75rem 0.25rem;
}

/* Summary strip: total, most frequent, busiest period. */
.nemsu-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.nemsu-analytics-kpi {
    background: var(--nemsu-blue-50);
    border: 1px solid var(--nemsu-border);
    border-left: 3px solid var(--kpi-accent, var(--nemsu-gold-500));
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    min-width: 0;
}

.nemsu-analytics-kpi__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nemsu-text-muted);
}

.nemsu-analytics-kpi__value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--nemsu-blue-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nemsu-analytics-kpi__sub {
    font-size: 0.78rem;
    color: var(--nemsu-text-muted);
}

.nemsu-analytics .nemsu-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.55rem;
}

/* On dark cards the colour dots get a soft glow. */
.nemsu-analytics[data-bs-theme="dark"] .nemsu-swatch {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 0 8px currentColor;
}

.nemsu-analytics .nemsu-share-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--nemsu-border);
    overflow: hidden;
    margin-top: 0.3rem;
}

.nemsu-analytics .nemsu-share-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
}

.nemsu-analytics .nemsu-analytics-note {
    color: var(--nemsu-text-muted);
}

@media (max-width: 767.98px) {
    .nemsu-analytics-kpis {
        grid-template-columns: 1fr;
    }
}

/* ----- Dark navigation sidebar (all dashboards) -----
   Matches the dark analytics panels: deep navy gradient, light text, gold
   section labels, and the gold-edged active link. On phones the same element
   slides in as an off-canvas menu; data-bs-theme="dark" on it (sidebar.php)
   makes Bootstrap's close button white. */
.app-body .nemsu-sidebar,
.app-body .sidebar.nemsu-sidebar,
.app-body .offcanvas-md.nemsu-sidebar,
.app-body .offcanvas.nemsu-sidebar {
    background:
        radial-gradient(140% 60% at 0% 0%, rgba(79, 157, 255, 0.10), transparent 60%),
        linear-gradient(180deg, #0b1d3a 0%, #071429 100%) !important;
    border-right: 1px solid rgba(120, 160, 230, 0.16);
    color: #dbe5f3;
}

.app-body .nemsu-sidebar .offcanvas-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff;
}

.app-body .nemsu-sidebar .sidebar-label {
    color: var(--nemsu-gold-300);
    opacity: 0.85;
}

.app-body .nemsu-sidebar__section-label {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.app-body .nemsu-sidebar .nav-link {
    color: #c9d6ea;
}

.app-body .nemsu-sidebar .nav-link i {
    color: #7fb2ff;
    transition: color var(--nemsu-duration) var(--nemsu-ease);
}

.app-body .nemsu-sidebar .nav-link:hover,
.app-body .nemsu-sidebar .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.app-body .nemsu-sidebar .nav-link:hover i,
.app-body .nemsu-sidebar .nav-link:focus-visible i {
    color: var(--nemsu-gold-300);
}

.app-body .nemsu-sidebar .nav-link.active {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(79, 157, 255, 0.28), rgba(79, 157, 255, 0.08));
    box-shadow: inset 3px 0 0 var(--nemsu-gold-500), 0 4px 14px rgba(0, 0, 0, 0.25);
}

.app-body .nemsu-sidebar .nav-link.active i {
    color: var(--nemsu-gold-300);
}

/* ----- Dark cards on every dashboard -----
   Every container card carries data-bs-theme="dark" (Bootstrap's dark mode
   for the forms, tables and lists inside it) and gets the same deep navy look
   as the OSWD analytics. The page background around the cards stays light,
   and the coloured stat tiles (Total / Pending / ...) are unchanged.

   Inside a dark card the app's colour tokens are switched to dark-theme
   values. Many styles use --nemsu-blue-900/800/700 for TEXT, so those become
   light; the few things that must stay navy (the header bar) use fixed colours. */
.app-body .card[data-bs-theme="dark"] {
    /* App tokens */
    --nemsu-white: rgba(255, 255, 255, 0.04);
    --nemsu-surface: rgba(255, 255, 255, 0.03);
    --nemsu-text: #e6edf7;
    --nemsu-text-muted: #9fb3d1;
    --nemsu-border: rgba(255, 255, 255, 0.10);
    --nemsu-blue-900: #ffffff;
    --nemsu-blue-800: #dbe5f3;
    --nemsu-blue-700: #7fb2ff;
    --nemsu-blue-600: #7fb2ff;
    --nemsu-blue-100: rgba(127, 178, 255, 0.12);
    --nemsu-blue-50: rgba(255, 255, 255, 0.05);
    --nemsu-gold-100: rgba(232, 197, 71, 0.12);
    /* Bootstrap base colours, tuned to navy instead of Bootstrap's grey */
    --bs-body-bg: rgba(255, 255, 255, 0.04);
    --bs-body-color: #dbe5f3;
    --bs-emphasis-color: #ffffff;
    --bs-heading-color: #ffffff;
    --bs-secondary-color: rgba(201, 214, 234, 0.72);
    --bs-secondary-bg: rgba(255, 255, 255, 0.07);
    --bs-tertiary-bg: rgba(255, 255, 255, 0.05);
    --bs-border-color: rgba(255, 255, 255, 0.14);
    --bs-link-color: #7fb2ff;
    --bs-link-hover-color: #ffffff;
    --bs-link-color-rgb: 127, 178, 255;

    background:
        radial-gradient(120% 80% at 100% 0%, rgba(79, 157, 255, 0.10), transparent 60%),
        linear-gradient(165deg, #0b1d3a 0%, #071429 100%);
    border: 1px solid rgba(120, 160, 230, 0.18);
    box-shadow: 0 10px 30px rgba(3, 12, 30, 0.30);
    color: #e6edf7;
}

/* Header bar: fixed navy (the tokens above are light inside the card). */
.app-body .card[data-bs-theme="dark"] > .card-header:not(.bg-warning-subtle),
.app-body .card[data-bs-theme="dark"] .card-header:not(.bg-warning-subtle) {
    background: linear-gradient(90deg, #04152f, #0a2a55);
    color: #ffffff;
}

.app-body .card[data-bs-theme="dark"] .card-header.bg-warning-subtle {
    background: rgba(242, 182, 50, 0.16) !important;
    color: #f7d77a;
    border-bottom: 2px solid var(--nemsu-gold-500);
}

.app-body .card[data-bs-theme="dark"] .card-footer,
.app-body .card[data-bs-theme="dark"] .card-footer.bg-white,
.app-body .card[data-bs-theme="dark"] .bg-white {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #c9d6ea;
}

/* Lists, tables and forms */
.app-body .card[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: #dbe5f3;
    --bs-list-group-border-color: rgba(255, 255, 255, 0.08);
}

.app-body .card[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #dbe5f3;
    --bs-table-border-color: rgba(255, 255, 255, 0.08);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: #ffffff;
}

.app-body .card[data-bs-theme="dark"] .nemsu-table thead th {
    background: #0a1a33;   /* solid: the header row stays visible when the table scrolls */
    color: var(--nemsu-gold-300);
    box-shadow: inset 0 -1px 0 rgba(232, 197, 71, 0.35);
}

/* Highlighted rows (critical / overdue / suspicious / identity reveal): tinted, not bright. */
.app-body .card[data-bs-theme="dark"] .table-danger {
    --bs-table-bg: rgba(244, 86, 106, 0.14);
    --bs-table-color: #ffd7dc;
    --bs-table-hover-bg: rgba(244, 86, 106, 0.2);
    --bs-table-border-color: rgba(244, 86, 106, 0.2);
}

.app-body .card[data-bs-theme="dark"] .table-warning {
    --bs-table-bg: rgba(242, 182, 50, 0.13);
    --bs-table-color: #fbe7b0;
    --bs-table-hover-bg: rgba(242, 182, 50, 0.19);
    --bs-table-border-color: rgba(242, 182, 50, 0.2);
}

.app-body .card[data-bs-theme="dark"] .form-label,
.app-body .card[data-bs-theme="dark"] .form-check-label {
    color: #c9d6ea;
}

.app-body .card[data-bs-theme="dark"] .form-control,
.app-body .card[data-bs-theme="dark"] .form-select {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e6edf7;
}

.app-body .card[data-bs-theme="dark"] .form-control::placeholder {
    color: rgba(201, 214, 234, 0.5);
}

.app-body .card[data-bs-theme="dark"] .form-control:focus,
.app-body .card[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--nemsu-gold-400);
    box-shadow: 0 0 0 0.2rem rgba(232, 197, 71, 0.25);
}

.app-body .card[data-bs-theme="dark"] .form-select option {
    background: #0b1d3a;
    color: #e6edf7;
}

.app-body .card[data-bs-theme="dark"] .input-group-text {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: #c9d6ea;
}

/* Buttons: a navy button would disappear on a navy card. */
.app-body .card[data-bs-theme="dark"] .card-body .btn-primary,
.app-body .card[data-bs-theme="dark"] .card-footer .btn-primary {
    background: linear-gradient(135deg, #2f6fd6, #4f9dff);
    border-color: #4f9dff;
    color: #ffffff;
}

.app-body .card[data-bs-theme="dark"] .card-body .btn-primary:hover,
.app-body .card[data-bs-theme="dark"] .card-footer .btn-primary:hover {
    background: linear-gradient(135deg, #3b7de6, #6aaeff);
}

.app-body .card[data-bs-theme="dark"] .card-body .btn-outline-primary,
.app-body .card[data-bs-theme="dark"] .card-footer .btn-outline-primary {
    color: #7fb2ff;
    border-color: rgba(127, 178, 255, 0.6);
}

.app-body .card[data-bs-theme="dark"] .card-body .btn-outline-primary:hover,
.app-body .card[data-bs-theme="dark"] .card-footer .btn-outline-primary:hover {
    background: #4f9dff;
    color: #04152f;
}

.app-body .card[data-bs-theme="dark"] .btn-outline-secondary {
    color: #c9d6ea;
    border-color: rgba(255, 255, 255, 0.3);
}

.app-body .card[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Small inner panels (mobile complaint cards, empty states, progress steps) */
.app-body .card[data-bs-theme="dark"] .nemsu-complaint-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

.app-body .card[data-bs-theme="dark"] .nemsu-empty-state__icon {
    color: #7fb2ff;
}

.app-body .card[data-bs-theme="dark"] code {
    color: #f7a8c4;
}

@media (max-width: 767.98px) {
    .app-body .card[data-bs-theme="dark"] .nemsu-table--stack td[data-label]::before {
        color: #8ea3c4;
    }

    .app-body .card[data-bs-theme="dark"] .nemsu-table--stack tr {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
}

/* Inside dark cards, Bootstrap's grey "light-subtle" filter strip becomes navy-tinted. */
.app-body .card[data-bs-theme="dark"] .bg-light-subtle {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* The student "Your case" hero and the File-a-complaint wizard are dark
   cards too; keep their own spacing and the hero's gold accent. */
.app-body .card.nemsu-hero-card[data-bs-theme="dark"] {
    border-left: 4px solid var(--nemsu-gold-500);
}

.app-body .card.nemsu-wizard-card[data-bs-theme="dark"] {
    margin-bottom: 1.25rem;
}

.app-body .card[data-bs-theme="dark"] .nemsu-category-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #e6edf7;
}

.app-body .card[data-bs-theme="dark"] .nemsu-category-card:hover,
.app-body .card[data-bs-theme="dark"] .nemsu-category-card.is-selected,
.app-body .card[data-bs-theme="dark"] input:checked + .nemsu-category-card {
    border-color: var(--nemsu-gold-400);
    background: rgba(79, 157, 255, 0.10);
}

/* The hero's main button sits outside a .card-body: give it the same bright blue. */
.app-body .card.nemsu-hero-card[data-bs-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #2f6fd6, #4f9dff);
    border-color: #4f9dff;
    color: #ffffff;
}

.app-body .card.nemsu-hero-card[data-bs-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #3b7de6, #6aaeff);
}

.app-body .card.nemsu-hero-card[data-bs-theme="dark"] .btn-outline-primary {
    color: #7fb2ff;
    border-color: rgba(127, 178, 255, 0.6);
}

/* Light "chip" badges (e.g. the wizard's routing hints) become soft on dark. */
.app-body .card[data-bs-theme="dark"] .badge.bg-light {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #c9d6ea !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* ----- Document viewer pop-up (view_complaint.php) ----- */
.nemsu-doc-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 0.75rem;
    background: rgba(10, 61, 122, 0.04);
}

.nemsu-doc-viewer__image {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.nemsu-doc-viewer__frame {
    width: 100%;
    height: 75vh;
    border: 0;
    border-radius: 6px;
    background: #ffffff;
}

.nemsu-doc-viewer__note {
    text-align: center;
    padding: 2rem 1rem;
}

.nemsu-doc-viewer__note > i {
    display: block;
    font-size: 3rem;
    color: var(--nemsu-blue-600);
    margin-bottom: 0.75rem;
}

/* ----- Profile panel at the bottom of the sidebar (every role) -----
   The sidebar body becomes a column so the panel (margin-top: auto) always
   sits at the bottom, on short and long pages, on desktop and in the phone
   slide-out menu. Translucent white works on the navy (dark mode) and blue
   (light mode) sidebar alike. */
.app-body .nemsu-sidebar .offcanvas-body,
.app-body .nemsu-sidebar__body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.nemsu-sidebar__profile {
    margin-top: auto;
    padding: 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.nemsu-sidebar__profile .min-w-0 {
    min-width: 0;
}

.nemsu-sidebar__avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--nemsu-gold-300), var(--nemsu-gold-500));
    color: #1a2b42;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.nemsu-sidebar__profile-name {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nemsu-sidebar__profile-role {
    font-size: 0.72rem;
    opacity: 0.8;
}

.nemsu-sidebar__profile-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background-color var(--nemsu-duration) var(--nemsu-ease);
}

.nemsu-sidebar__profile-btn:hover,
.nemsu-sidebar__profile-btn:focus-visible,
.nemsu-sidebar__profile-btn.is-active {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.nemsu-sidebar__profile-btn--logout:hover,
.nemsu-sidebar__profile-btn--logout:focus-visible {
    background: rgba(220, 53, 69, 0.85);
    border-color: rgba(220, 53, 69, 0.9);
}

/* Phone slide-out menu: Bootstrap already stretches the body to fill the
   space under the "Navigation" header, so the full-height minimum above
   would push the profile panel below the screen by the header's height. */
@media (max-width: 767.98px) {
    .app-body .nemsu-sidebar .offcanvas-body,
    .app-body .nemsu-sidebar__body {
        min-height: 0;
    }
}

/* Phone slide-out menu: half of the screen width. The sidebar uses
   Bootstrap's .offcanvas-md, whose own default width is 400px (the whole
   screen on a phone); the rest of the page stays visible, dimmed, beside it. */
@media (max-width: 767.98px) {
    .app-body .offcanvas-md.nemsu-sidebar {
        --bs-offcanvas-width: 50vw;
        width: 50vw;
        max-width: 50vw;
    }

    .app-body .nemsu-sidebar .offcanvas-body,
    .app-body .nemsu-sidebar__body {
        padding: 0.6rem 0.45rem 0.9rem;
    }

    .app-body .nemsu-sidebar .nav-link {
        padding: 0.6rem 0.6rem;
        gap: 0.5rem;
        font-size: 0.82rem;
    }

    .app-body .nemsu-sidebar__text {
        white-space: normal;      /* long link names wrap instead of being cut */
        line-height: 1.25;
    }

    /* Profile panel: narrower, buttons stacked. */
    .nemsu-sidebar__profile {
        padding: 0.55rem;
    }

    .nemsu-sidebar__profile .d-flex.gap-2:last-child {
        flex-direction: column;
        gap: 0.4rem !important;
    }

    .nemsu-sidebar__avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* ----- Sign-in pages in the NEMSU logo colours -----
   Login, Register, Forgot password, Student Services and credential reset
   (body.auth-body) use the logo's royal blue #1f10d9 and gold #f2b514,
   always (the dashboard light/dark choice never applies to these pages).
   Animations play on load (or on hover) and are switched off for people
   who ask their device for reduced motion. */
body.auth-body {
    --nemsu-blue-900: #120784;
    --nemsu-blue-800: #1608a8;
    --nemsu-blue-700: #1f10d9;
    --nemsu-blue-600: #4a3df0;
    --nemsu-blue-100: #ecebfd;
    --nemsu-blue-50: #f5f4ff;
    --nemsu-gold-500: #f2b514;
    --nemsu-gold-400: #f5c542;
    --nemsu-gold-300: #f8d56f;
    --nemsu-border: rgba(31, 16, 217, 0.14);
    --nemsu-shadow: 0 18px 45px rgba(22, 8, 168, 0.12);
    --bs-primary: #1f10d9;
    --bs-primary-rgb: 31, 16, 217;
    --bs-link-color: #1f10d9;
    --bs-link-color-rgb: 31, 16, 217;
    --bs-link-hover-color: #1608a8;
    background:
        radial-gradient(circle at 90% 10%, rgba(31, 16, 217, 0.06), transparent 40%),
        radial-gradient(circle at 10% 95%, rgba(242, 181, 20, 0.08), transparent 35%),
        #f5f4ff;
}

body.auth-body .auth-panel-form {
    background: transparent;
}

/* Brand panel: logo blue, slowly shifting, with two soft floating glows. */
body.auth-body .auth-panel-brand {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #120784 0%, #1608a8 30%, #1f10d9 60%, #4a3df0 100%);
    background-size: 220% 220%;
    border-right: 4px solid #f2b514;
}

body.auth-body .auth-panel-brand::before,
body.auth-body .auth-panel-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

body.auth-body .auth-panel-brand::before {
    width: 26rem;
    height: 26rem;
    top: -8rem;
    left: -8rem;
    background: radial-gradient(circle, rgba(242, 181, 20, 0.28), transparent 65%);
}

body.auth-body .auth-panel-brand::after {
    width: 22rem;
    height: 22rem;
    bottom: -7rem;
    right: -6rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 65%);
}

body.auth-body .auth-panel-brand__inner {
    position: relative;
    z-index: 1;
}

body.auth-body .auth-panel-brand .auth-brand-icon {
    border: 4px solid #f2b514;
    box-shadow: 0 0 0 6px rgba(242, 181, 20, 0.18), 0 14px 32px rgba(8, 3, 70, 0.45);
}

body.auth-body .auth-panel-brand__campus {
    color: #f8d56f;
}

body.auth-body .auth-panel-brand__list li i {
    color: #f2b514;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(242, 181, 20, 0.14);
}

/* A bigger logo on wide screens (phones keep the compact header). */
@media (min-width: 992px) {
    body.auth-body .auth-panel-brand .auth-brand-icon--lg {
        width: 120px;
        height: 120px;
        margin-left: 0;
        margin-bottom: 1.25rem;
    }
}

/* Form card: white, with a blue-gold strip on top. */
body.auth-body .auth-form-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(31, 16, 217, 0.10);
    border-radius: 18px;
    box-shadow: 0 22px 50px rgba(22, 8, 168, 0.12);
    padding-top: 2.1rem;
}

body.auth-body .auth-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #1f10d9, #f2b514, #1f10d9);
    background-size: 200% 100%;
}

body.auth-body .auth-form-card h2 {
    color: #120784;
    font-weight: 700;
}

body.auth-body .btn-primary {
    --bs-btn-bg: #1f10d9;
    --bs-btn-border-color: #1a0dbd;
    --bs-btn-hover-bg: #1608a8;
    --bs-btn-hover-border-color: #1608a8;
    --bs-btn-active-bg: #120784;
    --bs-btn-active-border-color: #120784;
    --bs-btn-disabled-bg: #8a82f5;
    --bs-btn-disabled-border-color: #8a82f5;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #4a3df0, #1f10d9);
    border: 1px solid #1a0dbd;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(31, 16, 217, 0.32);
    color: #ffffff;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.auth-body .btn-primary:hover,
body.auth-body .btn-primary:focus {
    background: linear-gradient(180deg, #4a3df0, #1608a8);
    border-color: #f2b514;
    box-shadow: 0 10px 24px rgba(31, 16, 217, 0.38);
    color: #ffffff;
}

/* Light sweep across the button on hover. */
body.auth-body .btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}

body.auth-body .btn-outline-primary,
body.auth-body .btn-outline-secondary {
    --bs-btn-color: #1f10d9;
    --bs-btn-border-color: rgba(31, 16, 217, 0.40);
    --bs-btn-hover-bg: #1f10d9;
    --bs-btn-hover-border-color: #1f10d9;
    --bs-btn-hover-color: #ffffff;
}

body.auth-body .form-control,
body.auth-body .form-select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.auth-body .form-control:focus,
body.auth-body .form-select:focus {
    border-color: #8a82f5;
    box-shadow: 0 0 0 0.22rem rgba(31, 16, 217, 0.16);
}

body.auth-body .input-group-text {
    background: #f5f4ff;
    color: #1f10d9;
    border-color: rgba(31, 16, 217, 0.18);
    transition: background 0.2s ease, color 0.2s ease;
}

/* The field's icon lights up while typing in it. */
body.auth-body .input-group:focus-within .input-group-text {
    background: #1f10d9;
    color: #f2b514;
}

body.auth-body .progress {
    --bs-progress-bar-bg: #1f10d9;
}

body.auth-body .otp-digit:focus {
    border-color: #1f10d9;
    box-shadow: 0 0 0 0.22rem rgba(242, 181, 20, 0.35);
}

body.auth-body a {
    color: #1f10d9;
}

body.auth-body a:hover {
    color: #1608a8;
}

/* Registration: the details from the enrolled record (read only). */
body.auth-body .nemsu-enrolled-summary {
    background: #f5f4ff;
    border: 1px solid rgba(31, 16, 217, 0.14);
    border-left: 4px solid #f2b514;
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

body.auth-body .nemsu-enrolled-summary dt {
    color: #120784;
    font-weight: 600;
}

/* ---- Animations (only when the device allows motion) ---- */
@media (prefers-reduced-motion: no-preference) {
    body.auth-body .auth-panel-brand {
        animation: authGradientShift 16s ease-in-out infinite;
    }

    body.auth-body .auth-panel-brand::before {
        animation: authGlowFloat 11s ease-in-out infinite;
    }

    body.auth-body .auth-panel-brand::after {
        animation: authGlowFloat 13s ease-in-out infinite reverse;
    }

    body.auth-body .auth-panel-brand .auth-brand-icon {
        animation: authLogoIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both,
                   authLogoFloat 6s ease-in-out 0.9s infinite,
                   authLogoGlow 3.5s ease-in-out 0.9s infinite;
    }

    body.auth-body .auth-panel-brand__title,
    body.auth-body .auth-panel-brand__campus,
    body.auth-body .auth-panel-brand__tagline,
    body.auth-body .auth-panel-brand__list li {
        animation: authFadeUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    body.auth-body .auth-panel-brand__title { animation-delay: 0.15s; }
    body.auth-body .auth-panel-brand__campus { animation-delay: 0.25s; }
    body.auth-body .auth-panel-brand__tagline { animation-delay: 0.35s; }
    body.auth-body .auth-panel-brand__list li:nth-child(1) { animation-delay: 0.45s; }
    body.auth-body .auth-panel-brand__list li:nth-child(2) { animation-delay: 0.55s; }
    body.auth-body .auth-panel-brand__list li:nth-child(3) { animation-delay: 0.65s; }

    body.auth-body .auth-form-card {
        animation: authCardRise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
    }

    body.auth-body .auth-form-card::before {
        animation: authStripShimmer 5s linear infinite;
    }

    body.auth-body .btn-primary:hover {
        transform: translateY(-2px);
    }

    body.auth-body .btn-primary:hover::after {
        animation: authButtonShine 0.75s ease;
    }

    body.auth-body .alert {
        animation: authFadeUp 0.4s ease both;
    }
}

@keyframes authGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes authGlowFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(2.5rem, 1.5rem) scale(1.08); }
}

@keyframes authLogoIn {
    from { opacity: 0; transform: scale(0.6) rotate(-12deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes authLogoFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

@keyframes authLogoGlow {
    0%, 100% { box-shadow: 0 0 0 6px rgba(242, 181, 20, 0.18), 0 14px 32px rgba(8, 3, 70, 0.45); }
    50% { box-shadow: 0 0 0 12px rgba(242, 181, 20, 0.08), 0 18px 40px rgba(8, 3, 70, 0.5); }
}

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

@keyframes authCardRise {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes authStripShimmer {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
}

@keyframes authButtonShine {
    from { left: -75%; }
    to { left: 130%; }
}

/* ----- Resolution proof entries (view_complaint.php) ----- */
.nemsu-proof {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--nemsu-border);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    background: var(--nemsu-blue-50);
}

.nemsu-proof:not(.nemsu-proof--latest) {
    opacity: 0.8;
}

.nemsu-proof--latest {
    border-left: 3px solid var(--nemsu-gold-500);
}

.nemsu-proof-upload {
    padding-top: 0.75rem;
    border-top: 1px dashed var(--nemsu-border);
}

/* ----- Sign-in pages on phones and small tablets -----
   The blue brand panel (logo + system name) used to be hidden below 992px.
   It now shows as a compact header above the form; the tagline and feature
   list are left out so the form stays near the top of the screen. */
@media (max-width: 991.98px) {
    body.auth-body .auth-panel-brand {
        display: block;
        text-align: center;
        padding: 1.5rem 1rem 1.25rem;
        border-bottom: 3px solid var(--nemsu-gold-500);
        border-right: 0;
    }

    body.auth-body .auth-panel-brand .auth-brand-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 0.5rem;
    }

    body.auth-body .auth-panel-brand__title {
        font-size: 1.15rem;
        margin: 0.25rem 0 0.15rem;
    }

    body.auth-body .auth-panel-brand__campus {
        margin-bottom: 0;
        font-size: 0.9rem;
    }

    body.auth-body .auth-panel-brand__tagline,
    body.auth-body .auth-panel-brand__list {
        display: none;
    }

    body.auth-body .auth-panel-form {
        padding-top: 1.5rem;
    }

    /* Header only as tall as its content; the form area takes the rest. */
    body.auth-body .auth-split {
        grid-template-rows: auto 1fr;
    }

    body.auth-body .auth-panel-form {
        align-items: flex-start;
    }
}

/* ----- Dashboard stat cards: sidebar colour + clickable -----
   Total / Pending / In progress / Resolved use the SAME colour as the sidebar
   (navy here; theme-light.css switches both to the logo royal blue in light mode)
   and are links that filter the complaint list below. */
.nemsu-stat-grid .nemsu-stat-card--nav {
    background:
        radial-gradient(140% 90% at 100% 0%, rgba(79, 157, 255, 0.16), transparent 60%),
        linear-gradient(180deg, #0b1d3a 0%, #071429 100%);
    border: 1px solid rgba(120, 160, 230, 0.18);
}

.nemsu-stat-card--link {
    display: block;
    color: #ffffff;
    text-decoration: none;
    transition: transform var(--nemsu-duration) var(--nemsu-ease),
                box-shadow var(--nemsu-duration) var(--nemsu-ease);
}

.nemsu-stat-card--link:hover,
.nemsu-stat-card--link:focus-visible {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(5, 38, 84, 0.28);
}

.nemsu-stat-card--link:focus-visible {
    outline: 3px solid var(--nemsu-gold-400);
    outline-offset: 2px;
}

/* The card for the filter currently applied. */
.nemsu-stat-card--link.is-active {
    box-shadow: inset 0 0 0 2px var(--nemsu-gold-400), 0 10px 24px rgba(5, 38, 84, 0.25);
}

.nemsu-stat-card--link.is-active .card-title::after {
    content: ' · showing';
    font-weight: 400;
    opacity: 0.8;
    text-transform: none;
}