@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular.ttf") format("truetype"); }

:root {
    --app-color-text: #000000;
    --app-color-text-light: #00000092;
    --app-color-text-invert: #ffffff;
    --app-color-primary: #0e1a41;
    --app-color-primary-light: #0e1a4110;
    --app-color-border: #333;
    --app-color-border-light: #3333334d;
    --app-color-border-lighter: #3333331a;
    --app-color-error: #c9302c;
    --app-color-error-bg: #c9302c40;
    --app-color-hover: #f8f9f9;
    --app-border-bold: 0.2rem solid var(--app-color-border);
    --app-border-radius: 2px;
    --app-box-shadow-block: 0 1rem 2rem rgba(0, 0, 0, 0.1);
    --app-font-family: "Open Sans", sans-serif;
    --app-font-size: 1.4rem;
    --app-font: normal var(--app-font-size) var(--app-font-family);
    --app-page-width: min(1024px, 100vw);
}

*, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box;}
html, body { margin: 0; font-size: 10px; color: var(--app-color-text); }
body { font: var(--app-font); }
header { position: sticky; top: 0; background: #fff; }
nav { width: var(--app-page-width); margin-inline: auto; border-bottom: var(--app-border-bold); }
nav > ul { display: flex; }
nav li { padding: 2rem 4rem; cursor: pointer; list-style-type: none; text-decoration: none; }
nav li:hover { background-color: var(--app-color-primary); color: var(--app-color-text-invert); }
nav li.inactive { background-color: #f8f8f8; color: var(--app-color-text-light); cursor: default; pointer-events: none; }
nav li.app-logout { margin-left: auto; padding: 1.5rem 1rem 1.5rem 1.5rem; }
nav li.app-logout svg { height: 100%; aspect-ratio: 1; color: #fff; width: 24px; aspect-ratio: 1; }
nav li.app-logout:hover svg { stroke: var(--app-color-text-invert); }
main {}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
select { background-color: #fff; }
select,
input,
textarea { padding: 1rem 2rem 1rem 1.5rem; border: 1px solid var(--app-color-border-light); border-bottom-width: 1px; border-radius: var(--app-border-radius); font: var(--app-font); transition: all 0.2s; }
select:focus,
input:focus,
textarea:focus { outline: 0; box-shadow: 0 1rem 2rem var(--app-color-border-lighter); border-bottom: var(--app-border-bold); }
input:read-only,
textarea:read-only { color: var(--app-color-text-light) }
select[data-valid="0"],
input[data-valid="0"],
textarea[data-valid="0"],
.radio-group[data-valid="0"] { outline: 0; box-shadow: 0 1rem 2rem var(--app-color-border-lighter); border-bottom: 0.2rem solid var(--app-color-error); background-color: var(--app-color-error-bg); }
fieldset { border: none; }

.d-none, .hidden { display: none !important; }
.invisible { visibility: hidden !important; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.btn-group { display: flex; gap: 1rem; }
.btn { padding: 0.5rem 1rem; border: none; border-radius: 0; transition: all 0.2s ease-in-out; font: var(--app-font); background-color: var(--app-color-primary); color: var(--app-color-text-invert); cursor: pointer; }
.btn:disabled { background-color: var(--app-color-primary-light); }
.btn .la-spin { display: none; }
.btn:disabled .la-spin { display: inline-block; color: var(--app-color-text); }
.btn-light { border: 1px solid var(--app-color-border-light); background-color: #fff; color: var(--app-color-primary); }
.btn-light:hover { background-color: var(--app-color-primary); color: #fff; }
.btn-lg { padding: 2.4rem 3.2rem; text-transform: uppercase; border-radius: var(--app-border-radius); line-height: 1em; }
.btn-danger { background-color: var(--app-color-error); }
.btn .las { line-height: 1rem; }

.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.mb-1 { margin-bottom: 1rem; }
.mt-1 { margin-top: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mt-3 { margin-top: 3rem; }
.mb-5 { margin-bottom: 5rem; }
.mt-5 { margin-top: 5rem; }

.form-field { display: flex; margin-block: 1rem; }
.form-field > label { width: 25%; margin-top: 1rem; }
.form-field > h2 { width: 25%; }
.form-field > select,
.form-field > input[type="text"],
.form-field > textarea,
.form-field > .form-field-value { flex-grow: 1; }
.form-field > .form-field-value label { font-weight: bold; font-size: 1.2rem; display: block; }
.form-field > .form-field-value span { display: block; margin-bottom: 1rem; }
.form-field > textarea { min-height: 10rem; }
.form-field > .radio-group { padding: 1rem; }
.form-field > .radio-group label { margin-inline-end: 3rem; }
.form-field > .radio-group input { margin-inline-end: 1rem; }

.app-header-content { display: flex; border-bottom: var(--app-border-bold); width: var(--app-page-width); margin-inline: auto; }
.app-header-actions-left,
.app-header-actions-right { flex-basis: 0; flex-grow: 1; display: flex; flex-direction: row; align-items: center; padding-inline: 3rem; }
.app-header-actions-right { justify-content: right; }
.app-header-logo { display: flex; flex-direction: column; align-items: center; }
.app-header-logo img { width: 200px; height: 100px; }
.app-title-container { display: flex; align-items: center; margin-block: 3rem 1rem; }
.app-title-actions { text-align: right; flex-grow: 1; }
main { width: min(1024px, 100vw); margin: 0 auto; }
.app-main-content { margin-block-end: 10rem; padding: 3rem; border: 1px solid var(--app-color-border-lighter); border-radius: var(--app-border-radius); box-shadow: var(--app-box-shadow-block); }
.app-table-filters { display: flex; gap: 1rem; align-items: flex-start; }
.app-table-filters input { width: 100%; margin-block-end: 1rem; }
.app-table-filters > div { display: flex; gap: 1rem; align-items: center; }
.app-table-filters > div > select { height: 3.9rem; }

.paging { display: grid; grid-template-columns: repeat(3, 1fr); }
.paging-footer { margin-top: 1rem; }
.paging-controls { grid-row: 1; grid-column: 2; text-align: center; }
.paging-info { grid-row: 1; grid-column: 3; text-align: right; margin-right: 10px; line-height: 40px; }

.table { margin-bottom: 0; width: 100%; border-collapse: collapse; caption-side: bottom; }
.table caption { padding: 2rem; border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee; }
.table-bordered > thead > tr { border-top: none; }
.table-row-select > tbody > tr { cursor: pointer; }
.table thead th:first-child { border-top-left-radius: var(--app-border-radius); }
.table thead th:last-child { border-top-right-radius: var(--app-border-radius); }
.table thead th { border-bottom: 0.2rem solid var(--app-color-border); }
.table tbody tr:hover { background-color: var(--app-color-hover); }
.table th,
.table td { padding: 1rem 1.5rem; }
th.sortable { user-select: none; cursor: pointer; }
th.sortable[data-order="0-asc"]:after { content: " ▲"; }
th.sortable[data-order="0-desc"]:after { content: " ▼"; }
th.sortable[data-order="1-asc"]:after { content: " ▲2"; }
th.sortable[data-order="1-desc"]:after { content: " ▼2"; }
th.sortable[data-order="2-asc"]:after { content: " ▲3"; }
th.sortable[data-order="2-desc"]:after { content: " ▼3"; }
th.sortable[data-order="3-asc"]:after { content: " ▲4"; }
th.sortable[data-order="3-desc"]:after { content: " ▼4"; }
.col-w-min { width: 1px; white-space: nowrap; }
.col-w-auto { width: auto; }

.status { position: relative; margin-block: 10px; padding: 10px 20px; border-radius: var(--app-border-radius); border: none; color: var(--app-color-text-invert); }
.app-status { position: fixed; z-index: 10000; bottom: 0; right: 0; margin: 10px; padding: 3rem; font: var(--app-font); }
.status-close { position: absolute; right: 5px; top: 0px; border: none; margin: 0px; background-color: transparent; color: var(--app-color-text-invert); font-size: 1.8rem; font-weight: bold; cursor: pointer; }
.status-title { margin: 0; font-weight: bold; }
.status-message { margin: 0; }
.status-message ul { margin-bottom: 0; padding: 10px; }
.status-error { background-color: var(--app-color-error); }
.status-info { background-color: #31b0d5; }
.status-success { background-color: #249d4e; }
.status-warning { background-color: #f0ad4e; }

.app-login { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.app-login-container { width: min(100vw, 400px); padding: 3rem; border-radius: var(--app-border-radius); box-shadow: var(--app-box-shadow-block); }
.app-login .form-field { flex-direction: column; }

.app-exact-actions { display: flex; gap: 1rem; }
.app-exact-status { margin-bottom: 3rem; }
.app-exact-status label { margin-right: 3rem; }
.app-exact-status span { font-weight: bold; }

.app-order-footer-header { padding-block: 0.5rem; border-bottom: var(--app-border-bold); }
.app-order-footer textarea { width: 100%; height: 20rem; }
.app-order-actions { display: flex; align-items: flex-end; }
.app-order-actions div:first-child { flex-grow: 1; display: flex; gap: 1rem; }

.cmp-orderitems-header { display: flex; padding-block: 0.5rem; align-items: center; border-bottom: var(--app-border-bold); }
.cmp-orderitems-header .btn-group { flex-grow: 1; justify-content: flex-end; }
.cmp-orderitems { margin-block: 1rem; }
.cmp-orderline,
.cmp-orderitems-footer { display: grid; grid-template-columns: 250px 2fr 8fr 85px; grid-gap: 1rem; align-items: center; margin-block: 1rem; }
.cmp-orderline-1 { padding-left: 25px; grid-template-columns: 225px 2fr 8fr 85px; }
.cmp-orderline-1 label:before { content: '\25cf'; padding-right: 1rem; }
.cmp-orderline-2 { padding-left: 50px; grid-template-columns: 200px 2fr 8fr 85px; }
.cmp-orderline-2 label:before { content: '\25cb'; padding-right: 1rem; }
.cmp-orderline-0.cmp-orderline-dual { grid-template-columns: 250px 2fr 5fr 3fr 85px; }
.cmp-orderline-1.cmp-orderline-dual { grid-template-columns: 225px 2fr 5fr 3fr 85px; }
.cmp-orderline-2.cmp-orderline-dual { grid-template-columns: 200px 2fr 5fr 3fr 85px; }
.cmp-orderline input { width: 100%; }
.cmp-orderline-price { text-align: right; }
.cmp-orderline-actions { display: flex; gap: 0.5rem; justify-content: right; }
.cmp-orderline-actions button { height: 40px; aspect-ratio: 1/1; }
.cmp-orderitems-footer { padding-block: 1rem; border-top: var(--app-border-bold); }
.cmp-orderitems-total { text-align: right; padding-inline: 1rem 2.1rem; }

.app-receipt-actions { display: flex; align-items: flex-end; }
.app-receipt-actions div:first-child { flex-grow: 1; display: flex; gap: 1rem; }

.cmp-receiptitems-header { display: flex; padding-block: 0.5rem; align-items: center; border-bottom: var(--app-border-bold); }
.cmp-receiptitems-header .btn-group { flex-grow: 1; justify-content: flex-end; }
.cmp-receiptitems-headings { border-bottom: var(--app-border-bold); padding-bottom: 1rem; }
.cmp-receiptitems { margin-block: 1rem; }
.cmp-receiptitems-headings,
.cmp-receiptitem { display: grid; grid-template-columns: 40px 6fr 11fr 2fr 2fr 40px; grid-auto-rows: 40px; grid-gap: 1rem; align-items: center; margin-block: 1rem; }
.cmp-receiptitem-dual { grid-template-columns: 40px 6fr 8fr 3fr 2fr 2fr 40px; }
.cmp-receiptitem input { width: 100%; }
.cmp-receiptitem-details { grid-row: 2; grid-column: 2 / 7; }
.cmp-receiptitem-dual .cmp-receiptitem-details { grid-row: 2; grid-column: 2 / 8; }
.cmp-receiptitem > .btn { height: 100%; aspect-ratio: 1; }
.cmp-receiptitem-product { display: flex; }
.cmp-receiptitem-product input { margin-right: -1px; }
.cmp-receiptitem-product .btn { border-left: none; height: 40px; aspect-ratio: 1; }
.cmp-receiptitems-footer { margin-block: 1rem; border-top: var(--app-border-bold); }