/*
 * Faulu Collections design system
 * Brand colours are derived from the existing Faulu identity. Darker tones are
 * used for text and controls so the interface meets enterprise contrast needs.
 */
:root {
    --faulu-lavender: #bb99c5;
    --faulu-peach: #fcca91;
    --faulu-mint: #9ad6ca;
    --faulu-grey: #beccd0;
    --faulu-offwhite: #f5f4f4;

    --faulu-purple-950: #321638;
    --faulu-purple-900: #45204d;
    --faulu-purple-800: #62356b;
    --faulu-purple-700: #74447d;
    --faulu-purple-600: #8a5a93;
    --faulu-purple-200: #dcc9e1;
    --faulu-purple-100: #eee4f0;
    --faulu-purple-50: #f8f3f9;

    --faulu-teal-800: #00665f;
    --faulu-teal-700: #007c73;
    --faulu-teal-100: #d9f2ed;
    --faulu-peach-100: #fff0db;
    --faulu-peach-700: #9b510d;

    --ink-950: #101828;
    --ink-900: #17212b;
    --ink-700: #344054;
    --ink-600: #475467;
    --ink-500: #667085;
    --ink-400: #98a2b3;
    --line-strong: #c5ced8;
    --line: #dce2e8;
    --line-soft: #e9edf1;
    --canvas: #f5f7f9;
    --surface: #ffffff;
    --surface-muted: #f8fafb;

    --success-700: #18794e;
    --success-100: #dff3e9;
    --warning-800: #8f4707;
    --warning-100: #fff0d5;
    --danger-700: #b42318;
    --danger-100: #fee4e2;
    --info-700: #175cd3;
    --info-100: #eaf2ff;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 2px 8px rgba(16, 24, 40, .06);
    --shadow-md: 0 10px 28px rgba(16, 24, 40, .09);
    --focus-ring: 0 0 0 3px rgba(116, 68, 125, .24);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --sidebar-width: 272px;
    --topbar-height: 72px;

    --bs-primary: var(--faulu-purple-800);
    --bs-secondary: var(--ink-600);
    --bs-success: var(--success-700);
    --bs-danger: var(--danger-700);
    --bs-warning: var(--warning-800);
    --bs-info: var(--info-700);
    --bs-body-color: var(--ink-900);
    --bs-body-bg: var(--canvas);
    --bs-link-color: var(--faulu-purple-800);
    --bs-link-hover-color: var(--faulu-purple-950);
}

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

html {
    min-height: 100%;
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink-900);
    background: var(--canvas);
    font-family: Inter, Aptos, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .9375rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: var(--faulu-purple-800);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--faulu-purple-950);
}

img,
svg {
    max-width: 100%;
}

::selection {
    color: var(--faulu-purple-950);
    background: var(--faulu-purple-200);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(116, 68, 125, .34);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    z-index: 3000;
    top: 12px;
    left: 12px;
    padding: .65rem 1rem;
    color: #fff;
    background: var(--faulu-purple-950);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transform: translateY(-160%);
    transition: transform .16s ease;
}

.skip-link:focus {
    color: #fff;
    transform: translateY(0);
}

.app-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Bootstrap component alignment */
.btn {
    min-height: 40px;
    padding: .5rem .9rem;
    border-radius: var(--radius-md);
    font-weight: 650;
    letter-spacing: -.005em;
    box-shadow: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-sm {
    min-height: 34px;
    padding: .34rem .68rem;
    border-radius: 8px;
    font-size: .8125rem;
}

.btn-lg {
    min-height: 48px;
    padding: .72rem 1.15rem;
}

.btn-primary {
    color: #fff;
    background: var(--faulu-purple-800);
    border-color: var(--faulu-purple-800);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #fff;
    background: var(--faulu-purple-950);
    border-color: var(--faulu-purple-950);
}

.btn-outline-primary {
    color: var(--faulu-purple-800);
    border-color: var(--faulu-purple-600);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff;
    background: var(--faulu-purple-800);
    border-color: var(--faulu-purple-800);
}

.btn-secondary {
    color: #fff;
    background: var(--ink-600);
    border-color: var(--ink-600);
}

.btn-outline-secondary {
    color: var(--ink-700);
    background: #fff;
    border-color: var(--line-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: var(--ink-950);
    background: var(--surface-muted);
    border-color: var(--ink-500);
}

.btn-success {
    color: #fff;
    background: var(--success-700);
    border-color: var(--success-700);
}

.btn-danger {
    color: #fff;
    background: var(--danger-700);
    border-color: var(--danger-700);
}

.btn-warning {
    color: #fff;
    background: var(--warning-800);
    border-color: var(--warning-800);
}

.btn-info {
    color: #fff;
    background: var(--info-700);
    border-color: var(--info-700);
}

.btn:focus,
.btn-check:focus + .btn,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: var(--focus-ring);
}

.btn:disabled,
.btn.disabled {
    opacity: .56;
    cursor: not-allowed;
}

.form-label {
    margin-bottom: .4rem;
    color: var(--ink-700);
    font-size: .875rem;
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 42px;
    color: var(--ink-900);
    background-color: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--ink-400);
}

.form-control:focus,
.form-select:focus {
    color: var(--ink-900);
    background-color: #fff;
    border-color: var(--faulu-purple-700);
}

.form-control::placeholder {
    color: var(--ink-400);
    opacity: 1;
}

.form-control-sm,
.form-select-sm {
    min-height: 36px;
    border-radius: 8px;
}

textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.form-check-input:checked {
    background-color: var(--faulu-purple-800);
    border-color: var(--faulu-purple-800);
}

.form-text,
.text-muted {
    color: var(--ink-500) !important;
}

.input-validation-error,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger-700);
    background-image: none;
}

.field-validation-error,
.validation-summary-errors {
    display: block;
    margin-top: .35rem;
    color: var(--danger-700);
    font-size: .8125rem;
    font-weight: 600;
}

.field-validation-valid,
.validation-summary-valid {
    display: none;
}

.card {
    color: var(--ink-900);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card.shadow,
.card.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.card-header {
    min-height: 52px;
    padding: .8rem 1rem;
    color: var(--ink-900);
    background: var(--surface);
    border-bottom: 1px solid var(--line-soft);
}

.card-body {
    padding: 1rem;
}

.table-responsive {
    width: 100%;
    border-radius: var(--radius-md);
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
}

.table {
    width: 100%;
    margin-bottom: 0;
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: .72rem .75rem;
    border-bottom-color: var(--line-soft);
}

.table thead th {
    color: var(--ink-600);
    background: var(--surface-muted);
    border-bottom: 1px solid var(--line);
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .035em;
    line-height: 1.25;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody tr {
    transition: background-color .12s ease;
}

.table-hover > tbody > tr:hover > * {
    color: inherit;
    background: var(--faulu-purple-50);
    --bs-table-accent-bg: var(--faulu-purple-50);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: inherit;
    background: rgba(248, 250, 251, .78);
    --bs-table-accent-bg: rgba(248, 250, 251, .78);
}

.table-bordered,
.table-bordered > :not(caption) > * {
    border-color: var(--line);
}

.badge {
    padding: .34rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.alert {
    color: var(--ink-900);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.alert-success {
    color: #125c3b;
    background: var(--success-100);
    border-color: #a9dec3;
}

.alert-danger {
    color: #8f1b13;
    background: var(--danger-100);
    border-color: #f8b4af;
}

.alert-warning {
    color: #754005;
    background: var(--warning-100);
    border-color: #f4d499;
}

.alert-info {
    color: #174a96;
    background: var(--info-100);
    border-color: #b9d2fa;
}

.dropdown-menu {
    padding: .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.dropdown-item {
    border-radius: 7px;
}

.dropdown-item:active,
.dropdown-item.active {
    color: #fff;
    background: var(--faulu-purple-800);
}

.pagination .page-link {
    color: var(--faulu-purple-800);
    border-color: var(--line);
}

.pagination .page-item.active .page-link {
    color: #fff;
    background: var(--faulu-purple-800);
    border-color: var(--faulu-purple-800);
}

.text-primary { color: var(--faulu-purple-800) !important; }
.text-success { color: var(--success-700) !important; }
.text-danger { color: var(--danger-700) !important; }
.text-info { color: var(--info-700) !important; }
.bg-primary { background-color: var(--faulu-purple-800) !important; }
.bg-success { background-color: var(--success-700) !important; }
.bg-danger { background-color: var(--danger-700) !important; }
.bg-info { background-color: var(--info-100) !important; }
.bg-purple { background-color: var(--faulu-purple-800) !important; }
.bg-body-tertiary { background-color: var(--surface-muted) !important; }
.bg-dark-subtle { background-color: #edf0f3 !important; }
.text-purple { color: var(--faulu-purple-800) !important; }

/* Application shell */
.app-body {
    overflow-x: hidden;
    background: var(--canvas);
}

.app-shell {
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    z-index: 1040;
    inset: 0 auto 0 0;
    display: flex;
    width: var(--sidebar-width);
    min-height: 100vh;
    flex-direction: column;
    color: var(--ink-700);
    background: var(--surface);
    border-right: 1px solid var(--line);
    box-shadow: 4px 0 18px rgba(16, 24, 40, .025);
}

.app-sidebar-header {
    display: flex;
    min-height: var(--topbar-height);
    align-items: center;
    justify-content: space-between;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--line-soft);
}

.app-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .7rem;
    color: var(--ink-900);
    text-decoration: none;
}

.app-brand:hover {
    color: var(--ink-900);
}

.app-brand img {
    display: block;
    width: 104px;
    height: auto;
}

.app-brand-product {
    padding-left: .7rem;
    color: var(--faulu-purple-800);
    border-left: 1px solid var(--line-strong);
    font-size: .83rem;
    font-weight: 750;
    letter-spacing: .025em;
}

.app-sidebar-close,
.app-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--ink-700);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
}

.app-sidebar-close:hover,
.app-menu-toggle:hover {
    color: var(--faulu-purple-800);
    background: var(--faulu-purple-50);
}

.app-sidebar-close svg,
.app-menu-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-navigation {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.05rem .8rem;
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
}

.app-nav-group + .app-nav-group {
    margin-top: 1.2rem;
}

.app-nav-heading {
    padding: 0 .75rem .35rem;
    color: var(--ink-500);
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.app-nav-list {
    display: grid;
    gap: .18rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.app-nav-link {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: .72rem;
    padding: .62rem .75rem;
    color: var(--ink-700);
    border-radius: var(--radius-md);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .14s ease, background-color .14s ease;
}

.app-nav-link:hover {
    color: var(--faulu-purple-950);
    background: var(--faulu-purple-50);
}

.app-nav-link.is-active {
    color: var(--faulu-purple-950);
    background: var(--faulu-purple-100);
    font-weight: 700;
}

.app-nav-link.is-active::before {
    position: absolute;
    inset: 9px auto 9px -1px;
    width: 3px;
    background: var(--faulu-purple-800);
    border-radius: 0 3px 3px 0;
    content: "";
}

.app-nav-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-nav-link.is-active .app-nav-icon {
    stroke-width: 2;
}

.app-sidebar-user {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
    background: var(--surface-muted);
    border-top: 1px solid var(--line-soft);
}

.app-avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    color: var(--faulu-purple-950);
    background: linear-gradient(145deg, var(--faulu-purple-100), var(--faulu-peach-100));
    border: 1px solid var(--faulu-purple-200);
    border-radius: 50%;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .035em;
}

.app-avatar-lg {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: .85rem;
}

.app-sidebar-user-copy {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.app-sidebar-user-copy strong,
.app-sidebar-user-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sidebar-user-copy strong {
    color: var(--ink-900);
    font-size: .82rem;
}

.app-sidebar-user-copy span {
    color: var(--ink-500);
    font-size: .7rem;
}

.app-sidebar-backdrop {
    position: fixed;
    z-index: 1035;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(16, 24, 40, .52);
    border: 0;
    opacity: 0;
    backdrop-filter: blur(2px);
}

.app-frame {
    display: flex;
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    flex-direction: column;
}

.app-topbar {
    position: sticky;
    z-index: 1020;
    top: 0;
    display: flex;
    min-height: var(--topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
    backdrop-filter: blur(12px);
}

.app-topbar-start,
.app-topbar-actions {
    display: flex;
    min-width: 0;
    align-items: center;
}

.app-topbar-start {
    gap: .75rem;
}

.app-topbar-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: .9rem;
}

.app-page-context {
    min-width: 0;
}

.app-breadcrumb {
    display: flex;
    align-items: center;
    gap: .16rem;
    color: var(--ink-500);
    font-size: .7rem;
    line-height: 1.2;
}

.app-breadcrumb a {
    color: var(--ink-500);
    text-decoration: none;
}

.app-breadcrumb a:hover {
    color: var(--faulu-purple-800);
    text-decoration: underline;
}

.app-breadcrumb svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.app-page-title {
    overflow: hidden;
    max-width: 360px;
    margin-top: .12rem;
    color: var(--ink-950);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -.015em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-global-search {
    position: relative;
    display: flex;
    width: min(100%, 390px);
    align-items: center;
}

.app-global-search > svg {
    position: absolute;
    z-index: 1;
    left: .8rem;
    width: 18px;
    height: 18px;
    color: var(--ink-500);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.app-global-search input {
    width: 100%;
    height: 40px;
    padding: .5rem 4.6rem .5rem 2.45rem;
    color: var(--ink-900);
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.app-global-search input:focus {
    background: #fff;
    border-color: var(--faulu-purple-700);
    box-shadow: var(--focus-ring);
}

.app-global-search input::placeholder {
    color: var(--ink-400);
}

.app-global-search button {
    position: absolute;
    right: .35rem;
    min-height: 30px;
    padding: .2rem .65rem;
    color: var(--faulu-purple-800);
    background: var(--faulu-purple-100);
    border: 0;
    border-radius: 7px;
    font-size: .72rem;
    font-weight: 750;
}

.app-global-search button:hover {
    color: #fff;
    background: var(--faulu-purple-800);
}

.app-profile-menu {
    position: relative;
    flex: 0 0 auto;
}

.app-profile-menu > summary {
    display: flex;
    min-width: 190px;
    min-height: 48px;
    align-items: center;
    gap: .6rem;
    padding: .28rem .45rem;
    color: var(--ink-900);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.app-profile-menu > summary::-webkit-details-marker {
    display: none;
}

.app-profile-menu > summary:hover,
.app-profile-menu[open] > summary {
    background: var(--surface-muted);
    border-color: var(--line-soft);
}

.app-profile-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.2;
}

.app-profile-copy strong,
.app-profile-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-profile-copy strong {
    font-size: .8rem;
}

.app-profile-copy small {
    margin-top: .13rem;
    color: var(--ink-500);
    font-size: .68rem;
}

.app-profile-chevron {
    width: 16px;
    height: 16px;
    color: var(--ink-500);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transform: rotate(90deg);
    transition: transform .15s ease;
}

.app-profile-menu[open] .app-profile-chevron {
    transform: rotate(-90deg);
}

.app-profile-popover {
    position: absolute;
    z-index: 1050;
    top: calc(100% + .55rem);
    right: 0;
    width: 290px;
    padding: .85rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.app-profile-popover-header {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line-soft);
}

.app-profile-popover-header > div:last-child {
    display: grid;
    min-width: 0;
}

.app-profile-popover-header strong {
    overflow: hidden;
    color: var(--ink-900);
    font-size: .88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-profile-popover-header span {
    color: var(--ink-500);
    font-size: .74rem;
}

.app-user-context {
    display: grid;
    gap: .45rem;
    padding: .75rem .15rem;
    margin: 0;
}

.app-user-context > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.app-user-context dt,
.app-user-context dd {
    margin: 0;
    font-size: .74rem;
}

.app-user-context dt {
    color: var(--ink-500);
    font-weight: 600;
}

.app-user-context dd {
    overflow: hidden;
    color: var(--ink-900);
    font-weight: 650;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-signout-button {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--danger-700);
    background: var(--danger-100);
    border: 1px solid #f8c2bd;
    border-radius: var(--radius-md);
    font-size: .8rem;
    font-weight: 700;
}

.app-signout-button:hover {
    color: #fff;
    background: var(--danger-700);
    border-color: var(--danger-700);
}

.app-signout-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-content {
    width: 100%;
    max-width: 1680px;
    min-height: calc(100vh - var(--topbar-height) - 52px);
    padding: 1.4rem 1.5rem 2rem;
    margin: 0 auto;
    outline: 0;
}

.app-content > .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.app-footer {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .75rem 1.5rem;
    color: var(--ink-500);
    background: transparent;
    border-top: 1px solid var(--line-soft);
    font-size: .72rem;
}

/* Reusable product surfaces */
.card-pro {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line-soft) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm) !important;
}

.card-accent-purple {
    border-top: 3px solid var(--faulu-purple-700) !important;
}

.card-accent-orange {
    border-top: 3px solid var(--faulu-peach-700) !important;
}

/* ================================================================
   Operational workspaces: manager, agent and administration
   ================================================================ */
.page-hero.bank-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.5rem, 2.6vw, 2.35rem);
    margin-bottom: 1.25rem;
    background:
        radial-gradient(circle at 92% 12%, rgba(252, 202, 145, .28), transparent 24%),
        linear-gradient(120deg, #fff 0%, var(--faulu-purple-50) 70%, #f5edef 100%);
    border: 1px solid var(--faulu-purple-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.page-hero.bank-hero::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--faulu-purple-800), var(--faulu-teal-700));
    content: "";
}

.page-hero .eyebrow,
.panel-heading .eyebrow,
.priority-copy .eyebrow,
.eyebrow,
.page-kicker,
.bank-eyebrow {
    display: block;
    margin-bottom: .42rem;
    color: var(--faulu-purple-700);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.3;
    text-transform: uppercase;
}

.page-hero h1 {
    margin: 0;
    color: var(--ink-950);
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 760;
    letter-spacing: -.045em;
    line-height: 1.05;
}

.page-hero p {
    max-width: 760px;
    margin: .7rem 0 0;
    color: var(--ink-600);
    font-size: .96rem;
}

.hero-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
}

.as-of-chip {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: .45rem .78rem;
    color: var(--ink-600);
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.app-content > .metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 142px;
    align-items: flex-start;
    gap: .9rem;
    overflow: hidden;
    padding: 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.metric-card::after {
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: var(--line-strong);
    content: "";
}

.metric-card--primary::after { background: var(--faulu-purple-700); }
.metric-card--success::after { background: var(--success-700); }
.metric-card--warning::after,
.metric-card--accent::after { background: var(--faulu-peach-700); }
.metric-card--danger::after { background: var(--danger-700); }
.metric-card--info::after { background: var(--faulu-teal-700); }

.metric-card > div:last-child {
    display: grid;
    min-width: 0;
    gap: .18rem;
}

.metric-icon,
.metric-card__icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    color: var(--faulu-purple-800);
    background: var(--faulu-purple-100);
    border: 1px solid var(--faulu-purple-200);
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 800;
}

.metric-card--success .metric-icon,
.metric-card--success .metric-card__icon { color: var(--success-700); background: var(--success-100); border-color: #b9dec9; }
.metric-card--warning .metric-icon,
.metric-card--accent .metric-card__icon { color: var(--warning-800); background: var(--warning-100); border-color: #efd39f; }
.metric-card--danger .metric-icon { color: var(--danger-700); background: var(--danger-100); border-color: #f7b9b3; }
.metric-card--info .metric-card__icon { color: var(--faulu-teal-800); background: var(--faulu-teal-100); border-color: #b6ded7; }

.metric-label {
    color: var(--ink-500);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .045em;
    line-height: 1.35;
    text-transform: uppercase;
}

.metric-value {
    display: block;
    overflow: hidden;
    margin-top: .22rem;
    color: var(--ink-950);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 780;
    letter-spacing: -.035em;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-value__unit {
    color: var(--ink-500);
    font-size: .86rem;
    font-weight: 700;
}

.metric-meta,
.metric-context {
    display: block;
    margin-top: .25rem;
    color: var(--ink-500);
    font-size: .74rem;
    line-height: 1.4;
}

.exception-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin: 0 0 1.25rem;
}

.exception-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 126px;
    align-content: start;
    gap: .22rem;
    padding: 1rem 1.05rem;
    color: var(--ink-900);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

a.exception-card:hover {
    color: var(--ink-950);
    border-color: var(--faulu-purple-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.exception-card--danger { border-left-color: var(--danger-700); }
.exception-card--warning { border-left-color: var(--warning-800); }
.exception-card--primary { border-left-color: var(--faulu-purple-700); }
.exception-card--success { border-left-color: var(--success-700); }

.exception-label {
    color: var(--ink-500);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.exception-card > strong {
    color: var(--ink-950);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
}

.exception-card > span:last-child {
    color: var(--ink-600);
    font-size: .75rem;
    line-height: 1.4;
}

.dashboard-grid {
    display: grid;
    gap: 1rem;
}

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

.bank-panel {
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.panel-heading,
.bank-panel__header,
.page-panel__header {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(180deg, #fff, var(--surface-muted));
    border-bottom: 1px solid var(--line-soft);
}

.panel-heading--stack {
    align-items: flex-end;
}

.panel-heading h2,
.page-panel__title,
.page-section__title {
    margin: 0;
    color: var(--ink-950);
    font-size: 1.05rem;
    font-weight: 760;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.panel-heading p {
    margin: .25rem 0 0;
    color: var(--ink-500);
    font-size: .76rem;
}

.bank-table-wrap {
    border-radius: 0;
}

.bank-table > thead > tr > th {
    padding: .72rem 1rem;
}

.bank-table > tbody > tr > td {
    padding: .82rem 1rem;
    font-size: .81rem;
}

.money-cell,
.insight-value,
.queue-measure {
    font-variant-numeric: tabular-nums;
}

.customer-cell,
.queue-row > div:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: .12rem;
}

.customer-cell strong,
.table-primary-text,
.next-action-text {
    color: var(--ink-900);
    font-size: .82rem;
    font-weight: 700;
}

.customer-cell span,
.queue-row span,
.queue-measure span {
    color: var(--ink-500);
    font-size: .7rem;
}

.status-badge,
.priority-pill,
.bank-badge,
.bank-status {
    display: inline-flex;
    align-items: center;
    gap: .34rem;
    padding: .28rem .56rem;
    color: var(--ink-700);
    background: #edf0f3;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}

.status-badge--high,
.status-badge--loss,
.status-badge--broken,
.priority-pill--danger { color: var(--danger-700); background: var(--danger-100); border-color: #f6bab5; }
.status-badge--medium,
.status-badge--watch,
.status-badge--pending,
.priority-pill--warning { color: var(--warning-800); background: var(--warning-100); border-color: #efd29b; }
.status-badge--low,
.status-badge--normal,
.status-badge--kept,
.priority-pill--success { color: var(--success-700); background: var(--success-100); border-color: #b8dfca; }
.status-badge--substandard,
.status-badge--doubtful,
.priority-pill--primary { color: var(--faulu-purple-800); background: var(--faulu-purple-100); border-color: var(--faulu-purple-200); }

.queue-list,
.insight-list {
    display: grid;
}

.queue-row,
.insight-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    min-height: 64px;
    padding: .72rem 1rem;
    border-bottom: 1px solid var(--line-soft);
}

.queue-row:last-child,
.insight-row:last-child {
    border-bottom: 0;
}

.queue-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: var(--faulu-purple-800);
    background: var(--faulu-purple-100);
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 800;
}

.queue-measure {
    display: grid;
    gap: .08rem;
    text-align: right;
}

.insight-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.insight-row > div {
    display: grid;
    gap: .12rem;
}

.insight-row strong { color: var(--ink-900); font-size: .8rem; }
.insight-row span { color: var(--ink-500); font-size: .72rem; }
.insight-value { color: var(--faulu-purple-800) !important; font-size: .9rem !important; font-weight: 800; }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.filter-bar .form-control,
.filter-bar .form-select {
    min-width: 150px;
    min-height: 38px;
    font-size: .78rem;
}

.filter-search {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-search > span {
    position: absolute;
    z-index: 1;
    left: .75rem;
    color: var(--ink-500);
}

.filter-search .form-control {
    min-width: 220px;
    padding-left: 2.15rem;
}

.panel-footer {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem;
    color: var(--ink-500);
    background: var(--surface-muted);
    border-top: 1px solid var(--line-soft);
    font-size: .7rem;
}

.priority-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.2rem;
    margin-bottom: 1rem;
    color: #fff;
    background: linear-gradient(112deg, var(--faulu-purple-950), var(--faulu-purple-800) 64%, #7d4b68);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 24px rgba(50, 22, 56, .18);
}

.priority-rank {
    color: var(--faulu-peach);
    font-size: 1.3rem;
    font-weight: 800;
}

.priority-copy .eyebrow { color: var(--faulu-peach); }
.priority-copy h2 { margin: 0; color: #fff; font-size: 1.15rem; }
.priority-copy p { margin: .2rem 0 0; color: rgba(255,255,255,.74); font-size: .76rem; }

.empty-state {
    display: grid;
    justify-items: center;
    padding: 2rem 1rem;
    color: var(--ink-500);
    text-align: center;
}

.empty-state.compact { padding: 1.2rem; }
.empty-state h3 { margin: .45rem 0 .15rem; color: var(--ink-900); font-size: .95rem; }
.empty-state p { margin: 0; font-size: .78rem; }
.empty-state-icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--success-700); background: var(--success-100); border-radius: 50%; }

.conduct-note {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem 1rem;
    margin-top: 1rem;
    color: var(--ink-600);
    background: #f0f7f5;
    border: 1px solid #cce4de;
    border-radius: var(--radius-md);
    font-size: .75rem;
}

.conduct-note strong { flex: 0 0 auto; color: var(--faulu-teal-800); }

/* Administration control centre */
.page-shell.bank-shell { display: grid; gap: 1rem; }

.bank-hero--admin {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.5rem, 2.8vw, 2.5rem);
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(252, 202, 145, .25), transparent 28%),
        linear-gradient(118deg, var(--faulu-purple-950), var(--faulu-purple-800));
    border-radius: var(--radius-xl);
    box-shadow: 0 14px 30px rgba(50, 22, 56, .2);
}

.bank-hero--admin .bank-eyebrow { color: var(--faulu-peach); }
.bank-hero__title { margin: 0; color: #fff; font-size: clamp(2rem, 3vw, 2.85rem); font-weight: 760; letter-spacing: -.045em; }
.bank-hero__subtitle { max-width: 680px; margin: .55rem 0 0; color: rgba(255,255,255,.8); }
.bank-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.1rem; color: rgba(255,255,255,.72); font-size: .72rem; }
.bank-hero__status { display: grid; justify-items: end; gap: .7rem; }
.bank-status { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.bank-status__dot { width: 7px; height: 7px; background: var(--faulu-mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(154,214,202,.14); }

.page-section { margin: 0; }
.page-section__heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: .75rem; }
.page-section__note { color: var(--ink-500); font-size: .72rem; }
.metric-grid.page-section .metric-card { display: block; min-height: 150px; }
.metric-grid.page-section .metric-card__icon { margin-bottom: .8rem; }

.action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    padding: 1rem;
}

.action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 82px;
    padding: .85rem;
    color: var(--ink-900);
    background: var(--surface-muted);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.action-card:hover { color: var(--ink-950); border-color: var(--faulu-purple-200); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.action-card--primary { background: var(--faulu-purple-50); border-color: var(--faulu-purple-200); }
.action-card__icon,
.bank-control-card__icon,
.bank-notice__icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--faulu-purple-800); background: var(--faulu-purple-100); border-radius: 9px; }
.action-card__body { display: grid; gap: .18rem; }
.action-card__body strong { font-size: .8rem; }
.action-card__body small { color: var(--ink-500); font-size: .7rem; line-height: 1.4; }
.action-card__arrow { color: var(--faulu-purple-700); }

.bank-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: 1rem; }
.bank-control-card { padding: 1rem; background: var(--surface-muted); border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.bank-control-card__header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .75rem; }
.bank-control-card h3 { margin: 0; color: var(--ink-900); font-size: .9rem; }
.bank-control-card > p { margin: .25rem 0 .8rem; color: var(--ink-500); font-size: .72rem; }
.bank-definition-list { display: grid; gap: .4rem; margin: 0; }
.bank-definition-list > div { display: flex; justify-content: space-between; gap: .8rem; padding-top: .4rem; border-top: 1px solid var(--line-soft); }
.bank-definition-list dt,
.bank-definition-list dd { margin: 0; font-size: .7rem; }
.bank-definition-list dt { color: var(--ink-500); font-weight: 600; }
.bank-definition-list dd { color: var(--ink-900); font-weight: 700; text-align: right; }

.bank-alert { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); }
.bank-alert--warning { color: var(--warning-800); background: var(--warning-100); border-color: #efd19a; }
.bank-alert > div { display: grid; gap: .12rem; }
.bank-alert span { font-size: .74rem; }
.bank-notice-list { display: grid; }
.bank-notice { display: flex; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line-soft); }
.bank-notice:last-child { border-bottom: 0; }
.bank-notice__icon { width: 34px; height: 34px; flex: 0 0 34px; }
.bank-notice__body h3 { margin: 0; color: var(--ink-900); font-size: .8rem; }
.bank-notice__body p { margin: .2rem 0 0; color: var(--ink-500); font-size: .7rem; line-height: 1.4; }
.bank-notice__action { display: inline-flex; gap: .3rem; margin-top: .45rem; font-size: .7rem; font-weight: 750; text-decoration: none; }
.bank-badge--success { color: var(--success-700); background: var(--success-100); border-color: #b9dec9; }
.bank-badge--warning { color: var(--warning-800); background: var(--warning-100); border-color: #efd39f; }
.bank-badge--neutral { color: var(--ink-600); background: #edf0f3; border-color: var(--line); }

/* Local, dependency-free fallbacks for the small Bootstrap icon set used by
   the control centre. This keeps the interface complete when the workstation
   cannot reach an external icon CDN. */
.admin-control-centre .bi::before {
    display: inline-block;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    content: "\25C7";
}

.admin-control-centre .bi-people::before,
.admin-control-centre .bi-person-badge::before,
.admin-control-centre .bi-person-check::before,
.admin-control-centre .bi-person-lock::before,
.admin-control-centre .bi-person-plus::before { content: "\25CE"; }
.admin-control-centre .bi-key::before,
.admin-control-centre .bi-shield-lock::before { content: "\2713"; }
.admin-control-centre .bi-arrow-right::before,
.admin-control-centre .bi-box-arrow-in-right::before { content: "\2192"; }
.admin-control-centre .bi-exclamation-triangle::before,
.admin-control-centre .bi-journal-x::before { content: "!"; }
.admin-control-centre .bi-clock::before,
.admin-control-centre .bi-clock-history::before { content: "\25F7"; }
.admin-control-centre .bi-play-circle::before { content: "\25B6"; }
.admin-control-centre .bi-journal-check::before { content: "\2713"; }

@media (max-width: 1399.98px) {
    .app-content > .metric-grid,
    .exception-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .page-hero.bank-hero,
    .bank-hero--admin { align-items: flex-start; flex-direction: column; }
    .hero-actions { justify-content: flex-start; }
    .dashboard-grid--two { grid-template-columns: 1fr; }
    .panel-heading--stack { align-items: flex-start; flex-direction: column; }
    .filter-bar { width: 100%; justify-content: flex-start; }
    .bank-hero__status { justify-items: start; }
}

@media (max-width: 767.98px) {
    .app-content > .metric-grid,
    .exception-grid,
    .action-grid,
    .bank-control-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 118px; }
    .priority-banner { grid-template-columns: auto minmax(0, 1fr); }
    .priority-banner .btn { grid-column: 1 / -1; }
    .conduct-note,
    .panel-footer { align-items: flex-start; flex-direction: column; }
    .filter-bar > *,
    .filter-bar .form-control,
    .filter-bar .form-select,
    .filter-search,
    .filter-search .form-control { width: 100%; min-width: 0; }
}

.card-header-pro {
    background: #fff !important;
    border-bottom: 1px solid var(--line-soft) !important;
}

.table-wrap-pro {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.section-title-pro {
    position: relative;
    padding-bottom: .45rem;
}

.section-title-pro::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 44px;
    height: 3px;
    background: var(--faulu-purple-700);
    border-radius: 4px;
    content: "";
}

.agent-strip {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .1rem .1rem .6rem;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
}

.agent-card-wrap {
    width: 330px;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Existing collections-strategy compatibility */
.cs-split-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.cs-left-rail {
    padding: 1.25rem;
    color: #fff;
    background: linear-gradient(180deg, var(--faulu-purple-900), var(--faulu-purple-950));
}

.cs-right-workspace {
    padding: 1.25rem;
    background: var(--surface-muted);
}

.cs-left-rail .cs-title {
    color: #fff;
    font-weight: 800;
}

.cs-left-rail .cs-subtitle,
.cs-left-rail .form-label,
.cs-left-rail .form-text {
    color: rgba(255, 255, 255, .74) !important;
}

.cs-rail-card {
    padding: 1rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-lg);
}

.cs-left-rail .form-control,
.cs-left-rail .form-select {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .28);
}

.cs-workspace-header,
.cs-rule-card {
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.cs-workspace-header {
    background: linear-gradient(90deg, var(--faulu-purple-50), #fff);
}

.cs-rule-card {
    box-shadow: var(--shadow-xs);
}

.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .26rem .62rem;
    color: var(--faulu-purple-800);
    background: var(--faulu-purple-100);
    border: 1px solid var(--faulu-purple-200);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}

/* Bootstrap 4-era utility compatibility while legacy screens are retired */
.text-gray-800 { color: var(--ink-900) !important; }
.text-xs { font-size: .72rem !important; }
.font-weight-bold { font-weight: 700 !important; }
.no-gutters { --bs-gutter-x: 0; }
.mr-2 { margin-right: .5rem !important; }
.form-inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.border-left-primary { border-left: 4px solid var(--faulu-purple-700) !important; }
.border-left-success { border-left: 4px solid var(--success-700) !important; }
.border-left-info { border-left: 4px solid var(--faulu-teal-700) !important; }
.border-left-warning { border-left: 4px solid var(--faulu-peach-700) !important; }

.app-content > .navbar.navbar-fixed-top,
.app-content > .container-fluid > .navbar:first-child {
    display: none !important;
}

.hero-actions--single .btn {
    min-width: 220px;
    justify-content: center;
}

/* Governed reporting workspace */
.reporting-shell {
    width: min(100%, 1500px);
    margin: 0 auto;
}

.reporting-hero,
.report-detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    color: #fff;
    background:
        radial-gradient(circle at 88% 10%, rgba(252, 202, 145, .28), transparent 24%),
        linear-gradient(118deg, var(--faulu-purple-950), var(--faulu-purple-800) 70%, #77506f);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.reporting-eyebrow {
    display: inline-block;
    color: var(--faulu-purple-700);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .095em;
    text-transform: uppercase;
}

.reporting-hero .reporting-eyebrow,
.report-detail-hero .reporting-eyebrow {
    color: var(--faulu-peach);
}

.reporting-hero h1,
.report-detail-hero h1 {
    margin: .35rem 0 .45rem;
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    font-weight: 760;
    letter-spacing: -.035em;
}

.reporting-hero p,
.report-detail-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .88rem;
}

.reporting-hero__meta {
    display: grid;
    min-width: 250px;
    gap: .12rem;
    padding: .9rem 1rem;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-md);
}

.reporting-hero__meta span,
.reporting-hero__meta small {
    color: rgba(255, 255, 255, .7);
    font-size: .68rem;
}

.reporting-hero__meta strong {
    font-size: .93rem;
}

.report-governance-note {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem 1rem;
    margin-top: 1rem;
    color: var(--info-700);
    background: var(--info-100);
    border: 1px solid #bed3f8;
    border-radius: var(--radius-md);
}

.report-governance-note__mark {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    place-items: center;
    color: #fff;
    background: var(--info-700);
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 800;
}

.report-governance-note strong {
    display: block;
    color: #174b9c;
    font-size: .77rem;
}

.report-governance-note p {
    margin: .14rem 0 0;
    font-size: .72rem;
}

.report-catalogue-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin: 1rem 0;
}

.report-catalogue-summary > div {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.report-catalogue-summary strong {
    color: var(--faulu-purple-800);
    font-size: 1.25rem;
}

.report-catalogue-summary span {
    color: var(--ink-500);
    font-size: .72rem;
    font-weight: 650;
}

.report-catalogue-card,
.report-data-card,
.report-method-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.report-catalogue-card__heading,
.report-data-card__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--line-soft);
}

.report-catalogue-card__heading h2,
.report-data-card__heading h2,
.report-method-card h2 {
    margin: .14rem 0 0;
    color: var(--ink-950);
    font-size: .98rem;
    font-weight: 750;
}

.report-count {
    color: var(--ink-500);
    font-size: .7rem;
    font-weight: 650;
}

.report-catalogue-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.05fr) minmax(300px, 1.5fr) 130px 130px;
    align-items: center;
    gap: 1rem;
    min-height: 76px;
    padding: .8rem 1.15rem;
    border-bottom: 1px solid var(--line-soft);
}

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

.report-catalogue-row:hover {
    background: var(--surface-muted);
}

.report-catalogue-row__title {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}

.report-catalogue-row h3 {
    margin: 0;
    color: var(--ink-900);
    font-size: .79rem;
    font-weight: 750;
}

.report-source,
.report-catalogue-row__definition {
    color: var(--ink-500);
    font-size: .69rem;
    line-height: 1.45;
}

.report-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-top: .23rem;
    background: var(--ink-400);
    border-radius: 50%;
    box-shadow: 0 0 0 4px #f0f2f4;
}

.report-status-dot--live { background: var(--success-700); box-shadow: 0 0 0 4px var(--success-100); }
.report-status-dot--provisional { background: var(--warning-800); box-shadow: 0 0 0 4px var(--warning-100); }
.report-status-dot--placeholder { background: var(--info-700); box-shadow: 0 0 0 4px var(--info-100); }

.report-status {
    display: inline-flex;
    padding: .22rem .48rem;
    color: var(--ink-600);
    background: #eef1f4;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 750;
    white-space: nowrap;
}

.report-status--live { color: var(--success-700); background: var(--success-100); border-color: #b6dfc9; }
.report-status--provisional { color: var(--warning-800); background: var(--warning-100); border-color: #efd19a; }
.report-status--placeholder { color: var(--info-700); background: var(--info-100); border-color: #bed3f8; }

.report-catalogue-row__action {
    text-align: right;
}

.report-open-link,
.report-back-nav a,
.report-bottom-nav a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--faulu-purple-800);
    font-size: .7rem;
    font-weight: 750;
    text-decoration: none;
}

.report-open-link:hover,
.report-back-nav a:hover,
.report-bottom-nav a:hover {
    text-decoration: underline;
}

.report-back-nav {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    color: var(--ink-500);
    font-size: .7rem;
}

.report-detail-hero__kicker {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255, 255, 255, .7);
    font-size: .68rem;
}

.report-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.report-detail-actions .btn-outline-secondary {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .5);
}

.report-detail-actions .btn-outline-secondary:hover {
    color: var(--faulu-purple-950);
    background: #fff;
}

.dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.45rem 0 .75rem;
}

.dashboard-section-heading h2 {
    margin: 0;
    color: var(--ink-950);
    font-size: 1.15rem;
    font-weight: 760;
    letter-spacing: -.025em;
}

.dashboard-section-heading a {
    color: var(--faulu-purple-800);
    font-size: .8rem;
    font-weight: 750;
    text-decoration: none;
}

.dashboard-section-heading a:hover {
    color: var(--faulu-purple-950);
    text-decoration: underline;
}

@media (max-width: 700px) {
    .dashboard-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.writeoff-assignment-actions,
.writeoff-inline-form,
.writeoff-pagination > div {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.writeoff-inline-form {
    flex: 1 1 auto;
}

.writeoff-inline-form .form-select {
    min-width: 190px;
}

.writeoff-pagination {
    flex-wrap: wrap;
}

.report-filter-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .65rem;
    padding: .85rem 1rem;
    margin: 1rem 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.report-filter-bar label {
    display: grid;
    gap: .24rem;
    min-width: 175px;
}

.report-filter-bar label span {
    color: var(--ink-600);
    font-size: .65rem;
    font-weight: 750;
}

.report-filter-bar .form-control,
.report-filter-bar .form-select {
    min-height: 38px;
    font-size: .75rem;
}

.report-filter-bar .btn {
    min-height: 38px;
    font-size: .72rem;
}

.report-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin: 1rem 0;
}

.report-metric {
    position: relative;
    display: grid;
    min-height: 116px;
    align-content: start;
    gap: .2rem;
    overflow: hidden;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.report-metric::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--line-strong);
    content: "";
}

.report-metric--purple::before { background: var(--faulu-purple-700); }
.report-metric--teal::before { background: var(--faulu-teal-700); }
.report-metric--amber::before { background: var(--faulu-peach-700); }

.report-metric > span {
    color: var(--ink-500);
    font-size: .66rem;
    font-weight: 700;
}

.report-metric > strong {
    margin-top: .15rem;
    color: var(--ink-950);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 770;
    letter-spacing: -.025em;
    line-height: 1.18;
}

.report-metric > small {
    color: var(--ink-500);
    font-size: .65rem;
    line-height: 1.4;
}

.report-data-card {
    margin-top: 1rem;
}

.report-data-table {
    width: 100%;
    border-collapse: collapse;
}

.report-data-table th {
    padding: .68rem .85rem;
    color: var(--ink-600);
    background: var(--surface-muted);
    border-bottom: 1px solid var(--line);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.report-data-table td {
    padding: .7rem .85rem;
    color: var(--ink-700);
    border-bottom: 1px solid var(--line-soft);
    font-size: .71rem;
    font-variant-numeric: tabular-nums;
}

.report-data-table tr:last-child td {
    border-bottom: 0;
}

.report-data-table tbody tr:hover {
    background: var(--faulu-purple-50);
}

.report-data-table td:first-child {
    color: var(--ink-900);
    font-weight: 700;
}

.report-empty-state {
    padding: 2.2rem !important;
    color: var(--ink-500) !important;
    text-align: center;
}

.report-placeholder-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9rem;
    padding: 1rem 1.1rem;
    margin: 1rem 0;
    color: var(--info-700);
    background: var(--info-100);
    border: 1px solid #bed3f8;
    border-radius: var(--radius-lg);
}

.report-placeholder-banner__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    background: var(--info-700);
    border-radius: 10px;
    font-size: 1.3rem;
    font-weight: 500;
}

.report-placeholder-banner h2 {
    margin: .12rem 0 .2rem;
    color: #174b9c;
    font-size: .93rem;
}

.report-placeholder-banner p {
    margin: 0;
    font-size: .72rem;
}

.report-notes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-top: .8rem;
}

.report-method-card {
    padding: 1rem 1.1rem;
}

.report-method-card p,
.report-method-card li {
    color: var(--ink-500);
    font-size: .7rem;
    line-height: 1.55;
}

.report-method-card p {
    margin: .4rem 0 0;
}

.report-method-card ul {
    display: grid;
    gap: .3rem;
    padding-left: 1.05rem;
    margin: .45rem 0 0;
}

.report-method-card--requirements {
    background: #fffbf4;
    border-color: #efdbb8;
}

.report-bottom-nav {
    padding: 1rem .15rem 0;
}

@media (max-width: 1100px) {
    .report-catalogue-row {
        grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.35fr) 120px;
    }
    .report-catalogue-row__action {
        grid-column: 1 / -1;
        text-align: left;
    }
    .report-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .reporting-hero,
    .report-detail-hero { flex-direction: column; }
    .reporting-hero__meta { width: 100%; min-width: 0; }
    .report-detail-actions { justify-content: flex-start; }
    .report-catalogue-summary,
    .report-metric-grid,
    .report-notes-grid { grid-template-columns: 1fr; }
    .report-catalogue-row { grid-template-columns: 1fr; gap: .55rem; }
    .report-catalogue-row__action { grid-column: auto; }
    .report-filter-bar > label { width: 100%; min-width: 0; }
}

/* Authentication */
.auth-body {
    min-height: 100vh;
    color: var(--ink-900);
    background: var(--surface);
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(480px, 1.12fr) minmax(460px, .88fr);
}

.auth-shell--focused {
    display: block;
    background: var(--surface-muted);
}

.auth-shell--focused .auth-panel {
    width: 100%;
}

.auth-visual {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: flex-end;
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 5.5rem);
    color: #fff;
    background-color: var(--faulu-purple-950);
    background-image: url('/Images/login-cover.jpg');
    background-position: center;
    background-size: cover;
    isolation: isolate;
}

.auth-visual::before,
.auth-visual::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    content: "";
}

.auth-visual::before {
    top: -16vw;
    left: -12vw;
    width: 42vw;
    height: 42vw;
}

.auth-visual::after {
    right: -10vw;
    bottom: -18vw;
    width: 38vw;
    height: 38vw;
}

.auth-visual-shade {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(50, 22, 56, .24) 0%, rgba(50, 22, 56, .7) 62%, rgba(32, 13, 36, .94) 100%),
        linear-gradient(90deg, rgba(98, 53, 107, .55), rgba(0, 102, 95, .12));
}

.auth-visual-content {
    width: min(100%, 650px);
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--faulu-purple-800);
    font-size: .71rem;
    font-weight: 800;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.auth-eyebrow-light {
    color: var(--faulu-peach);
}

.auth-visual h1 {
    max-width: 720px;
    margin: .8rem 0 1rem;
    color: #fff;
    font-size: clamp(2.5rem, 4.8vw, 4.9rem);
    font-weight: 750;
    letter-spacing: -.055em;
    line-height: .98;
}

.auth-visual p {
    max-width: 600px;
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.6;
}

.auth-assurance-list {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.15rem;
    margin-top: 1.5rem;
}

.auth-assurance-list span {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    color: rgba(255, 255, 255, .9);
    font-size: .78rem;
    font-weight: 650;
}

.auth-assurance-list i {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--faulu-mint);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(154, 214, 202, .14);
}

.auth-panel {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 4rem);
    background:
        radial-gradient(circle at 100% 0%, rgba(252, 202, 145, .2), transparent 28%),
        radial-gradient(circle at 0% 100%, rgba(154, 214, 202, .18), transparent 30%),
        #fff;
}

.auth-panel-inner {
    width: min(100%, 460px);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: clamp(2rem, 5vh, 3.4rem);
}

.auth-brand img {
    width: 138px;
    height: auto;
}

.auth-brand span {
    padding-left: .85rem;
    color: var(--faulu-purple-800);
    border-left: 1px solid var(--line-strong);
    font-size: .9rem;
    font-weight: 750;
    letter-spacing: .025em;
}

.auth-card {
    width: 100%;
}

.auth-card-heading {
    margin-bottom: 1.8rem;
}

.auth-card-heading h2 {
    margin: .45rem 0 .3rem;
    color: var(--ink-950);
    font-size: clamp(1.85rem, 3vw, 2.35rem);
    font-weight: 760;
    letter-spacing: -.04em;
    line-height: 1.15;
}

.auth-card-heading p {
    margin: 0;
    color: var(--ink-500);
    font-size: .92rem;
}

.auth-form {
    display: grid;
    gap: 1.15rem;
}

.auth-field {
    display: grid;
    gap: .38rem;
}

.auth-field label,
.auth-label-row label {
    margin: 0;
    color: var(--ink-700);
    font-size: .82rem;
    font-weight: 700;
}

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

.auth-label-row > span,
.auth-label-row > a {
    color: var(--ink-500);
    font-size: .7rem;
}

.auth-label-row > a {
    color: var(--faulu-purple-800);
    font-weight: 750;
    text-decoration: none;
}

.auth-label-row > a:hover { text-decoration: underline; }

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-wrap > svg {
    position: absolute;
    z-index: 1;
    left: .9rem;
    width: 19px;
    height: 19px;
    color: var(--ink-500);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.auth-input-wrap .form-control {
    height: 50px;
    padding-left: 2.75rem;
    border-color: var(--line-strong);
    border-radius: var(--radius-md);
    font-size: .92rem;
}

.auth-password-wrap .form-control {
    padding-right: 4.6rem;
}

.auth-input-wrap:focus-within > svg {
    color: var(--faulu-purple-800);
}

.auth-password-toggle {
    position: absolute;
    right: .45rem;
    min-width: 58px;
    min-height: 34px;
    color: var(--faulu-purple-800);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: .74rem;
    font-weight: 750;
}

.auth-password-toggle:hover {
    background: var(--faulu-purple-50);
}

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .72rem .8rem;
    color: #8f1b13;
    background: var(--danger-100);
    border: 1px solid #f8b4af;
    border-radius: var(--radius-md);
    font-size: .8rem;
    font-weight: 600;
}

.auth-alert:empty {
    display: none;
}

.auth-alert svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-alert ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.auth-success {
    padding: .8rem .9rem;
    margin-bottom: 1rem;
    color: var(--success-700);
    background: var(--success-100);
    border: 1px solid #b9dec9;
    border-radius: var(--radius-md);
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.5;
}

.auth-secondary-action {
    margin-top: 1.25rem;
    text-align: center;
}

.auth-secondary-action a {
    color: var(--faulu-purple-800);
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
}

.auth-secondary-action a:hover { text-decoration: underline; }

.auth-submit {
    display: flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin-top: .2rem;
    color: #fff;
    background: var(--faulu-purple-800);
    border: 1px solid var(--faulu-purple-800);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 18px rgba(98, 53, 107, .18);
    font-size: .9rem;
    font-weight: 750;
}

.auth-submit:hover,
.auth-submit:focus,
.auth-submit:active {
    color: #fff;
    background: var(--faulu-purple-950);
    border-color: var(--faulu-purple-950);
    box-shadow: 0 10px 22px rgba(50, 22, 56, .22);
}

.auth-submit svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-security-note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem;
    margin-top: 1.35rem;
    color: var(--ink-600);
    background: var(--surface-muted);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
}

.auth-security-note > svg {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    color: var(--faulu-teal-700);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-security-note p {
    display: grid;
    gap: .08rem;
    margin: 0;
    font-size: .72rem;
    line-height: 1.45;
}

.auth-security-note strong {
    color: var(--ink-700);
}

.auth-security-note span {
    color: var(--ink-500);
}

.auth-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 2rem;
    color: var(--ink-400);
    font-size: .68rem;
}

/* Responsive shell */
@media (max-width: 1199.98px) {
    .app-sidebar {
        visibility: hidden;
        transform: translateX(-102%);
        transition: transform .2s ease, visibility 0s linear .2s;
    }

    .app-sidebar-close,
    .app-menu-toggle {
        display: inline-flex;
    }

    .app-frame {
        margin-left: 0;
    }

    .sidebar-open {
        overflow: hidden;
    }

    .sidebar-open .app-sidebar {
        visibility: visible;
        transform: translateX(0);
        transition-delay: 0s;
    }

    .sidebar-open .app-sidebar-backdrop {
        display: block;
        opacity: 1;
    }

    .app-page-title {
        max-width: 270px;
    }
}

@media (max-width: 899.98px) {
    .app-global-search {
        width: min(100%, 280px);
    }

    .app-profile-menu > summary {
        min-width: auto;
    }

    .app-profile-copy,
    .app-profile-chevron {
        display: none;
    }

    .auth-shell {
        display: block;
    }

    .auth-visual {
        display: none;
    }

    .auth-panel {
        min-height: 100vh;
    }
}

@media (max-width: 639.98px) {
    :root {
        --topbar-height: 64px;
    }

    .app-topbar {
        padding: 0 .85rem;
    }

    .app-breadcrumb {
        display: none;
    }

    .app-page-title {
        max-width: 150px;
        margin-top: 0;
        font-size: .9rem;
    }

    .app-global-search {
        width: 42px;
    }

    .app-global-search input {
        width: 42px;
        padding-right: 0;
        color: transparent;
        cursor: pointer;
    }

    .app-global-search input::placeholder,
    .app-global-search button {
        display: none;
    }

    .app-global-search input:focus {
        position: fixed;
        z-index: 1060;
        top: 10px;
        right: 62px;
        left: 58px;
        width: auto;
        padding: .5rem 1rem .5rem 2.45rem;
        color: var(--ink-900);
        cursor: text;
    }

    .app-global-search:focus-within > svg {
        position: fixed;
        z-index: 1061;
        top: 23px;
        left: 72px;
    }

    .app-profile-popover {
        position: fixed;
        top: 70px;
        right: .75rem;
        left: .75rem;
        width: auto;
    }

    .app-content {
        padding: 1rem .85rem 1.5rem;
    }

    .app-footer {
        min-height: 46px;
        padding: .65rem .85rem;
    }

    .card-body {
        padding: .9rem;
    }

    .auth-panel {
        align-items: flex-start;
        padding: 1.4rem 1rem 2rem;
    }

    .auth-panel-inner {
        margin: auto 0;
    }

    .auth-brand {
        margin-bottom: 2rem;
    }

    .auth-brand img {
        width: 122px;
    }

    .auth-card-heading {
        margin-bottom: 1.4rem;
    }
}

@media (max-width: 379.98px) {
    .app-page-context {
        display: none;
    }

    .app-topbar-actions {
        gap: .45rem;
    }

    .app-footer span[aria-hidden="true"] {
        display: none;
    }

    .app-footer {
        flex-direction: column;
        gap: .05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    .app-sidebar,
    .app-topbar,
    .app-footer,
    .app-sidebar-backdrop {
        display: none !important;
    }

    .app-frame {
        margin: 0 !important;
    }

    .app-content {
        max-width: none;
        padding: 0;
    }

    .card,
    .table-responsive {
        box-shadow: none !important;
    }
}