/* Global: Montserrat + app theme (primary #2b59c3 via MudTheme) */
html,
body {
    font-family: "Montserrat", system-ui, sans-serif;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --- App-wide: pill / curved primary buttons --- */
.app-btn-pill.mud-button-root {
    border-radius: 9999px !important;
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mud-button-filled.mud-button-root,
.mud-button-outlined.mud-button-root {
    border-radius: 9999px !important;
}

/* --- Auth pages: background (login / register) --- */
.auth-shell {
    min-height: 100vh;
}

.authentication-bg {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    padding: 2rem 1rem 3rem;
    background-color: #e8ecf4;
    background-image: url("/images/login-img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Theme-style veil over the photo (tune opacity or use rgba on background-color) */
.authentication-bg .bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #e8ecf4;
    opacity: 0.85;
}

.authentication-bg > .auth-page-inner {
    position: relative;
    z-index: 1;
}

.auth-page-inner {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.75rem;
}

.auth-brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(145deg, #1e3a8a 0%, #1e3a5f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 14px rgba(43, 89, 195, 0.25);
}

.auth-brand-title {
    color: #1e3a5f !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

.auth-card {
    width: 100%;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 12px 40px rgba(30, 58, 95, 0.12) !important;
}

.auth-heading {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.auth-subtitle {
    color: #64748b !important;
}

.auth-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.auth-label {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.auth-link-forgot {
    color: #2b59c3 !important;
    font-weight: 500;
}

.auth-link-forgot:hover {
    text-decoration: underline;
}

.auth-input .mud-input-outlined-border {
    border-color: #cbd5e1 !important;
}

.auth-input .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #94a3b8 !important;
}

.auth-input .mud-input-outlined:focus-within .mud-input-outlined-border,
.auth-input .mud-input-outlined.mud-input-outlined-focused .mud-input-outlined-border {
    border-color: #2b59c3 !important;
}

.auth-input input::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

.auth-remember {
    color: #64748b;
}

.auth-remember label {
    color: #64748b !important;
}

.auth-footer-card {
    color: #64748b !important;
}

.auth-link-signup {
    color: #2b59c3 !important;
    font-weight: 600 !important;
}

.auth-site-footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #64748b;
}

.auth-heart {
    color: #e11d48;
}

/* --- Main shell: match theme --- */
.app-page-title {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.app-surface-card {
    border-radius: 12px !important;
}

/* --- MudBlazor shell: drawer first (full height), app bar inside main content --- */
.app-mud-layout.mud-layout {
    flex-direction: row;
}

.app-shell-drawer.mud-drawer {
    border-right: 1px solid #e2e8f0;
}

.app-shell-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ffffff;
}

/* Mini rail collapsed: symmetric padding + center icon row */
.app-shell-drawer.mud-drawer--closed .mud-drawer-content {
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
}

.app-shell-drawer.mud-drawer--closed .app-sidebar-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.app-shell-drawer.mud-drawer--closed .app-sidebar-nav .mud-nav-link {
    justify-content: center !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.app-drawer-title {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.app-drawer-subtitle {
    color: #64748b !important;
}

.app-drawer-section {
    color: #94a3b8 !important;
    letter-spacing: 0.08em !important;
}

/*
 * MudBlazor adds padding-top to .mud-main-content for a fixed app bar that is a *sibling* of main.
 * Our MudAppBar lives *inside* MudMainContent, so that padding becomes empty space above the bar.
 */
.app-shell-main.mud-main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #e8ecf4;
    min-width: 0;
    padding-top: 0 !important;
}

/* Fluid page column: use full width of main (avoids ~1280px max-width “letterbox” on wide screens). */
.app-shell-page-container {
    max-width: 100% !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* Toolbar only over the main column (not full viewport) — MudAppBar uses Fixed="false" */
.app-shell-main .app-shell-appbar.mud-appbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1e3a5f !important;
}

/* Full-width toolbar row: left cluster vs right cluster (Mud default centers children otherwise). */
.app-shell-appbar.app-shell-appbar--split.mud-appbar {
    overflow: visible !important;
}

.app-shell-appbar.app-shell-appbar--split .mud-toolbar-appbar,
.app-shell-appbar.app-shell-appbar--split .mud-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.app-appbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.app-appbar-right,
.app-appbar-actions.app-appbar-right {
    flex: 0 0 auto;
}

.app-appbar-tip {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0.25rem;
}

.app-appbar-tip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.app-tip-label {
    color: #2b59c3 !important;
    font-weight: 700 !important;
    margin-right: 0.35rem;
}

.app-appbar-brand-diamond {
    font-size: 1.25rem !important;
}

.app-appbar-actions {
    flex-shrink: 0;
}

/*
 * Icon hit area tuned so hover/ripple matches glyph; badge stays near bell.
 */
.app-shell-appbar .app-appbar-action.mud-icon-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 8px !important;
}

.app-shell-appbar .app-appbar-action.mud-icon-button .mud-icon-root {
    font-size: 1.55rem !important;
}

.app-shell-appbar .app-appbar-notify-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 0;
    overflow: visible !important;
    padding-top: 4px;
    align-self: center;
}

.app-shell-appbar .app-appbar-notify-badge .mud-badge,
.app-shell-appbar .app-appbar-notify-badge .mud-badge-content {
    overflow: visible !important;
}

/* MudBlazor badge DOM: overrides default badge anchor (all MudBadge instances unless you scope further). */
.mud-badge-root .mud-badge-wrapper {
    top: 9px !important;
    left: -7px !important;
}

.app-user-chip.mud-button-root {
    text-transform: none !important;
    min-width: 0 !important;
}

.app-user-chip:hover {
    background-color: rgba(43, 89, 195, 0.06) !important;
}

.app-user-initials.mud-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px !important;
    font-size: 0.75rem;
    font-weight: 700;
}

.app-user-avatar-img-fill {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.app-profile-photo-label {
    cursor: pointer;
}

.app-user-first {
    color: #1e3a5f;
    font-weight: 600;
}

/* --- Profile drawer (right) --- */
.app-profile-drawer .mud-overlay-drawer {
    z-index: 1200;
}

.app-profile-drawer .mud-drawer-content {
    overflow-x: hidden;
    max-width: 100%;
}

.app-profile-drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    background: #fff;
}

.app-profile-drawer-head {
    border-bottom: 1px solid #e2e8f0;
}

.app-profile-name {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.app-profile-avatar-lg {
    width: 72px !important;
    height: 72px !important;
    border-radius: 12px !important;
    font-size: 1.5rem !important;
}

.app-profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.app-profile-role-line .mud-typography {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
}

.app-profile-role-chip.mud-chip {
    font-size: 0.65rem !important;
    height: 22px !important;
    padding: 0 8px !important;
}

/* Space below header / above quick actions; keeps tiles off the head border */
.app-profile-quick-actions {
    padding-top: 1rem !important;
    min-width: 0;
    max-width: 100%;
}

/* Equal-width columns; MudGrid + inline-flex MudBadge left a gap after the middle tile */
.app-profile-quick-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.app-profile-quick-cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-profile-quick-cell > .mud-button-root,
.app-profile-quick-cell > .app-profile-drawer-badge {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

/* Badge defaults to inline-flex and only wraps content — stretch to column width */
.app-profile-quick-cell .app-profile-drawer-badge {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.app-profile-quick-cell .app-profile-drawer-badge .mud-button-root {
    width: 100%;
}

/* Rounded rectangles — not circles — cleaner than default pill / round buttons */
.app-quick-tile.mud-button-root {
    min-height: 76px !important;
    padding: 0.5rem 0.35rem !important;
    border-radius: 10px !important;
    border-color: #e2e8f0 !important;
    background: #f1f5f9 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.app-quick-tile.mud-button-root:hover {
    background: #e2e8f0 !important;
}

.app-quick-tile-icon {
    font-size: 1.5rem !important;
}

.app-profile-dotted {
    border-top: 1px dashed #cbd5e1 !important;
    border-bottom: none !important;
    opacity: 1;
}

/* --- App bar: notification / activity log menus (MudMenu popover) --- */
.app-notif-mud-menu .mud-popover-paper,
.app-notif-mud-menu .mud-paper,
.app-logs-mud-menu .mud-popover-paper,
.app-logs-mud-menu .mud-paper {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px !important;
    max-width: min(420px, calc(100vw - 24px));
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18) !important;
}

.app-notif-panel {
    width: min(420px, calc(100vw - 24px));
    max-width: 100%;
    overflow: hidden;
    background: #fff;
}

.app-notif-header {
    background: #1e3a5f;
    color: #fff;
}

.app-notif-header-title {
    color: #fff !important;
    font-weight: 700 !important;
}

.app-notif-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.6rem 0.5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-family: inherit;
}

.app-notif-tab:hover {
    color: #fff;
}

.app-notif-tab--active {
    color: #fff !important;
    border-bottom-color: #fff !important;
}

.app-notif-body {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}

.app-notif-item {
    border-bottom: 1px dashed #e2e8f0;
}

.app-notif-item:last-of-type {
    border-bottom: none;
}

.app-notif-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.app-notif-item-title {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.app-notif-time {
    white-space: nowrap;
}

.app-notif-desc {
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
}

.app-notif-bot-avatar {
    flex-shrink: 0;
}

.app-notif-bot-icon {
    color: #fff !important;
}

.app-notif-overdue {
    font-size: 0.7rem !important;
    height: 22px !important;
}

.app-notif-primary-btn.mud-button-filled.mud-button-filled-primary {
    background: #e0edff !important;
    color: #1e3a5f !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.app-notif-primary-btn.mud-button-filled.mud-button-filled-primary:hover {
    background: #c7d9fc !important;
}

.app-notif-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.app-notif-footer-icon {
    opacity: 0.95;
}

/* --- App bar: activity / audit log panel --- */
.app-logs-panel {
    width: min(420px, calc(100vw - 24px));
    max-width: 100%;
    overflow: hidden;
    background: #fff;
}

.app-logs-header {
    border-bottom: 1px solid #e2e8f0;
}

.app-logs-tab-row {
    gap: 0.25rem;
}

.app-logs-tab {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.35rem 0.5rem 0.5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-family: inherit;
}

.app-logs-tab:hover {
    color: #2b59c3;
}

.app-logs-tab--active {
    color: #2b59c3 !important;
    border-bottom-color: #2b59c3 !important;
}

.app-logs-close {
    color: #64748b !important;
}

.app-logs-subhead {
    background: #fafbfc;
    border-bottom: 1px solid #e2e8f0;
}

.app-logs-section-label {
    color: #94a3b8 !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important;
}

.app-logs-view-all.mud-button-root {
    font-weight: 700 !important;
    min-width: auto !important;
    padding: 4px 8px !important;
}

.app-logs-view-all-text {
    font-weight: 700 !important;
}

.app-logs-body {
    max-height: min(48vh, 380px);
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
}

.app-logs-row {
    border-bottom: 1px solid #e8edf2;
}

.app-logs-row:last-child {
    border-bottom: none;
}

.app-logs-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-logs-icon-box--login {
    background: #ede9fe;
    color: #6d28d9;
}

.app-logs-icon-box--logout {
    background: #f1f5f9;
    color: #64748b;
}

.app-logs-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

.app-logs-primary {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.app-logs-secondary {
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    margin-top: 2px;
}

.app-logs-time {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
    padding-top: 2px;
}

.app-profile-scroll {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
}

.app-profile-scroll-list .mud-list {
    width: 100%;
    max-width: 100%;
}

.app-profile-scroll-list .mud-list-item {
    max-width: 100%;
    box-sizing: border-box;
}

.app-profile-list .mud-list-item {
    border-radius: 10px !important;
}

.app-profile-list .mud-list-item .mud-list-item-icon {
    font-size: 1.65rem !important;
}

.app-profile-list-item .mud-list-item-text {
    margin-top: 2px;
    margin-bottom: 2px;
}

.app-appbar-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.app-appbar-title {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.app-appbar-subtitle {
    color: #64748b !important;
}

.app-nav-section-label {
    color: #64748b !important;
    letter-spacing: 0.12em !important;
    font-weight: 700 !important;
    opacity: 0.95;
}

.app-nav-divider {
    opacity: 1;
    border-color: #e2e8f0 !important;
}

/* Mini rail: section chrome is noise when only icons show */
.app-shell-drawer.mud-drawer--closed .app-nav-section-label,
.app-shell-drawer.mud-drawer--closed .app-nav-divider {
    display: none !important;
}

.app-sidebar-nav .mud-nav-link {
    border-radius: 10px !important;
    margin-bottom: 4px !important;
}

.app-sidebar-nav .mud-nav-link.active {
    background-color: rgba(43, 89, 195, 0.1) !important;
    color: #2b59c3 !important;
}

.app-sidebar-nav .mud-nav-link:hover:not(.active) {
    background-color: #f1f5f9 !important;
}

/* --- App page header (shared) --- */
.app-page-breadcrumb-line {
    display: block;
}

/* Title block grows; toolbar stays top-right (same row or full-width row aligned end when wrapped). */
.app-page-header-text {
    flex: 1 1 0;
    min-width: 0;
}

.app-page-header-toolbar {
    margin-left: auto;
    flex-shrink: 0;
    justify-content: flex-end;
}

/* --- Dashboard home --- */
.app-dashboard-header {
    border-radius: 12px !important;
    border: 1px solid #e2e8f0;
    background: #fff !important;
}

.app-breadcrumb {
    color: #94a3b8 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.app-section-title {
    color: #1e3a5f !important;
    font-weight: 600 !important;
}

.app-stat-tile {
    border: 1px solid #e2e8f0;
    height: 100%;
}

.app-stat-avatar {
    width: 48px !important;
    height: 48px !important;
}

.app-action-card {
    border: 1px solid #e2e8f0;
    height: 100%;
}

/* --- Incidents page --- */
.app-incidents-stat {
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-incidents-stat:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.app-incidents-stat--selected {
    border: 2px solid #2b59c3 !important;
    box-shadow: 0 0 0 1px rgba(43, 89, 195, 0.12);
}

.app-incidents-filters {
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.app-incidents-filter-bar {
    border-bottom: 1px solid transparent;
}

.app-incidents-filters--open .app-incidents-filter-bar {
    border-bottom-color: #e2e8f0;
}

/* Filters: plain label above the field (not Mud outline/floating label on border) */
.app-incidents-filter-label {
    display: block;
    color: #334155 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    margin-bottom: 6px !important;
}

.app-incidents-filters .app-incidents-filter-field.mud-input-control {
    margin-top: 0;
}

/*
 * Outlined fields only (no Mud Label): one flat fill + one border — avoids Filled’s
 * “white pill on grey” double-layer from theme + our overrides.
 */
.app-incidents-filters .app-incidents-filter-field .mud-input-outlined-border {
    border-radius: 10px !important;
    border-color: #e2e8f0 !important;
}

.app-incidents-filters .app-incidents-filter-field .mud-input-outlined-border legend {
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
}

.app-incidents-filters .app-incidents-filter-field .mud-input,
.app-incidents-filters .app-incidents-filter-field .mud-input-root,
.app-incidents-filters .app-incidents-filter-field input.mud-input-root,
.app-incidents-filters .app-incidents-filter-field .mud-input-slot,
.app-incidents-filters .app-incidents-filter-field .mud-select .mud-input-root {
    background-color: #f8fafc !important;
    background-image: none !important;
}

.app-incidents-filters .app-incidents-filter-field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
}

.app-incidents-filters .app-incidents-filter-field .mud-input-underline:before,
.app-incidents-filters .app-incidents-filter-field .mud-input-underline:after {
    display: none !important;
}

/* Admin — create user page: readable width + scrollable role grid */
.app-admin-user-create-card {
    max-width: 56rem;
}

.app-admin-user-create-roles {
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    max-height: min(50vh, 22rem);
    overflow-y: auto;
}

/* Incident edit — Who to inform: selection count under field */
.app-notify-select-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 1.5rem;
}

.app-notify-select {
    width: 100%;
}

.app-notify-select-count {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 1.2;
    pointer-events: none;
}

/* --- Account settings (/account): sidebar + content --- */
.account-settings-page {
    overflow: visible !important;
}

.account-settings-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    align-items: stretch;
    min-height: min(70vh, 720px);
}

@media (max-width: 960px) {
    .account-settings-shell {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    .account-settings-sidebar {
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
}

.account-settings-sidebar {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-right: 1px solid #e2e8f0;
    padding: 1.75rem 1.25rem 2rem 1.5rem;
    box-sizing: border-box;
    overflow: visible;
}

.account-settings-nav-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 1rem 0;
    padding: 0 0.25rem;
    line-height: 1.3;
    white-space: normal;
    word-break: normal;
}

.account-settings-nav-item.mud-button-root {
    justify-content: flex-start !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 10px !important;
    padding: 0.625rem 0.875rem !important;
    min-height: 2.75rem !important;
    font-weight: 500 !important;
}

.account-settings-nav-item--active.mud-button-root {
    background: rgba(43, 89, 195, 0.14) !important;
    color: #1e3a5f !important;
    font-weight: 600 !important;
}

.account-settings-main {
    padding: 2rem 2rem 2.5rem 2.25rem;
    box-sizing: border-box;
    background: #fff;
}

@media (min-width: 961px) {
    .account-settings-main {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.account-settings-section-title {
    color: #1e3a5f !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

.account-settings-section-hint {
    margin-bottom: 1.5rem !important;
    line-height: 1.45;
}

.account-settings-form {
    max-width: 28rem;
    width: 100%;
}

.account-settings-form .mud-input-control {
    margin-bottom: 0.25rem;
}

.account-settings-submit.mud-button-root {
    align-self: flex-start;
    min-width: 11rem;
    text-transform: none !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    margin-top: 0.5rem;
}

/* --- Admin: users / roles — room to breathe (tables + modals) --- */
.app-admin-modal-overlay.mud-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.app-admin-modal-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    width: 100%;
    padding: clamp(1rem, 3vw, 2.5rem);
    box-sizing: border-box;
}

.app-admin-modal-paper {
    width: 100%;
    border-radius: 16px !important;
    box-sizing: border-box;
}

.app-admin-modal-paper--form {
    max-width: min(40rem, 100%);
}

.app-admin-modal-paper--wide {
    max-width: min(56rem, 100%);
}

.app-admin-modal-paper .mud-input-control {
    margin-bottom: 0.25rem;
}

.app-admin-cell-primary {
    color: #1e3a5f !important;
    font-weight: 600;
}

.app-admin-perm-scroll {
    max-height: min(60vh, 28rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    margin-right: -0.25rem;
}

.app-admin-perm-scroll .mud-checkbox {
    margin-bottom: 0.125rem;
}

.app-admin-table .mud-table-head .mud-table-cell {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    font-weight: 600;
}

.app-admin-table .mud-table-body .mud-table-cell {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    vertical-align: middle;
}

.app-admin-table .mud-table-container {
    overflow-x: auto;
}

.app-admin-role-pick {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    max-height: min(42vh, 18rem);
    overflow-y: auto;
}

.app-incidents-table {
    overflow-x: auto;
}

/* Let row action popovers escape horizontal scroll clipping */
.app-incidents-table .mud-table-container {
    overflow-x: auto;
    overflow-y: visible;
}

.app-table-row-actions-menu .mud-menu-list {
    min-width: 220px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.app-table-row-actions-menu .mud-menu-item {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    min-height: 2.75rem;
}

.app-table-row-actions-menu .app-table-row-actions-divider {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.app-incidents-cell-wrap {
    max-width: min(560px, 100%);
    white-space: normal;
    line-height: 1.35;
}

.app-incidents-promo {
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.app-incidents-promo-btn.mud-button-root {
    background: rgba(43, 89, 195, 0.12) !important;
    color: #1e3a5f !important;
    text-transform: none;
    font-weight: 600;
    border-radius: 10px !important;
}

.app-incidents-promo-btn-desk.mud-button-root {
    background: rgba(20, 184, 166, 0.18) !important;
    color: #0f766e !important;
    text-transform: none;
    font-weight: 600;
    border-radius: 10px !important;
}

.app-incidents-promo-art {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.app-incidents-promo-art--a {
    background: linear-gradient(145deg, #e0e7ff 0%, #f8fafc 55%, #fef3c7 100%);
}

.app-incidents-promo-art--b {
    background: linear-gradient(145deg, #ccfbf1 0%, #f8fafc 50%, #e0f2fe 100%);
}

.app-incidents-promo-art .promo-art-icon {
    font-size: 3.25rem !important;
    opacity: 0.85;
    color: #2b59c3 !important;
}

.app-incidents-promo-art--b .promo-art-icon {
    color: #0d9488 !important;
}