/* Hybrid purchase-order screen. Layout follows WPF PoView (toolbar, left list, header, lines). */

.po-hybrid-root {
    --po-bar: #b4b4b4;
    --po-header: #bfbfbf;
    --po-line: #c8c8c8;
    --po-select: linear-gradient(to bottom, #fdd3a8 0%, #fce79f 100%);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: var(--sc-desktop-font-size, 12px);
    color: #222;
    background: #fff;
}

.po-hybrid-root .mud-typography,
.po-hybrid-root .mud-input,
.po-hybrid-root .mud-input-label,
.po-hybrid-root .mud-checkbox .mud-typography,
.po-hybrid-root .mud-table-cell {
    font-size: 1em;
}

.po-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.po-topbar {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 30px;
    padding: 0 4px;
    background: var(--po-bar);
    flex: 0 0 auto;
}

/* Clock punches toolbar: native 32-viewBox glyphs, not MudIcon nested SVGs. */
.po-tool {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 2px 6px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #383434;
    cursor: pointer;
}

.po-tool svg {
    display: block;
    width: 22px;
    height: 22px;
}

.po-tool-primary {
    color: #2828DA;
}

.po-tool:hover:not(:disabled) {
    background-color: rgba(38, 160, 218, 0.24);
    box-shadow: inset 0 0 0 1px #26a0da;
}

.po-tool:disabled {
    opacity: 0.45;
    cursor: default;
}

.po-menu {
    display: inline-flex;
}

.po-menu .mud-button-root {
    padding: 0;
    min-width: 0;
}

.po-sep {
    width: 1px;
    align-self: stretch;
    margin: 4px 4px;
    background: #7a7a7a;
}

.po-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
}

.po-list {
    flex: 0 0 220px;
    width: 220px;
    min-width: 180px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--po-line);
    background: #fff;
}

.po-search {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    padding: 0 4px;
    flex: 0 0 auto;
}

.po-search .mud-input-control {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
}

.po-search .mud-input.mud-input-underline:before {
    border-bottom-color: #c8c8c8;
}

.po-orders {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 4px;
}

.po-order {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    font: inherit;
    padding: 3px 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.po-order:hover {
    background-color: #e8e8e8;
}

.po-order.sc-datagrid-row-selected,
.po-order.sc-datagrid-row-selected:hover {
    background-color: #fdd3a8 !important;
    background-image: var(--po-select) !important;
}

.po-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.po-header-bar {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-height: 35px;
    padding: 0 10px;
    background: var(--po-header);
    color: #111;
    flex: 0 0 auto;
}

.po-header-bar .po-num {
    font-size: 1.35em;
    font-weight: 800;
}

.po-header-bar .po-vendor,
.po-header-bar .po-total {
    font-size: 1.15em;
}

.po-header-fields {
    display: grid;
    grid-template-columns: 90px minmax(160px, 210px) 110px minmax(180px, 260px) 1fr;
    grid-template-rows: repeat(8, minmax(32px, auto));
    grid-template-areas:
        "vendorlbl  vendor   shiplbl   shipto  ."
        "contactlbl contact  addrlbl   addr    ."
        "datelbl    date     willlbl   will    ."
        "duelbl     due      .         .       ."
        "createdlbl created  .         .       ."
        "freightlbl freight  paylbl    pay     ."
        "ratelbl    rate     .         tax     ."
        ".          .        totallbl  total   .";
    column-gap: 8px;
    row-gap: 0;
    align-items: center;
    padding: 8px 12px 6px 8px;
    background: #fff;
    border-bottom: 1px solid var(--po-line);
    flex: 0 0 auto;
}

.po-label {
    text-align: right;
    padding: 0 4px 4px 0;
    color: #333;
    white-space: nowrap;
    font-size: round(nearest, calc(var(--sc-desktop-font-size, 12px) * 11 / 12), 1px);
}

.po-header-fields .mud-input-control {
    min-width: 0;
    margin: 0 !important;
    padding: 0;
}

.po-header-fields .mud-input-control-helper-container {
    display: none !important;
}

.po-header-fields .mud-input > input,
.po-header-fields .mud-select-input,
.po-header-fields .mud-input-slot {
    font-size: var(--sc-desktop-font-size, 12px);
    color: #111;
    padding-top: 4px;
    padding-bottom: 3px;
}

.po-header-fields .mud-input.mud-input-underline:before {
    border-bottom-color: #c8c8c8;
}

.po-field {
    min-width: 0;
}

.po-header-fields .address-editor {
    width: 100%;
}

.po-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: 2px;
}

.po-inline .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

.po-rate-suffix {
    flex: 0 0 auto;
    padding: 0 4px 3px 0;
    color: #333;
}

.po-header-fields .mud-checkbox {
    margin: 0;
    justify-self: start;
}

.po-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 30px;
    padding: 0 4px;
    background: var(--po-bar);
    flex: 0 0 auto;
}

.po-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.po-grid .mud-table,
.po-grid .mud-table-container {
    height: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.po-grid .mud-table-container {
    flex: 1;
    min-height: 0;
}

/* Keep the totals footer on the bottom edge like Bids: the table fills the
   pane and an empty trailing body row absorbs the spare height. */
.po-grid .mud-table-container > .mud-drop-container,
.po-grid .mud-table-container table {
    height: 100%;
}

.po-grid .mud-table-body::after {
    content: "";
    display: table-row;
    height: 100%;
}

.po-grid .mud-table-body .mud-table-cell {
    padding: 2px 6px !important;
    vertical-align: middle;
}

.po-grid .mud-table-body .mud-table-cell.po-field-error {
    box-shadow: inset 0 0 0 2px #d32f2f;
}

.po-grid .po-line-error-host {
    display: block;
    min-width: 0;
    width: 100%;
}

/* WPF SelectorColumn (ShowOnlyWhenMouseOverRow) / Bids .bh-select-col + TckrdIcons.Check. */
.po-grid .po-select-col {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0 2px !important;
    text-align: center;
}

.po-grid .po-row-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 22px;
    visibility: hidden;
    cursor: pointer;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
}

.po-grid .po-row-select:hover,
.po-grid .po-row-select:focus,
.po-grid .po-row-select:focus-visible {
    background: transparent;
    box-shadow: none;
    outline: none;
}

.po-grid .mud-table-body .mud-table-row:hover .po-row-select,
.po-grid .mud-table-body .mud-table-row.sc-datagrid-row-selected .po-row-select {
    visibility: visible;
}

.po-grid .po-row-select svg {
    display: block;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.po-grid .mud-table-foot .mud-table-cell,
.po-grid tfoot td {
    background: #424242 !important;
    color: #f0f0f0 !important;
    font-weight: 600;
    font-size: 11px;
    padding: 2px 6px !important;
}

.po-placeholder {
    color: #8a8a8a;
}

.po-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    z-index: 2;
}

.po-main-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}