:root {
    --corporate-blue: #0b55a0;
    --deep-blue: #063b79;
    --header-blue: #176fbd;
    --light-blue: #dcecf9;
    --window-border: #7699bd;
    --panel-border: #9db4ca;
    --text: #16324a;
    --muted: #60788d;
    --surface: #f5f7f9;
    --control-border: #7e9db9;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--text);
}

/* Approved login field treatment: one continuous surface for icon, input and eye. */
.login-page {
  box-sizing: border-box;
}

.login-page .login-window {
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
}

.login-page #loginForm *:has(> #username),
.login-page #loginForm *:has(> #password) {
  overflow: hidden;
  border-color: #a9bddc;
  background: #fff;
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.login-page #loginForm *:has(> #username):focus-within,
.login-page #loginForm *:has(> #password):focus-within {
  border-color: #246dcc;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(36, 109, 204, 0.14);
}

.login-page #username,
.login-page #password,
.login-page #loginForm *:has(> #username) > *,
.login-page #loginForm *:has(> #password) > * {
  background-color: transparent;
}

.login-page #username:-webkit-autofill,
.login-page #username:-webkit-autofill:hover,
.login-page #username:-webkit-autofill:focus,
.login-page #password:-webkit-autofill,
.login-page #password:-webkit-autofill:hover,
.login-page #password:-webkit-autofill:focus {
  -webkit-text-fill-color: #092b58;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: #092b58;
}

@media (min-width: 769px) and (min-height: 720px) {
  .login-page .product-mark {
    width: clamp(72px, 8.5vh, 92px);
    height: clamp(72px, 8.5vh, 92px);
  }

  .login-page .login-card {
    width: min(460px, calc(100vw - 40px));
  }
}

@media (max-width: 768px), (max-height: 719px) {
  .login-page .login-window {
    min-height: calc(100vh - 24px);
    min-height: calc(100dvh - 24px);
  }
}

/* Login presentation polish: installed-PWA status and restrained corner accents. */
body.login-page .pwa-post-install {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "message action"
        "help help"
        "status status";
    column-gap: 12px;
    row-gap: 4px;
    margin-top: 3px;
    padding: 9px 10px 8px 34px;
    overflow: hidden;
    border: 1px solid rgba(33, 91, 163, .2);
    border-left: 3px solid #16845b;
    border-radius: 11px;
    background: linear-gradient(120deg, rgba(237, 248, 244, .96), rgba(246, 250, 255, .96));
    box-shadow: none;
}

body.login-page .pwa-post-install::before {
    content: "\2713";
    position: absolute;
    top: 10px;
    left: 10px;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #16845b;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

body.login-page .pwa-post-install-message {
    grid-area: message;
    align-self: center;
    margin: 0;
    color: #123b6b;
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.25;
}

body.login-page .pwa-shortcut-button {
    grid-area: action;
    align-self: center;
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

body.login-page .pwa-post-install-help {
    grid-area: help;
    margin: 0;
    color: #5d7392;
    font-size: .67rem;
    line-height: 1.25;
}

body.login-page .pwa-post-install-status {
    grid-area: status;
    margin: 0;
}

body.login-page .login-window::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    z-index: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 18px;
    pointer-events: none;
    background:
        linear-gradient(165deg, transparent 0 34%, #0a3978 35% 66%, #df2438 67% 79%, transparent 80%) left bottom / min(25vw, 350px) 18px no-repeat,
        linear-gradient(195deg, transparent 0 34%, #0a3978 35% 66%, #df2438 67% 79%, transparent 80%) right bottom / min(25vw, 350px) 18px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 520px) {
    body.login-page .pwa-post-install {
        grid-template-columns: 1fr;
        grid-template-areas:
            "message"
            "help"
            "action"
            "status";
    }

    body.login-page .pwa-shortcut-button {
        justify-self: stretch;
        margin-top: 2px;
    }

    body.login-page .login-window::after {
        background:
            linear-gradient(165deg, transparent 0 30%, #0a3978 31% 65%, #df2438 66% 79%, transparent 80%) left bottom / 36vw 14px no-repeat,
            linear-gradient(195deg, transparent 0 30%, #0a3978 31% 65%, #df2438 66% 79%, transparent 80%) right bottom / 36vw 14px no-repeat !important;
        height: 14px;
    }
}

/* Installed PWA repair: expose only the existing Windows shortcut action. */
body.login-page .pwa-post-install {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 5px 0 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.login-page .pwa-post-install::before,
body.login-page .pwa-post-install-message,
body.login-page .pwa-post-install-help,
body.login-page .pwa-post-install-status {
    display: none !important;
}

body.login-page .pwa-shortcut-button {
    width: auto;
    min-width: 190px;
    min-height: 38px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid rgba(21, 91, 180, .42);
    border-radius: 9px;
    background: rgba(255, 255, 255, .92);
    color: #104a9d;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.15;
    box-shadow: 0 3px 10px rgba(14, 52, 105, .07);
}

body.login-page .pwa-shortcut-button:hover {
    border-color: #155bb4;
    background: #f7faff;
}

body.login-page .pwa-shortcut-button:focus-visible {
    outline: 3px solid rgba(21, 91, 180, .18);
    outline-offset: 2px;
}

body.login-page .login-window::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

@media (max-width: 520px) {
    body.login-page .pwa-post-install {
        display: flex;
        padding-top: 5px;
    }

    body.login-page .pwa-shortcut-button {
        width: min(100%, 240px);
        min-width: 0;
    }
}

/* Optional post-install Windows shortcut helper; the PWA remains browser-managed. */
.login-page .pwa-post-install {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(21, 76, 145, 0.18);
  border-radius: 11px;
  background: rgba(239, 246, 255, 0.72);
  color: #173b6c;
  text-align: left;
}

.login-page .pwa-post-install[hidden] { display: none; }
.login-page .pwa-post-install p { margin: 0; line-height: 1.35; }
.login-page .pwa-post-install__message { font-size: 0.86rem; font-weight: 700; }
.login-page .pwa-post-install__help,
.login-page .pwa-post-install__status { color: #526b8f; font-size: 0.75rem; }

.login-page .pwa-shortcut-button {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid #1459b8;
  border-radius: 9px;
  background: #fff;
  color: #0d4da6;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.login-page .pwa-shortcut-button:hover { background: #edf5ff; }
.login-page .pwa-shortcut-button:focus-visible {
  outline: 3px solid rgba(20, 89, 184, 0.24);
  outline-offset: 2px;
}

/* Workflow grids: reserve space for actions and keep enquiry selection row-based. */
table.request-review-grid th:nth-child(1){width:8%!important}
table.request-review-grid th:nth-child(2){width:7%!important}
table.request-review-grid th:nth-child(3){width:7%!important}
table.request-review-grid th:nth-child(4){width:9%!important}
table.request-review-grid th:nth-child(5){width:7%!important}
table.request-review-grid th:nth-child(6){width:9%!important}
table.request-review-grid th:nth-child(7){width:9%!important}
table.request-review-grid th:nth-child(8){width:10%!important}
table.request-review-grid th:nth-child(9){width:34%!important}
table.request-review-grid .action-cell,.receipt-queue-grid .action-cell{white-space:nowrap;flex-wrap:nowrap}
.item-picker-table tbody tr{outline:none}
.item-picker-table tbody tr:focus{outline:none}
.item-picker-table td{cursor:default;user-select:none}
.receipt-entry[hidden],.receipt-queue-section[hidden]{display:none}
.receipt-queue-grid{table-layout:fixed;min-width:1050px}
.receipt-queue-grid th:nth-child(1){width:8%}
.receipt-queue-grid th:nth-child(2){width:9%}
.receipt-queue-grid th:nth-child(3){width:9%}
.receipt-queue-grid th:nth-child(4){width:11%}
.receipt-queue-grid th:nth-child(5){width:16%}
.receipt-queue-grid th:nth-child(6){width:12%}
.receipt-queue-grid th:nth-child(7){width:12%}
.receipt-queue-grid th:nth-child(8){width:23%}

/* Selaras ERP Platinum theme — shared application palette */
:root {
    --corporate-blue: #0876bd;
    --deep-blue: #06477f;
    --header-blue: #168dce;
    --light-blue: #e5f1fa;
    --window-border: #4d7da5;
    --panel-border: #b9ccdc;
    --text: #0b3458;
    --muted: #607d96;
    --surface: #f5f9fc;
    --control-border: #7ba3c4;
    --accent-gold: #f2bb32;
}

body {
    color: var(--text);
    background: radial-gradient(circle at 50% 0, #f7fbfe 0, #dfeaf2 58%, #ccdce8 100%);
}

.erp-desktop,
.access-window {
    overflow: hidden;
    border-color: var(--window-border);
    border-radius: 15px;
    background: #f4f8fb;
    box-shadow: 0 10px 28px rgba(18, 62, 96, .24);
}

.brand-header,
.purchase-header {
    border-bottom: 4px solid var(--accent-gold);
    background: linear-gradient(112deg, #275f96 0%, #0575ba 55%, #4aa6db 100%);
}

.brand-title,
.purchase-header h1 {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    text-shadow: 0 2px 1px rgba(0, 48, 88, .45);
}

.primary-button,
.access-button.primary,
button.primary {
    border-color: #07548b;
    color: #fff;
    background: linear-gradient(#1494df, #0064a7);
    box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 59, 102, .2);
}

input:focus,
select:focus,
textarea:focus {
    border-color: #168dce;
    outline: 2px solid rgba(44, 153, 216, .2);
}
.request-editor{width:min(900px,calc(100% - 30px));border:1px solid var(--window-border);border-radius:12px;color:var(--text);background:var(--surface);box-shadow:0 22px 60px rgba(8,48,78,.35)}
.request-editor::backdrop{background:rgba(4,38,65,.55)}.request-editor form{display:grid;gap:14px}.request-editor h2,.request-editor p{margin:0}.editor-line{display:grid;grid-template-columns:2fr 1fr 1fr auto;align-items:end;gap:10px;margin:8px 0}.editor-line label{display:grid;gap:4px;font-size:11px;font-weight:700}.editor-line input{width:100%}.action-cell{display:flex;flex-wrap:wrap;gap:5px}@media(max-width:700px){.editor-line{grid-template-columns:1fr;padding-bottom:12px;border-bottom:1px solid var(--panel-border)}}
.item-picker{width:min(900px,calc(100% - 28px));height:min(690px,calc(100% - 28px));padding:0;border:1px solid var(--window-border);border-radius:13px;color:var(--text);background:#f4f8fb;box-shadow:0 24px 70px rgba(4,38,65,.42)}.item-picker::backdrop{background:rgba(4,35,60,.5)}.item-picker-window{display:grid;height:100%;grid-template-rows:auto auto 1fr auto;gap:12px;padding:0 16px 14px}.item-picker-header{display:flex;align-items:center;justify-content:space-between;margin:0 -16px;padding:17px 18px;border-bottom:4px solid var(--accent-gold);color:#fff;background:linear-gradient(112deg,#275f96,#0575ba 56%,#4aa6db)}.item-picker-header h2{margin:0;font:italic 700 31px Georgia}.item-picker-header p{margin:4px 0 0;color:#e6f4fc;font-size:11px}.item-picker-search{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;font-weight:700}.item-picker-table{min-height:0;overflow:auto;border:1px solid var(--panel-border);background:#fff}.item-picker-table tbody tr{cursor:pointer}.item-picker-table tbody tr:hover,.item-picker-table tbody tr.selected{background:#d8effc;outline:1px solid #168dce}.item-picker .dialog-actions{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}
.item-search-results{display:none!important}.keyboard-hint{align-self:center;color:var(--muted);font-size:11px;font-style:italic}
html,body{min-height:100%;overflow-x:hidden;overflow-y:auto}.erp-desktop{display:block;min-height:100vh;overflow-y:auto}.access-window{margin:0 auto}.request-editor{max-height:calc(100vh - 32px);overflow:auto}.request-editor form{min-width:760px}.review-editor-table{max-height:46vh;overflow:auto;border:1px solid var(--panel-border)}.review-editor-table .access-grid{min-width:850px}.review-line-code{width:100%;cursor:pointer}.review-line-amount{white-space:nowrap}
.item-search-wrap,.line-item-control{display:grid;grid-template-columns:minmax(130px,1fr) auto;gap:5px}.item-picker-trigger{border:1px solid #7399b8;border-radius:4px;color:#0b4f82;background:linear-gradient(#fff,#e3eff7);padding:5px 8px;cursor:pointer}.item-picker-trigger:focus{outline:2px solid rgba(22,141,206,.3)}@media(min-width:761px){.item-picker-trigger{font-size:10px}}@media(max-width:760px){.request-editor form{min-width:680px}.item-picker-trigger{min-height:40px;padding-inline:12px}}
.request-review-grid{table-layout:fixed;min-width:1050px}.request-review-grid th:first-child{width:9%}.request-review-grid th:nth-child(2){width:8%}.request-review-grid th:nth-child(3){width:8%}.request-review-grid th:nth-child(4){width:10%}.request-review-grid th:nth-child(5){width:8%}.request-review-grid th:nth-child(6){width:10%}.request-review-grid th:nth-child(7){width:10%}.request-review-grid th:nth-child(8){width:10%}.request-review-grid th:nth-child(9){width:27%}.request-review-grid .action-cell{white-space:nowrap;align-content:center}.request-review-grid .action-cell .toolbar-button{padding:6px 9px}
.history-document-grid{table-layout:fixed;min-width:820px}.history-document-grid th:first-child{width:12%}.history-document-grid th:nth-child(2){width:12%}.history-document-grid th:last-child{width:10%}.history-document-grid td:first-child{font-weight:700}.history-document-grid td:last-child{white-space:nowrap}
.receipt-form{grid-template-columns:1fr 1.25fr 2fr .7fr 1.2fr}.receipt-lines-wrap{overflow:auto}.receipt-lines-grid{width:100%;min-width:1080px;table-layout:fixed}.receipt-lines-grid th:nth-child(1){width:12%}.receipt-lines-grid th:nth-child(2){width:20%}.receipt-lines-grid th:nth-child(3){width:6%}.receipt-lines-grid th:nth-child(4){width:7%}.receipt-lines-grid th:nth-child(5){width:9%}.receipt-lines-grid th:nth-child(6){width:8%}.receipt-lines-grid th:nth-child(7){width:14%}.receipt-lines-grid th:nth-child(8){width:11%}.receipt-lines-grid th:nth-child(9){width:13%}.receipt-lines-grid th{overflow-wrap:anywhere}.receipt-lines-grid td:nth-child(n+4){font-variant-numeric:tabular-nums}.receipt-lines-grid td:last-child{white-space:nowrap;text-align:right}.receipt-lines-grid .receive-qty,.receipt-lines-grid .receive-price{display:block;width:100%;min-width:0;padding:7px 8px}.receipt-actions{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;margin-top:18px}.receipt-actions label{display:grid;gap:6px;font-weight:700}.receipt-actions textarea{width:100%}@media(max-width:760px){.receipt-form,.receipt-actions{grid-template-columns:1fr}}
.receipt-lines-grid .receive-qty{pointer-events:auto!important;background:#fff!important;color:#092f55!important;cursor:text}.request-view-window{display:grid;gap:18px}.request-view-window .dialog-actions{position:sticky;bottom:-1px;z-index:2;justify-content:flex-end;background:var(--surface);padding-bottom:4px}.po-revision-reason{display:grid;gap:6px;font-size:11px;font-weight:700}.po-revision-reason textarea{width:100%}.po-revise-qty+small{display:block;margin-top:4px;color:var(--muted);font-size:10px;white-space:nowrap}

* {
    box-sizing: border-box;
}

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

button,
input,
select {
    font: inherit;
}

.erp-desktop {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, .95), transparent 34%),
        linear-gradient(145deg, #cbd9e6, #eef3f7 48%, #b9cbdc);
}

.access-window {
    width: min(100%, 920px);
    overflow: hidden;
    border: 1px solid #4f7599;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 24px 65px rgba(18, 50, 80, .32), 0 2px 8px rgba(0, 0, 0, .2);
}

.login-window {
    max-width: 760px;
}

.purchase-window {
    max-width: 1160px;
}

.windows-titlebar {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    color: #123957;
    background: linear-gradient(#fdfefe, #dae7f1);
    border-bottom: 1px solid #8ca8bf;
    font-size: 13px;
    user-select: none;
}

.titlebar-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.app-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 4px;
    color: white;
    background: linear-gradient(135deg, #2283d1, #07467f);
    font-size: 12px;
    font-weight: 800;
}

.window-controls {
    display: flex;
    height: 35px;
}

.window-controls span {
    display: grid;
    width: 44px;
    place-items: center;
    color: #294b68;
    font-size: 15px;
}

.window-controls .window-close {
    width: 48px;
}

.brand-header {
    position: relative;
    display: flex;
    min-height: 112px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 21px 34px;
    color: white;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .18), transparent 38%),
        linear-gradient(110deg, #083d79, #1878c5 62%, #4ca0dc);
    border-bottom: 4px solid #f5c142;
}

.brand-header::after {
    position: absolute;
    right: 110px;
    bottom: -62px;
    width: 260px;
    height: 145px;
    border: 2px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    content: "";
    transform: rotate(-10deg);
}

.compact-header {
    min-height: 91px;
    padding-block: 14px;
}

.product-name {
    position: relative;
    z-index: 1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 4vw, 38px);
    font-style: italic;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.05;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    text-shadow: 0 2px 2px rgba(0, 30, 70, .45);
}

.product-subtitle {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    color: #e8f5ff;
    font-size: 14px;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.cloud-mark {
    position: relative;
    z-index: 1;
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 47, 97, .23);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, .15);
    font-size: 17px;
    font-weight: 800;
}

.window-body {
    background: linear-gradient(#f9fbfd, #edf2f6);
}

.login-body {
    display: grid;
    grid-template-columns: 210px 1fr;
    min-height: 340px;
}

.login-art {
    position: relative;
    overflow: hidden;
    border-right: 1px solid #b4c5d3;
    background:
        linear-gradient(rgba(255, 255, 255, .55), rgba(220, 236, 249, .55)),
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(36, 111, 169, .08) 19px);
}

.database-disc {
    position: absolute;
    top: 82px;
    left: 42px;
    width: 114px;
    height: 120px;
    border: 3px solid #4a80aa;
    border-radius: 50% / 18%;
    background: linear-gradient(90deg, #9ec8e8, #eef9ff 45%, #77add4);
    box-shadow: inset 0 -22px 0 rgba(35, 100, 151, .18), 0 9px 18px rgba(31, 72, 106, .22);
}

.database-disc::before,
.database-disc::after {
    position: absolute;
    left: -3px;
    width: 114px;
    height: 27px;
    border: 3px solid #4a80aa;
    border-radius: 50%;
    content: "";
}

.database-disc::before {
    top: -3px;
    background: linear-gradient(#eafdff, #8cbadc);
}

.database-disc::after {
    bottom: -3px;
    border-top-color: transparent;
}

.shield {
    position: absolute;
    top: 168px;
    left: 112px;
    display: grid;
    width: 62px;
    height: 70px;
    place-items: center;
    border: 3px solid white;
    border-radius: 8px 8px 28px 28px;
    color: white;
    background: linear-gradient(#2b8cd3, #07508c);
    box-shadow: 0 7px 14px rgba(26, 73, 112, .28);
    font-size: 28px;
    font-weight: 800;
}

.login-panel {
    padding: 34px 40px 30px;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid #bbcedd;
}

.section-heading h1,
.section-heading h2,
.detail-titlebar h2 {
    margin: 0;
    color: var(--deep-blue);
}

.section-heading h1 {
    font-size: 23px;
    font-weight: 600;
}

.section-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.heading-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #91b1cc;
    border-radius: 7px;
    background: linear-gradient(#fff, #dbeaf5);
    box-shadow: inset 0 1px 0 white;
    font-size: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
}

.form-row label,
.field-group label {
    color: #264a67;
    font-size: 13px;
    font-weight: 600;
}

input,
select {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--control-border);
    border-radius: 2px;
    color: #183950;
    background: white;
    box-shadow: inset 1px 1px 2px rgba(29, 67, 99, .12);
    padding: 6px 9px;
    outline: none;
}

input:focus,
select:focus {
    border-color: #1976bd;
    box-shadow: 0 0 0 2px rgba(25, 118, 189, .17), inset 1px 1px 2px rgba(29, 67, 99, .1);
}

input[readonly] {
    color: #62788a;
    background: #edf1f4;
}

.form-message {
    min-height: 22px;
    margin: 4px 0 10px 124px;
    color: #a32828;
    font-size: 13px;
}

.form-message.success {
    color: #1b6a34;
}

.button-row {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.access-button,
.toolbar-button {
    min-width: 92px;
    border: 1px solid #7892aa;
    border-radius: 3px;
    color: #1e405c;
    background: linear-gradient(#fff, #dce6ee);
    box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(31, 62, 88, .12);
    padding: 7px 15px;
    cursor: pointer;
}

.toolbar-link {
    display: inline-block;
    text-decoration: none;
}

.access-button:hover,
.toolbar-button:hover {
    border-color: #2d75ad;
    background: linear-gradient(#fff, #cfe7f8);
}

.primary-button {
    border-color: #0b4e88;
    color: white;
    background: linear-gradient(#2587cf, #075194);
    text-shadow: 0 -1px 0 #17496f;
}

.primary-button:hover {
    color: white;
    background: linear-gradient(#3c9be0, #0861a8);
}

.danger-button {
    border-color: #c98f94;
    color: #8b343b;
    background: linear-gradient(#fff, #f7e4e5);
}

.danger-button:hover {
    border-color: #ad5f66;
    color: #76282e;
    background: linear-gradient(#fff, #f4d4d6);
}

button:disabled {
    color: #8a969f;
    cursor: not-allowed;
    opacity: .7;
}

.status-bar {
    display: flex;
    min-height: 27px;
    align-items: center;
    justify-content: space-between;
    padding: 3px 10px;
    border-top: 1px solid #aabcc9;
    color: #49677e;
    background: linear-gradient(#f3f6f8, #dce5eb);
    font-size: 11px;
}

.access-toolbar {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid #9fb4c5;
    background: linear-gradient(#f7f9fa, #dce5eb);
}

.toolbar-button {
    min-width: auto;
    padding: 5px 12px;
    font-size: 12px;
}

.toolbar-spacer {
    flex: 1;
}

.signed-in-user {
    color: #3c5d77;
    font-size: 12px;
}

.purchase-body {
    padding: 24px 28px 30px;
}

.purchase-heading {
    margin-bottom: 16px;
}

.data-status {
    margin-bottom: 17px;
    border: 1px solid #a4bdd1;
    border-radius: 3px;
    color: #345d7c;
    background: #e6f2fb;
    padding: 8px 11px;
    font-size: 12px;
}

.data-status.error {
    border-color: #d5af74;
    color: #784f17;
    background: #fff4db;
}

.purchase-form {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr .7fr 1.2fr;
    gap: 14px;
    margin-bottom: 22px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: #fff;
    padding: 18px;
}

.field-group {
    display: grid;
    gap: 6px;
}

.purchase-form .request-form-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    min-height: 0;
    margin: -2px 0 2px;
    padding: 0 0 10px;
    border-bottom: 1px solid #d6e2eb;
}

.purchase-form .request-form-heading h1 {
    margin: 0;
    color: var(--deep-blue);
    font-size: 20px;
    line-height: 1.2;
}

.purchase-form .request-form-heading p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.detail-section {
    overflow: visible;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: white;
}

.detail-titlebar {
    display: flex;
    min-height: 45px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid #9db4c7;
    background: linear-gradient(#eef5fa, #d5e4ef);
}

.detail-titlebar h2 {
    font-size: 15px;
}

.small-button {
    min-width: auto;
    padding: 5px 10px;
    font-size: 12px;
}

.table-wrap {
    overflow: visible;
}

.access-grid {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 12px;
}

.access-grid th {
    border-right: 1px solid #9eb2c2;
    border-bottom: 1px solid #849eb3;
    color: #284e6b;
    background: linear-gradient(#f7fafc, #dce7ee);
    padding: 8px;
    text-align: left;
}

.access-grid td {
    border-right: 1px solid #d0dbe3;
    border-bottom: 1px solid #d0dbe3;
    padding: 8px;
}

.access-grid th:first-child {
    width: 28%;
}

.item-search-wrap {
    position: relative;
    min-width: 230px;
}

.item-search {
    width: 100%;
}

.item-search-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 3px);
    left: 0;
    display: none;
    width: min(620px, 75vw);
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #7897af;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(22, 56, 82, .22);
}

.item-search-results.open {
    display: block;
}

.item-search-option {
    display: grid;
    grid-template-columns: 125px minmax(300px, 1fr);
    width: 100%;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid #d7e1e8;
    background: #fff;
    padding: 7px 9px;
    color: #163d5b;
    text-align: left;
    cursor: pointer;
}

.item-search-option:hover,
.item-search-option.active {
    background: #dcecf8;
}

.item-search-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-search-empty {
    padding: 12px;
    color: #728596;
}

.empty-row td {
    color: #728596;
    padding: 28px;
    text-align: center;
}

@media (max-width: 760px) {
    .erp-desktop {
        display: block;
        padding: 12px;
    }

    .access-window {
        margin: 0 auto;
    }

    .login-body {
        grid-template-columns: 1fr;
    }

    .login-art {
        display: none;
    }

    .login-panel {
        padding: 26px 22px;
    }

    .brand-header {
        min-height: 96px;
        padding: 18px 22px;
    }

    .cloud-mark {
        width: 55px;
        height: 55px;
    }

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

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

    .item-search-results {
        position: static;
        width: 100%;
        margin-top: 3px;
    }

    .item-search-option {
        grid-template-columns: 100px minmax(180px, 1fr);
    }
}

@media (max-width: 500px) {
    .window-controls {
        display: none;
    }

    .product-subtitle {
        letter-spacing: .55px;
    }

    .cloud-mark {
        display: none;
    }

    .form-row,
    .purchase-form {
        grid-template-columns: 1fr;
    }

    .form-row {
        gap: 5px;
    }

    .form-message {
        margin-left: 0;
    }

    .button-row {
        flex-direction: column;
    }

    .access-button {
        width: 100%;
    }

    .signed-in-user {
        display: none;
    }

    .purchase-body {
        padding: 18px 14px 22px;
    }
}

table.access-grid.request-review-grid th:nth-child(1){width:8%!important}
table.access-grid.request-review-grid th:nth-child(2){width:7%!important}
table.access-grid.request-review-grid th:nth-child(3){width:7%!important}
table.access-grid.request-review-grid th:nth-child(4){width:9%!important}
table.access-grid.request-review-grid th:nth-child(5){width:7%!important}
table.access-grid.request-review-grid th:nth-child(6){width:9%!important}
table.access-grid.request-review-grid th:nth-child(7){width:9%!important}
table.access-grid.request-review-grid th:nth-child(8){width:10%!important}
table.access-grid.request-review-grid th:nth-child(9){width:34%!important}
.inventory-filter{display:flex;align-items:end;gap:10px;margin:16px 0}.inventory-filter label{display:grid;gap:6px;flex:1;max-width:520px;font-weight:700}.inventory-balance-grid tbody tr{cursor:pointer}.inventory-balance-grid tbody tr:hover{background:#dceefa}.inventory-history-grid{min-width:1050px}
@media(max-width:700px){.inventory-filter{align-items:stretch;flex-direction:column}.inventory-filter label{max-width:none}.inventory-balance-grid,.inventory-history-grid{font-size:13px}.inventory-balance-grid th,.inventory-balance-grid td{padding:8px}.inventory-balance-grid th:nth-child(2),.inventory-balance-grid td:nth-child(2){min-width:180px}}
@import url('/css/selaras-workspace-polish.css');

/* Goods Receipt fulfillment grid: scoped overrides after shared table rules. */
body.purchase-page .purchase-window{width:min(1480px,calc(100% - 28px));max-width:1480px}
body.purchase-page div.receipt-lines-wrap{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;border-bottom:1px solid var(--panel-border)}
body.purchase-page table.receipt-lines-grid{width:1480px;min-width:1480px;table-layout:fixed}
body.purchase-page table.receipt-lines-grid th{height:auto;padding:9px 8px;line-height:1.25;vertical-align:bottom;white-space:normal;overflow-wrap:normal;word-break:normal}
body.purchase-page table.receipt-lines-grid th:nth-child(1){width:105px!important}
body.purchase-page table.receipt-lines-grid th:nth-child(2){width:220px!important}
body.purchase-page table.receipt-lines-grid th:nth-child(3){width:85px!important}
body.purchase-page table.receipt-lines-grid th:nth-child(4),body.purchase-page table.receipt-lines-grid th:nth-child(5),body.purchase-page table.receipt-lines-grid th:nth-child(6),body.purchase-page table.receipt-lines-grid th:nth-child(7){width:82px!important}
body.purchase-page table.receipt-lines-grid th:nth-child(8){width:110px!important}
body.purchase-page table.receipt-lines-grid th:nth-child(9){width:110px!important}
body.purchase-page table.receipt-lines-grid th:nth-child(10){width:140px!important}
body.purchase-page table.receipt-lines-grid th:nth-child(11){width:115px!important}
body.purchase-page table.receipt-lines-grid th:nth-child(12){width:165px!important}
body.purchase-page table.receipt-lines-grid td{vertical-align:middle;overflow-wrap:anywhere}
body.purchase-page table.receipt-lines-grid td:last-child{text-align:left;white-space:normal}
body.purchase-page table.receipt-lines-grid td:last-child button{display:inline-flex;align-items:center;justify-content:center;min-height:30px;margin:2px 4px 2px 0;padding:5px 9px;border:1px solid #7399b8;border-radius:4px;color:#0b4f82;background:linear-gradient(#fff,#e3eff7);font:700 11px Georgia,serif;cursor:pointer}
body.purchase-page .receipt-actions{grid-template-columns:minmax(260px,1fr) auto auto;gap:12px;align-items:end}
body.purchase-page .receipt-actions>button{min-height:36px;white-space:nowrap}
body.purchase-page .receipt-actions .primary-button{min-width:280px}
@media(max-width:900px){body.purchase-page .purchase-window{width:100%;max-width:none}body.purchase-page .receipt-actions{grid-template-columns:1fr}body.purchase-page .receipt-actions>button{width:100%}}
body.purchase-page .item-price[readonly]{background:#eef3f0;border-color:#8ba69a;color:#183d32;font-weight:700;cursor:not-allowed}.price-reference{display:block;max-width:180px;margin-top:4px;color:#49635a;font-size:11px;line-height:1.25}

.login-page .install-button{border-color:#416c91;background:linear-gradient(#f7fbff,#dceaf5);color:#07365d;font-weight:700}
.login-page .install-button::before{content:"↓";margin-right:.35rem}

/* Approved Selaras login presentation. Scoped to avoid authenticated ERP pages. */
body.login-page{position:relative;min-height:100dvh;overflow-x:hidden;background:radial-gradient(circle at 50% 38%,#fff 0,#f7faff 38%,#eaf1fb 100%)!important;color:#0a2250;font-family:"Aptos","Segoe UI",sans-serif}
body.login-page::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(circle at 0 48%,rgba(194,213,241,.42) 0 17%,transparent 17.2%),radial-gradient(circle at 100% 47%,rgba(205,220,244,.34) 0 15%,transparent 15.2%)}
body.login-page::after{content:"";position:absolute;z-index:0;left:-5vw;right:-5vw;bottom:-42px;height:78px;pointer-events:none;border-top:5px solid #fff;background:linear-gradient(174deg,transparent 0 41%,#08449b 42% 72%,#06235d 73%);box-shadow:inset 0 4px 0 #e21c2a;transform:skewY(-1.3deg)}
.login-page .login-window{position:relative;z-index:1;display:flex!important;flex-direction:column;width:min(100%,1180px)!important;min-height:100dvh!important;margin:0 auto;padding:28px 32px 30px;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.login-page .login-language{position:absolute;top:30px;left:34px;display:flex;align-items:center;gap:12px;color:#102d62;font-size:17px;font-weight:650}
.login-page .language-globe{display:grid;place-items:center;width:26px;height:26px;border:2px solid currentColor;border-radius:50%;font-size:18px;line-height:1}
.login-page .login-language button{border:0;background:transparent;color:#203763;padding:4px 2px;font:inherit;cursor:pointer}
.login-page .login-language button.active{color:#0754b9;font-weight:800}
.login-page .login-language button:focus-visible{border-radius:4px;outline:3px solid #ffbf47;outline-offset:2px}
.login-page .login-brand{display:grid;justify-items:center;margin:8px auto 17px;text-align:center}
.login-page .login-brand img{display:block;width:128px;height:128px;border-radius:24px;box-shadow:0 12px 28px rgba(3,31,80,.2)}
.login-page .login-brand h1{margin:13px 0 2px;color:#071943;font-size:clamp(37px,4vw,48px);font-weight:800;line-height:1.05;letter-spacing:-.035em}
.login-page .login-brand h1::first-letter{color:#071943}
.login-page .login-brand .product-subtitle{margin:3px 0!important;color:#405b90!important;font-size:16px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important}
.login-page .brand-accent{width:48px;height:2px;margin-top:12px;background:#e32636}
.login-page .login-panel{width:min(100%,500px);margin:0 auto;padding:29px 36px 30px!important;border:1px solid rgba(255,255,255,.9);border-radius:20px;background:rgba(255,255,255,.94);box-shadow:0 18px 42px rgba(19,52,102,.18),0 2px 10px rgba(19,52,102,.08);backdrop-filter:blur(8px)}
.login-page .login-card-heading{text-align:center}
.login-page .login-card-heading h2{margin:0;color:#071943;font-size:28px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.login-page .login-card-heading p{margin:8px 0 25px;color:#536b9a;font-size:16px}
.login-page #loginForm{display:grid;gap:17px}
.login-page .login-field{display:grid;gap:8px;color:#0a2250;font-size:14px;font-weight:750}
.login-page .input-shell{display:grid;grid-template-columns:26px minmax(0,1fr) 36px;align-items:center;min-height:50px;border:1px solid #91a9d3;border-radius:8px;background:#fff;color:#3d5d97;transition:border-color .16s ease,box-shadow .16s ease}
.login-page .input-shell:focus-within{border-color:#0759c7;box-shadow:0 0 0 3px rgba(7,89,199,.14)}
.login-page .input-shell>svg{width:21px;height:21px;margin-left:13px;fill:currentColor}
.login-page .input-shell input{width:100%;min-width:0;height:48px;border:0!important;outline:0!important;background:transparent!important;color:#071943;padding:0 12px;font-size:17px;box-shadow:none!important}
.login-page .login-field:first-of-type .input-shell{grid-template-columns:26px minmax(0,1fr)}
.login-page .password-visibility{display:grid;place-items:center;width:36px;height:42px;border:0;background:transparent;color:#3f619c;cursor:pointer}
.login-page .password-visibility svg{width:22px;height:22px;fill:currentColor}
.login-page .password-visibility.is-visible{color:#0759c7}
.login-page .form-message{min-height:0;margin:0!important;padding:0!important;color:#b01927;font-size:13px;text-align:center}
.login-page .form-message.success{color:#087445}
.login-page .login-submit{display:flex!important;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px!important;border:1px solid #063d95!important;border-radius:8px!important;background:linear-gradient(180deg,#0861d1,#06317e)!important;color:#fff!important;font-size:18px!important;font-weight:750!important;box-shadow:0 7px 14px rgba(3,50,126,.22)!important;cursor:pointer}
.login-page .login-submit:hover{background:linear-gradient(180deg,#0758bd,#052c71)!important}
.login-page .login-submit svg{width:22px;height:22px;fill:currentColor}
.login-page .install-separator{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;color:#536b9a}
.login-page .install-separator[hidden]{display:none}
.login-page .install-separator span{height:1px;background:#d9e2f1}
.login-page .install-separator b{font-weight:500}
.login-page .install-button{display:grid!important;grid-template-columns:36px 1fr;align-items:center;width:100%;min-height:66px!important;border:1px solid #075be5!important;border-radius:8px!important;background:#fff!important;color:#0752bd!important;padding:10px 16px!important;text-align:left!important;box-shadow:none!important;cursor:pointer}
.login-page .install-button[hidden]{display:none!important}
.login-page .install-button::before{content:none}
.login-page .install-button>svg{width:27px;height:27px;fill:currentColor}
.login-page .install-button>span{display:grid;gap:2px}
.login-page .install-button strong{font-size:16px}
.login-page .install-button small{color:#536b9a;font-size:13px;font-weight:500}
.login-page .login-footer{margin:22px auto 38px;color:#102d62;text-align:center}
.login-page .login-footer p{margin:0 0 5px;font-size:15px}
.login-page .login-footer small{color:#5d7097;font-size:13px}
.login-page .login-language-selector{display:none!important}
@media(max-width:700px){.login-page .login-window{padding:76px 18px 24px}.login-page .login-language{top:22px;left:20px}.login-page .login-brand{margin-top:0}.login-page .login-brand img{width:104px;height:104px;border-radius:20px}.login-page .login-panel{padding:25px 22px!important}.login-page .login-footer{margin-bottom:66px}}
@media(max-width:430px){.login-page .login-brand h1{font-size:36px}.login-page .login-brand .product-subtitle{max-width:310px;font-size:14px!important}.login-page .login-card-heading h2{font-size:25px}.login-page .login-panel{border-radius:16px}.login-page .login-footer p{font-size:13px}}
@media(max-height:760px) and (min-width:701px){.login-page .login-window{padding-top:18px}.login-page .login-brand img{width:92px;height:92px;border-radius:18px}.login-page .login-brand h1{font-size:37px;margin-top:8px}.login-page .login-brand{margin-bottom:10px}.login-page .login-panel{padding:22px 32px!important}.login-page .login-card-heading p{margin-bottom:17px}.login-page #loginForm{gap:12px}.login-page .login-footer{margin-top:13px}}
@media(prefers-reduced-motion:reduce){.login-page .input-shell{transition:none}}
/* Compact, viewport-aware login composition for standard desktop displays. */
@media (min-width: 769px) and (min-height: 720px) {
  body.login-page {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .login-page .login-shell,
  .login-page .login-page-shell {
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(18px, 2.2vh, 28px);
    padding-bottom: clamp(24px, 3vh, 38px);
  }

  .login-page .login-brand,
  .login-page .login-branding {
    gap: clamp(3px, 0.55vh, 7px);
    margin-bottom: clamp(12px, 1.5vh, 18px);
  }

  .login-page .login-brand img,
  .login-page .login-branding img,
  .login-page img[src*="selaras-192"] {
    width: clamp(76px, 9vh, 96px);
    height: clamp(76px, 9vh, 96px);
  }

  .login-page .login-brand h1,
  .login-page .login-branding h1 {
    margin: 2px 0 0;
    line-height: 1.05;
  }

  .login-page .login-brand p,
  .login-page .login-branding p,
  .login-page .login-tagline {
    margin: 0;
    line-height: 1.3;
  }

  .login-page .login-card {
    padding: clamp(22px, 2.6vh, 30px) 38px clamp(20px, 2.4vh, 28px);
  }

  .login-page .login-card-header {
    margin-bottom: clamp(14px, 1.6vh, 18px);
  }

  .login-page .login-card-header h2,
  .login-page .login-card-header p {
    margin-top: 0;
  }

  .login-page .login-card-header h2 {
    margin-bottom: 4px;
  }

  .login-page #loginForm {
    gap: clamp(12px, 1.35vh, 15px);
  }

  .login-page .login-field,
  .login-page .form-field {
    gap: 5px;
  }

  .login-page .login-input-shell,
  .login-page .login-field-shell {
    min-height: 50px;
  }

  .login-page .login-submit,
  .login-page #loginForm button[type="submit"] {
    min-height: 50px;
    margin-top: 1px;
  }

  .login-page .login-divider,
  .login-page .install-divider {
    margin: clamp(9px, 1vh, 12px) 0;
  }

  .login-page .pwa-install-button,
  .login-page #installSelarasButton {
    min-height: 58px;
    padding: 9px 16px;
  }

  .login-page .login-footer {
    margin-top: clamp(14px, 1.7vh, 20px);
    gap: 3px;
    line-height: 1.3;
  }

  .login-page::after,
  .login-page .login-bottom-accent {
    height: clamp(18px, 2.5vh, 28px);
  }

  .login-page::before,
  .login-page .login-background-shape {
    opacity: 0.42;
  }
}

@media (min-width: 769px) and (min-height: 720px) and (max-height: 820px) {
  .login-page .login-shell,
  .login-page .login-page-shell {
    justify-content: flex-start;
    padding-top: 12px;
    padding-bottom: 22px;
  }

  .login-page .login-brand,
  .login-page .login-branding {
    margin-bottom: 9px;
  }

  .login-page .login-brand img,
  .login-page .login-branding img,
  .login-page img[src*="selaras-192"] {
    width: 70px;
    height: 70px;
  }

  .login-page .login-card {
    padding-top: 18px;
    padding-bottom: 17px;
  }

  .login-page .login-card-header {
    margin-bottom: 10px;
  }

  .login-page #loginForm {
    gap: 10px;
  }

  .login-page .login-footer {
    margin-top: 10px;
  }
}

/* Final login-field surface: neutral across icon, input, eye, focus and autofill. */
.login-page #loginForm *:has(> #username),
.login-page #loginForm *:has(> #password),
.login-page #loginForm *:has(> #username) > *,
.login-page #loginForm *:has(> #password) > * {
  background-color: #fff !important;
  background-image: none !important;
}

.login-page #loginForm *:has(> #username),
.login-page #loginForm *:has(> #password) {
  border-color: #b5c4d8 !important;
  box-shadow: none !important;
}

.login-page #loginForm *:has(> #username):focus-within,
.login-page #loginForm *:has(> #password):focus-within {
  border-color: #246dcc !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(36, 109, 204, 0.14) !important;
}

.login-page #username,
.login-page #password {
  color: #092b58 !important;
  caret-color: #092b58;
  background: #fff !important;
}

.login-page #username:autofill,
.login-page #password:autofill,
.login-page #username:-webkit-autofill,
.login-page #username:-webkit-autofill:hover,
.login-page #username:-webkit-autofill:focus,
.login-page #username:-webkit-autofill:active,
.login-page #password:-webkit-autofill,
.login-page #password:-webkit-autofill:hover,
.login-page #password:-webkit-autofill:focus,
.login-page #password:-webkit-autofill:active {
  color: #092b58 !important;
  -webkit-text-fill-color: #092b58 !important;
  caret-color: #092b58 !important;
  background-color: #fff !important;
  background-image: none !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* Balanced login input geometry: fixed icon/eye columns with unclipped artwork. */
.login-page #loginForm *:has(> #username),
.login-page #loginForm *:has(> #password) {
  box-sizing: border-box;
  min-height: 58px;
  height: 58px;
  padding: 0 !important;
  align-items: center;
}

.login-page #loginForm *:has(> #username) {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr);
}

.login-page #loginForm *:has(> #password) {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
}

.login-page #loginForm *:has(> #username) > svg:first-child,
.login-page #loginForm *:has(> #password) > svg:first-child {
  box-sizing: content-box;
  width: 20px !important;
  height: 20px !important;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  justify-self: center;
  align-self: center;
}

.login-page #loginForm *:has(> #username) > :first-child:not(input):not(svg),
.login-page #loginForm *:has(> #password) > :first-child:not(input):not(svg) {
  grid-column: 1;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 48px;
  margin: 0;
  padding: 0 12px;
  overflow: visible;
}

.login-page #loginForm *:has(> #username) > :first-child:not(input):not(svg) svg,
.login-page #loginForm *:has(> #password) > :first-child:not(input):not(svg) svg {
  width: 20px !important;
  height: 20px !important;
  overflow: visible;
}

.login-page #username,
.login-page #password {
  box-sizing: border-box;
  grid-column: 2;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 14px 0 4px !important;
  border: 0 !important;
  outline: 0;
}

.login-page #passwordVisibility {
  grid-column: 3;
  align-self: stretch;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 48px;
  min-width: 48px;
  height: 100%;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  overflow: visible;
}

.login-page #passwordVisibility svg {
  width: 20px !important;
  height: 20px !important;
  overflow: visible;
}

/* Final viewport-fit guard: keep login padding and decoration inside the viewport. */
body.login-page {
  box-sizing: border-box !important;
}

body.login-page .login-window {
  min-height: calc(100vh - 56px) !important;
  min-height: calc(100dvh - 56px) !important;
}

body.login-page::after {
  bottom: 0 !important;
  height: clamp(16px, 2.2vh, 24px) !important;
}

@media (max-width: 768px), (max-height: 719px) {
  body.login-page .login-window {
    min-height: calc(100vh - 24px) !important;
    min-height: calc(100dvh - 24px) !important;
  }
}

@media (min-width: 769px) and (min-height: 720px) and (max-height: 820px) {
  body.login-page {
    padding-top: 27px !important;
    padding-bottom: 27px !important;
  }

  body.login-page .login-window {
    min-height: calc(100vh - 54px) !important;
    min-height: calc(100dvh - 54px) !important;
  }
}

/* Final installed-PWA presentation: retain only the existing shortcut action. */
body.login-page .pwa-post-install {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 5px 0 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.login-page .pwa-post-install__message,
body.login-page .pwa-post-install__help,
body.login-page .pwa-post-install__status,
body.login-page [data-pwa-installed-message],
body.login-page [data-pwa-shortcut-help],
body.login-page [data-pwa-shortcut-status] {
  display: none !important;
}

body.login-page .pwa-post-install::before,
body.login-page .pwa-post-install::after {
  content: none !important;
  display: none !important;
}

body.login-page .pwa-shortcut-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 210px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 18px !important;
  border: 1px solid #8eb7ec !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0c4d9f !important;
  font-size: .82rem !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(15, 61, 120, .08) !important;
}

body.login-page .pwa-shortcut-button:hover {
  border-color: #347bcf !important;
  background: #f7faff !important;
}

body.login-page .pwa-shortcut-button:focus-visible {
  outline: 3px solid rgba(31, 105, 196, .2) !important;
  outline-offset: 2px !important;
}

body.login-page::after,
body.login-page .login-window::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 520px) {
  body.login-page .pwa-shortcut-button {
    width: min(100%, 240px) !important;
    min-width: 0 !important;
  }
}
/* Login viewport correction: keep standard desktop viewports single-screen while
   allowing short and narrow devices to scroll naturally. */
html:has(body.login-page) {
    height: 100%;
    overflow: hidden;
}

body.login-page {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.login-page .login-window {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    width: min(100%, 1040px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 auto;
    padding: clamp(12px, 1.8vh, 20px) 28px clamp(16px, 2.2vh, 24px) !important;
    overflow: visible !important;
}

body.login-page .login-language {
    top: clamp(14px, 2vh, 22px);
    left: 28px;
}

body.login-page .login-brand {
    margin: 0 auto clamp(8px, 1.2vh, 12px);
}

body.login-page .login-brand img {
    width: clamp(72px, 9.5vh, 88px);
    height: clamp(72px, 9.5vh, 88px);
}

body.login-page .login-brand h1 {
    margin-top: clamp(5px, .7vh, 8px);
    font-size: clamp(2rem, 4.5vh, 2.5rem);
    line-height: 1.05;
}

body.login-page .login-brand p {
    margin-top: 4px;
    font-size: clamp(.92rem, 1.9vh, 1.05rem);
    line-height: 1.2;
}

body.login-page .login-brand::after {
    margin-top: clamp(6px, .8vh, 9px);
}

body.login-page .login-panel {
    width: min(92vw, 420px) !important;
    padding: clamp(16px, 2.2vh, 20px) 26px clamp(17px, 2.3vh, 21px) !important;
}

body.login-page .login-card-heading {
    margin-bottom: clamp(11px, 1.5vh, 14px);
}

body.login-page .login-card-heading h2 {
    font-size: clamp(1.45rem, 3vh, 1.7rem);
    line-height: 1.1;
}

body.login-page .login-card-heading p {
    margin-top: 4px;
    font-size: .92rem;
    line-height: 1.25;
}

body.login-page #loginForm {
    gap: clamp(8px, 1.15vh, 11px);
}

body.login-page .login-field {
    gap: 4px;
}

body.login-page .input-shell {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    height: 50px !important;
    min-height: 50px !important;
}

body.login-page .login-submit {
    min-height: 48px;
}

body.login-page .pwa-post-install {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 10px;
    margin-top: 2px;
    padding: 7px 9px;
}

body.login-page .pwa-post-install-message {
    font-size: .76rem;
    line-height: 1.2;
}

body.login-page .pwa-shortcut-button {
    min-height: 32px;
    padding: 5px 9px;
    font-size: .76rem;
    line-height: 1.15;
}

body.login-page .pwa-post-install-help,
body.login-page .pwa-post-install-status {
    grid-column: 1 / -1;
    font-size: .68rem;
    line-height: 1.2;
}

body.login-page .login-footer {
    margin: clamp(8px, 1.2vh, 12px) auto 0;
}

body.login-page::before,
body.login-page::after,
body.login-page .login-window::before,
body.login-page .login-window::after {
    position: fixed;
    pointer-events: none;
}

@media (max-width: 768px), (max-height: 719px) {
    html:has(body.login-page) {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.login-page {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.login-page .login-window {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 20px 16px 24px !important;
        overflow: visible !important;
    }

    body.login-page .login-language {
        left: 16px;
    }
}