/*
 * 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;
}