:root {
  color-scheme: light;
  --navy: #2b365c;
  --nav-link: #b6c6f9;
  --blue: #0d6efd;
  --link: #007bff;
  --muted: #6c757d;
  --border: #dee2e6;
  --table-light: #e9ecef;
  --body-bg: #eee;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--body-bg); }
body { margin: 0; color: #212529; background: var(--body-bg); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.small { font-size: 13px; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.demo-ribbon { position: fixed; z-index: 1200; right: 14px; bottom: 12px; padding: 5px 10px; border: 1px solid #f0a08d; border-radius: 3px; color: #80311f; background: #fff1ed; box-shadow: 0 2px 8px #0002; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.brand-lockup { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-size: 21px; font-weight: 750; letter-spacing: -.03em; white-space: nowrap; }
.brand-lockup:hover { text-decoration: none; }
.brand-building { width: 25px; height: 31px; fill: #ff5e3b; flex: none; }
.brand-building .building-window { fill: #fff; }
.btn { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border: 1px solid transparent; border-radius: 4px; color: #fff; font-size: 14px; line-height: 1.25; text-align: center; white-space: nowrap; }
.btn:hover { filter: brightness(.95); }
.btn:disabled { cursor: default; opacity: .5; }
.btn-primary { border-color: var(--blue); background: var(--blue); }
.btn-secondary { border-color: #6c757d; background: #6c757d; }
.btn-warning { border-color: #ffc107; color: #212529; background: #ffc107; }
.form-control { display: block; width: 100%; height: 38px; padding: 7px 10px; border: 1px solid #ced4da; border-radius: 4px; color: #495057; background: #fff; box-shadow: inset 0 1px 1px #0000000d; font-size: 15px; }
.form-control:focus { outline: 0; border-color: #80bdff; box-shadow: 0 0 0 3px #007bff40; }
.form-control-lg { height: 48px; padding: 10px 14px; font-size: 18px; }

.portal-index { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.portal-index-card { width: min(100%, 610px); padding: 42px; border-radius: 6px; background: #fff; box-shadow: 0 8px 28px #0000001c; }
.portal-index-card h1 { margin: 28px 0 8px; font-size: 28px; }
.portal-index-card p { margin: 0 0 22px; color: #495057; }
.portal-index-card .muted { display: block; margin-top: 17px; }
.portal-index-links { display: flex; flex-wrap: wrap; gap: 9px; }

.login-page { min-height: 100vh; padding: 8.1vh 24px 60px; }
.login-card { width: min(100%, 1144px); min-height: 480px; margin: 0 auto; padding: 28px 30px 38px; border-radius: 4px; background: #fff; box-shadow: 0 4px 14px #00000022; }
.login-brand-row { display: flex; align-items: flex-start; justify-content: space-between; min-height: 67px; }
.login-brand-row .brand-building { width: 31px; height: 38px; }
.login-brand-row .brand-lockup { font-size: 25px; }
.login-brand-row h3 { width: 42%; margin: 0; }
.login-card h1 { margin: 5px 0 3px; font-size: 26px; font-weight: 700; }
.login-form { width: min(100%, 535px); margin: 10px auto 0; display: flex; align-items: center; flex-direction: column; gap: 12px; }
.login-form > input, .login-form > .password-wrap { width: 100%; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 52px; }
.password-toggle { position: absolute; top: 5px; right: 8px; width: 38px; height: 38px; border: 0; color: #343a40; background: transparent; font-size: 19px; }
.remember-row { display: flex; align-items: center; gap: 7px; margin: 1px 0 0; font-size: 14px; font-weight: 650; }
.remember-row input { width: 17px; height: 17px; margin: 0; }
.login-form .btn { min-height: 39px; margin: 0 0 3px; font-size: 16px; }
.login-form > a { margin-top: 2px; font-size: 14px; }
.login-hint { margin: 5px 0 0; }

.navbar { position: relative; z-index: 20; display: flex; min-height: 54px; align-items: center; padding: 0 1rem; color: var(--nav-link); background: var(--navy); }
.navbar-brand { color: #f4f6ff; font-size: 20px; }
.navbar-brand .brand-building { width: 23px; height: 29px; }
.nav-toggle { display: none; margin-left: auto; border: 0; color: var(--nav-link); background: transparent; font-size: 23px; }
.nav-content { display: flex; flex: 1; align-items: stretch; justify-content: space-between; margin-left: 16px; }
.nav-left, .nav-right { display: flex; align-items: stretch; }
.nav-item { position: relative; display: flex; align-items: stretch; }
.nav-link { display: inline-flex; align-items: center; gap: 8px; margin: 0 4px; padding: 0 10px; border: 0; border-radius: 4px; color: var(--nav-link); background: transparent; font-size: 15px; font-weight: 700; white-space: nowrap; }
.nav-link:hover, .nav-item.active > .nav-link, .nav-item.show > .nav-link { color: #fff; text-decoration: none; }
.caret { font-size: 11px; opacity: .9; }
.nav-dropdown { position: absolute; z-index: 35; top: calc(100% - 1px); left: 4px; display: none; min-width: 224px; padding: 7px 0; border: 1px solid #ddd; border-radius: 4px; color: #212529; background: #fff; box-shadow: 0 4px 10px #0002; }
.nav-item.show .nav-dropdown { display: block; }
.nav-dropdown strong { display: block; padding: 7px 14px; color: #495057; font-size: 12px; }
.nav-dropdown a, .nav-dropdown button { display: block; width: 100%; padding: 7px 14px; border: 0; color: #212529; background: transparent; font-size: 14px; text-align: left; white-space: nowrap; }
.nav-dropdown a:hover, .nav-dropdown button:not(:disabled):hover { background: #f3f4f5; text-decoration: none; }
.nav-dropdown a[data-disabled-item] { color: #6c757d; }
.nav-dropdown .sign-out { border-top: 1px solid #e7e7e7; }
.nav-dropdown-right { right: 2px; left: auto; }
.user-name { max-width: 164px; overflow: hidden; text-overflow: ellipsis; }

.container { width: auto; margin: 0 30px; }
.main-container { min-height: calc(100vh - 54px); margin: 0; padding: 16px 30px 30px; background: #fff; }
.page-title { margin: 12px 0 18px; font-size: 27px; line-height: 1.2; }
.page-title strong { font-size: 80%; }
.grid-shell { overflow: hidden; border: 1px solid #ddd; border-radius: 6px; background: #fff; }
.grid-scroll { overflow-x: auto; }
.invoice-grid { width: 100%; min-width: 1180px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.invoice-grid th, .invoice-grid td { overflow: hidden; padding: 8px 9px; border-bottom: 1px solid #dee2e6; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.invoice-grid th { font-size: 14px; }
.invoice-grid .grid-head { height: 39px; color: #343a40; background: var(--table-light); }
.invoice-grid .grid-head th { padding-top: 8px; padding-bottom: 6px; }
.invoice-grid .grid-head button { padding: 0; border: 0; color: inherit; background: transparent; font-weight: 700; }
.invoice-grid .grid-head button:hover { color: #111; }
.sort-indicator { margin-left: 3px; color: #777; }
.invoice-grid .filter-row { height: 43px; background: var(--table-light); }
.invoice-grid .filter-row th { padding: 3px 6px 7px; }
.invoice-grid .filter-row input, .invoice-grid .filter-row select { width: 100%; height: 32px; min-width: 0; padding: 4px 7px; border: 1px solid #ced4da; border-radius: 3px; color: #495057; background: #fff; font-size: 13px; }
.invoice-grid .filter-row select { padding-right: 20px; }
.invoice-grid tbody tr { height: 40px; background: #fff; }
.invoice-grid tbody tr:hover { background: #f8f9fa; }
.invoice-grid tbody td { color: #343a40; font-size: 14px; }
.invoice-grid .view-col, .invoice-grid .view-cell { width: 48px; text-align: center; }
.invoice-grid .view-button { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid #adb5bd; border-radius: 3px; color: #495057; background: #fff; font-size: 24px; line-height: 1; }
.invoice-grid .view-button:hover { border-color: #6c757d; background: #f8f9fa; text-decoration: none; }
.invoice-grid th:nth-child(2), .invoice-grid td:nth-child(2) { width: 10%; }
.invoice-grid th:nth-child(3), .invoice-grid td:nth-child(3) { width: 13%; }
.invoice-grid th:nth-child(4), .invoice-grid td:nth-child(4) { width: 9%; }
.invoice-grid th:nth-child(5), .invoice-grid td:nth-child(5) { width: 9%; }
.invoice-grid th:nth-child(6), .invoice-grid td:nth-child(6) { width: 8%; }
.invoice-grid th:nth-child(7), .invoice-grid td:nth-child(7) { width: 9%; }
.invoice-grid th:nth-child(8), .invoice-grid td:nth-child(8) { width: 10%; }
.invoice-grid th:nth-child(9), .invoice-grid td:nth-child(9) { width: 8%; }
.invoice-grid th:nth-child(10), .invoice-grid td:nth-child(10) { width: 6%; }
.invoice-grid th:nth-child(11), .invoice-grid td:nth-child(11) { width: 15%; }
.invoice-grid .truncate { text-overflow: clip; }
.invoice-grid .amount-cell { font-variant-numeric: tabular-nums; }
.status-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.loading-cell { height: 80px; color: #6c757d !important; text-align: center !important; }
.grid-pager { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 48px; align-items: center; gap: 10px; padding: 5px 9px; color: #495057; background: var(--table-light); }
.pager-tools, .pager-controls { display: flex; align-items: center; gap: 5px; }
.pager-tools button, .pager-controls button { min-width: 28px; height: 28px; padding: 2px 5px; border: 1px solid transparent; border-radius: 3px; color: #5d646a; background: transparent; font-size: 16px; }
.pager-tools button:hover, .pager-controls button:hover { border-color: #c8cdd2; background: #fff; }
.pager-controls { font-size: 13px; }
.pager-controls input { width: 42px; height: 27px; margin: 0 3px; border: 1px solid #ced4da; border-radius: 3px; text-align: center; }
.pager-controls select { height: 28px; margin-left: 8px; border: 1px solid #ced4da; border-radius: 3px; background: #fff; }
.pager-count { justify-self: end; font-size: 13px; }
.advanced-dialog { width: min(520px, calc(100vw - 24px)); padding: 0; border: 1px solid #cfd2d5; border-radius: 5px; box-shadow: 0 12px 35px #0003; }
.advanced-dialog::backdrop { background: #0005; }
.dialog-title, .dialog-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background: var(--table-light); }
.dialog-title button { border: 0; background: transparent; font-size: 24px; }
.advanced-content { padding: 18px 15px; font-size: 14px; }
.advanced-content label { display: flex; align-items: center; gap: 8px; }
.advanced-rule { display: flex; gap: 6px; margin-top: 15px; }
.advanced-rule select, .advanced-rule input { min-width: 0; height: 34px; border: 1px solid #ced4da; border-radius: 3px; }
.advanced-rule input { flex: 1; }
.dialog-footer { justify-content: flex-end; }

.invoice-container { margin: 0; padding: 18px 30px 30px; background: #fff; }
.invoice-heading-row { display: flex; min-height: 80px; align-items: flex-start; justify-content: space-between; }
.invoice-heading-row > div:first-child { display: flex; align-items: flex-start; gap: 14px; }
.invoice-heading-row .page-title { margin-top: 7px; }
.back-button { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; margin-top: 1px; border: 1px solid #adb5bd; border-radius: 4px; color: #495057; background: #fff; font-size: 22px; }
.back-button:hover { background: #f5f5f5; text-decoration: none; }
.client-heading { display: flex; align-items: center; gap: 13px; margin: 2px 18px 0 0; font-size: 20px; }
.client-mark { display: grid; width: 56px; height: 46px; place-items: center; border: 1px solid #d9dce2; color: var(--navy); background: #f2f4f8; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.invoice-actions { display: flex; min-height: 47px; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 10px; }
.invoice-status, .action-buttons { display: flex; align-items: center; gap: 8px; }
.invoice-status { font-size: 14px; }
.badge { display: inline-block; padding: 4px 7px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.15; }
.badge-info { background: #17a2b8; }
.badge-primary { background: #0d6efd; }
.action-buttons .btn { min-height: 33px; padding: 6px 10px; font-size: 14px; }
.menu-wrap { position: relative; }
.dropdown-panel { position: absolute; z-index: 10; top: 100%; left: 0; display: none; min-width: 160px; padding: 5px 0; border: 1px solid #ddd; border-radius: 4px; background: #fff; box-shadow: 0 4px 12px #0002; }
.dropdown-panel.show { display: block; }
.dropdown-panel button { display: block; width: 100%; padding: 8px 12px; border: 0; background: #fff; font-size: 13px; text-align: left; }
.invoice-workspace { display: grid; grid-template-columns: minmax(365px, 35%) minmax(0, 65%); gap: 22px; align-items: start; }
.invoice-fields { padding-top: 2px; }
.detail-field { position: relative; display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); min-height: 43px; align-items: center; gap: 10px; }
.detail-field > label { font-size: 14px; font-weight: 700; }
.detail-value { color: #343a40; font-size: 14px; }
.readonly-input { height: 34px; padding: 5px 9px; color: #495057; background-color: #e9ecef; box-shadow: none; font-size: 14px; }
.short-input { max-width: 180px; }
.field-mark { position: absolute; right: -15px; color: #0d6efd; font-size: 17px; font-weight: 800; }
.help-dot { display: inline-grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; color: #fff; background: #0d6efd; font-size: 10px; }
.gl-control { display: flex; align-items: center; gap: 8px; }
.gl-control .btn { min-height: 32px; padding: 4px 10px; }
.description-field { min-height: 75px; align-items: start; padding-top: 6px; }
.description-field label { padding-top: 8px; }
.description-field textarea { height: auto; min-height: 66px; resize: vertical; }
.detail-field input[type=checkbox] { width: 20px; height: 20px; margin: 0; }
.document-area { min-width: 0; }
.document-and-related { display: flex; align-items: flex-start; gap: 10px; }
.pdf-viewer { position: relative; display: flex; min-width: 0; flex: 1; flex-direction: column; height: min(64vh, 640px); min-height: 430px; border: 1px solid #cfd3d7; border-radius: 4px; background: #343536; }
.pdf-body { position: relative; min-height: 0; flex: 1; overflow: hidden; background: #555; }
.pdf-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #555; }
.empty-viewer { display: grid; height: 100%; min-height: 360px; place-items: center; color: #e6e6e6; background: #555; font-size: 18px; }
.pdf-corner-actions { position: absolute; right: 7px; bottom: 7px; display: flex; gap: 4px; }
.pdf-corner-actions button { width: 31px; height: 31px; border: 1px solid #adb5bd; border-radius: 4px; color: #495057; background: #fff; font-size: 18px; }
.pdf-corner-actions button:disabled { cursor: default; opacity: .45; }
.related-panel { width: 36%; max-height: min(64vh, 640px); overflow: auto; border: 1px solid var(--border); }
.related-panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.related-panel th { padding: 10px 6px; background: var(--table-light); text-align: left; }
.related-panel td { padding: 9px 6px; border-top: 1px solid var(--border); }
.related-panel tr:hover td { background: #f3f4f5; }
.browse-button { margin-top: 9px; }
.invoice-tabs { margin-top: 24px; }
.tab-list { display: flex; overflow-x: auto; border-bottom: 1px solid #dee2e6; }
.tab-list button { flex: none; padding: 9px 13px; border: 1px solid transparent; border-radius: 4px 4px 0 0; color: var(--link); background: transparent; font-size: 14px; }
.tab-list button.active { margin-bottom: -1px; border-color: #dee2e6 #dee2e6 #fff; color: #495057; background: #fff; }
.tab-panel { min-height: 80px; padding: 14px 15px; border: 1px solid #dee2e6; border-top: 0; border-radius: 0 0 4px 4px; background: #fff; font-size: 14px; }
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 8px; border: 1px solid #dee2e6; text-align: left; }
.simple-table th { background: var(--table-light); }
.split-summary { display: flex; justify-content: space-between; }
.toast { position: fixed; z-index: 60; right: 20px; bottom: 48px; padding: 12px 16px; border-radius: 4px; color: #fff; background: #343a40; box-shadow: 0 4px 15px #0003; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .15s, transform .15s; }
.toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1229px) {
  .nav-link { gap: 5px; padding: 0 7px; font-size: 12px; }
  .navbar-brand { font-size: 18px; }
  .invoice-workspace { grid-template-columns: minmax(320px, 38%) minmax(0, 62%); gap: 15px; }
}
@media (max-width: 820px) {
  .navbar { flex-wrap: wrap; padding: 0 14px; }
  .nav-toggle { display: block; }
  .nav-content { display: none; width: 100%; flex: auto; flex-direction: column; margin: 0; padding: 4px 0 10px; }
  .nav-content.expanded { display: flex; }
  .nav-left, .nav-right { align-items: stretch; flex-direction: column; }
  .nav-item { display: block; }
  .nav-link { min-height: 38px; padding: 0 8px; font-size: 14px; }
  .nav-dropdown, .nav-dropdown-right { position: static; box-shadow: none; }
  .container { margin-right: 16px; margin-left: 16px; }
  .main-container, .invoice-container { padding-right: 16px; padding-left: 16px; }
  .grid-pager { grid-template-columns: 1fr auto; }
  .pager-count { grid-column: 1 / -1; justify-self: end; }
  .invoice-workspace { grid-template-columns: 1fr; }
  .invoice-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .invoice-fields .description-field { grid-column: 1 / -1; }
  .pdf-viewer { height: 62vh; }
  .invoice-actions { align-items: flex-start; flex-direction: column; }
  .action-buttons { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .invoice-grid { min-width: 0; }
  .invoice-grid thead .grid-head, .invoice-grid thead .filter-row { display: none; }
  .invoice-grid tbody { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
  .invoice-grid tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) 38px; height: auto; padding: 8px 9px; border: 1px solid #dee2e6; border-radius: 4px; }
  .invoice-grid tbody td { grid-column: 1; height: auto; overflow: visible; padding: 5px 2px; border: 0; white-space: normal; }
  .invoice-grid tbody td::before { display: block; margin-bottom: 1px; color: #6c757d; content: attr(data-label); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
  .invoice-grid tbody .view-cell { grid-column: 2; grid-row: 1; align-self: start; }
  .invoice-grid tbody .view-cell::before { content: none; }
  .invoice-grid tbody .truncate { text-overflow: clip; }
  .invoice-grid .loading-cell { display: table-cell; }
}
@media (max-width: 575px) {
  .login-page { padding: 24px 12px 50px; }
  .login-card { min-height: 0; padding: 22px 17px 32px; }
  .login-brand-row h3 { display: none; }
  .login-form { gap: 13px; }
  .page-title { font-size: 24px; }
  .grid-pager { grid-template-columns: 1fr; }
  .pager-controls { justify-content: center; flex-wrap: wrap; }
  .pager-count { grid-column: auto; }
  .invoice-heading-row { min-height: 66px; }
  .client-heading { margin-right: 0; font-size: 15px; }
  .client-mark { width: 40px; height: 35px; }
  .invoice-fields { display: block; }
  .detail-field { grid-template-columns: 108px minmax(0, 1fr); gap: 6px; }
  .invoice-actions { gap: 8px; }
  .action-buttons { gap: 5px; }
  .action-buttons .btn { padding: 5px 8px; }
  .pdf-viewer { min-height: 380px; height: 58vh; }
  .related-panel { width: 44%; }
  .tab-list button { padding: 8px 10px; font-size: 13px; }
}