:root {

    --bg: #f5f7fa;

    --surface: #ffffff;

    --surface-soft: #f8fafc;

    --text: #182230;

    --muted: #667085;

    --border: #e4e7ec;

    --primary: #175cd3;

    --primary-hover: #1849a9;

    --sidebar: #101828;

    --sidebar-soft: #1d2939;

    --sidebar-text: #d0d5dd;

    --danger-bg: #fef3f2;

    --danger: #b42318;

    --radius: 12px;

}



* { box-sizing: border-box; }



body {

    margin: 0;

    font-family: Inter, "Segoe UI", Arial, sans-serif;

    background: var(--bg);

    color: var(--text);

}



a { color: inherit; text-decoration: none; }



.app-shell {

    min-height: 100vh;

    display: grid;

    grid-template-columns: 250px 1fr;

}



.sidebar {

    background: var(--sidebar);

    color: var(--sidebar-text);

    padding: 24px 18px;

}



.brand, .login-brand {

    display: flex;

    gap: 12px;

    align-items: center;

}



.brand { margin-bottom: 38px; }



.brand-mark {

    width: 36px;

    height: 36px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background: #ffffff;

    color: #101828;

    font-weight: 800;

}



.brand-mark.large { width: 44px; height: 44px; }

.brand-name { color: #ffffff; font-size: 16px; font-weight: 700; }

.brand-subtitle { font-size: 12px; color: #98a2b3; margin-top: 2px; }



.nav-section {

    padding: 0 12px 8px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: #667085;

}



.nav-link {

    display: block;

    padding: 10px 12px;

    margin: 3px 0;

    border-radius: 8px;

    font-size: 14px;

}



.nav-link:hover, .nav-link.active {

    background: var(--sidebar-soft);

    color: #ffffff;

}



.main { min-width: 0; }



.topbar {

    height: 72px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 32px;

    background: var(--surface);

    border-bottom: 1px solid var(--border);

}



.topbar-company { font-weight: 700; }

.topbar-context { font-size: 12px; color: var(--muted); margin-top: 2px; }



.topbar-user {

    display: flex;

    align-items: center;

    gap: 16px;

    font-size: 14px;

}



.link-button {

    border: 0;

    background: none;

    color: var(--primary);

    cursor: pointer;

}



.content { padding: 32px; }



.page-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 28px;

}



.page-heading h1 { margin: 0; font-size: 28px; }

.page-heading p { margin: 8px 0 0; color: var(--muted); }



.setup-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 18px;

}



.setup-card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 22px;

    transition: transform .12s ease, box-shadow .12s ease;

}



.setup-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 22px rgba(16, 24, 40, .07);

}



.setup-card-index {

    font-size: 12px;

    font-weight: 700;

    color: var(--primary);

}



.setup-card h2 { margin: 14px 0 8px; font-size: 18px; }

.setup-card p { margin: 0; color: var(--muted); line-height: 1.5; }



.login-page {

    min-height: 100vh;

    display: grid;

    place-items: center;

    background: #eef2f6;

}



.login-card {

    width: min(420px, calc(100vw - 32px));

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 32px;

    box-shadow: 0 12px 35px rgba(16, 24, 40, .08);

}



.login-card .brand-name { color: var(--text); }

.login-card h1 { margin: 30px 0 4px; }

.muted { color: var(--muted); }



.form-stack { display: grid; gap: 18px; margin-top: 24px; }



.form-stack label { display: grid; gap: 7px; font-size: 13px; font-weight: 600; }



input {

    width: 100%;

    border: 1px solid #d0d5dd;

    border-radius: 8px;

    padding: 11px 12px;

    font: inherit;

}



input:focus {

    outline: 3px solid rgba(23, 92, 211, .12);

    border-color: var(--primary);

}



.primary-button {

    border: 0;

    border-radius: 8px;

    padding: 11px 14px;

    background: var(--primary);

    color: #ffffff;

    font-weight: 700;

    cursor: pointer;

}



.primary-button:hover { background: var(--primary-hover); }



.alert { padding: 12px; border-radius: 8px; margin-top: 18px; }

.alert.error { background: var(--danger-bg); color: var(--danger); }



@media (max-width: 800px) {

    .app-shell { grid-template-columns: 1fr; }

    .sidebar { display: none; }

    .content { padding: 20px; }

    .topbar { padding: 0 20px; }

}



.panel {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 24px;

}



.form-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

}



.form-field {

    display: grid;

    gap: 7px;

}



.form-field label {

    font-size: 13px;

    font-weight: 700;

}



.form-field input,

.form-field select {

    width: 100%;

    border: 1px solid #d0d5dd;

    border-radius: 8px;

    padding: 11px 12px;

    background: #ffffff;

    color: var(--text);

    font: inherit;

}



.form-field input:disabled {

    background: #f2f4f7;

    color: #667085;

}



.form-field input:focus,

.form-field select:focus {

    outline: 3px solid rgba(23, 92, 211, .12);

    border-color: var(--primary);

}



.field-help {

    color: var(--muted);

    font-size: 12px;

}



.checkbox-field {

    align-self: end;

}



.checkbox-field label {

    display: flex;

    align-items: center;

    gap: 9px;

}



.checkbox-field input {

    width: auto;

}



.form-actions {

    grid-column: 1 / -1;

    padding-top: 4px;

}



.alert.success {

    background: #ecfdf3;

    color: #027a48;

    margin-bottom: 18px;

}



@media (max-width: 900px) {

    .form-grid {

        grid-template-columns: 1fr;

    }

}



.section-panel {

    margin-bottom: 22px;

}



.section-heading {

    margin-bottom: 20px;

}



.section-heading h2 {

    margin: 0;

    font-size: 18px;

}



.section-heading p {

    margin: 6px 0 0;

    color: var(--muted);

    font-size: 13px;

}



.table-wrap {

    overflow-x: auto;

}



.data-table {

    width: 100%;

    border-collapse: collapse;

}



.data-table th {

    text-align: left;

    padding: 11px 12px;

    border-bottom: 1px solid var(--border);

    color: var(--muted);

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .03em;

}



.data-table td {

    padding: 12px;

    border-bottom: 1px solid var(--border);

    vertical-align: middle;

    font-size: 14px;

}



.data-table tbody tr:last-child td {

    border-bottom: 0;

}



.table-input {

    min-width: 220px;

    border: 1px solid #d0d5dd;

    border-radius: 7px;

    padding: 8px 10px;

    font: inherit;

}



.table-check {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}



.status-badge {

    display: inline-flex;

    border-radius: 999px;

    padding: 3px 8px;

    font-size: 12px;

    font-weight: 700;

}



.status-badge.active {

    background: #ecfdf3;

    color: #027a48;

}



.status-badge.inactive {

    background: #f2f4f7;

    color: #475467;

}



.secondary-button {

    border: 1px solid #d0d5dd;

    background: #ffffff;

    color: var(--text);

    border-radius: 7px;

    padding: 7px 12px;

    font-weight: 700;

    cursor: pointer;

}



.secondary-button:hover {

    background: #f9fafb;

}



.empty-state {

    text-align: center;

    color: var(--muted);

    padding: 28px !important;

}



.cell-sub {

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;

}



.status-badge.warning {

    background: #fffaeb;

    color: #b54708;

}



.allocation-builder {

    margin-top: 26px;

    border-top: 1px solid var(--border);

    padding-top: 22px;

}



.allocation-builder-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;

}



.allocation-builder-head h3 {

    margin: 0;

    font-size: 16px;

}



.allocation-builder-head p {

    margin: 5px 0 0;

    color: var(--muted);

    font-size: 13px;

}



.allocation-line {

    display: grid;

    grid-template-columns: minmax(260px, 2fr) minmax(160px, 1fr) auto;

    gap: 14px;

    align-items: end;

    padding: 14px;

    margin-bottom: 10px;

    background: var(--surface-soft);

    border: 1px solid var(--border);

    border-radius: 9px;

}



.remove-line-button {

    border: 0;

    background: transparent;

    color: #b42318;

    font-weight: 700;

    cursor: pointer;

    padding: 11px 4px;

}



.allocation-total {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    padding-top: 10px;

    color: var(--muted);

}



.valid-total {

    color: #027a48;

}



.invalid-total {

    color: #b42318;

}



@media (max-width: 900px) {

    .allocation-line {

        grid-template-columns: 1fr;

    }

}



.nav-section-spaced {

    margin-top: 28px;

}



.page-actions {

    display: flex;

    gap: 10px;

    align-items: center;

}



.primary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.table-link {

    color: var(--primary);

    font-weight: 700;

}



.numeric-cell {

    text-align: right;

    font-variant-numeric: tabular-nums;

}



.expense-line {

    display: grid;

    grid-template-columns: 2fr 1fr 1.5fr 2fr auto;

    gap: 12px;

    align-items: end;

    padding: 14px;

    margin-bottom: 10px;

    background: var(--surface-soft);

    border: 1px solid var(--border);

    border-radius: 9px;

}



.expense-total {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 14px;

    font-size: 16px;

}



.metric-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 22px;

}



.metric-card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 18px;

}



.metric-label {

    color: var(--muted);

    font-size: 12px;

    font-weight: 700;

}



.metric-value {

    margin-top: 8px;

    font-size: 24px;

    font-weight: 700;

}



.eyebrow {

    color: var(--primary);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;

}



.expense-status-draft {

    background: #f2f4f7;

    color: #475467;

}



.expense-status-submitted {

    background: #eff8ff;

    color: #175cd3;

}



.expense-status-returned {

    background: #fff6ed;

    color: #c4320a;

}



.expense-status-approved {

    background: #f4f3ff;

    color: #5925dc;

}



.expense-status-posted {

    background: #ecfdf3;

    color: #027a48;

}



@media (max-width: 1100px) {

    .expense-line {

        grid-template-columns: 1fr 1fr;

    }



    .metric-grid {

        grid-template-columns: 1fr;

    }

}



/* === Unified Obligation Gate === */



.obligation-page {

    max-width: 1180px;

}



.obligation-page-heading {

    margin-bottom: 24px;

}



.obligation-page .eyebrow {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    opacity: 0.65;

    margin-bottom: 5px;

}



.obligation-gates {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

    margin-bottom: 24px;

}



.obligation-gate {

    border: 1px solid #dfe4ea;

    border-radius: 16px;

    padding: 24px;

    background: #ffffff;

    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);

}



.obligation-gate-incoming {

    border-top: 6px solid #0f9aa8;

    background:

        linear-gradient(180deg, #edfafa 0, #ffffff 125px);

}



.obligation-gate-outgoing {

    border-top: 6px solid #e6952f;

    background:

        linear-gradient(180deg, #fff7e9 0, #ffffff 125px);

}



.obligation-gate-top {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 12px;

}



.obligation-direction-icon {

    width: 46px;

    height: 46px;

    border-radius: 12px;

    display: grid;

    place-items: center;

    font-size: 25px;

    font-weight: 800;

    background: rgba(255,255,255,0.8);

    border: 1px solid rgba(15,23,42,0.08);

}



.obligation-gate-incoming .obligation-direction-icon {

    color: #087d88;

}



.obligation-gate-outgoing .obligation-direction-icon {

    color: #b9650b;

}



.obligation-kicker {

    font-size: 12px;

    font-weight: 700;

    opacity: 0.62;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.obligation-gate h2,

.obligation-panel h2,

.obligation-example h2 {

    margin: 2px 0 4px;

}



.obligation-option-list {

    display: grid;

    gap: 10px;

    margin-top: 20px;

}



.obligation-option {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 14px;

    padding: 14px 15px;

    border: 1px solid #e5e9ef;

    border-radius: 11px;

    background: rgba(255,255,255,0.88);

    color: inherit;

    text-decoration: none;

}



.obligation-option strong {

    display: block;

    margin-bottom: 3px;

}



.obligation-option span:not(.obligation-badge) {

    font-size: 13px;

    opacity: 0.68;

}



.obligation-option-action {

    transition: transform 0.12s ease, box-shadow 0.12s ease;

}



.obligation-option-action:hover {

    transform: translateY(-1px);

    box-shadow: 0 5px 14px rgba(15,23,42,0.08);

}



.obligation-badge {

    flex: 0 0 auto;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

}



.obligation-badge-live {

    background: #e6f6ec;

    color: #247344;

}



.obligation-badge-planned {

    background: #f0f2f5;

    color: #6b7280;

}



.obligation-panel,

.obligation-example {

    border: 1px solid #dfe4ea;

    border-radius: 16px;

    padding: 22px;

    background: #ffffff;

    margin-bottom: 24px;

}



.obligation-panel-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 25px;

    margin-bottom: 17px;

}



.obligation-panel-heading p {

    max-width: 530px;

    margin: 0;

    font-size: 13px;

    opacity: 0.7;

}



.obligation-status-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

}



.obligation-status {

    padding: 12px;

    border-radius: 10px;

    border: 1px solid transparent;

}



.obligation-status strong,

.obligation-status span {

    display: block;

}



.obligation-status span {

    font-size: 12px;

    margin-top: 2px;

    opacity: 0.7;

}



.status-draft {

    background: #f3f4f6;

    border-color: #d9dde3;

}



.status-submitted {

    background: #edf5ff;

    border-color: #bdd8ff;

}



.status-approved {

    background: #f1edff;

    border-color: #cec2ff;

}



.status-treasury {

    background: #fff5df;

    border-color: #f1cf8a;

}



.status-posted {

    background: #eaf8ef;

    border-color: #bde4c9;

}



.status-exception {

    background: #fff0f0;

    border-color: #efc0c0;

}



.obligation-flow {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin: 16px 0;

}



.obligation-flow span {

    padding: 8px 10px;

    border: 1px solid #dfe4ea;

    border-radius: 9px;

    background: #f8fafc;

    font-size: 13px;

    font-weight: 600;

}



.obligation-flow b {

    opacity: 0.45;

}



.obligation-note {

    margin-bottom: 0;

    padding: 12px 14px;

    background: #f8fafc;

    border-left: 4px solid #64748b;

    border-radius: 7px;

    font-size: 13px;

}



@media (max-width: 900px) {

    .obligation-gates,

    .obligation-status-grid {

        grid-template-columns: 1fr;

    }



    .obligation-panel-heading {

        display: block;

    }



    .obligation-panel-heading p {

        margin-top: 8px;

    }

}



/* === Obligation Calculators === */



.obligation-tools {

    margin-bottom: 24px;

    border: 1px solid #dfe4ea;

    border-radius: 16px;

    background: #ffffff;

    overflow: hidden;

}



.obligation-tools > summary {

    cursor: pointer;

    list-style: none;

    padding: 17px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    font-weight: 700;

}



.obligation-tools > summary::-webkit-details-marker {

    display: none;

}



.obligation-tools > summary::after {

    content: "+";

    font-size: 20px;

    font-weight: 500;

    opacity: 0.55;

}



.obligation-tools[open] > summary::after {

    content: "-";

}



.obligation-tools-hint {

    margin-left: auto;

    font-size: 12px;

    font-weight: 500;

    opacity: 0.55;

}



.obligation-tools-grid {

    border-top: 1px solid #e7ebf0;

    padding: 20px;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

}



.calculator-card {

    border: 1px solid #e2e7ed;

    border-radius: 13px;

    padding: 18px;

    background: #fafbfc;

}



.calculator-card-heading {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

}



.calculator-card-heading h2 {

    margin: 0;

    font-size: 17px;

}



.calculator-card-heading span {

    font-size: 12px;

    opacity: 0.55;

}



.calculator-display {

    width: 100%;

    box-sizing: border-box;

    text-align: right;

    padding: 13px 14px;

    margin-bottom: 10px;

    border: 1px solid #ccd3dc;

    border-radius: 9px;

    background: #ffffff;

    font-size: 22px;

    font-weight: 600;

}



.calculator-keypad {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 7px;

}



.calculator-keypad button {

    min-height: 42px;

    border: 1px solid #d8dee6;

    border-radius: 8px;

    background: #ffffff;

    cursor: pointer;

    font-size: 15px;

}



.calculator-keypad button:hover {

    background: #f1f4f7;

}



.calculator-keypad .calc-zero {

    grid-column: span 2;

}



.calculator-keypad .calc-equals {

    font-weight: 700;

}



.interest-fields {

    display: grid;

    gap: 11px;

}



.interest-fields label span {

    display: block;

    margin-bottom: 5px;

    font-size: 12px;

    font-weight: 600;

}



.interest-fields input {

    width: 100%;

    box-sizing: border-box;

    padding: 10px 11px;

    border: 1px solid #ccd3dc;

    border-radius: 8px;

    background: #ffffff;

}



.interest-calculate-button {

    width: 100%;

    margin-top: 13px;

    padding: 10px 14px;

    border: 1px solid #bcc5d0;

    border-radius: 8px;

    background: #ffffff;

    font-weight: 700;

    cursor: pointer;

}



.interest-calculate-button:hover {

    background: #f1f4f7;

}



.interest-result {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 9px;

    margin-top: 13px;

}



.interest-result > div {

    border: 1px solid #e0e5eb;

    background: #ffffff;

    border-radius: 9px;

    padding: 11px;

}



.interest-result span,

.interest-result strong {

    display: block;

}



.interest-result span {

    font-size: 11px;

    opacity: 0.6;

    margin-bottom: 4px;

}



.interest-result strong {

    font-size: 17px;

}



.calculator-note {

    margin: 12px 0 0;

    font-size: 11px;

    opacity: 0.55;

}



@media (max-width: 900px) {

    .obligation-tools-grid {

        grid-template-columns: 1fr;

    }



    .obligation-tools-hint {

        display: none;

    }

}



/* === PIMS Obligation Geometry === */



.obligation-page {

    position: relative;

    isolation: isolate;

}



.obligation-page > *:not(.obligation-geometry) {

    position: relative;

    z-index: 2;

}



.obligation-geometry {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;

}



.geo {

    position: absolute;

    display: block;

    opacity: 0.09;

    animation: pimsFloat 18s ease-in-out infinite;

}



.geo-circle {

    border-radius: 50%;

    border: 2px solid currentColor;

}



.geo-square {

    border: 2px solid currentColor;

    border-radius: 10px;

    transform: rotate(9deg);

}



.geo-one {

    width: 42px;

    height: 42px;

    top: 26px;

    left: 49%;

    color: #0f9aa8;

}



.geo-two {

    width: 65px;

    height: 65px;

    top: 55px;

    right: 2%;

    color: #e6952f;

    animation-delay: -6s;

}



.geo-three {

    width: 34px;

    height: 34px;

    bottom: 18px;

    left: 3%;

    color: #0f9aa8;

    animation-delay: -10s;

}



.geo-triangle {

    width: 0;

    height: 0;

    border-left: 14px solid transparent;

    border-right: 14px solid transparent;

    border-bottom: 25px solid currentColor;

}



.geo-four {

    top: 70px;

    right: 16%;

    color: #e6952f;

    opacity: 0.07;

    animation-delay: -4s;

}



.geo-dots {

    width: 64px;

    height: 50px;

    background-image:

        radial-gradient(currentColor 1.4px, transparent 1.4px);

    background-size: 10px 10px;

}



.geo-five {

    top: 30px;

    right: 29%;

    color: #e6952f;

    opacity: 0.08;

    animation-delay: -8s;

}



.geo-wave {

    width: 105px;

    height: 35px;

    background:

        repeating-radial-gradient(

            ellipse at 50% 100%,

            transparent 0 8px,

            currentColor 9px 10px,

            transparent 11px 18px

        );

}



.geo-six {

    right: 8%;

    bottom: 8px;

    color: #0f9aa8;

    opacity: 0.045;

    animation-delay: -12s;

}



@keyframes pimsFloat {

    0%,

    100% {

        transform: translate3d(0, 0, 0);

    }



    50% {

        transform: translate3d(0, -8px, 0);

    }

}



.interest-days-result {

    margin-top: 13px;

    padding: 11px 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    border: 1px solid #e0e5eb;

    border-radius: 9px;

    background: #ffffff;

}



.interest-days-result span {

    font-size: 12px;

    opacity: 0.65;

}



.interest-days-result strong {

    font-size: 17px;

}



@media (prefers-reduced-motion: reduce) {

    .geo {

        animation: none;

    }

}



@media (max-width: 900px) {

    .geo {

        display: none;

    }

}



/* === PIMS Tool Launcher === */



.pims-tools {

    margin-top: 28px;

    border-top: 1px solid #e5e9ef;

    padding-top: 18px;

}



.pims-tools-heading h2 {

    margin: 0 0 12px;

    font-size: 18px;

}



.pims-tool-launcher {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

}



.pims-tool-button {

    padding: 9px 14px;

    border: 1px solid #d7dde5;

    border-radius: 9px;

    background: #ffffff;

    color: inherit;

    font-weight: 600;

    cursor: pointer;

}



.pims-tool-button:hover {

    background: #f6f8fa;

}



.pims-tool-button.active {

    background: #eef4f7;

    border-color: #bccbd3;

}



.pims-tool-workspace {

    margin-top: 14px;

}



.pims-tool-panel {

    max-width: 560px;

}



.pims-tool-panel[hidden] {

    display: none;

}



.pims-book-placeholder {

    padding: 20px;

    border: 1px solid #e0e5eb;

    border-radius: 12px;

    background: #fafbfc;

}



.pims-book-placeholder h2 {

    margin: 0 0 6px;

    font-size: 17px;

}



.pims-book-placeholder p {

    margin: 0 0 4px;

}



.pims-book-placeholder span {

    font-size: 12px;

    opacity: 0.58;

}



/* === PIMS Customer Withholding UI === */



.withholding-page {

    max-width: 1180px;

}



.pims-secondary-link {

    display: inline-flex;

    align-items: center;

    min-height: 38px;

    padding: 8px 13px;

    border: 1px solid #dce3e8;

    border-radius: 9px;

    background: #fff;

    color: inherit;

    text-decoration: none;

    font-weight: 600;

}



.withholding-card {

    margin-top: 18px;

    padding: 22px;

    border: 1px solid #e2e7eb;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.94);

}



.withholding-card-heading h2 {

    margin: 0;

    font-size: 18px;

}



.withholding-card-heading p {

    margin: 5px 0 0;

    opacity: 0.65;

}



.withholding-form {

    margin-top: 20px;

}



.withholding-form-grid {

    display: grid;

    grid-template-columns:

        repeat(2, minmax(0, 1fr));

    gap: 14px;

}



.withholding-field {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.withholding-field-wide {

    margin-bottom: 14px;

}



.withholding-field > span {

    font-size: 13px;

    font-weight: 650;

}



.withholding-field input,

.withholding-field select,

.withholding-field textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #d8dfe5;

    border-radius: 9px;

    padding: 10px 11px;

    background: #fff;

    color: inherit;

    font: inherit;

}



.withholding-receivable-summary {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin: 0 0 16px;

}



.withholding-receivable-summary > div {

    padding: 11px 13px;

    border-radius: 10px;

    background: #f6f9fa;

}



.withholding-receivable-summary span {

    display: block;

    margin-bottom: 3px;

    font-size: 11px;

    opacity: 0.6;

}



.withholding-certificate-section {

    margin: 18px 0;

    padding: 16px;

    border: 1px solid #e3e8ec;

    border-radius: 12px;

    background: #fafcfc;

}



.withholding-section-heading {

    display: flex;

    justify-content: space-between;

    gap: 18px;

    align-items: flex-start;

    margin-bottom: 14px;

}



.withholding-section-heading h3 {

    margin: 0;

    font-size: 15px;

}



.withholding-section-heading p {

    margin: 4px 0 0;

    font-size: 12px;

    opacity: 0.62;

}



.certificate-status,

.credit-status-posted {

    display: inline-flex;

    align-items: center;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

}



.certificate-pending {

    background: #fff4df;

    color: #865b13;

}



.certificate-received {

    background: #e8f6ef;

    color: #28694c;

}



.credit-status-posted {

    background: #e8f6ef;

    color: #28694c;

}



.withholding-form-actions {

    margin-top: 16px;

}



.pims-primary-button {

    border: 0;

    border-radius: 9px;

    padding: 10px 15px;

    background: #245f64;

    color: #fff;

    font: inherit;

    font-weight: 700;

    cursor: pointer;

}



.pims-form-error,

.pims-form-success {

    margin-top: 14px;

    padding: 11px 14px;

    border-radius: 9px;

}



.pims-form-error {

    background: #fff0f0;

    color: #8c3333;

}



.pims-form-success {

    background: #eaf7f1;

    color: #28694c;

}



.withholding-empty-state {

    margin-top: 18px;

    padding: 18px;

    border: 1px dashed #d8e0e5;

    border-radius: 11px;

    background: #fafbfc;

}



.withholding-empty-state p {

    margin: 5px 0 0;

    opacity: 0.65;

}



.withholding-empty-state.compact {

    margin-top: 14px;

}



.withholding-table-wrap {

    margin-top: 16px;

    overflow-x: auto;

}



.withholding-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

}



.withholding-table th,

.withholding-table td {

    padding: 10px 9px;

    border-bottom: 1px solid #edf0f2;

    text-align: left;

    white-space: nowrap;

}



.withholding-table th {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.03em;

    opacity: 0.6;

}



@media (max-width: 760px) {

    .withholding-form-grid,

    .withholding-receivable-summary {

        grid-template-columns: 1fr;

    }



    .withholding-section-heading {

        flex-direction: column;

    }

}



/* === PIMS Customer Receivable UI === */



.receivable-page {

    max-width: 1180px;

}



.receivable-card {

    margin-top: 18px;

    padding: 22px;

    border: 1px solid #e2e7eb;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.94);

}



.receivable-card-heading {

    display: flex;

    justify-content: space-between;

    gap: 18px;

    align-items: flex-start;

}



.receivable-card-heading h2 {

    margin: 0;

    font-size: 18px;

}



.receivable-card-heading p {

    margin: 5px 0 0;

    opacity: 0.65;

}



.receivable-workflow-note {

    display: inline-flex;

    padding: 5px 9px;

    border-radius: 999px;

    background: #f0f2f4;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;

}



.receivable-form-grid {

    display: grid;

    grid-template-columns:

        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-top: 20px;

}



.receivable-field {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.receivable-field-wide {

    grid-column: 1 / -1;

}



.receivable-field > span,

.invoice-line label > span {

    font-size: 13px;

    font-weight: 650;

}



.receivable-field input,

.receivable-field select,

.receivable-field textarea,

.invoice-line input,

.invoice-line select {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #d8dfe5;

    border-radius: 9px;

    padding: 10px 11px;

    background: #fff;

    color: inherit;

    font: inherit;

}



.receivable-description {

    margin-top: 14px;

}



.invoice-lines-heading {

    display: flex;

    justify-content: space-between;

    gap: 16px;

    align-items: center;

    margin-top: 24px;

    margin-bottom: 10px;

}



.invoice-lines-heading h3 {

    margin: 0;

    font-size: 15px;

}



.invoice-lines-heading p {

    margin: 3px 0 0;

    font-size: 12px;

    opacity: 0.62;

}



.pims-secondary-button {

    border: 1px solid #d8dfe5;

    border-radius: 9px;

    padding: 8px 12px;

    background: #fff;

    color: inherit;

    font: inherit;

    font-weight: 650;

    cursor: pointer;

}



.invoice-lines {

    display: flex;

    flex-direction: column;

    gap: 9px;

}



.invoice-line {

    display: grid;

    grid-template-columns:

        120px minmax(220px, 1fr) 110px 140px auto;

    gap: 9px;

    align-items: end;

    padding: 12px;

    border: 1px solid #e5e9ed;

    border-radius: 11px;

    background: #fafcfc;

}



.invoice-line label {

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.remove-invoice-line {

    min-height: 39px;

    border: 0;

    background: transparent;

    font: inherit;

    font-size: 12px;

    opacity: 0.58;

    cursor: pointer;

}



.remove-invoice-line:hover {

    opacity: 1;

}



.receivable-form-actions {

    margin-top: 18px;

}



.invoice-status {

    display: inline-flex;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

}



.invoice-status-draft {

    background: #f0f2f4;

    color: #596168;

}



.invoice-status-submitted {

    background: #e7f0fb;

    color: #315f91;

}



.invoice-status-approved {

    background: #eeeafb;

    color: #5c4791;

}



.invoice-status-posted,

.invoice-status-open,

.invoice-status-partially_paid,

.invoice-status-paid {

    background: #e8f6ef;

    color: #28694c;

}



.invoice-status-returned,

.invoice-status-cancelled {

    background: #fceaea;

    color: #913e3e;

}



@media (max-width: 900px) {



    .invoice-line {

        grid-template-columns:

            repeat(2, minmax(0, 1fr));

    }



    .invoice-line-description {

        grid-column: 1 / -1;

    }

}



@media (max-width: 760px) {



    .receivable-form-grid,

    .invoice-line {

        grid-template-columns: 1fr;

    }



    .receivable-field-wide,

    .invoice-line-description {

        grid-column: auto;

    }



    .receivable-card-heading {

        flex-direction: column;

    }

}



/* === PIMS Sales Invoice Workflow Actions === */



.invoice-action-cell {

    min-width: 130px;

}



.invoice-action-cell form {

    margin: 0;

}



.invoice-action-stack {

    display: flex;

    flex-direction: column;

    gap: 7px;

}



.invoice-action-button {

    min-height: 31px;

    padding: 6px 10px;

    border: 1px solid transparent;

    border-radius: 7px;

    font: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

}



.action-submit {

    background: #e7f0fb;

    color: #315f91;

}



.action-approve {

    background: #eeeafb;

    color: #5c4791;

}



.action-post {

    background: #e8f6ef;

    color: #28694c;

}



.action-return {

    background: #fceaea;

    color: #913e3e;

}



.action-reopen {

    background: #f0f2f4;

    color: #596168;

}



.invoice-return-form {

    display: flex;

    gap: 5px;

}



.invoice-return-form input {

    min-width: 130px;

    max-width: 180px;

    padding: 6px 8px;

    border: 1px solid #d8dfe5;

    border-radius: 7px;

    font: inherit;

    font-size: 12px;

}



.invoice-posted-note {

    font-size: 11px;

    font-weight: 650;

    color: #28694c;

}



.invoice-no-action {

    opacity: 0.4;

}



/* PLANEX-LOGIN-VISUAL-POLISH-V1 */



.login-page {

    min-height: 100vh;

    margin: 0;

    padding: 24px;

    display: grid;

    place-items: center;

    background:

        linear-gradient(

            145deg,

            #eef3f9 0%,

            #f8fafc 55%,

            #edf2f7 100%

        );

}



.login-shell {

    width: 100%;

    display: grid;

    place-items: center;

}



.login-card {

    width: min(440px, 100%);

    padding: 38px;

    border-radius: 18px;

    background: var(--surface);

    border: 1px solid var(--border);

    box-shadow:

        0 22px 60px rgba(16, 24, 40, .10);

}



.login-card .login-brand {

    padding-bottom: 22px;

    border-bottom: 1px solid var(--border);

}



.login-card .brand-mark.large {

    width: 48px;

    height: 48px;

    border-radius: 13px;

    background: var(--primary);

    color: #ffffff;

    font-size: 18px;

}



.login-card .brand-name {

    color: var(--text);

    font-size: 18px;

}



.login-card .brand-subtitle {

    margin-top: 3px;

    font-size: 12px;

}



.login-heading {

    margin-top: 28px;

}



.login-heading h1 {

    margin: 5px 0 8px;

    font-size: 28px;

    letter-spacing: -.02em;

}



.login-heading .muted {

    margin: 0;

    line-height: 1.55;

}



.login-form {

    margin-top: 24px;

}



.login-form input {

    min-height: 44px;

    background: #ffffff;

}



.login-form input::placeholder {

    color: #98a2b3;

}



.login-submit {

    width: 100%;

    min-height: 44px;

    margin-top: 2px;

    font-weight: 700;

    cursor: pointer;

}



.session-expired-alert {

    margin-top: 22px;

    border: 1px solid #fedf89;

    background: #fffaeb;

    color: #93370d;

}



.login-security-note {

    margin-top: 22px;

    padding-top: 18px;

    border-top: 1px solid var(--border);

    text-align: center;

    color: var(--muted);

    font-size: 12px;

}





@media (max-width: 520px) {



    .login-page {

        padding: 16px;

    }



    .login-card {

        padding: 28px 22px;

        border-radius: 14px;

    }



    .login-heading h1 {

        font-size: 25px;

    }

}



/* PLANEX-SHARED-SHELL-VISUAL-POLISH-V1 */



.topbar-company {

    line-height: 1.25;

}



.topbar-context {

    line-height: 1.35;

}



.topbar-user form {

    margin: 0;

}



.topbar-user .link-button {

    font: inherit;

    font-weight: 600;

}



@media (max-width: 800px) {



    .topbar {

        min-height: 68px;

        height: auto;

        padding-top: 12px;

        padding-bottom: 12px;

        gap: 16px;

    }



    .topbar-company {

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        max-width: 58vw;

    }



    .topbar-user {

        gap: 10px;

        flex: 0 0 auto;

    }

}



@media (max-width: 520px) {



    .topbar {

        align-items: flex-start;

    }



    .topbar-user > span {

        display: none;

    }



    .topbar-company {

        max-width: 70vw;

    }



    .page-actions {

        flex-wrap: wrap;

    }



    .primary-button,

    .secondary-button {

        max-width: 100%;

    }

}



/* PLANEX-PIMS-CANONICAL-COMPATIBILITY-V1 */



/*

Existing Payroll / Obligations / Treasury markup intentionally remains

unchanged. These compatibility rules harmonize the established PIMS

presentation family with the shared Planex UI language.

*/



.pims-primary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 39px;

    padding: 9px 14px;

    border: 0;

    border-radius: 8px;

    background: var(--primary);

    color: #ffffff;

    font: inherit;

    font-weight: 700;

    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    transition:

        background .12s ease,

        box-shadow .12s ease,

        transform .12s ease;

}



.pims-primary-button:hover {

    background: var(--primary-hover);

}



.pims-primary-button:focus-visible {

    outline: 3px solid rgba(23, 92, 211, .14);

    outline-offset: 2px;

}



.pims-secondary-button,

.pims-secondary-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 39px;

    padding: 8px 12px;

    border: 1px solid #d0d5dd;

    border-radius: 8px;

    background: #ffffff;

    color: var(--text);

    font: inherit;

    font-weight: 700;

    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    transition:

        background .12s ease,

        border-color .12s ease,

        box-shadow .12s ease;

}



.pims-secondary-button:hover,

.pims-secondary-link:hover {

    background: #f9fafb;

    border-color: #c6ccd4;

}



.pims-secondary-button:focus-visible,

.pims-secondary-link:focus-visible {

    outline: 3px solid rgba(23, 92, 211, .12);

    outline-offset: 2px;

}



.receivable-card {

    border-color: var(--border);

    border-radius: var(--radius);

    background: var(--surface);

}



.receivable-card-heading {

    gap: 16px;

}



.receivable-card-heading h2,

.receivable-card-heading h3 {

    color: var(--text);

}



.receivable-card-heading p {

    color: var(--muted);

    line-height: 1.45;

}



.receivable-form-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}



.receivable-form-actions form {

    margin: 0;

}



.invoice-action-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    line-height: 1.2;

}



.withholding-table-wrap {

    max-width: 100%;

    overflow-x: auto;

}



.withholding-table th {

    white-space: nowrap;

}



@media (max-width: 800px) {



    .receivable-card {

        padding: 18px;

    }



    .receivable-form-actions {

        gap: 8px;

    }

}



@media (max-width: 520px) {



    .receivable-card-heading {

        align-items: flex-start;

    }



    .receivable-form-actions {

        align-items: stretch;

    }



    .receivable-form-actions > .pims-primary-button,

    .receivable-form-actions > .pims-secondary-button,

    .receivable-form-actions > .pims-secondary-link {

        width: 100%;

    }



    .receivable-form-actions > form {

        width: 100%;

    }



    .receivable-form-actions > form >

    .pims-primary-button,

    .receivable-form-actions > form >

    .pims-secondary-button {

        width: 100%;

    }

}



/* PLANEX-SHARED-PAGE-SHELL-COMPATIBILITY-V1 */



/*

Compatibility layer for templates using the newer page-header/card

vocabulary alongside the established page-heading/panel vocabulary.

No workflow or business behavior is affected.

*/



.page-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 28px;

}



.page-header h1 {

    margin: 0;

    font-size: 28px;

}



.page-header h2 {

    margin: 0;

}



.page-subtitle {

    margin: 8px 0 0;

    color: var(--muted);

    line-height: 1.5;

}



.card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 24px;

    margin-bottom: 22px;

}



.page-heading,

.page-header {

    min-width: 0;

}



.page-heading > div:first-child,

.page-header > div:first-child {

    min-width: 0;

}



.workflow-panel-spacing {

    margin-top: 20px;

}



.workflow-review-grid {

    margin-bottom: 18px;

}



@media (max-width: 800px) {



    .page-heading,

    .page-header {

        gap: 16px;

        margin-bottom: 22px;

    }



    .card,

    .panel {

        padding: 20px;

    }

}



@media (max-width: 620px) {



    .page-heading,

    .page-header {

        flex-direction: column;

        align-items: stretch;

    }



    .page-heading > .page-actions,

    .page-header > .page-actions {

        width: 100%;

    }



    .card,

    .panel {

        padding: 18px;

    }



    .metric-grid {

        grid-template-columns: 1fr;

    }



    .form-grid {

        grid-template-columns: 1fr;

    }



    .form-actions {

        grid-column: auto;

    }

}







/* ==========================================================

   PLANEX-DELL-BLUE-THEME-V1

   ========================================================== */



:root {

    --bg: #f5f9fd;

    --surface: #ffffff;

    --surface-soft: #f7fbff;



    --text: #102a43;

    --muted: #627d98;



    --border: #d9e7f3;



    --primary: #0076ce;

    --primary-hover: #005fa3;



    --sidebar: #064b87;

    --sidebar-soft: rgba(255,255,255,.10);

    --sidebar-text: #eaf4ff;



    --planex-blue: #0076ce;

    --planex-blue-dark: #00579b;

    --planex-navy: #063b68;

    --planex-light-blue: #eaf5fd;

}





/* Shell */



.sidebar {

    background:

        linear-gradient(

            180deg,

            #075a9e 0%,

            #064b87 48%,

            #04365f 100%

        );



    color: #ffffff;

    padding: 24px 18px;

    box-shadow:

        8px 0 24px rgba(5,72,125,.12);

}





/* Brand */



.planex-brand {

    gap: 14px;

    margin-bottom: 34px;

    min-height: 52px;

}



.planex-wordmark {

    color: #ffffff;

    font-size: 25px;

    font-weight: 800;

    letter-spacing: -1px;

    line-height: 1;

}



.planex-brand-separator {

    width: 1px;

    height: 35px;

    background: rgba(255,255,255,.28);

}



.planex-brand-copy {

    min-width: 0;

}



.planex-brand .brand-name {

    color: #ffffff;

    font-size: 17px;

    font-weight: 750;

    letter-spacing: .01em;

}



.planex-brand .brand-subtitle {

    color: #c9e4f8;

    font-size: 12px;

    margin-top: 3px;

}





/* Navigation */



.planex-nav-group {

    border-radius: 9px;

}



.planex-nav-group[open] {

    margin-bottom: 5px;

}



.planex-nav-group .nav-link {

    color: #eaf4ff;

    border-radius: 8px;

    transition:

        background .16s ease,

        color .16s ease,

        transform .16s ease;

}



.planex-nav-group .nav-link:hover {

    background: rgba(255,255,255,.10);

    color: #ffffff;

}



.planex-nav-group .nav-link.active {

    background: #ffffff;

    color: #075a9e;

    font-weight: 700;

    box-shadow:

        0 5px 16px rgba(0,0,0,.10);

}





/* Top bar */



.topbar {

    background: #ffffff;

    border-bottom: 1px solid #dce9f4;

    box-shadow:

        0 1px 4px rgba(7,76,133,.04);

}



.topbar-company {

    color: #0b3154;

    font-weight: 750;

}



.topbar-context {

    color: #6b8197;

}



.link-button {

    color: var(--primary);

}



.link-button:hover {

    color: var(--primary-hover);

}





/* Main content */



.content {

    background:

        linear-gradient(

            180deg,

            #f8fbfe 0%,

            #f4f8fc 100%

        );

}



.page-heading h1,

.page-header h1 {

    color: #0d2d4b;

}





/* Cards / panels */



.card,

.panel {

    background: #ffffff;

    border-color: #dbe7f1;

    box-shadow:

        0 4px 14px rgba(15,72,118,.035);

}



.card:hover {

    border-color: #c8deef;

}





/* Buttons */



.primary-button,

.btn-primary {

    background: var(--primary);

    border-color: var(--primary);

    color: #ffffff;

}



.primary-button:hover,

.btn-primary:hover {

    background: var(--primary-hover);

    border-color: var(--primary-hover);

}



.secondary-button,

.btn-secondary {

    background: #ffffff;

    border-color: #bcd5e9;

    color: #075a9e;

}



.secondary-button:hover,

.btn-secondary:hover {

    background: #eef7fd;

    border-color: #8ec0e4;

}





/* Inputs */



input,

select,

textarea {

    border-color: #c9ddeb;

}



input:focus,

select:focus,

textarea:focus {

    outline: none;

    border-color: var(--primary);

    box-shadow:

        0 0 0 3px rgba(0,118,206,.10);

}





/* Scrollbar - desktop sidebar */



.sidebar {

    scrollbar-width: thin;

    scrollbar-color:

        rgba(255,255,255,.30)

        transparent;

}



.sidebar::-webkit-scrollbar {

    width: 7px;

}



.sidebar::-webkit-scrollbar-track {

    background: transparent;

}



.sidebar::-webkit-scrollbar-thumb {

    background: rgba(255,255,255,.24);

    border-radius: 10px;

}



.sidebar::-webkit-scrollbar-thumb:hover {

    background: rgba(255,255,255,.38);

}





/* ==========================================================

   PLANEX-COMPANY-SIDEBAR-LOGO-V1

   ========================================================== */



.planex-logo-wrap {

    width: 92px;

    height: 48px;

    flex: 0 0 92px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    overflow: hidden;

}



.planex-company-logo {

    display: block;

    max-width: 92px;

    max-height: 46px;

    width: auto;

    height: auto;

    object-fit: contain;

    object-position: left center;

}



.planex-logo-fallback {

    min-width: 48px;

    height: 38px;

    padding: 0 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.30);

    border-radius: 8px;

    background: rgba(255,255,255,.10);

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: .04em;

}



.planex-brand-separator {

    flex: 0 0 1px;

}



.planex-brand-copy {

    flex: 1 1 auto;

}



/* ============================================================
   PLANEX-ASSET-PROFESSIONAL-UI-V1
   Asset module visual hardening only.
   ============================================================ */

.asset-pro-page {
    --asset-blue: #0b69b7;
    --asset-blue-dark: #075a9e;
    --asset-blue-soft: #eef7fd;
    --asset-border: #dbe7f1;
    --asset-text: #17324d;
    --asset-muted: #66788a;

    width: 100%;
    min-width: 0;
}


/* Header */

.asset-pro-page > .page-header:first-of-type {
    align-items: center;
    margin-bottom: 22px;
}

.asset-pro-page > .page-header:first-of-type h1 {
    margin: 0;
    color: var(--asset-text);
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.asset-pro-page > .page-header:first-of-type p {
    margin: 6px 0 0;
    max-width: 720px;
    color: var(--asset-muted);
    line-height: 1.5;
}


/* Cards */

.asset-pro-page .card {
    border: 1px solid var(--asset-border);
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 4px 16px rgba(15, 72, 118, .045);
}

.asset-pro-page .card > .page-header {
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #edf2f6;
}

.asset-pro-page .card > .page-header h2,
.asset-pro-page .card > h2 {
    margin-top: 0;
    color: var(--asset-text);
    font-size: 18px;
}

.asset-pro-page .card > .page-header p {
    margin: 5px 0 0;
    color: var(--asset-muted);
    font-size: 13px;
}


/* Dashboard metrics */

.asset-pro-page .metric-grid {
    gap: 14px;
    margin-bottom: 20px;
}

.asset-pro-page .metric-card {
    position: relative;
    overflow: hidden;
    min-height: 105px;
    padding: 18px 20px;
    border: 1px solid var(--asset-border);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbfd
        );
}

.asset-pro-page .metric-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--asset-blue);
}

.asset-pro-page .metric-label {
    color: var(--asset-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.asset-pro-page .metric-value {
    margin-top: 10px;
    color: var(--asset-text);
    font-size: 24px;
    font-weight: 750;
}

.asset-pro-page .metric-value a {
    color: var(--asset-blue);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}


/* Forms */

.asset-pro-page .form-grid {
    gap: 17px 20px;
}

.asset-pro-page label {
    color: #344c61;
    font-size: 13px;
    font-weight: 650;
}

.asset-pro-page input,
.asset-pro-page select,
.asset-pro-page textarea {
    width: 100%;
    border: 1px solid #cbdbe7;
    border-radius: 9px;
    background: #fff;
    color: var(--asset-text);
    font: inherit;
}

.asset-pro-page input,
.asset-pro-page select {
    min-height: 42px;
    padding: 9px 11px;
}

.asset-pro-page textarea {
    min-height: 96px;
    margin-top: 7px;
    padding: 10px 11px;
    resize: vertical;
}

.asset-pro-page input:focus,
.asset-pro-page select:focus,
.asset-pro-page textarea:focus {
    outline: 0;
    border-color: #79acd3;
    box-shadow:
        0 0 0 3px rgba(11, 105, 183, .09);
}

.asset-pro-page input:disabled {
    background: #f4f7f9;
    color: #52697d;
}


/* Auto Asset Code */

.asset-pro-page
[data-planex-asset-code-auto="v1"] {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 9px 12px;
    border: 1px dashed #9fc6e3;
    border-radius: 9px;
    background: var(--asset-blue-soft);
    color: var(--asset-blue-dark);
    font-size: 13px;
    font-weight: 650;
}


/* Buttons */

.asset-pro-page .primary-button,
.asset-pro-page .secondary-button {
    min-height: 40px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.asset-pro-page .primary-button {
    padding: 10px 16px;
    box-shadow:
        0 2px 6px rgba(11, 105, 183, .14);
}

.asset-pro-page .secondary-button {
    padding: 9px 14px;
}


/* Filter */

.asset-pro-page
form[action="/finance/assets"]
.form-grid {
    grid-template-columns:
        repeat(2, minmax(180px, 320px));
    align-items: end;
}

.asset-pro-page
form[action="/finance/assets"]
.form-actions {
    margin-top: 17px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}


/* Register table */

.asset-pro-page .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #e2ecf3;
    border-radius: 11px;
}

.asset-pro-page .data-table {
    min-width: 860px;
    background: #fff;
}

.asset-pro-page .data-table thead {
    background: #f4f8fb;
}

.asset-pro-page .data-table th {
    padding: 11px 13px;
    border-bottom: 1px solid #dce7ef;
    color: #5b7184;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.asset-pro-page .data-table td {
    padding: 13px;
    border-bottom: 1px solid #e8eff4;
    color: #2c455b;
    font-size: 13px;
    vertical-align: middle;
}

.asset-pro-page .data-table tbody tr:hover {
    background: #f7fbfe;
}

.asset-pro-page .table-link {
    color: var(--asset-blue-dark);
    font-weight: 750;
    text-decoration: none;
}

.asset-pro-page .table-link:hover {
    text-decoration: underline;
}


/* Detail table */

.asset-pro-page
.card table:not(.data-table) {
    width: 100%;
    border-collapse: collapse;
}

.asset-pro-page
.card table:not(.data-table) th,
.asset-pro-page
.card table:not(.data-table) td {
    padding: 11px 13px;
    border-bottom: 1px solid #e8eff4;
    text-align: left;
    vertical-align: top;
}

.asset-pro-page
.card table:not(.data-table) th {
    width: 205px;
    background: #f7fafc;
    color: #60768a;
    font-size: 12px;
    font-weight: 700;
}

.asset-pro-page
.card table:not(.data-table) td {
    color: #253f55;
    font-size: 13px;
}


/* New / edit */

.asset-pro-page #asset-new-form,
.asset-pro-page #asset-edit-form {
    max-width: 1080px;
}

.asset-pro-page
#asset-new-form > .form-grid,
.asset-pro-page
#asset-edit-form > .form-grid {
    margin-bottom: 20px;
}

.asset-pro-page
#asset-new-form > .primary-button,
.asset-pro-page
#asset-edit-form > .primary-button {
    margin-top: 18px;
}


/* Status */

.asset-pro-page #asset-status-form {
    margin-top: 14px;
}

.asset-pro-page
#asset-status-form .form-grid {
    margin-bottom: 16px;
}


/* Responsive */

@media (max-width: 1100px) {

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

}

@media (max-width: 760px) {

    .asset-pro-page .metric-grid {
        grid-template-columns: 1fr;
    }

    .asset-pro-page
    form[action="/finance/assets"]
    .form-grid {
        grid-template-columns: 1fr;
    }

    .asset-pro-page
    .card table:not(.data-table) th {
        width: 145px;
    }

}

@media (max-width: 520px) {

    .asset-pro-page .card {
        padding: 16px;
    }

    .asset-pro-page
    > .page-header:first-of-type h1 {
        font-size: 24px;
    }

}