:root {
    --erp-navy-950: #06182c;
    --erp-navy-900: #0b2748;
    --erp-navy-800: #12385f;
    --erp-blue-600: #1267b3;
    --erp-blue-500: #1683d8;
    --erp-cyan-400: #2bb8c6;
    --erp-orange-500: #ef7d32;
    --erp-slate-900: #192635;
    --erp-slate-700: #47586a;
    --erp-slate-500: #718096;
    --erp-slate-300: #cbd5df;
    --erp-slate-200: #e2e8ef;
    --erp-slate-100: #eef3f7;
    --erp-slate-50: #f6f8fb;
    --erp-white: #fff;
    --erp-success: #16866b;
    --erp-danger: #b83a4b;
    --erp-shadow: 0 20px 50px rgb(11 39 72 / 10%);
}

[data-bs-theme="dark"] {
    --erp-slate-900: #eef4fa;
    --erp-slate-700: #c4d0dc;
    --erp-slate-500: #93a4b5;
    --erp-slate-300: #536578;
    --erp-slate-200: #3c4d5f;
    --erp-slate-100: #263747;
    --erp-slate-50: #101b27;
    --erp-white: #172534;
    --erp-shadow: 0 20px 50px rgb(0 0 0 / 24%);
}

.dashboard-layout-compact .metric-card,
.dashboard-layout-compact .data-section {
    padding: 1rem;
}

.dashboard-layout-operations,
.dashboard-layout-analytics {
    display: flex;
    flex-direction: column;
}

.dashboard-layout-operations .welcome-strip,
.dashboard-layout-analytics .welcome-strip {
    order: -3;
}

.dashboard-layout-operations .module-section,
.dashboard-layout-analytics .analytics-section {
    order: -2;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--erp-slate-900);
    background: var(--erp-slate-50);
    font-family: "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.dashboard-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

a {
    text-decoration: none;
}

.erp-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--erp-navy-900);
}

.erp-brand:hover {
    color: inherit;
}

.erp-brand > span:last-child,
.mobile-brand > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.erp-brand strong,
.mobile-brand strong {
    font-size: 0.96rem;
    letter-spacing: 0.01em;
}

.erp-brand small,
.mobile-brand small {
    margin-top: 0.25rem;
    color: var(--erp-slate-500);
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.erp-brand-light,
.erp-brand-light small {
    color: var(--erp-white);
}

.brand-mark {
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 0.7rem 0.7rem 0.7rem 0.18rem;
    background: linear-gradient(145deg, var(--erp-blue-500), var(--erp-cyan-400));
    box-shadow: 0 10px 25px rgb(5 19 36 / 24%);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.section-kicker,
.eyebrow,
.topbar-overline {
    color: var(--erp-blue-600);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

/* Login */
.login-page {
    overflow-x: hidden;
    background: var(--erp-white);
}

.login-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(420px, 1.08fr) minmax(480px, 0.92fr);
}

.login-story {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 78%, rgb(43 184 198 / 17%), transparent 33%),
        radial-gradient(circle at 78% 18%, rgb(22 131 216 / 24%), transparent 34%),
        linear-gradient(145deg, var(--erp-navy-950) 0%, var(--erp-navy-900) 58%, #113e67 100%);
    color: #fff;
}

.story-grid {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(rgb(255 255 255 / 16%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 16%) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom right, #000, transparent 82%);
}

.login-story::after {
    position: absolute;
    right: -10rem;
    bottom: -13rem;
    width: 34rem;
    height: 34rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 50%;
    box-shadow:
        0 0 0 5rem rgb(255 255 255 / 2%),
        0 0 0 10rem rgb(255 255 255 / 2%);
    content: "";
}

.story-content {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(690px, 100%);
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 5vw, 4.5rem);
}

.story-message {
    max-width: 590px;
    margin-block: auto;
    padding-block: 4rem;
}

.story-message .eyebrow {
    display: inline-block;
    margin-bottom: 1.35rem;
    color: #72d9e2;
}

.story-message h1 {
    margin: 0;
    font-size: clamp(3rem, 5vw, 5.25rem);
    font-weight: 650;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.story-message p {
    max-width: 520px;
    margin: 1.7rem 0 0;
    color: rgb(255 255 255 / 70%);
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.75;
}

.process-ribbon {
    display: flex;
    align-items: center;
    max-width: 500px;
    margin-top: 2.4rem;
    color: rgb(255 255 255 / 78%);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.process-ribbon i {
    width: 3rem;
    height: 1px;
    margin-inline: 0.9rem;
    background: linear-gradient(90deg, rgb(114 217 226 / 75%), rgb(255 255 255 / 10%));
}

.story-footer {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgb(255 255 255 / 58%);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.status-pulse,
.release-dot,
.environment-badge span {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: #4ed3a9;
    box-shadow: 0 0 0 5px rgb(78 211 169 / 12%);
}

.login-panel {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 3rem clamp(2rem, 7vw, 6rem);
    background: #fff;
}

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

.mobile-brand {
    display: none;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 3rem;
}

.login-heading {
    margin-bottom: 2.25rem;
}

.login-heading h2 {
    margin: 0.65rem 0 0.5rem;
    color: var(--erp-navy-900);
    font-size: clamp(2rem, 3vw, 2.65rem);
    font-weight: 700;
    letter-spacing: -0.035em;
}

.login-heading p {
    margin: 0;
    color: var(--erp-slate-500);
    line-height: 1.6;
}

.form-label {
    margin-bottom: 0.55rem;
    color: var(--erp-slate-700);
    font-size: 0.78rem;
    font-weight: 750;
}

.form-control {
    min-height: 3.55rem;
    border: 1px solid var(--erp-slate-300);
    border-radius: 0.55rem;
    color: var(--erp-slate-900);
    font-size: 0.95rem;
    box-shadow: none;
}

.form-control::placeholder {
    color: #9ba8b6;
}

.form-control:focus {
    border-color: var(--erp-blue-500);
    box-shadow: 0 0 0 0.22rem rgb(22 131 216 / 12%);
}

.password-wrap {
    position: relative;
}

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

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    padding: 0.45rem 0.55rem;
    border: 0;
    background: transparent;
    color: var(--erp-blue-600);
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    transform: translateY(-50%);
}

.password-toggle:focus-visible {
    border-radius: 0.3rem;
    outline: 2px solid var(--erp-blue-500);
    outline-offset: 2px;
}

.caps-warning {
    margin-top: 0.45rem;
    color: #9a5a15;
    font-size: 0.75rem;
}

.btn-erp {
    display: inline-flex;
    min-height: 3.45rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 1px solid var(--erp-blue-600);
    border-radius: 0.55rem;
    background: linear-gradient(135deg, var(--erp-blue-600), var(--erp-blue-500));
    color: #fff;
    font-size: 0.91rem;
    font-weight: 750;
    box-shadow: 0 10px 24px rgb(18 103 179 / 19%);
}

.btn-erp:hover,
.btn-erp:focus {
    border-color: var(--erp-navy-800);
    background: var(--erp-navy-800);
    color: #fff;
}

.btn-erp:disabled {
    border-color: #7d9bb5;
    background: #7d9bb5;
}

.button-arrow {
    font-size: 1.2rem;
}

.alert {
    border: 0;
    border-left: 3px solid currentcolor;
    border-radius: 0.35rem;
    font-size: 0.82rem;
}

.alert-danger {
    background: #fff0f2;
    color: var(--erp-danger);
}

.alert-success {
    background: #eaf8f3;
    color: var(--erp-success);
}

.access-note {
    display: flex;
    gap: 0.8rem;
    margin-top: 2rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.55rem;
    background: var(--erp-slate-50);
}

.access-note-icon {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    place-items: center;
    border-radius: 50%;
    background: #dcecf9;
    color: var(--erp-blue-600);
    font-size: 0.72rem;
    font-weight: 800;
}

.access-note p {
    margin: 0;
    color: var(--erp-slate-500);
    font-size: 0.72rem;
    line-height: 1.55;
}

.login-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    color: #9aa6b3;
    font-size: 0.68rem;
}

/* Dashboard */
.erp-app-shell {
    display: flex;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.erp-sidebar {
    position: fixed;
    z-index: 20;
    inset: 0 auto 0 0;
    width: 260px;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding: 1.6rem 1.25rem;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 3%), transparent 30%),
        var(--erp-navy-950);
    color: #fff;
}

.erp-sidebar .erp-brand {
    flex: 0 0 auto;
    padding: 0 0.55rem 1.7rem;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.erp-nav {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 1.3rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 0 0.35rem 0.8rem 0;
    scrollbar-color: rgb(140 203 215 / 48%) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.erp-nav::-webkit-scrollbar {
    width: 0.45rem;
}

.erp-nav::-webkit-scrollbar-track {
    background: transparent;
}

.erp-nav::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgb(140 203 215 / 42%);
    background-clip: padding-box;
}

.erp-nav::-webkit-scrollbar-thumb:hover {
    background: rgb(140 203 215 / 68%);
    background-clip: padding-box;
}

.nav-section {
    margin: 1rem 0.65rem 0.35rem;
    color: rgb(255 255 255 / 35%);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.nav-item {
    display: flex;
    min-height: 2.8rem;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.45rem;
    color: rgb(255 255 255 / 66%);
    font-size: 0.79rem;
    font-weight: 650;
}

a.nav-item:hover,
.nav-item.active {
    background: rgb(22 131 216 / 17%);
    color: #fff;
}

.nav-item.active {
    box-shadow: inset 3px 0 0 var(--erp-cyan-400);
}

.nav-item.disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.nav-icon {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 1.7rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 0.35rem;
    background: rgb(255 255 255 / 5%);
    color: #8ccbd7;
    font-size: 0.54rem;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.sidebar-footer {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem 0.65rem 0;
    border-top: 1px solid rgb(255 255 255 / 8%);
    color: rgb(255 255 255 / 35%);
}

.environment-badge {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: rgb(255 255 255 / 62%);
    font-size: 0.66rem;
}

.environment-badge span {
    width: 0.4rem;
    height: 0.4rem;
    box-shadow: none;
}

.sidebar-footer small {
    font-size: 0.6rem;
}

.erp-main {
    display: flex;
    flex-direction: column;
    width: calc(100% - 260px);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin-left: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-color: var(--erp-slate-300) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.erp-main::-webkit-scrollbar {
    width: 0.65rem;
}

.erp-main::-webkit-scrollbar-track {
    background: transparent;
}

.erp-main::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--erp-slate-300);
    background-clip: padding-box;
}

.erp-topbar {
    position: sticky;
    z-index: 10;
    top: 0;
    display: flex;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem clamp(1.25rem, 3vw, 3rem);
    border-bottom: 1px solid var(--erp-slate-200);
    background: rgb(255 255 255 / 94%);
    backdrop-filter: blur(12px);
}

.erp-topbar h1 {
    margin: 0.15rem 0 0;
    color: var(--erp-navy-900);
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.topbar-company-context {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.topbar-company-name {
    max-width: 16rem;
    overflow: hidden;
    color: var(--erp-slate-700);
    font-size: 0.68rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-company-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0.14rem 0.5rem;
    border: 1px solid #cfe7dc;
    border-radius: 999px;
    background: #eff8f3;
    color: #276749;
    font-size: 0.57rem;
    font-weight: 750;
    line-height: 1.35;
    white-space: nowrap;
}

.topbar-company-status.is-renewal-due {
    border-color: #f1d9a9;
    background: #fff8e8;
    color: #8a5a00;
}

.topbar-overline {
    color: var(--erp-slate-500);
    font-size: 0.56rem;
}

.topbar-actions,
.user-summary,
.user-summary > span:last-child {
    display: flex;
    align-items: center;
}

.topbar-actions {
    gap: 1.25rem;
}

.topbar-search {
    width: min(280px, 24vw);
}

.topbar-search .form-control {
    min-height: 2.35rem;
}

.topbar-icon-link {
    position: relative;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.55rem;
    color: var(--erp-blue-600);
    font-size: 0.62rem;
    font-weight: 850;
}

.topbar-icon-link span {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: grid;
    min-width: 1.1rem;
    height: 1.1rem;
    padding-inline: 0.2rem;
    place-items: center;
    border-radius: 999px;
    background: var(--erp-danger);
    color: #fff;
    font-size: 0.55rem;
}

.user-summary {
    gap: 0.7rem;
}

.user-summary > span:last-child {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.user-summary strong {
    font-size: 0.75rem;
}

.user-summary small {
    margin-top: 0.23rem;
    color: var(--erp-slate-500);
    font-size: 0.62rem;
}

.user-avatar {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 0.55rem;
    background: #dcecf9;
    color: var(--erp-blue-600);
    font-size: 0.7rem;
    font-weight: 850;
}

.mobile-menu-button {
    display: grid;
    gap: 0.24rem;
    padding: 0.45rem;
}

.mobile-menu-button span {
    width: 1.2rem;
    height: 2px;
    background: var(--erp-navy-900);
}

.erp-content {
    flex: 1 0 auto;
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 3rem);
}

.erp-page-footer {
    flex: 0 0 auto;
    width: min(1500px, 100%);
    margin: auto auto 0;
    padding: 0.8rem clamp(1.25rem, 3vw, 3rem) 1.25rem;
    border-top: 1px solid var(--erp-slate-200);
    color: var(--erp-slate-600);
    font-size: 0.72rem;
    line-height: 1.5;
}

.erp-page-footer-inner {
    display: flex;
    min-height: 2.6rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    text-align: center;
}

.erp-footer-attribution strong {
    color: var(--erp-slate-700);
}

.erp-footer-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 2rem;
}

.erp-footer-contact a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.erp-footer-contact-label {
    color: var(--erp-slate-500);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.erp-page-footer a {
    color: var(--erp-blue-600);
    overflow-wrap: anywhere;
    text-decoration: none;
}

.erp-page-footer a:hover {
    color: var(--erp-blue-700);
    text-decoration: underline;
}

.welcome-strip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-radius: 0.75rem;
    background:
        linear-gradient(110deg, rgb(11 39 72 / 97%), rgb(18 56 95 / 92%)),
        var(--erp-navy-900);
    box-shadow: var(--erp-shadow);
    color: #fff;
}

.welcome-strip::after {
    position: absolute;
    top: -7rem;
    right: -3rem;
    width: 20rem;
    height: 20rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem rgb(255 255 255 / 2%);
    content: "";
}

.welcome-strip > * {
    position: relative;
    z-index: 1;
}

.welcome-strip .section-kicker {
    color: #6dd4df;
}

.welcome-strip h2 {
    margin: 0.55rem 0 0.45rem;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    font-weight: 650;
    letter-spacing: -0.035em;
}

.welcome-strip p {
    margin: 0;
    color: rgb(255 255 255 / 62%);
    font-size: 0.82rem;
}

.release-chip {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 0.45rem;
    background: rgb(255 255 255 / 6%);
    color: rgb(255 255 255 / 75%);
    font-size: 0.69rem;
    font-weight: 650;
    white-space: nowrap;
}

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

.metric-card {
    display: flex;
    min-height: 145px;
    flex-direction: column;
    justify-content: center;
    padding: 1.4rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 8px 24px rgb(11 39 72 / 4%);
}

.metric-label {
    color: var(--erp-slate-500);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.metric-card strong {
    margin-block: 0.35rem;
    color: var(--erp-navy-900);
    font-size: 2rem;
    line-height: 1;
}

.metric-card small {
    color: #93a0ae;
    font-size: 0.65rem;
}

.metric-card-accent {
    border-color: #ccebe3;
    background: linear-gradient(135deg, #f6fffc, #fff);
}

.metric-card .metric-status {
    color: var(--erp-success);
    font-size: 1.25rem;
}

.module-section,
.process-section {
    margin-top: 2.25rem;
}

.section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-heading-row h2 {
    margin: 0.3rem 0 0;
    color: var(--erp-navy-900);
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.module-card {
    position: relative;
    display: flex;
    min-height: 210px;
    flex-direction: column;
    overflow: hidden;
    padding: 1.35rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.65rem;
    background: #fff;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

a.module-card {
    color: inherit;
}

.module-card:hover {
    box-shadow: 0 16px 38px rgb(11 39 72 / 8%);
    transform: translateY(-2px);
}

.module-card-next {
    border-color: #9fc7e7;
    background: linear-gradient(150deg, #fff, #f2f8fd);
}

.module-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.module-icon {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 0.55rem;
    background: #e9f3fb;
    color: var(--erp-blue-600);
    font-size: 0.66rem;
    font-weight: 850;
}

.module-status {
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: var(--erp-slate-100);
    color: var(--erp-slate-500);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.module-card-next .module-status {
    background: #dff0fb;
    color: var(--erp-blue-600);
}

.module-card h3 {
    margin: 1.1rem 0 0.45rem;
    color: var(--erp-navy-900);
    font-size: 1rem;
    font-weight: 750;
}

.module-card p {
    margin: 0;
    color: var(--erp-slate-500);
    font-size: 0.74rem;
    line-height: 1.6;
}

.module-line {
    position: static;
    flex: 0 0 2px;
    width: 100%;
    height: 2px;
    margin-top: 0.45rem;
    overflow: hidden;
    background: var(--erp-slate-100);
}

.module-line span {
    display: block;
    width: 22%;
    height: 100%;
    background: var(--erp-slate-300);
}

.module-card-next .module-line span {
    width: 48%;
    background: var(--erp-blue-500);
}

.module-card-live {
    cursor: pointer;
}

.module-card-live .module-status {
    background: #dff6ee;
    color: var(--erp-success);
}

.module-card-live .module-line span {
    width: 100%;
    background: linear-gradient(90deg, var(--erp-blue-500), var(--erp-cyan-400));
}

.module-open {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin-top: auto;
    padding-top: 0.8rem;
    padding-bottom: 0.25rem;
    color: var(--erp-blue-600);
    font-size: 0.7rem;
    font-weight: 800;
}

.module-open span {
    margin-left: 0.25rem;
    font-size: 0.9rem;
}

.process-flow {
    display: grid;
    align-items: center;
    padding: 1.35rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.65rem;
    background: #fff;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    gap: 0.8rem;
}

.process-flow > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.process-flow > div span {
    color: var(--erp-blue-500);
    font-size: 0.62rem;
    font-weight: 850;
}

.process-flow strong {
    margin-top: 0.3rem;
    color: var(--erp-navy-900);
    font-size: 0.76rem;
}

.process-flow small {
    margin-top: 0.25rem;
    overflow: hidden;
    color: var(--erp-slate-500);
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.process-flow > i {
    color: var(--erp-slate-300);
    font-style: normal;
}

.mobile-navigation {
    width: min(320px, 88vw) !important;
    background: var(--erp-navy-950);
    color: #fff;
}

.mobile-navigation .offcanvas-header {
    border-bottom: 1px solid rgb(255 255 255 / 8%);
}

/* Analysis workspaces */
.workspace-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid #cbdfee;
    border-radius: 0.75rem;
    background:
        radial-gradient(circle at 90% 15%, rgb(43 184 198 / 12%), transparent 34%),
        linear-gradient(135deg, #fff, #f3f8fc);
}

.workspace-hero h2 {
    margin: 0.45rem 0 0.5rem;
    color: var(--erp-navy-900);
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    font-weight: 720;
    letter-spacing: -0.04em;
}

.workspace-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--erp-slate-500);
    line-height: 1.65;
}

.demo-chip,
.record-count {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid #ccebe3;
    border-radius: 999px;
    background: #f1fbf8;
    color: var(--erp-success);
    font-size: 0.67rem;
    font-weight: 750;
    white-space: nowrap;
}

.demo-chip span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #36bb91;
    box-shadow: 0 0 0 4px rgb(54 187 145 / 12%);
}

.workspace-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.65rem;
    background: #fff;
}

.filter-search {
    flex: 1;
}

.filter-status {
    width: min(220px, 100%);
}

.workspace-filter .form-control,
.workspace-filter .form-select,
.workspace-filter-button {
    min-height: 2.8rem;
}

.workspace-filter-button {
    min-width: 7.5rem;
    box-shadow: none;
}

.workspace-metrics {
    margin-top: 1rem;
}

.metric-card-warning {
    border-color: #f2dcc0;
    background: linear-gradient(135deg, #fffaf3, #fff);
}

.data-section {
    margin-top: 2rem;
}

.data-section .section-heading-row {
    align-items: center;
}

.data-section .section-heading-row p {
    margin: 0.35rem 0 0;
    color: var(--erp-slate-500);
    font-size: 0.73rem;
}

.record-count {
    border-color: var(--erp-slate-200);
    background: var(--erp-slate-50);
    color: var(--erp-slate-500);
}

.erp-table-wrap {
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 8px 24px rgb(11 39 72 / 4%);
}

.erp-table {
    min-width: 860px;
}

.erp-table thead th {
    padding: 0.9rem 1rem;
    border-bottom-color: var(--erp-slate-200);
    background: #f7f9fc;
    color: var(--erp-slate-500);
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.erp-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom-color: #edf1f5;
    color: var(--erp-slate-700);
    font-size: 0.72rem;
    white-space: nowrap;
}

.erp-table tbody tr:last-child td {
    border-bottom: 0;
}

.erp-table tbody tr:hover td {
    background: #f9fbfd;
}

.table-pagination-bar {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    margin-top: 0.65rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 6px 18px rgb(11 39 72 / 3%);
}

.table-result-summary {
    color: var(--erp-slate-500);
    font-size: 0.7rem;
}

.table-result-summary strong {
    color: var(--erp-navy-900);
    font-weight: 800;
}

.table-page-size-form,
.table-page-navigation {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.table-page-size-form label {
    margin-right: 0.2rem;
    color: var(--erp-slate-500);
    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
}

.table-page-size-form .form-select {
    width: 4.7rem;
    min-height: 2rem;
    font-size: 0.7rem;
}

.table-page-size-form .btn {
    min-height: 2rem;
    font-size: 0.66rem;
    font-weight: 750;
}

.table-page-navigation {
    justify-content: flex-end;
}

.table-page-link,
.table-page-gap {
    display: inline-flex;
    min-width: 2rem;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.45rem;
    color: var(--erp-slate-700);
    font-size: 0.67rem;
    font-weight: 750;
    text-decoration: none;
}

.table-page-link:hover {
    border-color: var(--erp-blue-600);
    color: var(--erp-blue-600);
}

.table-page-link.active {
    border-color: var(--erp-blue-600);
    background: var(--erp-blue-600);
    color: #fff;
}

.table-page-link.disabled {
    background: var(--erp-slate-50);
    color: #a5afba;
    cursor: not-allowed;
}

.table-page-direction {
    min-width: 4.2rem;
}

.table-page-gap {
    min-width: 1rem;
    border-color: transparent;
    padding-inline: 0.15rem;
}

.status-badge {
    display: inline-flex;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: var(--erp-slate-100);
    color: var(--erp-slate-500);
    font-size: 0.59rem;
    font-weight: 800;
}

.status-success {
    background: #e5f7f0;
    color: #127258;
}

.status-info {
    background: #e4f2fb;
    color: var(--erp-blue-600);
}

.status-warning {
    background: #fff2df;
    color: #9a5a15;
}

.status-danger {
    background: #fff0f2;
    color: var(--erp-danger);
}

.empty-state {
    padding-block: 2.5rem !important;
    color: var(--erp-slate-500) !important;
    text-align: center;
}

.empty-state-panel {
    padding: 2.5rem;
    border: 1px dashed var(--erp-slate-300);
    border-radius: 0.65rem;
    color: var(--erp-slate-500);
    text-align: center;
}

.task-list,
.notification-list,
.search-results {
    display: grid;
    gap: 0.7rem;
}

.task-row,
.notification-row,
.search-result {
    display: grid;
    min-height: 78px;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--erp-slate-200);
    border-left: 4px solid var(--erp-blue-500);
    border-radius: 0.65rem;
    background: #fff;
    color: var(--erp-slate-700);
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.task-critical,
.notification-row.task-critical {
    border-left-color: var(--erp-danger);
}

.task-warning,
.notification-row.task-warning {
    border-left-color: var(--erp-orange-500);
}

.task-success,
.notification-row.task-success {
    border-left-color: var(--erp-success);
}

.task-category,
.search-result > span {
    display: inline-flex;
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
    background: var(--erp-slate-100);
    color: var(--erp-blue-600);
    font-size: 0.57rem;
    font-weight: 850;
    letter-spacing: 0.05em;
}

.task-row > span:nth-child(2),
.search-result > div,
.notification-row > div:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.task-row strong,
.search-result strong,
.notification-row strong {
    color: var(--erp-navy-900);
    font-size: 0.78rem;
}

.task-row small,
.search-result small,
.notification-row p,
.notification-row small {
    margin: 0.2rem 0 0;
    color: var(--erp-slate-500);
    font-size: 0.68rem;
}

.task-row time,
.search-result i {
    color: var(--erp-slate-500);
    font-size: 0.67rem;
    font-style: normal;
}

.notification-actions {
    display: flex;
    gap: 0.4rem;
}

.split-workspace,
.mobile-posting-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.mobile-action-grid {
    display: grid;
    margin-top: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.mobile-action-grid a {
    display: flex;
    min-height: 150px;
    padding: 1rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.7rem;
    background: #fff;
    color: var(--erp-slate-700);
    flex-direction: column;
}

.mobile-action-grid span {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border-radius: 0.55rem;
    background: #e9f3fb;
    color: var(--erp-blue-600);
    font-size: 0.65rem;
    font-weight: 850;
}

.mobile-action-grid strong {
    margin-top: 1rem;
    color: var(--erp-navy-900);
}

.mobile-action-grid small {
    margin-top: 0.3rem;
    color: var(--erp-slate-500);
}

.mobile-posting-layout {
    margin-top: 1rem;
    grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1.35fr);
}

.scanner-panel,
.mobile-posting-layout > .data-section {
    padding: 1.25rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.7rem;
    background: #fff;
}

.scanner-panel h2 {
    margin: 0.35rem 0 1rem;
    color: var(--erp-navy-900);
    font-size: 1.2rem;
}

.scan-video {
    width: 100%;
    margin-top: 1rem;
    border-radius: 0.55rem;
    background: #000;
}

.scan-status {
    margin: 1rem 0 0;
    color: var(--erp-slate-500);
    font-size: 0.7rem;
    line-height: 1.5;
}

.barcode-label-grid {
    display: grid;
    margin-top: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.barcode-label {
    display: flex;
    min-height: 210px;
    padding: 1rem;
    border: 1px dashed var(--erp-slate-500);
    background: #fff;
    color: #111;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.barcode-label > span,
.barcode-label small {
    color: #555;
    font-size: 0.6rem;
}

.barcode-label svg {
    width: 100%;
    max-height: 85px;
    margin: 0.6rem 0;
}

.payslip-card {
    max-width: 920px;
    margin: 1rem auto 0;
    padding: 2rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.75rem;
    background: #fff;
}

.payslip-card header,
.payslip-card footer,
.payslip-grid,
.payslip-columns,
.payslip-columns p {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.payslip-card header,
.payslip-card header > div {
    display: flex;
    flex-direction: column;
}

.payslip-card header {
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--erp-navy-900);
    flex-direction: row;
}

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

.payslip-grid > div {
    display: flex;
    flex-direction: column;
}

.payslip-card span,
.payslip-card small {
    color: var(--erp-slate-500);
    font-size: 0.68rem;
}

.payslip-columns > div {
    width: 50%;
    padding: 1rem;
    border: 1px solid var(--erp-slate-200);
}

.payslip-columns h3 {
    font-size: 0.9rem;
}

.payslip-columns p.total,
.payslip-card footer {
    padding-top: 0.8rem;
    border-top: 1px solid var(--erp-slate-300);
}

.payslip-card footer {
    margin-top: 1.25rem;
    font-size: 1.25rem;
}

/* Data entry, bulk exchange and analytics */
.workspace-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.message-stack {
    position: relative;
    z-index: 10;
    margin-bottom: 1rem;
}

.form-page-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f3f8fc, #fff 65%);
}

.form-page-hero h2,
.form-section-heading h3,
.template-catalog h2,
.chart-card h3 {
    margin: 0.25rem 0;
    color: var(--erp-navy-900);
}

.form-page-hero p,
.form-section-heading p,
.template-catalog p {
    margin: 0;
    color: var(--erp-slate-500);
    font-size: 0.75rem;
}

.erp-entry-form {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.form-section-card {
    padding: 1.25rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 8px 24px rgb(11 39 72 / 4%);
}

.form-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #edf1f5;
}

.form-section-heading > span {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 auto;
    border-radius: 0.55rem;
    background: #e9f3fb;
    color: var(--erp-blue-600);
    font-size: 0.68rem;
    font-weight: 850;
    place-items: center;
}

.form-section-heading h3 {
    font-size: 0.95rem;
}

.gst-phase-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.gst-phase-link {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.7rem;
    background: #fff;
    color: var(--erp-navy-900);
    text-decoration: none;
    box-shadow: 0 6px 18px rgb(11 39 72 / 4%);
}

.gst-phase-link:hover,
.gst-phase-link:focus-visible,
.gst-phase-link.active {
    border-color: var(--erp-blue-500);
    background: #f1f8fd;
    color: var(--erp-blue-700);
}

.gst-phase-link span {
    color: var(--erp-slate-500);
    font-size: 0.7rem;
}

.gst-first-run {
    margin: 0;
    font-size: 0.78rem;
}

.gst-phase-section {
    scroll-margin-top: 1rem;
}

.gst-phase-explainer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.gst-phase-explainer span {
    padding: 0.7rem 0.8rem;
    border-left: 3px solid #7dc5eb;
    border-radius: 0.35rem;
    background: #f5faff;
    color: var(--erp-slate-700);
    font-size: 0.72rem;
    line-height: 1.5;
}

.gst-table-title {
    margin: 1.35rem 0 0.65rem;
    color: var(--erp-navy-900);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.form-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 1rem;
}

.erp-field .form-label,
.dashboard-filter .form-label,
.bulk-upload-card .form-label {
    margin-bottom: 0.35rem;
    color: var(--erp-slate-700);
    font-size: 0.67rem;
    font-weight: 750;
}

.erp-field .form-label span {
    margin-left: 0.2rem;
    color: var(--erp-danger);
}

.erp-field .form-control,
.erp-field .form-select,
.bulk-upload-card .form-control,
.bulk-upload-card .form-select {
    min-height: 2.7rem;
    border-color: var(--erp-slate-200);
    font-size: 0.76rem;
}

.erp-field textarea.form-control {
    min-height: 5.6rem;
}

.erp-field-checkbox {
    display: flex;
    align-items: center;
    min-height: 2.7rem;
    padding-top: 1.3rem;
}

.line-form-list {
    display: grid;
    gap: 0.75rem;
    padding-top: 1rem;
}

.line-form-card {
    padding: 1rem;
    border: 1px solid #e5ebf1;
    border-radius: 0.65rem;
    background: var(--erp-slate-50);
}

.gst-form-launch-card {
    display: flex;
    min-height: 10.5rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    box-shadow: 0 8px 22px rgb(11 39 72 / 5%);
}

.gst-form-launch-copy {
    display: grid;
    gap: 0.4rem;
}

.gst-form-launch-copy .section-kicker {
    color: var(--erp-blue-600);
    font-size: 0.61rem;
}

.gst-form-launch-copy h4 {
    margin: 0;
    color: var(--erp-navy-900);
    font-size: 0.92rem;
}

.gst-form-launch-copy p {
    margin: 0;
    color: var(--erp-slate-500);
    font-size: 0.7rem;
    line-height: 1.45;
}

.gst-form-open-button {
    min-height: 2.35rem;
}

.gst-form-dialog {
    position: fixed;
    inset: 0;
    width: min(1000px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    max-height: 90vh;
    max-height: 90dvh;
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--erp-navy-900);
    outline: none;
}

.gst-form-dialog::backdrop {
    background: rgb(9 24 43 / 64%);
}

.gst-form-dialog-frame {
    width: 100%;
    max-height: inherit;
}

.gst-form-dialog-content {
    display: flex;
    max-height: 90vh;
    max-height: 90dvh;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--erp-slate-200);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 24px 64px rgb(8 24 44 / 26%);
}

.gst-form-dialog-header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid var(--erp-slate-200);
    background: #f5f9fd;
}

.gst-form-dialog-header .section-kicker {
    color: var(--erp-blue-600);
    font-size: 0.6rem;
}

.gst-form-dialog-header h2 {
    margin: 0.25rem 0 0;
    color: var(--erp-navy-900);
    font-size: 1.1rem;
}

.gst-form-dialog-close {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--erp-navy-900);
    cursor: pointer;
    font-size: 1.45rem;
    line-height: 1;
}

.gst-form-dialog-body {
    display: grid;
    flex: 1 1 auto;
    gap: 1rem;
    min-height: 0;
    max-height: calc(90vh - 5rem);
    max-height: calc(90dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem 1.35rem;
}

.gst-form-dialog-body > .line-form-card {
    padding: 0;
    border: 0;
    background: transparent;
}

.gst-form-dialog-body form {
    display: grid;
    gap: 0.75rem;
}

.gst-form-dialog-body form .form-field-grid {
    padding-top: 0.25rem;
}

@media (max-width: 575.98px) {
    .gst-form-launch-card {
        min-height: 9.5rem;
    }

    .gst-form-dialog {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        max-height: 96vh;
        max-height: 96dvh;
    }

    .gst-form-dialog-content {
        max-height: 96vh;
        max-height: 96dvh;
    }

    .gst-form-dialog-header,
    .gst-form-dialog-body {
        padding: 0.9rem;
    }

    .gst-form-dialog-body {
        max-height: calc(96vh - 4.5rem);
        max-height: calc(96dvh - 4.5rem);
    }
}

.line-number-label {
    color: var(--erp-blue-600);
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.line-field-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-top: 0.65rem;
}

.form-submit-bar {
    position: sticky;
    z-index: 4;
    bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 95%);
    box-shadow: 0 14px 40px rgb(11 39 72 / 14%);
    backdrop-filter: blur(10px);
}

.form-submit-bar div:first-child {
    display: flex;
    flex-direction: column;
}

.form-submit-bar strong {
    color: var(--erp-navy-900);
    font-size: 0.75rem;
}

.form-submit-bar small {
    color: var(--erp-slate-500);
    font-size: 0.64rem;
}

.bulk-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.75fr) minmax(440px, 1.25fr);
    gap: 1.25rem;
    margin-top: 1rem;
}

.template-catalog {
    padding: 1.25rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.75rem;
    background: #fff;
}

.template-grid {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.template-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e5ebf1;
    border-radius: 0.55rem;
    background: var(--erp-slate-50);
}

.template-card > div {
    display: flex;
    gap: 0.55rem;
    flex-direction: column;
}

.template-card > div:last-child {
    flex-direction: row;
}

.template-card strong {
    color: var(--erp-navy-900);
    font-size: 0.74rem;
}

.template-card small {
    color: var(--erp-slate-500);
    font-size: 0.62rem;
}

.template-card a {
    padding: 0.3rem 0.48rem;
    border-radius: 0.35rem;
    background: #e9f3fb;
    color: var(--erp-blue-600);
    font-size: 0.62rem;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(135px, 1fr)) auto auto;
    align-items: end;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.75rem;
    background: #fff;
}

.dashboard-filter .form-control,
.dashboard-filter .form-select,
.dashboard-filter .btn {
    min-height: 2.7rem;
    font-size: 0.7rem;
}

.analytics-section {
    margin-top: 2rem;
}

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

.chart-card {
    grid-column: span 2;
    padding: 1.1rem;
    overflow: hidden;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 8px 24px rgb(11 39 72 / 4%);
}

.chart-card-wide {
    grid-column: span 2;
}

.chart-card canvas {
    width: 100%;
    height: 260px;
    margin-top: 0.6rem;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    min-height: 1.2rem;
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--erp-slate-500);
    font-size: 0.61rem;
}

.chart-legend i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

.report-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem;
    border: 1px solid #d8e5ef;
    border-radius: 0.8rem;
    background:
        radial-gradient(circle at 85% 15%, rgb(36 164 134 / 14%), transparent 32%),
        linear-gradient(135deg, #eef6fb, #fff 65%);
}

.report-hero h2 {
    margin: 0.3rem 0;
    color: var(--erp-navy-900);
    font-size: clamp(1.25rem, 2.6vw, 1.85rem);
}

.report-hero p {
    margin: 0;
    color: var(--erp-slate-500);
    font-size: 0.76rem;
}

.report-hero-summary {
    display: flex;
    min-width: 230px;
    padding: 1rem 1.2rem;
    border: 1px solid rgb(36 164 134 / 24%);
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 88%);
    flex-direction: column;
}

.report-hero-summary span,
.report-hero-summary small {
    color: var(--erp-slate-500);
    font-size: 0.63rem;
}

.report-hero-summary strong {
    margin-block: 0.18rem;
    color: var(--erp-success);
    font-size: 1.45rem;
}

.report-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.75rem;
    background: #fff;
}

.report-filter .form-label {
    margin-bottom: 0.35rem;
    color: var(--erp-slate-700);
    font-size: 0.66rem;
    font-weight: 750;
}

.report-filter .form-control,
.report-filter .form-select,
.report-filter .btn {
    min-height: 2.7rem;
    font-size: 0.7rem;
}

.report-item-filter {
    grid-column: span 2;
}

.report-filter-actions {
    display: flex;
    align-items: end;
    gap: 0.55rem;
    grid-column: span 2;
}

.report-download-section {
    margin-top: 2rem;
}

.report-download-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}

.report-download-card {
    display: flex;
    min-height: 175px;
    padding: 1rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: 0 8px 24px rgb(11 39 72 / 4%);
    justify-content: space-between;
    flex-direction: column;
}

.report-download-card-primary {
    border-color: rgb(23 105 170 / 38%);
    background: linear-gradient(145deg, #eef7fd, #fff);
}

.report-download-card > div:first-child > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: #e9f3fb;
    color: var(--erp-blue-600);
    font-size: 0.64rem;
    font-weight: 850;
    place-items: center;
}

.report-download-card h3 {
    margin: 0.65rem 0 0.25rem;
    color: var(--erp-navy-900);
    font-size: 0.86rem;
}

.report-download-card p {
    margin: 0;
    color: var(--erp-slate-500);
    font-size: 0.66rem;
    line-height: 1.55;
}

.report-download-card > div:last-child {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.report-download-card a {
    padding: 0.38rem 0.62rem;
    border-radius: 0.4rem;
    background: var(--erp-navy-900);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    text-decoration: none;
}

.report-download-card a:last-child {
    background: #e9f3fb;
    color: var(--erp-blue-600);
}

.report-metrics {
    margin-top: 1.25rem;
}

.report-scope-note {
    display: grid;
    grid-template-columns: minmax(210px, 0.45fr) minmax(0, 1.55fr);
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.2rem;
    border: 1px solid #eadcc9;
    border-radius: 0.7rem;
    background: #fffaf3;
}

.report-scope-note h2 {
    margin: 0.3rem 0 0;
    color: var(--erp-navy-900);
    font-size: 1rem;
}

.report-scope-note ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--erp-slate-700);
    font-size: 0.7rem;
    line-height: 1.7;
}

/* Error */
.error-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    background: var(--erp-slate-50);
}

.error-shell {
    width: min(560px, calc(100% - 2rem));
}

.error-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: var(--erp-shadow);
}

.error-card .section-kicker {
    margin-top: 2rem;
}

.error-card h1 {
    margin: 0.5rem 0;
    color: var(--erp-navy-900);
    font-size: 2rem;
}

.error-card p {
    margin-bottom: 1.5rem;
    color: var(--erp-slate-500);
    line-height: 1.7;
}

@media (max-width: 1199.98px) {
    .login-shell {
        grid-template-columns: minmax(390px, 0.95fr) minmax(430px, 1.05fr);
    }

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

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

    .line-field-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .report-filter {
        grid-template-columns: repeat(3, minmax(145px, 1fr));
    }
}

@media (max-width: 991.98px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-story {
        display: none;
    }

    .login-panel {
        padding: 2rem;
        background:
            linear-gradient(180deg, rgb(233 243 251 / 75%), transparent 34%),
            #fff;
    }

    .mobile-brand {
        display: flex;
    }

    .erp-main {
        width: 100%;
        margin-left: 0;
    }

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

    .process-flow {
        grid-template-columns: 1fr;
    }

    .process-flow > i {
        transform: rotate(90deg);
    }

    .bulk-layout {
        grid-template-columns: 1fr;
    }

    .chart-grid {
        grid-template-columns: 1fr;
    }

    .chart-card,
    .chart-card-wide {
        grid-column: auto;
    }

    .line-field-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

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

    .report-filter {
        grid-template-columns: repeat(2, minmax(145px, 1fr));
    }

    .report-item-filter,
    .report-filter-actions {
        grid-column: span 1;
    }

    .table-pagination-bar {
        grid-template-columns: 1fr auto;
    }

    .table-page-navigation {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .mobile-action-grid,
    .barcode-label-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-posting-layout,
    .split-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .login-panel {
        align-items: start;
        padding: 1.5rem;
    }

    .login-panel-inner {
        margin-top: 1rem;
    }

    .login-footer {
        gap: 0.5rem;
        flex-direction: column;
    }

    .erp-topbar {
        min-height: 68px;
        padding-inline: 1rem;
    }

    .topbar-company-name {
        max-width: 9rem;
    }

    .topbar-company-context {
        max-width: 45vw;
        flex-wrap: wrap;
    }

    .topbar-company-status {
        font-size: 0.53rem;
    }

    .erp-page-footer-inner {
        flex-direction: column;
        justify-content: center;
        gap: 0.45rem;
        text-align: center;
    }

    .erp-footer-contact {
        justify-content: center;
        gap: 0.35rem 1rem;
    }

    .topbar-actions {
        gap: 0.5rem;
    }

    .erp-content {
        padding: 1rem;
    }

    .welcome-strip {
        align-items: flex-start;
        gap: 1.2rem;
        flex-direction: column;
    }

    .metric-grid,
    .module-grid {
        grid-template-columns: 1fr;
    }

    .section-heading-row {
        align-items: flex-start;
        gap: 0.6rem;
        flex-direction: column;
    }

    .workspace-hero,
    .workspace-filter,
    .form-page-hero,
    .form-submit-bar,
    .report-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-status {
        width: 100%;
    }

    .workspace-actions {
        justify-content: stretch;
    }

    .workspace-actions > *,
    .workspace-actions .btn,
    .workspace-actions .dropdown {
        width: 100%;
    }

    .form-field-grid,
    .line-field-grid,
    .dashboard-filter,
    .report-filter,
    .report-download-grid,
    .report-scope-note,
    .gst-phase-nav,
    .gst-phase-explainer {
        grid-template-columns: 1fr;
    }

    .form-submit-bar > div:last-child {
        flex-direction: column;
    }

    .report-hero-summary {
        min-width: 0;
    }

    .report-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .table-pagination-bar {
        grid-template-columns: 1fr;
    }

    .table-page-size-form {
        justify-content: flex-start;
    }

    .table-page-navigation {
        grid-column: auto;
        max-width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }

    .task-row,
    .notification-row,
    .search-result {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .notification-actions,
    .mobile-action-grid,
    .barcode-label-grid,
    .payslip-grid,
    .payslip-columns {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .payslip-columns > div {
        width: 100%;
    }
}

@media print {
    body.dashboard-page,
    .erp-app-shell,
    .erp-main {
        height: auto;
        overflow: visible;
    }

    .erp-sidebar,
    .erp-topbar,
    .no-print {
        display: none !important;
    }

    .erp-main {
        width: 100%;
        margin: 0;
    }

    .erp-content {
        padding: 0;
    }

    .barcode-label-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .barcode-label,
    .payslip-card {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* Company theme system and administration studios */
:root {
    --erp-chart-1: #1769aa;
    --erp-chart-2: #24a486;
    --erp-chart-3: #f39b39;
    --erp-chart-4: #7b61c9;
    --erp-chart-5: #e15b64;
    --erp-chart-6: #4d8bca;
}

:root[data-color-preset="indigo"] {
    --erp-navy-950: #15123a;
    --erp-navy-900: #25205b;
    --erp-navy-800: #38317b;
    --erp-blue-600: #5c54c7;
    --erp-blue-500: #766ee0;
    --erp-cyan-400: #a49cf5;
    --erp-chart-1: #6259d6;
    --erp-chart-2: #9478df;
}

:root[data-color-preset="emerald"] {
    --erp-navy-950: #082a28;
    --erp-navy-900: #0d443e;
    --erp-navy-800: #126158;
    --erp-blue-600: #167d68;
    --erp-blue-500: #1f9d7f;
    --erp-cyan-400: #54c9a9;
    --erp-chart-1: #16866b;
    --erp-chart-2: #38b893;
}

:root[data-color-preset="graphite"] {
    --erp-navy-950: #15191f;
    --erp-navy-900: #252c35;
    --erp-navy-800: #3a4552;
    --erp-blue-600: #536d86;
    --erp-blue-500: #6e8aa3;
    --erp-cyan-400: #9bafc1;
    --erp-chart-1: #4f6b83;
    --erp-chart-2: #7e94a7;
}

:root[data-color-preset="sunset"] {
    --erp-navy-950: #301a19;
    --erp-navy-900: #522723;
    --erp-navy-800: #72372f;
    --erp-blue-600: #a54d38;
    --erp-blue-500: #cf6748;
    --erp-cyan-400: #eea56f;
    --erp-chart-1: #c95f42;
    --erp-chart-2: #e29a5b;
}

[data-navigation-style="gradient"] .erp-sidebar {
    background: linear-gradient(165deg, var(--erp-navy-950), var(--erp-navy-800));
}

[data-navigation-style="light"] .erp-sidebar {
    border-right: 1px solid var(--erp-slate-200);
    background: var(--erp-white);
    color: var(--erp-slate-900);
}

[data-navigation-style="light"] .erp-sidebar .erp-brand,
[data-navigation-style="light"] .erp-sidebar .erp-brand small,
[data-navigation-style="light"] .erp-sidebar .nav-item,
[data-navigation-style="light"] .erp-sidebar .nav-section,
[data-navigation-style="light"] .erp-sidebar .sidebar-footer,
[data-navigation-style="light"] .erp-sidebar .environment-badge {
    color: var(--erp-slate-700);
}

[data-navigation-style="light"] .erp-sidebar .nav-icon {
    border-color: var(--erp-slate-200);
    background: var(--erp-slate-100);
    color: var(--erp-blue-600);
}

[data-navigation-style="light"] .erp-sidebar a.nav-item:hover,
[data-navigation-style="light"] .erp-sidebar .nav-item.active {
    background: var(--erp-slate-100);
    color: var(--erp-navy-900);
}

[data-background-style="clean"] body,
[data-background-style="clean"] .erp-main {
    background: var(--erp-white);
}

[data-background-style="grid"] .erp-main {
    background-color: var(--erp-slate-50);
    background-image: linear-gradient(var(--erp-slate-200) 1px, transparent 1px), linear-gradient(90deg, var(--erp-slate-200) 1px, transparent 1px);
    background-size: 32px 32px;
}

[data-background-style="gradient"] .erp-main {
    background: radial-gradient(circle at 85% 5%, color-mix(in srgb, var(--erp-blue-500) 12%, transparent), transparent 32%), var(--erp-slate-50);
}

[data-card-style="flat"] .metric-card,
[data-card-style="flat"] .module-card,
[data-card-style="flat"] .chart-card,
[data-card-style="flat"] .data-section,
[data-card-style="flat"] .studio-card {
    box-shadow: none;
}

[data-card-style="outline"] .metric-card,
[data-card-style="outline"] .module-card,
[data-card-style="outline"] .chart-card,
[data-card-style="outline"] .data-section,
[data-card-style="outline"] .studio-card {
    border-width: 2px;
    box-shadow: none;
}

[data-card-style="glass"] .metric-card,
[data-card-style="glass"] .module-card,
[data-card-style="glass"] .chart-card,
[data-card-style="glass"] .data-section,
/* ═══════════════════════════════════════════════════════════════
   ERP UI kit (2026-09) — sticky horizontal module subnav + colour
   stat cards shared across every module workspace.
   ═══════════════════════════════════════════════════════════════ */
.erp-subnav-groups {
    position: sticky;
    top: 76px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--erp-slate-200, #e2e8f0);
    border-radius: 0.8rem;
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 8px 22px rgb(11 39 72 / 8%);
    backdrop-filter: blur(4px);
}
.erp-subnav-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 0.1rem;
    scrollbar-width: thin;
}
.erp-subnav-row::-webkit-scrollbar { height: 5px; }
.erp-subnav-row::-webkit-scrollbar-thumb { border-radius: 999px; background: #b8c7d7; }
.erp-subnav-label {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: #0b2748;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.erp-subnav-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.52rem 0.95rem;
    border: 1px solid var(--erp-slate-200, #e2e8f0);
    border-radius: 999px;
    background: #fff;
    color: var(--erp-navy-900, #0b2748);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.erp-subnav-tab:hover {
    border-color: #2563b3;
    background: #eaf2fd;
    color: #0b2748;
    transform: translateY(-1px);
}
.erp-subnav-tab.active {
    border-color: var(--erp-navy-800, #12385f);
    background: linear-gradient(135deg, #12385f 0%, #0b2748 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgb(11 39 72 / 28%);
}
.erp-subnav-tab .nav-glyph {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 50%;
    background: rgb(11 39 72 / 8%);
    font-size: 0.68rem;
    font-weight: 800;
}
.erp-subnav-tab.active .nav-glyph { background: rgb(255 255 255 / 20%); }
.erp-subnav-hint { margin-left: auto; font-size: 0.68rem; color: var(--erp-slate-500, #64748b); white-space: nowrap; }

/* Colour stat cards — grid layout with detail totals */
.erp-stat-grid {
    display: grid;
    gap: 1rem;
    margin: 0 0 1.25rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1199px) { .erp-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .erp-stat-grid { grid-template-columns: 1fr; } }
.erp-stat-card {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    min-height: 112px;
    justify-content: center;
    padding: 1rem 1.2rem;
    border: 1px solid var(--erp-slate-200, #e2e8f0);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 8px 24px rgb(11 39 72 / 5%);
}
.erp-stat-card::after {
    position: absolute;
    right: -1.5rem;
    bottom: -2rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    opacity: 0.1;
    content: "";
    background: currentColor;
}
.erp-stat-card .stat-ico {
    display: grid;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.45rem;
    place-items: center;
    border-radius: 0.55rem;
    background: #eef3f9;
    font-size: 0.78rem;
    font-weight: 800;
}
.erp-stat-card .stat-num {
    display: block;
    color: var(--erp-navy-900, #0b2748);
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.erp-stat-card .stat-lbl {
    display: block;
    margin-top: 0.2rem;
    color: var(--erp-slate-500, #64748b);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.erp-stat-card.tone-navy { border-top: 3px solid #0b2748; color: #0b2748; }
.erp-stat-card.tone-navy .stat-ico { background: #e2e8f0; color: #0b2748; }
.erp-stat-card.tone-blue { border-top: 3px solid #2563b3; color: #1d4ed8; }
.erp-stat-card.tone-blue .stat-ico { background: #dbeafe; color: #1d4ed8; }
.erp-stat-card.tone-green { border-top: 3px solid #16a34a; color: #15803d; }
.erp-stat-card.tone-green .stat-ico { background: #dcfce7; color: #15803d; }
.erp-stat-card.tone-amber { border-top: 3px solid #d97706; color: #92400e; }
.erp-stat-card.tone-amber .stat-ico { background: #fef3c7; color: #92400e; }
.erp-stat-card.tone-rose { border-top: 3px solid #e11d48; color: #be123c; }
.erp-stat-card.tone-rose .stat-ico { background: #ffe4e6; color: #be123c; }
.erp-stat-card.tone-teal { border-top: 3px solid #0d9488; color: #0f766e; }
.erp-stat-card.tone-teal .stat-ico { background: #ccfbf1; color: #0f766e; }
.erp-stat-card.tone-violet { border-top: 3px solid #7c3aed; color: #6d28d9; }
.erp-stat-card.tone-violet .stat-ico { background: #ede9fe; color: #6d28d9; }
.erp-stat-card.tone-slate { border-top: 3px solid #475569; color: #334155; }
.erp-stat-card.tone-slate .stat-ico { background: #f1f5f9; color: #334155; }

@media print {
    .erp-subnav-groups,
    .erp-subnav,
    .workspace-actions,
    .workspace-filter { display: none !important; }
}

[data-card-style="glass"] .studio-card {
    background: color-mix(in srgb, var(--erp-white) 82%, transparent);
    box-shadow: 0 18px 42px rgb(11 39 72 / 10%);
    backdrop-filter: blur(15px);
}

[data-grid-style="striped"] .table tbody tr:nth-child(even) td,
[data-grid-style="striped"] .erp-table tbody tr:nth-child(even) td {
    background: var(--erp-slate-50);
}

[data-grid-style="elevated"] .table tbody tr,
[data-grid-style="elevated"] .erp-table tbody tr {
    box-shadow: 0 3px 12px rgb(11 39 72 / 6%);
}

[data-grid-style="compact"] .table > :not(caption) > * > *,
[data-grid-style="compact"] .erp-table th,
[data-grid-style="compact"] .erp-table td {
    padding: 0.45rem 0.6rem;
    font-size: 0.72rem;
}

[data-report-layout="compact"] .report-download-card,
[data-report-layout="compact"] .report-hero,
[data-report-layout="compact"] .report-scope-note,
[data-report-layout="compact"] .report-metrics .metric-card {
    min-height: auto;
    padding: 0.85rem;
}

[data-report-layout="detailed"] .report-download-card {
    min-height: 190px;
}

[data-report-layout="executive"] .report-hero {
    box-shadow: 0 20px 46px rgb(11 39 72 / 14%);
}

.report-format-preferred {
    box-shadow: inset 0 -2px 0 var(--erp-cyan-400);
}

:root[data-bs-theme="dark"] .erp-topbar,
:root[data-bs-theme="dark"] .metric-card,
:root[data-bs-theme="dark"] .module-card,
:root[data-bs-theme="dark"] .chart-card,
:root[data-bs-theme="dark"] .data-section,
:root[data-bs-theme="dark"] .studio-card,
:root[data-bs-theme="dark"] .process-flow,
:root[data-bs-theme="dark"] .error-card {
    background: var(--erp-white);
}

.nav-item-disabled {
    cursor: not-allowed;
    opacity: 0.46;
    user-select: none;
}

.nav-item-disabled small {
    margin-left: auto;
    font-size: 0.52rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.module-card-locked {
    filter: grayscale(0.65);
    opacity: 0.62;
}

.auth-flow-shell {
    display: grid;
    min-height: 100vh;
    padding: 2rem;
    place-items: center;
    background: radial-gradient(circle at 10% 15%, rgb(43 184 198 / 18%), transparent 28%), radial-gradient(circle at 90% 80%, rgb(22 131 216 / 17%), transparent 28%), var(--erp-slate-50);
}

.auth-flow-card {
    width: min(540px, 100%);
    padding: clamp(1.6rem, 6vw, 3.25rem);
    border: 1px solid var(--erp-slate-200);
    border-radius: 1.25rem;
    background: var(--erp-white);
    box-shadow: var(--erp-shadow);
}

.auth-flow-card h1 {
    margin: 0.55rem 0 0.7rem;
    color: var(--erp-navy-900);
    font-size: clamp(1.8rem, 5vw, 2.5rem);
}

.auth-flow-card > p,
.security-note {
    color: var(--erp-slate-500);
    line-height: 1.7;
}

.auth-success-mark {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.2rem;
    place-items: center;
    border-radius: 50%;
    background: #dff6ee;
    color: var(--erp-success);
    font-size: 1.5rem;
    font-weight: 800;
}

.password-help ul {
    margin: 0.5rem 0;
    padding-left: 1.1rem;
}

.access-denied-card {
    align-items: center;
    text-align: center;
}

.error-code-orbit {
    display: grid;
    width: 6.5rem;
    height: 6.5rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--erp-blue-500) 35%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--erp-blue-500) 10%, var(--erp-white));
    box-shadow: 0 0 0 0.7rem color-mix(in srgb, var(--erp-blue-500) 5%, transparent);
    color: var(--erp-blue-600);
    font-size: 1.4rem;
    font-weight: 900;
}

.access-reference,
.security-pill {
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: var(--erp-slate-100);
    color: var(--erp-slate-700);
    font-size: 0.7rem;
}

.admin-hero-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.6rem;
    border-radius: 0.9rem;
    background: linear-gradient(120deg, var(--erp-navy-950), var(--erp-navy-800));
    box-shadow: var(--erp-shadow);
    color: #fff;
}

.superadmin-launchpad {
    display: grid;
    margin-top: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.superadmin-launchpad > a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.75rem;
    background: var(--erp-white);
    box-shadow: 0 8px 22px rgb(11 39 72 / 4%);
    color: var(--erp-slate-900);
}

.superadmin-launchpad > a > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    place-items: center;
    border-radius: 0.55rem;
    background: var(--erp-slate-100);
    color: var(--erp-blue-600);
    font-size: 0.62rem;
    font-weight: 900;
}

.superadmin-launchpad div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.superadmin-launchpad small {
    margin-top: 0.2rem;
    color: var(--erp-slate-500);
    font-size: 0.65rem;
}

.admin-hero-panel h2 {
    margin: 0.25rem 0;
    font-size: 1.55rem;
}

.admin-hero-panel p {
    margin: 0;
    color: rgb(255 255 255 / 70%);
}

.admin-hero-panel .section-kicker {
    color: var(--erp-cyan-400);
}

.company-scope-chip,
.security-pill {
    flex: 0 0 auto;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
}

.studio-company-selector {
    display: flex;
    align-items: flex-end;
    gap: 0.7rem;
    margin: 1.2rem 0;
}

.studio-company-selector > div {
    width: min(430px, 100%);
}

.studio-grid,
.email-config-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.studio-card {
    padding: 1.35rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.8rem;
    background: var(--erp-white);
    box-shadow: 0 10px 28px rgb(11 39 72 / 5%);
}

.studio-card h3 {
    margin: 0.65rem 0 0.25rem;
    color: var(--erp-navy-900);
    font-size: 1rem;
}

.studio-card > p {
    min-height: 2.5rem;
    color: var(--erp-slate-500);
    font-size: 0.75rem;
}

.studio-icon {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border-radius: 0.55rem;
    background: var(--erp-slate-100);
    color: var(--erp-blue-600);
    font-size: 0.62rem;
    font-weight: 900;
}

.studio-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.8rem;
    background: var(--erp-white);
}

.access-help-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.7rem;
    background: var(--erp-white);
    color: var(--erp-slate-500);
    font-size: 0.7rem;
}

.access-policy-list {
    display: grid;
    gap: 0.6rem;
}

.access-policy-row {
    overflow: hidden;
    border: 1px solid var(--erp-slate-200);
    border-radius: 0.7rem;
    background: var(--erp-white);
}

.access-policy-child {
    margin-left: 1.5rem;
}

.access-policy-row summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    list-style: none;
}

.access-policy-row summary > span:first-child {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(160px, auto) 1fr;
    align-items: center;
    gap: 0.8rem;
}

.access-policy-row summary small,
.access-policy-row summary em {
    color: var(--erp-slate-500);
    font-size: 0.65rem;
    font-style: normal;
}

.policy-state {
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: var(--erp-slate-100);
    color: var(--erp-blue-600);
    font-size: 0.62rem;
    font-weight: 800;
}

.policy-editor {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.4fr auto auto;
    align-items: end;
    gap: 0.8rem;
    padding: 1rem;
    border-top: 1px solid var(--erp-slate-200);
    background: var(--erp-slate-50);
}

.policy-checkbox {
    align-self: center;
    white-space: nowrap;
}

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

.email-config-card {
    min-width: 0;
}

.email-config-card .security-pill {
    height: fit-content;
    border-color: #bfe9dc;
    background: #e8f8f2;
    color: var(--erp-success);
}

@media (max-width: 991.98px) {
    .studio-grid,
    .email-config-layout,
    .policy-editor {
        grid-template-columns: 1fr;
    }

    .admin-hero-panel,
    .studio-action-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .access-policy-child {
        margin-left: 0.65rem;
    }

    .access-policy-row summary > span:first-child {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .superadmin-launchpad {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .form-grid-2,
    .studio-grid {
        grid-template-columns: 1fr;
    }

    .studio-company-selector {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ===========================
 * MASTERS SUBNAVIGATION BAR
 * ============================ */

.erp-masters-subnav {
    position: sticky;
    top: calc(var(--erp-topbar-height, 60px) + 48px);
    z-index: 899;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--erp-white);
    border-bottom: 2px solid var(--erp-slate-200);
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
    scrollbar-width: none;
}

.erp-masters-subnav::-webkit-scrollbar {
    height: 4px;
}

.erp-masters-subnav::-webkit-scrollbar-thumb {
    background: var(--erp-slate-300);
    border-radius: 2px;
}

.erp-masters-subnav::-webkit-scrollbar-track {
    background: transparent;
}

.erp-masters-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.25rem 0 0.75rem;
    white-space: nowrap;
}

.erp-masters-row:first-child {
    border-right: 1px solid var(--erp-slate-200);
}

.erp-masters-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--erp-slate-500);
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.erp-masters-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.5rem;
    color: var(--erp-slate-700);
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}

.erp-masters-tab .nav-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    background: linear-gradient(135deg, var(--erp-slate-200), var(--erp-slate-300));
    color: var(--erp-navy-900);
    font-size: 0.58rem;
    font-weight: 800;
    border-radius: 0.4rem;
    letter-spacing: 0.04em;
}

.erp-masters-tab:hover {
    background: #f0f7ff;
    color: var(--erp-blue-700);
    border-color: var(--erp-slate-200);
}

.erp-masters-tab.active {
    background: linear-gradient(135deg, var(--erp-blue-500), var(--erp-cyan-400));
    color: #fff;
    border-color: var(--erp-blue-500);
}

.erp-masters-tab.active .nav-glyph {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.erp-masters-hint {
    margin-left: auto;
    padding: 0 1rem;
    font-size: 0.62rem;
    color: var(--erp-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .erp-masters-subnav {
        top: 101px;
    }
}

@media (prefers-color-scheme: dark) {
    .erp-masters-subnav {
        background: var(--erp-slate-900);
        border-bottom-color: var(--erp-slate-200);
        box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
    }

    .erp-masters-tab {
        color: var(--erp-slate-300);
    }

    .erp-masters-tab:hover {
        background: var(--erp-slate-800);
        color: var(--erp-cyan-400);
    }

    .erp-masters-label {
        color: var(--erp-slate-500);
    }

    .erp-masters-hint {
        color: var(--erp-slate-500);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================
 * MASTERS SUBNAV END
 * ============================ */
/* ===========================
 * REPORT TABLE SCROLL VIEWPORT
 * Report tables show five rows and scroll the remaining rows inside the card,
 * so the pagination bar below the table stays on screen.
 * static/js/report-table-scroll.js measures the real row height and writes an
 * exact max-height; the value below is the no-JS fallback (5 rows + header:
 * 0.9rem header padding + 5 x 0.85rem row padding at 0.72rem type ≈ 17rem).
 * ============================ */
.report-table-scroll {
    max-height: var(--erp-report-table-height, 17rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.report-table-scroll .erp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7f9fc;
    box-shadow: inset 0 -1px 0 var(--erp-slate-200);
}

.report-table-scroll::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}

.report-table-scroll::-webkit-scrollbar-track {
    background: var(--erp-slate-50);
}

.report-table-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--erp-slate-300);
}

.report-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--erp-slate-500);
}

.report-table-scroll.is-scrollable {
    border-color: var(--erp-slate-300);
}

@media (max-width: 767.98px) {
    /* Phones: the scroll card never takes more than half of the viewport. */
    .report-table-scroll {
        max-height: min(17rem, 52vh) !important;
    }
}

@media print {
    /* Printing and PDF export must show every visible row, not a scroll window. */
    .report-table-scroll {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Desktop navigation opens on hover and stays expanded when explicitly clicked. */
@media (min-width: 992px) {
    .erp-sidebar {
        --erp-sidebar-rail-width: 72px;
        width: var(--erp-sidebar-rail-width);
        padding: 1.1rem 0.45rem;
        overflow: visible;
        transition: width 180ms ease, padding 180ms ease;
    }

    .erp-sidebar .erp-brand {
        justify-content: center;
        padding: 0 0 0.9rem;
    }

    .erp-sidebar .erp-brand > span:last-child,
    .erp-sidebar .sidebar-footer {
        display: none;
    }

    .erp-sidebar .brand-mark {
        margin: 0;
    }

    .erp-nav {
        gap: 0.25rem;
        margin-top: 0.75rem;
        overflow-x: visible;
        padding: 0 0.1rem 0.6rem;
    }

    .nav-group {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
    }

    .nav-section {
        display: flex;
        min-height: 2.8rem;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin: 0;
        padding: 0.45rem;
        border: 0;
        border-radius: 0.45rem;
        background: transparent;
        color: rgb(255 255 255 / 48%);
        cursor: pointer;
        font: inherit;
        text-align: left;
        text-transform: none;
        letter-spacing: normal;
    }

    .nav-section:hover,
    .nav-group.is-open > .nav-section,
    .nav-group.has-active > .nav-section {
        background: rgb(22 131 216 / 17%);
        color: #fff;
    }

    .nav-section-icon {
        display: grid;
        width: 1.7rem;
        height: 1.7rem;
        flex: 0 0 1.7rem;
        place-items: center;
        border: 1px solid rgb(255 255 255 / 12%);
        border-radius: 0.35rem;
        background: rgb(255 255 255 / 5%);
        color: #8ccbd7;
        font-size: 0.68rem;
        font-weight: 850;
    }

    .nav-section-label,
    .nav-group-chevron {
        display: none;
    }

    .nav-group-items[hidden] {
        display: none !important;
    }

    .nav-group.is-open > .nav-group-items {
        position: fixed;
        z-index: 50;
        left: var(--erp-sidebar-rail-width);
        display: flex;
        width: 260px;
        max-height: min(78vh, 720px);
        flex-direction: column;
        gap: 0.2rem;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0.65rem;
        border: 1px solid rgb(255 255 255 / 12%);
        border-radius: 0 0.65rem 0.65rem 0;
        background: var(--erp-navy-950);
        box-shadow: 0 14px 32px rgb(4 18 34 / 28%);
        scrollbar-width: thin;
    }

    .nav-group.is-open > .nav-group-items::before {
        display: block;
        padding: 0.4rem 0.65rem 0.65rem;
        border-bottom: 1px solid rgb(255 255 255 / 12%);
        color: rgb(255 255 255 / 62%);
        content: attr(data-nav-title);
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .nav-group.is-open > .nav-group-items .nav-item {
        width: 100%;
    }

    .erp-app-shell.sidebar-expanded .erp-sidebar {
        width: 260px;
        padding: 1.6rem 1.25rem;
        overflow: hidden;
    }

    .erp-app-shell.sidebar-expanded .erp-sidebar .erp-brand {
        justify-content: flex-start;
        padding: 0 0.55rem 1.7rem;
    }

    .erp-app-shell.sidebar-expanded .erp-sidebar .erp-brand > span:last-child,
    .erp-app-shell.sidebar-expanded .erp-sidebar .sidebar-footer {
        display: flex;
    }

    .erp-app-shell.sidebar-expanded .erp-sidebar .erp-brand > span:last-child {
        flex-direction: column;
    }

    .erp-app-shell.sidebar-expanded .erp-nav {
        margin-top: 1.3rem;
        overflow-x: hidden;
        padding: 0 0.35rem 0.8rem 0;
    }

    .erp-app-shell.sidebar-expanded .nav-section {
        min-height: 2rem;
        justify-content: flex-start;
        margin: 0.6rem 0.15rem 0.15rem;
        padding: 0.25rem 0.45rem;
        color: rgb(255 255 255 / 55%);
        font-size: 0.59rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .erp-app-shell.sidebar-expanded .nav-section-icon {
        display: none;
    }

    .erp-app-shell.sidebar-expanded .nav-section-label,
    .erp-app-shell.sidebar-expanded .nav-group-chevron {
        display: inline;
    }

    .erp-app-shell.sidebar-expanded .nav-group-chevron {
        margin-left: auto;
        font-size: 1.1rem;
        line-height: 1;
        transition: transform 150ms ease;
    }

    .erp-app-shell.sidebar-expanded .nav-group.is-open > .nav-section .nav-group-chevron {
        transform: rotate(90deg);
    }

    .erp-app-shell.sidebar-expanded .nav-group.is-open > .nav-group-items {
        position: static;
        width: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .erp-app-shell.sidebar-expanded .nav-group.is-open > .nav-group-items::before {
        display: none;
    }

    .erp-app-shell.sidebar-expanded .sidebar-footer {
        flex-direction: column;
    }

    .erp-main {
        width: calc(100% - 72px);
        margin-left: 72px;
        transition: width 180ms ease, margin-left 180ms ease;
    }

    .erp-app-shell.sidebar-expanded .erp-main {
        width: calc(100% - 260px);
        margin-left: 260px;
    }

    .desktop-sidebar-toggle {
        display: inline-flex;
        width: 2.35rem;
        height: 2.35rem;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 1rem;
    }

    [data-navigation-style="light"] .erp-sidebar .nav-section {
        color: var(--erp-slate-700);
    }

    [data-navigation-style="light"] .erp-sidebar .nav-section:hover,
    [data-navigation-style="light"] .erp-sidebar .nav-group.is-open > .nav-section,
    [data-navigation-style="light"] .erp-sidebar .nav-group.has-active > .nav-section {
        background: var(--erp-slate-100);
        color: var(--erp-navy-900);
    }

    [data-navigation-style="light"] .erp-sidebar .nav-section-icon {
        border-color: var(--erp-slate-200);
        background: var(--erp-slate-100);
        color: var(--erp-blue-600);
    }

    [data-navigation-style="light"] .nav-group.is-open > .nav-group-items {
        border-color: var(--erp-slate-200);
        background: var(--erp-white);
    }

    [data-navigation-style="light"] .nav-group.is-open > .nav-group-items::before {
        border-color: var(--erp-slate-200);
        color: var(--erp-slate-700);
    }
}

@media (max-width: 991.98px) {
    .erp-main {
        width: 100%;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .erp-sidebar,
    .erp-main,
    .nav-group-chevron {
        transition: none !important;
    }
}

@media print {
    .erp-main {
        width: 100%;
        margin: 0;
        transition: none;
    }
}