* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #f6f8fa;
    margin: 0;
}

a,
a:visited,
a:hover,
a:focus,
a:active,
a:focus-visible {
    text-decoration: none;
}

label {
    font-size: 9pt;
    display:block;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
}

.text-center, .c_align { text-align: center !important; }
.text-right, .r_align { text-align: right !important; }
.text-left, .l_align { text-align: left !important; }

/* Slide Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #28a745;
}

input:focus + .slider {
  box-shadow: 0 0 1px #28a745;
}

input:checked + .slider:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}

.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}


body.with-admin-header {
    padding-top: calc(var(--admin-header-height, 56px) + 20px);
    padding-bottom: var(--admin-footer-height, 20px);
}

.admin-top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--admin-header-height, 56px);
    background: #0b2239;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.admin-top-header__title {
    font-family: Arial, sans-serif;
    font-size: max(12px, calc(var(--admin-header-height, 56px) / 3));
    font-weight: 400;
    letter-spacing: 0.2px;
}

.admin-top-header__logo {
    display: block;
    height: calc(var(--admin-header-height, 56px) - 14px);
    max-width: 200px;
    width: auto;
    object-fit: contain;
}

.admin-top-header__logo-link {
    position: absolute;
    left: 12px;
    display: inline-flex;
    align-items: center;
}

.admin-top-header__account {
    position: absolute;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.admin-top-header__user {
    opacity: 0.95;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.admin-top-header__first-name {
    font-size: max(10px, calc(var(--admin-header-height, 56px) / 4));
}

.admin-top-header__username {
    font-size: 13px;
}

.admin-top-header__account-link {
    color: inherit;
    text-decoration: none;
}

.admin-top-header__account-link:hover,
.admin-top-header__account-link:focus-visible {
    text-decoration: none;
}

.admin-top-header__logout-form {
    margin: 0;
}

.admin-top-header__logout-link {
    margin: 0;
    padding: 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-top-header__logout-icon {
    height: min(50px, calc(var(--admin-header-height, 56px) * 0.4));
    width: auto;
    max-width: 50px;
    display: block;
}

.admin-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--admin-footer-height, 20px);
    z-index: 900;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: calc(100vh - var(--admin-header-height, 56px) - var(--admin-footer-height, 20px) - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.container--plain {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.badge {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 6px;
    color: #fff;
}

.badge-live, .badge-received {
    background: #2f9e44;
}

.badge-dev, .badge-qc-hold {
    background: #f08c00;
}

.badge-returned, .badge-missing, .badge-damaged {
    background: #e42309;
}



.form-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
   width:100%
}

.form-card h2,
.form-card h3 {
    margin: 6px 0 3px;
}

.form-card hr {
    margin: 8px 0;
}

.form-hint {
    display: block;
    margin: -4px 0 4px;
    color: #64748b;
    font-size: 0.85rem;
}

.my-3 {
    margin: 12px 0;
}

.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    width: min(400px, 92vw);
    border: 2px solid #0b2239;
    border-radius: 10px;
    background: #fff;
    padding: 22px 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.login-box__logo {
    max-width: 220px;
    width: auto;
    max-height: 80px;
    object-fit: contain;
    display: block;
}

.login-box__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0b2239;
    text-align: center;
}

.login-box__subtitle {
    margin: 0;
    text-align: center;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.login-control {
    width: min(200px, 100%);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-control label {
    margin: 0;
}

.login-control input[type="text"],
.login-control input[type="password"] {
    width: 100%;
    box-sizing: border-box;
}

.login-control .password-field-wrap {
    width: 100%;
}

.login-submit {
    width: min(200px, 100%);
}

.account-screen {
    min-height: 100%;
}

.account-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.account-details-card {
    margin-top: 2px;
    max-width: 100%;
}

.account-details-card p {
    margin: 0;
}

.account-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.account-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.account-form .login-control {
    width: 100%;
    gap: 2px;
    margin-bottom: 2px;
}

.account-form .password-field-wrap--max-200 {
    width: min(200px, 100%);
    max-width: 100%;
}

.account-form .login-submit {
    margin-top: 2px;
}

input[type="email"],
input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"] {
    padding: 4px 3px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-sizing: border-box;
}

textarea {
    padding: 10px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

input[type="color"] {
    height: 44px;
    width: 72px;
    padding: 2px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #fff;
}

.header-logo-preview {
    max-height: 72px;
    width: auto;
    border: 0;
    border-radius: 6px;
    padding: 4px;
    background: transparent;
    object-fit: contain;
}

.logo-preview-card {
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    height: 92px;
}

.company-assets-row .logo-preview-card {
    width: 100%;
    min-width: 180px;
    box-sizing: border-box;
}

.company-assets-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.preview-placeholder {
    font-size: 13px;
    color: #e9ecef;
}

.favicon-preview {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.favicon-preview--clickable {
    cursor: pointer;
}

.favicon-trigger-card {
    cursor: pointer;
}

.help-text {
    margin: 4px 0 0;
    font-size: 12px;
    color: #6c757d;
}

.header-logo-preview--clickable {
    cursor: pointer;
}

.logo-trigger-card {
    cursor: pointer;
}

.settings-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1500;
}

.settings-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-modal__content {
    width: min(420px, 92vw);
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-modal__content--logo {
    min-height: 520px;
}

.settings-modal__content--user {
    width: min(520px, 94vw);
}

.settings-modal__content--logo .logo-tab-panel {
    min-height: 210px;
}

.logo-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.logo-tab {
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #d0d7de;
    background: #f8f9fa;
    color: #343a40;
}

.logo-tab.is-active {
    background: #2b6cb0;
    color: #fff;
    border-color: #2b6cb0;
}

.logo-tab-panel {
    display: none;
    flex-direction: column;
    gap: 8px;
}

.logo-tab-panel.is-active {
    display: flex;
}

.settings-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.settings-tab {
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #f8f9fa;
    color: #343a40;
    cursor: pointer;
}

.settings-tab.is-active {
    background: #2b6cb0;
    color: #fff;
    border-color: #2b6cb0;
}

.settings-tab-panel {
    display: none;
}

.settings-tab-panel.is-active {
    display: block;
}

.expense-tab-content .tab-pane:not(.show) {
    display: none;
}

.expense-tab-content .tab-pane.show {
    display: block;
}

.document-lines-table .table-warning,
.inputs-table .table-warning {
    background-color: #fff3cd;
}

.document-lines-table .table-danger,
.inputs-table .table-danger {
    background-color: #f8d7da;
}

.document-lines-table .table-orange,
.inputs-table .table-orange {
    background-color: #ffe8cc;
}

.procurement-audit-banner__note {
    font-weight: normal;
}

.po-linked-pi-lock-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    font-size: 0.875rem;
}

.po-upload-pi-form__input {
    max-width: 220px;
}

.drop-zone {
    margin-top: 6px;
    border: 2px dashed #c8d1da;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    color: #495057;
    background: #fafbfc;
    cursor: pointer;
    font-size: 13px;
}

.drop-zone.is-dragover {
    border-color: #2b6cb0;
    background: #edf4ff;
    color: #1c4f88;
}

.visually-hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.settings-modal__preview {
    max-height: 120px;
    max-width: 100%;
    align-self: center;
}

.settings-modal__preview-card {
    height: auto;
    min-height: 0;
    min-width: 150px;
    width: auto;
    max-width: 100%;
    align-self: center;
}

.svg-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.svg-heading-row label {
    margin: 0;
}

.link-button {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2b6cb0;
    font-size: 12px;
    cursor: pointer;
}

.delete-icon-button {
    color: #efefef;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
}

.delete-icon-button svg {
    display: block;
}

.password-field-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

.password-field-wrap > input[type="password"],
.password-field-wrap > input[type="text"] {
    flex: 1;
    min-width: 0;
}

.password-toggle {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    background: #f8f9fa;
    color: #343a40;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.settings-modal__save {
    margin-top: 4px;
}

.settings-modal__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 4px;
}

.settings-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0;
    background: transparent;
    color: #495057;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    margin: 0;
    padding: 2px 6px;
}

.settings-modal-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.settings-modal-row.mb-3 {
    margin-bottom: 12px;
}

.settings-modal-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.settings-modal-row .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
}

.settings-modal-row .form-control {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .settings-modal-row {
        grid-template-columns: 1fr;
    }
}

.settings-section {
    border: 1px solid #edf1f4;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-section h2 {
    margin: 0 0 4px;
    font-size: 17px;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.setting-row label {
    margin: 0;
    min-width: 120px;
}

.inline-color-pickers {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inline-color-pickers label {
    min-width: auto;
    font-size: 13px;
}

.inline-color-pickers input[type="color"] {
    width: 48px;
    height: 34px;
    padding: 1px;
}

.inline-width-input {
    width: 44px;
    min-width: 44px;
    padding: 6px;
    text-align: center;
}

.compact-number-input {
    width: 64px;
    min-width: 64px;
    padding: 6px 8px;
    text-align: center;
}

button {
    margin-top: 0px;
    padding: 10px 14px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    background: #2b6cb0;
    color: #fff;
}

.secondary-button {
    background: #e9ecef;
    color: #212529;
}

.alert {
    padding: 10px 12px;
    border-radius: 6px;
}

.alert-error {
    background: #ffe3e3;
    color: #c92a2a;
}

.alert-success {
    background: #d3f9d8;
    color: #2b8a3e;
}

select {
    padding: 3px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.radio-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.form-row > .form-col {
    flex: 1 1 0;
    min-width: 0;
}

.form-row > .form-col.form-col--fixed-150 {
    flex: 0 0 150px;
    width: 150px;
}

.form-row > .form-col.form-col--fixed-brand-code {
    flex: 0 0 72px;
    width: 72px;
    max-width: 72px;
}

.form-row > .form-col.form-col--grow {
    flex: 1 1 0;
    min-width: 0;
}

.form-row > .form-col.form-col--spacer {
    visibility: hidden;
    pointer-events: none;
}

.form-col label {
    display: block;
    margin-bottom: 6px;
}

.form-row > .form-col.form-col--toggle {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-col--toggle label[for] {
    margin-bottom: 6px;
    width: 100%;
    text-align: center;
}

.toggle,
.custom-toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    user-select: none;
    margin-top: 2px;
}

.toggle input,
.custom-toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.toggle__track {
    display: block;
    width: 44px;
    height: 24px;
    background: #d0d7de;
    border-radius: 999px;
    position: relative;
    transition: background 120ms ease-in-out;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.toggle__track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 120ms ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.toggle input:checked + .toggle__track,
.custom-toggle-switch input:checked + .toggle__track {
    background: #495057;
}

.toggle input:checked + .toggle__track::before,
.custom-toggle-switch input:checked + .toggle__track::before {
    transform: translateX(20px);
}

.toggle input:focus-visible + .toggle__track,
.custom-toggle-switch input:focus-visible + .toggle__track {
    outline: 2px solid #2b6cb0;
    outline-offset: 2px;
}

.field-width-150 {
    width: 150px;
    max-width: 100%;
    box-sizing: border-box;
}

.field-width-brand-code {
    width: 72px;
    max-width: 100%;
    box-sizing: border-box;
}

.compact-input {
    width: 150px;
    max-width: 100%;
    box-sizing: border-box;
}

.field-width-350 {
    width: 350px;
    max-width: 100%;
    box-sizing: border-box;
}

.password-field-wrap--max-200 {
    width: min(200px, 100%);
    max-width: 100%;
}

.password-field-wrap--max-200 > input[type="password"],
.password-field-wrap--max-200 > input[type="text"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.password-field-wrap--max-200 > .password-toggle {
    max-width: 200px;
}

.table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: none;
}

.admin-table-page {
    max-height: calc(100vh - var(--admin-header-height, 56px) - 96px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.container.admin-table-page {
    max-width: 100%;
}

.admin-table-page .table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.expenses-table-toolbar .expenses-table-search {
    max-width: 320px;
}

.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;
}

.warehouse-mix-search-wrap {
    flex: 0 0 auto;
}

.warehouse-mix-search {
    min-width: 220px;
}

.warehouse-mix-recipe-cell {
    max-width: 28rem;
}

.warehouse-mix-recipe-summary {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.warehouse-mix-link {
    color: var(--link-colour, #387ce3);
    text-decoration: none;
}

.warehouse-mix-link:hover {
    text-decoration: underline;
}

.warehouse-batch-header .warehouse-batch-mix-title {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.warehouse-batch-header .warehouse-batch-mix-code {
    font-size: 1.05rem;
    font-weight: 600;
}

.warehouse-batch-measure-group .btn {
    font-weight: 600;
}

.warehouse-batch-worksheet-table th,
.warehouse-batch-worksheet-table td {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
    font-size: 0.875rem;
}

.warehouse-batch-worksheet-table .target-scoops-display,
.warehouse-batch-worksheet-table .target-kg-display {
    font-variant-numeric: tabular-nums;
}

.warehouse-batch-ingredient-cell code {
    font-size: 0.8rem;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.inputs-table, .admin-table {
    width: 100%;
    border-collapse: seperate;
    border-spacing: 0;
}

.users-table th,
.users-table td {
    border: 1px solid #e9ecef;
    padding: 8px;
    text-align: left;
}

.inputs-table th,
.inputs-table td, admin-table th, .admin-table td {
    border: 1px solid #e9ecef;
    padding: 3px;
    text-align: left;
    vertical-align: top;
}

.users-table th:last-child,
.users-table td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.inputs-table th:last-child,
.inputs-table td:last-child {
    width: 40px;
    white-space: nowrap;
}

.users-table th {
    background: #f1f3f5;
}

.inputs-table th {
    background: #f1f3f5;
}

.input-tabs {
    margin-top: 10px;
}

.inputs-table input,
.inputs-table select {
    width: 100%;
    box-sizing: border-box;
}

.users-table tr.user-row--inactive td {
    color: #adb5bd;
}

.users-table tr.user-row--inactive a.edit-user-link {
    color: #2b6cb0;
}

.admin_table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.admin_table tbody tr:nth-child(even) {
    background: #dfdfdf;
}

.admin_table tbody tr.row--odd {
    background: #ffffff !important;
}

.admin_table tbody tr.row--even {
    background: #dfdfdf !important;
}

.admin_table th {
    background: #efefef;
    border-top: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Consolidated Table Viewport Framework */
.admin-table-viewport {
    display: block;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    margin-bottom: 1rem;
    max-height: var(--table-height, 60vh);
    flex: 1 1 auto;
    min-height: 150px;
}

.admin-table-viewport table {
    margin-bottom: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table-viewport table thead th {
    position: sticky;
    top: 0;
    background-color: #f8fafc;
    z-index: 10;
    box-shadow: inset 0 -1px 0 #e2e8f0;
}

.admin-table-viewport table thead th:first-child {
    border-top-left-radius: 6px;
}

.admin-table-viewport table thead th:last-child {
    border-top-right-radius: 6px;
}

.add_new {
    overflow: hidden;
    background-color: #dfdfdf;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d0d7de;
    color: #343a40;
    font-weight: 600;
}

.add_new_large {width:48px; height:48px; line-height:48px; border-radius:2px; font-size:48px;}
.add_new_medium {width:36px; height:36px; line-height:36px; border-radius:2px; font-size:36px;}
.add_new_small {width:24px; height:24px;  line-height:24px; border-radius:2px;  font-size:24px;}

.add-new-user-trigger {
    display: inline-flex;
    text-decoration: none;
}

.add-new-input-trigger {
    display: inline-flex;
    text-decoration: none;
}

.button-inline-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.button-inline-add i {
    font-style: normal;
    font-weight: 600;
    overflow: hidden;
    background-color: #dfdfdf;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d0d7de;
    color: #343a40;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 2px;
    font-size: 28px;
}

.button-inline-add i::before {
    content: "+";
}

.inputs-table-actions-header {
    text-align: center;
    vertical-align: middle;
    width: 52px;
}

.d-none {
    display: none !important;
}

.alert-secondary {
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    color: #343a40;
}

.superpack-builder-section, .label-configurator-section {
    border-radius: 8px;
}

.superpack-builder-section .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.font-weight-bold {
    font-weight: 600;
}

.superpack-builder-section .text-primary {
    color: #387ce3;
}

.superpack-builder-section .text-muted {
    color: #6c757d;
    font-size: 0.85rem;
}

.superpack-builder-section .form-control, .label-configurator-section  .form-control{
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #d0d7de;
    border-radius: 4px;
}

.superpack-builder-section .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.superpack-builder-section .btn-group label.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.875rem;
    margin: 0;
}

.superpack-builder-section .btn-group label.btn.active {
    background: #e7f1ff;
    border-color: #387ce3;
}

.superpack-builder-section .btn-group label.btn input {
    margin: 0;
}

.superpack-builder-section .superpack-sku-output {
    margin-top: 4px;
}

.superpack-builder-section .text-warning {
    color: #ffc107;
}

 .p-3 {
    padding: 12px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mr-2 {
    margin-right: 8px;
}

.superpack-builder-section .pack-suffix-dropdown {
    min-height: 160px;
}

.superpack-sku-queued-hint {
    margin-top: 6px;
    font-size: 0.85rem;
}

.add-new-purchase-trigger {
    display: inline-flex;
    text-decoration: none;
}

.inline-form {
    display: inline;
}

.form-actions-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.user-details-trigger {
    color: inherit;
    text-decoration: none;
}

.user-details-trigger:hover,
.user-details-trigger:focus-visible {
    color: inherit;
    text-decoration: none;
}

.username-heading--short {
    display: none;
}

/* 0px - 640px: mobile */
@media (max-width: 640px) {
    .container {
        margin: 0 auto;
        padding: 20px;
        border-radius: 6px;
    }

    body.with-admin-header {
        padding-top: calc(var(--admin-header-height, 56px) + 12px);
        padding-bottom: 12px;
    }

    .admin-top-header__title {
        display: none;
    }

    .admin-top-header__logo {
        max-width: 92px;
    }

    .admin-top-header__account {
        gap: 6px;
        right: 8px;
    }

    .admin-top-header__username {
        font-size: 11px;
    }

    .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .form-row > .form-col,
    .form-row > .form-col.form-col--fixed-150,
    .form-row > .form-col.form-col--toggle {
        width: 100%;
        flex: 1 1 auto;
        margin-left: 0;
        align-items: flex-start;
    }

    .form-col--toggle label[for] {
        text-align: left;
    }

    .field-width-150,
    .compact-input,
    .field-width-350 {
        width: 100%;
    }

    .account-columns {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .login-box {
        width: 96vw;
        padding: 14px;
    }

    .settings-modal__content--user,
    .settings-modal__content {
        width: 96vw;
        max-height: 92vh;
        overflow: auto;
    }

    .company-assets-row {
        grid-template-columns: 1fr;
    }

    .setting-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .users-table {
        font-size: 12px;
    }

    .inputs-table {
        font-size: 12px;
    }

    .users-table th,
    .users-table td {
        padding: 6px;
    }

    .inputs-table th,
    .inputs-table td {
        padding: 6px;
    }

    .users-table th:nth-child(3),
    .users-table th:nth-child(4),
    .users-table th:nth-child(5),
    .users-table th:nth-child(6),
    .users-table th:nth-child(7),
    .users-table td:nth-child(3),
    .users-table td:nth-child(4),
    .users-table td:nth-child(5),
    .users-table td:nth-child(6),
    .users-table td:nth-child(7) {
        display: none;
    }

    .username-heading--full {
        display: inline;
    }

    .username-heading--short {
        display: none;
    }

    .add_new_medium {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 25px;
    }
}

/* 641px - 1023px: tablet / small laptop */
@media (min-width: 641px) and (max-width: 1023px) {
    .container {
        margin: 0 auto;
        padding: 20px;
        max-width: 94vw;
    }

    .form-row {
        flex-wrap: wrap;
        gap: 14px;
    }

    .form-row > .form-col.form-col--toggle {
        margin-left: 0;
    }

    .account-columns {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .company-assets-row {
        grid-template-columns: 1fr;
    }

    .settings-modal__content--user {
        width: min(640px, 95vw);
    }

    .admin-top-header__title {
        display: none;
    }

    .users-table th:nth-child(3),
    .users-table th:nth-child(4),
    .users-table th:nth-child(5),
    .users-table th:nth-child(6),
    .users-table td:nth-child(3),
    .users-table td:nth-child(4),
    .users-table td:nth-child(5),
    .users-table td:nth-child(6) {
        display: none;
    }

    .add_new_medium {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 25px;
    }
}

/* 1024px - 1279px: desktop */
@media (min-width: 1024px) and (max-width: 1279px) {
    .container {
        max-width: 960px;
    }

    .account-columns {
        grid-template-columns: 1fr 1fr;
    }
}

/* 1280px and up: wide desktop */
@media (min-width: 1280px) {
    .container {
        max-width: 1100px;
        padding: 20px;
    }

    .settings-modal__content--user {
        width: min(620px, 92vw);
    }
}

.manufacturing-page-actions {
    margin: 0.35rem 0 0.75rem;
}

.manufacturing-intro,
.manufacturing-form .hint {
    color: #5a6570;
    max-width: 52rem;
}

.manufacturing-fieldset {
    border: 1px solid #d8dee3;
    padding: 0.75rem 1rem 1rem;
    margin: 0 0 1rem;
}

.manufacturing-fieldset legend {
    padding: 0 0.35rem;
}

.manufacturing-lines-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 0.75rem;
}

.manufacturing-lines-table th,
.manufacturing-lines-table td {
    text-align: left;
    border-bottom: 1px solid #e8ecef;
}

.manufacturing-lines-table th {
padding:5px 0;
}

.mix-single-column-layout {
    display: block;
    width: 100%;
}


.mix-name-code-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: flex-end;
}

.mix-name-code-row > div:first-child {
    flex-grow: 0;
    min-width: 0;
    width:100%;
    max-width:250px;
}

.manufacturing-form label {
    display: block;
    margin-top: 6px;
}

.mix-name-code-row #mix_name {
    flex-grow: 1;
    width: 100%;
}

.mix-name-code-row #mix_commodity_code {
    width: 90px;
    max-width: 90px;
}

.input-modal-name-code-row #input_name,
.input-modal-name-code-row #add-input-name,
.input-modal-name-code-row #edit_input_name,
.commodity-fields-configurator #add-input-name {
    flex-grow: 1;
    width: 100%;
}

.input-modal-name-code-row #input_commodity_code,
.input-modal-name-code-row #add-input-commodity-code,
.input-modal-name-code-row #edit-input-commodity-code,
.input-modal-name-code-row #edit_input_commodity_code,
.commodity-fields-configurator #add-input-commodity-code,
.edit-commodity-fields-configurator #edit-input-commodity-code,
.mix-header-meta-block #mix_commodity_code  {
    width: 90px;
    max-width: 120px;
}


.mix-header-meta-block #mix_name,
.mix-header-meta-block #mix_aka {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mix-labour-radio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.mix-labour-radio-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mix-ingredient-results {
    position: absolute;
    z-index: 1000;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #fff;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
    width: 100%;
    left: 0;
    top: 100%;
}

.mix-result-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid #eef1f4;
    border-radius: 0;
    background: #fff;
    color: #212529;
    padding: 8px 10px;
    margin: 0;
}

.mix-result-item:hover,
.mix-result-item.active {
    background: #eef5ff;
}

.mix-save-actions {
    margin-top: 0.75rem;
}

.manufacturing-ingredients {
    position: relative;
}

.mix-search-wrap {
    position: relative;
}

.mix-col-scoops {
    width: 60px;
    text-align: center !important;
}

.mix-col-remove {
    width: 50px;
    text-align: center !important;
}

.mix-col-est {
    text-align: center !important;
}

.mix-scoops-input {
    width: 60px;
    max-width: 60px;
    text-align: center;
    padding:5px!important;
}

.cost-preview-card {
    border: 1px solid #cfe6cf;
    background: #f4fbf4;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    border-radius: 4px;
}

.cost-preview-list {
    margin: 0.35rem 0 0;
    padding-left: 1.2rem;
}

.link-as-button {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    line-height: 1.25;
}

.is-hidden {
    display: none !important;
}

.allergen-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 0.35rem 0.75rem;
    margin-top: 0.5rem;
    max-height: 12rem;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.allergen-check-label {
    font-weight: normal;
    font-size: 0.92rem;
}

/* Inputs table: hide AKA on small viewports, show from md breakpoint up */
.inputs-table .d-none.d-md-table-cell {
    display: none;
}

@media (min-width: 768px) {
    .inputs-table .d-none.d-md-table-cell {
        display: table-cell;
    }
}

.inputs-table-actions {
  /*  display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    max-width:2rem;
    */
    text-align: center!important;
}

.inputs-table-actions .table-row-edit-trigger {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.inputs-table-actions .table-row-edit-trigger svg {
    display: block;
}

.g-per-cup-input {
    width: 75px;
    max-width: 75px;
}

.inline-density-cell {
    text-align: center !important;
}

.inline-density-input {
    text-align: center;
    margin: 0 auto;
}

.editable-density {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px dashed #5f6b7a;
    cursor: pointer;
}

.editable-density::after {
    content: "\270E";
    font-size: 11px;
    color: #5f6b7a;
}

.hs-code-input {
    width: 100px;
    max-width: 100px;
}

/* Food specification modal (inputs list) */
.food-spec-modal__content {
    width: min(920px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.food-spec-meta {
    font-size: 0.9rem;
    color: #495057;
    margin: 0 0 0.5rem;
}

.food-spec-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 1.25rem;
    padding: 5px 0px;
    border-bottom: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
    align-items: start;
}

.food-spec-header__name-col {
    min-width: 0;
}

.food-spec-header__aliases {
    margin: 0.45rem 0 0;
    padding: 0;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.45;
    color: #495057;
    text-align: left;
}

.food-spec-header__aliases-kicker {
    font-weight: 600;
    color: #343a40;
    margin-right: 0.35rem;
}

.food-spec-readonly {
    margin: 0 0 0.35rem;
    padding: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #212529;
}

.spec-section-heading.food-spec-section--stacked + .hint + .food-spec-readonly,
.spec-section-heading.food-spec-section--stacked + .food-spec-readonly {
    margin-top: 0.25rem;
}

.food-spec-header__value--primary {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    color: #212529;
    text-align: left;
    word-break: break-word;
}

.spec-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1rem;
}

.spec-grid__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

.spec-grid__row:last-child {
    margin-bottom: 0;
}

.spec-grid__col {
    min-width: 0;
}

.spec-section-heading.food-spec-section--stacked {
    margin-top: 0.8rem;
    margin-bottom: 0.65rem;
}

.spec-section-heading.food-spec-section--stacked:first-child {
    margin-top: 0;
}

.spec-grid__col > .spec-section-heading + .food-spec-best-before-line {
    margin-top: 0;
}

.spec-section-heading.food-spec-section--stacked + .hint + .spec-label {
    margin-top: 0.35rem;
}

.spec-section-heading {
    margin: 0 0 0.65rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    color: #212529;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.35rem;
}

.spec-label {
    display: block;
    text-align: left;
    font-weight: 500;
    font-size: 0.88rem;
    margin: 0.5rem 0 0.2rem;
}

.spec-grid__col > .spec-label:first-of-type,
.spec-grid__col > .spec-section-heading + .spec-label {
    margin-top: 0;
}

.spec-input-full {
    width: 90%;
    max-width: 100%;
    box-sizing: border-box;
}

.spec-notes-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 120px;
    resize: vertical;
}

.food-spec-best-before-line {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.food-spec-best-before-part {
    font-size: 0.88rem;
    font-weight: 400;
    color: #212529;
    line-height: 1.5;
}

.food-spec-input--best-before-months {
    width: 40px;
    max-width: 40px;
    min-width: 40px;
    box-sizing: border-box;
    text-align: center;
    flex: 0 0 auto;
}

.food-spec-nutrition-stack,
.food-spec-micro-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.food-spec-nutrition-row,
.food-spec-micro-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 12px;
}

.food-spec-nutrition-row .spec-label,
.food-spec-micro-row .spec-label {
    margin: 0;
    text-align: left;
}

.food-spec-nut-field {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

/* Microbiology: fixed columns so `<`, numeric inputs, and units align on every row. */
.food-spec-micro-field {
    display: grid;
    grid-template-columns: 12px 85px 76px;
    align-items: center;
    column-gap: 8px;
    justify-content: end;
    width: min-content;
    max-width: 100%;
    margin-left: auto;
    box-sizing: border-box;
}

.food-spec-micro-input-slot {
    display: contents;
}

.food-spec-micro-lt {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    color: #212529;
    justify-self: end;
    width: 12px;
    text-align: right;
    padding-right: 1px;
    box-sizing: border-box;
}

.food-spec-unit-wrap {
    display: inline-flex;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    flex: 0 0 60px;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
}

.food-spec-micro-field .food-spec-unit-wrap {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    flex: 0 0 76px;
    justify-content: flex-start;
}

.food-spec-unit {
    font-size: 0.88rem;
    color: #495057;
    line-height: 1.2;
    white-space: nowrap;
}

.food-spec-nutrition-row--sub {
    padding-left: 0.75rem;
    border-left: 3px solid #dee2e6;
    margin-left: 0.15rem;
}

.food-spec-nutrition-row--sub .spec-label {
    font-size: 0.85rem;
    color: #495057;
}

.food-spec-input--nut {
    width: 45px;
    max-width: 45px;
    min-width: 45px;
    box-sizing: border-box;
    text-align: right;
    flex: 0 0 auto;
}

.food-spec-input--micro {
    box-sizing: border-box;
    text-align: right;
    flex: 0 0 auto;
}

.food-spec-micro-field .food-spec-input--micro,
.food-spec-micro-field .food-spec-input--micro-wide,
.food-spec-micro-field .food-spec-input--micro-narrow {
    width: 85px;
    min-width: 85px;
    max-width: 85px;
}

.food-spec-section--versioning {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background: #fafbfc;
}

.food-spec-section--versioning .spec-section-heading {
    border-bottom: none;
    padding-bottom: 0;
}

@media (max-width: 640px) {
    .food-spec-header {
        grid-template-columns: 1fr;
    }

    .spec-grid__row {
        grid-template-columns: 1fr;
    }
}

.food-spec-actions {
    margin-top: 1rem;
}

.food-spec-open-link {
    color: #2b6cb0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.food-spec-open-link:hover,
.food-spec-open-link:focus-visible {
    color: #1a4480;
}

.inputs-table .food-spec-open-link {
    font-weight: 500;
}

/* Document entry — master-detail layout */
.document-entry-page.container {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 5rem);
    min-height: 0;
}

.document-entry {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.document-entry__master {
    position: sticky;
    z-index: 15;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem 1.25rem 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 0.0rem;
}

.document-entry__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
}

.document-entry__title-row h1 {
    margin: 0;
    font-size: 1.35rem;
}

.document-status {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.document-status--draft {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.document-status--live {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.document-status--other {
    background: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

.document-status--archived {
    background: #343a40;
    color: #f8f9fa;
    border: 1px solid #23272b;
}

.po-status-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.po-status-badge--secondary {
    background: #e2e3e5;
    color: #383d41;
    border-color: #d6d8db;
}

.po-status-badge--primary {
    background: #cce5ff;
    color: #004085;
    border-color: #b8daff;
}

.po-status-badge--warning {
    background: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

.po-status-badge--success {
    background: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.po-status-badge--info {
    background: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}

.po-status-badge--danger {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.po-order-header-card label {
    display: block;
}

.po-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.po-header-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.po-inline-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.po-notes-stretch {
    display: flex;
    flex-direction: column;
}

.po-notes-stretch textarea {
    flex: 1;
    min-height: 60px;
    resize: none;
}

/* Redundant viewport classes consolidated into .admin-table-viewport */

.po-lines-footer {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    background: #f8f9fa;
}

.po-lines-toolbar h2 {
    font-weight: 600;
}

.po-lines-table th,
.po-lines-table td {
    vertical-align: middle;
}

.po-line-actions-col {
    width: 5.5rem;
}

.po-line-free-text-wrap.is-hidden,
.po-line-catalog-wrap.is-hidden,
.po-line-editables.is-hidden,
.po-catalog-toggle.is-hidden,
.po-add-row-btn.is-hidden,
.po-line-fixed-actions.is-hidden,
.po-update-row-btn.is-hidden,
.po-unit-label.is-hidden,
.po-item-mode-icon.is-hidden {
    display: none !important;
}

.po-line-item-cell {
    min-width: 16rem;
}

.po-item-input-row {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
}

.po-item-field-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.po-item-action-group {
    display: inline-flex;
    align-items: stretch;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.po-row-utility-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 0.2rem;
    background: #fff;
    color: #387ce3;
    cursor: pointer;
    line-height: 1;
}

.po-row-utility-btn:hover,
.po-row-utility-btn:focus {
    background: #f0f6ff;
    border-color: #387ce3;
    outline: none;
}

.po-price-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
}

.po-price-input-wrap {
    flex: 1 1 6rem;
    min-width: 5.5rem;
}

.po-price-basis {
    flex: 0 0 auto;
    width: auto;
    max-width: 6.5rem;
    font-size: 0.75rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.po-line-row--fixed {
    background: #fafbfc;
}

.po-line-row--draft .po-line-total {
    color: #6c757d;
}

.po-fixed-text {
    font-weight: 500;
}

.po-line-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.po-add-row-btn {
    border-color: #28a745;
    background: #e8f5ec;
    color: #1e7e34;
    font-weight: 700;
    font-size: 1.25rem;
}

.po-add-row-btn:hover,
.po-add-row-btn:focus {
    background: #28a745;
    color: #fff;
}

.po-line-fixed-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.po-line-fixed-actions .table-row-edit-trigger,
.po-line-fixed-actions .delete-icon-button {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.po-line-fixed-actions .table-row-edit-trigger svg,
.po-line-fixed-actions .delete-icon-button svg {
    display: block;
}

.po-update-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #387ce3;
    border-radius: 0.25rem;
    background: #e8f1fd;
    color: #387ce3;
    cursor: pointer;
    line-height: 0;
}

.po-update-row-btn:hover,
.po-update-row-btn:focus {
    background: #387ce3;
    color: #fff;
    outline: none;
}

.po-update-row-btn svg {
    display: block;
}

.po-line-row--editing {
    background: #fff;
}

.po-order-form-page .document-input-prefix-wrap {
    display: flex;
    align-items: center;
}

.po-order-form-page .document-input-prefix {
    margin-right: 0.25rem;
    color: #6c757d;
}

.po-view-summary-card .h4 {
    font-weight: 700;
}

.po-view-toolbar .btn-link {
    text-decoration: none;
}

.po-view-live-banner {
    border-left: 4px solid #ffc107;
}

.po-view-locked-banner {
    border-left: 4px solid #6c757d;
}

.po-view-lines-table th,
.po-view-lines-table td {
    vertical-align: middle;
}

.goods-in-search-input {
    max-width: 32rem;
}

.goods-in-table-viewport--unlinked {
    margin-bottom: 0;
}

.goods-in-lookup-table th,
.goods-in-lookup-table td,
.goods-in-lines-table th,
.goods-in-lines-table td {
    vertical-align: middle;
    font-size: 0.875rem;
}

.goods-in-line-row--complete {
    opacity: 0.65;
}
.goods-in-line-row:hover {
    background-color: #f0f8ff!important; /* A light blue background for highlighting */
    cursor: pointer; /* Indicate it's interactive */
}

.goods-in-packs-input,
.goods-in-packs-received-input,
.goods-in-pack-size-input,
.goods-in-line-total-input,
.goods-in-batch-input,
.goods-in-batch-code-input,
.goods-in-gc-batch-code-input,
.goods-in-country-input,
.goods-in-country-of-origin-input {
    min-width: 2rem;
}

.goods-in-pack-size-input {
    max-width: 6rem;
}

.goods-in-line-total-input {
    max-width: 6.5rem;
}

.goods-in-pack-size-suffix,
.goods-in-total-suffix {
    white-space: nowrap;
}



.goods-in-unlinked__title {
    font-weight: 600;
    color: #1a202c;
}

.goods-in-retro-po-form,
.document-entry__retro-po-form {
    display: inline;
    margin: 0;
}

.document-entry__footer-actions .document-entry__retro-po-form {
    margin-right: 0.5rem;
}

.document-entry__delete-retro-po-form {
    display: inline;
    margin: 0 0 0 0.5rem;
}

.btn.btn-danger {
    background: #c53030;
    border: 1px solid #9b2c2c;
    color: #fff;
    border-radius: 4px;
    padding: 0.25rem 0.65rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.btn.btn-danger:hover,
.btn.btn-danger:focus-visible {
    background: #9b2c2c;
    border-color: #742a2a;
}

.outline-button--accent {
    border-color: #2b6cb0;
    color: #2b6cb0;
}

.outline-button--accent:hover,
.outline-button--accent:focus-visible {
    background: #ebf4ff;
    border-color: #1a4480;
    color: #1a4480;
}

/* Main dashboard module cards */
.dashboard-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
}

.dashboard-nav-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    color: #212529;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-nav-card:hover,
.dashboard-nav-card:focus-visible {
    border-color: #2b6cb0;
    box-shadow: 0 4px 12px rgba(43, 108, 176, 0.15);
    transform: translateY(-1px);
    color: #1a4480;
}

.dashboard-nav-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: #e9f2ff;
    color: #2b6cb0;
}

.dashboard-nav-card__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.dashboard-nav-card__label {
    font-size: 1.05rem;
    font-weight: 600;
}

.dashboard-nav-card__desc {
    font-size: 0.82rem;
    color: #6c757d;
    line-height: 1.3;
}

.dashboard-nav-card--featured {
    grid-column: span 2;
    min-height: 7.5rem;
    border-color: #c5d9f0;
    background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 100%);
}

.dashboard-nav-card--commercials .dashboard-nav-card__icon {
    background: #e8f5e9;
    color: #2e7d32;
}

.dashboard-nav-card--commercials:hover,
.dashboard-nav-card--commercials:focus-visible {
    border-color: #2e7d32;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
    color: #1b5e20;
}

@media (max-width: 640px) {
    .dashboard-nav-card--featured {
        grid-column: span 1;
    }
}

/* Commercials module */
.commercials-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f8fafc;
    justify-content: space-between;
    width:100%;
}

/* Push the second group wrapper to the right and right-align its contents */
.commercials-filter-bar > div:last-of-type {
    margin-left: auto; /* Acts like ms-auto */
    display: flex;
    flex-direction: column; /* Emulates flex-column */
    align-items: flex-end;   /* Aligns label and select wrapper flush right */
}

.commercials-report-page {
    --report-table-offset: 400px;
}

.commercials-report-page .commercials-filter-bar {
    position: sticky;
    top: 0;
    z-index: 15;
}

.commercials-filter-bar__group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 10rem;
}

.commercials-filter-bar__group legend {
    font-size: 0.78rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.15rem;
}

.commercials-filter-bar__checkboxes {
    border: none;
    padding: 0;
    margin: 0;
    min-width: auto;
}

.commercials-filter-bar__checkboxes .checkbox-row {
    font-size: 0.9rem;
}

.commercials-filter-bar__radios {
    border: none;
    padding: 0;
    margin: 0;
    min-width: auto;
}

.commercials-filter-bar__radios .radio-row {
    font-size: 0.9rem;
}

.commercials-filter-bar__actions {
    margin-left: auto;
}

.commercials-report-table-wrap {
    margin-bottom: 1rem;
}

.commercials-report-table__avg {
    font-weight: 600;
}

.commercials-hub-note {
    margin-top: 0.5rem;
}

.dashboard-links {
    margin-top: 0.5rem;
}

/* Automated invoice PDF upload (dashboard) */
.dashboard-invoice-upload {
    margin: 2rem 0 1.5rem;
    max-width: 640px;
}

.dashboard-invoice-upload__title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a202c;
}

.dashboard-invoice-upload__intro {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.45;
}

.dashboard-invoice-upload__alert {
    max-width: 640px;
    margin: 0 0 1rem;
}

.dropzone {
    position: relative;
    display: block;
    border: 2px dashed #cbd5e0;
    border-radius: 10px;
    background: #f8fafc;
    padding: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.dropzone:hover,
.dropzone:focus-within {
    border-color: #90cdf4;
    background: #f0f7ff;
}

.dropzone.is-dragover {
    border-color: #2b6cb0;
    background: #ebf8ff;
    box-shadow: 0 4px 14px rgba(43, 108, 176, 0.12);
}

.dropzone.is-uploading {
    opacity: 0.85;
    pointer-events: none;
}

.dropzone.is-complete {
    border-color: #38a169;
    background: #f0fff4;
}

.dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dropzone__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    outline: none;
}

.dropzone__content:focus-visible {
    box-shadow: inset 0 0 0 2px #2b6cb0;
    border-radius: 8px;
}

.dropzone__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.25rem;
    border-radius: 50%;
    background: #e2e8f0;
    color: #2b6cb0;
}

.dropzone.is-dragover .dropzone__icon,
.dropzone:hover .dropzone__icon {
    background: #bee3f8;
}

.dropzone__icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.dropzone__label {
    font-size: 1rem;
    font-weight: 600;
    color: #2d3748;
}

.dropzone__hint {
    font-size: 0.82rem;
    color: #718096;
}

.dropzone__filename {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2b6cb0;
    word-break: break-all;
}

.dropzone__feedback {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.88rem;
    text-align: center;
    min-height: 0.5rem;
}

.dropzone__feedback--error {
    color: #c53030;
}

.dropzone__feedback--success {
    color: #276749;
}

.dropzone--compact {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 7.25rem;
    height: 100%;
    border-radius: 8px;
    box-sizing: border-box;
}

.dropzone--compact .dropzone__content {
    flex: 1 1 auto;
    padding: 1rem 1.25rem;
    gap: 0.25rem;
}

.dropzone--compact .dropzone__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.15rem;
}

.dropzone--compact .dropzone__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.dropzone--compact .dropzone__label {
    font-size: 1rem;
    font-weight: 600;
}

.dropzone--compact .dropzone__hint {
    font-size: 0.75rem;
}

.dropzone--compact .dropzone__feedback {
    padding: 0.35rem 0.75rem 0.5rem;
    font-size: 0.78rem;
    min-height: 0;
}

/* Purchases hub */
.purchases-dashboard-page.container {
    max-width: 1100px;
}

.purchases-toolbar {
    width: 100%;
    margin: 0.75rem 0 1rem;
}

.purchases-toolbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.purchases-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.125rem;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    border: 1px solid #ced4da;
    background: #fff;
    color: #212529;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.purchases-toolbar-btn:hover,
.purchases-toolbar-btn:focus-visible {
    border-color: #adb5bd;
    background: #f8f9fa;
}

.purchases-toolbar-btn--primary {
    background: #2b6cb0;
    border-color: #245a94;
    color: #fff;
}

.purchases-toolbar-btn--primary:hover,
.purchases-toolbar-btn--primary:focus-visible {
    background: #1a4480;
    border-color: #1a4480;
    color: #fff;
}

.purchases-toolbar-btn--upload {
    background: #f8f9fa;
}

.purchases-toolbar-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.purchases-toolbar__hint {
    font-size: 0.75rem;
    color: #6c757d;
}

.purchases-toolbar__filename {
    font-size: 0.8rem;
    color: #495057;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchases-toolbar__feedback {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.8rem;
}

.dropzone--purchases {
    width: 100%;
    max-width:400px;
    cursor: pointer;
    box-sizing: border-box;
    float:right;
}

.dropzone--purchases .dropzone__content {
    min-height: 5.5rem;
}

.dropzone--purchases .dropzone__label {
    margin: 0;
    text-align: center;
    line-height: 1.5;
    font-weight: 600;
    color: #2d3748;
}

.dropzone--purchases .dropzone__label small {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: #718096;
    line-height: 1.35;
}

.dropzone--purchases .dropzone__filename {
    text-align: center;
}

.dropzone--purchases .dropzone__feedback {
    border-top: 1px solid #e2e8f0;
}

.admin-search-input {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 0.45rem 0.65rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #212529;
    background: #fff;
}

.admin-search-input:focus {
    outline: none;
    border-color: #2b6cb0;
    box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.2);
}

.purchases-search-wrap {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

.purchases-dashboard.admin-table-page {
    max-height: calc(100vh - var(--admin-header-height, 56px) - var(--admin-footer-height, 20px) - 48px);
}

.purchases-dashboard .purchases-toolbar,
.purchases-dashboard .purchases-document-upload__alert,
.purchases-dashboard > h1,
.purchases-dashboard .purchases-dashboard__back {
    flex-shrink: 0;
}

.purchases-table-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.purchases-table-layout .purchases-section-heading {
    flex-shrink: 0;
}

.purchases-table-layout .table-wrap {
    flex: 1 1 auto;
    min-height: 0;
}

.purchases-pagination {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    font-size: 0.875rem;
}

.purchases-pagination__link {
    color: #2b6cb0;
    text-decoration: none;
    font-weight: 500;
}

.purchases-pagination__link:hover,
.purchases-pagination__link:focus-visible {
    text-decoration: underline;
    color: #1a4480;
}

.purchases-pagination__link--disabled {
    color: #adb5bd;
    cursor: default;
}

.purchases-pagination__info {
    color: #495057;
    text-align: center;
}

.purchases-pagination__count {
    color: #6c757d;
    font-size: 0.8rem;
}

.pagination-jump-select {
    margin: 0 0.25rem;
    padding: 0.15rem 0.35rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    font-size: 0.875rem;
    vertical-align: baseline;
}

.table-container-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

.app-breadcrumb-nav {
    margin-bottom: 1rem;
}

.app-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: #6c757d;
}

.app-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    padding-right: 0.35rem;
    color: #adb5bd;
}

.app-breadcrumb .breadcrumb-item a {
    color: #2b6cb0;
    text-decoration: none;
}

.app-breadcrumb .breadcrumb-item a:hover,
.app-breadcrumb .breadcrumb-item a:focus-visible {
    text-decoration: underline;
}

.app-breadcrumb .breadcrumb-item.active {
    color: #495057;
    font-weight: 500;
}

.purchases-action-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .purchases-action-bar {
        grid-template-columns: 1fr;
    }

    .purchases-toolbar__upload {
        margin-left: 0;
        width: 100%;
    }
}

.purchases-action-tile {
    min-width: 0;
    min-height: 100%;
}

.purchases-action-tile--upload {
    display: flex;
    flex-direction: column;
}

.purchases-document-upload__alert {
    margin: 0 0 1rem;
}

.purchases-action-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
    min-height: 7.25rem;
    min-width: 0;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.purchases-action-btn--primary {
    background: #2b6cb0;
    color: #fff;
    border-color: #245a94;
}

.purchases-action-btn--primary:hover,
.purchases-action-btn--primary:focus-visible {
    background: #1a4480;
    color: #fff;
}

.purchases-action-btn--secondary {
    background: #f8f9fa;
    color: #495057;
    border-color: #ced4da;
}

.purchases-action-btn--secondary:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.purchases-action-btn__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.purchases-action-btn--primary .purchases-action-btn__icon {
    color: #fff;
}

.purchases-action-btn__hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
}

.purchases-section-heading {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

.purchases-col-currency,
.purchases-table .purchases-col-currency {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.purchases-table thead .purchases-col-currency {
    text-align: right;
}

.purchases-col-status,
.purchases-table thead .purchases-col-status {
    text-align: center;
}

.purchases-row-link--status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.purchases-table tbody td.purchases-col-status {
    vertical-align: top;
    text-align:center;
}

.purchases-table .inputs-table-actions {
    justify-content: center;
    max-width: none;
}

.purchases-table tbody td:not(.inputs-table-actions):not(.purchases-col-status):not(.purchases-table__empty) {
    padding: 0;
}

.purchases-table tbody td.purchases-col-status {
    padding: 0;
}

.purchases-row-link {
    display: block;
    padding: 3px;
    color: inherit;
    text-decoration: none;
}

.purchases-table__row:hover{
    background: #f1f3f5;
    
}

.purchases-delete-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 4px;
}

.purchases-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.purchases-delete-btn:hover:not(:disabled) svg path,
.purchases-delete-btn:focus-visible:not(:disabled) svg path {
    fill: #c94a1a;
}

.purchases-table__empty {
    text-align: center;
    color: #6c757d;
    padding: 1.5rem;
}

.purchases-dashboard__back {
    margin-top: 1.25rem;
}

.document-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.document-header-field {
    flex: 1 1 160px;
    min-width: 0;
}

.document-header-field--company {
    flex: 2 1 220px;
}

.document-company-search-wrap {
    position: relative;
}

.document-supplier-results {
    z-index: 55;
}

.document-company-selected {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    background: #e9f2ff;
    border: 1px solid #b8d4f0;
    border-radius: 4px;
    min-height: 2rem;
}

.document-company-selected__label {
    flex: 1 1 auto;
    font-weight: 500;
    color: #212529;
}

.document-company-clear {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #495057;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}

.document-company-clear:hover,
.document-company-clear:focus-visible {
    color: #212529;
}

.document-company-static {
    margin: 0;
    padding: 0.45rem 0;
    font-weight: 500;
}

.document-header-field--ref {
    flex: 2 1 200px;
}

.document-header-field--date {
    flex: 0 0 auto;
    width: 10.5rem;
    max-width: 10.5rem;
}

.document-header-field--save {
    flex: 0 0 auto;
    margin-left: auto;
}

.document-header-field label,
.document-header-field__label,
.document-header-field__action-label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: #495057;
}

.document-input--date {
    width: 100%;
    max-width: 10.5rem;
}

.document-line-entry--locked {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.document-line-entry--locked .document-line-entry__hint {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    color: #856404;
    font-weight: 500;
}

.document-line-bar > .document-item-filters {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 0px;
}

.document-item-filter {
    padding: 0.35rem 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    color: #212529;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.document-item-filter.is-active {
    background: #2b6cb0;
    border-color: #245a94;
    color: #fff;
}

.document-item-filter:hover:not(.is-active):not(:disabled) {
    background: #e9ecef;
}

.document-item-filter:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.document-header-save-msg,
.document-line-msg {
    font-size: 0.88rem;
    color: #495057;
    margin: 0.5rem 0 0;
}

.document-header-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.document-header-summary__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.document-header-summary__cell {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.75rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    min-width: 0;
}

.document-header-summary__label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}

.document-header-summary__value {
    font-size: 0.92rem;
    font-weight: 500;
    color: #212529;
    white-space: nowrap;
}

.document-header-summary__cell--pdf .document-header-summary__pdf-link {
    font-size: 0.88rem;
    font-weight: 600;
    color: #2b6cb0;
    text-decoration: none;
    white-space: nowrap;
}

.document-header-summary__cell--pdf .document-header-summary__pdf-link:hover,
.document-header-summary__cell--pdf .document-header-summary__pdf-link:focus-visible {
    text-decoration: underline;
}

.document-entry__footer-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.outline-button {
    margin-top: 0;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid #ced4da;
    background: #fff;
    color: #495057;
    font-weight: 500;
    cursor: pointer;
}

.outline-button--warning {
    border-color: #e67700;
    color: #d9480f;
    background: #fff9db;
}

.outline-button--warning:hover,
.outline-button--warning:focus-visible {
    background: #fff3bf;
    border-color: #d9480f;
    color: #c92a2a;
}

.document-line-bar__field--action {
    align-self: flex-end;
}

.document-entry__detail {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    z-index: 1;
    padding-top: 0;
    overflow: hidden;
}

.document-lines-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top:0.5rem;
}

.document-lines-scroll {
    flex: 1 1 auto;
    max-height: min(400px, 50vh);
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

.document-line-form-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0.25rem;
}

.document-edit-details-toggle {
    font-size: 0.875rem;
    padding: 0.35rem 0.75rem;
}

.document-line-entry {
    margin-top: 0rem;
    padding-top: 0.0rem;
    scroll-margin-top: 13rem;
}

.document-line-entry--collapsible.is-collapsed {
    display: none;
}

.document-order-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.65rem 0 0;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 0.95rem;
}

.document-order-total__label {
    color: #495057;
    font-weight: 500;
}

.document-order-total__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #212529;
}

.document-entry__footer {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: auto;
    padding-top: 0;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
    height:40px;
}

.document-entry__back-link {
    color: #2b6cb0;
    text-decoration: none;
    font-weight: 500;
}

.document-entry__back-link:hover,
.document-entry__back-link:focus-visible {
    text-decoration: underline;
    color: #1a4480;
}

.document-header-field select,
.document-header-field .document-input {
    width: 100%;
    box-sizing: border-box;
}

.document-section-heading {
    margin: 0 0 0.65rem;
    font-size: 1rem;
}

.document-line-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 3.85rem;
    margin-top: 0.5rem;
    padding: 0.25rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.document-line-bar__field label,
.document-calc-label {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
    color: #495057;
}

.document-line-bar__field--search {
    flex: 1 1 200px;
    min-width: 180px;
}

.document-line-bar__field--narrow {
    flex: 0 0 auto;
    max-width: 100px;
}

.document-line-bar__field--narrow .document-input--num {
    max-width: 70px;
    width: 100%;
}

.document-line-bar__field--pack.document-line-bar__field--narrow {
    max-width: 130px;
}

.document-line-bar__field--pack.document-line-bar__field--narrow .document-input--num {
    max-width: 70px;
}

.document-line-bar__field--calc {
    flex: 1 1 110px;
    min-width: 100px;
}

.document-line-bar__field--pack-price .document-input-prefix-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.document-input-prefix {
    font-weight: 600;
    color: #495057;
    flex-shrink: 0;
    line-height: 2rem;
}

.document-line-bar__field--pack-price .document-input--prefixed {
    max-width: 70px;
    text-align: left;
}

.document-line-bar__field--money {
    text-align: right;
}



.document-line-bar__field--money label,
.document-line-bar__field--money .document-calc-label,
.document-line-bar__field--money .document-input--num,
.document-line-bar__field--money .document-calc-value {
    text-align: right;
    width: 100%;
}

.document-line-bar__field--action {
    flex: 0 0 auto;
}

.document-line-add-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.document-line-add-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.document-item-search-wrap {
    position: relative;
}

.document-item-results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 40;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.document-item-results.is-hidden {
    display: none;
}

.document-item-results__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.65rem;
    border: 0;
    cursor: pointer;
    font-size: 0.9rem;
    color: #000;
}

.document-item-results__item--even {
    background: #ffffff;
}

.document-item-results__item--odd {
    background: #dedede;
}

.document-item-results__item:hover,
.document-item-results__item.is-active {
    background: #cce5ff;
    color: #000;
}

.document-item-results__empty {
    padding: 0.5rem 0.65rem;
    color: #000;
    font-size: 0.88rem;
    background: #fff;
}

.document-pack-size-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.document-unit-label {
    font-size: 0.85rem;
    color: #495057;
    white-space: nowrap;
}

.document-input--num,
.document-calc-value,
.document-col-num,
.document-col-money,
#document-lines-table input[type="number"] {
    text-align: right;
}

.document-col-money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

#document-lines-table th.document-col-money,
#document-lines-table td.document-col-money {
    text-align: right;
}

.inputs-table-actions .delete-icon-button {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.document-line-msg:empty {
    display: none;
    margin: 0;
}

.document-calc-value {
    display: block;
    min-height: 2rem;
    line-height: 2rem;
    font-variant-numeric: tabular-nums;
}

#document-lines-table .document-line-unit {
    font-size: 0.78rem;
    color: #6c757d;
    margin-left: 0.2rem;
}

.document-line-import-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.35rem;
    padding: 0.12rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.2;
}

.document-line-import-badge__icon {
    flex-shrink: 0;
    display: block;
}

.document-line-import-badge--learned {
    color: #166534;
    background: #ecfdf3;
    border: 1px solid #86efac;
}

.document-line-import-badge--learned .document-line-import-badge__icon {
    color: #15803d;
}

.document-line-import-badge--fuzzy {
    color: #9a6700;
    background: #fff8e6;
    border: 1px solid #f6d365;
}

.document-line-item-cell__stack {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    max-width: 100%;
}

.document-line-item-cell__row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    line-height: 1.35;
    min-height: 1.35em;
}

.document-line-item-cell__name {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
}

.document-line-item-cell__name-text {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-line-match-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.document-line-match-status__icon {
    display: block;
}

.document-line-match-status__glyph {
    display: block;
    line-height: 1;
}

.document-line-match-status--trusted {
    color: #15803d;
    background: #ecfdf3;
    border: 1px solid #86efac;
}

.document-line-match-status.unlink-item-match-btn,
button.unlink-item-match-btn {
    padding: 0;
    cursor: pointer;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.document-line-match-status.unlink-item-match-btn .document-line-match-status__icon,
.document-line-match-status.unlink-item-match-btn .document-line-match-status__glyph,
button.unlink-item-match-btn .document-line-match-status__icon,
button.unlink-item-match-btn .document-line-match-status__glyph {
    pointer-events: none;
}

.document-line-match-status.unlink-item-match-btn:hover:not(:disabled),
.document-line-match-status.unlink-item-match-btn:focus-visible,
button.unlink-item-match-btn:hover:not(:disabled),
button.unlink-item-match-btn:focus-visible {
    background: #dcfce7;
    border-color: #4ade80;
    box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.2);
}

.document-line-match-status.unlink-item-match-btn:disabled,
button.unlink-item-match-btn:disabled {
    cursor: wait;
    opacity: 0.65;
}

.document-line-match-status--fuzzy {
    color: #c2410c;
    background: #fff7ed;
    border: 1px solid #fdba74;
}

.document-line-match-status--unknown {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

.document-line-item-cell__controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-left: auto;
}

.document-line-match-confirm-btn,
.document-line-match-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 0;
    margin:0;
}

.document-line-match-confirm-btn {
    background: #10a848;
    border-color: #10a848;
}

.document-line-match-confirm-btn:hover:not(:disabled) {
    background: #166534;
}

.document-line-match-search-btn {
    background: #ea8c10;
    border-color: #ea8c10;
}

.document-line-match-search-btn:hover:not(:disabled) {
    background: #a76611;
}

.document-line-match-confirm-btn:disabled,
.document-line-match-search-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.document-line-item-cell__row2 {
    font-size: 0.78rem;
    line-height: 1.35;
    color: #5f6368;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-col-num {
text-align: center!important;
}

.document-line-item-cell, .document-col-num, .document-col-money {
    text-align: center!important;
}

.document-line-invoice-desc__label {
    font-weight: 600;
    color: #6c757d;
    margin-right: 0.25rem;
}

.document-line-match-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.document-line-match-modal.is-hidden {
    display: none;
}

.document-line-match-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.document-line-match-modal__panel {
    position: relative;
    z-index: 1;
    width: min(32rem, 100%);
    max-height: min(85vh, 36rem);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    padding: 1rem 1.1rem 1.1rem;
}

.document-line-match-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.document-line-match-modal__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.document-line-match-modal__close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    padding: 0 0.15rem;
}

.document-line-match-modal__hint {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
}

.document-line-match-modal__filters {
    margin-bottom: 0.55rem;
}

.document-line-match-modal__search-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.document-line-match-modal__search-wrap {
    position: relative;
    margin-bottom: 0.65rem;
}

.document-line-match-modal__results {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 5;
    max-height: 14rem;
    overflow-y: auto;
}

.document-line-match-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.document-pi-create-category-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 280px;
    overflow-y: auto;
    margin: 0.75rem 0 0;
}

.document-pi-create-category-modal .document-line-match-modal__panel {
    max-width: 420px;
}

.document-inline-item-modal {
    z-index: 1300;
}

.document-inline-item-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
}

.document-inline-item-form__msg {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: #b42318;
    min-height: 1.1rem;
}

.document-inline-item-form__msg:empty {
    display: none;
}

.document-item-results__create-link-wrap {
    padding: 0.45rem 0.65rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.document-item-results__create-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    color: #387ce3;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.document-item-results__create-link:hover,
.document-item-results__create-link:focus {
    color: #1d5fbf;
    outline: none;
}

#document-lines-table tr.document-line-row--needs-match td.document-line-item-cell--needs-item {
    background: linear-gradient(90deg, rgba(254 226 226 / 0.55) 0%, rgba(254 226 226 / 0.2) 100%);
    box-shadow: inset 3px 0 0 0 rgba(220 38 38 / 0.35);
}

@media (max-width: 900px) {
    .document-header-field--save {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .document-header-row {
        flex-direction: column;
        align-items: stretch;
    }

    .document-header-field--date {
        width: 100%;
        max-width: none;
    }

    .document-entry__master {
        position: static;
    }

    .document-entry__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .document-entry__footer .primary-button {
        width: 100%;
    }
}

/* Commercial Address Book */
.settings-modal__content--address-book {
    width: min(640px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
}

.address-book-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.address-book-page__actions {
    margin: 0;
}

.address-book-tabs {
    margin-bottom: 10px;
}

.address-book-tab--customer.is-active {
    background: #2b6cb0;
    border-color: #2b6cb0;
}

.address-book-tab--supplier.is-active {
    background: #2f9e44;
    border-color: #2f9e44;
}

.address-book-tab--servicer.is-active {
    background: #f59f00;
    border-color: #f59f00;
    color: #212529;
}

.address-book-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.address-book-role {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.address-book-role--customer { background: #dbeafe; color: #1e40af; }
.address-book-role--online { background: #ede9fe; color: #5b21b6; }
.address-book-role--supplier { background: #dcfce7; color: #166534; }
.address-book-role--servicer { background: #fef3c7; color: #92400e; }

.address-book-actions a {
    margin-right: 10px;
}

.address-book-empty,
.address-book-empty-inline {
    color: #6c757d;
    font-style: italic;
}

.address-book-empty {
    text-align: center;
    padding: 24px 12px;
}

.address-book-tray-row.is-hidden {
    display: none;
}

.address-book-tray {
    padding: 12px;
    background: #f8f9fa;
    border-top: 2px solid #cbd5e1;
}

.address-book-tray__grid {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(220px, 0.8fr);
    gap: 14px;
}

.address-book-panel {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    min-height: 120px;
}

.address-book-panel--routing .form-card {
    gap: 6px;
}

.address-book-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.address-book-panel__head h3 {
    margin: 0;
    font-size: 14px;
}

.address-book-panel__body {
    font-size: 13px;
}

.address-book-entry {
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    background: #fff;
}

.address-book-entry__title {
    font-weight: 700;
    color: #212529;
}

.address-book-purchase-categories__title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 600;
}

.address-book-purchase-categories__hint {
    margin: 0 0 0.75rem;
}

.address-book-purchase-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.35rem 1rem;
}

.address-book-purchase-categories__option {
    margin: 0;
}

.address-book-routing-status {
    margin: 6px 0 0;
    font-size: 12px;
    color: #2b8a3e;
    min-height: 16px;
}

@media (max-width: 992px) {
    .address-book-tray__grid {
        grid-template-columns: 1fr;
    }
}

.company-registration-link-panel {
    margin-bottom: 1rem;
}

.company-registration-similar-banner {
    background: #fff8e6;
    border: 1px solid #f0c36d;
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
    color: #6b4e0f;
}

.company-registration-similar-banner__text {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
}

.company-registration-link-section {
    background: #f8fafc;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    padding: 1rem;
}

.company-registration-link-section__title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.company-registration-link-section__hint {
    margin: 0 0 0.75rem;
}

.company-link-search-wrap {
    position: relative;
    margin-bottom: 0.65rem;
}

.company-link-search-input {
    width: 100%;
}

.company-registration-link-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.company-link-status {
    min-height: 1.25rem;
}

.company-similar-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.company-similar-suggestion {
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.88rem;
    cursor: pointer;
}

.company-similar-suggestion:hover,
.company-similar-suggestion:focus {
    border-color: #387ce3;
    background: #eef5ff;
}

.company-registration-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0 0.35rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.company-registration-divider::before,
.company-registration-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dee2e6;
}

/* Page header partial utilities (app/views/layouts/page-header.php) */
.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.mb-4 { margin-bottom: 0.5rem; }
.mb-0 { margin-bottom: 0; }
.h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.text-gray-800 { color: #343a40; }
.text-muted { color: #6c757d; }
.small { font-size: 0.875rem; }
.width_100_percent { width: 100%; }

.back-btn {margin-right:10px; color:#2b6cb0;}
.forward-btn {margin-left:10px; color:#2b6cb0;}
.disabled {opacity:0.55; cursor:not-allowed;}
.commodity-drilldown-link {
    color: #2b6cb0;
    text-decoration: none;
}

.commodity-drilldown-link:hover {
    text-decoration: underline;
}

.input-report-chart-container {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}