@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    color-scheme: light;
    --primary: #465fff;
    --primary-dark: #3641d9;
    --primary-light: #8092ff;
    --secondary: #7a5af8;
    --accent: #f79009;
    --success: #12b76a;
    --danger: #f04438;
    --warning: #f79009;
    --dark: #101828;
    --dark-light: #344054;
    --gray: #667085;
    --gray-light: #98a2b3;
    --light: #f2f4f7;
    --white: #fff;
    --bg-card: #fff;
    --text-main: #101828;
    --text-muted: #667085;
    --border-color: #e4e7ec;
    --sidebar-bg: #fff;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-lg: 0 12px 24px rgba(16, 24, 40, .08);
    --shadow-xl: 0 16px 32px rgba(16, 24, 40, .08);
    --radius: 10px;
    --radius-lg: 14px;
    --transition: all .2s ease;
}

html[data-theme="light"] {
    color-scheme: light;
}

html:not([data-theme="light"]) {
    color-scheme: dark;
    --dark: #1c2536;
    --dark-light: #293548;
    --gray: #9aa8bf;
    --gray-light: #9aa8bf;
    --light: #fff;
    --white: #fff;
    --bg-card: #202a3b;
    --text-main: #f9fafb;
    --text-muted: #9aa8bf;
    --border-color: #344054;
    --sidebar-bg: #1c2536;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
    --shadow: 0 1px 3px rgba(0, 0, 0, .24);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, .26);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, .26);
}

.app-role-admin,
.app-role-user {
    min-height: 100vh;
    background: #f4f7fb;
    color: var(--text-main);
    text-transform: none;
    font-family: Poppins, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-theme="light"] body.app-role-admin {
    --primary: #963f49;
    --primary-dark: #79323a;
    --primary-light: #bd7278;
    --secondary: #a9525b;
}

html[data-theme="light"] body.app-role-admin .admin-dashboard-hero {
    box-shadow: 0 12px 26px rgba(150, 63, 73, .18);
}

.app-role-admin::before,
.app-role-user::before {
    display: none;
}

.app-role-admin .navbar,
.app-role-user .navbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1003;
    width: 100%;
    height: 72px;
    padding: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
}

.app-role-admin .nav-container,
.app-role-user .nav-container {
    position: relative;
    width: 100%;
    height: 72px;
    max-width: none;
    padding: 0 28px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.app-role-admin .nav-logo,
.app-role-user .nav-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 7px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -.04em;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.app-role-admin .nav-logo::after,
.app-role-user .nav-logo::after {
    display: none;
}

.nav-logo__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: var(--primary);
}

.nav-logo__icon .action-icon {
    width: 21px;
    height: 21px;
}

.app-role-admin .nav-logo__text,
.app-role-user .nav-logo__text {
    color: var(--text-main);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.app-role-admin .nav-logo__text span,
.app-role-user .nav-logo__text span {
    color: var(--primary);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.app-role-admin .nav-menu,
.app-role-user .nav-menu {
    position: fixed;
    z-index: 1002;
    top: 72px;
    bottom: 0;
    left: 0;
    width: 264px;
    padding: 20px 16px;
    display: flex;
    flex: none;
    min-height: 0;
    align-items: stretch;
    align-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .22s ease;
    visibility: hidden;
}

.app-role-admin.sidebar-open .nav-menu,
.app-role-user.sidebar-open .nav-menu {
    transform: translateX(0);
    visibility: visible;
}

.sidebar-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-toggle:hover,
.sidebar-toggle[aria-expanded="true"] {
    color: var(--text-main);
    background: rgba(152, 162, 179, .12);
}

.sidebar-toggle .action-icon {
    width: 21px;
    height: 21px;
}

.nav-backdrop {
    position: fixed;
    z-index: 1001;
    inset: 72px 0 0;
    display: none;
    background: rgba(16, 24, 40, .58);
    border: 0;
    cursor: pointer;
}

.app-role-admin.sidebar-open .nav-backdrop,
.app-role-user.sidebar-open .nav-backdrop {
    display: block;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.app-role-admin .nav-menu::before,
.app-role-user .nav-menu::before {
    content: "MENU UTAMA";
    padding: 0 11px 8px;
    color: var(--gray);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.app-role-admin .nav-link,
.app-role-user .nav-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 11px;
    color: var(--text-muted);
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 550;
    line-height: 1.35;
    overflow: visible;
}

.app-role-admin .nav-link::before,
.app-role-user .nav-link::before {
    display: none;
}

.app-role-admin .nav-link:hover,
.app-role-user .nav-link:hover {
    color: var(--text-main);
    background: #f2f4f7;
}

.app-role-admin .nav-link--active,
.app-role-user .nav-link--active {
    color: var(--primary);
    background: #eef2ff;
    font-weight: 650;
}

.nav-link__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
}

.nav-link__icon .action-icon,
.app-role-admin .nav-link .action-icon,
.app-role-user .nav-link .action-icon {
    width: 19px;
    height: 19px;
}

.app-role-admin .nav-link--profile,
.app-role-user .nav-link--profile {
    width: 42px;
    min-width: 42px;
    justify-content: center;
    margin-top: 2px;
}

.nav-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.nav-profile__avatar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    color: var(--primary);
    background: #eef2ff;
    border-radius: 50%;
}

.nav-profile__avatar .action-icon {
    width: 18px;
    height: 18px;
}

.nav-profile__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.nav-profile__copy strong {
    overflow: hidden;
    color: var(--text-main);
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-profile__copy small {
    color: var(--text-muted);
    font-size: .72rem;
}

.app-role-admin .theme-toggle,
.app-role-user .theme-toggle {
    min-height: 39px;
    justify-content: flex-start;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font: inherit;
}

.app-role-admin .topbar-actions .theme-toggle,
.app-role-user .topbar-actions .theme-toggle {
    width: 40px;
    min-height: 40px;
    justify-content: center;
    padding: 8px;
    border: 0;
}

.topbar-actions .theme-toggle > span > span {
    display: none;
}

.app-role-admin .theme-toggle:hover,
.app-role-user .theme-toggle:hover {
    color: var(--text-main);
    background: #f9fafb;
}

.theme-toggle__light,
.theme-toggle__dark {
    align-items: center;
    gap: 10px;
}

html[data-theme="light"] .theme-toggle__light,
html:not([data-theme="light"]) .theme-toggle__dark {
    display: none;
}

html[data-theme="light"] .theme-toggle__dark,
html:not([data-theme="light"]) .theme-toggle__light {
    display: inline-flex;
}

.app-role-admin .btn-logout,
.app-role-user .btn-logout {
    justify-content: flex-start;
    color: #b42318 !important;
    background: #fef3f2 !important;
    box-shadow: none;
}

.app-role-admin .btn-logout:hover,
.app-role-user .btn-logout:hover {
    color: #912018 !important;
    background: #fee4e2 !important;
    transform: none;
}

.app-role-admin main.container,
.app-role-user main.container {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 68px);
    margin: 0;
    padding: 104px clamp(22px, 4vw, 64px) 48px;
    flex: 1;
}

.app-role-admin .footer,
.app-role-user .footer {
    margin-left: 0;
    padding: 0 28px 20px;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    font-size: .75rem;
    text-align: center;
}

.app-role-admin .footer .container,
.app-role-user .footer .container {
    max-width: none;
    padding: 0;
}

.app-role-admin h1,
.app-role-user h1,
.app-role-admin h2,
.app-role-user h2,
.app-role-admin h3,
.app-role-user h3,
.app-role-admin h4,
.app-role-user h4 {
    color: var(--text-main);
    font-family: inherit;
    letter-spacing: -.025em;
}

.app-role-admin p,
.app-role-user p {
    color: var(--text-muted);
}

.app-role-admin .page-header,
.app-role-user .page-header {
    margin-bottom: 24px;
    padding-bottom: 0;
}

.app-role-admin .page-header::after,
.app-role-user .page-header::after {
    display: none;
}

.app-role-admin .page-header h1,
.app-role-user .page-header h1 {
    margin-bottom: 5px;
    color: var(--text-main);
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    font-weight: 700;
}

.app-role-admin .page-header p,
.app-role-user .page-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: .94rem;
}

.app-role-admin .card,
.app-role-user .card,
.app-role-admin .admin-dashboard-panel,
.app-role-admin .admin-dashboard-shortcuts {
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.app-role-admin .card::before,
.app-role-user .card::before {
    display: none;
}

.app-role-admin .card:hover,
.app-role-user .card:hover {
    transform: none;
    box-shadow: var(--shadow);
}

.app-role-admin .card h2,
.app-role-user .card h2,
.app-role-admin .card h3,
.app-role-user .card h3 {
    color: var(--text-main);
}

.app-role-admin .admin-dashboard-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 190px;
    margin-bottom: 28px;
    padding: 30px 34px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(115deg, var(--primary-dark) 0%, var(--primary) 65%, var(--primary-light) 100%);
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(70, 95, 255, .18);
}

.app-role-admin .admin-dashboard-hero-copy,
.app-role-admin .admin-dashboard-hero-side {
    position: relative;
    z-index: 1;
}

.app-role-admin .admin-dashboard-hero h1 {
    margin: 10px 0 8px;
    color: #fff;
    font-size: clamp(1.65rem, 2.5vw, 2.2rem);
    font-weight: 700;
}

.app-role-admin .admin-dashboard-hero p {
    max-width: 580px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
}

.app-role-admin .admin-dashboard-eyebrow,
.app-role-admin .admin-dashboard-live,
.app-role-admin .admin-dashboard-date span {
    color: rgba(255, 255, 255, .78);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.app-role-admin .admin-dashboard-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.app-role-admin .admin-dashboard-live > span {
    width: 8px;
    height: 8px;
    background: #32d583;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(50, 213, 131, .16);
}

.app-role-admin .admin-dashboard-date {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right;
}

.app-role-admin .admin-dashboard-date strong {
    color: #fff;
    font-size: 1.2rem;
}

.app-role-admin .admin-dashboard-hero-decoration {
    position: absolute;
    right: 24%;
    bottom: -42px;
    color: rgba(255, 255, 255, .1);
}

.app-role-admin .admin-dashboard-hero-decoration .action-icon {
    width: 210px;
    height: 210px;
}

.app-role-admin .admin-dashboard-section,
.app-role-admin .admin-dashboard-breakdown,
.app-role-admin .admin-dashboard-recent {
    margin-bottom: 28px;
}

.app-role-admin .admin-dashboard-section-heading,
.app-role-admin .admin-dashboard-panel-heading,
.app-role-user .user-stat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.app-role-admin .admin-dashboard-section-heading h2,
.app-role-admin .admin-dashboard-panel-heading h2,
.app-role-user .user-stat-heading h2 {
    margin: 3px 0 0;
    color: var(--text-main);
    font-size: 1.12rem;
    font-weight: 650;
}

.app-role-admin .admin-dashboard-kicker,
.app-role-user .user-stat-heading > div > span {
    color: var(--text-muted);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.app-role-admin .admin-dashboard-text-link,
.app-role-user .user-stat-heading > a {
    color: var(--primary);
    font-size: .83rem;
    font-weight: 600;
    text-decoration: none;
}

.app-role-admin .admin-dashboard-queue-grid,
.app-role-admin .admin-dashboard-stat-grid,
.app-role-user .user-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.app-role-admin .admin-dashboard-stat-grid,
.app-role-user .user-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-role-admin .admin-dashboard-queue,
.app-role-admin .admin-dashboard-stat,
.app-role-user .user-stat-card {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px;
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.app-role-admin .admin-dashboard-queue {
    align-items: center;
    transition: var(--transition);
}

.app-role-admin .admin-dashboard-queue:hover {
    border-color: #c7d2fe;
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.app-role-admin .admin-dashboard-queue-icon,
.app-role-admin .admin-dashboard-stat-icon,
.app-role-user .user-stat-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    color: var(--primary);
    background: #eef2ff;
    border-radius: 11px;
}

.app-role-admin .admin-dashboard-queue-icon .action-icon,
.app-role-admin .admin-dashboard-stat-icon .action-icon,
.app-role-user .user-stat-icon .action-icon {
    width: 20px;
    height: 20px;
}

.app-role-admin .admin-dashboard-queue-copy,
.app-role-admin .admin-dashboard-stat {
    display: flex;
    flex-direction: column;
}

.app-role-admin .admin-dashboard-queue-copy strong,
.app-role-admin .admin-dashboard-stat > strong,
.app-role-user .user-stat-card > strong {
    color: var(--text-main);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
}

.app-role-admin .admin-dashboard-queue-copy > span,
.app-role-admin .admin-dashboard-stat-label,
.app-role-user .user-stat-label {
    color: var(--text-muted);
    font-size: .77rem;
}

.app-role-admin .admin-dashboard-queue-arrow {
    margin-left: auto;
    color: var(--gray-light);
    font-size: 1.2rem;
}

.app-role-admin .admin-dashboard-stat small,
.app-role-user .user-stat-card small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: .73rem;
}

.app-role-admin .admin-dashboard-stat {
    flex-direction: row;
    flex-wrap: wrap;
}

.app-role-admin .admin-dashboard-stat-label {
    flex: 1 1 calc(100% - 56px);
    padding-top: 2px;
}

.app-role-admin .admin-dashboard-stat > strong,
.app-role-admin .admin-dashboard-stat > small {
    width: 100%;
    margin-left: 55px;
}

.app-role-admin .admin-dashboard-insights {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
    gap: 20px;
    margin-bottom: 28px;
}

.app-role-admin .admin-dashboard-insights > *,
.app-role-admin .admin-dashboard-breakdown,
.app-role-admin .admin-dashboard-recent,
.app-role-admin .admin-dashboard-shortcuts {
    min-width: 0;
    padding: 22px;
}

.app-role-admin .admin-dashboard-shortcut-list {
    display: grid;
    gap: 4px;
}

.app-role-admin .admin-dashboard-shortcut-list > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
}

.app-role-admin .admin-dashboard-shortcut-list > a:last-child {
    border-bottom: 0;
}

.app-role-admin .admin-dashboard-shortcut-icon,
.app-role-admin .admin-dashboard-panel-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: #eef2ff;
    border-radius: 10px;
}

.app-role-admin .admin-dashboard-shortcut-list > a > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-role-admin .admin-dashboard-shortcut-list strong {
    font-size: .82rem;
}

.app-role-admin .admin-dashboard-shortcut-list small,
.app-role-admin .admin-dashboard-table small {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
}

.app-role-admin .admin-dashboard-shortcut-list b {
    margin-left: auto;
    color: var(--gray-light);
}

.app-role-admin .admin-dashboard-chart {
    min-height: 220px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 12px;
    padding: 18px 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.app-role-admin .admin-dashboard-chart-column {
    height: 100%;
    min-width: 24px;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.app-role-admin .admin-dashboard-chart-track {
    width: 36px;
    height: 140px;
    display: flex;
    align-items: flex-end;
    background: #f2f4f7;
    border-radius: 6px 6px 0 0;
}

.app-role-admin .admin-dashboard-chart-track > span {
    width: 100%;
    min-height: 3px;
    background: linear-gradient(180deg, var(--primary-light), var(--primary));
    border-radius: 6px 6px 0 0;
}

.app-role-admin .admin-dashboard-usage-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.app-role-admin .admin-dashboard-usage-summary > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: .75rem;
}

.app-role-admin .admin-dashboard-usage-summary strong {
    color: var(--text-main);
    font-size: 1.15rem;
}

.app-role-admin .admin-dashboard-usage-summary strong small {
    color: var(--text-muted);
    font-size: .7rem;
}

.app-role-admin .admin-dashboard-chart-value,
.app-role-admin .admin-dashboard-chart-label,
.app-role-admin .admin-dashboard-period {
    color: var(--text-muted);
    font-size: .68rem;
}

.app-role-admin .admin-dashboard-table-wrap,
.app-role-user .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.app-role-admin .admin-dashboard-table,
.app-role-user .table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-main);
    font-size: .82rem;
}

.app-role-admin .admin-dashboard-table th,
.app-role-admin .admin-dashboard-table td,
.app-role-user .table th,
.app-role-user .table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: middle;
}

.app-role-admin .admin-dashboard-table th,
.app-role-user .table th {
    color: var(--text-muted);
    background: #f9fafb;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-role-admin .admin-dashboard-table td,
.app-role-user .table td {
    color: var(--text-main);
}

.app-role-admin .admin-dashboard-status {
    display: inline-flex;
    padding: 4px 9px;
    color: #344054;
    background: #f2f4f7;
    border-radius: 999px;
    font-size: .69rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-role-admin .admin-dashboard-status--selesai,
.app-role-admin .admin-dashboard-status--disetujui_admin2 {
    color: #027a48;
    background: #ecfdf3;
}

.app-role-admin .admin-dashboard-status--pending,
.app-role-admin .admin-dashboard-status--laporan_terkirim {
    color: #b54708;
    background: #fffaeb;
}

.app-role-admin .admin-dashboard-status--ditolak {
    color: #b42318;
    background: #fef3f2;
}

.app-role-user .user-dashboard-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.app-role-user .user-dashboard-header__icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: #eef2ff;
    border-radius: 14px;
}

.app-role-user .user-dashboard-header__icon .action-icon {
    width: 25px;
    height: 25px;
}

.app-role-user .user-dashboard-header__eyebrow {
    color: var(--primary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.app-role-user .user-dashboard-header h1 {
    margin: 3px 0;
    color: var(--text-main);
    font-size: 1.8rem;
}

.app-role-user .user-dashboard-header p {
    margin: 0;
    color: var(--text-muted);
}

.app-role-user .user-stat-overview {
    margin-bottom: 25px;
}

.app-role-user .user-stat-card {
    flex-direction: column;
    gap: 8px;
}

.app-role-user .user-stat-icon {
    margin-bottom: 2px;
}

.app-role-admin .alert,
.app-role-user .alert {
    padding: 13px 16px;
    color: var(--text-main);
    background: #eff8ff;
    border: 1px solid #b2ddff;
    border-radius: 9px;
    box-shadow: none;
}

.app-role-admin .btn,
.app-role-user .btn {
    box-shadow: none;
}

.app-role-admin .btn-primary,
.app-role-user .btn-primary {
    color: #fff;
    background: var(--primary);
}

.app-role-admin .btn-primary:hover,
.app-role-user .btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 10px rgba(70, 95, 255, .18);
    transform: translateY(-1px);
}

.app-role-admin input,
.app-role-admin select,
.app-role-admin textarea,
.app-role-user input,
.app-role-user select,
.app-role-user textarea {
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: none;
}

.app-role-admin input:focus,
.app-role-admin select:focus,
.app-role-admin textarea:focus,
.app-role-user input:focus,
.app-role-user select:focus,
.app-role-user textarea:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(70, 95, 255, .12);
}

.app-role-admin .modal-content,
.app-role-user .modal-content {
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}

.app-role-admin .modal-content h3,
.app-role-user .modal-content h3 {
    color: var(--text-main);
}

.auth-page {
    color: var(--text-main);
    background: #f4f7fb;
    text-transform: none;
    font-family: Poppins, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.auth-page::before {
    display: none;
}

.auth-page .login-card {
    max-width: 460px;
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.auth-page .login-card h2,
.auth-page .login-card h3 {
    color: var(--text-main);
    font-family: inherit;
}

.auth-page .login-card p,
.auth-page .login-card label {
    color: var(--text-muted);
}

.auth-page .login-brand-mark {
    color: var(--primary);
    background: #eef2ff;
}

.auth-page input,
.auth-page select,
.auth-page textarea {
    color: var(--text-main);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.auth-page input:focus,
.auth-page select:focus,
.auth-page textarea:focus {
    border-color: var(--primary);
    outline: 3px solid rgba(70, 95, 255, .12);
}

.auth-page .btn-primary {
    color: #fff;
    background: var(--primary);
    box-shadow: none;
}

.auth-page .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.auth-page a {
    color: var(--primary);
}

html:not([data-theme="light"]) .app-role-admin,
html:not([data-theme="light"]) .app-role-user,
html:not([data-theme="light"]) .auth-page {
    background: #1c2536;
}

html:not([data-theme="light"]) .app-role-admin .nav-link:hover,
html:not([data-theme="light"]) .app-role-user .nav-link:hover,
html:not([data-theme="light"]) .app-role-admin .theme-toggle:hover,
html:not([data-theme="light"]) .app-role-user .theme-toggle:hover,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-table th,
html:not([data-theme="light"]) .app-role-user .table th,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-chart-track {
    background: #293548;
}

html:not([data-theme="light"]) .app-role-admin .nav-link--active,
html:not([data-theme="light"]) .app-role-user .nav-link--active,
html:not([data-theme="light"]) .nav-profile__avatar,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-queue-icon,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-stat-icon,
html:not([data-theme="light"]) .app-role-user .user-stat-icon,
html:not([data-theme="light"]) .app-role-user .user-dashboard-header__icon,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-shortcut-icon,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-panel-icon {
    color: #aab8ff;
    background: #27346b;
}

html:not([data-theme="light"]) .app-role-admin .btn-logout,
html:not([data-theme="light"]) .app-role-user .btn-logout {
    color: #fda29b !important;
    background: #55160c !important;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status {
    color: #d0d5dd;
    background: #344054;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status--selesai,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status--disetujui_admin2 {
    color: #6ce9a6;
    background: #054f31;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status--pending,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status--laporan_terkirim {
    color: #fec84b;
    background: #7a2e0e;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status--ditolak {
    color: #fda29b;
    background: #7a271a;
}

html:not([data-theme="light"]) .app-role-admin .alert,
html:not([data-theme="light"]) .app-role-user .alert {
    color: #b2ddff;
    background: #194185;
    border-color: #1849a9;
}

html:not([data-theme="light"]) .auth-page .login-brand-mark {
    color: #aab8ff;
    background: #27346b;
}

@media (max-width: 1100px) {
    .app-role-admin .admin-dashboard-stat-grid,
    .app-role-user .user-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-role-admin .admin-dashboard-insights {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .app-role-admin .navbar,
    .app-role-user .navbar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 64px;
        border-bottom: 1px solid var(--border-color);
    }

    .app-role-admin .nav-container,
    .app-role-user .nav-container {
        height: 64px;
        padding: 0 16px;
        gap: 8px;
    }

    .app-role-admin .nav-logo,
    .app-role-user .nav-logo {
        padding: 0;
        font-size: .95rem;
    }

    .nav-logo__icon {
        width: 30px;
        height: 30px;
    }

    .app-role-admin .nav-menu,
    .app-role-user .nav-menu {
        top: 64px;
        width: min(290px, 86vw);
        flex: none;
    }

    .nav-backdrop {
        inset: 64px 0 0;
    }

    .topbar-actions {
        gap: 8px;
    }

    .topbar-actions .nav-profile__copy {
        display: none;
    }

    .app-role-admin main.container,
    .app-role-user main.container {
        width: 100%;
        min-height: calc(100vh - 150px);
        margin: 0;
        padding: 88px 18px 36px;
    }

    .app-role-admin .footer,
    .app-role-user .footer {
        margin-left: 0;
    }
}

@media (max-width: 560px) {
    .app-role-admin .nav-container,
    .app-role-user .nav-container {
        padding: 0 10px;
    }

    .app-role-admin .nav-logo,
    .app-role-user .nav-logo {
        gap: 6px;
        font-size: .83rem;
    }

    .app-role-admin .topbar-actions,
    .app-role-user .topbar-actions {
        gap: 2px;
    }

    .app-role-admin .topbar-actions .nav-profile__avatar,
    .app-role-user .topbar-actions .nav-profile__avatar {
        width: 32px;
        height: 32px;
    }

    .app-role-admin main.container,
    .app-role-user main.container {
        padding: 82px 14px 30px;
    }

    .app-role-admin .admin-dashboard-hero {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 23px;
    }

    .app-role-admin .admin-dashboard-date {
        text-align: left;
    }

    .app-role-admin .admin-dashboard-queue-grid,
    .app-role-admin .admin-dashboard-stat-grid,
    .app-role-user .user-stat-grid {
        grid-template-columns: 1fr;
    }

    .app-role-admin .admin-dashboard-section-heading,
    .app-role-admin .admin-dashboard-panel-heading,
    .app-role-user .user-stat-heading {
        align-items: flex-start;
    }

    .app-role-user .user-dashboard-header {
        align-items: flex-start;
    }

    .app-role-user .user-dashboard-header h1 {
        font-size: 1.4rem;
    }

    .app-role-admin .admin-dashboard-breakdown,
    .app-role-admin .admin-dashboard-recent,
    .app-role-admin .admin-dashboard-shortcuts {
        padding: 16px;
    }
}

@media print {
    .app-role-admin main.container,
    .app-role-user main.container {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero {
    color: #101828;
    background: linear-gradient(120deg, #fff, #eef2ff 58%, #f8fafc);
    border: 1px solid #e4e7ec;
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero h1 {
    color: #101828;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero p {
    color: #667085;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-eyebrow,
html[data-theme="light"] .app-role-admin .admin-dashboard-live,
html[data-theme="light"] .app-role-admin .admin-dashboard-date span {
    color: #667085;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-date strong {
    color: #101828;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero-decoration {
    color: rgba(70, 95, 255, .08);
}

:root {
    --primary: #4099ff;
    --primary-dark: #1677d2;
    --primary-light: #73b4ff;
    --secondary: #536dfe;
    --accent: #ffb64d;
    --success: #2ed8b6;
    --danger: #ff5370;
    --warning: #ffb64d;
    --dark: #222;
    --dark-light: #39465f;
    --gray: #748892;
    --gray-light: #9aa8bf;
    --light: #f4f7fa;
    --bg-card: #fff;
    --text-main: #222;
    --text-muted: #748892;
    --border-color: #e6e9ed;
    --sidebar-bg: #fff;
    --radius: 4px;
    --radius-lg: 6px;
}

html:not([data-theme="light"]) {
    --dark: #1c2536;
    --dark-light: #293548;
    --gray: #a7b3c5;
    --gray-light: #a7b3c5;
    --light: #e8edf5;
    --bg-card: #252f40;
    --text-main: #f1f5f9;
    --text-muted: #a7b3c5;
    --border-color: #3a4659;
    --sidebar-bg: #202a3b;
}

.app-role-admin,
.app-role-user {
    background: #f4f7fa;
    font-family: Poppins, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-role-admin .navbar,
.app-role-user .navbar {
    position: fixed;
    inset: 0 0 auto 264px;
    z-index: 1003;
    width: calc(100% - 264px);
    height: 70px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(4, 26, 55, .08);
}

.app-role-admin .nav-container,
.app-role-user .nav-container {
    height: 70px;
    padding: 0 28px;
    justify-content: space-between;
}

.app-role-admin .nav-container .nav-logo--topbar,
.app-role-user .nav-container .nav-logo--topbar {
    display: none;
}

.app-role-admin .nav-menu,
.app-role-user .nav-menu {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1004;
    width: 264px;
    padding: 18px 14px 20px;
    gap: 5px;
    visibility: visible;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 8px rgba(4, 26, 55, .08);
    transform: translateX(0);
    transition: width .2s ease, transform .2s ease;
}

.app-role-admin .nav-menu::before,
.app-role-user .nav-menu::before {
    display: none;
}

.app-role-admin .topbar-actions .nav-profile,
.app-role-user .topbar-actions .nav-profile {
    display: flex;
}

.app-role-admin .nav-menu__caption,
.app-role-user .nav-menu__caption {
    padding: 18px 13px 8px;
    color: #748892;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.app-role-admin .nav-menu .nav-logo,
.app-role-user .nav-menu .nav-logo {
    position: static;
    min-height: 58px;
    justify-content: flex-start;
    padding: 0 10px 12px;
    color: var(--primary);
    font-size: 1.4rem;
    transform: none;
}

.app-role-admin .nav-menu .nav-logo__text,
.app-role-user .nav-menu .nav-logo__text {
    font-size: 1.6rem;
}

.app-role-admin .nav-logo__icon,
.app-role-user .nav-logo__icon {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: linear-gradient(135deg, #4099ff, #2ed8b6);
}

.app-role-admin .nav-menu .nav-link,
.app-role-user .nav-menu .nav-link {
    min-height: 42px;
    padding: 10px 13px;
    color: #536174;
    border-radius: 4px;
    font-size: .84rem;
    font-weight: 500;
    transition: color .18s ease, background .18s ease;
}

.app-role-admin .nav-menu .nav-link:hover,
.app-role-user .nav-menu .nav-link:hover {
    color: var(--primary);
    background: rgba(64, 153, 255, .08);
}

.app-role-admin .nav-menu .nav-link--active,
.app-role-user .nav-menu .nav-link--active {
    color: #fff;
    background: linear-gradient(110deg, #4099ff, #536dfe);
    box-shadow: 0 4px 10px rgba(64, 153, 255, .2);
}

.app-role-admin .nav-menu .nav-link--active .action-icon,
.app-role-user .nav-menu .nav-link--active .action-icon {
    color: #fff;
}

.app-role-admin .nav-menu .nav-link--profile,
.app-role-user .nav-menu .nav-link--profile {
    width: auto;
    justify-content: flex-start;
}

.app-role-admin .sidebar-toggle,
.app-role-user .sidebar-toggle {
    color: var(--text-muted);
}

.app-role-admin .topbar-actions,
.app-role-user .topbar-actions {
    gap: 18px;
}

.app-role-admin .nav-profile__avatar,
.app-role-user .nav-profile__avatar {
    width: 36px;
    height: 36px;
    color: #4099ff;
    background: rgba(64, 153, 255, .1);
}

.app-role-admin main.container,
.app-role-user main.container {
    width: calc(100% - 264px);
    min-height: calc(100vh - 70px);
    margin: 0 0 0 264px;
    padding: 98px clamp(22px, 3vw, 42px) 42px;
}

.app-role-admin .footer,
.app-role-user .footer {
    margin-left: 264px;
}

.app-role-admin .footer .container,
.app-role-user .footer .container {
    max-width: none;
}

.app-role-admin .card,
.app-role-user .card,
.app-role-admin .admin-dashboard-panel,
.app-role-admin .admin-dashboard-shortcuts {
    border-radius: 6px;
    border-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(4, 26, 55, .08);
}

.app-role-admin .admin-dashboard-hero {
    min-height: 156px;
    margin-bottom: 24px;
    padding: 26px 30px;
    background: linear-gradient(120deg, #4099ff, #536dfe);
    border: 0;
    border-radius: 6px;
    box-shadow: 0 5px 16px rgba(64, 153, 255, .2);
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero {
    color: #fff;
    background: linear-gradient(120deg, #4099ff, #536dfe);
    border: 0;
    box-shadow: 0 5px 16px rgba(64, 153, 255, .2);
}

.app-role-admin .admin-dashboard-hero h1 {
    font-size: 1.6rem;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero h1,
html[data-theme="light"] .app-role-admin .admin-dashboard-hero p,
html[data-theme="light"] .app-role-admin .admin-dashboard-hero p strong,
html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow,
html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-live,
html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-date span,
html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-date strong {
    color: #fff;
}

.app-role-admin .admin-dashboard-hero p,
.app-role-admin .admin-dashboard-hero p strong,
.app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow,
.app-role-admin .admin-dashboard-hero .admin-dashboard-live,
.app-role-admin .admin-dashboard-hero .admin-dashboard-date span,
.app-role-admin .admin-dashboard-hero .admin-dashboard-date strong {
    color: #fff;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date {
    padding: 10px 14px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 5px;
}

.app-role-admin .admin-dashboard-hero-decoration {
    color: rgba(255, 255, 255, .13);
}

.app-role-admin .admin-dashboard-section-heading h2,
.app-role-admin .admin-dashboard-panel-heading h2,
.app-role-user .user-stat-heading h2 {
    font-size: 1rem;
}

.app-role-admin .admin-dashboard-queue,
.app-role-admin .admin-dashboard-stat,
.app-role-user .user-stat-card {
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(4, 26, 55, .08);
}

.app-role-admin .admin-dashboard-queue-icon,
.app-role-admin .admin-dashboard-stat-icon,
.app-role-user .user-stat-icon {
    border-radius: 5px;
}

.app-role-admin .admin-dashboard-stat--indigo .admin-dashboard-stat-icon,
.app-role-user .user-stat-card--blue .user-stat-icon {
    color: #4099ff;
    background: rgba(64, 153, 255, .12);
}

.app-role-admin .admin-dashboard-stat--cyan .admin-dashboard-stat-icon,
.app-role-user .user-stat-card--cyan .user-stat-icon {
    color: #00bcd4;
    background: rgba(0, 188, 212, .12);
}

.app-role-admin .admin-dashboard-stat--emerald .admin-dashboard-stat-icon,
.app-role-user .user-stat-card--green .user-stat-icon {
    color: #2ed8b6;
    background: rgba(46, 216, 182, .12);
}

.app-role-admin .admin-dashboard-stat--violet .admin-dashboard-stat-icon,
.app-role-user .user-stat-card--amber .user-stat-icon {
    color: #ffb64d;
    background: rgba(255, 182, 77, .14);
}

.app-role-admin .admin-dashboard-table th,
.app-role-user .table th {
    color: #536174;
    background: #f5f7fa;
}

.app-role-admin .admin-dashboard-table td,
.app-role-user .table td {
    color: var(--text-main);
}

.app-role-admin .admin-dashboard-status {
    padding: 4px 9px;
    border: 0;
}

.app-role-admin .admin-dashboard-status--pending,
.app-role-admin .admin-dashboard-status--laporan_terkirim {
    color: #9a6700;
    background: #fff3d6;
}

.app-role-admin .admin-dashboard-status--selesai,
.app-role-admin .admin-dashboard-status--disetujui_admin2 {
    color: #12805c;
    background: #dcf8ef;
}

.app-role-admin .admin-dashboard-status--ditolak {
    color: #c93756;
    background: #ffebef;
}

.app-role-admin .btn-primary,
.app-role-user .btn-primary {
    background: linear-gradient(110deg, #4099ff, #536dfe);
}

.app-role-admin input,
.app-role-admin select,
.app-role-admin textarea,
.app-role-user input,
.app-role-user select,
.app-role-user textarea {
    border-radius: 4px;
}

.app-role-admin .btn,
.app-role-user .btn {
    border-radius: 4px;
}

.app-role-admin .theme-toggle,
.app-role-user .theme-toggle {
    color: var(--text-muted);
}

html:not([data-theme="light"]) .app-role-admin,
html:not([data-theme="light"]) .app-role-user {
    background: #1c2536;
}

html:not([data-theme="light"]) .app-role-admin .navbar,
html:not([data-theme="light"]) .app-role-user .navbar,
html:not([data-theme="light"]) .app-role-admin .nav-menu,
html:not([data-theme="light"]) .app-role-user .nav-menu,
html:not([data-theme="light"]) .app-role-admin .card,
html:not([data-theme="light"]) .app-role-user .card,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-panel,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-shortcuts,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-queue,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-stat,
html:not([data-theme="light"]) .app-role-user .user-stat-card {
    background-color: #202a3b;
    border-color: #3a4659;
}

html:not([data-theme="light"]) .app-role-admin .nav-menu .nav-link,
html:not([data-theme="light"]) .app-role-user .nav-menu .nav-link {
    color: #a7b3c5;
}

html:not([data-theme="light"]) .app-role-admin .nav-menu .nav-link:hover,
html:not([data-theme="light"]) .app-role-user .nav-menu .nav-link:hover {
    color: #73b4ff;
    background: rgba(64, 153, 255, .12);
}

html:not([data-theme="light"]) .app-role-admin .nav-menu .nav-link--active,
html:not([data-theme="light"]) .app-role-user .nav-menu .nav-link--active {
    color: #fff;
    background: linear-gradient(110deg, #2684e8, #536dfe);
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-table th,
html:not([data-theme="light"]) .app-role-user .table th,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-chart-track {
    color: #c8d1df;
    background: #293548;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-table td,
html:not([data-theme="light"]) .app-role-user .table td {
    color: #e8edf5;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-queue-copy strong,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-stat > strong,
html:not([data-theme="light"]) .app-role-user .user-stat-card > strong {
    color: #f1f5f9;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status--pending,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status--laporan_terkirim {
    color: #ffd166;
    background: #59451d;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status--selesai,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status--disetujui_admin2 {
    color: #70e1c4;
    background: #164b42;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-status--ditolak {
    color: #ff91a4;
    background: #572c39;
}

html:not([data-theme="light"]) .app-role-admin input,
html:not([data-theme="light"]) .app-role-admin select,
html:not([data-theme="light"]) .app-role-admin textarea,
html:not([data-theme="light"]) .app-role-user input,
html:not([data-theme="light"]) .app-role-user select,
html:not([data-theme="light"]) .app-role-user textarea {
    color: #f1f5f9;
    background: #1c2536;
    border-color: #3a4659;
}

@media (min-width: 992px) {
    .app-role-admin.sidebar-collapsed .nav-menu,
    .app-role-user.sidebar-collapsed .nav-menu {
        width: 72px;
        padding-right: 9px;
        padding-left: 9px;
    }

    .app-role-admin.sidebar-collapsed .nav-menu .nav-logo__text,
    .app-role-user.sidebar-collapsed .nav-menu .nav-logo__text,
    .app-role-admin.sidebar-collapsed .nav-menu__caption,
    .app-role-user.sidebar-collapsed .nav-menu__caption,
    .app-role-admin.sidebar-collapsed .nav-menu .nav-link:not(.nav-link--profile),
    .app-role-user.sidebar-collapsed .nav-menu .nav-link:not(.nav-link--profile) {
        font-size: 0;
    }

    .app-role-admin.sidebar-collapsed .nav-menu .nav-link,
    .app-role-user.sidebar-collapsed .nav-menu .nav-link {
        justify-content: center;
        gap: 0;
        padding-right: 8px;
        padding-left: 8px;
    }

    .app-role-admin.sidebar-collapsed .nav-menu .nav-link__icon,
    .app-role-user.sidebar-collapsed .nav-menu .nav-link__icon {
        flex: 0 0 20px;
    }

    .app-role-admin.sidebar-collapsed .nav-menu .nav-logo,
    .app-role-user.sidebar-collapsed .nav-menu .nav-logo {
        justify-content: center;
        padding-right: 0;
        padding-left: 0;
    }

    .app-role-admin.sidebar-collapsed .navbar,
    .app-role-user.sidebar-collapsed .navbar {
        left: 72px;
        width: calc(100% - 72px);
    }

    .app-role-admin.sidebar-collapsed main.container,
    .app-role-user.sidebar-collapsed main.container {
        width: calc(100% - 72px);
        margin-left: 72px;
    }

    .app-role-admin.sidebar-collapsed .footer,
    .app-role-user.sidebar-collapsed .footer {
        margin-left: 72px;
    }
}

@media (max-width: 991px) {
    .app-role-admin .navbar,
    .app-role-user .navbar {
        inset: 0 0 auto;
        width: 100%;
        height: 64px;
    }

    .app-role-admin .nav-container,
    .app-role-user .nav-container {
        height: 64px;
        padding: 0 16px;
    }

    .app-role-admin .nav-container .nav-logo--topbar,
    .app-role-user .nav-container .nav-logo--topbar {
        position: static;
        display: flex;
        gap: 8px;
        padding: 0;
        font-size: .95rem;
        transform: none;
    }

    .app-role-admin .nav-menu,
    .app-role-user .nav-menu {
        inset: 64px auto 0 0;
        width: min(280px, 86vw);
        visibility: hidden;
        transform: translateX(-105%);
    }

    .app-role-admin.sidebar-open .nav-menu,
    .app-role-user.sidebar-open .nav-menu {
        visibility: visible;
        transform: translateX(0);
    }

    .app-role-admin .nav-menu .nav-logo,
    .app-role-user .nav-menu .nav-logo {
        display: flex;
    }

    .app-role-admin.sidebar-open .nav-backdrop,
    .app-role-user.sidebar-open .nav-backdrop {
        position: fixed;
        z-index: 1001;
        inset: 64px 0 0;
        display: block;
        background: rgba(16, 24, 40, .52);
    }

    .app-role-admin main.container,
    .app-role-user main.container {
        width: 100%;
        margin: 0;
        padding: 90px 22px 36px;
    }

    .app-role-admin .footer,
    .app-role-user .footer {
        margin-left: 0;
    }

    .app-role-admin .topbar-actions,
    .app-role-user .topbar-actions {
        gap: 8px;
    }
}

@media (max-width: 560px) {
    .app-role-admin .nav-container,
    .app-role-user .nav-container {
        padding: 0 10px;
    }

    .app-role-admin .nav-profile__copy,
    .app-role-user .nav-profile__copy {
        display: none;
    }

    .app-role-admin .topbar-actions,
    .app-role-user .topbar-actions {
        gap: 3px;
    }

    .app-role-admin main.container,
    .app-role-user main.container {
        padding: 82px 14px 30px;
    }

    .app-role-admin .admin-dashboard-hero {
        padding: 20px;
    }
}

html[data-theme="light"] body.app-role-admin,
html[data-theme="light"] body.app-role-user {
    color: #222;
    background: #f4f7fa;
}

html:not([data-theme="light"]) body.app-role-admin,
html:not([data-theme="light"]) body.app-role-user {
    color: #e8edf5;
    background: #1c2536;
}

html[data-theme="light"] body.auth-page {
    color: #222;
    background: #f4f7fa;
}

html:not([data-theme="light"]) body.auth-page {
    color: #e8edf5;
    background: #1c2536;
}

html[data-theme="light"] .app-role-admin .nav-menu,
html[data-theme="light"] .app-role-user .nav-menu {
    background: #fff;
}

html[data-theme="light"] .app-role-admin .navbar,
html[data-theme="light"] .app-role-user .navbar {
    background: #fff;
}

html[data-theme="light"] .app-role-admin .footer,
html[data-theme="light"] .app-role-user .footer {
    background: transparent;
}

html[data-theme="light"] .app-role-admin .nav-menu .nav-link,
html[data-theme="light"] .app-role-user .nav-menu .nav-link {
    color: #536174;
    background-color: transparent;
}

html[data-theme="light"] .app-role-admin .nav-menu .nav-link--active,
html[data-theme="light"] .app-role-user .nav-menu .nav-link--active,
html[data-theme="light"] .app-role-admin .nav-menu .nav-link--active:not(.btn-logout),
html[data-theme="light"] .app-role-user .nav-menu .nav-link--active:not(.btn-logout) {
    color: #fff;
    background: linear-gradient(110deg, #4099ff, #536dfe);
}

html[data-theme="light"] .app-role-admin .nav-menu__caption,
html[data-theme="light"] .app-role-user .nav-menu__caption {
    color: #667085;
}

html:not([data-theme="light"]) .app-role-admin .nav-menu__caption,
html:not([data-theme="light"]) .app-role-user .nav-menu__caption {
    color: #a7b3c5;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-table th {
    color: #475569;
}

html[data-theme="light"] .app-role-admin input::placeholder,
html[data-theme="light"] .app-role-admin textarea::placeholder,
html[data-theme="light"] .app-role-user input::placeholder,
html[data-theme="light"] .app-role-user textarea::placeholder,
html[data-theme="light"] body.auth-page input::placeholder,
html[data-theme="light"] body.auth-page textarea::placeholder {
    color: #667085;
    opacity: 1;
}

html:not([data-theme="light"]) .app-role-admin input::placeholder,
html:not([data-theme="light"]) .app-role-admin textarea::placeholder,
html:not([data-theme="light"]) .app-role-user input::placeholder,
html:not([data-theme="light"]) .app-role-user textarea::placeholder,
html:not([data-theme="light"]) body.auth-page input::placeholder,
html:not([data-theme="light"]) body.auth-page textarea::placeholder {
    color: #a7b3c5;
    opacity: 1;
}

.app-role-admin .admin-dashboard {
    display: grid;
    gap: 24px;
}

.app-role-admin .admin-dashboard > .alert,
.app-role-admin .admin-dashboard-hero,
.app-role-admin .admin-dashboard-section,
.app-role-admin .admin-dashboard-insights,
.app-role-admin .admin-dashboard-breakdown,
.app-role-admin .admin-dashboard-recent {
    margin-bottom: 0;
}

.app-role-admin .admin-dashboard-hero {
    min-height: 164px;
    padding: 28px clamp(22px, 3vw, 36px);
}

.app-role-admin .admin-dashboard-section-heading,
.app-role-admin .admin-dashboard-panel-heading {
    margin-bottom: 14px;
}

.app-role-admin .admin-dashboard-queue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.app-role-admin .admin-dashboard-queue {
    min-height: 92px;
    padding: 16px;
}

.app-role-admin .admin-dashboard-queue-copy {
    min-width: 0;
}

.app-role-admin .admin-dashboard-queue-copy > span {
    line-height: 1.45;
}

.app-role-admin .admin-dashboard-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.app-role-admin .admin-dashboard-stat {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 3px 12px;
    min-height: 132px;
    padding: 17px;
}

.app-role-admin .admin-dashboard-stat-icon {
    grid-column: 1;
    grid-row: 1 / 4;
}

.app-role-admin .admin-dashboard-stat-label,
.app-role-admin .admin-dashboard-stat > strong,
.app-role-admin .admin-dashboard-stat > small {
    width: auto;
    margin: 0;
    grid-column: 2;
}

.app-role-admin .admin-dashboard-stat-label {
    align-self: end;
}

.app-role-admin .admin-dashboard-stat > strong {
    font-size: 1.45rem;
}

.app-role-admin .admin-dashboard-insights {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
    align-items: stretch;
    gap: 18px;
    margin-bottom: 0;
}

.app-role-admin .admin-dashboard-insights > .admin-dashboard-panel {
    min-width: 0;
    margin: 0;
    padding: 22px;
}

.app-role-admin .admin-dashboard-shortcuts {
    height: 100%;
}

.app-role-admin .admin-dashboard-shortcut-list > a {
    min-height: 54px;
}

.app-role-admin .admin-dashboard-breakdown,
.app-role-admin .admin-dashboard-recent {
    padding: 22px;
}

.app-role-admin .admin-dashboard-breakdown-table {
    min-width: 850px;
}

.app-role-admin .admin-dashboard-recent .admin-dashboard-table {
    min-width: 740px;
}

.app-role-admin .admin-dashboard-table tbody tr {
    transition: background-color .16s ease;
}

.app-role-admin .admin-dashboard-table tbody tr:hover {
    background: rgba(64, 153, 255, .045);
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-table tbody tr:hover {
    background: rgba(115, 180, 255, .06);
}

@media (max-width: 1100px) {
    .app-role-admin .admin-dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-role-admin .admin-dashboard-insights {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .app-role-admin .admin-dashboard {
        gap: 20px;
    }

    .app-role-admin .admin-dashboard-queue-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-role-admin .admin-dashboard-hero {
        gap: 18px;
        padding: 22px;
    }

    .app-role-admin .admin-dashboard-section-heading,
    .app-role-admin .admin-dashboard-panel-heading {
        gap: 10px;
    }

    .app-role-admin .admin-dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .app-role-admin .admin-dashboard-stat {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 3px 9px;
        min-height: 118px;
        padding: 13px;
    }

    .app-role-admin .admin-dashboard-stat-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .app-role-admin .admin-dashboard-stat > strong {
        font-size: 1.25rem;
    }

    .app-role-admin .admin-dashboard-insights > .admin-dashboard-panel,
    .app-role-admin .admin-dashboard-breakdown,
    .app-role-admin .admin-dashboard-recent {
        padding: 16px;
    }
}

@media (max-width: 380px) {
    .app-role-admin .admin-dashboard-stat-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.app-role-admin .admin-vehicles-page {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.app-role-admin .admin-vehicles-page .vehicle-page-header {
    min-height: 150px;
    margin: 0;
    padding: 26px clamp(22px, 3vw, 36px);
    border: 0;
    border-radius: 6px;
    background: linear-gradient(110deg, #4099ff, #536dfe);
    box-shadow: 0 5px 16px rgba(64, 153, 255, .2);
}

.app-role-admin .admin-vehicles-page .vehicle-page-header__icon {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: none;
}

.app-role-admin .admin-vehicles-page .vehicle-page-header__eyebrow {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .82);
}

.app-role-admin .admin-vehicles-page .vehicle-page-header h1 {
    margin-bottom: 6px;
    color: #fff;
    font-family: inherit;
    font-size: clamp(1.45rem, 2.5vw, 1.8rem);
    letter-spacing: -.025em;
}

.app-role-admin .admin-vehicles-page .vehicle-page-header p {
    color: rgba(255, 255, 255, .88);
    font-size: .85rem;
}

.app-role-admin .vehicle-page-add {
    flex: 0 0 auto;
    gap: 8px;
    min-height: 42px;
    margin-left: auto;
    padding: 0 15px;
    color: #344054;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .75);
    font-weight: 600;
}

.app-role-admin .admin-vehicles-page .vehicle-page-add:hover {
    color: #1677d2;
    background: #f5faff;
}

.app-role-admin .admin-vehicles-page > .alert {
    margin: 0;
}

.app-role-admin .vehicle-list-card {
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

.app-role-admin .vehicle-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--border-color);
}

.app-role-admin .vehicle-list-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.app-role-admin .vehicle-list-actions .vehicle-page-add {
    min-height: 38px;
}

.app-role-admin .vehicle-list-kicker {
    color: var(--text-muted);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .09em;
}

.app-role-admin .vehicle-list-heading h2 {
    margin: 4px 0;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 650;
}

.app-role-admin .vehicle-list-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
}

.app-role-admin .vehicle-count {
    flex: 0 0 auto;
    padding: 6px 11px;
    color: #1677d2;
    background: rgba(64, 153, 255, .1);
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
}

.app-role-admin .vehicle-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.app-role-admin .vehicle-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: collapse;
}

.app-role-admin .vehicle-table th,
.app-role-admin .vehicle-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.app-role-admin .vehicle-table th {
    color: var(--text-muted);
    background: rgba(148, 163, 184, .08);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-role-admin .vehicle-table td {
    color: var(--text-main);
    font-size: .82rem;
}

.app-role-admin .vehicle-table tbody tr:last-child td {
    border-bottom: 0;
}

.app-role-admin .vehicle-table tbody tr:hover {
    background: rgba(64, 153, 255, .045);
}

.app-role-admin .vehicle-table td strong {
    color: var(--text-main);
    font-weight: 650;
    letter-spacing: .025em;
}

.app-role-admin .vehicle-table .vehicle-actions {
    white-space: nowrap;
}

.app-role-admin .vehicle-actions form {
    display: inline-flex;
    margin-left: 5px;
}

.app-role-admin .vehicle-actions .icon-button {
    width: 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
}

.app-role-admin .vehicle-table .text-center {
    padding: 42px 18px;
    color: var(--text-muted);
    text-align: center;
}

html:not([data-theme="light"]) .app-role-admin .vehicle-count {
    color: #9acaff;
    background: rgba(64, 153, 255, .16);
}

html:not([data-theme="light"]) .app-role-admin .vehicle-table tbody tr:hover {
    background: rgba(115, 180, 255, .06);
}

@media (max-width: 640px) {
    .app-role-admin .admin-vehicles-page {
        gap: 18px;
    }

    .app-role-admin .admin-vehicles-page .vehicle-page-header {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
        padding: 20px;
    }

    .app-role-admin .admin-vehicles-page .vehicle-page-header__copy {
        flex: 1 1 calc(100% - 60px);
    }

    .app-role-admin .vehicle-list-heading {
        flex-wrap: wrap;
    }

    .app-role-admin .vehicle-list-actions {
        width: 100%;
        justify-content: space-between;
    }

    .app-role-admin .vehicle-list-heading {
        padding: 18px 16px;
    }
}

@media (max-width: 380px) {
    .app-role-admin .admin-vehicles-page .vehicle-page-header__icon {
        width: 40px;
        height: 40px;
    }

    .app-role-admin .vehicle-list-actions {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .app-role-admin .vehicle-list-actions .vehicle-page-add {
        width: 100%;
        justify-content: center;
    }
}

.app-role-admin .admin-vouchers-page {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.app-role-admin .admin-vouchers-page > .voucher-page-header,
.app-role-admin .admin-vouchers-page > .alert {
    margin: 0;
}

.app-role-admin .admin-vouchers-page > .voucher-page-header {
    min-height: 156px;
    padding: 26px clamp(22px, 3vw, 36px);
    border: 0;
    border-radius: 6px;
    background: linear-gradient(110deg, #4099ff, #536dfe);
    box-shadow: 0 5px 16px rgba(64, 153, 255, .2);
}

.app-role-admin .admin-vouchers-page .voucher-page-header__icon {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: none;
}

.app-role-admin .admin-vouchers-page .voucher-page-header__eyebrow {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .88);
}

.app-role-admin .admin-vouchers-page .voucher-page-header__eyebrow .action-icon {
    color: #fff;
}

.app-role-admin .admin-vouchers-page .voucher-page-header h1 {
    margin-bottom: 6px;
    color: #fff;
    font-family: inherit;
    font-size: clamp(1.45rem, 2.5vw, 1.8rem);
    letter-spacing: -.025em;
}

.app-role-admin .admin-vouchers-page .voucher-page-header p {
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
}

.app-role-admin .admin-vouchers-page .voucher-approval-flow {
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 5px;
    color: #fff;
    background: rgba(22, 61, 157, .2);
    box-shadow: none;
}

.app-role-admin .admin-vouchers-page .voucher-approval-step {
    color: #fff;
}

.app-role-admin .admin-vouchers-page .voucher-approval-step__number {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.app-role-admin .admin-vouchers-page .voucher-approval-step:last-child .voucher-approval-step__number {
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    background: rgba(255, 255, 255, .22);
}

.app-role-admin .voucher-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.app-role-admin .voucher-overview-card {
    position: relative;
    min-width: 0;
    min-height: 110px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: 0 4px 20px rgba(4, 26, 55, .06);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.app-role-admin .voucher-overview-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(4, 26, 55, .12);
    border-color: rgba(99, 102, 241, .2);
}

.app-role-admin .voucher-overview-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.app-role-admin .voucher-overview-card--pending::before {
    background: #f59e0b;
}

.app-role-admin .voucher-overview-card--approved::before {
    background: #3b82f6;
}

.app-role-admin .voucher-overview-card--report::before {
    background: #8b5cf6;
}

.app-role-admin .voucher-overview-card--done::before {
    background: #10b981;
}

.app-role-admin .voucher-overview-badge {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.app-role-admin .voucher-overview-card--pending .voucher-overview-badge {
    color: #b45309;
    background: #fef3c7;
}

.app-role-admin .voucher-overview-card--approved .voucher-overview-badge {
    color: #2563eb;
    background: #dbeafe;
}

.app-role-admin .voucher-overview-card--report .voucher-overview-badge {
    color: #7c3aed;
    background: #ede9fe;
}

.app-role-admin .voucher-overview-card--done .voucher-overview-badge {
    color: #059669;
    background: #d1fae5;
}

.app-role-admin .voucher-overview-badge svg {
    width: 22px;
    height: 22px;
}

.app-role-admin .voucher-overview-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.app-role-admin .voucher-overview-label {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.app-role-admin .voucher-overview-value {
    color: var(--text-main);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.app-role-admin .voucher-overview-sub {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 500;
}

.app-role-admin .voucher-table-card {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(4, 26, 55, .08);
}

.app-role-admin .voucher-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-color);
}

.app-role-admin .voucher-list-kicker {
    color: var(--text-muted);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.app-role-admin .voucher-list-heading h2 {
    margin: 4px 0;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 650;
}

.app-role-admin .voucher-list-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
}

.app-role-admin .voucher-list-count {
    flex: 0 0 auto;
    padding: 6px 11px;
    border-radius: 4px;
    color: #1677d2;
    background: rgba(64, 153, 255, .1);
    font-size: .75rem;
    font-weight: 600;
}

.app-role-admin .voucher-table-wrap {
    overflow-x: auto;
    border: 0;
    border-radius: 0;
}

.app-role-admin .voucher-table {
    min-width: 1280px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.app-role-admin .voucher-table th,
.app-role-admin .voucher-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: .77rem;
    line-height: 1.45;
}

.app-role-admin .voucher-table th {
    color: var(--text-muted);
    background: rgba(148, 163, 184, .08);
    font-size: .67rem;
}

.app-role-admin .voucher-table td {
    color: var(--text-main);
}

.app-role-admin .voucher-table tbody tr {
    transition: background-color .16s ease;
}

.app-role-admin .voucher-table tbody tr:hover {
    background: rgba(64, 153, 255, .045);
}

.app-role-admin .voucher-table .voucher-user {
    min-width: 170px;
    color: var(--text-main);
}

.app-role-admin .voucher-table .voucher-user small,
.app-role-admin .voucher-table td small {
    color: var(--text-muted);
    font-size: .72rem;
}

.app-role-admin .voucher-table .voucher-plate {
    font-weight: 650;
}

.app-role-admin .voucher-actions-cell {
    min-width: 190px;
}

.app-role-admin .voucher-actions {
    justify-content: flex-start;
    gap: 6px;
}

.app-role-admin .voucher-actions > .icon-button,
.app-role-admin .voucher-actions form .icon-button {
    flex: 0 0 auto;
}

.app-role-admin .voucher-table .voucher-empty {
    padding: 42px 18px !important;
    color: var(--text-muted);
    text-align: center;
}

html:not([data-theme="light"]) .app-role-admin .voucher-overview-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

html:not([data-theme="light"]) .app-role-admin .voucher-overview-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    border-color: rgba(99, 102, 241, .25);
}

html:not([data-theme="light"]) .app-role-admin .voucher-overview-card--pending .voucher-overview-badge {
    color: #fbbf24;
    background: rgba(245, 158, 11, .15);
}

html:not([data-theme="light"]) .app-role-admin .voucher-overview-card--approved .voucher-overview-badge {
    color: #60a5fa;
    background: rgba(59, 130, 246, .15);
}

html:not([data-theme="light"]) .app-role-admin .voucher-overview-card--report .voucher-overview-badge {
    color: #a78bfa;
    background: rgba(139, 92, 246, .15);
}

html:not([data-theme="light"]) .app-role-admin .voucher-overview-card--done .voucher-overview-badge {
    color: #34d399;
    background: rgba(16, 185, 129, .15);
}

html:not([data-theme="light"]) .app-role-admin .voucher-list-count {
    color: #9acaff;
    background: rgba(64, 153, 255, .16);
}

html:not([data-theme="light"]) .app-role-admin .voucher-table tbody tr:hover {
    background: rgba(115, 180, 255, .06);
}

@media (max-width: 1100px) {
    .app-role-admin .voucher-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .app-role-admin .admin-vouchers-page {
        gap: 18px;
    }

    .app-role-admin .admin-vouchers-page > .voucher-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .app-role-admin .admin-vouchers-page .voucher-page-header__main {
        align-items: flex-start;
    }

    .app-role-admin .admin-vouchers-page .voucher-approval-flow {
        align-self: flex-start;
    }

    .app-role-admin .voucher-overview {
        gap: 10px;
    }

    .app-role-admin .voucher-overview-card {
        min-height: 100px;
        gap: 14px;
        padding: 16px 18px;
    }

    .app-role-admin .voucher-overview-badge {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 11px;
    }

    .app-role-admin .voucher-overview-badge svg {
        width: 20px;
        height: 20px;
    }

    .app-role-admin .voucher-overview-body {
        gap: 4px;
    }

    .app-role-admin .voucher-overview-label {
        font-size: .7rem;
    }

    .app-role-admin .voucher-overview-value {
        font-size: 1.5rem;
    }

    .app-role-admin .voucher-overview-sub {
        font-size: .74rem;
    }

    .app-role-admin .voucher-list-heading {
        align-items: flex-start;
        padding: 17px 16px;
    }

    .app-role-admin .voucher-table-card > .voucher-table-wrap {
        padding: 0 10px 10px;
    }
}

@media (max-width: 380px) {
    .app-role-admin .voucher-overview-card {
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
        min-height: auto;
        padding: 16px;
    }

    .app-role-admin .voucher-overview-body {
        align-items: flex-start;
    }
}

.app-role-admin main.container > .voucher-page-header {
    min-height: 156px;
    margin-bottom: 22px;
    padding: 26px clamp(22px, 3vw, 36px);
    border: 0;
    border-radius: 6px;
    background: linear-gradient(110deg, #4099ff, #536dfe);
    box-shadow: 0 5px 16px rgba(64, 153, 255, .2);
}

.app-role-admin main.container > .voucher-page-header .voucher-page-header__icon {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: none;
}

.app-role-admin main.container > .voucher-page-header .voucher-page-header__eyebrow {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .9);
}

.app-role-admin main.container > .voucher-page-header .voucher-page-header__eyebrow .action-icon {
    color: #fff;
}

.app-role-admin main.container > .voucher-page-header h1 {
    margin-bottom: 6px;
    color: #fff;
    font-family: inherit;
    font-size: clamp(1.45rem, 2.5vw, 1.8rem);
    letter-spacing: -.025em;
}

.app-role-admin main.container > .voucher-page-header p {
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
}

.app-role-admin .report-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.app-role-admin .report-overview-card {
    display: flex;
    min-width: 0;
    min-height: 92px;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(4, 26, 55, .08);
}

.app-role-admin .report-overview-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.app-role-admin .report-overview-icon--blue {
    color: #175cd3;
    background: #eff8ff;
}

.app-role-admin .report-overview-icon--cyan {
    color: #0e7490;
    background: #ecfeff;
}

.app-role-admin .report-overview-icon--green {
    color: #027a48;
    background: #ecfdf3;
}

.app-role-admin .report-overview-icon--amber {
    color: #b54708;
    background: #fff3d6;
}

.app-role-admin .report-overview-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.app-role-admin .report-overview-copy small {
    color: var(--text-muted);
    font-size: .74rem;
    line-height: 1.4;
}

.app-role-admin .report-overview-copy strong {
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.app-role-admin .report-overview-copy strong span {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 500;
}

.app-role-admin main.container > .voucher-table-card {
    margin: 0;
    padding: 22px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(4, 26, 55, .08);
}

.app-role-admin .report-card-heading {
    margin-bottom: 16px;
}

.app-role-admin .report-card-heading h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 650;
}

.app-role-admin .report-card-heading p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .78rem;
}

.app-role-admin .report-result-count {
    padding: 6px 11px;
    border: 0;
    border-radius: 4px;
    color: #1677d2;
    background: rgba(64, 153, 255, .1);
    font-size: .75rem;
    font-weight: 600;
}

.app-role-admin .report-filter-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(148, 163, 184, .045);
    box-shadow: none;
}

.app-role-admin .report-filter-heading {
    padding-bottom: 10px;
}

.app-role-admin .report-filter-heading strong {
    color: var(--text-main);
    font-size: .86rem;
    font-weight: 650;
}

.app-role-admin .report-filter-heading span,
.app-role-admin .report-filter-field label {
    color: var(--text-muted);
}

.app-role-admin .report-filter-field {
    gap: 6px;
}

.app-role-admin .report-filter-field label {
    font-size: .72rem;
}

.app-role-admin .report-filter-field input,
.app-role-admin .report-filter-field select {
    min-height: 40px;
    padding: 8px 10px;
    border-color: var(--border-color);
    border-radius: 4px;
    color: var(--text-main);
    background: var(--bg-card);
    font-size: .78rem;
}

.app-role-admin .report-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 2px;
}

.app-role-admin .report-filter-actions .report-action-button {
    min-height: 38px;
    border-radius: 4px;
    font-weight: 600;
}

.app-role-admin .report-filter-actions .report-filter-submit,
.app-role-admin .report-filter-actions .report-filter-submit:hover,
.app-role-admin .report-filter-actions .report-filter-submit:focus-visible {
    border-color: #1677d2 !important;
    background: linear-gradient(110deg, #4099ff, #536dfe) !important;
}

.app-role-admin .report-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.app-role-admin .report-table {
    min-width: 1180px;
}

.app-role-admin .report-table thead th {
    padding: 12px 10px;
    color: var(--text-muted);
    background: rgba(148, 163, 184, .08);
    font-size: .66rem;
}

.app-role-admin .report-table tbody td,
.app-role-admin .report-table tfoot td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: .76rem;
}

html:not([data-theme="light"]) .app-role-admin .report-overview-icon--blue {
    color: #9acaff;
    background: #1c3d66;
}

html:not([data-theme="light"]) .app-role-admin .report-overview-icon--cyan {
    color: #67e8f9;
    background: #164b5a;
}

html:not([data-theme="light"]) .app-role-admin .report-overview-icon--green {
    color: #70e1c4;
    background: #164b42;
}

html:not([data-theme="light"]) .app-role-admin .report-overview-icon--amber {
    color: #ffd166;
    background: #59451d;
}

html:not([data-theme="light"]) .app-role-admin .report-result-count {
    color: #9acaff;
    background: rgba(64, 153, 255, .16);
}

@media (max-width: 1100px) {
    .app-role-admin .report-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-role-admin .report-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-role-admin .report-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .app-role-admin .report-table-wrap {
        overflow: visible;
        border: 0;
    }

    .app-role-admin .report-table {
        min-width: 0;
    }

    .app-role-admin .report-table tbody td,
    .app-role-admin .report-table tfoot .report-total-row td {
        padding: .62rem .7rem;
        font-size: .76rem;
    }
}

@media (max-width: 640px) {
    .app-role-admin main.container > .voucher-page-header {
        min-height: 0;
        margin-bottom: 18px;
        padding: 20px;
    }

    .app-role-admin main.container > .voucher-table-card {
        padding: 16px;
    }

    .app-role-admin .report-overview {
        gap: 10px;
        margin-bottom: 18px;
    }

    .app-role-admin .report-overview-card {
        min-height: 78px;
        gap: 9px;
        padding: 12px;
    }

    .app-role-admin .report-overview-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .app-role-admin .report-overview-copy small {
        font-size: .68rem;
    }

    .app-role-admin .report-overview-copy strong {
        font-size: 1rem;
    }

    .app-role-admin .report-filter-form {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
    }

    .app-role-admin .report-filter-heading,
    .app-role-admin .report-filter-actions {
        grid-column: 1;
    }

    .app-role-admin .report-filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-role-admin .report-filter-actions .report-print-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 380px) {
    .app-role-admin .report-overview-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

.app-role-admin .admin-spbu-page {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.app-role-admin .admin-spbu-page > .spbu-page-header,
.app-role-admin .admin-spbu-page > .alert {
    margin: 0;
}

.app-role-admin .admin-spbu-page > .spbu-page-header {
    min-height: 150px;
    padding: 26px clamp(22px, 3vw, 36px);
    border: 0;
    border-radius: 6px;
    background: linear-gradient(110deg, #4099ff, #536dfe);
    box-shadow: 0 5px 16px rgba(64, 153, 255, .2);
}

.app-role-admin .admin-spbu-page .spbu-page-header__icon {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: none;
}

.app-role-admin .admin-spbu-page .spbu-page-header__eyebrow {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .88);
}

.app-role-admin .admin-spbu-page .spbu-page-header h1 {
    margin-bottom: 6px;
    color: #fff;
    font-family: inherit;
    font-size: clamp(1.45rem, 2.5vw, 1.8rem);
    letter-spacing: -.025em;
}

.app-role-admin .admin-spbu-page .spbu-page-header p {
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
}

.app-role-admin .spbu-list-card {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(4, 26, 55, .08);
}

.app-role-admin .spbu-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-color);
}

.app-role-admin .spbu-list-kicker {
    color: var(--text-muted);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.app-role-admin .spbu-list-heading h2 {
    margin: 4px 0;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 650;
}

.app-role-admin .spbu-list-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
}

.app-role-admin .spbu-list-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.app-role-admin .spbu-count {
    padding: 6px 11px;
    border-radius: 4px;
    color: #1677d2;
    background: rgba(64, 153, 255, .1);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-role-admin .spbu-add-button {
    min-height: 38px;
    gap: 7px;
    border-radius: 4px;
}

.app-role-admin .spbu-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.app-role-admin .spbu-table {
    width: 100%;
    min-width: 900px;
    margin: 0;
    border-collapse: collapse;
}

.app-role-admin .spbu-table th,
.app-role-admin .spbu-table td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: middle;
}

.app-role-admin .spbu-table th {
    color: var(--text-muted);
    background: rgba(148, 163, 184, .08);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-role-admin .spbu-table td {
    color: var(--text-main);
    font-size: .8rem;
}

.app-role-admin .spbu-table tbody tr:last-child td {
    border-bottom: 0;
}

.app-role-admin .spbu-table tbody tr:hover {
    background: rgba(64, 153, 255, .045);
}

.app-role-admin .spbu-table td strong {
    color: var(--text-main);
    font-weight: 650;
}

.app-role-admin .spbu-table .spbu-actions {
    white-space: nowrap;
}

.app-role-admin .spbu-actions form {
    display: inline-flex;
    margin-left: 5px;
}

.app-role-admin .spbu-actions .icon-button {
    width: 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
}

.app-role-admin .spbu-table .text-center {
    padding: 42px 18px;
    color: var(--text-muted);
    text-align: center;
}

html:not([data-theme="light"]) .app-role-admin .spbu-count {
    color: #9acaff;
    background: rgba(64, 153, 255, .16);
}

html:not([data-theme="light"]) .app-role-admin .spbu-table tbody tr:hover {
    background: rgba(115, 180, 255, .06);
}

@media (max-width: 640px) {
    .app-role-admin .admin-spbu-page {
        gap: 18px;
    }

    .app-role-admin .admin-spbu-page > .spbu-page-header {
        align-items: flex-start;
        padding: 20px;
    }

    .app-role-admin .spbu-list-heading {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 18px 16px;
    }

    .app-role-admin .spbu-list-actions {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 380px) {
    .app-role-admin .spbu-list-actions {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .app-role-admin .spbu-add-button {
        width: 100%;
        justify-content: center;
    }
}

.app-role-admin .admin-users-page {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.app-role-admin .admin-users-page > .users-page-header,
.app-role-admin .admin-users-page > .alert {
    margin: 0;
}

.app-role-admin .admin-users-page > .users-page-header {
    min-height: 150px;
    padding: 26px clamp(22px, 3vw, 36px);
    border: 0;
    border-radius: 6px;
    background: linear-gradient(110deg, #4099ff, #536dfe);
    box-shadow: 0 5px 16px rgba(64, 153, 255, .2);
}

.app-role-admin .admin-users-page .users-page-header__icon {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: none;
}

.app-role-admin .admin-users-page .users-page-header__eyebrow {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .88);
}

.app-role-admin .admin-users-page .users-page-header h1 {
    margin-bottom: 6px;
    color: #fff;
    font-family: inherit;
    font-size: clamp(1.45rem, 2.5vw, 1.8rem);
    letter-spacing: -.025em;
}

.app-role-admin .admin-users-page .users-page-header p {
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
}

.app-role-admin .user-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.app-role-admin .user-overview-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
    padding: 17px 18px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(4, 26, 55, .06);
}

.app-role-admin .user-overview-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 5px;
}

.app-role-admin .user-overview-icon svg {
    width: 20px;
    height: 20px;
}

.app-role-admin .user-overview-icon--blue {
    color: #1677d2;
    background: #e8f3ff;
}

.app-role-admin .user-overview-icon--green {
    color: #07875b;
    background: #e5f7f0;
}

.app-role-admin .user-overview-icon--amber {
    color: #a86500;
    background: #fff4dc;
}

.app-role-admin .user-overview-icon--violet {
    color: #6254c8;
    background: #efedff;
}

.app-role-admin .user-overview-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.app-role-admin .user-overview-copy small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-role-admin .user-overview-copy strong {
    color: var(--text-main);
    font-size: 1.3rem;
    line-height: 1.2;
}

.app-role-admin .users-list-card {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(4, 26, 55, .08);
}

.app-role-admin .users-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--border-color);
}

.app-role-admin .users-list-kicker {
    color: var(--text-muted);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .09em;
}

.app-role-admin .users-list-heading h2 {
    margin: 4px 0;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 650;
}

.app-role-admin .users-list-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
}

.app-role-admin .users-list-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.app-role-admin .users-list-count {
    padding: 6px 11px;
    border-radius: 4px;
    color: #1677d2;
    background: rgba(64, 153, 255, .1);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-role-admin .users-add-button {
    min-height: 38px;
}

.app-role-admin .users-table-wrap {
    width: 100%;
    overflow-x: auto;
    scrollbar-color: #8092ff #eef2ff;
    scrollbar-width: thin;
}

.app-role-admin .users-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.app-role-admin .users-table-wrap::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #eef2ff;
}

.app-role-admin .users-table-wrap::-webkit-scrollbar-thumb {
    border: 2px solid #eef2ff;
    border-radius: 999px;
    background: #8092ff;
}

.app-role-admin .users-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #465fff;
}

.app-role-admin .users-management-table {
    width: 100%;
    min-width: 1060px;
    margin: 0;
    border-collapse: collapse;
}

.app-role-admin .users-management-table th,
.app-role-admin .users-management-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    vertical-align: middle;
}

.app-role-admin .users-management-table th {
    color: var(--text-muted);
    background: #eef2ff;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-role-admin .users-management-table tbody tr:last-child td {
    border-bottom: 0;
}

.app-role-admin .users-management-table tbody tr:hover {
    background: rgba(115, 180, 255, .045);
}

.app-role-admin .users-management-table .badge-super_admin {
    color: #6d28d9;
}

.app-role-admin .users-management-table .badge-admin {
    color: #1d4ed8;
}

.app-role-admin .users-management-table .badge-user {
    color: #475569;
}

.app-role-admin .users-management-table .user-actions {
    display: table-cell;
    white-space: nowrap;
}

.app-role-admin .users-management-table .user-actions .user-toggle-form,
.app-role-admin .users-management-table .user-actions .user-delete-form {
    display: inline-flex;
    align-items: center;
    margin: 0 4px 0 0;
    vertical-align: middle;
}

.app-role-admin .users-management-table .user-actions .icon-button {
    width: 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    margin: 0 4px 0 0;
    vertical-align: middle;
}

.app-role-admin .users-management-table .user-self-label {
    margin: 0 7px 0 2px;
    font-size: .72rem;
    vertical-align: middle;
}

.app-role-admin .users-management-table .text-center {
    padding: 42px 18px;
    color: var(--text-muted);
    text-align: center;
}

html:not([data-theme="light"]) .app-role-admin .users-table-wrap {
    scrollbar-color: #8092ff #293548;
}

html:not([data-theme="light"]) .app-role-admin .users-table-wrap::-webkit-scrollbar-track {
    background: #293548;
}

html:not([data-theme="light"]) .app-role-admin .users-table-wrap::-webkit-scrollbar-thumb {
    border-color: #293548;
}

html:not([data-theme="light"]) .app-role-admin .users-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #a5b4fc;
}

html:not([data-theme="light"]) .app-role-admin .users-management-table th {
    color: #c7d2fe;
    background: #293548;
    border-color: #3a4659;
}

html:not([data-theme="light"]) .app-role-admin .users-management-table .badge-super_admin {
    color: #c4b5fd;
}

html:not([data-theme="light"]) .app-role-admin .users-management-table .badge-admin {
    color: #93c5fd;
}

html:not([data-theme="light"]) .app-role-admin .users-management-table .badge-user {
    color: #cbd5e1;
}

html:not([data-theme="light"]) .app-role-admin .user-overview-icon--blue {
    color: #9acaff;
    background: #1c3d66;
}

html:not([data-theme="light"]) .app-role-admin .user-overview-icon--green {
    color: #70e1c4;
    background: #164b42;
}

html:not([data-theme="light"]) .app-role-admin .user-overview-icon--amber {
    color: #ffd166;
    background: #59451d;
}

html:not([data-theme="light"]) .app-role-admin .user-overview-icon--violet {
    color: #c4b5fd;
    background: #352c62;
}

html:not([data-theme="light"]) .app-role-admin .users-list-count {
    color: #9acaff;
    background: rgba(64, 153, 255, .16);
}

@media (max-width: 1100px) {
    .app-role-admin .user-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .app-role-admin .admin-users-page {
        gap: 18px;
    }

    .app-role-admin .admin-users-page > .users-page-header {
        align-items: flex-start;
        padding: 20px;
    }

    .app-role-admin .user-overview {
        gap: 10px;
    }

    .app-role-admin .user-overview-card {
        gap: 10px;
        padding: 13px 12px;
    }

    .app-role-admin .user-overview-icon {
        width: 36px;
        height: 36px;
    }

    .app-role-admin .user-overview-copy small {
        font-size: .66rem;
    }

    .app-role-admin .user-overview-copy strong {
        font-size: 1.15rem;
    }

    .app-role-admin .users-list-heading {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 18px 16px;
    }

    .app-role-admin .users-list-actions {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 380px) {
    .app-role-admin .user-overview {
        grid-template-columns: 1fr;
    }

    .app-role-admin .users-list-actions {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .app-role-admin .users-add-button {
        flex: 1 1 100%;
        justify-content: center;
    }
}

.app-role-admin .admin-dashboard > .admin-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    min-height: 204px;
    padding: clamp(26px, 4vw, 42px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(116, 188, 255, .3), transparent 25%),
        radial-gradient(circle at 8% 100%, rgba(72, 95, 220, .45), transparent 42%),
        linear-gradient(118deg, #1765bd 0%, #315ed8 48%, #574dd0 100%);
    box-shadow: 0 14px 32px rgba(32, 81, 180, .2);
}

.app-role-admin .admin-dashboard-hero-copy {
    max-width: 700px;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow {
    min-height: 32px;
    gap: 8px;
    padding: 6px 12px 6px 9px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 6px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .12);
    font-size: .68rem;
    letter-spacing: .12em;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow .action-icon {
    width: 17px;
    height: 17px;
    color: #b9efff;
}

.app-role-admin .admin-dashboard-hero h1 {
    margin: 15px 0 8px;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.app-role-admin .admin-dashboard-hero p,
.app-role-admin .admin-dashboard-hero p strong {
    color: rgba(255, 255, 255, .9);
}

.app-role-admin .admin-dashboard-hero p {
    max-width: 590px;
    font-size: .9rem;
    line-height: 1.6;
}

.app-role-admin .admin-dashboard-hero-side {
    display: flex;
    min-width: 164px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-live {
    justify-content: center;
    min-height: 34px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid rgba(167, 243, 208, .32);
    border-radius: 5px;
    color: #d1fae5;
    background: rgba(6, 78, 59, .28);
    font-size: .64rem;
    letter-spacing: .08em;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-live > span {
    width: 8px;
    height: 8px;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .15);
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date {
    min-width: 0;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    text-align: left;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date span {
    color: rgba(255, 255, 255, .76);
    font-size: .6rem;
    letter-spacing: .12em;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.app-role-admin .admin-dashboard-hero-decoration {
    right: 20%;
    bottom: -64px;
    color: rgba(255, 255, 255, .1);
    transform: rotate(-12deg);
}

.app-role-admin .admin-dashboard-hero-decoration .action-icon {
    width: 220px;
    height: 220px;
    stroke-width: 1;
}

@media (max-width: 700px) {
    .app-role-admin .admin-dashboard > .admin-dashboard-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 24px;
    }

    .app-role-admin .admin-dashboard-hero-side {
        width: min(100%, 360px);
        min-width: 0;
        flex-direction: row;
        align-items: center;
    }

    .app-role-admin .admin-dashboard-hero .admin-dashboard-live,
    .app-role-admin .admin-dashboard-hero .admin-dashboard-date {
        flex: 1 1 0;
    }

    .app-role-admin .admin-dashboard-hero .admin-dashboard-live {
        min-height: 56px;
    }

    .app-role-admin .admin-dashboard-hero .admin-dashboard-date {
        min-height: 56px;
        justify-content: center;
        padding: 8px 12px;
    }

    .app-role-admin .admin-dashboard-hero-decoration {
        right: -24px;
        bottom: -78px;
    }
}

@media (max-width: 420px) {
    .app-role-admin .admin-dashboard > .admin-dashboard-hero {
        gap: 18px;
        padding: 20px;
    }

    .app-role-admin .admin-dashboard-hero h1 {
        margin-top: 12px;
        font-size: 1.55rem;
    }

    .app-role-admin .admin-dashboard-hero p {
        font-size: .82rem;
    }

    .app-role-admin .admin-dashboard-hero-side {
        width: 100%;
        align-items: stretch;
    }

    .app-role-admin .admin-dashboard-hero .admin-dashboard-live {
        font-size: .58rem;
    }
}

.app-role-admin .admin-settings-page {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.app-role-admin .admin-settings-page > .settings-page-header,
.app-role-admin .admin-settings-page > .alert {
    margin: 0;
}

.app-role-admin .admin-settings-page > .settings-page-header {
    min-height: 150px;
    padding: 26px clamp(22px, 3vw, 36px);
    border: 0;
    border-radius: 6px;
    background: linear-gradient(110deg, #4099ff, #536dfe);
    box-shadow: 0 5px 16px rgba(64, 153, 255, .2);
}

.app-role-admin .admin-settings-page .settings-page-header__icon {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: none;
}

.app-role-admin .admin-settings-page .settings-page-header__eyebrow {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .88);
}

.app-role-admin .admin-settings-page .settings-page-header h1 {
    margin-bottom: 6px;
    color: #fff;
    font-family: inherit;
    font-size: clamp(1.45rem, 2.5vw, 1.8rem);
    letter-spacing: -.025em;
}

.app-role-admin .admin-settings-page .settings-page-header p {
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
}

.app-role-admin .admin-settings-page .settings-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-main);
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(4, 26, 55, .08);
}

.app-role-admin .settings-card-heading {
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--border-color);
}

.app-role-admin .settings-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 5px;
    color: #1677d2;
    background: #e8f3ff;
}

.app-role-admin .settings-card-icon .action-icon {
    width: 20px;
    height: 20px;
}

.app-role-admin .settings-card-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .09em;
}

.app-role-admin .settings-card-heading h2 {
    margin: 0 0 4px;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 650;
}

.app-role-admin .settings-card-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.55;
}

.app-role-admin .settings-form {
    padding: 22px 24px 20px;
}

.app-role-admin .settings-options {
    display: grid;
    gap: 10px;
    margin: 0;
}

.app-role-admin .settings-options legend {
    margin: 0 0 4px;
    padding: 0;
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 650;
}

.app-role-admin .settings-options-help {
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: .78rem;
}

.app-role-admin .settings-option {
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: rgba(148, 163, 184, .045);
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.app-role-admin .settings-option:hover {
    transform: none;
    border-color: #4099ff;
    background: rgba(64, 153, 255, .06);
}

.app-role-admin .settings-option:has(input[type="radio"]:checked) {
    border-color: #4099ff;
    background: rgba(64, 153, 255, .08);
    box-shadow: inset 3px 0 #4099ff;
}

.app-role-admin .settings-option input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #4099ff;
}

.app-role-admin .settings-option-copy {
    gap: 4px;
}

.app-role-admin .settings-option-copy strong {
    color: var(--text-main);
    font-size: .83rem;
    font-weight: 600;
}

.app-role-admin .settings-option-copy small {
    color: var(--text-muted);
    font-size: .75rem;
    line-height: 1.45;
}

.app-role-admin .settings-current-mode {
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(64, 153, 255, .16);
    border-left: 3px solid #4099ff;
    border-radius: 4px;
    color: var(--text-muted);
    background: rgba(64, 153, 255, .07);
    font-size: .78rem;
}

.app-role-admin .settings-current-mode strong {
    color: var(--text-main);
}

.app-role-admin .settings-actions {
    padding-top: 18px;
    border-color: var(--border-color);
}

.app-role-admin .settings-actions .btn {
    min-height: 40px;
    border-radius: 4px;
}

html:not([data-theme="light"]) .app-role-admin .settings-card-icon {
    color: #9acaff;
    background: #1c3d66;
}

html:not([data-theme="light"]) .app-role-admin .settings-option:has(input[type="radio"]:checked) {
    background: rgba(64, 153, 255, .12);
}

@media (max-width: 640px) {
    .app-role-admin .admin-settings-page {
        gap: 18px;
    }

    .app-role-admin .admin-settings-page > .settings-page-header {
        align-items: flex-start;
        padding: 20px;
    }

    .app-role-admin .settings-card-heading {
        align-items: flex-start;
        padding: 18px 16px;
    }

    .app-role-admin .settings-form {
        padding: 18px 16px 16px;
    }

    .app-role-admin .settings-option {
        align-items: flex-start;
        padding: 13px 12px;
    }

    .app-role-admin .settings-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Modern Modal System ===== */

.app-role-admin .approve-modal-overlay,
.app-role-user .approve-modal-overlay,
.app-role-admin .fueling-report-overlay,
.app-role-user .fueling-report-overlay,
.app-role-admin .voucher-archive-overlay {
    padding: clamp(16px, 4vw, 32px);
    background: rgba(16, 24, 40, .55);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.app-role-admin .modal-content,
.app-role-user .modal-content,
.app-role-admin .approve-modal-content,
.app-role-user .approve-modal-content,
.app-role-admin .report-accept-modal,
.app-role-user .report-accept-modal {
    width: min(100%, 640px);
    max-height: min(92vh, 820px);
    margin: max(3vh, 16px) auto 0;
    padding: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-main);
    background: var(--bg-card);
    box-shadow: 0 28px 80px rgba(16, 24, 40, .32);
}

html:not([data-theme="light"]) .app-role-admin .modal-content,
html:not([data-theme="light"]) .app-role-user .modal-content,
html:not([data-theme="light"]) .app-role-admin .approve-modal-content,
html:not([data-theme="light"]) .app-role-user .approve-modal-content,
html:not([data-theme="light"]) .app-role-admin .report-accept-modal,
html:not([data-theme="light"]) .app-role-user .report-accept-modal {
    box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
    border-color: rgba(148, 163, 184, .18);
}

/* Modal heading */
.app-role-admin .approve-modal-content .approve-modal-heading,
.app-role-user .approve-modal-content .approve-modal-heading,
.app-role-admin .report-accept-modal .report-accept-heading,
.app-role-user .report-accept-modal .report-accept-heading {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    padding: 24px 72px 20px 24px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 20px 20px 0 0;
    background: linear-gradient(110deg, #4099ff, #536dfe);
}

html:not([data-theme="light"]) .app-role-admin .approve-modal-content .approve-modal-heading,
html:not([data-theme="light"]) .app-role-user .approve-modal-content .approve-modal-heading,
html:not([data-theme="light"]) .app-role-admin .report-accept-modal .report-accept-heading,
html:not([data-theme="light"]) .app-role-user .report-accept-modal .report-accept-heading {
    border-bottom-color: rgba(148, 163, 184, .18);
}

.app-role-admin .approve-modal-content .approve-modal-heading-icon,
.app-role-user .approve-modal-content .approve-modal-heading-icon,
.app-role-admin .report-accept-modal .report-accept-heading-icon,
.app-role-user .report-accept-modal .report-accept-heading-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.app-role-admin .approve-modal-content .approve-modal-heading-icon svg,
.app-role-user .approve-modal-content .approve-modal-heading-icon svg,
.app-role-admin .report-accept-modal .report-accept-heading-icon svg,
.app-role-user .report-accept-modal .report-accept-heading-icon svg {
    width: 22px;
    height: 22px;
}

.app-role-admin .approve-modal-content .approve-modal-kicker,
.app-role-user .approve-modal-content .approve-modal-kicker,
.app-role-admin .report-accept-modal .report-accept-kicker,
.app-role-user .report-accept-modal .report-accept-kicker {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .9);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.app-role-admin .approve-modal-content .approve-modal-heading h3,
.app-role-user .approve-modal-content .approve-modal-heading h3,
.app-role-admin .report-accept-modal .report-accept-heading h3,
.app-role-user .report-accept-modal .report-accept-heading h3 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.app-role-admin .approve-modal-content .approve-modal-heading p,
.app-role-user .approve-modal-content .approve-modal-heading p,
.app-role-admin .report-accept-modal .report-accept-heading p,
.app-role-user .report-accept-modal .report-accept-heading p {
    margin-top: 6px;
    color: rgba(255, 255, 255, .92);
    font-size: .82rem;
    line-height: 1.45;
}

/* Close button */
.app-role-admin .approve-modal-content .approve-modal-close,
.app-role-user .approve-modal-content .approve-modal-close,
.app-role-admin .report-accept-modal .icon-button--close,
.app-role-user .report-accept-modal .icon-button--close,
.app-role-admin .voucher-archive-overlay .approve-modal-close,
.app-role-user .voucher-archive-overlay .approve-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 10px;
    color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.app-role-admin .approve-modal-content .approve-modal-close:hover,
.app-role-user .approve-modal-content .approve-modal-close:hover,
.app-role-admin .report-accept-modal .icon-button--close:hover,
.app-role-user .report-accept-modal .icon-button--close:hover,
.app-role-admin .approve-modal-content .approve-modal-close:focus-visible,
.app-role-user .approve-modal-content .approve-modal-close:focus-visible,
.app-role-admin .report-accept-modal .icon-button--close:focus-visible,
.app-role-user .report-accept-modal .icon-button--close:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, .28) !important;
}

/* Body sections */
.app-role-admin .approve-modal-content .approve-modal-user,
.app-role-user .approve-modal-content .approve-modal-user,
.app-role-admin .approve-modal-content .approve-modal-allocation > div,
.app-role-user .approve-modal-content .approve-modal-allocation > div,
.app-role-admin .approve-modal-content .approve-modal-vehicle-grid > div,
.app-role-user .approve-modal-content .approve-modal-vehicle-grid > div {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(148, 163, 184, .06);
    padding: 12px 14px;
}

html:not([data-theme="light"]) .app-role-admin .approve-modal-content .approve-modal-user,
html:not([data-theme="light"]) .app-role-user .approve-modal-content .approve-modal-user,
html:not([data-theme="light"]) .app-role-admin .approve-modal-content .approve-modal-allocation > div,
html:not([data-theme="light"]) .app-role-user .approve-modal-content .approve-modal-allocation > div,
html:not([data-theme="light"]) .app-role-admin .approve-modal-content .approve-modal-vehicle-grid > div,
html:not([data-theme="light"]) .app-role-user .approve-modal-content .approve-modal-vehicle-grid > div {
    border-color: rgba(148, 163, 184, .16);
    background: rgba(15, 23, 42, .25);
}

.app-role-admin .approve-modal-content .approve-modal-vehicle,
.app-role-user .approve-modal-content .approve-modal-vehicle {
    border: 1px solid rgba(64, 153, 255, .22);
    border-radius: 12px;
    background: rgba(64, 153, 255, .06);
    padding: 16px;
    margin-top: 16px;
}

html:not([data-theme="light"]) .app-role-admin .approve-modal-content .approve-modal-vehicle,
html:not([data-theme="light"]) .app-role-user .approve-modal-content .approve-modal-vehicle {
    border-color: rgba(64, 153, 255, .16);
    background: rgba(15, 23, 42, .2);
}

.app-role-admin .approve-modal-content .approve-modal-vehicle-heading,
.app-role-user .approve-modal-content .approve-modal-vehicle-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.app-role-admin .approve-modal-content .approve-modal-vehicle-heading span,
.app-role-user .approve-modal-content .approve-modal-vehicle-heading span {
    color: #4099ff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.app-role-admin .approve-modal-content .approve-modal-vehicle-grid,
.app-role-user .approve-modal-content .approve-modal-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.app-role-admin .approve-modal-content .approve-modal-user > span:first-child,
.app-role-user .approve-modal-content .approve-modal-user > span:first-child,
.app-role-admin .approve-modal-content .approve-modal-allocation span,
.app-role-user .approve-modal-content .approve-modal-allocation span,
.app-role-admin .approve-modal-content .approve-modal-vehicle-grid span,
.app-role-user .approve-modal-content .approve-modal-vehicle-grid span {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.app-role-admin .approve-modal-content .approve-modal-user > strong,
.app-role-user .approve-modal-content .approve-modal-user > strong,
.app-role-admin .approve-modal-content .approve-modal-allocation strong,
.app-role-user .approve-modal-content .approve-modal-allocation strong,
.app-role-admin .approve-modal-content .approve-modal-vehicle-grid strong,
.app-role-user .approve-modal-content .approve-modal-vehicle-grid strong {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 700;
    display: block;
}

/* Modal fields */
.app-role-admin .approve-modal-content .approve-modal-field label,
.app-role-user .approve-modal-content .approve-modal-field label {
    color: var(--text-main);
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
}

.app-role-admin .approve-modal-content .approve-modal-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.app-role-admin .approve-modal-content .approve-modal-field select,
.app-role-admin .approve-modal-content .approve-modal-field textarea,
.app-role-user .approve-modal-content .approve-modal-field input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.app-role-user .approve-modal-content .approve-modal-field select,
.app-role-user .approve-modal-content .approve-modal-field textarea,
.app-role-admin .approve-modal-content .approve-modal-liter-input,
.app-role-user .approve-modal-content .approve-modal-liter-input {
    min-height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    background: var(--bg-card);
    box-shadow: none;
    padding: 0 12px;
}

.app-role-admin .approve-modal-content .approve-modal-field textarea,
.app-role-user .approve-modal-content .approve-modal-field textarea {
    min-height: 100px;
    padding: 12px;
    resize: vertical;
}

.app-role-admin .approve-modal-content .approve-modal-liter-input input,
.app-role-user .approve-modal-content .approve-modal-liter-input input {
    min-height: 42px;
    color: var(--text-main);
}

.app-role-admin .approve-modal-content .approve-modal-liter-input > span,
.app-role-user .approve-modal-content .approve-modal-liter-input > span {
    color: #4099ff;
    font-size: .85rem;
    font-weight: 600;
}

.app-role-admin .approve-modal-content .approve-modal-field input::placeholder,
.app-role-admin .approve-modal-content .approve-modal-field textarea::placeholder,
.app-role-user .approve-modal-content .approve-modal-field input::placeholder,
.app-role-user .approve-modal-content .approve-modal-field textarea::placeholder {
    color: var(--text-muted);
    opacity: .8;
}

.app-role-admin .approve-modal-content .approve-modal-field input:focus,
.app-role-admin .approve-modal-content .approve-modal-field select:focus,
.app-role-admin .approve-modal-content .approve-modal-field textarea:focus,
.app-role-admin .approve-modal-content .approve-modal-liter-input:focus-within,
.app-role-user .approve-modal-content .approve-modal-field input:focus,
.app-role-user .approve-modal-content .approve-modal-field select:focus,
.app-role-user .approve-modal-content .approve-modal-field textarea:focus,
.app-role-user .approve-modal-content .approve-modal-liter-input:focus-within {
    border-color: #4099ff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(64, 153, 255, .16);
}

/* Modal actions */
.app-role-admin .approve-modal-content .approve-modal-actions,
.app-role-user .approve-modal-content .approve-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px 24px;
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

.app-role-admin .approve-modal-content .approve-modal-actions .icon-button--labeled,
.app-role-user .approve-modal-content .approve-modal-actions .icon-button--labeled {
    min-height: 42px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    padding: 0 16px;
}

.app-role-admin .approve-modal-content .approve-modal-actions .icon-button,
.app-role-user .approve-modal-content .approve-modal-actions .icon-button {
    min-height: 42px;
    border-radius: 10px;
    padding: 0 12px;
}

/* Reject modal specific */
.app-role-admin .reject-modal-content {
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    width: min(100%, 480px);
}

.app-role-admin .reject-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 20px 20px 0 0;
    background: linear-gradient(110deg, #ef4444, #dc2626);
}

.app-role-admin .reject-modal-header h3 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.app-role-admin .reject-modal-header p {
    color: rgba(255, 255, 255, .88);
    font-size: .82rem;
    margin: 0;
}

.app-role-admin .reject-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    border-radius: 10px;
    color: #fff !important;
    background: rgba(255, 255, 255, .15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.app-role-admin .reject-modal-body {
    padding: 24px;
}

.app-role-admin .reject-modal-actions {
    display: flex;
    gap: 10px;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
    background: var(--bg-card);
}

/* E-voucher modal */
.app-role-admin .evoucher-modal-overlay {
    padding: clamp(16px, 4vw, 32px);
    background: rgba(16, 24, 40, .5);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.app-role-admin .evoucher-modal-card {
    width: min(100%, 720px);
    max-height: min(92vh, 850px);
    margin: max(2vh, 16px) auto 0;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 32px 96px rgba(16, 24, 40, .35);
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.app-role-admin .evoucher-modal-header {
    padding: 1.5rem 2rem 1.5rem 2rem;
    position: relative;
    color: #fff;
}

.app-role-admin .evoucher-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .18) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.app-role-admin .evoucher-modal-body {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

/* Evidence items in archive / accept modals */
.app-role-admin .report-accept-evidence-grid,
.app-role-user .report-accept-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 0 24px 20px;
}

.app-role-admin .report-accept-evidence-grid a,
.app-role-user .report-accept-evidence-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    background: var(--bg-card);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    position: relative;
    overflow: hidden;
}

.app-role-admin .report-accept-evidence-grid a:hover,
.app-role-user .report-accept-evidence-grid a:hover {
    transform: translateY(-2px);
    border-color: #4099ff;
    box-shadow: 0 8px 24px rgba(64, 153, 255, .12);
}

.app-role-admin .report-accept-evidence-grid a img,
.app-role-user .report-accept-evidence-grid a img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--bg-muted);
}

.app-role-admin .report-accept-evidence-grid a span,
.app-role-user .report-accept-evidence-grid a span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}

.app-role-admin .report-accept-evidence-grid a strong,
.app-role-user .report-accept-evidence-grid a strong {
    color: var(--text-main);
    font-size: .85rem;
    font-weight: 700;
    text-align: center;
}

.app-role-admin .report-accept-evidence-grid a small,
.app-role-user .report-accept-evidence-grid a small {
    color: var(--text-muted);
    font-size: .72rem;
    text-align: center;
    line-height: 1.3;
}

.app-role-admin .report-accept-evidence-grid a svg,
.app-role-user .report-accept-evidence-grid a svg {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, .85);
    border-radius: 6px;
    padding: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

/* Archive details list */
.app-role-admin .report-accept-details .report-accept-detail,
.app-role-user .report-accept-details .report-accept-detail {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 12px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border-color);
    align-items: baseline;
}

html:not([data-theme="light"]) .app-role-admin .report-accept-details .report-accept-detail,
html:not([data-theme="light"]) .app-role-user .report-accept-details .report-accept-detail {
    border-bottom-color: rgba(148, 163, 184, .12);
}

.app-role-admin .report-accept-details .report-accept-detail dt,
.app-role-user .report-accept-details .report-accept-detail dt {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: .02em;
}

.app-role-admin .report-accept-details .report-accept-detail dd,
.app-role-user .report-accept-details .report-accept-detail dd {
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 600;
    margin: 0;
}

.app-role-admin .report-accept-details .report-accept-detail--voucher dt,
.app-role-user .report-accept-details .report-accept-detail--voucher dt,
.app-role-admin .report-accept-details .report-accept-detail--liters dt,
.app-role-user .report-accept-details .report-accept-detail--liters dt {
    color: #4099ff;
}

/* Report accept section headings inside body */
.app-role-admin .report-accept-section-heading,
.app-role-user .report-accept-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px 0;
    color: var(--text-main);
    font-size: .95rem;
    font-weight: 700;
}

.app-role-admin .report-accept-section-heading svg,
.app-role-user .report-accept-section-heading svg {
    width: 20px;
    height: 20px;
}

/* Responsive modal */
@media (max-width: 640px) {
    .app-role-admin .approve-modal-overlay,
    .app-role-user .approve-modal-overlay,
    .app-role-admin .voucher-archive-overlay,
    .app-role-admin .evoucher-modal-overlay {
        padding: clamp(12px, 4vw, 20px);
    }

    .app-role-admin .modal-content,
    .app-role-user .modal-content,
    .app-role-admin .approve-modal-content,
    .app-role-user .approve-modal-content,
    .app-role-admin .report-accept-modal,
    .app-role-user .report-accept-modal,
    .app-role-admin .reject-modal-content {
        width: min(100%, 95vw);
        max-height: min(95vh, 900px);
        border-radius: 16px;
    }

    .app-role-admin .evoucher-modal-card {
        width: min(100%, 95vw);
        max-height: min(95vh, 900px);
        border-radius: 16px;
    }

    .app-role-admin .approve-modal-content .approve-modal-heading,
    .app-role-user .approve-modal-content .approve-modal-heading,
    .app-role-admin .report-accept-modal .report-accept-heading,
    .app-role-user .report-accept-modal .report-accept-heading {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 20px 64px 16px 20px;
        border-radius: 16px 16px 0 0;
    }

    .app-role-admin .approve-modal-content .approve-modal-heading-icon,
    .app-role-user .approve-modal-content .approve-modal-heading-icon,
    .app-role-admin .report-accept-modal .report-accept-heading-icon,
    .app-role-user .report-accept-modal .report-accept-heading-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 10px;
    }

    .app-role-admin .approve-modal-content .approve-modal-heading-icon svg,
    .app-role-user .approve-modal-content .approve-modal-heading-icon svg,
    .app-role-admin .report-accept-modal .report-accept-heading-icon svg,
    .app-role-user .report-accept-modal .report-accept-heading-icon svg {
        width: 20px;
        height: 20px;
    }

    .app-role-admin .approve-modal-content .approve-modal-heading h3,
    .app-role-user .approve-modal-content .approve-modal-heading h3,
    .app-role-admin .report-accept-modal .report-accept-heading h3,
    .app-role-user .report-accept-modal .report-accept-heading h3 {
        font-size: 1.15rem;
    }

    .app-role-admin .approve-modal-content .approve-modal-heading p,
    .app-role-user .approve-modal-content .approve-modal-heading p,
    .app-role-admin .report-accept-modal .report-accept-heading p,
    .app-role-user .report-accept-modal .report-accept-heading p {
        font-size: .78rem;
    }

    .app-role-admin .approve-modal-content .approve-modal-close,
    .app-role-user .approve-modal-content .approve-modal-close,
    .app-role-admin .report-accept-modal .icon-button--close,
    .app-role-user .report-accept-modal .icon-button--close,
    .app-role-admin .reject-modal-close,
    .app-role-admin .evoucher-modal-close {
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 8px;
    }

    .app-role-admin .approve-modal-content .approve-modal-actions,
    .app-role-user .approve-modal-content .approve-modal-actions {
        padding: 16px 20px 20px;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .app-role-admin .approve-modal-content .approve-modal-actions .icon-button--labeled,
    .app-role-user .approve-modal-content .approve-modal-actions .icon-button--labeled,
    .app-role-admin .reject-modal-actions .btn,
    .app-role-admin .reject-modal-actions .icon-button {
        width: 100%;
        justify-content: center;
    }

    .app-role-admin .reject-modal-actions {
        flex-direction: column-reverse;
        padding: 16px 20px 20px;
    }

    .app-role-admin .reject-modal-actions .btn {
        width: 100%;
    }

    .app-role-admin .reject-modal-body {
        padding: 20px;
    }

    .app-role-admin .report-accept-details .report-accept-detail {
        grid-template-columns: 120px 1fr;
        padding: 10px 20px;
    }

    .app-role-admin .report-accept-evidence-grid,
    .app-role-user .report-accept-evidence-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        padding: 0 20px 16px;
    }
}

.app-role-user .fueling-confirm-overlay {
    padding: clamp(12px, 3vw, 24px);
    background: rgba(16, 24, 40, .62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.app-role-user .fueling-confirm-dialog {
    width: min(100%, 540px);
    max-height: calc(100vh - 32px);
    margin: max(2vh, 12px) auto;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    background: var(--bg-card);
    box-shadow: 0 24px 64px rgba(16, 24, 40, .28);
}

.app-role-user .fueling-confirm-heading {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 22px 60px 18px 24px;
    margin: 0 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    background: linear-gradient(110deg, #4099ff, #536dfe);
}

.app-role-user .fueling-confirm-icon {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 42px;
    height: 42px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.app-role-user .fueling-confirm-kicker,
.app-role-user .fueling-confirm-heading h3,
.app-role-user .fueling-confirm-heading p,
.app-role-user .fueling-confirm-voucher {
    grid-column: 2;
}

.app-role-user .fueling-confirm-kicker {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, .88);
    font-size: .65rem;
    letter-spacing: .1em;
}

.app-role-user .fueling-confirm-heading h3 {
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 650;
}

.app-role-user .fueling-confirm-heading p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: .78rem;
}

.app-role-user .fueling-confirm-voucher {
    width: fit-content;
    margin-top: 10px;
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.app-role-user .fueling-confirm-close {
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, .28) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
}

.app-role-user .fueling-confirm-dialog > form {
    padding: 0 24px 20px;
}

.app-role-user .fueling-confirm-field label {
    color: var(--text-main);
}

.app-role-user .fueling-confirm-field small {
    color: var(--text-muted);
}

.app-role-user .fueling-confirm-actions {
    border-color: var(--border-color);
}

.app-role-user .fueling-confirm-actions .btn-outline.icon-button--labeled {
    border-color: var(--border-color) !important;
    color: var(--text-main);
    background: var(--bg-card) !important;
}

.app-role-admin .fueling-report-dialog,
.app-role-user .fueling-report-dialog {
    width: min(100%, 600px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    background: var(--bg-card);
    box-shadow: 0 24px 64px rgba(16, 24, 40, .28);
}

.app-role-admin .fueling-report-heading,
.app-role-user .fueling-report-heading {
    padding: 22px 60px 18px 24px;
    margin: 0 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    background: linear-gradient(110deg, #4099ff, #536dfe);
}

.app-role-admin .fueling-report-kicker,
.app-role-user .fueling-report-kicker {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .88);
}

.app-role-admin .fueling-report-heading h3,
.app-role-user .fueling-report-heading h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 650;
}

.app-role-admin .fueling-report-heading p,
.app-role-user .fueling-report-heading p {
    color: rgba(255, 255, 255, .9);
    font-size: .79rem;
}

.app-role-admin .fueling-report-close,
.app-role-user .fueling-report-close {
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, .28) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
}

.app-role-admin .fueling-report-dialog > form,
.app-role-user .fueling-report-dialog > form {
    padding: 0 24px 20px;
}

.app-role-admin .fueling-report-photos-card,
.app-role-user .fueling-report-photos-card {
    border-color: var(--border-color);
    border-radius: 5px;
    background: rgba(148, 163, 184, .045);
}

.app-role-admin .fueling-report-photos-card h4,
.app-role-user .fueling-report-photos-card h4,
.app-role-admin .fueling-report-field label,
.app-role-user .fueling-report-field label {
    color: var(--text-main);
}

.app-role-admin .fueling-report-photos-grid .fueling-report-field,
.app-role-user .fueling-report-photos-grid .fueling-report-field {
    border-color: var(--border-color);
    background: var(--bg-card);
}

.app-role-admin .fueling-report-field small,
.app-role-user .fueling-report-field small {
    color: var(--text-muted);
}

.app-role-admin .fueling-report-field input[type="number"],
.app-role-user .fueling-report-field input[type="number"] {
    border-color: var(--border-color);
    color: var(--text-main);
    background: var(--bg-card);
}

.app-role-admin .fueling-report-actions,
.app-role-user .fueling-report-actions {
    border-color: var(--border-color);
}

.app-role-admin .fueling-report-actions .btn-outline.icon-button--labeled,
.app-role-user .fueling-report-actions .btn-outline.icon-button--labeled {
    border-color: var(--border-color) !important;
    color: var(--text-main);
    background: var(--bg-card) !important;
}

.app-role-admin .report-accept-modal,
.app-role-user .report-accept-modal {
    border-color: var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    background: var(--bg-card);
}

.app-role-admin .report-accept-heading,
.app-role-user .report-accept-heading {
    border-color: rgba(255, 255, 255, .16);
    background: linear-gradient(110deg, #4099ff, #536dfe);
}

.app-role-admin .report-accept-heading-icon,
.app-role-user .report-accept-heading-icon {
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.app-role-admin .report-accept-kicker,
.app-role-user .report-accept-kicker {
    color: rgba(255, 255, 255, .88);
    text-shadow: none;
}

.app-role-admin .report-accept-modal .report-accept-heading h3,
.app-role-user .report-accept-modal .report-accept-heading h3 {
    color: #fff;
}

.app-role-admin .report-accept-heading p,
.app-role-user .report-accept-heading p {
    color: rgba(255, 255, 255, .9);
}

@media (max-width: 640px) {
    .app-role-admin .approve-modal-overlay,
    .app-role-user .approve-modal-overlay,
    .app-role-admin .fueling-report-overlay,
    .app-role-user .fueling-report-overlay {
        padding: 10px;
    }

    .app-role-admin .approve-modal-content,
    .app-role-user .approve-modal-content {
        max-height: calc(100vh - 20px);
        margin: 0 auto;
    }

    .app-role-admin .approve-modal-content .approve-modal-heading,
    .app-role-user .approve-modal-content .approve-modal-heading,
    .app-role-admin .fueling-report-heading,
    .app-role-user .fueling-report-heading {
        padding: 18px 52px 16px 16px;
    }

    .app-role-admin .approve-modal-content .approve-modal-field,
    .app-role-user .approve-modal-content .approve-modal-field {
        margin-right: 16px;
        margin-left: 16px;
    }

    .app-role-admin .approve-modal-content .user-edit-grid,
    .app-role-user .approve-modal-content .user-edit-grid,
    .app-role-admin .approve-modal-content .spbu-add-grid,
    .app-role-user .approve-modal-content .spbu-add-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px 16px 8px;
    }

    .app-role-admin .approve-modal-content .user-edit-grid .approve-modal-field,
    .app-role-user .approve-modal-content .user-edit-grid .approve-modal-field,
    .app-role-admin .approve-modal-content .spbu-add-grid .approve-modal-field,
    .app-role-user .approve-modal-content .spbu-add-grid .approve-modal-field {
        margin: 0;
    }

    .app-role-admin .approve-modal-content .approve-modal-actions,
    .app-role-user .approve-modal-content .approve-modal-actions {
        flex-wrap: wrap;
        padding: 14px 16px 16px;
    }

    .app-role-admin .approve-modal-content .approve-modal-actions .icon-button--labeled,
    .app-role-user .approve-modal-content .approve-modal-actions .icon-button--labeled {
        flex: 1 1 auto;
        justify-content: center;
    }

    .app-role-admin .fueling-report-dialog,
    .app-role-user .fueling-report-dialog {
        max-height: calc(100vh - 20px);
    }

    .app-role-admin .fueling-report-dialog > form,
    .app-role-user .fueling-report-dialog > form {
        padding: 0 16px 16px;
    }

    .app-role-user .fueling-confirm-dialog {
        max-height: calc(100vh - 20px);
        margin: 0 auto;
    }

    .app-role-user .fueling-confirm-heading {
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 10px;
        padding: 18px 52px 16px 16px;
    }

    .app-role-user .fueling-confirm-icon {
        width: 36px;
        height: 36px;
    }

    .app-role-user .fueling-confirm-dialog > form {
        padding: 0 16px 16px;
    }

    .app-role-admin .fueling-report-photos-grid,
    .app-role-user .fueling-report-photos-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.app-role-admin .icon-button--labeled.btn-primary,
.app-role-user .icon-button--labeled.btn-primary {
    border: 1px solid #4657d5 !important;
    color: #fff !important;
    background: linear-gradient(110deg, #1677d2, #4657d5) !important;
}

.app-role-admin .icon-button--labeled.btn-primary:hover,
.app-role-admin .icon-button--labeled.btn-primary:focus-visible,
.app-role-user .icon-button--labeled.btn-primary:hover,
.app-role-user .icon-button--labeled.btn-primary:focus-visible {
    border-color: #3641b5 !important;
    color: #fff !important;
    background: linear-gradient(110deg, #1268bc, #3641b5) !important;
}

.app-role-admin .icon-button--labeled.btn-success,
.app-role-user .icon-button--labeled.btn-success {
    border: 1px solid #06734e !important;
    color: #fff !important;
    background: linear-gradient(110deg, #07875b, #06734e) !important;
}

.app-role-admin .icon-button--labeled.btn-success:hover,
.app-role-admin .icon-button--labeled.btn-success:focus-visible,
.app-role-user .icon-button--labeled.btn-success:hover,
.app-role-user .icon-button--labeled.btn-success:focus-visible {
    border-color: #055a3e !important;
    color: #fff !important;
    background: linear-gradient(110deg, #06734e, #055a3e) !important;
}

.app-role-admin .icon-button--labeled.btn-danger,
.app-role-user .icon-button--labeled.btn-danger {
    border: 1px solid #b42318 !important;
    color: #fff !important;
    background: linear-gradient(110deg, #d92d20, #b42318) !important;
}

.app-role-admin .icon-button--labeled.btn-danger:hover,
.app-role-admin .icon-button--labeled.btn-danger:focus-visible,
.app-role-user .icon-button--labeled.btn-danger:hover,
.app-role-user .icon-button--labeled.btn-danger:focus-visible {
    border-color: #912018 !important;
    color: #fff !important;
    background: linear-gradient(110deg, #b42318, #912018) !important;
}

.app-role-admin .icon-button--labeled.btn-warning,
.app-role-user .icon-button--labeled.btn-warning {
    border: 1px solid #d97706 !important;
    color: #3b2a08 !important;
    background: #fdb022 !important;
}

.app-role-admin .icon-button--labeled.btn-warning:hover,
.app-role-admin .icon-button--labeled.btn-warning:focus-visible,
.app-role-user .icon-button--labeled.btn-warning:hover,
.app-role-user .icon-button--labeled.btn-warning:focus-visible {
    border-color: #b45309 !important;
    color: #2c1d04 !important;
    background: #f79009 !important;
}

.app-role-admin .icon-button--labeled.btn-outline,
.app-role-user .icon-button--labeled.btn-outline {
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    background: var(--bg-card) !important;
}

.app-role-admin .icon-button--labeled.btn-outline:hover,
.app-role-admin .icon-button--labeled.btn-outline:focus-visible,
.app-role-user .icon-button--labeled.btn-outline:hover,
.app-role-user .icon-button--labeled.btn-outline:focus-visible {
    border-color: #4099ff !important;
    color: #1677d2 !important;
    background: rgba(64, 153, 255, .09) !important;
}

.app-role-admin .icon-button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.icon-button--voucher),
.app-role-user .icon-button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.icon-button--voucher) {
    color: var(--text-muted) !important;
}

.app-role-admin .icon-button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.icon-button--voucher):hover,
.app-role-admin .icon-button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.icon-button--voucher):focus-visible,
.app-role-user .icon-button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.icon-button--voucher):hover,
.app-role-user .icon-button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.icon-button--voucher):focus-visible {
    color: #3641d9 !important;
    background: rgba(70, 95, 255, .1) !important;
}

.app-role-admin .icon-button.btn-danger:not(.icon-button--labeled),
.app-role-user .icon-button.btn-danger:not(.icon-button--labeled) {
    color: #d92d20 !important;
}

.app-role-admin .icon-button.btn-success:not(.icon-button--labeled),
.app-role-user .icon-button.btn-success:not(.icon-button--labeled) {
    color: #07875b !important;
}

.app-role-admin .icon-button.btn-warning:not(.icon-button--labeled),
.app-role-user .icon-button.btn-warning:not(.icon-button--labeled) {
    color: #a86500 !important;
}

.app-role-admin .icon-button.btn-danger:not(.icon-button--labeled):hover,
.app-role-admin .icon-button.btn-danger:not(.icon-button--labeled):focus-visible,
.app-role-user .icon-button.btn-danger:not(.icon-button--labeled):hover,
.app-role-user .icon-button.btn-danger:not(.icon-button--labeled):focus-visible {
    color: #b42318 !important;
    background: rgba(240, 68, 56, .12) !important;
}

.app-role-admin .icon-button.btn-success:not(.icon-button--labeled):hover,
.app-role-admin .icon-button.btn-success:not(.icon-button--labeled):focus-visible,
.app-role-user .icon-button.btn-success:not(.icon-button--labeled):hover,
.app-role-user .icon-button.btn-success:not(.icon-button--labeled):focus-visible {
    color: #06734e !important;
    background: rgba(18, 185, 129, .12) !important;
}

.app-role-admin .icon-button.btn-warning:not(.icon-button--labeled):hover,
.app-role-admin .icon-button.btn-warning:not(.icon-button--labeled):focus-visible,
.app-role-user .icon-button.btn-warning:not(.icon-button--labeled):hover,
.app-role-user .icon-button.btn-warning:not(.icon-button--labeled):focus-visible {
    color: #854a0e !important;
    background: rgba(247, 144, 9, .14) !important;
}

html:not([data-theme="light"]) .app-role-admin .icon-button.btn-danger:not(.icon-button--labeled),
html:not([data-theme="light"]) .app-role-user .icon-button.btn-danger:not(.icon-button--labeled) {
    color: #ff8b82 !important;
}

html:not([data-theme="light"]) .app-role-admin .icon-button.btn-success:not(.icon-button--labeled),
html:not([data-theme="light"]) .app-role-user .icon-button.btn-success:not(.icon-button--labeled) {
    color: #70e1c4 !important;
}

html:not([data-theme="light"]) .app-role-admin .icon-button.btn-warning:not(.icon-button--labeled),
html:not([data-theme="light"]) .app-role-user .icon-button.btn-warning:not(.icon-button--labeled) {
    color: #ffd166 !important;
}

html:not([data-theme="light"]) .app-role-admin .icon-button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.icon-button--voucher):hover,
html:not([data-theme="light"]) .app-role-admin .icon-button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.icon-button--voucher):focus-visible,
html:not([data-theme="light"]) .app-role-user .icon-button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.icon-button--voucher):hover,
html:not([data-theme="light"]) .app-role-user .icon-button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.icon-button--voucher):focus-visible {
    color: #c4ccff !important;
    background: rgba(129, 146, 255, .16) !important;
}

.app-role-admin .icon-button--labeled:disabled,
.app-role-user .icon-button--labeled:disabled {
    cursor: not-allowed;
    filter: grayscale(.25);
    opacity: .58;
    transform: none;
}

.app-role-admin .table td .icon-button,
.app-role-user .table td .icon-button {
    display: inline-flex;
    width: 34px;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0 3px 0 0;
    padding: 0 !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 5px;
    color: #475467 !important;
    background: #fff !important;
    vertical-align: middle;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.app-role-admin .table td.vehicle-actions form,
.app-role-admin .table td.spbu-actions form,
.app-role-admin .table td.user-actions form,
.app-role-admin .table td .voucher-actions form,
.app-role-user .table td.user-voucher-actions form {
    display: inline-flex;
    align-items: center;
    margin: 0 3px 0 0;
    vertical-align: middle;
}

.app-role-admin .table td .icon-button:not(.icon-button--labeled) .action-icon,
.app-role-user .table td .icon-button:not(.icon-button--labeled) .action-icon {
    width: 16px;
    height: 16px;
}

.app-role-admin .table td .icon-button.btn-primary,
.app-role-user .table td .icon-button.btn-primary {
    border-color: #b2ddff !important;
    color: #175cd3 !important;
    background: #eff8ff !important;
}

.app-role-admin .table td .icon-button.btn-success,
.app-role-user .table td .icon-button.btn-success {
    border-color: #abefc6 !important;
    color: #067647 !important;
    background: #ecfdf3 !important;
}

.app-role-admin .table td .icon-button.btn-warning,
.app-role-user .table td .icon-button.btn-warning {
    border-color: #fedf89 !important;
    color: #a15c07 !important;
    background: #fffaeb !important;
}

.app-role-admin .table td .icon-button.btn-danger,
.app-role-user .table td .icon-button.btn-danger {
    border-color: #fecdca !important;
    color: #b42318 !important;
    background: #fef3f2 !important;
}

.app-role-admin .table td .icon-button--voucher,
.app-role-user .table td .icon-button--voucher {
    border-color: #fedf89 !important;
    color: #854a0e !important;
    background: #fffaeb !important;
}

.app-role-admin .table td .icon-button.btn-outline,
.app-role-user .table td .icon-button.btn-outline,
.app-role-admin .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher),
.app-role-user .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher) {
    border-color: #d0d5dd !important;
    color: #475467 !important;
    background: #f9fafb !important;
}

.app-role-admin .table td .icon-button--labeled,
.app-role-user .table td .icon-button--labeled {
    width: auto;
    min-width: 0;
    gap: 6px;
    padding: 0 10px !important;
    font-size: .73rem;
    font-weight: 600;
}

.app-role-admin .table td .icon-button--labeled .action-icon,
.app-role-user .table td .icon-button--labeled .action-icon {
    width: 15px;
    height: 15px;
}

.app-role-admin .table td .icon-button.btn-primary:hover,
.app-role-admin .table td .icon-button.btn-primary:focus-visible,
.app-role-user .table td .icon-button.btn-primary:hover,
.app-role-user .table td .icon-button.btn-primary:focus-visible {
    border-color: #84caff !important;
    color: #1849a9 !important;
    background: #d1e9ff !important;
}

.app-role-admin .table td .icon-button.btn-success:hover,
.app-role-admin .table td .icon-button.btn-success:focus-visible,
.app-role-user .table td .icon-button.btn-success:hover,
.app-role-user .table td .icon-button.btn-success:focus-visible {
    border-color: #75e0a7 !important;
    color: #05603a !important;
    background: #d1fadf !important;
}

.app-role-admin .table td .icon-button.btn-warning:hover,
.app-role-admin .table td .icon-button.btn-warning:focus-visible,
.app-role-user .table td .icon-button.btn-warning:hover,
.app-role-user .table td .icon-button.btn-warning:focus-visible {
    border-color: #fec84b !important;
    color: #7a2e0e !important;
    background: #fef0c7 !important;
}

.app-role-admin .table td .icon-button.btn-danger:hover,
.app-role-admin .table td .icon-button.btn-danger:focus-visible,
.app-role-user .table td .icon-button.btn-danger:hover,
.app-role-user .table td .icon-button.btn-danger:focus-visible {
    border-color: #fda29b !important;
    color: #912018 !important;
    background: #fee4e2 !important;
}

.app-role-admin .table td .icon-button--voucher:hover,
.app-role-admin .table td .icon-button--voucher:focus-visible,
.app-role-user .table td .icon-button--voucher:hover,
.app-role-user .table td .icon-button--voucher:focus-visible {
    border-color: #fec84b !important;
    color: #7a2e0e !important;
    background: #fef0c7 !important;
}

.app-role-admin .table td .icon-button.btn-outline:hover,
.app-role-admin .table td .icon-button.btn-outline:focus-visible,
.app-role-admin .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher):hover,
.app-role-admin .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher):focus-visible,
.app-role-user .table td .icon-button.btn-outline:hover,
.app-role-user .table td .icon-button.btn-outline:focus-visible,
.app-role-user .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher):hover,
.app-role-user .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher):focus-visible {
    border-color: #b2ddff !important;
    color: #175cd3 !important;
    background: #eff8ff !important;
}

.app-role-admin .table td .icon-button:focus-visible,
.app-role-user .table td .icon-button:focus-visible {
    outline: 2px solid #4099ff;
    outline-offset: 2px;
    box-shadow: none !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button,
html:not([data-theme="light"]) .app-role-user .table td .icon-button {
    border-color: #475467 !important;
    color: #d0d5dd !important;
    background: #293548 !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-primary,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-primary {
    border-color: #175cd3 !important;
    color: #b2ddff !important;
    background: #1c3d66 !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-success,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-success {
    border-color: #087443 !important;
    color: #a6f4c5 !important;
    background: #164b42 !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-warning,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-warning,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button--voucher,
html:not([data-theme="light"]) .app-role-user .table td .icon-button--voucher {
    border-color: #854a0e !important;
    color: #fedf89 !important;
    background: #59451d !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-danger,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-danger {
    border-color: #912018 !important;
    color: #fecdca !important;
    background: #5b2526 !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-outline,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-outline,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher),
html:not([data-theme="light"]) .app-role-user .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher) {
    border-color: #475467 !important;
    color: #d0d5dd !important;
    background: #293548 !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-primary:hover,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-primary:focus-visible,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-primary:hover,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-primary:focus-visible {
    border-color: #4099ff !important;
    color: #fff !important;
    background: #24558a !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-success:hover,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-success:focus-visible,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-success:hover,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-success:focus-visible {
    border-color: #32d583 !important;
    color: #d1fadf !important;
    background: #176b4d !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-warning:hover,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-warning:focus-visible,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button--voucher:hover,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button--voucher:focus-visible,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-warning:hover,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-warning:focus-visible,
html:not([data-theme="light"]) .app-role-user .table td .icon-button--voucher:hover,
html:not([data-theme="light"]) .app-role-user .table td .icon-button--voucher:focus-visible {
    border-color: #fec84b !important;
    color: #fff !important;
    background: #704b16 !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-danger:hover,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-danger:focus-visible,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-danger:hover,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-danger:focus-visible {
    border-color: #f97066 !important;
    color: #fee4e2 !important;
    background: #742a2a !important;
}

html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-outline:hover,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button.btn-outline:focus-visible,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher):hover,
html:not([data-theme="light"]) .app-role-admin .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher):focus-visible,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-outline:hover,
html:not([data-theme="light"]) .app-role-user .table td .icon-button.btn-outline:focus-visible,
html:not([data-theme="light"]) .app-role-user .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher):hover,
html:not([data-theme="light"]) .app-role-user .table td .icon-button:not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(.icon-button--voucher):focus-visible {
    border-color: #84caff !important;
    color: #b2ddff !important;
    background: #1c3d66 !important;
}

@media (max-width: 640px) {
    .app-role-admin .table td[class$="actions"],
    .app-role-admin .table td.voucher-actions-cell,
    .app-role-user .table td.user-voucher-actions {
        white-space: nowrap;
    }

    .app-role-admin .table td .icon-button,
    .app-role-user .table td .icon-button {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }
}

.app-role-admin .voucher-archive-overlay,
.app-role-user .voucher-archive-overlay {
    display: block;
    overflow-y: auto;
    padding: clamp(12px, 2.5vh, 24px);
}

.app-role-admin .voucher-archive-modal,
.app-role-user .voucher-archive-modal {
    display: flex;
    width: min(100%, 980px);
    max-height: calc(100vh - 48px);
    flex-direction: column;
    margin: 0 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 8px;
}

.app-role-admin .voucher-archive-modal .report-accept-heading,
.app-role-user .voucher-archive-modal .report-accept-heading {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 8px 14px;
    padding: 22px 64px 20px 24px;
    background: linear-gradient(110deg, #175cd3, #3641b5);
}

.app-role-admin .voucher-archive-modal .report-accept-heading-icon,
.app-role-user .voucher-archive-modal .report-accept-heading-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    align-self: start;
}

.app-role-admin .voucher-archive-modal .report-accept-heading > div,
.app-role-user .voucher-archive-modal .report-accept-heading > div {
    grid-column: 2;
    min-width: 0;
}

.app-role-admin .voucher-archive-modal .report-accept-kicker,
.app-role-user .voucher-archive-modal .report-accept-kicker {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .88);
    font-size: .65rem;
    letter-spacing: .1em;
    text-shadow: none;
}

.app-role-admin .voucher-archive-modal .report-accept-heading h3,
.app-role-user .voucher-archive-modal .report-accept-heading h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 650;
}

html[data-theme="light"] .app-role-admin .voucher-archive-modal .report-accept-heading h3,
html[data-theme="light"] .app-role-user .voucher-archive-modal .report-accept-heading h3 {
    color: #fff;
}

.app-role-admin .voucher-archive-modal .report-accept-heading p,
.app-role-user .voucher-archive-modal .report-accept-heading p {
    margin-top: 5px;
    color: rgba(255, 255, 255, .9);
    font-size: .78rem;
}

.app-role-admin .voucher-archive-modal .voucher-archive-status,
.app-role-user .voucher-archive-modal .voucher-archive-status {
    grid-column: 2;
    justify-self: start;
    align-self: start;
    margin: 2px 0 0;
    padding: 6px 10px;
    border: 1px solid #067647;
    border-radius: 4px;
    color: #fff;
    background: #067647;
    font-size: .72rem;
}

.app-role-admin .voucher-archive-modal .voucher-archive-status .action-icon,
.app-role-user .voucher-archive-modal .voucher-archive-status .action-icon {
    color: #fff;
}

.app-role-admin .voucher-archive-modal .report-accept-info,
.app-role-user .voucher-archive-modal .report-accept-info {
    flex: 0 0 auto;
    margin: 18px 24px 12px;
    padding: 18px;
    border-color: var(--border-color);
    border-radius: 6px;
    background: rgba(148, 163, 184, .045);
}

.app-role-admin .voucher-archive-modal .report-accept-section-heading,
.app-role-user .voucher-archive-modal .report-accept-section-heading {
    gap: 8px;
    margin: 0 0 12px;
    color: var(--text-main);
    font-size: .84rem;
    font-weight: 650;
}

.app-role-admin .voucher-archive-modal .report-accept-section-heading .action-icon,
.app-role-user .voucher-archive-modal .report-accept-section-heading .action-icon {
    color: #4099ff;
}

.app-role-admin .voucher-archive-modal .report-accept-details,
.app-role-user .voucher-archive-modal .report-accept-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
}

.app-role-admin .voucher-archive-modal .report-accept-detail,
.app-role-user .voucher-archive-modal .report-accept-detail {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(100px, .75fr) minmax(0, 1.25fr);
    align-items: baseline;
    gap: 12px;
    padding: 11px 2px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    text-align: left;
}

.app-role-admin .voucher-archive-modal .report-accept-detail dt,
.app-role-user .voucher-archive-modal .report-accept-detail dt {
    color: var(--text-muted);
    font-size: .68rem;
    line-height: 1.35;
}

.app-role-admin .voucher-archive-modal .report-accept-detail dd,
.app-role-user .voucher-archive-modal .report-accept-detail dd {
    width: 100%;
    color: var(--text-main);
    font-size: .79rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}

.app-role-admin .voucher-archive-modal .report-accept-detail--voucher,
.app-role-user .voucher-archive-modal .report-accept-detail--voucher {
    border-bottom-color: var(--border-color);
    background: transparent;
}

.app-role-admin .voucher-archive-modal .report-accept-detail--voucher dd,
.app-role-user .voucher-archive-modal .report-accept-detail--voucher dd {
    color: var(--text-main);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .78rem;
}

.app-role-admin .voucher-archive-modal .report-accept-detail--liters,
.app-role-user .voucher-archive-modal .report-accept-detail--liters {
    border-bottom-color: var(--border-color);
    background: transparent;
}

.app-role-admin .voucher-archive-modal .report-accept-detail--liters dd,
.app-role-user .voucher-archive-modal .report-accept-detail--liters dd {
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 700;
}

.app-role-admin .voucher-archive-modal .report-accept-detail--liters small,
.app-role-user .voucher-archive-modal .report-accept-detail--liters small {
    color: var(--text-muted);
}

.app-role-admin .voucher-archive-modal .voucher-archive-note,
.app-role-user .voucher-archive-modal .voucher-archive-note {
    grid-column: 1 / -1;
    min-height: 0;
    grid-template-columns: minmax(100px, .35fr) minmax(0, 1.65fr);
    border-bottom: 0;
    background: transparent;
}

.app-role-admin .voucher-archive-modal .report-accept-evidence,
.app-role-user .voucher-archive-modal .report-accept-evidence {
    flex: 0 0 auto;
    margin: 0 24px 16px;
    padding: 18px;
    border-color: var(--border-color);
    border-radius: 6px;
    background: rgba(148, 163, 184, .045);
}

.app-role-admin .voucher-archive-modal .report-accept-evidence-grid,
.app-role-user .voucher-archive-modal .report-accept-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.app-role-admin .voucher-archive-modal .report-accept-evidence-grid a,
.app-role-user .voucher-archive-modal .report-accept-evidence-grid a {
    min-height: 76px;
    padding: 8px;
    border-color: var(--border-color);
    border-radius: 5px;
    color: var(--text-main) !important;
    background: var(--bg-card);
}

.app-role-admin .voucher-archive-modal .report-accept-evidence-grid a:hover,
.app-role-admin .voucher-archive-modal .report-accept-evidence-grid a:focus-visible,
.app-role-user .voucher-archive-modal .report-accept-evidence-grid a:hover,
.app-role-user .voucher-archive-modal .report-accept-evidence-grid a:focus-visible {
    border-color: #4099ff;
    background: rgba(64, 153, 255, .07);
}

.app-role-admin .voucher-archive-modal .report-accept-evidence-grid a > img,
.app-role-user .voucher-archive-modal .report-accept-evidence-grid a > img {
    width: 68px;
    height: 52px;
    border-color: var(--border-color);
    border-radius: 4px;
}

.app-role-admin .voucher-archive-modal .report-accept-evidence-grid a strong,
.app-role-user .voucher-archive-modal .report-accept-evidence-grid a strong {
    color: var(--text-main);
    font-size: .77rem;
}

.app-role-admin .voucher-archive-modal .report-accept-evidence-grid a small,
.app-role-user .voucher-archive-modal .report-accept-evidence-grid a small {
    color: var(--text-muted);
    font-size: .68rem;
}

.app-role-admin .voucher-archive-modal .report-accept-evidence-grid a > .action-icon,
.app-role-user .voucher-archive-modal .report-accept-evidence-grid a > .action-icon {
    color: #4099ff;
}

.app-role-admin .voucher-archive-modal .voucher-archive-actions,
.app-role-user .voucher-archive-modal .voucher-archive-actions {
    position: sticky;
    z-index: 2;
    bottom: 0;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin: auto 0 0;
    padding: 12px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

.app-role-admin .voucher-archive-modal .voucher-archive-actions .btn,
.app-role-user .voucher-archive-modal .voucher-archive-actions .btn {
    min-height: 38px;
    border-radius: 4px;
}

.app-role-admin .voucher-archive-modal .report-accept-details dd,
.app-role-user .voucher-archive-modal .report-accept-details dd {
    color: var(--text-main);
}

@media (max-width: 900px) {
    .app-role-admin .voucher-archive-modal .report-accept-details,
    .app-role-user .voucher-archive-modal .report-accept-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .app-role-admin .voucher-archive-overlay,
    .app-role-user .voucher-archive-overlay {
        padding: 10px;
    }

    .app-role-admin .voucher-archive-modal,
    .app-role-user .voucher-archive-modal {
        max-height: calc(100vh - 20px);
    }

    .app-role-admin .voucher-archive-modal .report-accept-heading,
    .app-role-user .voucher-archive-modal .report-accept-heading {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 8px 10px;
        padding: 18px 52px 16px 16px;
    }

    .app-role-admin .voucher-archive-modal .report-accept-heading-icon,
    .app-role-user .voucher-archive-modal .report-accept-heading-icon {
        width: 36px;
        height: 36px;
        grid-row: 1 / span 2;
    }

    .app-role-admin .voucher-archive-modal .voucher-archive-status,
    .app-role-user .voucher-archive-modal .voucher-archive-status {
        justify-self: start;
    }

    .app-role-admin .voucher-archive-modal .report-accept-heading h3,
    .app-role-user .voucher-archive-modal .report-accept-heading h3 {
        font-size: 1.05rem;
    }

    .app-role-admin .voucher-archive-modal .report-accept-info,
    .app-role-user .voucher-archive-modal .report-accept-info,
    .app-role-admin .voucher-archive-modal .report-accept-evidence,
    .app-role-user .voucher-archive-modal .report-accept-evidence {
        margin-right: 12px;
        margin-left: 12px;
        padding: 12px;
    }

    .app-role-admin .voucher-archive-modal .report-accept-details,
    .app-role-user .voucher-archive-modal .report-accept-details,
    .app-role-admin .voucher-archive-modal .report-accept-evidence-grid,
    .app-role-user .voucher-archive-modal .report-accept-evidence-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-role-admin .voucher-archive-modal .report-accept-detail,
    .app-role-user .voucher-archive-modal .report-accept-detail {
        min-height: 0;
        grid-template-columns: minmax(105px, .8fr) minmax(0, 1.2fr);
        gap: 10px;
        padding: 10px 2px;
    }

    .app-role-admin .voucher-archive-modal .voucher-archive-note,
    .app-role-user .voucher-archive-modal .voucher-archive-note {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .app-role-admin .voucher-archive-modal .voucher-archive-actions,
    .app-role-user .voucher-archive-modal .voucher-archive-actions {
        padding: 10px 12px;
    }

    .app-role-admin .voucher-archive-modal .voucher-archive-actions .btn,
    .app-role-user .voucher-archive-modal .voucher-archive-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.app-role-admin .admin-dashboard > .admin-dashboard-hero {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .58fr);
    gap: clamp(18px, 3vw, 32px);
    min-height: 244px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-main);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

.app-role-admin .admin-dashboard-hero-copy {
    align-self: center;
    max-width: 700px;
    padding: 24px clamp(14px, 2.5vw, 30px);
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow {
    min-height: 30px;
    gap: 8px;
    padding: 5px 10px 5px 8px;
    border: 1px solid rgba(64, 153, 255, .2);
    border-radius: 5px;
    color: #2867b2;
    background: rgba(64, 153, 255, .08);
    font-size: .68rem;
    letter-spacing: .12em;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow .action-icon {
    width: 16px;
    height: 16px;
    color: #4099ff;
}

.app-role-admin .admin-dashboard-hero h1 {
    margin: 16px 0 8px;
    color: var(--text-main);
    font-size: clamp(1.55rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.22;
}

.app-role-admin .admin-dashboard-hero p {
    max-width: 590px;
    margin: 0;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.6;
}

.app-role-admin .admin-dashboard-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    margin-top: 20px;
    padding: 8px 13px;
    border: 1px solid #2869aa;
    border-radius: 5px;
    color: #fff;
    background: #2869aa;
    box-shadow: 0 3px 8px rgba(52, 127, 201, .16);
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.app-role-admin .admin-dashboard-hero-link:hover {
    color: #fff;
    background: #20578f;
    box-shadow: 0 5px 12px rgba(52, 127, 201, .24);
    transform: translateY(-1px);
}

.app-role-admin .admin-dashboard-hero-link:focus-visible {
    outline: 3px solid rgba(64, 153, 255, .35);
    outline-offset: 3px;
}

.app-role-admin .admin-dashboard-hero-link .action-icon {
    width: 15px;
    height: 15px;
}

.app-role-admin .admin-dashboard-hero-side {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 214px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 255, 255, .2), transparent 38%),
        linear-gradient(140deg, #246eae 0%, #455bd3 58%, #6253c8 100%);
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-live,
.app-role-admin .admin-dashboard-hero .admin-dashboard-date {
    position: relative;
    z-index: 1;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-live {
    justify-content: center;
    min-height: 34px;
    margin: 0;
    padding: 7px 11px;
    border: 1px solid rgba(209, 250, 229, .34);
    border-radius: 5px;
    color: #d1fae5;
    background: rgba(6, 78, 59, .22);
    font-size: .64rem;
    letter-spacing: .08em;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-live > span {
    width: 8px;
    height: 8px;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .15);
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date {
    min-width: 0;
    min-height: 68px;
    gap: 5px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 5px;
    color: #fff;
    background: rgba(255, 255, 255, .13);
    text-align: left;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date span {
    color: rgba(255, 255, 255, .82);
    font-size: .6rem;
    letter-spacing: .12em;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.app-role-admin .admin-dashboard-hero-decoration {
    right: 4px;
    bottom: -35px;
    color: rgba(255, 255, 255, .13);
    transform: rotate(-12deg);
}

.app-role-admin .admin-dashboard-hero-decoration .action-icon {
    width: 154px;
    height: 154px;
    stroke-width: 1;
}

@media (max-width: 700px) {
    .app-role-admin .admin-dashboard > .admin-dashboard-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 12px;
    }

    .app-role-admin .admin-dashboard-hero-copy {
        padding: 20px 14px;
    }

    .app-role-admin .admin-dashboard-hero-side {
        width: 100%;
        min-width: 0;
        min-height: 150px;
        padding: 18px;
    }

    .app-role-admin .admin-dashboard-hero .admin-dashboard-date {
        min-width: 160px;
    }

    .app-role-admin .admin-dashboard-hero-decoration {
        right: 14px;
        bottom: -48px;
    }
}

@media (max-width: 420px) {
    .app-role-admin .admin-dashboard > .admin-dashboard-hero {
        gap: 6px;
        padding: 10px;
    }

    .app-role-admin .admin-dashboard-hero-copy {
        padding: 18px 10px;
    }

    .app-role-admin .admin-dashboard-hero h1 {
        margin-top: 13px;
        font-size: 1.42rem;
    }

    .app-role-admin .admin-dashboard-hero p {
        font-size: .82rem;
    }

    .app-role-admin .admin-dashboard-hero-side {
        padding: 16px;
    }

    .app-role-admin .admin-dashboard-hero-decoration {
        right: -12px;
    }
}

.app-role-admin .admin-dashboard > .admin-dashboard-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    min-height: 0;
    padding: 22px 26px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.app-role-admin .admin-dashboard-hero-copy {
    padding: 0;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow {
    min-height: 0;
    padding: 0;
    border: 0;
    color: #4099ff;
    background: transparent;
    font-size: .64rem;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow .action-icon {
    width: 15px;
    height: 15px;
}

.app-role-admin .admin-dashboard-hero h1 {
    margin: 10px 0 5px;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    letter-spacing: -.02em;
}

.app-role-admin .admin-dashboard-hero p {
    font-size: .82rem;
}

.app-role-admin .admin-dashboard-hero-link {
    min-height: 34px;
    margin-top: 14px;
    padding: 7px 11px;
    box-shadow: none;
    font-size: .72rem;
}

.app-role-admin .admin-dashboard-hero-side {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-live {
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid rgba(18, 183, 106, .2);
    border-radius: 4px;
    color: #067647;
    background: #ecfdf3;
    font-size: .6rem;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-live > span {
    width: 7px;
    height: 7px;
    background: #12b76a;
    box-shadow: none;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date {
    min-height: 0;
    gap: 3px;
    padding: 0;
    border: 0;
    color: var(--text-main);
    background: transparent;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date span {
    color: var(--text-muted);
    font-size: .57rem;
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date strong {
    color: var(--text-main);
    font-size: .82rem;
}

.app-role-admin .admin-dashboard-hero-decoration {
    display: none;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-hero .admin-dashboard-live {
    border-color: rgba(110, 231, 183, .2);
    color: #a7f3d0;
    background: rgba(6, 78, 59, .32);
}

@media (max-width: 700px) {
    .app-role-admin .admin-dashboard > .admin-dashboard-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 20px;
    }

    .app-role-admin .admin-dashboard-hero-side {
        justify-content: flex-start;
        gap: 18px;
    }
}

@media (max-width: 420px) {
    .app-role-admin .admin-dashboard > .admin-dashboard-hero {
        gap: 16px;
        padding: 18px;
    }

    .app-role-admin .admin-dashboard-hero h1 {
        font-size: 1.3rem;
    }
}

html[data-theme="light"] .app-role-admin .admin-dashboard > .admin-dashboard-hero {
    background: #fff;
    border-color: #e4e7ec;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard > .admin-dashboard-hero {
    background: #202a3b;
    border-color: #3a4659;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow,
html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow .action-icon {
    color: #2867b2;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow .action-icon {
    color: #83bdff;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero h1,
html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-date strong {
    color: #101828;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-hero h1,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-hero .admin-dashboard-date strong {
    color: #f9fafb;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero p {
    color: #475467;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-hero p {
    color: #cbd5e1;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-date span {
    color: #667085;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-hero .admin-dashboard-date span {
    color: #b7c3d4;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow .action-icon {
    color: #2867b2;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-hero .admin-dashboard-eyebrow .action-icon {
    color: #83bdff;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-live > span {
    background: #067647;
    box-shadow: 0 0 0 3px rgba(6, 118, 71, .12);
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-live {
    font-weight: 700;
}

html[data-theme="light"] .app-role-admin .admin-dashboard-hero .admin-dashboard-live {
    border-color: #abefc6;
    color: #067647;
    background: #ecfdf3;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-hero .admin-dashboard-live {
    border-color: #14532d;
    color: #a7f3d0;
    background: #183f37;
}

.app-role-admin .admin-dashboard .admin-dashboard-hero .admin-dashboard-live {
    gap: 8px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #067647;
    background: transparent;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.app-role-admin .admin-dashboard .admin-dashboard-hero .admin-dashboard-live > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #067647;
    box-shadow: 0 0 0 3px rgba(6, 118, 71, .12);
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard .admin-dashboard-hero .admin-dashboard-live {
    color: #a7f3d0;
    background: transparent;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard .admin-dashboard-hero .admin-dashboard-live > span {
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .15);
}

.app-role-admin .admin-dashboard-hero .admin-dashboard-date {
    font-variant-numeric: tabular-nums;
}

.app-role-admin .admin-dashboard-hero-link,
.app-role-admin .admin-dashboard-hero-link:hover,
.app-role-admin .admin-dashboard-hero-link:active {
    color: #fff;
}

.app-role-admin .admin-dashboard-hero-link:focus-visible {
    outline-color: #4099ff;
}

@media (prefers-reduced-motion: reduce) {
    .app-role-admin .admin-dashboard-hero-link {
        transition: none;
    }
}

.app-role-admin .admin-dashboard .admin-dashboard-hero-copy > .admin-dashboard-hero-link {
    display: inline-flex;
    width: fit-content;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding: 6px 8px 6px 15px;
    border: 1px solid #2869aa;
    border-radius: 6px;
    color: #2869aa;
    background: transparent;
    box-shadow: none;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.app-role-admin .admin-dashboard .admin-dashboard-hero-copy > .admin-dashboard-hero-link:hover {
    border-color: #20578f;
    color: #20578f;
    background: rgba(40, 105, 170, .07);
    box-shadow: 0 2px 6px rgba(16, 54, 91, .1);
    transform: translateY(-1px);
}

.app-role-admin .admin-dashboard .admin-dashboard-hero-copy > .admin-dashboard-hero-link:active {
    background: rgba(40, 105, 170, .12);
    box-shadow: none;
    transform: translateY(0);
}

.app-role-admin .admin-dashboard .admin-dashboard-hero-copy > .admin-dashboard-hero-link:focus-visible {
    outline: 3px solid rgba(64, 153, 255, .48);
    outline-offset: 3px;
}

.app-role-admin .admin-dashboard-hero-link-icon {
    display: inline-grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid rgba(40, 105, 170, .24);
    border-radius: 4px;
    color: #2869aa;
    background: transparent;
}

.app-role-admin .admin-dashboard-hero-link-icon .action-icon {
    width: 16px;
    height: 16px;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard .admin-dashboard-hero-copy > .admin-dashboard-hero-link {
    border-color: #83bdff;
    color: #a9d2ff;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard .admin-dashboard-hero-copy > .admin-dashboard-hero-link:hover {
    border-color: #a9d2ff;
    color: #d3e8ff;
    background: rgba(131, 189, 255, .1);
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard .admin-dashboard-hero-copy > .admin-dashboard-hero-link:active {
    background: rgba(131, 189, 255, .16);
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-hero-link-icon {
    border-color: rgba(169, 210, 255, .32);
    color: #a9d2ff;
}

@media (max-width: 420px) {
    .app-role-admin .admin-dashboard .admin-dashboard-hero-copy > .admin-dashboard-hero-link {
        min-height: 40px;
        margin-top: 13px;
        font-size: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-role-admin .admin-dashboard .admin-dashboard-hero-copy > .admin-dashboard-hero-link {
        transition: none;
    }
}

.app-role-admin .nav-logo__icon,
.app-role-user .nav-logo__icon {
    overflow: hidden;
    border: 1px solid rgba(32, 99, 153, .16);
    background: #fff;
}

.app-role-admin .nav-logo__image,
.app-role-user .nav-logo__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.auth-page .login-brand-logo {
    display: block;
    width: min(100%, 164px);
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    border: 1px solid rgba(32, 99, 153, .14);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .1);
    object-fit: contain;
}

.auth-page .login-header .login-eyebrow {
    margin-bottom: .4rem;
}

.auth-page .login-card .login-institution {
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 480px) {
    .auth-page .login-brand-logo {
        width: min(100%, 140px);
        border-radius: 16px;
    }
}

.table-pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    margin: .75rem 0 1rem;
    color: var(--text-muted);
    font-size: .85rem;
}

.table-pagination-size {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.table-pagination-select {
    min-height: 2.25rem;
    padding: .3rem .55rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-main);
    font: inherit;
}

.table-pagination-navigation {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.table-pagination-button {
    min-height: 2.25rem;
    padding: .35rem .7rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-main);
    font: inherit;
    cursor: pointer;
}

.table-pagination-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.table-pagination-button:not(:disabled):hover,
.table-pagination-select:focus-visible,
.table-pagination-button:focus-visible {
    border-color: var(--primary);
    outline: 2px solid var(--primary-light);
    outline-offset: 1px;
}

@media (max-width: 600px) {
    .table-pagination-controls {
        justify-content: flex-start;
    }

    .table-pagination-info {
        order: 1;
        flex-basis: 100%;
    }
}

@media print {
    .table-pagination-controls {
        display: none !important;
    }
}

.auth-page .alert-warning {
    color: #7a2e0e;
    background: #fffaeb;
    border: 1px solid #fedf89;
}

html:not([data-theme="light"]) .auth-page .alert-warning {
    color: #fedf89;
    background: #422c0b;
    border-color: #854a0e;
}

.auth-access-modal {
    position: fixed;
    z-index: 11000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(16, 24, 40, .62);
    backdrop-filter: blur(6px);
}

.auth-access-modal[hidden] {
    display: none;
}

.auth-access-modal__content {
    width: min(100%, 420px);
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 24px 70px rgba(16, 24, 40, .28);
    text-align: center;
    animation: authAccessModalEnter .2s ease-out;
}

.auth-access-modal__icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    place-items: center;
    border: 1px solid #fedf89;
    border-radius: 50%;
    background: #fffaeb;
    color: #b54708;
    font-size: 1.8rem;
    font-weight: 700;
}

.auth-access-modal__content h2 {
    margin: 0 0 .55rem;
    color: var(--text-main);
    font-size: 1.25rem;
}

.auth-access-modal__content p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.auth-access-modal__button {
    min-width: 120px;
    min-height: 42px;
    margin-top: 1.4rem;
    padding: .6rem 1.1rem;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.auth-access-modal__button:hover,
.auth-access-modal__button:focus-visible {
    background: var(--primary-dark);
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

@keyframes authAccessModalEnter {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-access-modal__content {
        animation: none;
    }
}

html[data-theme="light"] body.app-role-admin table thead th,
html[data-theme="light"] body.app-role-admin table.admin-dashboard-table thead th,
html[data-theme="light"] body.app-role-user table thead th,
html[data-theme="light"] body.app-role-user table.table thead th {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}

html[data-theme="light"] body.app-role-admin table tbody td,
html[data-theme="light"] body.app-role-admin table tbody th,
html[data-theme="light"] body.app-role-user table tbody td,
html[data-theme="light"] body.app-role-user table tbody th {
    border-color: #cbd5e1;
    color: #1e293b;
}

html[data-theme="light"] body.app-role-admin table tbody tr:nth-child(even),
html[data-theme="light"] body.app-role-user table tbody tr:nth-child(even) {
    background: #f8fafc;
}

html[data-theme="light"] body.app-role-admin table tbody tr:hover,
html[data-theme="light"] body.app-role-user table tbody tr:hover {
    background: #eef2ff;
}

html[data-theme="light"] body.app-role-admin table tfoot th,
html[data-theme="light"] body.app-role-admin table tfoot td,
html[data-theme="light"] body.app-role-admin table.admin-dashboard-table tfoot th,
html[data-theme="light"] body.app-role-admin table.admin-dashboard-table tfoot td,
html[data-theme="light"] body.app-role-user table tfoot th,
html[data-theme="light"] body.app-role-user table tfoot td,
html[data-theme="light"] body.app-role-user table.table tfoot th,
html[data-theme="light"] body.app-role-user table.table tfoot td {
    border-color: #c7d2fe;
    color: #312e81;
    background: #eef2ff;
}

html[data-theme="light"],
html[data-theme="light"] body.app-role-admin,
html[data-theme="light"] body.app-role-admin *,
html[data-theme="light"] body.app-role-user,
html[data-theme="light"] body.app-role-user * {
    scrollbar-color: #8092ff #eef2ff;
    scrollbar-width: thin;
}

html[data-theme="light"]::-webkit-scrollbar,
html[data-theme="light"] body.app-role-admin::-webkit-scrollbar,
html[data-theme="light"] body.app-role-admin *::-webkit-scrollbar,
html[data-theme="light"] body.app-role-user::-webkit-scrollbar,
html[data-theme="light"] body.app-role-user *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html[data-theme="light"]::-webkit-scrollbar-track,
html[data-theme="light"] body.app-role-admin::-webkit-scrollbar-track,
html[data-theme="light"] body.app-role-admin *::-webkit-scrollbar-track,
html[data-theme="light"] body.app-role-user::-webkit-scrollbar-track,
html[data-theme="light"] body.app-role-user *::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #eef2ff;
}

html[data-theme="light"]::-webkit-scrollbar-thumb,
html[data-theme="light"] body.app-role-admin::-webkit-scrollbar-thumb,
html[data-theme="light"] body.app-role-admin *::-webkit-scrollbar-thumb,
html[data-theme="light"] body.app-role-user::-webkit-scrollbar-thumb,
html[data-theme="light"] body.app-role-user *::-webkit-scrollbar-thumb {
    border: 2px solid #eef2ff;
    border-radius: 999px;
    background: #8092ff;
}

html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] body.app-role-admin::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] body.app-role-admin *::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] body.app-role-user::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] body.app-role-user *::-webkit-scrollbar-thumb:hover {
    background: #465fff;
}

html:not([data-theme="light"]) body.app-role-admin table thead th,
html:not([data-theme="light"]) body.app-role-admin table.admin-dashboard-table thead th,
html:not([data-theme="light"]) body.app-role-user table thead th,
html:not([data-theme="light"]) body.app-role-user table.table thead th {
    border-color: #3a4659;
    color: #c7d2fe;
    background: #293548;
}

html:not([data-theme="light"]) body.app-role-admin table tbody td,
html:not([data-theme="light"]) body.app-role-admin table tbody th,
html:not([data-theme="light"]) body.app-role-user table tbody td,
html:not([data-theme="light"]) body.app-role-user table tbody th {
    border-color: #3a4659;
    color: #e8edf5;
}

html:not([data-theme="light"]) body.app-role-admin table tbody tr:nth-child(even),
html:not([data-theme="light"]) body.app-role-user table tbody tr:nth-child(even) {
    background: #242f41;
}

html:not([data-theme="light"]) body.app-role-admin table tbody tr:hover,
html:not([data-theme="light"]) body.app-role-user table tbody tr:hover {
    background: #2a3650;
}

html:not([data-theme="light"]) body.app-role-admin table tfoot th,
html:not([data-theme="light"]) body.app-role-admin table tfoot td,
html:not([data-theme="light"]) body.app-role-admin table.admin-dashboard-table tfoot th,
html:not([data-theme="light"]) body.app-role-admin table.admin-dashboard-table tfoot td,
html:not([data-theme="light"]) body.app-role-user table tfoot th,
html:not([data-theme="light"]) body.app-role-user table tfoot td,
html:not([data-theme="light"]) body.app-role-user table.table tfoot th,
html:not([data-theme="light"]) body.app-role-user table.table tfoot td {
    border-color: #3a4659;
    color: #c7d2fe;
    background: #293548;
}

html:not([data-theme="light"]),
html:not([data-theme="light"]) body.app-role-admin,
html:not([data-theme="light"]) body.app-role-admin *,
html:not([data-theme="light"]) body.app-role-user,
html:not([data-theme="light"]) body.app-role-user * {
    scrollbar-color: #8092ff #293548;
    scrollbar-width: thin;
}

html:not([data-theme="light"])::-webkit-scrollbar,
html:not([data-theme="light"]) body.app-role-admin::-webkit-scrollbar,
html:not([data-theme="light"]) body.app-role-admin *::-webkit-scrollbar,
html:not([data-theme="light"]) body.app-role-user::-webkit-scrollbar,
html:not([data-theme="light"]) body.app-role-user *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html:not([data-theme="light"])::-webkit-scrollbar-track,
html:not([data-theme="light"]) body.app-role-admin::-webkit-scrollbar-track,
html:not([data-theme="light"]) body.app-role-admin *::-webkit-scrollbar-track,
html:not([data-theme="light"]) body.app-role-user::-webkit-scrollbar-track,
html:not([data-theme="light"]) body.app-role-user *::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #293548;
}

html:not([data-theme="light"])::-webkit-scrollbar-thumb,
html:not([data-theme="light"]) body.app-role-admin::-webkit-scrollbar-thumb,
html:not([data-theme="light"]) body.app-role-admin *::-webkit-scrollbar-thumb,
html:not([data-theme="light"]) body.app-role-user::-webkit-scrollbar-thumb,
html:not([data-theme="light"]) body.app-role-user *::-webkit-scrollbar-thumb {
    border: 2px solid #293548;
    border-radius: 999px;
    background: #8092ff;
}

html:not([data-theme="light"])::-webkit-scrollbar-thumb:hover,
html:not([data-theme="light"]) body.app-role-admin::-webkit-scrollbar-thumb:hover,
html:not([data-theme="light"]) body.app-role-admin *::-webkit-scrollbar-thumb:hover,
html:not([data-theme="light"]) body.app-role-user::-webkit-scrollbar-thumb:hover,
html:not([data-theme="light"]) body.app-role-user *::-webkit-scrollbar-thumb:hover {
    background: #a5b4fc;
}

.app-role-admin .voucher-overview,
.app-role-admin .report-overview,
.app-role-admin .user-overview,
.app-role-admin .admin-dashboard-stat-grid,
.app-role-user .user-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.app-role-admin .voucher-overview-card,
.app-role-admin .report-overview-card,
.app-role-admin .user-overview-card,
.app-role-admin .admin-dashboard-stat,
.app-role-user .user-stat-card {
    position: relative;
    min-width: 0;
    min-height: 110px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: 0 4px 20px rgba(4, 26, 55, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.app-role-admin .voucher-overview-card,
.app-role-admin .report-overview-card,
.app-role-admin .user-overview-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
}

.app-role-admin .admin-dashboard-stat,
.app-role-user .user-stat-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 4px 16px;
    padding: 18px 20px;
}

.app-role-admin .voucher-overview-card::before,
.app-role-admin .report-overview-card::before,
.app-role-admin .user-overview-card::before,
.app-role-admin .admin-dashboard-stat::before,
.app-role-user .user-stat-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
}

.app-role-admin .voucher-overview-card:hover,
.app-role-admin .report-overview-card:hover,
.app-role-admin .user-overview-card:hover,
.app-role-admin .admin-dashboard-stat:hover,
.app-role-user .user-stat-card:hover {
    border-color: rgba(99, 102, 241, .2);
    box-shadow: 0 12px 32px rgba(4, 26, 55, .12);
    transform: translateY(-3px);
}

.app-role-admin .report-overview-card:nth-child(1)::before {
    background: #3b82f6;
}

.app-role-admin .report-overview-card:nth-child(2)::before {
    background: #06b6d4;
}

.app-role-admin .report-overview-card:nth-child(3)::before {
    background: #10b981;
}

.app-role-admin .report-overview-card:nth-child(4)::before {
    background: #f59e0b;
}

.app-role-admin .user-overview-card:nth-child(1)::before {
    background: #3b82f6;
}

.app-role-admin .user-overview-card:nth-child(2)::before {
    background: #10b981;
}

.app-role-admin .user-overview-card:nth-child(3)::before {
    background: #f59e0b;
}

.app-role-admin .user-overview-card:nth-child(4)::before {
    background: #8b5cf6;
}

.app-role-admin .admin-dashboard-stat--indigo::before,
.app-role-user .user-stat-card--blue::before {
    background: #6366f1;
}

.app-role-admin .admin-dashboard-stat--cyan::before,
.app-role-user .user-stat-card--cyan::before {
    background: #06b6d4;
}

.app-role-admin .admin-dashboard-stat--emerald::before,
.app-role-user .user-stat-card--green::before {
    background: #10b981;
}

.app-role-admin .admin-dashboard-stat--violet::before,
.app-role-user .user-stat-card--amber::before {
    background: #f59e0b;
}

.app-role-admin .voucher-overview-badge,
.app-role-admin .report-overview-icon,
.app-role-admin .user-overview-icon,
.app-role-admin .admin-dashboard-stat-icon,
.app-role-user .user-stat-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.app-role-admin .voucher-overview-badge svg,
.app-role-admin .report-overview-icon svg,
.app-role-admin .user-overview-icon svg,
.app-role-admin .admin-dashboard-stat-icon .action-icon,
.app-role-user .user-stat-icon .action-icon {
    width: 22px;
    height: 22px;
}

.app-role-admin .report-overview-icon--blue,
.app-role-admin .admin-dashboard-stat--indigo .admin-dashboard-stat-icon,
.app-role-user .user-stat-card--blue .user-stat-icon {
    color: #2563eb;
    background-color: #dbeafe;
}

.app-role-admin .report-overview-icon--cyan,
.app-role-user .user-stat-card--cyan .user-stat-icon {
    color: #0e7490;
    background-color: #cffafe;
}

.app-role-admin .report-overview-icon--green,
.app-role-admin .admin-dashboard-stat--emerald .admin-dashboard-stat-icon,
.app-role-user .user-stat-card--green .user-stat-icon {
    color: #059669;
    background-color: #d1fae5;
}

.app-role-admin .report-overview-icon--amber,
.app-role-user .user-stat-card--amber .user-stat-icon {
    color: #b45309;
    background-color: #fef3c7;
}

.app-role-admin .user-overview-icon--blue {
    color: #2563eb;
    background: #dbeafe;
}

.app-role-admin .user-overview-icon--green {
    color: #059669;
    background: #d1fae5;
}

.app-role-admin .user-overview-icon--amber {
    color: #b45309;
    background: #fef3c7;
}

.app-role-admin .user-overview-icon--violet,
.app-role-admin .admin-dashboard-stat--violet .admin-dashboard-stat-icon {
    color: #7c3aed;
    background: #ede9fe;
}

.app-role-admin .report-overview-copy,
.app-role-admin .user-overview-copy,
.app-role-admin .voucher-overview-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.app-role-admin .voucher-overview-label,
.app-role-admin .report-overview-copy small,
.app-role-admin .user-overview-copy small,
.app-role-admin .admin-dashboard-stat-label,
.app-role-user .user-stat-label {
    min-width: 0;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.35;
    text-transform: uppercase;
}

.app-role-admin .user-overview-copy small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    font-size: .68rem;
    letter-spacing: .03em;
}

.app-role-admin .voucher-overview-value,
.app-role-admin .report-overview-copy strong,
.app-role-admin .user-overview-copy strong,
.app-role-admin .admin-dashboard-stat > strong,
.app-role-user .user-stat-card > strong {
    min-width: 0;
    color: var(--text-main);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.app-role-admin .report-overview-copy strong {
    font-size: 1.75rem;
}

.app-role-admin .report-overview-card:nth-child(3) .report-overview-copy strong {
    font-size: 1rem;
    letter-spacing: -.03em;
    white-space: nowrap;
}

.app-role-admin .report-overview-copy strong span {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 500;
}

.app-role-admin .voucher-overview-sub,
.app-role-admin .admin-dashboard-stat > small,
.app-role-user .user-stat-card > small {
    min-width: 0;
    margin: 0;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.app-role-admin .admin-dashboard-stat-icon,
.app-role-user .user-stat-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.app-role-admin .admin-dashboard-stat-label,
.app-role-admin .admin-dashboard-stat > strong,
.app-role-admin .admin-dashboard-stat > small,
.app-role-user .user-stat-label,
.app-role-user .user-stat-card > strong,
.app-role-user .user-stat-card > small {
    grid-column: 2;
    margin: 0;
    width: auto;
}

.app-role-admin .admin-dashboard-stat-label,
.app-role-user .user-stat-label {
    grid-row: 1;
    align-self: end;
}

.app-role-admin .admin-dashboard-stat > strong,
.app-role-user .user-stat-card > strong {
    grid-row: 2;
    font-size: 1.75rem;
}

.app-role-admin .admin-dashboard-stat > small,
.app-role-user .user-stat-card > small {
    grid-row: 3;
    align-self: start;
    white-space: normal;
}

html:not([data-theme="light"]) .app-role-admin .report-overview-card,
html:not([data-theme="light"]) .app-role-admin .user-overview-card,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-stat,
html:not([data-theme="light"]) .app-role-user .user-stat-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

html:not([data-theme="light"]) .app-role-admin .report-overview-card:hover,
html:not([data-theme="light"]) .app-role-admin .user-overview-card:hover,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-stat:hover,
html:not([data-theme="light"]) .app-role-user .user-stat-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    border-color: rgba(99, 102, 241, .25);
}

html:not([data-theme="light"]) .app-role-admin .report-overview-icon--blue,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-stat--indigo .admin-dashboard-stat-icon,
html:not([data-theme="light"]) .app-role-user .user-stat-card--blue .user-stat-icon {
    color: #60a5fa;
    background: rgba(59, 130, 246, .15);
}

html:not([data-theme="light"]) .app-role-admin .report-overview-icon--cyan,
html:not([data-theme="light"]) .app-role-user .user-stat-card--cyan .user-stat-icon {
    color: #67e8f9;
    background: rgba(34, 211, 238, .12);
}

html:not([data-theme="light"]) .app-role-admin .report-overview-icon--green,
html:not([data-theme="light"]) .app-role-admin .user-overview-icon--green,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-stat--emerald .admin-dashboard-stat-icon,
html:not([data-theme="light"]) .app-role-user .user-stat-card--green .user-stat-icon {
    color: #34d399;
    background: rgba(16, 185, 129, .15);
}

html:not([data-theme="light"]) .app-role-admin .report-overview-icon--amber,
html:not([data-theme="light"]) .app-role-admin .user-overview-icon--amber,
html:not([data-theme="light"]) .app-role-user .user-stat-card--amber .user-stat-icon {
    color: #fbbf24;
    background: rgba(245, 158, 11, .15);
}

html:not([data-theme="light"]) .app-role-admin .user-overview-icon--blue,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-stat--indigo .admin-dashboard-stat-icon,
html:not([data-theme="light"]) .app-role-user .user-stat-card--blue .user-stat-icon {
    color: #93c5fd;
    background: #1c3d66;
}

html:not([data-theme="light"]) .app-role-admin .user-overview-icon--violet,
html:not([data-theme="light"]) .app-role-admin .admin-dashboard-stat--violet .admin-dashboard-stat-icon {
    color: #c4b5fd;
    background: #352c62;
}

@media (max-width: 1100px) {
    .app-role-admin .voucher-overview,
    .app-role-admin .report-overview,
    .app-role-admin .user-overview,
    .app-role-admin .admin-dashboard-stat-grid,
    .app-role-user .user-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .app-role-admin .voucher-overview,
    .app-role-admin .report-overview,
    .app-role-admin .user-overview,
    .app-role-admin .admin-dashboard-stat-grid,
    .app-role-user .user-stat-grid {
        gap: 10px;
    }

    .app-role-admin .voucher-overview-card,
    .app-role-admin .report-overview-card,
    .app-role-admin .user-overview-card,
    .app-role-admin .admin-dashboard-stat,
    .app-role-user .user-stat-card {
        min-height: 100px;
        gap: 14px;
        padding: 16px 18px;
    }

    .app-role-admin .voucher-overview-badge,
    .app-role-admin .report-overview-icon,
    .app-role-admin .admin-dashboard-stat-icon,
    .app-role-user .user-stat-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .app-role-admin .user-overview-card {
        gap: 10px;
        padding: 14px;
    }

    .app-role-admin .user-overview-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}

@media (max-width: 380px) {
    .app-role-admin .voucher-overview-card,
    .app-role-admin .report-overview-card,
    .app-role-admin .user-overview-card {
        align-items: flex-start;
        flex-direction: column;
        min-height: auto;
        padding: 16px;
        text-align: left;
    }

    .app-role-admin .admin-dashboard-stat,
    .app-role-user .user-stat-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        align-items: start;
        gap: 4px;
        min-height: auto;
        padding: 16px;
        text-align: left;
    }

    .app-role-admin .admin-dashboard-stat-icon,
    .app-role-user .user-stat-icon {
        grid-column: 1;
        grid-row: 1;
    }

    .app-role-admin .admin-dashboard-stat-label,
    .app-role-user .user-stat-label {
        grid-column: 1;
        grid-row: 2;
    }

    .app-role-admin .admin-dashboard-stat > strong,
    .app-role-user .user-stat-card > strong {
        grid-column: 1;
        grid-row: 3;
    }

    .app-role-admin .admin-dashboard-stat > small,
    .app-role-user .user-stat-card > small {
        grid-column: 1;
        grid-row: 4;
    }
}

.app-role-admin .admin-dashboard-queue {
    position: relative;
    min-height: 110px;
    overflow: hidden;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: 0 4px 20px rgba(4, 26, 55, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.app-role-admin .admin-dashboard-queue::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
}

.app-role-admin .admin-dashboard-queue--amber::before {
    background: #f59e0b;
}

.app-role-admin .admin-dashboard-queue--blue::before {
    background: #3b82f6;
}

.app-role-admin .admin-dashboard-queue--green::before {
    background: #10b981;
}

.app-role-admin .admin-dashboard-queue:hover,
.app-role-admin .admin-dashboard-queue:focus-visible {
    border-color: rgba(99, 102, 241, .3);
    box-shadow: 0 12px 32px rgba(4, 26, 55, .12);
    transform: translateY(-3px);
}

.app-role-admin .admin-dashboard-queue-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.app-role-admin .admin-dashboard-queue--amber .admin-dashboard-queue-icon {
    color: #b45309;
    background: #fef3c7;
}

.app-role-admin .admin-dashboard-queue--blue .admin-dashboard-queue-icon {
    color: #2563eb;
    background: #dbeafe;
}

.app-role-admin .admin-dashboard-queue--green .admin-dashboard-queue-icon {
    color: #059669;
    background: #d1fae5;
}

.app-role-admin .admin-dashboard-queue-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    gap: 4px;
}

.app-role-admin .admin-dashboard-queue-copy > span {
    order: 1;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.35;
    text-transform: uppercase;
}

.app-role-admin .admin-dashboard-queue-copy strong {
    order: 2;
    color: var(--text-main);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.app-role-admin .admin-dashboard-queue-arrow {
    position: relative;
    z-index: 1;
    color: var(--text-muted);
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-queue {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-queue--amber .admin-dashboard-queue-icon {
    color: #fbbf24;
    background: #4b3b12;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-queue--blue .admin-dashboard-queue-icon {
    color: #93c5fd;
    background: #1c3d66;
}

html:not([data-theme="light"]) .app-role-admin .admin-dashboard-queue--green .admin-dashboard-queue-icon {
    color: #34d399;
    background: #164233;
}

@media (max-width: 640px) {
    .app-role-admin .admin-dashboard-queue {
        min-height: 100px;
        padding: 16px 18px;
    }

    .app-role-admin .admin-dashboard-queue-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}