/* ==========================================================
   GST BILLING - ADMIN THEME
   ========================================================== */

:root {
    --brand: #0d6efd;
    --brand-dark: #0b5ed7;
    --sidebar-width: 250px;
    --sidebar-rail: 64px;
    --topbar-height: 60px;
    --body-bg: #f4f6fb;
}

body.admin-body {
    background-color: var(--body-bg);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14.5px;
    margin: 0;
    padding-top: var(--topbar-height);
}

/* ---------------- Top Bar ---------------- */
.admin-topbar {
    height: var(--topbar-height);
    background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    z-index: 1040;
}

.topbar-brand {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}

.topbar-brand:hover {
    color: #dbeafe;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 0;
    font-weight: 500;
}

.user-chip:hover,
.user-chip:focus {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}

.user-chip::after {
    color: #fff;
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 auto;
}

.user-avatar-lg {
    width: 42px;
    height: 42px;
    font-size: 17px;
}

/* ---------------- Sidebar ---------------- */
.admin-sidebar {
    width: var(--sidebar-width);
    background: #ffffff;
    border-right: 1px solid #e3e8f0;
}

.admin-sidebar .sidebar-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.sidebar-header {
    border-bottom: 1px solid #e3e8f0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef1f6;
    background: #f8fafc;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    overflow: hidden;
}

.sidebar-user-info strong {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-info small {
    color: #6c757d;
    font-size: 12px;
}

.sidebar-nav {
    padding: 10px 8px 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #334155;
    text-decoration: none;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.sidebar-link i {
    width: 20px;
    text-align: center;
    font-size: 15px;
    color: #64748b;
}

.sidebar-link:hover {
    background: #eef4ff;
    color: var(--brand);
}

.sidebar-link:hover i {
    color: var(--brand);
}

.sidebar-link.active {
    background: var(--brand);
    color: #fff;
}

.sidebar-link.active i {
    color: #fff;
}

/* Submenu (Master) */
.sidebar-link.has-submenu .submenu-arrow {
    font-size: 11px;
    color: #94a3b8;
    transition: transform .15s ease;
}

.sidebar-link.has-submenu.active .submenu-arrow {
    color: #fff;
}

.sidebar-submenu {
    display: none;
    padding: 2px 0 4px 30px;
}

.sidebar-submenu.show {
    display: block;
}

.sidebar-link-sub {
    font-size: 13.5px;
    font-weight: 400;
    padding: 7px 12px;
}

.sidebar-link-sub i {
    font-size: 13px;
}

/* Desktop layout */
@media (min-width: 992px) {
    .admin-sidebar {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        bottom: 0;
        z-index: 1030;
        overflow-y: auto;
        transition: width .2s ease;
    }

    .admin-main {
        margin-left: var(--sidebar-width);
        min-height: calc(100vh - var(--topbar-height));
        padding: 18px 20px 0;
        transition: margin-left .2s ease;
    }
}

/* Collapsed icon rail - desktop only (toggled via body.sidebar-collapsed) */
@media (min-width: 992px) {
    body.sidebar-collapsed .admin-sidebar {
        width: var(--sidebar-rail);
    }

    body.sidebar-collapsed .admin-main {
        margin-left: var(--sidebar-rail);
    }

    body.sidebar-collapsed .sidebar-user {
        justify-content: center;
        padding: 14px 0;
    }

    body.sidebar-collapsed .sidebar-user-info,
    body.sidebar-collapsed .sidebar-nav > .sidebar-link span,
    body.sidebar-collapsed .sidebar-nav > .sidebar-link .submenu-arrow {
        display: none;
    }

    body.sidebar-collapsed .sidebar-nav > .sidebar-link {
        justify-content: center;
        gap: 0;
        padding: 9px 0;
    }

    body.sidebar-collapsed .sidebar-nav > .sidebar-link i {
        width: auto;
        font-size: 17px;
    }

    body.sidebar-collapsed .sidebar-nav {
        padding: 10px 6px 24px;
    }

    /* In the rail the Master submenu never opens inline; custom.js shows
       this block as a flyout card pinned next to the rail instead. */
    body.sidebar-collapsed .sidebar-submenu {
        position: fixed;
        display: none;
        width: 210px;
        padding: 6px 0;
        background: #fff;
        border: 1px solid #e3e8f0;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(15, 23, 42, .18);
        z-index: 1060;
    }
}

/* Mobile layout */
@media (max-width: 991.98px) {
    .admin-sidebar {
        width: 270px;
    }
}

/* ---------------- Content ---------------- */
.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.page-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.page-title i {
    color: var(--brand);
}

.stat-card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(16, 24, 40, .12);
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: #fff;
}

.stat-label {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #64748b;
    margin: 0;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 2px 0 0;
    line-height: 1.2;
    word-break: break-word;
}

.card-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.placeholder-box {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    padding: 26px 18px;
    text-align: center;
    color: #64748b;
}

/* ---------------- Footer ---------------- */
.admin-footer {
    padding: 16px 20px 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

@media (min-width: 992px) {
    .admin-footer {
        margin-left: var(--sidebar-width);
    }
}

.footer-dot {
    margin: 0 6px;
}

/* ---------------- Login Page ---------------- */
.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #38bdf8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .28);
}

.login-logo {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    margin: 0 auto;
}

.login-title {
    font-size: 21px;
    font-weight: 700;
    margin: 14px 0 2px;
}

.login-subtitle {
    color: #64748b;
    font-size: 13.5px;
    margin-bottom: 18px;
}

.login-hint {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: #475569;
}

.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
    border-color: #93b4f7;
}

/* ---------------- Toastr position ---------------- */
.toast-container {
    z-index: 1090;
}

/* ==========================================================
   THE PURCHASE ENTRY ITEM TABLE
   The table always fits the screen width, with no sideways
   scrolling. Columns share the available space by percentage,
   and every box fills its own cell.
   ========================================================== */
.purchase-items-table {
    width: 100%;
    table-layout: fixed;
}

.purchase-items-table th,
.purchase-items-table td {
    vertical-align: middle;
    overflow: hidden;
}

.purchase-items-table thead th {
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    color: #1f3b3a;
    background: #cfe0dd;
    border-color: #b8cfcb;
    padding: .45rem .4rem;
}

.purchase-items-table thead th:first-child,
.purchase-items-table tbody td:first-child {
    text-align: left;
}

/* Percentage widths, so the seven columns always add up to the
   full table width on any screen. */
.purchase-items-table thead tr th:nth-child(1) { width: 20%; }  /* ITEM */
.purchase-items-table thead tr th:nth-child(2) { width: 11%; }  /* UNIT */
.purchase-items-table thead tr th:nth-child(3) { width: 12%; }  /* EXPIRY */
.purchase-items-table thead tr th:nth-child(4) { width: 13%; }  /* BATCH */
.purchase-items-table thead tr th:nth-child(5) { width: 9%;  }  /* QTY */
.purchase-items-table thead tr th:nth-child(6) { width: 27%; }  /* PURCHASE PRICE */
.purchase-items-table thead tr th:nth-child(7) { width: 8%;  }  /* X */

/* The middle row of each product is a sub-head, styled like the
   table head so the three rows read as one block. */
.purchase-items-table tbody tr.purchase-item-mid > th {
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    color: #1f3b3a;
    background: #cfe0dd;
    border-color: #b8cfcb;
    white-space: nowrap;
    vertical-align: middle;
    padding: .45rem .4rem;
}

/* The third row of a product is shaded, so the block reads as one */
.purchase-items-table tbody tr.purchase-item-bottom > td {
    background: #fbfcfd;
}

/* The item name sits in the left cell, on one line */
.purchase-items-table [data-field="item_name"] {
    line-height: 1.2;
    font-size: .88rem;
}

/* The CGST / SGST lines under the rate box */
.purchase-items-table .purchase-gst-split {
    font-size: .72rem;
    line-height: 1.25;
    margin-top: .15rem;
}

/* The red X that takes the line off the bill */
.purchase-items-table .js-remove {
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Every box fills its own cell, so nothing sticks out */
.purchase-items-table .form-control,
.purchase-items-table .form-select,
.purchase-items-table .input-group {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.purchase-items-table input[type="number"] {
    text-align: right;
}

/* Hide the up/down spinner arrows on the number boxes */
.purchase-items-table input[type="number"]::-webkit-outer-spin-button,
.purchase-items-table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.purchase-items-table input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Discount 1 sits as a type box and a value box together */
.purchase-items-table .input-group-sm > .form-select {
    flex: 0 0 58px;
    width: 58px;
}

.purchase-items-table .input-group-sm > .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* ==========================================================
   TAX ROWS OF THE TOTALS BOX
   The rows are switched off when they do not apply: CGST + SGST
   for another state, IGST for your own, and no tax at all for a
   cash supplier. They carry .d-flex, and Bootstrap writes that
   with !important, so an inline display:none is not enough and
   the switch is done with a class.
   ========================================================== */
#rowCgst.is-hidden,
#rowSgst.is-hidden,
#rowIgst.is-hidden {
    display: none !important;
}

/* ==========================================================
   PRINTING A PURCHASE BILL
   Used by admin/purchases/view.php. The sidebar, the topbar and
   the buttons are dropped, and the cards lose their shadow so
   the printed bill looks flat like a normal document.
   ========================================================== */
@media print {
    body {
        background: #fff;
    }

    .admin-sidebar,
    .admin-topbar,
    .admin-footer,
    .no-print,
    .btn,
    .dataTables_wrapper,
    .pagination {
        display: none !important;
    }

    .admin-main,
    .content,
    .admin-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .card,
    .stat-card {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    table {
        width: 100% !important;
        font-size: 11px;
    }

    thead {
        display: table-header-group;
    }

    tr,
    td,
    th {
        padding: 4px 6px !important;
    }

    a {
        text-decoration: none !important;
        color: #000 !important;
    }

    @page {
        size: A4;
        margin: 12mm;
    }
}

/* ==========================================================
   POS SCREEN
   Counter layout: the bill sits on the left as a real invoice
   table, the product panel fills the right hand side. Both
   boxes scroll inside themselves, the page never scrolls.
   ========================================================== */

:root {
    --pos-bill-w: clamp(460px, 36vw, 620px);
}

body.pos-page {
    overflow: hidden;
}

body.pos-page .admin-main {
    height: calc(100vh - var(--topbar-height));
    min-height: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.pos-page .page-heading {
    flex: 0 0 auto;
    margin-bottom: 12px;
}

body.pos-page #posForm {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

body.pos-page .pos-screen {
    flex: 1 1 auto;
    min-height: 0;
}

.pos-screen {
    display: flex;
    align-items: stretch;
    gap: 14px;
    min-height: 0;
    width: 100%;
}

/* ==========================================================
   LEFT - THE BILL
   ========================================================== */

.pos-bill {
    flex: 0 0 var(--pos-bill-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    /* The table is the only part that may shrink, so the header and
       the payment block keep their size. On a very short window the
       panel itself scrolls instead of cutting the Save button off. */
    overflow-x: hidden;
    overflow-y: auto;
}

/* ---------------- bill header ---------------- */

.pos-bill-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid #eef2f7;
}

.pos-bill-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.pos-bill-sub {
    font-size: 12px;
    color: #94a3b8;
}

.pos-bill-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.pos-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
}

.pos-cart-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.pos-bill-menu {
    padding: 12px;
    min-width: 260px;
}

.pos-bill-menu li {
    padding: 0 0 10px;
}

.pos-bill-menu li:last-child {
    padding-bottom: 0;
}

/* ---------------- customer strip ---------------- */

.pos-customer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}

.pos-customer-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4338ca;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
}

.pos-customer-body {
    flex: 1 1 auto;
    min-width: 0;
}

.pos-customer-select {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    outline: 0;
}

.pos-customer-sub {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-customer-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.pos-customer-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.pos-customer-btn:hover {
    background: #eef2ff;
    color: #4338ca;
}

/* ---------------- the bill table ---------------- */

.pos-bill-table {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.pos-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    font-size: 13.5px;
    margin-bottom: 0;
}

.pos-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
    padding: 9px 8px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.pos-table tbody td {
    padding: 9px 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.pos-table .pos-c-no {
    width: 28px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}

.pos-table .pos-c-item {
    min-width: 120px;
}

.pos-table .pos-c-qty {
    width: 116px;
}

.pos-table .pos-c-price {
    width: 94px;
}

.pos-table .pos-c-amt {
    width: 100px;
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.pos-table .pos-c-act {
    width: 66px;
    text-align: right;
    white-space: nowrap;
}

.pos-row-name {
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    word-break: break-word;
}

.pos-row-meta {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.35;
    margin-top: 3px;
    word-break: break-word;
}

.pos-row-free {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #047857;
    background: #ecfdf5;
    border-radius: 5px;
    padding: 1px 5px;
    white-space: nowrap;
    margin-top: 3px;
}

.pos-row-disc {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #b91c1c;
    background: #fef2f2;
    border-radius: 5px;
    padding: 1px 5px;
    white-space: nowrap;
    margin-top: 3px;
}

.pos-row-open td {
    background: #f5f3ff;
}

.pos-row-added td {
    animation: pos-row-flash .9s ease-out;
}

@keyframes pos-row-flash {
    0%   { background: #dcfce7; }
    100% { background: transparent; }
}

/* ---------------- quantity stepper ---------------- */

.pos-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.pos-step {
    width: 28px;
    border: 0;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
}

.pos-step:hover {
    background: #eef2ff;
    color: #4338ca;
}

.pos-qty {
    width: 50px;
    border: 0;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    background: #fff;
    outline: 0;
}

/* ---------------- price box ---------------- */

.pos-input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 7px;
    height: 23px;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    background: #fff;
    text-align: right;
    outline: 0;
    font-variant-numeric: tabular-nums;
}

.pos-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}

.pos-qty,
.pos-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.pos-qty::-webkit-outer-spin-button,
.pos-qty::-webkit-inner-spin-button,
.pos-input::-webkit-outer-spin-button,
.pos-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------------- row actions ---------------- */

.pos-row-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pos-row-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.pos-row-btn.pos-remove:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* ---------------- discount / scheme row ---------------- */

.pos-detail td {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px;
}

.pos-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.pos-detail-grid label {
    display: block;
    margin: 0;
}

.pos-detail-grid label span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
}

.pos-detail-note {
    margin-top: 9px;
    font-size: 11.5px;
    color: #64748b;
}

/* ---------------- empty cart ---------------- */

.pos-empty {
    text-align: center;
    color: #94a3b8;
    padding: 38px 12px !important;
    font-size: 13.5px;
    line-height: 1.7;
}

.pos-empty i {
    display: block;
    font-size: 26px;
    color: #cbd5e1;
    margin-bottom: 6px;
}

/* ==========================================================
   BILL FOOT - tax, paid / due, total, payment, save
   ========================================================== */

.pos-bill-foot {
    /* Content sized and never scrollable: the tax block, the paid /
       due boxes, the total, the payment pills and the Save button
       must always be on screen. The table above gives up its height
       first, and .pos-bill scrolls only if the window is shorter
       than everything put together. */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 12px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.pos-tax-details {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.pos-tax-details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
}

.pos-tax-details summary::-webkit-details-marker {
    display: none;
}

.pos-tax-details summary small {
    font-weight: 600;
    font-size: 11.5px;
    color: #94a3b8;
    text-align: right;
}

.pos-tax-body {
    padding: 2px 10px 10px;
    border-top: 1px dashed #e2e8f0;
}

.pos-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}

.pos-total-row:last-child {
    border-bottom: 0;
}

.pos-total-row strong {
    font-variant-numeric: tabular-nums;
}

/* ---------------- paid / due ---------------- */

.pos-paid-row {
    display: flex;
    gap: 10px;
}

.pos-paid-box {
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 5px 10px;
}

.pos-paid-box label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0;
}

.pos-paid-box input {
    width: 100%;
    border: 0;
    background: transparent;
    outline: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    padding: 0;
    line-height: 1.35;
}

.pos-due-box {
    flex: 0 0 40%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pos-due-box span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.35;
}

.pos-due-box strong {
    font-size: 16px;
    line-height: 1.35;
    color: #b45309;
    font-variant-numeric: tabular-nums;
}

/* ---------------- the big total ---------------- */

.pos-total-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #0f172a;
    color: #fff;
    border-radius: 10px;
    padding: 8px 12px;
}

.pos-total-label {
    font-size: 13px;
    font-weight: 700;
}

.pos-total-label small {
    display: block;
    font-weight: 500;
    font-size: 11.5px;
    color: #94a3b8;
}

.pos-total-amount {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

/* ---------------- payment pills ---------------- */

.pos-pay-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pos-pill {
    flex: 1 1 auto;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.pos-pill:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.pos-pill-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(13, 110, 253, .3);
}

/* ---------------- save ---------------- */

.pos-save-btn {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .3);
}

.pos-save-btn:hover {
    filter: brightness(1.06);
}

.pos-save-btn:disabled {
    opacity: .75;
    box-shadow: none;
}

.pos-save-key {
    font-size: 11px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    padding: 1px 7px;
}

/* ==========================================================
   RIGHT - PRODUCT PANEL
   ========================================================== */

.pos-catalog {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
    padding: 12px;
    overflow: hidden;
}

.pos-searchbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 9px 12px;
}

.pos-searchbar:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}

.pos-searchbar i {
    color: #94a3b8;
    font-size: 15px;
}

.pos-searchbar input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font-size: 15px;
    background: transparent;
}

.pos-search-key {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 8px;
    flex: 0 0 auto;
}

.pos-filterrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.pos-category-select {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    padding: 8px 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    outline: 0;
}

.pos-category-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}

.pos-search-hint {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: #94a3b8;
    padding: 8px 2px 0;
}

/* ---------------- product grid ---------------- */

.pos-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    /* Rows take the height of their cards. Left to `auto` the browser
       stretches them to fill the panel and the tile picture is the
       first thing that gets squeezed. */
    grid-auto-rows: max-content;
    gap: 10px;
    align-content: start;
    padding: 10px 2px 4px;
}

.pos-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 7px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pos-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .14);
    transform: translateY(-1px);
}

.pos-card:active {
    transform: translateY(0);
}

.pos-card-pic {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    position: relative;
    overflow: hidden;
}

.pos-card-out-tag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(220, 38, 38, .92);
    color: #fff;
    font-size: 9.5px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    padding: 2px 0;
    letter-spacing: .03em;
}

.pos-card-name {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pos-card-code {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 10.5px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-card-foot {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 6px;
    margin-top: auto;
    padding-top: 5px;
    border-top: 1px dashed #eef2f7;
}

.pos-card-price {
    font-size: 12.5px;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pos-card-stock {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 10px;
    font-weight: 700;
    color: #047857;
    background: #ecfdf5;
    border-radius: 6px;
    padding: 1px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-card-out {
    opacity: .65;
}

.pos-card-out:hover {
    border-color: #fecaca;
    box-shadow: none;
    transform: none;
}

.pos-card-out .pos-card-price {
    color: #94a3b8;
}

.pos-card-out .pos-card-stock {
    color: #dc2626;
    background: #fef2f2;
}

/* ==========================================================
   CLASSIC POS PAGE (admin/pos/index.php, search left / bill right)
   ========================================================== */

/* Taxable and GST were taken out of the classic invoice header
   (the two <th> lines are commented in index.php), so their cells
   go with them. Uncomment those two lines and delete this rule to
   bring the columns back. */
#posTable .pos-c-tax,
#posTable .pos-c-gst {
    display: none;
}

/* The Discount cell holds a box instead of a number, so the column
   keeps the width the header gives it while the cashier types. */
#posTable .pos-c-disc {
    width: 92px;
    white-space: nowrap;
}

/* The Bootstrap row gutter bleeds 8px past its container on narrow
   screens, which used to give this page a sideways scrollbar. `clip`
   (not `hidden`) takes that scrollbar away without turning the page
   into a scroll container, so vertical scrolling keeps working
   exactly as before. */
body.pos-classic {
    overflow-x: clip;
}

/* The classic page keeps its results inside the search card
   (#posResults), so a long list scrolls there instead of pushing
   the bill summary down the page. Two equal columns of tiles keep
   the buttons small and put more products on screen at once. */
.pos-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 2px;
}

/* The container above is shorter than its list, so the tiles would
   otherwise be squeezed by the grid. */
.pos-results .pos-card {
    min-height: 0;
}

/* ==========================================================
   NARROW SCREENS - the bill stacks on top of the products
   ========================================================== */

/* Below 1200 the sidebar is still taking room, so the bill drops to
   a smaller share. The two panels stay side by side - stacking them
   is what pushed the product panel off the bottom of the screen. */
@media (max-width: 1199.98px) {
    :root {
        --pos-bill-w: clamp(360px, 42vw, 500px);
    }
}

/* Below 992 the sidebar turns into an offcanvas and the panels get
   the full width of the window. */
@media (max-width: 991.98px) {
    :root {
        --pos-bill-w: clamp(340px, 44vw, 440px);
    }

    .pos-table {
        min-width: 320px;
    }

    .pos-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .pos-catalog {
        padding: 10px;
    }
}

/* Portrait phone: the bill goes on top with a cap so the product
   panel still gets room. The screen scrolls inside itself; the page
   itself still does not. */
@media (max-width: 767.98px) {
    .pos-screen {
        flex-direction: column;
        gap: 10px;
        overflow-y: auto;
    }

    .pos-bill {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    .pos-catalog {
        flex: 0 0 auto;
        height: min(320px, 34vh);
        min-height: 160px;
    }

    .pos-table {
        min-width: 300px;
    }
}

/* ==========================================================
   INVOICE PRINT SHEET
   admin/pos/print.php renders only this sheet, with no sidebar,
   no top bar and no footer, so the page is the invoice.
   ========================================================== */

.invoice-print-body {
    background: #e2e8f0;
    margin: 0;
    padding: 18px 0;
}

.invoice-print-bar {
    max-width: 210mm;
    margin: 0 auto 14px;
    padding: 0 12mm;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.invoice-sheet {
    max-width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 12mm;
    background: #fff;
    color: #000;
    font-size: 12px;
}

.invoice-business-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 2px;
}

.invoice-title {
    font-size: 16px;
    font-weight: 700;
    text-align: right;
    margin: 0 0 6px;
}

.invoice-muted {
    color: #475569;
    font-size: 11.5px;
}

.invoice-meta td {
    padding: 2px 0 !important;
    font-size: 11.5px;
    border: 0 !important;
}

.invoice-items {
    font-size: 11.5px;
}

.invoice-items th {
    background: #f1f5f9;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.invoice-items td {
    padding: 4px 5px !important;
    vertical-align: top;
}

.invoice-totals td {
    padding: 2px 0 !important;
    font-size: 11.5px;
}

.invoice-totals tr.fw-bold td {
    border-top: 1px solid #cbd5e1;
    padding-top: 4px !important;
    font-size: 13px;
}

.invoice-words {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 11.5px;
}

.invoice-sign-line {
    border-top: 1px solid #94a3b8;
    padding-top: 3px;
    font-size: 11.5px;
}

/* When the invoice is printed, the grey page around the sheet and
   the on-screen buttons must not be printed. The table header
   repeats if the item list runs onto a second page. */
@media print {
    .invoice-print-body {
        background: #fff;
        padding: 0;
    }

    .invoice-print-bar,
    .no-print {
        display: none !important;
    }

    .invoice-sheet {
        max-width: none;
        min-height: auto;
        margin: 0;
        padding: 0;
    }

    .invoice-items thead {
        display: table-header-group;
    }

    .invoice-items tr {
        break-inside: avoid;
    }
}

/* ==========================================================
   DASHBOARD - sales of the last 7 days
   A plain bar chart made of divs. It needs no chart library, so
   there is no extra script to load and nothing to go wrong when the
   page is used without a network connection.
   ========================================================== */

.week-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 150px;
}

.week-chart-col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.week-chart-bar-wrap {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
}

.week-chart-bar {
    width: 100%;
    max-width: 44px;
    min-height: 3px;
    background: #93c5fd;
    border-radius: 4px 4px 0 0;
    transition: background .15s ease-in-out;
}

.week-chart-col:hover .week-chart-bar {
    background: #2563eb;
}

/* The day the page was opened is marked so the week can be read
   without counting back from the end. */
.week-chart-bar.is-today {
    background: #2563eb;
}

.week-chart-label {
    display: block;
    margin-top: 6px;
    color: #6b7280;
    font-size: .75rem;
    text-align: center;
    white-space: nowrap;
}

/* ==========================================================
   REPORTS - printing and the menu tiles

   A printed report should be the table and nothing else, so the
   sidebar, the topbar, the buttons and the footer are hidden and
   the card loses its border and shadow.
   ========================================================== */

.report-tile {
    background: #fff;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.report-tile:hover {
    border-color: #2563eb !important;
    box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .08);
}

.report-tile i {
    color: #2563eb;
}

@media print {

    .no-print,
    .sidebar,
    .topbar,
    .admin-footer,
    footer {
        display: none !important;
    }

    .main-content,
    .content,
    .card {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .table {
        font-size: 11px;
    }

    .table th,
    .table td {
        padding: 4px 6px !important;
    }

    .table thead {
        display: table-header-group;
    }

    .table tfoot {
        display: table-row-group;
    }

    .table tr {
        break-inside: avoid;
    }

    a {
        text-decoration: none;
        color: #000;
    }
}

/* ==========================================================
   THERMAL INVOICE
   The narrow receipt a small till printer takes, 58mm or 80mm.

   The @page rule is the important part: it tells the browser the
   size of the paper it is about to print on, so the receipt is not
   cut off at the right hand side. The width is set on the body as
   thermal-58 or thermal-80 and the matching @page size follows it.

   Everything is plain text on a plain background. Thermal printers
   are black and white, so no colour is used that would come out as
   grey or, worse, not at all.
   ========================================================== */

.thermal-body {
    background: #eef1f5;
    margin: 0;
    padding: 16px 0 40px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.thermal-sheet {
    margin: 0 auto;
    background: #fff;
    padding: 4mm 2mm;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    font-size: 11px;
    line-height: 1.35;
    color: #000;
}

/* 58mm is the narrow one, so the type is smaller there. */
.thermal-58 .thermal-sheet {
    font-size: 10px;
}

.thermal-centre {
    text-align: center;
}

.thermal-shop {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.thermal-title {
    font-size: 12px;
    font-weight: 700;
}

.thermal-rule {
    border-top: 1px dashed #000;
    margin: 3px 0;
}

.thermal-line {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.thermal-line > span:last-child {
    text-align: right;
    white-space: nowrap;
}

.thermal-item {
    padding: 2px 0;
    border-bottom: 1px dotted #ccc;
}

.thermal-item:last-child {
    border-bottom: 0;
}

.thermal-item-name {
    font-weight: 600;
}

.thermal-small {
    font-size: .85em;
}

.thermal-muted {
    color: #444;
}

.thermal-total {
    font-size: 12px;
    font-weight: 700;
    border-top: 1px solid #000;
    padding-top: 2px;
    margin-top: 2px;
}

.thermal-words {
    margin: 2px 0;
}

.thermal-sign {
    margin-top: 14px;
    padding-top: 2px;
    border-top: 1px solid #000;
    text-align: center;
    font-size: .9em;
}

/* ---------- the screen ---------- */

.thermal-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.thermal-hint {
    max-width: 520px;
    margin: 0 auto 14px;
    padding: 8px 12px;
    background: #fff8e1;
    border: 1px solid #ffe08a;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

/* ---------- printing ---------- */

@media print {

    @page {
        size: 80mm auto;
        margin: 2mm;
    }

    .thermal-body.thermal-58 {
        /* The 58mm printer gets a 58mm page. */
        page: thermal58;
    }

    .thermal-body {
        background: #fff;
        padding: 0;
    }

    .thermal-sheet {
        width: 100% !important;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .no-print,
    .thermal-bar,
    .thermal-hint {
        display: none !important;
    }
}

/* The second rule is a separate media block on purpose: a nested
   @page inside another @media is not read everywhere, so the 58mm
   page size is stated at the top level as well. */
@media print {
    @page thermal58 {
        size: 58mm auto;
        margin: 1.5mm;
    }
}

/* ==========================================================
   POS NUMBER BOXES
   Hide the up/down spinner arrows, scoped to the POS form so
   nothing else in the app changes.
   ========================================================== */
#posForm input[type=number]::-webkit-outer-spin-button,
#posForm input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#posForm input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}