:root {
    --bs-primary: #5f2dde;
    --bs-primary-rgb: 95, 45, 222;
    --font-app-body: 'DM Sans', sans-serif;
    --font-app-display: 'Space Grotesk', sans-serif;
}
html, body { font-family: var(--font-app-body); background-color: #f8f9fa; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-app-display); }

.btn-primary { background-color: #5f2dde; border-color: #5f2dde; }
.btn-primary:hover, .btn-primary:focus { background-color: #4d21c2; border-color: #4d21c2; }
.btn-outline-primary { color: #5f2dde; border-color: #5f2dde; }
.btn-outline-primary:hover { background-color: #5f2dde; border-color: #5f2dde; }

.app-topnav {
    background: #673ab7;
    color: #fff;
    padding: 0.6rem 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.app-topnav .app-brand { display: flex; align-items: center; gap: 0.5rem; }
.app-topnav .app-brand img { height: 32px; }
.app-topnav > .container-fluid > span > a { color: #fff; text-decoration: none; }
.app-topnav > .container-fluid > span > a:hover { text-decoration: underline; }

/* Top-level nav links and the dropdown toggle - NOT the dropdown menu itself,
   which needs normal dark-on-white text since it renders as a white popover. */
.app-topnav .app-nav-links { margin-left: 1.5rem; }
.app-topnav .app-nav-links > a,
.app-topnav .app-nav-links > .dropdown > a.dropdown-toggle {
    color: #fff;
    text-decoration: none;
    margin-right: 1.25rem;
    font-size: 0.95rem;
    opacity: 0.85;
}
.app-topnav .app-nav-links > a:hover,
.app-topnav .app-nav-links > .dropdown > a.dropdown-toggle:hover {
    text-decoration: underline;
}
.app-topnav .app-nav-links > a.active,
.app-topnav .app-nav-links > .dropdown > a.dropdown-toggle.active {
    opacity: 1;
    font-weight: 700;
    text-decoration: underline;
}
.app-topnav .dropdown-menu .dropdown-item {
    color: #212529;
    opacity: 1;
    font-size: 1rem;
}
.app-topnav .dropdown-menu .dropdown-item:hover {
    background-color: #f0ecfb;
}

.table thead.table-light th { font-family: var(--font-app-display); }
.page-item.active .page-link { background-color: #5f2dde; border-color: #5f2dde; }
.page-link { color: #5f2dde; }

/* Cross-browser month-only picker (see assets/js/monthpicker.js) - Firefox has no
   native UI for <input type="month">, so this popup grid replaces it wherever a
   month-and-year-only value is needed. */
.mp-display-input { cursor: pointer; background-color: #fff; }
.month-picker-popup { position: absolute; z-index: 1000; top: 100%; left: 0; margin-top: 4px; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 10px; width: 220px; }
.month-picker-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; }
.month-picker-header button { border: none; background: none; font-size: 1rem; line-height: 1; padding: 2px 8px; border-radius: 4px; }
.month-picker-header button:hover { background: #f1f0ff; }
.month-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.month-picker-grid button { border: 1px solid transparent; background: #f8f9fa; border-radius: 6px; padding: 8px 4px; font-size: 0.85rem; cursor: pointer; }
.month-picker-grid button:hover { background: #e9ecef; }
.month-picker-grid button.mp-current { border-color: #6c63ff; }
.month-picker-grid button.mp-selected { background: #6c63ff; color: #fff; }