/* Screen only: printed receipts and reports keep the POS's own print styles. */
@media screen {
:root {
    --gh-brand: #1f9e42;
    --gh-brand-dark: #15803d;
    --gh-brand-soft: #e9f6ed;
    --gh-ink-950: #0b0f17;
    --gh-ink-900: #111827;
    --gh-ink-700: #374151;
    --gh-ink-500: #6b7280;
    --gh-ink-400: #9ca3af;
    --gh-ink-200: #e5e7eb;
    --gh-ink-100: #f1f2f4;
    --gh-ink-50: #f7f8fa;
    --gh-radius: 14px;
    --gh-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
    --gh-display: 'Barlow Semi Condensed', 'Inter', ui-sans-serif, sans-serif;
}

html, body, .tw-font-sans, .btn, .form-control, .select2-container {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
body.tw-bg-gray-100, body .tw-bg-gray-100.tw-flex-1, .content-wrapper { background-color: var(--gh-ink-50) !important; }
body { color: var(--gh-ink-900); -webkit-font-smoothing: antialiased; }

/* Sidebar */
aside.side-bar { background: var(--gh-ink-950) !important; }
aside.side-bar .gh-brand { display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px; text-decoration: none; }
aside.side-bar .gh-brand img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; flex-shrink: 0; }
aside.side-bar .gh-brand .gh-brand-name { font-family: var(--gh-display); font-size: 17px; font-weight: 600; line-height: 1.15; color: #fff; }
aside.side-bar .gh-brand .gh-brand-sub { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gh-ink-400); }
#side-bar { border-color: transparent !important; scrollbar-width: thin; scrollbar-color: #374151 transparent; }
#side-bar a { color: var(--gh-ink-400) !important; font-size: 13.5px; }
#side-bar a:hover, #side-bar a:focus { background: rgb(255 255 255 / .05) !important; color: #fff !important; }
#side-bar a.tw-text-primary-700, #side-bar a.tw-bg-gray-200 { background: rgb(255 255 255 / .10) !important; color: #fff !important; }
#side-bar a.tw-text-primary-700 svg:first-child, #side-bar a.tw-bg-gray-200 svg:first-child { color: var(--gh-brand) !important; }
#side-bar > div.tw-bg-gray-200 { background: rgb(255 255 255 / .04) !important; }
#side-bar .chiled a { background: transparent !important; }
#side-bar .chiled a.tw-text-primary-700 { color: #fff !important; background: transparent !important; }
#side-bar .chiled .tw-w-px { background: rgb(255 255 255 / .12) !important; }
#side-bar svg { color: inherit; }
#side-bar .tw-text-gray-500 { color: var(--gh-ink-500) !important; }

/* Top bar and dashboard banner */
.tw-bg-gradient-to-r {
    --tw-gradient-from: var(--gh-ink-950) !important;
    --tw-gradient-to: var(--gh-ink-900) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.tw-bg-gradient-to-r.no-print [class*="tw-ring-white"] { background-color: rgb(255 255 255 / .08) !important; }
.tw-bg-gradient-to-r.no-print [class*="tw-ring-white"]:hover { background-color: rgb(255 255 255 / .16) !important; }

/* Headings */
.content-header h1, section.content-header > h1, h1.tw-text-xl, h1.tw-text-2xl {
    font-family: var(--gh-display) !important; font-weight: 600 !important; letter-spacing: -.01em; color: var(--gh-ink-950);
}
.content-header h1 { font-size: 26px !important; }
.content-header h1 small { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--gh-ink-500); }

/* Cards */
.box, .info-box, .small-box, .modal-content, .nav-tabs-custom {
    border-radius: var(--gh-radius) !important; border: 1px solid var(--gh-ink-200) !important; border-top-width: 1px !important;
    box-shadow: var(--gh-shadow) !important; background: #fff;
}
.box.box-primary, .box.box-solid, .box.box-info, .box.box-success, .box.box-warning, .box.box-danger { border-top-color: var(--gh-ink-200) !important; }
.box-header { border-radius: var(--gh-radius) var(--gh-radius) 0 0; }
.box-header .box-title { font-family: var(--gh-display); font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gh-ink-500); }
.tw-rounded-xl, .tw-rounded-2xl { border-radius: var(--gh-radius) !important; }
.modal-header { border-radius: var(--gh-radius) var(--gh-radius) 0 0; }
.modal-title { font-family: var(--gh-display); font-weight: 600; font-size: 20px; }

/* Buttons */
.btn, .tw-dw-btn { border-radius: 8px !important; font-weight: 600; }
.btn-primary, .tw-dw-btn-primary, .bg-primary, .btn-primary:focus, .tw-dw-btn-primary:focus,
.tw-bg-primary-800, .tw-bg-primary-700, .tw-bg-primary-600 {
    background-color: var(--gh-brand) !important; border-color: var(--gh-brand) !important; color: #fff !important; background-image: none !important;
}
.btn-primary:hover, .tw-dw-btn-primary:hover, .btn-primary:active, .hover\:tw-bg-primary-700:hover {
    background-color: var(--gh-brand-dark) !important; border-color: var(--gh-brand-dark) !important; color: #fff !important;
}
.tw-bg-gradient-to-r.no-print .tw-bg-primary-800 { background-color: rgb(255 255 255 / .08) !important; border-color: transparent !important; }
.btn-default { border-color: var(--gh-ink-200) !important; background: #fff !important; color: var(--gh-ink-700) !important; }
.btn-default:hover { background: var(--gh-ink-50) !important; }
.tw-text-primary-700, .tw-text-primary-600, .tw-text-primary-800, .text-primary { color: var(--gh-brand-dark) !important; }
.tw-border-primary-500\/30 { border-color: rgb(255 255 255 / .06) !important; }

/* Forms */
.form-control, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .input-group-addon {
    border-radius: 8px !important; border-color: var(--gh-ink-200) !important; box-shadow: none !important;
}
.input-group .form-control:not(:first-child), .input-group .select2-container:not(:first-child) .select2-selection { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group-addon:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; background: var(--gh-ink-50); }
.input-group-addon:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; background: var(--gh-ink-50); }
.form-control:focus, .select2-container--default.select2-container--focus .select2-selection, .tw-dw-input:focus {
    border-color: var(--gh-brand) !important; box-shadow: 0 0 0 4px rgb(31 158 66 / .15) !important; outline: none !important;
}
label { font-size: 13px; font-weight: 500; color: var(--gh-ink-700); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--gh-brand) !important; }
.icheckbox_square-blue.checked, .iradio_square-blue.checked { filter: hue-rotate(275deg) saturate(1.1); }

/* Tables */
.table > thead > tr > th, table.dataTable thead th {
    background: var(--gh-ink-50) !important; border-bottom: 1px solid var(--gh-ink-200) !important; color: var(--gh-ink-500) !important;
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.table > tbody > tr > td { border-top: 0 !important; border-bottom: 1px solid var(--gh-ink-100) !important; vertical-align: middle !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fff !important; }
.table-hover > tbody > tr:hover, .table-striped > tbody > tr:hover { background-color: var(--gh-ink-50) !important; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-left: 0 !important; border-right: 0 !important; }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background-color: var(--gh-brand) !important; border-color: var(--gh-brand) !important; }
.pagination > li > a { color: var(--gh-ink-700); }
.dt-buttons .btn { font-size: 12px; }

/* Tabs, labels, misc */
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--gh-brand) !important; }
.nav-tabs-custom > .nav-tabs > li.active > a { font-weight: 600; color: var(--gh-ink-950); }
.label, .badge { border-radius: 999px !important; font-weight: 600; }
.bg-green, .label-success, .bg-light-green { background-color: var(--gh-brand) !important; }
a { color: var(--gh-brand-dark); }
a:hover, a:focus { color: var(--gh-brand); }
::selection { background: rgb(31 158 66 / .2); }
:focus-visible { outline: 2px solid var(--gh-brand); outline-offset: 2px; }

/* Sign-in pages */
.gh-auth-brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; }
.gh-auth-brand img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; }
.gh-auth-brand span { font-family: var(--gh-display); font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.gh-login-logo { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 4px; display: block; }
.right-col h1 { font-family: var(--gh-display) !important; }
.right-col .tw-rounded-2xl { box-shadow: 0 10px 30px -12px rgb(15 23 42 / .45) !important; }


/* Primary action buttons that use the gradient style */
.tw-dw-btn.tw-bg-gradient-to-r, button.tw-bg-gradient-to-r, a.tw-bg-gradient-to-r, input[type=submit].tw-bg-gradient-to-r {
    --tw-gradient-from: var(--gh-brand) !important;
    --tw-gradient-to: var(--gh-brand-dark) !important;
    border-color: transparent !important; color: #fff !important;
}
.tw-dw-btn.tw-bg-gradient-to-r:hover, button.tw-bg-gradient-to-r:hover, a.tw-bg-gradient-to-r:hover { filter: brightness(.95); }
html.tw-bg-white { background-color: var(--gh-ink-50) !important; }

/* Sell screen */
.gh-mpesa-btn { background: var(--gh-brand) !important; color: #fff !important; min-height: 38px; box-shadow: 0 1px 2px rgb(15 23 42 / .15); }
.gh-mpesa-btn:hover { background: var(--gh-brand-dark) !important; }
[class*="tw-bg-[#646EE4]"], [class*="tw-bg-[#001F3E]"] { background-color: var(--gh-ink-900) !important; }
[class*="tw-bg-[#646EE4]"]:hover, [class*="tw-bg-[#001F3E]"]:hover { background-color: var(--gh-ink-700) !important; }
[class*="tw-bg-[rgb(40,183,123)]"] { background-color: #0f766e !important; }
.product_box { border-radius: 12px !important; border: 1px solid var(--gh-ink-200) !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; }
.product_box:hover { border-color: var(--gh-brand) !important; box-shadow: var(--gh-shadow) !important; }
#total_payable { color: var(--gh-brand-dark) !important; font-family: var(--gh-display); }
.pos-total > div:first-child { font-family: var(--gh-display); font-size: 15px !important; line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; color: var(--gh-ink-500) !important; }
#pos_table .product_row a, #pos_table .product_row .text-link { color: var(--gh-ink-950) !important; font-weight: 600; }
#kopokopoStatusModal .alert-info { display: none; }
#kopokopoStatusModal .modal-title, #kopokopoStatusModal h5 { font-family: var(--gh-display); font-weight: 600; }
.right-col a[href*="password/reset"] { color: var(--gh-brand-dark) !important; text-shadow: none !important; }

/* Sell screen product tiles and panel heights */
#product_list_body { padding: 2px 4px 12px; }
@media (min-width: 992px) { #product_list_body { max-height: calc(100vh - 255px) !important; height: auto !important; } }
@media (min-width: 992px) { .pos_product_div { height: calc(100vh - 440px) !important; min-height: 280px !important; } }
.product_list { padding: 5px !important; }
.product_box.gh-product { height: auto !important; min-height: 118px; padding: 10px !important; margin: 0 !important; background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 8px; text-align: left !important; animation: none !important; }
.gh-product-initial { width: 34px; height: 34px; border-radius: 9px; background: var(--gh-brand-soft); color: var(--gh-brand-dark); font-family: var(--gh-display); font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gh-product-image { height: 64px !important; width: 100%; }
.gh-product-text { padding: 0 !important; text-align: left !important; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gh-product-name { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--gh-ink-950); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gh-product-sku { font-size: 10.5px; color: var(--gh-ink-400); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-product-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.gh-product-price { font-size: 13px; font-weight: 700; color: var(--gh-ink-950); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-product-stock { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--gh-brand-soft); color: var(--gh-brand-dark); white-space: nowrap; }
.gh-product-out .gh-product-stock { background: #fef2f2; color: #b91c1c; }
.gh-product-out .gh-product-initial { background: var(--gh-ink-100); color: var(--gh-ink-500); }
.gh-product-out .gh-product-name { color: var(--gh-ink-500); }
.main-footer, footer.main-footer a, .no-print > .main-footer { color: var(--gh-ink-400) !important; }
#pos_table img[src*="default.png"] { display: none !important; }

/* Login code page */
.gh-otp-input { width: 100%; text-align: center; font-size: 24px !important; letter-spacing: .5em; font-variant-numeric: tabular-nums; }
.gh-link-btn { background: none; border: 0; padding: 0; color: var(--gh-brand-dark) !important; font-weight: 600; cursor: pointer; }
.gh-link-btn:hover { text-decoration: underline; }

/* Phones and small tablets */
@media (max-width: 767px) {
    .content, section.content { padding-left: 10px !important; padding-right: 10px !important; }
    .content-header h1 { font-size: 22px !important; }
    .box-body, .tw-p-6 { padding: 12px !important; }
    .table-responsive, .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 0 !important; }
    .table > tbody > tr > td, .table > thead > tr > th { white-space: nowrap; padding: 10px 12px !important; }
    .dt-buttons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
    .dataTables_filter input { width: 100% !important; }
    .btn, .tw-dw-btn { min-height: 38px; }
    .form-control, .select2-container .select2-selection--single { min-height: 42px; font-size: 16px !important; }
    .modal-dialog { margin: 10px !important; width: auto !important; }
    .product_list { width: 50% !important; }
    #product_list_body { max-height: 60vh !important; }
    div.tw-overflow-x-auto:has(> #pos-kopokopo-btn) { justify-content: flex-start !important; padding: 0 10px; width: 100% !important; max-width: 100% !important; align-self: stretch; }
    div.tw-overflow-x-auto:has(> #pos-kopokopo-btn) > * { flex-shrink: 0; }
    .gh-mpesa-btn { order: -1; width: auto !important; flex: none !important; white-space: nowrap; padding: 8px 14px !important; }
    .gh-auth-brand span { font-size: 18px; }
}

}

@media print {
    aside.side-bar { display: none !important; }
}