/*
 * MauzoBooks brand theme — global overrides for the legacy Bootstrap 3 /
 * AdminLTE component layer (buttons, tables, boxes, badges, pagination,
 * modals, alerts, tabs, dropdowns, DataTables chrome, form controls).
 *
 * Loaded last (see layouts/partials/css.blade.php) so it wins by source
 * order over vendor.css/app.css/skin-*.css without needing to fight
 * selector specificity everywhere. Pages already migrated to the `tw-`
 * Tailwind utility layer (sidebar, header, /home, /pos/create) are styled
 * directly in their Blade files instead of here.
 */

:root {
    --mz-green-50: #F1F8F4;
    --mz-green-100: #DCEEE3;
    --mz-green-500: #138A5B;
    --mz-green-600: #0F754C;
    --mz-green-700: #0B5D3B;
    --mz-green-800: #0A4E32;
    --mz-green-900: #073B2A;

    --mz-gold-400: #D2AC33;
    --mz-gold-500: #C9A227;
    --mz-gold-600: #A8871F;

    --mz-silver-400: #A7ADB4;
    --mz-silver-200: #DEE1E3;

    --mz-surface: #F7F8F7;
    --mz-line: #E5E9E6;
    --mz-ink: #17221C;
    --mz-muted: #6B756E;
    --mz-danger: #B3463A;

    --mz-radius: 8px;
    --mz-radius-lg: 10px;
    --mz-shadow: 0 1px 2px 0 rgba(23, 34, 28, 0.06), 0 1px 3px 0 rgba(23, 34, 28, 0.06);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--mz-ink);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--mz-radius);
    font-weight: 500;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-primary,
.skin-blue .btn-primary,
.skin-blue-light .btn-primary {
    background-color: var(--mz-green-700) !important;
    border-color: var(--mz-green-700) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--mz-green-800) !important;
    border-color: var(--mz-green-800) !important;
}
.btn-default {
    background-color: #fff !important;
    border-color: var(--mz-line) !important;
    color: var(--mz-ink) !important;
}
.btn-default:hover,
.btn-default:focus {
    background-color: var(--mz-surface) !important;
    border-color: var(--mz-silver-400) !important;
}
.btn-success {
    background-color: var(--mz-green-600) !important;
    border-color: var(--mz-green-600) !important;
}
.btn-danger {
    background-color: var(--mz-danger) !important;
    border-color: var(--mz-danger) !important;
}
.btn-warning,
.btn.btn-gold {
    background-color: var(--mz-gold-500) !important;
    border-color: var(--mz-gold-500) !important;
    color: var(--mz-ink) !important;
}
.btn-warning:hover,
.btn.btn-gold:hover {
    background-color: var(--mz-gold-600) !important;
    border-color: var(--mz-gold-600) !important;
}
.btn-link {
    color: var(--mz-green-700) !important;
}

/* ---------- Boxes / panels / small-boxes ---------- */
.box {
    border-radius: var(--mz-radius-lg);
    border: 1px solid var(--mz-line);
    box-shadow: var(--mz-shadow);
}
.box.box-primary {
    border-top: 3px solid var(--mz-green-700);
}
.box-header {
    border-bottom: 1px solid var(--mz-line);
}
.box-header .box-title {
    font-weight: 600;
    color: var(--mz-ink);
}
.small-box {
    border-radius: var(--mz-radius-lg);
    box-shadow: var(--mz-shadow);
}
.small-box.bg-green,
.small-box.bg-aqua {
    background-color: var(--mz-green-700) !important;
}
.small-box.bg-yellow {
    background-color: var(--mz-gold-500) !important;
    color: var(--mz-ink) !important;
}

/* ---------- Tables ---------- */
.table > thead > tr > th {
    border-bottom: 2px solid var(--mz-line);
    color: var(--mz-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top-color: var(--mz-line);
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--mz-surface);
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--mz-line);
}
.table-hover > tbody > tr:hover {
    background-color: var(--mz-green-50);
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--mz-radius);
    border-color: var(--mz-line);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--mz-radius);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--mz-green-700) !important;
    border-color: var(--mz-green-700) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--mz-green-50) !important;
    border-color: var(--mz-green-100) !important;
    color: var(--mz-green-800) !important;
}

/* ---------- Pagination (non-DataTables) ---------- */
.pagination > li > a,
.pagination > li > span {
    color: var(--mz-green-700);
    border-color: var(--mz-line);
}
.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--mz-green-700) !important;
    border-color: var(--mz-green-700) !important;
}

/* ---------- Badges / labels ---------- */
.label-primary,
.badge-primary,
.badge.bg-primary {
    background-color: var(--mz-green-700) !important;
}
.label-success {
    background-color: var(--mz-green-600) !important;
}
.label-warning {
    background-color: var(--mz-gold-500) !important;
    color: var(--mz-ink) !important;
}
.label-danger {
    background-color: var(--mz-danger) !important;
}
.label,
.badge {
    border-radius: 999px;
    font-weight: 600;
}

/* ---------- Forms ---------- */
.form-control {
    border-radius: var(--mz-radius);
    border-color: var(--mz-line);
}
.form-control:focus {
    border-color: var(--mz-green-500);
    box-shadow: 0 0 0 3px rgba(19, 138, 91, 0.12);
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--mz-radius);
    border-color: var(--mz-line);
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--mz-green-500);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--mz-green-700) !important;
}

/* ---------- Modals ---------- */
.modal-content {
    border-radius: var(--mz-radius-lg);
    border: none;
    box-shadow: 0 12px 32px rgba(23, 34, 28, 0.16);
}
.modal-header {
    border-bottom: 1px solid var(--mz-line);
}
.modal-footer {
    border-top: 1px solid var(--mz-line);
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--mz-radius);
    border-width: 1px;
}
.alert-success {
    background-color: var(--mz-green-50);
    border-color: var(--mz-green-100);
    color: var(--mz-green-800);
}
.alert-warning {
    background-color: #FBF3DA;
    border-color: #F0E0A8;
    color: #6B5613;
}
.alert-danger {
    background-color: #FBEAE8;
    border-color: #F0C9C4;
    color: var(--mz-danger);
}

/* ---------- Tabs / dropdowns ---------- */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--mz-green-800);
    border-bottom: 2px solid var(--mz-green-700);
}
.dropdown-menu {
    border-radius: var(--mz-radius);
    border-color: var(--mz-line);
    box-shadow: var(--mz-shadow);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--mz-green-50);
    color: var(--mz-green-800);
}

/* ---------- POS layout: fill the viewport, no gap above the fixed action bar ----------
 * body.lockscreen is added by layouts/app.blade.php only when $pos_layout is
 * true (pos/create, pos/edit, pos/payment) -- scoped there so this never
 * touches any other page. The flex column (body > .tw-flex > main >
 * #scrollable-container) never resolves to a real 100vh height on its own
 * (no ancestor in that chain has an explicit height), so the cart/product
 * panels only grow to their content size and .pos-form-actions -- pinned to
 * the true viewport bottom via position:fixed -- ends up with empty space
 * above it. Anchoring the chain to 100vh here lets tw-flex-1 fill the rest,
 * and the padding-bottom keeps real content from sitting under the fixed bar.
 */
body.lockscreen,
body.lockscreen > .tw-flex,
body.lockscreen main {
    height: 100vh;
}
body.lockscreen #scrollable-container {
    padding-bottom: 120px;
}
/* app.css's global .pos_product_div{height:40vh!important} (shared with the
 * non-POS Sell module pages, which this must NOT affect) is overridden only
 * here, scoped to the POS layout, so the cart table fills its new flex
 * parent (see pos_form.blade.php) instead of stopping at a fixed 40vh. */
body.lockscreen .pos_product_div {
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* =====================================================================
 * Refinement pass (2026-10): tables, DataTables toolbar, tabs, forms,
 * leftover AdminLTE blue, app shell. Same tokens as above; no new look.
 * ===================================================================== */
:root {
    --mz-control: #B9C1BC;      /* input / control outline */
    --mz-help: #7C8780;         /* help icons, secondary glyphs */
    --mz-row: #FAFBFA;          /* zebra row */
}

::selection {
    background: var(--mz-green-100);
    color: var(--mz-green-900);
}
a {
    color: var(--mz-green-700);
}
a:hover,
a:focus {
    color: var(--mz-green-800);
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mz-green-500);
    outline-offset: 2px;
}
.btn:focus,
.btn:active:focus {
    outline: 0;
}

/* ---------- App shell: header stays put, content and menu scroll on their own ---------- */
@media screen {
    body > .tw-flex {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }
    body > .tw-flex > aside.side-bar,
    body > .tw-flex > main {
        height: 100%;
        min-height: 0;
    }
    body > .tw-flex > main > #scrollable-container {
        height: auto;
        flex: 1 1 0%;
        min-height: 0;
    }
    #scrollable-container,
    aside.side-bar > div,
    .dataTables_scrollBody,
    .table-responsive {
        scrollbar-width: thin;
        scrollbar-color: var(--mz-silver-200) transparent;
    }
    aside.side-bar > div {
        scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    }
}

/* ---------- Tables: hairlines instead of a full grid ---------- */
.table {
    font-variant-numeric: tabular-nums;
}
.table > thead > tr > th {
    background-color: var(--mz-surface);
    border-bottom: 1px solid var(--mz-line);
    padding: 10px 12px;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    padding: 10px 12px;
}
.table > tfoot > tr > td,
.table > tfoot > tr > th {
    padding: 10px 12px;
    background-color: var(--mz-surface);
    border-top: 1px solid var(--mz-line);
    font-weight: 600;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td {
    padding: 6px 10px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--mz-row);
}
.table .display_currency,
.table .input_number {
    white-space: nowrap;
}
@media screen {
    .table-bordered {
        border: 0;
    }
    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > th,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > th,
    .table-bordered > tfoot > tr > td {
        border-left: 0;
        border-right: 0;
    }
}
/* Row action menus and export buttons: neutral, not cyan */
table .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info,
.dt-buttons .tw-dw-btn.tw-dw-btn-outline {
    background-color: #fff;
    border-color: var(--mz-control);
    color: var(--mz-ink);
    font-weight: 500;
}
table .tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-info:hover,
.dt-buttons .tw-dw-btn.tw-dw-btn-outline:hover {
    background-color: var(--mz-green-50);
    border-color: var(--mz-green-500);
    color: var(--mz-green-800);
}

/* ---------- DataTables toolbar: one aligned row (length · exports · search) ---------- */
.dataTables_wrapper {
    clear: both;   /* page buttons floated above the table no longer overlap the toolbar */
}
.dataTables_wrapper > .row:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 12px;
    text-align: left;
}
.dataTables_wrapper > .row:first-child::before,
.dataTables_wrapper > .row:first-child::after {
    display: none;
}
.dataTables_wrapper > .row:first-child > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
    flex: 0 0 auto;
}
.dataTables_wrapper > .row:first-child > [class*="col-"]:has(> .dt-buttons) {
    flex: 1 1 240px;
    min-width: 0;
}
.dataTables_wrapper > .row:first-child > [class*="col-"]:has(> .dataTables_filter) {
    margin-left: auto;
}
.dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    float: none;
}
.dataTables_wrapper .dt-buttons .tw-dw-btn {
    margin: 0 !important;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
    color: var(--mz-muted);
    white-space: nowrap;
}
.dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: left;
}
.dataTables_wrapper .dataTables_filter input {
    width: 240px;
    max-width: 100%;
    height: 34px;
    margin: 0;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--mz-control);
}
.dataTables_wrapper .dataTables_length select {
    height: 34px;
    margin: 0;
    font-size: 13px;
    border: 1px solid var(--mz-control);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--mz-green-500);
    box-shadow: 0 0 0 3px rgba(19, 138, 91, 0.12);
    outline: 0;
}
.dataTables_wrapper .dataTables_info {
    padding-top: 14px;
    font-size: 13px;
    color: var(--mz-muted);
}
.dataTables_wrapper .dataTables_paginate {
    padding-top: 10px;
}
@media (max-width: 767px) {
    .dataTables_wrapper > .row:first-child > [class*="col-"] {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
    }
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_filter label {
        width: 100%;
    }
    .dataTables_wrapper .dataTables_filter input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 40px;
        font-size: 16px;   /* stops iOS zooming the page on focus */
    }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
    }
}

/* ---------- Tabs: quiet labels, green underline on the current tab ---------- */
.nav-tabs-custom {
    border-radius: var(--mz-radius-lg);
    box-shadow: var(--mz-shadow);
}
.nav-tabs-custom > .nav-tabs {
    padding: 0 8px;
    border-bottom: 1px solid var(--mz-line);
}
.nav-tabs-custom > .nav-tabs > li,
.nav-tabs-custom > .nav-tabs > li.active {
    margin: 0 4px -1px 0;
    border-top: 0;
}
.nav-tabs-custom > .nav-tabs > li > a,
.nav-tabs-custom > .nav-tabs > li.active > a {
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mz-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.nav-tabs-custom > .nav-tabs > li > a:hover {
    color: var(--mz-ink);
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover,
.nav-tabs-custom > .nav-tabs > li.active > a:focus {
    font-weight: 600;
    color: var(--mz-green-800);
    border-bottom-color: var(--mz-green-700);
}

/* ---------- Box / filter headers ---------- */
.box-header .box-title {
    font-size: 15px;
}
.box-header .box-title > a,
.box-header .box-title > a:hover {
    color: var(--mz-ink);
}

/* ---------- Leftover AdminLTE blue ---------- */
.text-primary,
.text-light-blue,
.text-aqua {
    color: var(--mz-green-700) !important;
}
.text-info {
    color: var(--mz-green-600) !important;
}
i.fa-info-circle.text-info,
i.fa-info-circle.text-primary,
i.fa-question-circle.text-info {
    color: var(--mz-help) !important;
}
.bg-info {
    background-color: var(--mz-green-50) !important;
}
.btn-info {
    background-color: var(--mz-green-50) !important;
    border-color: var(--mz-green-100) !important;
    color: var(--mz-green-800) !important;
}
.btn-info:hover,
.btn-info:focus {
    background-color: var(--mz-green-100) !important;
    border-color: var(--mz-green-500) !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--mz-green-700) !important;
    border-color: var(--mz-green-700) !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: #9A3B31 !important;
    border-color: #9A3B31 !important;
}
.btn[disabled],
.btn.disabled,
fieldset[disabled] .btn {
    opacity: 0.55;
    cursor: not-allowed;
}
/* Page-level action buttons (Add, Download...) sit at control height outside the POS till */
body:not(.lockscreen) .content .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.tw-dw-btn-lg):not(.tw-dw-btn-circle):not(.tw-dw-btn-square) {
    height: 2.5rem;
    min-height: 2.5rem;
}
/* One button shape: pill buttons take the system radius (icon circles stay round) */
.tw-dw-btn.tw-rounded-full:not(.tw-dw-btn-circle) {
    border-radius: var(--mz-radius) !important;
}

/* ---------- Forms ---------- */
label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mz-ink);
}
.form-control {
    border-color: var(--mz-control);
    box-shadow: none;
    color: var(--mz-ink);
}
.form-control::placeholder {
    color: var(--mz-muted);
    opacity: 1;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--mz-surface);
    color: var(--mz-muted);
}
.has-error .form-control {
    border-color: var(--mz-danger);
}
.has-error .help-block,
label.error {
    color: var(--mz-danger);
    font-size: 12px;
    font-weight: 500;
}
.help-block {
    font-size: 12px;
    color: var(--mz-muted);
}
.input-group-addon {
    background-color: var(--mz-surface);
    border-color: var(--mz-control);
    color: var(--mz-muted);
}
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child) > .btn {
    border-radius: 0;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--mz-control);
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--mz-green-500);
    box-shadow: 0 0 0 3px rgba(19, 138, 91, 0.12);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--mz-green-50);
    border: 1px solid var(--mz-green-100);
    border-radius: 6px;
    color: var(--mz-green-800);
    padding: 1px 8px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--mz-green-700);
    margin-right: 4px;
}
.select2-dropdown {
    border-color: var(--mz-control);
    border-radius: var(--mz-radius);
    box-shadow: 0 8px 20px rgba(23, 34, 28, 0.10);
    overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--mz-control);
    border-radius: 6px;
}

/* iCheck checkboxes / radios drawn in brand colour instead of the blue sprite */
.icheckbox_square-blue,
.iradio_square-blue {
    width: 18px;
    height: 18px;
    background: #fff none !important;
    border: 1.5px solid var(--mz-control);
    border-radius: 5px;
    vertical-align: middle;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.iradio_square-blue {
    border-radius: 50%;
}
.icheckbox_square-blue.hover,
.iradio_square-blue.hover {
    border-color: var(--mz-green-500);
}
.icheckbox_square-blue.focus,
.iradio_square-blue.focus {
    box-shadow: 0 0 0 3px rgba(19, 138, 91, 0.18);
}
.icheckbox_square-blue.checked {
    background: var(--mz-green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important;
    border-color: var(--mz-green-700);
}
.iradio_square-blue.checked {
    border: 5px solid var(--mz-green-700);
}
.icheckbox_square-blue.disabled,
.iradio_square-blue.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- POS till: use the full height, keep the amount due the loudest thing ---------- */
@media (min-width: 1024px) {
    /* side-by-side layout only; stacked (narrow) layout keeps its own sizing */
    body.lockscreen #product_list_body {
        max-height: none !important;   /* fills its flex column instead of stopping at a fixed cap */
        align-content: flex-start;     /* rows stay packed at the top instead of spreading apart */
    }
}
body.lockscreen #scrollable-container .tw-mb-14 {
    margin-bottom: 0 !important;   /* #scrollable-container's padding already clears the action bar */
}
body.lockscreen #scrollable-container > footer,
body.lockscreen #scrollable-container .main-footer {
    display: none;                 /* was half-hidden under the fixed action bar */
}
body.lockscreen .pos-total > div:first-child {
    flex-direction: row !important;
    gap: 0.3em;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mz-muted);
    white-space: nowrap;
}
body.lockscreen .pos-total #total_payable {
    font-size: 30px !important;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 1023px) {
    /* Stacked till (cart above products): panels keep their natural height and the
     * page scrolls, instead of the cart being squeezed to nothing under the product list. */
    body.lockscreen #scrollable-container .tw-min-h-0 {
        min-height: auto;
        flex-shrink: 0;
    }
    body.lockscreen .pos_product_div {
        flex: 0 0 auto !important;
        min-height: 180px !important;
    }
}

/* ---------- Dialog footers: one primary action, the dismiss button stays quiet ---------- */
.modal-footer .tw-dw-btn.tw-dw-btn-neutral,
.modal-footer .btn-default {
    background-color: #fff !important;
    border: 1px solid var(--mz-control) !important;
    color: var(--mz-ink) !important;
}
.modal-footer .tw-dw-btn.tw-dw-btn-neutral:hover,
.modal-footer .btn-default:hover {
    background-color: var(--mz-surface) !important;
    border-color: var(--mz-help) !important;
}
.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mz-ink);
}