:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #20272f;
  background: #f5f7fa;
  --blue: #0c6ff9;
  --ink: #20272f;
  --muted: #526172;
  --line: #d4dbe3;
  --soft-blue: #cddff9;
  --soft-green: #cde3d9;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button, input, select { min-width: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #005edb; outline-offset: 2px;
}
.symbols { display: none; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }

.brand-bar {
  background: linear-gradient(105deg, #143c75, #155fbf 64%, #1763bb); color: white; min-height: 42px; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 4px 22px;
}
.brand-context { font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.brand { font-size: clamp(22px, 2.5vw, 32px); font-weight: 800; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.brand em { color: #dbeaff; }
.demo-badge { justify-self: end; border: 1px solid #ffffff70; border-radius: 4px; font-size: 9px; padding: 3px 6px; font-weight: 700; letter-spacing: .1em; }
.module-bar { background: #f8fafc; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px max(18px, 7vw); border-bottom: 1px solid var(--line); }
.module-list { display: flex; align-items: center; gap: clamp(6px, 1vw, 14px); }
.module { display: inline-flex; align-items: center; justify-content: space-between; min-width: 43px; height: 29px; border: 1px solid #c3cdd8; border-radius: 5px; background: linear-gradient(#fff, #eef2f6); color: #263d57; }
.module b, .module .icon { margin: 0 auto; }
.module b { font: italic 700 21px/1 Georgia, serif; }
.module .icon { width: 16px; height: 16px; }
.module i { height: 100%; width: 13px; display: grid; place-items: center; border-left: 1px solid #d5dde6; }
.module i::before { content: ""; border: 3px solid transparent; border-top-color: #526984; transform: translateY(2px); }
.module-context { white-space: nowrap; border: 1px solid #b4c9e4; border-radius: 5px; padding: 5px 8px; color: #174d89; background: #f2f7ff; font-size: 12px; }
.company-bar { background: #fcfdff; border-bottom: 1px solid var(--line); padding: 4px 16px; }
.company { margin: auto; max-width: 1090px; width: 77%; padding: 4px 9px; border: 1px solid #c9dfd3; border-radius: 5px; background: #eef6f1; color: #285543; text-align: center; font-size: 13px; font-weight: 700; }

.workspace { margin: 0 auto; max-width: 1800px; }
.order { background: #fcfdff; border: 1px solid #cbd1d8; border-top: 0; border-radius: 0 0 8px 8px; overflow: clip; }
.section-title { margin: 0; text-transform: uppercase; text-align: center; background: #eef2f6; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.2; padding: 5px 9px; }
h1.section-title { font-size: 19px; padding: 6px 9px; }
.order-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 35px; background: #eaf2ff; border-radius: 5px; margin: 0 10px; padding: 3px 8px; }
.save-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 4px; font-size: 12px; font-weight: 700; min-height: 27px; padding: 3px 8px; white-space: nowrap; }
.save-button { justify-self: start; color: #193758; border: 1px solid #8faed4; background: #f6faff; }
.save-button:hover { background: #eaf3ff; }
.save-button .icon { width: 16px; height: 16px; }
.toolbar-count { font-size: 13px; font-variant-numeric: tabular-nums; }
.save-state { justify-self: end; font-size: 12px; color: #274566; text-align: right; }
.order-fields { display: grid; grid-template-columns: minmax(230px, 1.45fr) minmax(173px, .9fr) minmax(226px, 1.12fr) minmax(136px, .65fr); gap: 5px 10px; padding: 7px 10px; }
.order-fields .field { min-height: 31px; font-size: 13px; }
.field { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--line); border-radius: 4px; min-height: 35px; background: white; font-size: 14px; }
.field > span { display: flex; align-items: center; padding: 5px 8px; border-right: 1px solid var(--line); background: #f4f6f8; white-space: nowrap; }
.field input, .field select, .field strong { flex: 1; width: 100%; color: var(--ink); padding: 5px 8px; background: transparent; border: 0; }
.field input[type="date"] { min-width: 112px; }
.field strong { align-self: center; text-align: right; font-variant-numeric: tabular-nums; }
.supplier { grid-column: 1 / 3; }
.supplier input { background: #fff2cc; }
.observations { grid-column: 3 / -1; }

.order-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(222px, 23%); align-items: start; gap: 9px; padding: 0 7px 11px; }
.panel { border: 1px solid var(--blue); border-radius: 6px; min-width: 0; overflow: hidden; background: white; }
.details-panel { overflow: visible; }
.details-panel > .section-title { border-radius: 5px 5px 0 0; }
.details-toolbar { position: sticky; top: 0; z-index: 2; margin: 5px 8px; padding: 3px 5px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border-radius: 5px; background: #eef4fc; }
.detail-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.item-info-button { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 4px 8px; border: 1px solid #aabed7; border-radius: 4px; background: #fff; color: #194575; font-size: 12px; font-weight: 700; white-space: nowrap; }
.item-info-button .icon { width: 17px; height: 17px; }
.item-info-button:hover:not(:disabled) { background: #dceaff; border-color: #80a9d9; }
.item-info-button:disabled { color: #67758a; background: #f4f6f8; border-color: #cdd6e0; cursor: default; }
.order-filter { display: flex; align-items: center; gap: 5px; width: min(100%, 215px); min-height: 29px; padding: 0 5px 0 7px; border: 1px solid #aabed7; border-radius: 4px; background: white; color: #345579; }
.order-filter .icon { width: 15px; height: 15px; }
.order-filter:focus-within { outline: 2px solid #005edb; outline-offset: 1px; }
.order-filter input { flex: 1; width: 100%; min-height: 27px; padding: 3px 0; border: 0; outline: 0; color: var(--ink); font-size: 12px; }
.order-filter button { width: 23px; height: 23px; padding: 3px; border: 0; border-radius: 3px; background: #edf4ff; color: inherit; }
.order-filter button:hover { background: #dae9fc; }
.order-filter-message { margin: 0 13px 5px; color: var(--muted); font-size: 12px; }
.order-filter-message:empty { margin: 0; }
.detail-hint { justify-self: end; font-size: 12px; color: #344f6d; text-align: right; }
.table-wrap { margin: 0 8px; border: 1px solid #a9b6c5; border-radius: 3px; overflow: auto; }
.items-table { width: 100%; min-width: 940px; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.w-row { width: 45px; } .w-id { width: 66px; } .w-code { width: 130px; } .w-stock { width: 90px; } .w-qty { width: 84px; }
.w-aux { width: 112px; }
.w-um { width: 46px; } .w-value { width: 93px; } .w-total { width: 89px; } .w-actions { width: 68px; }
.items-table th { background: var(--soft-blue); font-weight: 700; text-align: left; white-space: nowrap; padding: 8px 7px; border-bottom: 1px solid #a9b6c5; }
.items-table th, .items-table td { border-right: 1px solid #d3dbe4; }
.items-table th:last-child, .items-table td:last-child { border-right: 0; }
.items-table td { padding: 6px 7px; border-bottom: 1px solid #d3dbe4; overflow-wrap: anywhere; }
.items-table tbody tr:last-child > td { border-bottom: 0; }
.items-table .number { text-align: right; font-variant-numeric: tabular-nums; }
.items-table .center { text-align: center; }
.line-row td:nth-child(-n+3) { background: #eef5ff; }
.line-row td { background: #fafbfd; height: 45px; cursor: pointer; }
.line-row:hover td, .line-row:focus-within td { background: #f0f6ff; }
.line-row.is-selected td { background: #dbeaff; border-bottom-color: #a8c7ec; }
.line-row.is-selected td:first-child { box-shadow: inset 3px 0 #0c6ff9; }
.line-picker { display: inline-block; max-width: 100%; padding: 2px; border: 0; border-radius: 3px; background: transparent; color: inherit; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.line-picker:hover, .line-picker[aria-pressed="true"] { color: #104b8e; text-decoration: underline; }
.line-code, .line-description { font-weight: 700; }
.line-description small { display: block; font-size: 11px; margin-top: 3px; font-weight: 400; color: var(--muted); }
.cell-input { width: 100%; min-height: 31px; border: 1px solid #9db6d5; border-radius: 4px; background: white; color: #183657; padding: 3px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.cell-input:hover { border-color: var(--blue); }
.cell-input[aria-invalid="true"] { border-color: #ba3331; background: #fff0ef; }
.cell-input::placeholder { color: #606c7c; opacity: 1; }
.row-actions { display: flex; gap: 4px; align-items: center; }
.icon-button { width: 24px; height: 25px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #a7b8cd; border-radius: 4px; color: #274665; background: #f3f8ff; }
.icon-button .icon { width: 14px; height: 14px; }
.icon-button:hover, .icon-button[aria-expanded="true"] { background: #dceaff; border-color: #7aa9e7; }
.remove:hover { background: #fff1ef; color: #a52525; border-color: #d89b98; }
.items-table .blank-row > td { height: 43px; background: #f9fbfd; }
.items-table .blank-row .blank-index { text-align: center; color: #59687a; background: #eff5ff; font-size: 12px; }
.blank-button { width: 30px; height: 29px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #a5c0e2; border-radius: 4px; background: #edf5ff; color: #0a57af; }
.blank-button .icon { width: 18px; height: 18px; }
.blank-button:hover, .blank-button[aria-expanded="true"] { background: #dceaff; border-color: #7aa9e7; }
.unknown-value { color: #677588; }
.detail-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; margin: 0 8px; padding: 8px 0; color: var(--muted); font-size: 12px; }
kbd { display: inline-block; background: #fff; border: 1px solid #c3cdda; border-radius: 3px; color: #233a55; font: 700 11px/1.1 Arial, sans-serif; padding: 2px 4px; }

.search-row > td, .line-options > td { background: #f3f8ff; }
.search-box, .line-options-body { padding: 6px 5px; }
.search-box { scroll-margin-block: 12px; }
.search-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 7px; }
.search-head h3 { font-size: 14px; margin: 0; color: #173656; }
.search-head .icon-button { width: 28px; }
.search-fields { display: flex; align-items: stretch; min-height: 44px; gap: 7px; }
.query-wrap { flex: 1; display: flex; align-items: center; padding: 0 8px; gap: 7px; border: 1px solid #9aaec9; background: #fff2cc; border-radius: 4px; }
.query-wrap:focus-within { outline: 2px solid #0068e9; outline-offset: 1px; }
.query-wrap .icon { width: 17px; height: 17px; color: #39495c; }
.query-wrap input { width: 100%; align-self: stretch; padding: 4px 0; border: 0; background: transparent; color: var(--ink); outline: 0; }
.search-meta { display: flex; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 11px; margin: 8px 0 5px; }
.search-meta[hidden] { display: none; }
.search-submit, .search-pages button { padding: 5px 10px; border: 1px solid #8faed4; border-radius: 4px; background: #f6faff; color: #193758; font-size: 12px; font-weight: 700; }
.search-submit { display: flex; gap: 5px; align-items: center; }
.search-submit:hover, .search-pages button:not(:disabled):hover { background: #e2eeff; }
.search-pages { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.search-pages:empty { display: none; }
.search-pages button:disabled { opacity: .5; cursor: default; }
.search-results { max-height: 360px; max-height: min(360px, 48dvh); border: 1px solid #a9b8c6; background: white; border-radius: 4px; overflow: auto; }
.result-grid { min-width: 860px; }
.result-columns { display: grid; grid-template-columns: 53px minmax(105px, 1fr) 51px minmax(96px, .9fr) minmax(142px, 1.5fr) minmax(75px, .7fr) minmax(91px, .9fr) 70px 56px; gap: 5px; align-items: center; padding: 6px; text-align: left; }
.result-header { position: sticky; top: 0; z-index: 1; font-size: 11px; font-weight: 700; background: var(--soft-green); color: #253b34; }
.result { width: 100%; min-height: 39px; border: 0; border-top: 1px solid #d8e0e8; background: white; color: var(--ink); font-size: 12px; }
.result:nth-child(even) { background: #f9fafc; }
.result:hover, .result[aria-selected="true"] { background: #e2eeff; }
.result[aria-selected="true"] { box-shadow: inset 3px 0 #0c6ff9; }
.result > * { min-width: 0; overflow-wrap: anywhere; }
.line-options-body { display: grid; grid-template-columns: 150px minmax(240px, 1fr); gap: 6px; }
.line-options-body p { grid-column: 1 / -1; margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.side { display: grid; gap: 10px; }
.totals-body { padding: 8px; }
.total-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 5px 7px; border-bottom: 1px solid #e0e6ed; font-size: 13px; }
.total-line strong { color: #102e50; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.total-line small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.discount-control { display: flex; align-items: center; border: 1px solid #a8bfdc; border-radius: 4px; background: #f5f8fc; }
.discount-control input { width: 7em; min-height: 28px; padding: 3px 6px; border: 0; border-radius: 3px 0 0 3px; background: #fff3d0; color: #102e50; text-align: right; font-variant-numeric: tabular-nums; }
.discount-control > span { padding: 0 6px; border-left: 1px solid #d5e1ee; color: #425268; }
.discount-control input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #b42318; }
.discount-error { margin: 4px 7px; color: #9c2418; font-size: 12px; }
.grand-total { min-height: 44px; margin-top: 6px; border: 1px solid #b4c9e4; border-radius: 5px; background: #e9f2ff; color: #102e50; font-weight: 700; }
.grand-total strong { font-size: clamp(18px, 1.7vw, 25px); }
.total-records { display: flex; justify-content: space-between; gap: 8px; padding: 10px 2px 7px; font-size: 13px; }
.total-note { margin: 0; padding: 8px 2px 1px; border-top: 1px solid #e0e6ed; color: var(--muted); font-size: 12px; line-height: 1.4; }
.guide { border: 1px solid var(--line); border-radius: 6px; background: #f6f9fd; padding: 11px 9px; }
.guide-title { display: flex; align-items: center; gap: 6px; color: #163657; }
.guide-title .icon { width: 16px; height: 16px; }
.guide h2 { margin: 0; font-size: 14px; }
.guide p { margin: 6px 0 8px; font-size: 12px; line-height: 1.4; color: var(--muted); }

.order-footer { margin: 0 7px 6px; min-height: 36px; padding: 7px 10px; background: #f5f6f8; border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #425268; }
.footer-divider { display: inline-block; width: 1px; height: 11px; vertical-align: middle; background: #b8c6d4; margin: 0 5px; }
.sample { display: flex; align-items: center; gap: 6px; }
.sample-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: #188453; }

.item-dialog { --item-gutter: clamp(18px, 2.4vw, 34px); width: min(1280px, calc(100% - 36px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 1px solid #b6c8dd; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 18px 55px #10274744; overflow: auto; overscroll-behavior: contain; }
.item-dialog::backdrop { background: #11264080; }
.item-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px var(--item-gutter); border-bottom: 1px solid #dce5ef; background: #f6faff; }
.item-dialog-head > div { flex: 1 1 160px; min-width: 0; }
.item-dialog-kicker { margin: 0 0 3px; color: #4c6581; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.item-dialog-head h2 { margin: 0; color: #14365e; font-size: clamp(18px, 2.2vw, 24px); overflow-wrap: anywhere; }
.item-demo-badge { padding: 4px 7px; border: 1px solid #d6e2f2; border-radius: 20px; color: #375a85; background: #ecf3fd; font-size: 11px; font-weight: 700; }
.item-nav { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid #d1dfef; border-radius: 8px; background: #edf3fb; }
.item-nav button { display: grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 1px solid #bfd2ea; border-radius: 5px; background: #fff; color: #194575; }
.item-nav button:hover:not(:disabled) { background: #e0edff; border-color: #8faed4; }
.item-nav button:disabled { color: #67758a; background: transparent; border-color: transparent; opacity: .65; cursor: default; }
.item-nav .icon { width: 16px; height: 16px; }
.item-nav-forward { transform: rotate(180deg); }
.item-nav-count { min-width: 49px; padding-inline: 3px; color: #24496f; text-align: center; white-space: nowrap; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.item-dialog-close { width: 32px; height: 32px; }
.item-dialog-body { padding: 18px var(--item-gutter) 22px; }
.item-info-description { margin: 0 0 12px; color: #193758; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.item-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px 20px; margin: 0; font-size: 13px; }
.item-meta dt { margin-bottom: 4px; color: #52657b; font-size: 12px; }
.item-meta dd { margin: 0; color: #173a62; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#item-info-meta { padding: 12px 16px; border: 1px solid #e0e8f3; border-radius: 8px; background: #f7faff; }
.item-stock, .item-history { margin-top: 20px; }
.item-dialog h3 { margin: 0 0 9px; color: #193758; font-size: 16px; }
.item-stock-wrap { overflow: auto; border: 1px solid #d6e2ec; border-radius: 6px; }
.item-stock-table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.item-stock-table th, .item-stock-table td { padding: 6px 14px; text-align: left; }
.item-stock-table thead { background: #eaf1fb; color: #234265; }
.item-stock-table tbody tr:nth-child(even) { background: #f7faff; }
.item-stock-table tbody tr, .item-stock-table tfoot tr { border-top: 1px solid #e1e8f1; }
.item-stock-table th:nth-child(n+3), .item-stock-table td:nth-child(n+3), .item-stock-table tfoot td { text-align: right; }
.item-stock-table tfoot { background: #eef5fc; color: #193758; font-weight: 700; }
.item-history-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 4px; }
.item-history-tabs button { flex: 1 0 auto; min-height: 32px; padding: 4px 12px; border: 1px solid #d4e0ed; border-radius: 5px; background: #f6f8fb; color: #405975; font-size: 12px; white-space: nowrap; }
.item-history-tabs button[aria-selected="true"] { border-color: #a7c4e8; background: #e3efff; color: #153d6c; font-weight: 700; }
.item-history-panel { margin-top: 6px; padding: 12px 16px; border: 1px solid #dce5ef; border-radius: 8px; background: #fff; }
.item-history-panel h4 { margin: 0 0 8px; color: #193758; font-size: 13px; }
.item-history-values { margin-top: 9px; }
.item-year-summary { margin-top: 9px; padding-top: 8px; border-top: 1px solid #dce5ef; }

@media (max-width: 1060px) {
  .order-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier, .observations { grid-column: auto; }
  .module-bar { padding-inline: 18px; }
  .order-content { grid-template-columns: minmax(0, 1fr); }
  .side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items: start; }
}
@media (max-width: 700px) {
  .brand-bar { grid-template-columns: 1fr auto; padding-inline: 12px; gap: 8px; }
  .brand-context, .module-context { display: none; }
  .module-bar { overflow-x: auto; min-height: 40px; padding: 4px 10px; }
  .company { width: 100%; font-size: 12px; }
  h1.section-title { font-size: 18px; }
  .order-fields { grid-template-columns: 1fr; }
  .side { grid-template-columns: 1fr; }
  .details-toolbar { grid-template-columns: 1fr; }
  .detail-hint { display: none; }
  .item-dialog { --item-gutter: 12px; width: calc(100% - 16px); }
  .item-dialog-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .item-dialog-head form { grid-column: 2; grid-row: 1; justify-self: end; }
  .item-demo-badge { justify-self: start; }
  .item-nav { justify-self: end; }
}