:root {
    --portal-bg: #eef3fb;
    --portal-surface: #ffffff;
    --portal-surface-alt: #f8fbff;
    --portal-sidebar-bg: linear-gradient(180deg, #14233d 0%, #1b3158 100%);
    --portal-sidebar-border: rgba(255, 255, 255, 0.08);
    --portal-primary: #2f6df6;
    --portal-primary-dark: #2358ce;
    --portal-primary-soft: #e8f0ff;
    --portal-text: #17233a;
    --portal-text-soft: #6d7d96;
    --portal-border: #e2eaf5;
    --portal-shadow: 0 20px 45px rgba(20, 35, 61, 0.08);
    --portal-shadow-soft: 0 10px 24px rgba(20, 35, 61, 0.06);
    --portal-radius-lg: 24px;
    --portal-radius-md: 16px;
    --portal-radius-sm: 10px;
    --portal-space-1: 8px;
    --portal-space-2: 16px;
    --portal-space-3: 24px;
    --portal-space-4: 32px;
    --portal-shell-gap: 24px;
    --portal-shell-padding: 18px;
    --portal-sidebar-width: 292px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.admin-body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(47, 109, 246, 0.12) 0%, rgba(47, 109, 246, 0) 22%),
        linear-gradient(180deg, #f8fbff 0%, var(--portal-bg) 100%);
    color: var(--portal-text);
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

a {
    text-decoration: none;
}

.portal-shell {
    height: 100vh;
    display: flex;
    gap: var(--portal-shell-gap);
    padding: var(--portal-shell-padding);
    overflow: hidden;
}

.portal-sidebar {
    width: var(--portal-sidebar-width);
    flex: 0 0 var(--portal-sidebar-width);
    position: fixed;
    top: var(--portal-shell-padding);
    left: var(--portal-shell-padding);
    bottom: var(--portal-shell-padding);
    z-index: 1040;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
        var(--portal-sidebar-bg);
    color: #eef4ff;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 18px 0 40px rgba(13, 23, 41, 0.14);
    border-radius: 30px;
    overflow: auto;
}

.portal-sidebar::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 26px;
    border: 1px solid var(--portal-sidebar-border);
    pointer-events: none;
}

.portal-sidebar-brand,
.portal-sidebar-nav,
.portal-sidebar-label {
    position: relative;
    z-index: 1;
}

.portal-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
}

.portal-brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3e84ff 0%, #2f6df6 100%);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 28px rgba(47, 109, 246, 0.32);
}

.portal-brand-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f6f9ff;
}

.portal-brand-subtitle {
    font-size: 0.82rem;
    color: rgba(238, 244, 255, 0.72);
}

.portal-sidebar-label {
    padding: 0 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(238, 244, 255, 0.54);
}

.portal-sidebar-nav {
    display: grid;
    gap: 8px;
}

.portal-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 14px;
    color: rgba(241, 246, 255, 0.8);
    border-radius: 16px;
    transition: 0.2s ease;
}

.portal-nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.portal-nav-link.is-active {
    background: linear-gradient(135deg, #3e84ff 0%, #2f6df6 100%);
    color: #fff;
    box-shadow: 0 18px 28px rgba(47, 109, 246, 0.28);
}

.portal-nav-group {
    display: grid;
    gap: 8px;
}

.portal-nav-group-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.portal-nav-group-toggle.is-active {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.portal-nav-group-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    color: inherit;
    transition: transform 0.2s ease;
}

.portal-nav-group.is-open .portal-nav-group-chevron {
    transform: rotate(180deg);
}

.portal-nav-submenu {
    display: grid;
    gap: 6px;
    padding: 4px 0 4px 18px;
    margin-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.portal-nav-group:not(.is-open) .portal-nav-submenu {
    display: none;
}

.portal-nav-sublink {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    color: rgba(241, 246, 255, 0.76);
    transition: 0.2s ease;
}

.portal-nav-sublink:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.portal-nav-sublink.is-active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.portal-nav-sublink-icon {
    width: 18px;
    text-align: center;
    font-size: 0.92rem;
}

.portal-nav-sublink-text {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.portal-nav-icon {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.portal-nav-text {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
}

.portal-nav-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.portal-main {
    min-width: 0;
    flex: 1;
    margin-left: calc(var(--portal-sidebar-width) + var(--portal-shell-gap));
    height: calc(100vh - (var(--portal-shell-padding) * 2));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.portal-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    flex: 0 0 auto;
    min-height: 78px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(227, 235, 247, 0.95);
    box-shadow: 0 16px 40px rgba(20, 35, 61, 0.06);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    margin-bottom: 22px;
}

.portal-topbar-left,
.portal-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portal-sidebar-toggle,
.portal-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--portal-border);
    background: #fff;
    color: #52627d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--portal-shadow-soft);
}

.portal-icon-btn[disabled] {
    opacity: 1;
}

.portal-user-chip {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 18px;
    background: rgba(245, 248, 255, 0.92);
    border: 1px solid var(--portal-border);
}

.portal-user-avatar-frame {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    overflow: hidden;
    flex: 0 0 42px;
    background: linear-gradient(135deg, #dbe8ff 0%, #edf4ff 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.portal-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    object-fit: cover;
    object-position: center;
    flex: 0 0 42px;
    display: block;
}

.portal-user-avatar-fallback {
    color: var(--portal-primary-dark);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.portal-user-meta {
    min-width: 0;
}

.portal-user-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--portal-text);
}

.portal-user-org {
    font-size: 0.78rem;
    color: var(--portal-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.portal-role-pill {
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    background: var(--portal-primary-soft);
    color: var(--portal-primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.portal-logout-btn {
    border-radius: 12px;
}

.portal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 2px 28px;
    scrollbar-gutter: stable;
}

.portal-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.portal-page-eyebrow {
    margin-bottom: 8px;
    color: var(--portal-primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-eyebrow {
    margin-bottom: 8px;
    color: var(--portal-primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-page-title {
    margin: 0;
    font-size: clamp(1.85rem, 2.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.04;
    color: #12213a;
}

.portal-page-header h1 {
    margin: 0;
    font-size: clamp(1.85rem, 2.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.04;
    color: #12213a;
}

.portal-page-subtitle {
    margin: 10px 0 0;
    color: var(--portal-text-soft);
    font-size: 1rem;
}

.portal-page-header > div > p {
    margin: 10px 0 0;
    color: var(--portal-text-soft);
    font-size: 1rem;
}

.portal-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 234, 245, 0.92);
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(20, 35, 61, 0.06);
}

.portal-card + .portal-card {
    margin-top: 24px;
}

.portal-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--portal-border);
}

.portal-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--portal-text);
}

.portal-card-subtitle {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: var(--portal-text-soft);
}

.portal-card-body {
    padding: 24px;
}

.portal-card-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--portal-text);
}

.portal-card-header p {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: var(--portal-text-soft);
}

.portal-surface-panel {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    box-shadow: var(--portal-shadow-soft);
}

.portal-filter-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.portal-filter-item {
    min-width: 0;
}

.portal-filter-span-2 { grid-column: span 2; }
.portal-filter-span-3 { grid-column: span 3; }
.portal-filter-span-4 { grid-column: span 4; }
.portal-filter-span-6 { grid-column: span 6; }
.portal-filter-span-12 { grid-column: span 12; }

.portal-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    grid-column: 1 / -1;
}

.portal-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.portal-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 18px;
    border: 1px solid var(--portal-border);
    background: #edf3ff;
    color: #4f6180;
    font-size: 0.92rem;
    font-weight: 700;
}

.portal-tab-link.is-active {
    background: linear-gradient(135deg, #3e84ff 0%, #2f6df6 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 16px 24px rgba(47, 109, 246, 0.22);
}

.portal-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(32, 103, 214, 0.12);
    color: var(--portal-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

.portal-tab-link.is-active .portal-tab-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.portal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.portal-kpi-card {
    padding: 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid var(--portal-border);
    box-shadow: 0 14px 30px rgba(20, 35, 61, 0.04);
}

.portal-kpi-label {
    color: var(--portal-text-soft);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.portal-kpi-value {
    margin-top: 10px;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.05;
    color: #12213a;
}

.portal-kpi-meta {
    display: block;
    margin-top: 10px;
    color: var(--portal-text-soft);
    font-size: 0.9rem;
}

.portal-table-wrap {
    padding: 8px 20px 20px;
}

.portal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    color: var(--portal-text);
    table-layout: fixed;
}

.portal-table thead th {
    padding: 0 14px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7b8aa3;
    border: 0;
    white-space: nowrap;
}

.portal-table tbody td {
    padding: 20px 16px;
    background: #fbfdff;
    border-top: 1px solid var(--portal-border);
    border-bottom: 1px solid var(--portal-border);
    vertical-align: middle;
    white-space: nowrap;
}

.portal-table tbody tr td:first-child {
    border-left: 1px solid var(--portal-border);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.portal-table tbody tr td:last-child {
    border-right: 1px solid var(--portal-border);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.portal-table tbody tr:hover td,
.expense-row:hover td {
    background: #ffffff;
}

.portal-table-empty {
    padding: 32px;
    text-align: center;
    color: var(--portal-text-soft);
}

.portal-cell-title {
    font-weight: 700;
    color: #14233d;
}

.portal-cell-meta {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--portal-text-soft);
}

.portal-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.portal-status-badge,
.badge.expense-status-badge,
.profile-role-badge,
.portal-role-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.34rem 0.82rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.text-bg-success,
.badge.text-bg-success {
    background: #e4f8ec !important;
    color: #1f8f52 !important;
    border-color: #cdeed8 !important;
}

.text-bg-danger,
.badge.text-bg-danger {
    background: #ffe7ea !important;
    color: #ce425b !important;
    border-color: #ffd0d7 !important;
}

.text-bg-info,
.badge.text-bg-info {
    background: #e8f0ff !important;
    color: #2f6df6 !important;
    border-color: #d6e4ff !important;
}

.text-bg-warning,
.badge.text-bg-warning {
    background: #fff4dd !important;
    color: #d98912 !important;
    border-color: #ffe8bc !important;
}

.text-bg-secondary,
.badge.text-bg-secondary,
.badge.text-bg-dark {
    background: #edf1f7 !important;
    color: #5c6f8f !important;
    border-color: #dde5f1 !important;
}

.portal-kpi-tone-info {
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.08), rgba(47, 109, 246, 0.02));
    border-color: rgba(47, 109, 246, 0.14);
}

.portal-kpi-tone-success {
    background: linear-gradient(180deg, rgba(25, 169, 116, 0.08), rgba(25, 169, 116, 0.02));
    border-color: rgba(25, 169, 116, 0.16);
}

.portal-kpi-tone-warning {
    background: linear-gradient(180deg, rgba(255, 176, 32, 0.12), rgba(255, 176, 32, 0.03));
    border-color: rgba(255, 176, 32, 0.2);
}

.portal-kpi-tone-danger {
    background: linear-gradient(180deg, rgba(240, 93, 94, 0.09), rgba(240, 93, 94, 0.02));
    border-color: rgba(240, 93, 94, 0.16);
}

.portal-kpi-tone-neutral {
    background: linear-gradient(180deg, rgba(109, 125, 150, 0.08), rgba(109, 125, 150, 0.02));
    border-color: rgba(109, 125, 150, 0.16);
}

.portal-feedback-stack {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.portal-alert-card {
    margin-bottom: 0;
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    box-shadow: 0 10px 20px rgba(20, 35, 61, 0.04);
}

.portal-empty-state {
    display: grid;
    gap: 8px;
    justify-items: center;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.portal-empty-state strong {
    color: #15243d;
    font-size: 1rem;
    font-weight: 800;
}

.portal-empty-state span {
    color: var(--portal-text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}

.btn {
    border-radius: 12px;
    font-weight: 700;
    box-shadow: none !important;
}

.btn-primary {
    background: linear-gradient(135deg, #3e84ff 0%, #2f6df6 100%);
    border-color: #2f6df6;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #2f76fb 0%, #2358ce 100%);
    border-color: #2358ce;
}

.btn-outline-primary {
    border-color: #c9dafd;
    color: var(--portal-primary-dark);
    background: #fff;
}

.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning {
    background: #fff;
}

.form-control,
.form-select {
    min-height: 48px;
    border-radius: 14px;
    border-color: #dbe5f2;
    background: #fff;
    color: var(--portal-text);
}

.form-control:focus,
.form-select:focus {
    border-color: #a8c3ff;
    box-shadow: 0 0 0 0.22rem rgba(47, 109, 246, 0.12);
}

.form-label {
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #53647f;
}

.form-text {
    color: var(--portal-text-soft);
}

.expense-filter-select {
    appearance: none;
    padding-right: 46px;
    background-image:
        linear-gradient(45deg, transparent 50%, #73839b 50%),
        linear-gradient(135deg, #73839b 50%, transparent 50%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px),
        0 0;
    background-size:
        6px 6px,
        6px 6px,
        100% 100%;
    background-repeat: no-repeat;
}

.expense-date-input {
    letter-spacing: 0.02em;
}

.expense-date-field {
    position: relative;
}

.expense-date-field .expense-date-input {
    padding-right: 52px;
}

.portal-inline-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.portal-inline-filter-field {
    min-width: 220px;
}

.portal-inline-select,
.portal-inline-input {
    min-width: 220px;
}

.expense-date-picker-trigger {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 12px;
}

.expense-date-native-input {
    position: absolute;
    inset: auto;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.table-responsive {
    overflow-x: auto;
}

.expenses-table thead th.expenses-col-actions,
.expenses-table td.text-end,
.portal-text-end {
    text-align: right;
}

.expenses-table thead th.expenses-col-amount,
.expenses-table tbody td.expenses-col-amount {
    text-align: right;
}

.expense-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 4px;
}

.expense-kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 156px;
    padding: 18px 18px 16px;
    border-radius: 20px;
}

.expense-kpi-card .portal-kpi-label {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
}

.expense-kpi-card .portal-kpi-value {
    margin-top: 8px;
    font-size: 1.72rem;
    line-height: 1.02;
}

.expense-kpi-card .portal-kpi-meta {
    margin-top: 10px;
    font-size: 0.84rem;
    line-height: 1.45;
}

.expenses-page-header {
    margin-bottom: 18px;
}

.expenses-header-actions .btn {
    min-width: 148px;
}

.expense-filter-card,
.expenses-table-card {
    border-radius: 24px;
}

.expense-filter-card .portal-card-header,
.expenses-table-card .portal-card-header {
    align-items: center;
    gap: 18px;
}

.expense-filter-form {
    row-gap: 18px;
}

.expense-filter-section {
    padding-top: 4px;
}

.expense-filter-section-heading {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(226, 234, 245, 0.96);
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}

.expense-filter-section-heading h3 {
    margin: 0;
    color: #16233b;
    font-size: 0.94rem;
    font-weight: 700;
}

.expense-filter-section-heading p {
    margin: 0;
    color: var(--portal-text-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}

.expense-filter-form .form-control,
.expense-filter-form .form-select,
.expense-filter-form .autocomplete-filter-input {
    min-height: 50px;
}

.expense-filter-form .form-text {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.4;
}

.expense-filter-actions {
    align-items: flex-end;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
}

.expense-filter-actions .btn {
    min-height: 48px;
    min-width: 148px;
}

.expense-row {
    cursor: pointer;
}

.expense-row td:last-child,
.expense-row td:first-child .expense-select-checkbox {
    cursor: default;
}

.expenses-table {
    border-spacing: 0 10px;
}

.expenses-table tbody td {
    overflow: hidden;
    padding-top: 16px;
    padding-bottom: 16px;
    white-space: nowrap;
}

.expenses-table thead th {
    padding-bottom: 8px;
    text-align: center;
    vertical-align: middle;
}

.expenses-table .portal-cell-title {
    font-size: 0.9rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expenses-table .portal-cell-meta {
    margin-top: 4px;
    font-size: 0.76rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.expense-actions-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.expense-actions-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.expense-workflow-meta {
    margin-top: 0 !important;
    text-align: right;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100%;
}

.expense-actions .btn {
    min-height: 36px;
    padding: 0.42rem 0.78rem;
    font-size: 0.74rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    max-width: 100%;
}

.expenses-col-actions {
    width: 22%;
    min-width: 0;
}

.expenses-table tbody td.expenses-col-actions {
    white-space: normal;
    overflow: visible;
    vertical-align: top;
}

.expense-cell-title-truncate,
.expense-cell-meta-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-trip-range-indicator {
    margin-top: 6px;
}

.expense-trip-range-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    background: #eef5ff;
    color: #345a93;
    border: 1px solid #d8e6fb;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 991.98px) {
    .expense-actions-panel {
        min-width: 0;
        align-items: stretch;
    }

    .expense-actions-status {
        align-items: flex-start;
    }

    .expense-workflow-meta {
        text-align: left;
    }

    .expense-actions {
        justify-content: flex-start;
    }

    .expenses-col-actions {
        min-width: 230px;
    }
}

.expenses-col-user {
    width: 12%;
}

.expenses-col-trip {
    width: 18%;
}

.expenses-col-category {
    width: 10%;
}

.expenses-col-method {
    width: 9%;
}

.expenses-col-amount {
    width: 11%;
}

.expenses-col-date {
    width: 10%;
}

.expenses-col-attachment {
    width: 64px;
    min-width: 64px;
}

.expenses-table tbody td.expenses-col-attachment {
    text-align: center;
    vertical-align: middle;
}

.expenses-table thead th.expenses-col-actions,
.expenses-table thead th.expenses-col-amount,
.expenses-table thead th.expenses-col-attachment,
.expenses-table thead th.expenses-col-date {
    text-align: center;
}

.expense-attachment-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(39, 89, 227, 0.08);
    color: #2759e3;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.expense-attachment-indicator:hover,
.expense-attachment-indicator:focus-visible {
    background: rgba(39, 89, 227, 0.14);
    color: #1842b4;
    transform: translateY(-1px);
    text-decoration: none;
}

.expense-attachment-indicator:focus-visible {
    outline: 2px solid rgba(39, 89, 227, 0.22);
    outline-offset: 2px;
}

tr.bulk-selected > * {
    background: #eef4ff !important;
}

.expense-detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    background: var(--portal-surface-alt);
}

.portal-confirm-modal .modal-dialog {
    max-width: min(520px, calc(100vw - 32px));
}

.portal-confirm-modal-content {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 28px 56px rgba(20, 35, 61, 0.2);
}

.portal-confirm-modal-header {
    padding: 20px 22px 14px;
    border-bottom: 1px solid rgba(226, 234, 245, 0.92);
    background:
        radial-gradient(circle at top right, rgba(47, 109, 246, 0.14) 0%, rgba(47, 109, 246, 0) 42%),
        linear-gradient(180deg, #f9fbff 0%, #f4f8ff 100%);
}

.portal-confirm-modal-header .modal-title {
    color: #16233b;
    font-weight: 700;
}

.portal-confirm-modal-body {
    padding: 20px 22px 10px;
    color: #4f627f;
    font-size: 0.96rem;
    line-height: 1.6;
}

.portal-confirm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 22px 22px;
    border-top: 0;
}

.portal-confirm-modal-confirm.btn-danger {
    background: linear-gradient(180deg, #dc3545 0%, #c82f3e 100%);
    border-color: #c82f3e;
    box-shadow: 0 12px 22px rgba(200, 47, 62, 0.2);
}

.portal-confirm-modal-confirm.btn-warning {
    color: #3f2a00;
    background: linear-gradient(180deg, #ffca5f 0%, #ffb020 100%);
    border-color: #f2a400;
    box-shadow: 0 12px 22px rgba(255, 176, 32, 0.24);
}

.portal-confirm-modal-confirm.btn-primary {
    box-shadow: 0 12px 22px rgba(47, 109, 246, 0.2);
}

.portal-confirm-modal-confirm:focus-visible,
.portal-confirm-modal-footer .btn:focus-visible {
    outline: 2px solid rgba(39, 89, 227, 0.24);
    outline-offset: 2px;
}

.expense-detail-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a8aa4;
}

.expense-detail-notes {
    white-space: pre-wrap;
    word-break: break-word;
}

.expense-detail-modal-content {
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 26px 60px rgba(20, 35, 61, 0.16);
}

.expense-detail-modal-dialog {
    max-width: min(1180px, calc(100vw - 32px));
}

.expense-detail-modal-header {
    position: relative;
    padding: 22px 26px 20px;
    border-bottom: 1px solid rgba(226, 234, 245, 0.9);
    background:
        radial-gradient(circle at top right, rgba(47, 109, 246, 0.16) 0%, rgba(47, 109, 246, 0) 36%),
        linear-gradient(180deg, #f9fbff 0%, #f4f8ff 100%);
}

.expense-detail-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.expense-detail-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.expense-detail-header-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
    margin-left: auto;
    flex: 0 0 auto;
}

.expense-detail-overline {
    margin-bottom: 6px;
    color: var(--portal-primary-dark);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.expense-detail-modal-title {
    margin: 0;
    color: #13233d;
    font-size: 1.34rem;
    font-weight: 750;
    line-height: 1.08;
}

.expense-detail-subtitle {
    max-width: 440px;
    margin: 8px 0 0;
    color: var(--portal-text-soft);
    font-size: 0.84rem;
    line-height: 1.45;
}

.expense-detail-header-aside {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
    min-width: 0;
    padding: 12px 15px;
    border: 1px solid rgba(212, 224, 240, 0.92);
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(47, 109, 246, 0.08) 0%, rgba(47, 109, 246, 0) 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 250, 255, 0.98) 100%);
    box-shadow:
        0 12px 22px rgba(20, 35, 61, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.expense-detail-inline-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.expense-detail-mini-label {
    display: block;
    margin-bottom: 4px;
    color: #71839d;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.expense-detail-inline-kpi strong {
    color: #10213b;
    font-size: 1.74rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    word-break: break-word;
}

.expense-detail-mini-meta {
    color: #697c98;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.expense-detail-status-badge {
    min-height: 32px;
    padding: 0.34rem 0.74rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.expense-detail-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.expense-detail-close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(203, 216, 234, 0.95);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    color: #50627c;
    box-shadow: 0 10px 22px rgba(20, 35, 61, 0.06);
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.expense-detail-close-button:hover {
    transform: translateY(-1px);
    background: #ffffff;
    border-color: rgba(39, 89, 227, 0.24);
    color: #1d4cae;
    box-shadow: 0 12px 24px rgba(20, 35, 61, 0.1);
}

.expense-detail-close-button:focus-visible {
    outline: 2px solid rgba(39, 89, 227, 0.24);
    outline-offset: 2px;
}

.expense-detail-close-button i {
    font-size: 1rem;
}

.expense-detail-modal-body {
    padding: 24px 28px 28px;
    overflow-x: hidden;
}

.expense-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.72fr);
    gap: 22px;
    min-width: 0;
}

.expense-detail-main,
.expense-detail-sidebar {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.expense-detail-panel {
    min-width: 0;
    padding: 21px;
    border-radius: 24px;
    border: 1px solid var(--portal-border);
    background: #ffffff;
    box-shadow: var(--portal-shadow-soft);
}

.expense-detail-panel-accent {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.expense-detail-panel-header {
    margin-bottom: 14px;
}

.expense-detail-trip-range-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid #d8e6fb;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
    color: #35537f;
    font-size: 0.84rem;
    line-height: 1.45;
}

.expense-detail-trip-range-note .expense-trip-range-badge {
    flex: 0 0 auto;
}

.expense-trip-rectification-form {
    display: grid;
    gap: 14px;
}

.expense-trip-rectification-current {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fbfdff;
    border: 1px solid var(--portal-border);
}

.expense-trip-rectification-current strong {
    color: #17233a;
    font-size: 0.96rem;
}

.expense-trip-rectification-current-meta {
    color: var(--portal-text-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}

.expense-trip-select-preview {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 11px 13px;
    border-radius: 14px;
    background: #fbfdff;
    border: 1px solid rgba(226, 234, 245, 0.95);
}

.expense-trip-select-preview strong {
    color: #17233a;
    font-size: 0.9rem;
    line-height: 1.35;
}

.expense-trip-select-preview span {
    color: var(--portal-text-soft);
    font-size: 0.8rem;
    line-height: 1.45;
}

.expense-trip-select-preview-compact {
    margin-top: 0;
}

.expense-trip-rectification-help {
    margin-top: -4px;
}

.expense-detail-panel-header h3 {
    margin: 0;
    color: #16233b;
    font-size: 1rem;
    font-weight: 700;
}

.expense-detail-panel-header p {
    margin: 5px 0 0;
    color: var(--portal-text-soft);
    font-size: 0.86rem;
}

.expense-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.expense-detail-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.expense-detail-item {
    background: #fbfdff;
    overflow: hidden;
}

.expense-detail-item-strong {
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.expense-detail-item-wide {
    grid-column: 1 / -1;
}

.expense-detail-value,
.expense-detail-summary-value {
    color: #17233a;
    font-weight: 600;
    word-break: break-word;
}

.expense-detail-summary-list {
    display: grid;
    gap: 14px;
}

.expense-detail-summary-item + .expense-detail-summary-item {
    padding-top: 14px;
    border-top: 1px solid var(--portal-border);
}

.expense-detail-summary-value {
    display: block;
    margin-top: 6px;
    font-size: 1.26rem;
    line-height: 1.15;
}

.expense-detail-receipt-link {
    display: block;
    min-width: 0;
    border-radius: 20px;
    overflow: hidden;
}

.expense-detail-receipt-image {
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 360px;
    object-fit: contain;
    border-radius: 20px;
    border: 1px solid rgba(214, 225, 240, 0.95);
    background:
        linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(241, 247, 255, 0.98) 100%);
    padding: 18px;
}

.expense-detail-receipt-preview-shell {
    position: relative;
    min-height: 320px;
}

.expense-detail-receipt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 320px;
    padding: 28px 20px;
    border: 1px dashed #cfdced;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(251, 253, 255, 0.96) 0%, rgba(244, 248, 255, 0.98) 100%);
    color: var(--portal-text-soft);
    text-align: center;
}

.expense-detail-receipt-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(39, 89, 227, 0.08);
    color: #315fbd;
    font-size: 1.6rem;
}

.expense-detail-receipt-empty-copy {
    display: grid;
    gap: 4px;
    max-width: 240px;
}

.expense-detail-receipt-empty-copy strong {
    color: #163058;
    font-size: 0.96rem;
}

.expense-detail-receipt-empty-copy span {
    font-size: 0.88rem;
    line-height: 1.5;
}

.expense-detail-receipt-form {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    min-width: 0;
}

.expense-detail-receipt-upload {
    min-width: 0;
}

.expense-detail-receipt-file-shell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(203, 216, 234, 0.95);
    border-radius: 16px;
    background: #fbfdff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.expense-detail-receipt-file-shell:focus-within {
    border-color: rgba(39, 89, 227, 0.55);
    box-shadow: 0 0 0 4px rgba(39, 89, 227, 0.12);
    background: #ffffff;
}

.expense-detail-receipt-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.expense-detail-receipt-file-input:disabled {
    cursor: not-allowed;
}

.expense-detail-receipt-file-trigger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(39, 89, 227, 0.1);
    color: #214cad;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.expense-detail-receipt-file-name {
    min-width: 0;
    flex: 1 1 auto;
    color: #51637d;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.expense-detail-receipt-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.expense-trip-rectification-form .expense-detail-receipt-form-actions {
    grid-template-columns: minmax(0, 1fr);
}

.expense-detail-receipt-form-actions .btn {
    width: 100%;
}

.expense-detail-receipt-form .btn:disabled,
.expense-detail-receipt-form .btn[aria-disabled="true"] {
    opacity: 0.62;
    cursor: not-allowed;
    filter: saturate(0.75);
    box-shadow: none;
}

.expense-detail-receipt-form.is-busy {
    pointer-events: none;
    opacity: 0.92;
}

.expense-manage-receipt-panel {
    padding: 20px;
    border-radius: 24px;
    border: 1px solid var(--portal-border);
    background: #ffffff;
    box-shadow: var(--portal-shadow-soft);
}

.expense-detail-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 26px 22px;
    border-top: 1px solid rgba(226, 234, 245, 0.9);
    background: rgba(248, 251, 255, 0.72);
}

@media (max-width: 991.98px) {
    .expense-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expense-filter-actions {
        justify-content: stretch;
    }

    .expense-filter-actions .btn,
    .expenses-header-actions .btn {
        width: 100%;
    }

    .expense-detail-layout {
        grid-template-columns: 1fr;
        display: grid;
    }

    .expense-detail-header-content {
        align-items: start;
    }

    .expense-detail-header-meta {
        width: 100%;
        justify-content: flex-end;
    }

    .expense-detail-header-aside {
        align-items: flex-start;
        text-align: left;
    }

    .expense-detail-inline-kpi {
        justify-content: flex-start;
    }

    .expense-detail-receipt-form-actions {
        grid-template-columns: 1fr;
    }

    .expense-detail-receipt-file-shell {
        flex-direction: column;
        align-items: stretch;
    }

    .expense-detail-receipt-file-trigger {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .expense-kpi-grid {
        grid-template-columns: 1fr;
    }

    .expense-kpi-card {
        min-height: 0;
    }

    .expense-detail-modal-header,
    .expense-detail-modal-body,
    .expense-detail-modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .expense-detail-grid,
    .expense-detail-grid-compact {
        grid-template-columns: 1fr;
    }

    .expense-detail-header-content {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .expense-detail-header-meta {
        width: 100%;
        justify-content: space-between;
    }

    .expense-detail-header-aside,
    .expense-detail-header-actions {
        width: auto;
    }

    .expense-detail-header-actions {
        justify-content: flex-end;
    }

    .expense-detail-receipt-image,
    .expense-detail-receipt-preview-shell,
    .expense-detail-receipt-empty {
        min-height: 260px;
    }

    .expense-detail-panel {
        padding: 18px;
    }
}

.autocomplete-filter {
    position: relative;
}

.autocomplete-filter-menu {
    position: absolute;
    inset: calc(100% + 8px) 0 auto;
    z-index: 35;
    padding: 8px;
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--portal-shadow);
}

.autocomplete-filter-menu.d-none {
    display: none !important;
}

.autocomplete-filter-option {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    color: var(--portal-text);
}

.autocomplete-filter-option:hover,
.autocomplete-filter-option:focus,
.autocomplete-filter-option.is-active {
    background: #f4f8ff;
}

.autocomplete-filter-option-title {
    font-weight: 700;
}

.autocomplete-filter-option-meta,
.autocomplete-filter-empty {
    font-size: 0.84rem;
    color: var(--portal-text-soft);
}

.chart-card .card-body,
.chart-card .portal-card-body {
    min-height: 300px;
}

.chart-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--portal-border);
    font-weight: 700;
    color: var(--portal-text);
    padding: 18px 22px 14px;
}

.kpi-card .display-6,
.portal-kpi-card .display-6 {
    font-size: 1.8rem;
    font-weight: 800;
}

.portal-dashboard-kpi {
    border: 1px solid var(--portal-border);
    box-shadow: var(--portal-shadow-soft);
}

.portal-dashboard-kpi .portal-card-body {
    padding: 18px 20px;
}

.portal-dashboard-kpi-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--portal-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.portal-dashboard-kpi-value {
    margin-top: 10px;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--portal-text);
    line-height: 1.1;
}

.portal-dashboard-kpi-meta {
    margin-top: 8px;
    font-size: 0.84rem;
    color: var(--portal-text-soft);
}

.portal-dashboard-kpi-trend {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.portal-dashboard-kpi-trend.is-up {
    background: rgba(240, 93, 94, 0.12);
    color: #d94143;
}

.portal-dashboard-kpi-trend.is-down {
    background: rgba(25, 169, 116, 0.12);
    color: #12865a;
}

.portal-dashboard-kpi-trend.is-neutral {
    background: rgba(109, 125, 150, 0.1);
    color: #52627b;
}

.portal-dashboard-kpi-primary {
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.08), rgba(47, 109, 246, 0.02));
}

.portal-dashboard-kpi-success {
    background: linear-gradient(180deg, rgba(25, 169, 116, 0.08), rgba(25, 169, 116, 0.02));
}

.portal-dashboard-kpi-warning {
    background: linear-gradient(180deg, rgba(255, 176, 32, 0.12), rgba(255, 176, 32, 0.03));
}

.portal-dashboard-kpi-secondary,
.portal-dashboard-kpi-soft {
    background: linear-gradient(180deg, rgba(109, 125, 150, 0.08), rgba(109, 125, 150, 0.02));
}

.portal-dashboard-kpi-danger {
    background: linear-gradient(180deg, rgba(240, 93, 94, 0.1), rgba(240, 93, 94, 0.02));
}

.portal-dashboard-kpi-dark {
    background: linear-gradient(180deg, rgba(23, 35, 58, 0.06), rgba(23, 35, 58, 0.02));
}

.portal-dashboard-kpi-info {
    background: linear-gradient(180deg, rgba(19, 184, 166, 0.09), rgba(19, 184, 166, 0.02));
}

.portal-dashboard-insights .portal-card-body {
    padding-top: 18px;
}

.portal-dashboard-insight-list {
    display: grid;
    gap: 12px;
}

.portal-dashboard-insight-item {
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.06), rgba(47, 109, 246, 0.02));
    border: 1px solid rgba(47, 109, 246, 0.12);
    color: var(--portal-text);
    font-size: 0.95rem;
    line-height: 1.45;
}

.dashboard-analytics-page {
    --dashboard-grid-gap: 14px;
    --dashboard-filter-card-height: 96px;
    --dashboard-kpi-height: 96px;
    --dashboard-primary-card-height: 304px;
    --dashboard-side-summary-height: 304px;
    --dashboard-donut-card-height: 228px;
    --dashboard-ranking-card-height: 232px;
    --dashboard-primary-header-height: 56px;
    --dashboard-secondary-header-height: 52px;
    --dashboard-ranking-header-height: 52px;
    --dashboard-chart-height-primary: 164px;
    --dashboard-chart-height-donut: 120px;
    --dashboard-chart-height-ranking: 130px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: var(--dashboard-grid-gap);
}

.dashboard-row {
    position: relative;
    isolation: isolate;
    min-width: 0;
}

.dashboard-row-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-row-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
}

.dashboard-row-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
    align-items: stretch;
}

.dashboard-row-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.dashboard-row-ranking {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.dashboard-page-header {
    margin-bottom: 0;
}

.dashboard-page-header h1 {
    margin-bottom: 8px;
}

.dashboard-page-header p {
    margin-bottom: 0;
    line-height: 1.45;
}

.dashboard-toolbar-card,
.dashboard-panel,
.dashboard-executive-kpi {
    border-radius: 24px;
    overflow: hidden;
}

.dashboard-toolbar-card .portal-card-body {
    padding: 12px 16px;
}

.dashboard-toolbar-shell {
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.62fr);
    gap: 10px;
    align-items: center;
}

.dashboard-toolbar-copy h2 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--portal-text);
}

.dashboard-toolbar-copy p {
    margin: 4px 0 0;
    color: var(--portal-text-soft);
    line-height: 1.28;
    max-width: 34ch;
    font-size: 0.84rem;
}

.dashboard-toolbar-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    min-width: 0;
}

.dashboard-toolbar-fields {
    display: grid;
    grid-template-columns: minmax(230px, 1.3fr) minmax(160px, 0.7fr);
    gap: 8px;
    align-items: end;
    min-width: 0;
}

.dashboard-toolbar-field {
    min-width: 0;
}

.dashboard-toolbar-actions {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}

.dashboard-toolbar-actions .btn {
    min-width: 142px;
    height: 38px;
}

.dashboard-executive-kpis {
    gap: 12px;
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.dashboard-executive-kpi {
    min-height: var(--dashboard-kpi-height);
    height: var(--dashboard-kpi-height);
    padding: 12px 14px;
    border: 1px solid var(--portal-border);
    box-shadow: var(--portal-shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-executive-kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}

.dashboard-executive-kpi-label {
    min-height: 16px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--portal-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dashboard-executive-kpi-body {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: 34px 16px;
    align-content: space-between;
    min-height: 0;
}

.dashboard-executive-kpi-value {
    display: block;
    min-height: 34px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--portal-text);
    line-height: 1.02;
}

.dashboard-executive-kpi-meta {
    display: block;
    min-height: 16px;
    color: var(--portal-text-soft);
    font-size: 0.76rem;
    line-height: 1.2;
}

.dashboard-kpi-trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    min-width: 66px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.dashboard-kpi-trend-placeholder {
    opacity: 0;
    pointer-events: none;
}

.dashboard-kpi-trend.is-up {
    background: rgba(240, 93, 94, 0.12);
    color: #d94143;
}

.dashboard-kpi-trend.is-down {
    background: rgba(25, 169, 116, 0.12);
    color: #12865a;
}

.dashboard-kpi-trend.is-neutral {
    background: rgba(109, 125, 150, 0.1);
    color: #52627b;
}

.dashboard-hero-grid {
    gap: 14px;
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.dashboard-secondary-grid,
.dashboard-ranking-grid {
    gap: 14px;
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.dashboard-panel-header {
    padding-bottom: 8px;
}

.dashboard-panel-header > div {
    display: grid;
    grid-template-rows: 22px 32px;
    align-content: start;
    width: 100%;
}

.dashboard-panel-header h2 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    min-height: 22px;
}

.dashboard-panel-header p {
    margin: 4px 0 0;
    color: var(--portal-text-soft);
    line-height: 1.32;
    font-size: 0.86rem;
    min-height: 32px;
    overflow: hidden;
}

.dashboard-panel-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.dashboard-panel-secondary .dashboard-panel-header,
.dashboard-panel-ranking .dashboard-panel-header {
    min-height: var(--dashboard-secondary-header-height);
    padding-bottom: 6px;
}

.dashboard-panel-secondary .dashboard-panel-body,
.dashboard-panel-ranking .dashboard-panel-body {
    padding: 10px 12px 12px;
}

.dashboard-panel-body-donut {
    display: grid;
    grid-template-rows: var(--dashboard-chart-height-donut) 40px;
    row-gap: 4px;
    align-content: start;
}

.dashboard-panel-body-ranking {
    display: grid;
    grid-template-rows: var(--dashboard-chart-height-ranking);
    align-content: start;
}

.dashboard-panel-topline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.dashboard-mini-metric {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(226, 234, 245, 0.9);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.94));
}

.dashboard-mini-metric-label,
.dashboard-side-highlight-label {
    color: var(--portal-text-soft);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dashboard-mini-metric-value,
.dashboard-side-highlight-value {
    color: var(--portal-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
}

.dashboard-chart-frame {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.dashboard-chart-frame canvas {
    width: 100% !important;
    height: 100% !important;
}

.dashboard-chart-frame-primary {
    height: var(--dashboard-chart-height-primary);
}

.dashboard-chart-frame-secondary {
    height: var(--dashboard-chart-height-donut);
}

.dashboard-side-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    height: 100%;
}

.dashboard-side-highlight {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(47, 109, 246, 0.12);
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.06), rgba(255, 255, 255, 0.96));
}

.dashboard-side-highlight-meta {
    color: var(--portal-text-soft);
    font-size: 0.8rem;
    line-height: 1.35;
}

.dashboard-status-list,
.dashboard-insight-stack {
    display: grid;
    gap: 6px;
}

.dashboard-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(226, 234, 245, 0.9);
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(245, 249, 255, 0.92));
}

.dashboard-status-row span {
    color: var(--portal-text-soft);
    font-size: 0.86rem;
}

.dashboard-status-row strong {
    color: var(--portal-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.dashboard-insight-item {
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(47, 109, 246, 0.1);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.95));
    color: var(--portal-text);
    font-size: 0.8rem;
    line-height: 1.32;
}

.dashboard-secondary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-ranking-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.dashboard-panel-primary,
.dashboard-panel-side {
    height: var(--dashboard-primary-card-height);
    min-height: var(--dashboard-primary-card-height);
}

.dashboard-panel-primary .dashboard-panel-body,
.dashboard-panel-side .dashboard-panel-body {
    min-height: calc(var(--dashboard-primary-card-height) - var(--dashboard-primary-header-height));
}

.dashboard-panel-primary .dashboard-panel-header,
.dashboard-panel-side .dashboard-panel-header {
    min-height: var(--dashboard-primary-header-height);
}

.dashboard-panel-secondary {
    height: var(--dashboard-donut-card-height);
    min-height: var(--dashboard-donut-card-height);
}

.dashboard-panel-ranking {
    height: var(--dashboard-ranking-card-height);
    min-height: var(--dashboard-ranking-card-height);
}

.dashboard-panel-secondary .dashboard-panel-body {
    min-height: calc(var(--dashboard-donut-card-height) - var(--dashboard-secondary-header-height));
}

.dashboard-panel-ranking .dashboard-panel-body {
    min-height: calc(var(--dashboard-ranking-card-height) - var(--dashboard-ranking-header-height));
}

.dashboard-panel-secondary .dashboard-chart-frame {
    height: var(--dashboard-chart-height-donut);
}

.dashboard-panel-ranking .dashboard-chart-frame {
    height: var(--dashboard-chart-height-ranking);
}

.dashboard-donut-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 6px 10px;
    min-height: 40px;
    max-height: 40px;
    overflow: hidden;
}

.dashboard-donut-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--portal-text-soft);
    font-size: 0.74rem;
    line-height: 1.2;
}

.dashboard-donut-legend-item span:last-child {
    display: inline-block;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-donut-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    flex: 0 0 9px;
}

.dashboard-panel-secondary .dashboard-empty-state,
.dashboard-panel-ranking .dashboard-empty-state {
    min-height: 92px;
}

.dashboard-filter-card {
    height: var(--dashboard-filter-card-height);
    min-height: var(--dashboard-filter-card-height);
}

.dashboard-kpi-card {
    height: var(--dashboard-kpi-height);
    min-height: var(--dashboard-kpi-height);
}

.dashboard-primary-card {
    height: var(--dashboard-primary-card-height);
    min-height: var(--dashboard-primary-card-height);
}

.dashboard-side-summary-card {
    height: var(--dashboard-side-summary-height);
    min-height: var(--dashboard-side-summary-height);
}

.dashboard-donut-card {
    height: var(--dashboard-donut-card-height);
    min-height: var(--dashboard-donut-card-height);
}

.dashboard-ranking-card {
    height: var(--dashboard-ranking-card-height);
    min-height: var(--dashboard-ranking-card-height);
}

.dashboard-chart-wrapper-primary {
    height: var(--dashboard-chart-height-primary);
}

.dashboard-chart-wrapper-donut {
    height: var(--dashboard-chart-height-donut);
}

.dashboard-chart-wrapper-ranking {
    height: var(--dashboard-chart-height-ranking);
}

.dashboard-empty-state {
    width: 100%;
    min-height: 150px;
    align-self: center;
}

.dashboard-empty-state-inline {
    min-height: 0;
    margin: 0;
}

.management-report-page {
    padding-bottom: 36px;
}

.management-report-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 22px;
}

.management-report-hero-main {
    max-width: 760px;
}

.management-report-hero h1 {
    margin: 0;
    font-size: clamp(2.15rem, 2.8vw, 3rem);
    line-height: 1;
    letter-spacing: -0.03em;
}

.management-report-hero p {
    max-width: 62ch;
    margin: 12px 0 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--portal-text-soft);
}

.management-report-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.management-report-filter-card {
    margin-bottom: 18px;
    border-radius: 24px;
}

.management-report-filter-form {
    display: grid;
    grid-template-columns: minmax(240px, 1.1fr) minmax(0, 2fr);
    gap: 24px;
    align-items: end;
}

.management-report-filter-copy {
    min-width: 0;
}

.management-report-filter-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--portal-text);
}

.management-report-filter-text {
    margin-top: 6px;
    color: var(--portal-text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

.management-report-filter-fields {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.8fr) 160px;
    gap: 14px;
    align-items: end;
}

.management-report-filter-field label {
    margin-bottom: 8px;
}

.management-report-filter-submit {
    display: flex;
    align-items: end;
}

.management-report-meta-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.management-report-meta-item {
    padding: 16px 18px;
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--portal-shadow-soft);
}

.portal-icon-btn-link {
    position: relative;
    text-decoration: none;
}

.portal-icon-btn-link.is-active {
    border-color: rgba(47, 109, 246, 0.22);
    color: var(--portal-primary);
    background: rgba(47, 109, 246, 0.08);
}

.portal-icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(220, 53, 69, 0.28);
}

.management-report-meta-label {
    display: block;
    margin-bottom: 6px;
    color: var(--portal-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.management-report-meta-value {
    display: block;
    color: var(--portal-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.management-report-kpi-grid {
    display: grid;
    grid-template-columns: 1.45fr repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.management-report-kpi {
    border-radius: 24px;
    border: 1px solid var(--portal-border);
    box-shadow: var(--portal-shadow-soft);
}

.management-report-kpi .portal-card-body {
    padding: 22px;
}

.management-report-kpi-lead {
    background:
        radial-gradient(circle at top right, rgba(47, 109, 246, 0.22), rgba(47, 109, 246, 0) 42%),
        linear-gradient(180deg, rgba(47, 109, 246, 0.1), rgba(47, 109, 246, 0.03));
}

.management-report-kpi-accent {
    background: linear-gradient(180deg, rgba(25, 169, 116, 0.1), rgba(25, 169, 116, 0.03));
}

.management-report-kpi-overline {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--portal-primary-dark);
}

.management-report-kpi-label {
    margin-top: 10px;
    color: var(--portal-text-soft);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.management-report-kpi-value {
    margin-top: 12px;
    color: var(--portal-text);
    font-size: clamp(1.85rem, 2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.management-report-kpi-support {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 12px;
    color: var(--portal-text-soft);
    font-size: 0.86rem;
}

.management-report-kpi-meta {
    margin-top: 10px;
    color: var(--portal-text-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

.management-report-kpi-trend {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.management-report-kpi-trend.is-up {
    background: rgba(240, 93, 94, 0.12);
    color: #d94143;
}

.management-report-kpi-trend.is-down {
    background: rgba(25, 169, 116, 0.12);
    color: #12865a;
}

.management-report-kpi-trend.is-neutral {
    background: rgba(109, 125, 150, 0.1);
    color: #52627b;
}

.management-report-summary-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.9fr;
    gap: 16px;
    margin-bottom: 18px;
}

.management-report-summary-card,
.management-report-health-card,
.management-report-panel {
    border-radius: 24px;
}

.management-report-signal-list {
    display: grid;
    gap: 12px;
}

.management-report-signal-item {
    position: relative;
    padding: 15px 16px 15px 48px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.06), rgba(47, 109, 246, 0.02));
    border: 1px solid rgba(47, 109, 246, 0.12);
    color: var(--portal-text);
    font-size: 0.96rem;
    line-height: 1.5;
}

.management-report-signal-item::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2f6df6, #1d53ce);
    box-shadow: 0 0 0 6px rgba(47, 109, 246, 0.1);
}

.management-report-empty-state {
    padding: 18px;
    border-radius: 16px;
    background: rgba(109, 125, 150, 0.08);
    color: var(--portal-text-soft);
    font-size: 0.94rem;
}

.management-report-health-card .portal-card-body {
    display: grid;
    gap: 12px;
}

.management-report-health-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--portal-border);
    font-size: 0.95rem;
}

.management-report-health-row:last-child {
    border-bottom: 0;
}

.management-report-health-row span {
    color: var(--portal-text-soft);
}

.management-report-health-row strong {
    font-size: 1.08rem;
    color: var(--portal-text);
}

.management-report-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.management-report-panel-wide {
    grid-column: span 2;
}

.management-report-rank-list {
    display: grid;
    gap: 14px;
}

.management-report-rank-item {
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.92));
    border: 1px solid rgba(226, 234, 245, 0.95);
}

.management-report-rank-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.management-report-rank-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--portal-text);
    line-height: 1.3;
}

.management-report-rank-meta {
    margin-top: 4px;
    color: var(--portal-text-soft);
    font-size: 0.82rem;
}

.management-report-rank-value {
    flex: 0 0 auto;
    text-align: right;
    font-size: 1.02rem;
    font-weight: 800;
    color: #10203b;
    white-space: nowrap;
}

.management-report-rank-bar {
    margin-top: 12px;
    height: 8px;
    border-radius: 999px;
    background: rgba(47, 109, 246, 0.08);
    overflow: hidden;
}

.management-report-rank-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2f6df6, #5f94ff);
}

.users-filter-grid {
    align-items: end;
}

.users-page-header {
    margin-bottom: 18px;
}

.users-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 24px;
}

.users-kpi-card {
    min-height: 162px;
}

.users-filter-card,
.users-table-card,
.users-create-card {
    border-radius: 24px;
}

.users-filter-form,
.users-create-form {
    row-gap: 18px;
}

.users-filter-form .form-control,
.users-filter-form .form-select,
.users-create-form .form-control,
.users-create-form .form-select {
    min-height: 50px;
}

.users-filter-actions,
.users-create-actions {
    justify-content: flex-end;
    align-items: flex-end;
}

.users-filter-reset-wrap {
    display: flex;
    align-items: end;
}

.users-results-meta {
    color: var(--portal-text-soft);
    font-size: 0.94rem;
    margin-bottom: 18px;
}

.users-table-wrap {
    margin-top: 8px;
}

.users-management-table th:nth-child(1),
.users-management-table td:nth-child(1) {
    width: 30%;
}

.users-management-table th:nth-child(2),
.users-management-table td:nth-child(2) {
    width: 16%;
}

.users-management-table th:nth-child(3),
.users-management-table td:nth-child(3) {
    width: 20%;
}

.users-management-table th:nth-child(4),
.users-management-table td:nth-child(4) {
    width: 22%;
}

.users-management-table th:nth-child(5),
.users-management-table td:nth-child(5) {
    width: 12%;
}

.user-management-row td {
    vertical-align: middle;
    white-space: normal;
}

.user-row-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.user-row-avatar-frame {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    overflow: hidden;
    flex: 0 0 48px;
    background: linear-gradient(135deg, rgba(47, 109, 246, 0.14), rgba(47, 109, 246, 0.04));
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-row-avatar-image,
.user-row-avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.user-row-avatar-image {
    object-fit: cover;
    object-position: center;
    display: block;
}

.user-row-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--portal-primary-dark);
}

.user-row-identity-copy {
    min-width: 0;
}

.user-row-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--portal-text);
}

.user-row-email,
.user-row-id,
.user-row-meta-note {
    color: var(--portal-text-soft);
    font-size: 0.84rem;
    line-height: 1.45;
}

.user-row-status-stack,
.user-row-organization,
.user-row-role-stack {
    display: grid;
    gap: 8px;
}

.user-row-org-current {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--portal-text);
}

.users-action-menu {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.users-action-dropdown {
    min-width: 220px;
    border-radius: 16px;
    border-color: var(--portal-border);
    box-shadow: var(--portal-shadow-soft);
    padding: 8px;
}

.users-dropdown-form {
    margin: 0;
}

.users-dropdown-form .dropdown-item,
.users-action-dropdown .dropdown-item {
    border-radius: 10px;
    padding: 10px 12px;
}

.users-modal-content {
    border: 1px solid var(--portal-border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--portal-shadow);
}

.users-modal-header {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--portal-border);
}

.users-modal-title {
    margin: 6px 0 0;
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--portal-text);
}

.users-modal-subtitle {
    margin: 8px 0 0;
    color: var(--portal-text-soft);
    font-size: 0.9rem;
}

.users-modal-body {
    padding: 22px 24px;
}

.users-modal-footer {
    justify-content: space-between;
}

.users-create-empty-state {
    justify-items: start;
    margin: 0;
    text-align: left;
}

.trips-table-wrap {
    margin-top: 8px;
}

.trip-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 24px;
}

.trip-kpi-card {
    min-height: 162px;
}

.trips-filter-card,
.trips-table-card {
    border-radius: 24px;
}

.trips-filter-form {
    row-gap: 18px;
}

.trips-filter-form .form-control,
.trips-filter-form .form-select {
    min-height: 50px;
}

.trips-management-table {
    table-layout: fixed;
}

.trips-management-table th:nth-child(1),
.trips-management-table td:nth-child(1) {
    width: 35%;
}

.trips-management-table th:nth-child(2),
.trips-management-table td:nth-child(2) {
    width: 24%;
}

.trips-management-table th:nth-child(3),
.trips-management-table td:nth-child(3) {
    width: 21%;
}

.trips-management-table th:nth-child(4),
.trips-management-table td:nth-child(4) {
    width: 20%;
}

.trips-management-table .trip-management-row {
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.trips-management-table .trip-management-row:hover {
    background: rgba(47, 109, 246, 0.04);
}

.trip-management-row td {
    vertical-align: middle;
    padding-top: 16px;
    padding-bottom: 16px;
}

.trip-row-main,
.trip-row-context,
.trip-row-summary {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.trip-row-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--portal-text);
    line-height: 1.35;
}

.trip-row-subtitle,
.trip-row-owner,
.trip-row-summary-meta,
.trip-row-dates {
    color: var(--portal-text-soft);
    font-size: 0.86rem;
    line-height: 1.45;
}

.trip-row-subtitle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

.trip-row-owner {
    font-weight: 600;
}

.trip-row-summary-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--portal-text);
}

.trip-row-summary {
    justify-items: end;
    text-align: right;
}

.trip-detail-modal-dialog {
    max-width: min(1180px, calc(100vw - 32px));
}

.trip-detail-modal-content,
.trip-detail-modal-header,
.trip-detail-modal-body,
.trip-detail-modal-footer,
.trip-detail-layout,
.trip-detail-main,
.trip-detail-sidebar,
.trip-detail-grid,
.trip-detail-panel,
.trip-detail-coverage-state {
    min-width: 0;
}

.trip-detail-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
}

.trip-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.trip-detail-item,
.trip-detail-summary-row,
.trip-detail-coverage-state {
    min-width: 0;
}

.trip-detail-item-value {
    overflow-wrap: anywhere;
}

.trip-detail-summary-list {
    display: grid;
    gap: 12px;
}

.trip-detail-summary-row strong {
    text-align: right;
}

.trip-detail-coverage-state {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.92));
    border: 1px solid rgba(226, 234, 245, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.trip-detail-coverage-state p {
    color: var(--portal-text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.expense-manage-grid,
.trip-manage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.expense-manage-grid-span-2,
.trip-manage-grid-span-2 {
    grid-column: 1 / -1;
}

.trip-manage-btn,
.expense-manage-btn {
    min-width: 96px;
}

.trip-manage-modal-footer {
    justify-content: space-between;
}

@media (max-width: 991.98px) {
    .expense-manage-grid,
    .trip-manage-grid {
        grid-template-columns: 1fr;
    }

    .expense-manage-grid-span-2,
    .trip-manage-grid-span-2 {
        grid-column: auto;
    }

    .trip-kpi-grid,
    .trip-detail-layout {
        grid-template-columns: 1fr;
    }

    .users-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-toolbar-shell,
    .dashboard-toolbar-form,
    .dashboard-toolbar-fields,
    .dashboard-row-kpis,
    .dashboard-row-hero,
    .dashboard-row-secondary,
    .dashboard-row-ranking {
        grid-template-columns: 1fr;
    }

    .dashboard-toolbar-actions {
        justify-content: stretch;
    }

    .dashboard-toolbar-actions .btn {
        flex: 1 1 auto;
    }

    .dashboard-analytics-page {
        --dashboard-filter-card-height: auto;
        --dashboard-kpi-height: auto;
        --dashboard-primary-card-height: auto;
        --dashboard-side-summary-height: auto;
        --dashboard-donut-card-height: auto;
        --dashboard-ranking-card-height: auto;
        --dashboard-chart-height-primary: 210px;
        --dashboard-chart-height-donut: 180px;
        --dashboard-chart-height-ranking: 180px;
    }

    .dashboard-filter-card,
    .dashboard-kpi-card,
    .dashboard-panel-primary,
    .dashboard-panel-side,
    .dashboard-panel-secondary,
    .dashboard-panel-ranking,
    .dashboard-panel-primary .dashboard-panel-body,
    .dashboard-panel-side .dashboard-panel-body,
    .dashboard-panel-secondary .dashboard-panel-body,
    .dashboard-panel-ranking .dashboard-panel-body {
        height: auto;
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .trip-kpi-grid,
    .trip-detail-grid {
        grid-template-columns: 1fr;
    }

    .trip-detail-modal-header,
    .trip-detail-modal-body,
    .trip-detail-modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .trip-detail-panel {
        padding: 18px;
    }

    .users-kpi-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-panel-topline {
        grid-template-columns: 1fr;
    }

    .dashboard-analytics-page {
        --dashboard-chart-height-primary: 196px;
        --dashboard-chart-height-donut: 168px;
        --dashboard-chart-height-ranking: 168px;
    }
}

.master-data-toolbar-form {
    width: 100%;
}

.master-data-table-wrap {
    margin-top: 8px;
}

.master-data-table {
    table-layout: fixed;
}

.master-data-table th:nth-child(1),
.master-data-table td:nth-child(1) {
    width: 32%;
}

.master-data-table th:nth-child(2),
.master-data-table td:nth-child(2) {
    width: 24%;
}

.master-data-table th:nth-child(3),
.master-data-table td:nth-child(3) {
    width: 14%;
}

.master-data-table th:nth-child(4),
.master-data-table td:nth-child(4) {
    width: 20%;
}

.master-data-table th:nth-child(5),
.master-data-table td:nth-child(5) {
    width: 10%;
}

.master-data-row td {
    vertical-align: middle;
    white-space: normal;
}

.master-data-primary-cell,
.master-data-icon-stack {
    display: grid;
    gap: 6px;
}

.master-data-primary-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--portal-text);
    line-height: 1.35;
}

.master-data-primary-meta,
.master-data-inline-meta,
.master-data-color-line,
.master-data-confirm-copy {
    color: var(--portal-text-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

.master-data-inline-meta,
.master-data-color-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.master-data-icon-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #edf3ff;
    border: 1px solid #d9e5ff;
    color: var(--portal-primary-dark);
    font-size: 0.74rem;
    font-weight: 700;
}

.master-data-icon-picker {
    display: grid;
    gap: 10px;
}

.master-data-icon-preview {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--portal-border);
    background: rgba(248, 251, 255, 0.92);
}

.master-data-icon-preview-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #edf3ff;
    border: 1px solid #d9e5ff;
    font-size: 1.05rem;
}

.master-data-icon-preview-text {
    color: var(--portal-text-soft);
    font-size: 0.84rem;
    line-height: 1.4;
}

.master-data-color-swatch {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(23, 35, 58, 0.08);
    flex: 0 0 12px;
}

.master-data-empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 36px 24px 32px;
    text-align: center;
}

.master-data-empty-state h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--portal-text);
}

.master-data-empty-state p {
    max-width: 520px;
    margin: 0;
    color: var(--portal-text-soft);
    line-height: 1.6;
}

.master-data-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.12), rgba(47, 109, 246, 0.04));
    color: var(--portal-primary-dark);
    font-size: 1.4rem;
}

.master-data-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.master-data-form-span-2 {
    grid-column: span 2;
}

.master-data-switch {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--portal-border);
}

.master-data-switch .form-check-input {
    width: 2.75rem;
    height: 1.5rem;
}

.master-data-confirm-copy strong {
    color: var(--portal-text);
}

.settings-page-toolbar {
    margin-top: 4px;
}

.settings-results-meta {
    color: var(--portal-text-soft);
    font-size: 0.94rem;
}

.settings-table-wrap {
    margin-top: 8px;
}

.settings-empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 36px 24px 32px;
    text-align: center;
}

.settings-empty-state h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--portal-text);
}

.settings-empty-state p {
    max-width: 560px;
    margin: 0;
    color: var(--portal-text-soft);
    line-height: 1.6;
}

.settings-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.12), rgba(47, 109, 246, 0.04));
    color: var(--portal-primary-dark);
    font-size: 1.4rem;
}

.settings-record-main,
.settings-record-meta,
.settings-status-stack,
.settings-context-stack {
    display: grid;
    gap: 6px;
}

.settings-record-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--portal-text);
    line-height: 1.35;
}

.settings-record-subtitle,
.settings-record-note,
.settings-inline-meta,
.settings-detail-value {
    color: var(--portal-text-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

.settings-detail-value {
    white-space: pre-wrap;
    word-break: break-word;
}

.settings-inline-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-status-stack {
    justify-items: start;
}

.settings-table .users-action-menu {
    margin-left: auto;
}

.settings-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-panel {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.05), rgba(47, 109, 246, 0.015));
    border: 1px solid rgba(47, 109, 246, 0.1);
}

.settings-panel-wide {
    grid-column: 1 / -1;
}

.settings-panel-label {
    margin-bottom: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--portal-text-soft);
}

.settings-modal-danger-copy {
    color: var(--portal-text-soft);
    line-height: 1.6;
}

.settings-org-grid {
    display: grid;
    gap: 14px;
}

.organizations-toolbar-card {
    border-radius: 24px;
}

.organizations-toolbar-header {
    align-items: center;
    gap: 20px;
}

.organizations-toolbar-body {
    padding-top: 18px;
}

.organizations-toolbar-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.3fr) minmax(0, 1fr);
    gap: 18px 22px;
    align-items: end;
}

.organizations-toolbar-filters {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) 120px;
    gap: 12px;
    align-items: end;
}

.organizations-toolbar-search,
.organizations-toolbar-filter,
.organizations-toolbar-reset {
    min-width: 0;
}

.organizations-results-meta {
    margin-top: 14px;
}

.organizations-table th:nth-child(1),
.organizations-table td:nth-child(1) {
    width: 24%;
}

.organizations-table th:nth-child(2),
.organizations-table td:nth-child(2),
.organizations-table th:nth-child(3),
.organizations-table td:nth-child(3) {
    width: 14%;
}

.organizations-table th:nth-child(4),
.organizations-table td:nth-child(4) {
    width: 26%;
}

.organizations-table th:nth-child(5),
.organizations-table td:nth-child(5) {
    width: 14%;
}

.organizations-table th:nth-child(6),
.organizations-table td:nth-child(6) {
    width: 8%;
}

.organizations-workflow-summary {
    display: grid;
    gap: 8px;
}

.organizations-workflow-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-modal-section {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.settings-modal-section:last-child {
    margin-bottom: 0;
}

.organization-workflow-section {
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.055), rgba(47, 109, 246, 0.02));
}

.organization-workflow-copy h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--portal-text);
}

.organization-workflow-copy p {
    margin: 6px 0 0;
    color: var(--portal-text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.organization-workflow-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.organization-workflow-mode-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(47, 109, 246, 0.12);
    background: rgba(255, 255, 255, 0.94);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.organization-workflow-mode-card:hover {
    border-color: rgba(47, 109, 246, 0.28);
    box-shadow: 0 12px 24px rgba(18, 33, 58, 0.08);
    transform: translateY(-1px);
}

.organization-workflow-mode-card.is-active {
    border-color: rgba(47, 109, 246, 0.42);
    box-shadow: 0 14px 28px rgba(18, 33, 58, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.96));
}

.organization-workflow-mode-card input[type="radio"] {
    margin: 0;
}

.organization-workflow-mode-card-title {
    color: var(--portal-text);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.3;
}

.organization-workflow-mode-card-text {
    color: var(--portal-text-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

.organization-workflow-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.organization-workflow-field-group {
    min-width: 0;
}

.organization-workflow-field-group .input-group-text {
    min-width: 54px;
    justify-content: center;
    border-radius: 14px 0 0 14px;
    border-color: #dbe5f2;
    background: #f7f9fc;
    color: #53647f;
    font-weight: 700;
}

.organization-workflow-field-group .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.settings-audit-table th:nth-child(1),
.settings-audit-table td:nth-child(1) {
    width: 30%;
}

.settings-audit-table th:nth-child(2),
.settings-audit-table td:nth-child(2) {
    width: 22%;
}

.settings-audit-table th:nth-child(3),
.settings-audit-table td:nth-child(3) {
    width: 18%;
}

.settings-audit-table th:nth-child(4),
.settings-audit-table td:nth-child(4) {
    width: 18%;
}

.settings-audit-table th:nth-child(5),
.settings-audit-table td:nth-child(5) {
    width: 12%;
}

@media (max-width: 991.98px) {
    .trips-management-table {
        table-layout: auto;
    }

    .trips-management-table th:nth-child(1),
    .trips-management-table td:nth-child(1),
    .trips-management-table th:nth-child(2),
    .trips-management-table td:nth-child(2),
    .trips-management-table th:nth-child(3),
    .trips-management-table td:nth-child(3) {
        width: auto;
    }

    .trip-row-summary {
        justify-items: start;
        text-align: left;
    }

    .trip-detail-grid {
        grid-template-columns: 1fr;
    }

    .master-data-table {
        table-layout: auto;
    }

    .master-data-table th:nth-child(1),
    .master-data-table td:nth-child(1),
    .master-data-table th:nth-child(2),
    .master-data-table td:nth-child(2),
    .master-data-table th:nth-child(3),
    .master-data-table td:nth-child(3),
    .master-data-table th:nth-child(4),
    .master-data-table td:nth-child(4),
    .master-data-table th:nth-child(5),
    .master-data-table td:nth-child(5) {
        width: auto;
    }

    .settings-audit-table th:nth-child(1),
    .settings-audit-table td:nth-child(1),
    .settings-audit-table th:nth-child(2),
    .settings-audit-table td:nth-child(2),
    .settings-audit-table th:nth-child(3),
    .settings-audit-table td:nth-child(3),
    .settings-audit-table th:nth-child(4),
    .settings-audit-table td:nth-child(4),
    .settings-audit-table th:nth-child(5),
    .settings-audit-table td:nth-child(5) {
        width: auto;
    }

    .organizations-toolbar-grid,
    .organizations-toolbar-filters,
    .organization-workflow-mode-grid,
    .organization-workflow-fields {
        grid-template-columns: 1fr;
    }

    .organizations-toolbar-header {
        align-items: flex-start;
    }

    .organizations-table th:nth-child(1),
    .organizations-table td:nth-child(1),
    .organizations-table th:nth-child(2),
    .organizations-table td:nth-child(2),
    .organizations-table th:nth-child(3),
    .organizations-table td:nth-child(3),
    .organizations-table th:nth-child(4),
    .organizations-table td:nth-child(4),
    .organizations-table th:nth-child(5),
    .organizations-table td:nth-child(5),
    .organizations-table th:nth-child(6),
    .organizations-table td:nth-child(6) {
        width: auto;
    }
}

.audit-log-details {
    min-width: 280px;
    white-space: normal !important;
    word-break: break-word;
}

.profile-shell-card,
.user-profile-card {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.user-profile-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
}

.user-profile-media,
.user-profile-panel,
.user-profile-field,
.profile-media-card,
.profile-content-card,
.profile-panel-card {
    border-radius: 22px;
}

.user-profile-photo-box {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fbff 0%, #edf3ff 100%);
    border: 1px solid var(--portal-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--portal-shadow-soft);
}

.user-profile-photo,
.user-profile-photo-fallback {
    width: 100%;
    height: 100%;
}

.user-profile-photo {
    object-fit: cover;
}

.user-profile-photo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
    color: var(--portal-primary-dark);
}

.user-profile-note,
.user-profile-panel,
.user-profile-field {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--portal-border);
    box-shadow: var(--portal-shadow-soft);
}

.user-profile-note,
.user-profile-panel {
    padding: 18px;
}

.user-profile-header {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--portal-border);
}

.user-profile-name {
    margin: 0 0 12px;
    font-size: clamp(1.8rem, 2.2vw, 2.4rem);
    line-height: 1.08;
    font-weight: 800;
}

.user-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.user-profile-role,
.user-profile-org {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--portal-border);
    font-weight: 700;
    background: #f7faff;
}

.user-profile-panels,
.user-profile-stack {
    display: grid;
    gap: 16px;
}

.user-profile-panels {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.user-profile-panel-title,
.profile-section-title {
    margin: 0 0 14px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #70819d;
}

.user-profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.user-profile-field {
    padding: 14px 16px;
}

.user-profile-label,
.user-profile-stat-label {
    margin-bottom: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7a8aa4;
}

.user-profile-value,
.user-profile-stat-value {
    font-size: 0.98rem;
    font-weight: 600;
    color: #17233a;
    word-break: break-word;
}

.user-profile-stat + .user-profile-stat {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--portal-border);
}

.portal-auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 18px;
}

.portal-auth-card {
    width: min(100%, 460px);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 25px 60px rgba(20, 35, 61, 0.12);
}

@media (max-width: 1199.98px) {
    .portal-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-filter-grid .portal-filter-span-4,
    .portal-filter-grid .portal-filter-span-3,
    .portal-filter-grid .portal-filter-span-2 {
        grid-column: span 6;
    }
}

@media (max-width: 991.98px) {
    .portal-sidebar {
        position: fixed;
        inset: 14px auto 14px 14px;
        min-height: auto;
        max-height: calc(100vh - 28px);
        transform: translateX(-110%);
        transition: transform 0.24s ease;
    }

    body.portal-sidebar-open .portal-sidebar {
        transform: translateX(0);
    }

    .portal-main {
        margin-left: 0;
        height: 100vh;
        padding: 14px;
    }

    .portal-topbar,
    .portal-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-topbar-right {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .user-profile-grid,
    .user-profile-panels,
    .portal-kpi-grid {
        grid-template-columns: 1fr;
    }

    .management-report-hero,
    .management-report-filter-form,
    .management-report-summary-grid,
    .management-report-section-grid,
    .management-report-kpi-grid,
    .management-report-meta-strip {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .management-report-filter-fields {
        grid-template-columns: 1fr;
    }

    .management-report-panel-wide {
        grid-column: span 1;
    }

    .portal-shell {
        height: 100vh;
        padding: 0;
    }

    .portal-content {
        padding: 4px 0 20px;
    }
}

@media (max-width: 767.98px) {
    .portal-filter-grid .portal-filter-span-6,
    .portal-filter-grid .portal-filter-span-4,
    .portal-filter-grid .portal-filter-span-3,
    .portal-filter-grid .portal-filter-span-2 {
        grid-column: span 12;
    }

    .portal-card-body,
    .portal-card-header {
        padding-left: 18px;
        padding-right: 18px;
    }

    .portal-user-org {
        max-width: 120px;
    }

    .user-profile-fields {
        grid-template-columns: 1fr;
    }

    .master-data-form-grid {
        grid-template-columns: 1fr;
    }

    .master-data-form-span-2 {
        grid-column: span 1;
    }

    .settings-panel-grid {
        grid-template-columns: 1fr;
    }

    .management-report-rank-head,
    .management-report-health-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .management-report-rank-value {
        text-align: left;
    }
}

@media print {
    .management-report-body .no-print,
    .management-report-body .portal-sidebar,
    .management-report-body .portal-topbar {
        display: none !important;
    }

    .management-report-body .portal-shell,
    .management-report-body .portal-main,
    .management-report-body .portal-content,
    .management-report-body .management-report-page {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    .management-report-body .portal-card,
    .management-report-body .management-report-meta-item {
        box-shadow: none !important;
        break-inside: avoid;
        background: #fff !important;
    }

    .management-report-body .management-report-hero {
        margin-bottom: 16px;
    }
}

.budget-page {
    display: grid;
    gap: 24px;
}

.budget-page-header {
    padding-bottom: 0;
}

.budget-top-stack {
    display: grid;
    gap: 16px;
}

.budget-context-bar,
.budget-toolbar-card {
    border-radius: 24px;
}

.budget-context-bar .portal-card-body,
.budget-toolbar-card .portal-card-body {
    padding: 20px 24px;
}

.budget-context-eyebrow {
    margin-bottom: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7e99;
}

.budget-context-bar {
    background: linear-gradient(180deg, rgba(249, 251, 255, 0.98), rgba(255, 255, 255, 0.96));
}

.budget-context-bar-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.budget-context-bar-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--portal-text);
}

.budget-context-bar-copy {
    max-width: 520px;
    color: var(--portal-text-soft);
    line-height: 1.55;
    text-align: right;
}

.budget-toolbar-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.96));
}

.budget-toolbar-head {
    margin-bottom: 18px;
}

.budget-toolbar-copy h2 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--portal-text);
}

.budget-toolbar-copy p {
    margin: 8px 0 0;
    color: var(--portal-text-soft);
    line-height: 1.55;
}

.budget-toolbar-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
}

.budget-toolbar-fields {
    display: grid;
    grid-template-columns: minmax(280px, 1.45fr) minmax(180px, 0.7fr);
    gap: 14px 16px;
    align-items: end;
}

.budget-toolbar-field {
    min-width: 0;
}

.budget-toolbar-field .form-label {
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.budget-toolbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.budget-toolbar-actions .btn {
    min-width: 156px;
}

.budget-overview-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.budget-overview-item {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(226, 234, 245, 0.9);
    border-radius: 18px;
    padding: 16px 18px 15px;
    display: grid;
    gap: 4px;
}

.budget-overview-label,
.budget-kpi-label,
.budget-alert-title,
.budget-side-label,
.budget-notes-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--portal-text-soft);
    font-weight: 700;
}

.budget-overview-value,
.budget-side-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--portal-text);
}

.budget-kpi-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.budget-kpi-card {
    border-radius: 22px;
    min-height: 148px;
}

.budget-kpi-card .portal-card-body {
    display: grid;
    gap: 10px;
    height: 100%;
    padding: 22px 22px 20px;
}

.budget-kpi-card-lead {
    grid-column: span 6;
}

.budget-kpi-card-compact {
    grid-column: span 4;
}

.budget-kpi-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--portal-text);
    line-height: 1.1;
}

.budget-kpi-meta,
.budget-alert-text,
.budget-config-copy p,
.budget-category-title,
.budget-lead-caption,
.budget-notes-box p {
    color: var(--portal-text-soft);
    line-height: 1.55;
}

.budget-kpi-primary {
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.08), rgba(47, 109, 246, 0.03));
    border-color: rgba(47, 109, 246, 0.16);
}

.budget-kpi-warning {
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.12), rgba(255, 193, 7, 0.03));
    border-color: rgba(255, 193, 7, 0.18);
}

.budget-kpi-danger {
    background: linear-gradient(180deg, rgba(220, 53, 69, 0.08), rgba(220, 53, 69, 0.03));
    border-color: rgba(220, 53, 69, 0.16);
}

.budget-kpi-healthy {
    background: linear-gradient(180deg, rgba(25, 135, 84, 0.08), rgba(25, 135, 84, 0.03));
    border-color: rgba(25, 135, 84, 0.16);
}

.budget-kpi-neutral {
    background: linear-gradient(180deg, rgba(122, 140, 168, 0.08), rgba(122, 140, 168, 0.03));
    border-color: rgba(122, 140, 168, 0.16);
}

.budget-alert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.budget-alert-card {
    border-radius: 20px;
    border-width: 1px;
}

.budget-alert-card .portal-card-body {
    padding: 18px 20px;
    display: grid;
    gap: 10px;
}

.budget-alert-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.budget-alert-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(23, 35, 58, 0.08);
    color: #51627e;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.budget-alert-warning {
    border-color: rgba(255, 193, 7, 0.28);
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.1), rgba(255, 255, 255, 0.98));
}

.budget-alert-danger {
    border-color: rgba(220, 53, 69, 0.26);
    background: linear-gradient(180deg, rgba(220, 53, 69, 0.08), rgba(255, 255, 255, 0.98));
}

.budget-alert-neutral {
    border-color: rgba(47, 109, 246, 0.18);
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.06), rgba(255, 255, 255, 0.98));
}

.budget-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(340px, 0.98fr);
    gap: 22px;
    align-items: stretch;
}

.budget-lead-card,
.budget-side-card,
.budget-category-card {
    border-radius: 24px;
}

.budget-lead-card,
.budget-side-card {
    overflow: hidden;
}

.budget-lead-card .portal-card-header,
.budget-side-card .portal-card-header {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(23, 35, 58, 0.08);
}

.budget-lead-card .portal-card-header h2,
.budget-side-card .portal-card-header h2 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 800;
}

.budget-lead-card .portal-card-header p,
.budget-side-card .portal-card-header p {
    margin: 8px 0 0;
    color: var(--portal-text-soft);
    line-height: 1.55;
}

.budget-lead-body {
    display: grid;
    gap: 20px;
    padding: 24px 24px 22px;
}

.budget-lead-headline {
    font-size: 2.15rem;
    font-weight: 800;
    color: var(--portal-text);
    line-height: 1;
}

.budget-progress-track,
.budget-category-bar {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: #edf2f9;
    overflow: hidden;
}

.budget-category-bar {
    margin-top: 12px;
    height: 8px;
}

.budget-lead-status-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.budget-lead-status-item,
.budget-lead-metric-card {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(226, 234, 245, 0.92);
    background: rgba(248, 251, 255, 0.82);
}

.budget-progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.budget-progress-healthy {
    background: linear-gradient(90deg, #1f9d68, #2eb67d);
}

.budget-progress-warning {
    background: linear-gradient(90deg, #e0a800, #ffc107);
}

.budget-progress-danger {
    background: linear-gradient(90deg, #c63d4e, #dc3545);
}

.budget-progress-neutral {
    background: linear-gradient(90deg, #7a8ca8, #9aabc4);
}

.budget-lead-meta-grid,
.budget-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.budget-notes-box {
    padding: 16px 18px;
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    background: #f9fbff;
}

.budget-notes-box p {
    margin: 8px 0 0;
}

.budget-side-list {
    display: grid;
    gap: 14px;
    padding: 24px 24px 24px;
    align-content: start;
}

.budget-side-spotlight {
    display: grid;
    gap: 8px;
    padding: 18px 18px 17px;
    border-radius: 20px;
    border: 1px solid rgba(226, 234, 245, 0.9);
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(243, 248, 255, 0.92));
}

.budget-side-spotlight-label {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #71829d;
}

.budget-side-spotlight-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--portal-text);
    line-height: 1.2;
}

.budget-side-spotlight-text {
    color: var(--portal-text-soft);
    line-height: 1.55;
}

.budget-side-spotlight-danger {
    border-color: rgba(220, 53, 69, 0.2);
    background: linear-gradient(180deg, rgba(255, 244, 246, 0.98), rgba(255, 250, 251, 0.92));
}

.budget-side-spotlight-warning {
    border-color: rgba(255, 193, 7, 0.22);
    background: linear-gradient(180deg, rgba(255, 250, 236, 0.98), rgba(255, 253, 247, 0.92));
}

.budget-side-spotlight-healthy {
    border-color: rgba(25, 135, 84, 0.18);
    background: linear-gradient(180deg, rgba(242, 251, 246, 0.98), rgba(248, 253, 250, 0.92));
}

.budget-side-item {
    display: grid;
    gap: 5px;
    padding: 15px 16px 14px;
    border: 1px solid rgba(23, 35, 58, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.96), rgba(244, 248, 253, 0.92));
}

.budget-side-item:last-child {
    margin-bottom: 0;
}

.budget-category-table th:nth-child(1),
.budget-category-table td:nth-child(1) {
    width: 24%;
}

.budget-category-card .portal-card-header {
    padding-bottom: 16px;
}

.budget-category-body {
    padding: 2px 0 6px;
}

.budget-category-table th,
.budget-category-table td {
    vertical-align: middle;
}

.budget-category-table td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.budget-category-table td:last-child,
.budget-category-table th:last-child {
    text-align: left;
}

.budget-category-title {
    font-weight: 700;
    color: var(--portal-text);
}

.budget-category-table thead th {
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #74839d;
    background: rgba(248, 251, 255, 0.92);
}

.budget-category-table tbody tr:hover {
    background: rgba(248, 251, 255, 0.68);
}

.budget-config-copy h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--portal-text);
}

.budget-config-copy p {
    margin: 6px 0 0;
}

.budget-config-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.budget-config-category-card {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    background: #fbfdff;
}

.budget-config-category-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: baseline;
}

.budget-config-category-name {
    font-weight: 700;
    color: var(--portal-text);
}

.budget-config-category-meta {
    color: var(--portal-text-soft);
    font-size: 0.84rem;
}

.notifications-page {
    display: grid;
    gap: 22px;
}

.notifications-top-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(220px, 0.75fr) minmax(320px, 1.2fr);
    gap: 16px;
    align-items: stretch;
}

.notifications-summary-card,
.notifications-filter-card,
.notifications-list-card {
    border-radius: 22px;
}

.notifications-summary-card .portal-card-body,
.notifications-filter-card .portal-card-body {
    padding: 22px;
}

.notifications-summary-card-soft {
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.notifications-summary-label,
.notifications-item-type,
.notifications-item-date {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--portal-text-soft);
}

.notifications-summary-value {
    margin-top: 10px;
    font-size: 2rem;
    font-weight: 800;
    color: var(--portal-text);
    line-height: 1;
}

.notifications-summary-meta {
    margin-top: 10px;
    color: var(--portal-text-soft);
    line-height: 1.55;
}

.notifications-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.notifications-filter-actions {
    display: flex;
    align-items: end;
}

.notifications-list {
    display: grid;
    gap: 14px;
}

.notifications-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid var(--portal-border);
    background: rgba(255, 255, 255, 0.98);
}

.notifications-item.is-unread {
    border-color: rgba(47, 109, 246, 0.18);
    background: linear-gradient(180deg, rgba(47, 109, 246, 0.045), rgba(255, 255, 255, 0.98));
}

.notifications-item-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(47, 109, 246, 0.08);
    color: var(--portal-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.notifications-item-body {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.notifications-item-topline,
.notifications-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.notifications-item-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--portal-text);
}

.notifications-item-text {
    margin: 0;
    color: var(--portal-text-soft);
    line-height: 1.6;
}

.notifications-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.notifications-item-actions form {
    margin: 0;
}

@media (max-width: 991.98px) {
    .budget-overview-strip,
    .budget-kpi-grid,
    .budget-main-grid,
    .budget-lead-status-row,
    .budget-lead-meta-grid,
    .budget-config-grid,
    .budget-config-category-grid {
        grid-template-columns: 1fr;
    }

    .budget-context-bar-head,
    .budget-toolbar-form,
    .budget-toolbar-fields {
        grid-template-columns: 1fr;
    }

    .budget-context-bar-head {
        display: grid;
    }

    .budget-context-bar-copy {
        max-width: none;
        text-align: left;
    }

    .budget-toolbar-actions {
        width: 100%;
        justify-content: stretch;
    }

    .budget-toolbar-actions .btn {
        flex: 1 1 auto;
    }

    .notifications-top-grid,
    .notifications-filter-form,
    .notifications-item {
        grid-template-columns: 1fr;
    }

    .notifications-item-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .budget-kpi-card-lead,
    .budget-kpi-card-compact {
        grid-column: span 1;
    }
}