/* Modern brand palette */
:root {
  --brand: #0f766e;
  --brand-dark: #115e59;
  --brand-soft: #ecfdf5;

  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f6f7fb;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
}

.btn-outline-light {
    --bs-btn-color: #0f766e;
    --bs-btn-border-color: #0f766e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0f766e;
    --bs-btn-hover-border-color: #0f766e;
}

/* Solid brand (teal) button */
.btn-teal {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-focus-shadow-rgb: 15, 118, 110;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

/* Top navbar */
.app-navbar {
  background: #ffffff;
  color: var(--ink);
  padding: 12px 20px;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(15,23,42,.05);
}
.app-navbar .navbar-brand { color: #0f766e; font-weight: 800; letter-spacing: .2px; display: inline-flex; align-items: center; gap: 10px; }
.app-navbar .navbar-brand:hover { color: #115e59; }
.brand-mark {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #ecfdf5; color: #0f766e; font-size: 1.1rem;
  border: 1px solid #d1fae5;
}
/* navbar right-side items on white bar */
.app-navbar .nav-link,
.app-navbar .navbar-text,
.app-navbar .dropdown-toggle { color: var(--ink-2); }
.app-navbar .nav-link:hover,
.app-navbar .dropdown-toggle:hover { color: #0f766e; }
.app-navbar .badge,
.app-navbar .sub-badge {
  background: #32718f !important; color: #fff !important;
  border-radius: 999px; font-weight: 600; padding: 8px 12px;
}
.app-navbar .navbar-toggler { border-color: #e5e7eb; color: var(--ink-2); }



/* Sidebar */
.sidebar {
  width: 200px;
  flex: 0 0 200px;
  min-height: calc(100vh - 60px);
  position: sticky;
  top: 0;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  padding: 8px 0;
}
main {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
}
.sidebar .nav-link {
  color: var(--ink-2);
  border-radius: 8px;
  margin: 1px 6px;
  padding: 6px 16px;
  font-size: .875rem;
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  transition: all .15s ease;
}
.sidebar .nav-link:hover { background: #ecfdf5; color: #0f766e; }
.sidebar .nav-link.active {
  background: linear-gradient(90deg,#0f766e,#14b8a6);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(15,118,110,.35);
}
.sidebar .nav-link i { width: 18px; font-size: .95rem; }

/* Cards */
.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  background: #fff;
}
.card + .card { margin-top: 0; }

/* KPI stat cards */
.stat-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 14px;
  padding: 16px 18px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(15,23,42,.15); }
.stat-card.success { border-left-color: var(--success); }
.stat-card.warning { border-left-color: var(--warning); }
.stat-card.danger  { border-left-color: var(--danger); }
.stat-card .h4, .stat-card .h5 { font-weight: 700; color: var(--ink); }

/* Tables */
.table { --bs-table-bg: transparent; color: var(--ink-2); }
.table thead th {
  background: #f8fafc;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .5px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.table > :not(caption) > * > * { padding: 10px 12px; }
.table tbody tr:hover { background: #fafbff; }

/* Buttons */
.btn { border-radius: 10px; font-weight: 500; }
.btn-primary{
    background:#0f766e;
    border-color:#0f766e;
    color:#fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
    background:#115e59;
    border-color:#115e59;
    color:#fff;
}
.btn-outline-primary{
    color:var(--brand);
    border-color:var(--brand);
}

.btn-outline-primary:hover{
    background:var(--brand);
    border-color:var(--brand);
    color:#fff;
}
/* Forms */
.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--line);
  padding: 8px 12px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15,118,110,.15);
}
.form-label { color: var(--ink-2); font-weight: 500; font-size: 12px; margin-bottom: 4px; }

/* Badges */
.badge { font-weight: 500; padding: .4em .7em; border-radius: 999px; }

/* Cost insights strip (products form) */
.insight-box {
  background: #ecfdf5; border: 1px solid #a7f3d0;
  border-radius: 12px; padding: 12px 14px;
}
.insight-box .label { text-transform: uppercase; color: #065f46; font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.insight-box .value { font-size: 1.35rem; font-weight: 700; color: #064e3b; }

/* POS search results */
.search-results {
  position: absolute; z-index: 1050;
  background: #fff; border: 1px solid var(--line); width: 100%;
  max-height: 320px; overflow-y: auto;
  border-radius: 12px; box-shadow: 0 20px 40px -10px rgba(15,23,42,.2);
  margin-top: 4px;
}
.search-results .item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.search-results .item:hover { background: var(--brand-soft); }
.search-results .item:last-child { border-bottom: 0; }

.pos-cart { max-height: 60vh; overflow-y: auto; }

/* Modal tweaks */
.modal-content { border-radius: 16px; border: 0; }
.modal-header { border-bottom: 1px solid var(--line); }

/* Alerts */
.alert { border-radius: 12px; border: 0; }
.alert-success { background: #d1fae5; color: #065f46; }
.alert-danger { background: #fee2e2; color: #991b1b; }
.alert-info { background: #dbeafe; color: #1e40af; }
.alert-warning { background: #fef3c7; color: #92400e; }

/* Toasts */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 1080; }

/* Login/register */
body.auth-body { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); min-height: 100vh; }
.auth-card { border-radius: 20px; box-shadow: 0 25px 60px -20px rgba(0,0,0,.4); }
.text-primary{
    color:#0f766e !important;
}

/* Responsive */
@media (max-width: 991.98px) {
  .sidebar { flex: 0 0 auto; position: fixed; z-index: 1040; left: -220px; transition: left .2s; height: 100vh; }
  .sidebar.show { left: 0; }
  .sidebar-close-btn { display: none; position: fixed; top: .6rem; left: calc(200px + .6rem); right: auto; z-index: 1045; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; padding: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 50%; box-shadow: 0 2px 8px rgba(15,23,42,.14); color: #0f172a; font-size: 1.15rem; line-height: 1; transition: left .2s, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
  #sidebar.show .sidebar-close-btn { display: flex; }
  .sidebar-close-btn i { display: inline-flex; }
  .sidebar-close-btn:hover, .sidebar-close-btn:focus { background: #f8fafc; border-color: #cbd5e1; box-shadow: 0 6px 16px rgba(15,23,42,.22); transform: scale(1.06); }
  .sidebar-close-btn:active { transform: scale(.96); }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 1035; }
  .sidebar.show ~ .sidebar-backdrop, body.sidebar-open .sidebar-backdrop { display: block; }
}

/* Print */
@media print {
  .no-print, nav, aside, .btn { display: none !important; }
  main { padding: 0 !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 0; }
}

/* v3 additions */
.lov-spinner {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(15,23,42,.35); z-index: 1090;
}
.shop-logo {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
  background: #fff; padding: 4px; border: 1px solid var(--line);
}
.shop-logo-lg { width: 96px; height: 96px; border-radius: 16px; }
.logo-placeholder {
  width: 40px; height: 40px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); font-weight:700;
}
.form-floating > label { color: var(--muted); }
.pi-row td { vertical-align: middle; }
.pi-suggest { position: absolute; max-height: 240px; overflow: auto; min-width: 260px; }
.pi-suggest.show { display: block; }
.col-med { position: relative; min-width: 220px; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.stat-card .stat-label { color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .5px; }
.progress { height: 22px; border-radius: 12px; }
.progress-bar { font-weight: 600; }


.btn:focus,
.btn:focus-visible,
.btn:active,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible{
    outline: none !important;
    box-shadow: none !important;
}

.btn{
    --bs-btn-focus-shadow-rgb: 0,0,0;
}
/* ---------- POS (Sale) screen ---------- */
:root{
  --pos-green:#0f766e;
  --pos-green-dark:#0b5b55;
  --pos-green-soft:#e6f7f5;
  --pos-line:#e4e8ee;
  --pos-label:#6b7280;
}
.pos-page{background:#f4f6f9;padding:4px}
.pos-card{border:1px solid var(--pos-line);border-radius:14px;box-shadow:0 1px 3px rgba(16,24,40,.06);background:#fff}
.pos-title{font-weight:700;color:var(--pos-green);display:flex;align-items:center;gap:8px}
.pos-title .bi{color:var(--pos-green)}
.pos-history{border-radius:10px;font-weight:600;color:#344054;border-color:var(--pos-line);background:#fff}
.pos-history:hover{background:#f8fafc;color:#111827;border-color:#cbd5e1}
.pos-btn-green{background:var(--pos-green);border-color:var(--pos-green);color:#fff;border-radius:10px;font-weight:600}
.pos-btn-green:hover,.pos-btn-green:focus{background:var(--pos-green-dark);border-color:var(--pos-green-dark);color:#fff}
.pos-topbar .form-control,.pos-topbar .form-select{border-radius:10px;border-color:var(--pos-line)}
.pos-invoice{background:var(--pos-green-soft);border-color:var(--pos-green-soft);color:var(--pos-green-dark)}
.pos-invoice:focus{background:var(--pos-green-soft)}
.pos-search{border:1px solid var(--pos-line);border-radius:12px;overflow:hidden}
.pos-search .form-control,.pos-search .input-group-text{border:0;box-shadow:none}
.pos-search-icon{background:var(--pos-green-soft);color:var(--pos-green);padding-left:18px;padding-right:18px}
.pos-search-input{height:56px;font-size:1rem}
.search-results{position:absolute;z-index:1055;left:0;right:0;top:calc(100% + 4px);max-height:340px;overflow:auto;background:#fff;border:1px solid var(--pos-line);border-radius:12px;box-shadow:0 8px 24px rgba(16,24,40,.12)}
.search-results .item,.search-results .sr-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid #f2f4f7}
.search-results .item:last-child,.search-results .sr-item:last-child{border-bottom:0}
.search-results .item.active,.search-results .item:hover,.search-results .sr-item.active,.search-results .sr-item:hover{background:var(--pos-green-soft)}
.pos-table-wrap{min-height:340px;border:1px solid var(--pos-line);border-radius:12px;overflow:auto}
.pos-table{margin-bottom:0}
.pos-table thead th{background:#0f766e;color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;vertical-align:middle;border:0;padding:14px 8px}
.pos-table tbody td{vertical-align:middle;border-color:var(--pos-line)}
.pos-table tbody tr:last-child td{border-bottom:0}
.pos-table tbody td{padding:10px 6px}
.pos-table input{min-height:36px;border-radius:8px;border-color:var(--pos-line);text-align:center;padding-left:4px;padding-right:4px;font-size:.85rem}
.pos-table .pos-sub{font-weight:700}
.pos-table td.pos-item{min-width:200px}
.pos-item .pos-name{font-weight:700;color:#101828;white-space:nowrap;font-size:.85rem}
.pos-item .pos-meta{font-size:.75rem;color:#8a94a6;white-space:nowrap}
.pos-stock{font-size:.75rem;color:#667085;display:block;white-space:nowrap}
.pos-stock,.pos-stock.low{color:#d92d20;font-weight:700}
.pos-del{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0;font-size:.75rem}
.pos-empty td{height:280px}
/* summary pills */
.pos-sum-row{margin-bottom:14px;border:1px solid var(--pos-line);border-radius:10px;overflow:hidden}
.pos-sum-row>.form-control,.pos-sum-row>.form-select,.pos-sum-row>.input-group-text{border:0;box-shadow:none;background:#fff}
.pos-sum-row>.form-control:not(:first-child),.pos-sum-row>.form-select:not(:first-child){border-left:1px solid var(--pos-line)}
.pos-sum-label{background:#f7f8fa;color:var(--pos-label);font-size:.72rem;font-weight:700;letter-spacing:.05em;min-width:112px}
.pos-cur{font-weight:700;margin-right:2px}
.pos-val{font-size:1.02rem;font-weight:700}
.pos-save .bi{margin-right:8px}
.pos-save{font-size:1.1rem;font-weight:700;padding:.8rem;border-radius:12px;margin-top:18px !important;background:#0f766e;border:0;color:#fff}
.pos-save:hover,.pos-save:focus,.pos-save:active{background:#0d5d56;color:#fff}

.input-group-lg > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
    font-size: 1.1rem;
}



@media (max-width:1199.98px){
  .pos-table{min-width:780px}
}

/* ---- POS searchable customer picker ---- */
.pos-cust .search-results{z-index:1060}
.pos-cust .search-results .item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-results .pos-cust-new{font-weight:700;color:#0f766e;background:#f8fafc}
.search-results .pos-cust-new.active,.search-results .pos-cust-new:hover{background:var(--pos-green-soft)}

/* ---- POS compact scale (zoom-out): keeps the same layout, smaller controls ---- */
.pos-page{font-size:.9rem}
.pos-page .form-control-lg,
.pos-page .btn-lg,
.pos-page .input-group-lg>.form-control,
.pos-page .input-group-lg>.form-select,
.pos-page .input-group-lg>.input-group-text,
.pos-page .input-group-lg>.btn{font-size:.9rem;padding:.45rem .7rem;border-radius:9px;min-height:40px}
.pos-page .pos-title{font-size:1rem}
.pos-page .card-body{padding:.85rem !important}
.pos-search-input{height:44px;font-size:.92rem}
.pos-search-icon{padding-left:14px;padding-right:14px}
.pos-table thead th{font-size:.7rem;padding:8px 5px}
.pos-table tbody td{padding:6px 5px}
.pos-table input{min-height:32px;font-size:.82rem;border-radius:8px;padding-left:3px;padding-right:3px}
.pos-table td.pos-item{min-width:170px}
.pos-item .pos-name{font-size:.8rem}
.pos-item .pos-meta,.pos-stock{font-size:.7rem}
.pos-del{width:20px;height:20px;font-size:.7rem}
.pos-table-wrap{min-height:260px}
.pos-empty td{height:200px}
.pos-cart{max-height:56vh}
.pos-sum-row{margin-bottom:9px;border-radius:9px}
.pos-sum-label{font-size:.66rem;min-width:96px}
.pos-val{font-size:.94rem}
.pos-save{font-size:.98rem;padding:.6rem;margin-top:12px !important;border-radius:10px}
.pos-page .search-results{max-height:290px}
.pos-page .search-results .item,.pos-page .search-results .sr-item{padding:8px 12px;font-size:.86rem}

/* ---- Purchase grid: compact columns, no special BOX/PCS highlight ---- */
.pos-table th,.pos-table td{padding-left:4px;padding-right:4px}
.pos-upb-cell{font-size:.85rem;color:#475467;background:transparent}
.pos-del-btn{width:24px;height:24px;padding:0;line-height:1;font-size:.8rem;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.pos-table input[type="date"]{font-size:.72rem;padding-left:2px;padding-right:1px;min-width:64px}
.pos-table input[data-f="boxes"],.pos-table input[data-f="loose"]{min-width:46px;width:100%;text-align:center;padding-left:1px;padding-right:1px;font-size:.8rem}
.pos-table input[type="number"]::-webkit-outer-spin-button,
.pos-table input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pos-table input[type="number"]{-moz-appearance:textfield;appearance:textfield}
@media (max-width:1400px){
  .pos-table input{min-height:32px;font-size:.8rem}
  .pos-table thead th{font-size:.58rem;padding:8px 3px}
  .pos-table tbody td{padding:5px 3px}
}
/* ---- Purchase/Sale table: fixed layout only on wide screens ---- */
@media (min-width:1400px){
  .pos-table-wrap{overflow-x:visible}
  .pos-table{table-layout:fixed;width:100%;min-width:0}
  .pos-table-wrap::-webkit-scrollbar{display:none}
}

/* ---- Purchase summary panel: compact so the page fits one screen ---- */
.pos-side-compact .pos-sum-row{margin-bottom:6px;border-radius:8px}
.pos-side-compact .pos-sum-label{min-width:84px;font-size:.62rem}
.pos-side-compact .input-group-lg>.form-control,
.pos-side-compact .input-group-lg>.form-select,
.pos-side-compact .input-group-lg>.input-group-text{font-size:.82rem;padding:.3rem .5rem;min-height:34px}
.pos-side-compact .pos-val{font-size:.86rem}
.pos-side-compact .pos-save{font-size:.9rem;padding:.45rem;margin-top:8px !important;border-radius:9px}
.pos-side-compact .btn-outline-success{font-size:.85rem;padding:.4rem;border-radius:9px;margin-top:6px !important}
.pos-side-compact .pos-cur{font-size:.8rem}
.pos-side-compact .pos-sum-row>.form-control,
.pos-side-compact .pos-sum-row>.form-select{padding-top:.3rem;padding-bottom:.3rem}
@media (max-width:1399.98px){
  .pos-side-compact .pos-sum-label{min-width:76px;font-size:.6rem;letter-spacing:.03em}
  .pos-side-compact .input-group-lg>.form-control,
  .pos-side-compact .input-group-lg>.form-select,
  .pos-side-compact .input-group-lg>.input-group-text{font-size:.78rem;padding:.25rem .4rem;min-height:32px}
  .pos-side-compact .pos-val{font-size:.82rem}
}


/* ---- POS: rate above the batch MRP ---- */
.pos-num.over-mrp{border-color:#d92d20 !important;color:#d92d20;font-weight:700;background:#fef3f2}
.pos-mrp-note{font-size:.72rem;color:#d92d20;font-weight:600;display:block;margin-top:2px}


/* ---- Small/medium screen fix: POS (New Sale) & Purchase item grids --------
   The wide-screen rules force table-layout:fixed + overflow-x:visible, which on
   a phone OR on a laptop (where the 200px sidebar eats the width) squeezes the
   ITEM / CARTON columns until the text breaks apart and the headers overlap.
   Below 1400px we restore natural column widths and let the grid scroll
   horizontally instead. -------------------------------------------------- */
@media (max-width: 1399.98px){
  .pos-table-wrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .pos-table-wrap::-webkit-scrollbar{display:block;height:6px}
  .pos-table-wrap::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px}

  .pos-table{table-layout:auto !important;width:auto;min-width:100%}
  .pos-table.pos-table-sale{min-width:760px}
  .pos-table.pos-table-purchase{min-width:1060px}

  .pos-table thead th{white-space:nowrap;font-size:.62rem;padding:8px 6px}
  .pos-table tbody td{padding:6px}

  /* item cell: readable, wraps as words - never one letter per line */
  .pos-table td.pos-item,
  .pos-table.pos-table-purchase tbody td:nth-child(2){min-width:170px;max-width:230px;white-space:normal;word-break:normal;overflow-wrap:anywhere}
  .pos-item .pos-name{white-space:normal;line-height:1.25;font-size:.8rem}
  .pos-item .pos-meta,.pos-stock{white-space:normal;line-height:1.2;font-size:.68rem}
  .pos-del{width:22px;height:22px;font-size:.7rem}

  /* inputs keep a usable tap width so they cannot stack on top of each other */
  .pos-table input{min-width:56px;min-height:34px;font-size:.82rem;padding-left:3px;padding-right:3px}
  .pos-table input[data-f="boxes"],
  .pos-table input[data-f="loose"]{min-width:52px;width:52px;font-size:.82rem}
  .pos-table input[data-f="batch"]{min-width:88px}
  .pos-table input[type="date"]{min-width:124px;font-size:.75rem;padding-left:6px;padding-right:4px}
  .pos-table input[data-f="cost"],
  .pos-table input[data-f="sale"],
  .pos-table input[data-f="mrp"],
  .pos-table input[data-f="rate"]{min-width:68px}
  .pos-del,.pos-del-btn{flex:0 0 auto}
}

@media (max-width: 575.98px){
  .pos-page{padding:2px}
  .pos-page .card-body{padding:.6rem !important}
  .pos-table.pos-table-sale{min-width:700px}
  .pos-table thead th{font-size:.58rem}
}

/* Sidebar collapsible groups */
.sidebar .nav-link.nav-parent { cursor: pointer; }
.sidebar .nav-link.nav-parent .nav-caret {
  width: auto;
  font-size: .8rem;
  margin-left: auto;
  transition: transform .2s ease;
}
.sidebar .nav-link.nav-parent.collapsed .nav-caret { transform: rotate(-90deg); }
.sidebar .nav-sub { padding-left: 10px; margin: 1px 0; border-left: 1px solid #e5e7eb; margin-left: 16px; }
.sidebar .nav-sub .nav-link { font-size: .82rem; padding: 5px 8px; margin: 1px 4px; }
.sidebar .nav-sub .nav-sub { margin-left: 12px; }

/* ---- Desktop fix: Purchase grid column widths -----------------------------
   table-layout:fixed shared the width evenly, so ITEM got a big empty gap on
   its right while QTY (PCS) / SUB TOTAL numbers wrapped or ran off the edge.
   Explicit widths + nowrap numbers keep every value on one line. --------- */
@media (min-width: 1400px){
  .pos-table.pos-table-purchase{table-layout:fixed;width:100%}
  .pos-table.pos-table-purchase th:nth-child(1),
  .pos-table.pos-table-purchase td:nth-child(1){width:34px}
  .pos-table.pos-table-purchase th:nth-child(2),
  .pos-table.pos-table-purchase td:nth-child(2){width:22%}
  .pos-table.pos-table-purchase th:nth-child(3),
  .pos-table.pos-table-purchase td:nth-child(3){width:7%}
  .pos-table.pos-table-purchase th:nth-child(4),
  .pos-table.pos-table-purchase td:nth-child(4){width:7.5%}
  .pos-table.pos-table-purchase th:nth-child(5),
  .pos-table.pos-table-purchase td:nth-child(5){width:5.5%}
  .pos-table.pos-table-purchase th:nth-child(6),
  .pos-table.pos-table-purchase td:nth-child(6){width:5.5%}
  .pos-table.pos-table-purchase th:nth-child(7),
  .pos-table.pos-table-purchase td:nth-child(7){width:6.5%}
  .pos-table.pos-table-purchase th:nth-child(8),
  .pos-table.pos-table-purchase td:nth-child(8){width:8%}
  .pos-table.pos-table-purchase th:nth-child(9),
  .pos-table.pos-table-purchase td:nth-child(9){width:7%}
  .pos-table.pos-table-purchase th:nth-child(10),
  .pos-table.pos-table-purchase td:nth-child(10){width:7.5%}
  .pos-table.pos-table-purchase th:nth-child(11),
  .pos-table.pos-table-purchase td:nth-child(11){width:7%}
  .pos-table.pos-table-purchase th:nth-child(12),
  .pos-table.pos-table-purchase td:nth-child(12){width:7%}
  .pos-table.pos-table-purchase th:nth-child(13),
  .pos-table.pos-table-purchase td:nth-child(13){width:10%}

  /* numbers never wrap or bleed past the last column */
  .pos-table.pos-table-purchase tbody td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem}
  .pos-table.pos-table-purchase tbody td:nth-child(7),
  .pos-table.pos-table-purchase tbody td:nth-child(13){font-size:.78rem;text-align:center}
  .pos-table.pos-table-purchase thead th:nth-child(7),
  .pos-table.pos-table-purchase thead th:nth-child(13){text-align:center}
  .pos-table.pos-table-purchase input{width:100%;min-width:0}

  /* item cell uses the space it has - no dead gap after the name */
  .pos-table.pos-table-purchase td:nth-child(2){white-space:normal;overflow:visible}
  .pos-table.pos-table-purchase .pos-name{white-space:normal;line-height:1.2}
}

/* ---- Purchase grid: proportional field sizes (all breakpoints) ---- */
.pos-table.pos-table-purchase input{
  width:100%;
  height:32px;
  font-size:.8rem;
  padding:.2rem .35rem;
  text-align:center !important;
  font-variant-numeric:tabular-nums;
}
.pos-table.pos-table-purchase input[data-f="batch"]{max-width:88px;min-width:0}
.pos-table.pos-table-purchase .exp-text{max-width:88px;min-width:0}
.pos-table.pos-table-purchase input[data-f="boxes"],
.pos-table.pos-table-purchase input[data-f="loose"]{max-width:64px;min-width:0;width:100%}
.pos-table.pos-table-purchase input[data-f="mrp_box"]{max-width:92px}
.pos-table.pos-table-purchase input[data-f="pdisc"]{max-width:76px}

/* every editable box sits centered in its own column */
.pos-table.pos-table-purchase tbody td > input,
.pos-table.pos-table-purchase tbody td > .exp-wrap{margin-left:auto;margin-right:auto}
.pos-table.pos-table-purchase .exp-wrap{width:100%;align-items:center}

/* header + value columns share one centered rhythm (ITEM stays left) */
.pos-table.pos-table-purchase thead th,
.pos-table.pos-table-purchase tbody td{text-align:center;vertical-align:middle}
.pos-table.pos-table-purchase thead th:nth-child(2),
.pos-table.pos-table-purchase tbody td:nth-child(2){text-align:left}
.pos-table.pos-table-purchase tbody td{font-variant-numeric:tabular-nums}

/* long computed numbers shrink instead of breaking the layout */
.pos-table.pos-table-purchase tbody td:nth-child(10),
.pos-table.pos-table-purchase tbody td:nth-child(11),
.pos-table.pos-table-purchase tbody td:nth-child(12),
.pos-table.pos-table-purchase tbody td:nth-child(13){font-size:.78rem;letter-spacing:-.2px}

/* hide number spinners so the numeric fields keep their real width */
.pos-table.pos-table-purchase input[type=number]::-webkit-outer-spin-button,
.pos-table.pos-table-purchase input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pos-table.pos-table-purchase input[type=number]{-moz-appearance:textfield}

/* PC/laptop view: show native spinners only for BOX/PCS quantity inputs */
@media (min-width:1024px){
  .pos-table.pos-table-sale input[data-f="boxes"]::-webkit-outer-spin-button,
  .pos-table.pos-table-sale input[data-f="boxes"]::-webkit-inner-spin-button,
  .pos-table.pos-table-sale input[data-f="loose"]::-webkit-outer-spin-button,
  .pos-table.pos-table-sale input[data-f="loose"]::-webkit-inner-spin-button,
  .pos-table.pos-table-purchase input[data-f="boxes"]::-webkit-outer-spin-button,
  .pos-table.pos-table-purchase input[data-f="boxes"]::-webkit-inner-spin-button,
  .pos-table.pos-table-purchase input[data-f="loose"]::-webkit-outer-spin-button,
  .pos-table.pos-table-purchase input[data-f="loose"]::-webkit-inner-spin-button{-webkit-appearance:auto;margin:0}
  .pos-table.pos-table-sale input[data-f="boxes"],
  .pos-table.pos-table-sale input[data-f="loose"],
  .pos-table.pos-table-purchase input[data-f="boxes"],
  .pos-table.pos-table-purchase input[data-f="loose"]{-moz-appearance:auto;appearance:auto}
}

/* ---- Summary panel polish (Sale + Purchase, identical look) ---- */
.pos-side .pos-card{
  border-radius:16px;
  border:1px solid #e7ebf1;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdfd 100%);
  box-shadow:0 6px 18px rgba(16,24,40,.06);
}
.pos-side-compact .pos-sum-row{
  border:1px solid #e7ebf1;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pos-side-compact .pos-sum-row:focus-within{
  border-color:var(--pos-green);
  box-shadow:0 0 0 3px rgba(15,118,110,.12);
}
.pos-side-compact .pos-sum-label{
  background:#f4f7f8;
  color:#5b6675;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-right:1px solid #eef1f5 !important;
  align-items:center;
}
.pos-side-compact .pos-val{color:#0f172a;font-weight:800}
.pos-side-compact .pos-cur{color:#0f766e}

/* key rows get gentle emphasis */
.pos-side-compact .pos-sum-row:has(#sum_payable){
  border-color:#bfe3de;
  background:linear-gradient(90deg,#f2fbfa,#ffffff);
}
.pos-side-compact .pos-sum-row:has(#sum_payable) .pos-sum-label{background:#e6f7f5;color:#0b5b55}
.pos-side-compact .pos-sum-row:has(#sum_payable) .form-control{background:transparent}
.pos-side-compact .pos-sum-row:has(#sum_payable) .pos-val{color:#0b5b55;font-size:.95rem}
.pos-side-compact .pos-sum-row:has(#sum_due) .pos-sum-label,
.pos-side-compact .pos-sum-row:has(#sum_prev_due) .pos-sum-label,
.pos-side-compact .pos-sum-row:has(#sum_balance) .pos-sum-label{background:#fef4f3;color:#b42318}

.pos-side-compact .pos-save{
  background:#0f766e;
  box-shadow:none;
  letter-spacing:.02em;
}
.pos-side-compact .pos-save:hover{box-shadow:0 6px 16px rgba(15,118,110,.28)}
.pos-side-compact .btn-outline-success{
  color:#0f766e;border-color:#bfe3de;background:#fff;font-weight:600;
}
.pos-side-compact .btn-outline-success:hover{background:#f2fbfa;color:#0b5b55;border-color:#0f766e}

/* ---- Summary panel: extra polish (v6) ---- */
.pos-side .pos-card{
  padding:12px !important;
  border-radius:18px;
  border:1px solid #e3e9ef;
  background:
    radial-gradient(120% 60% at 100% 0%,rgba(23,179,163,.07) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#ffffff 0%,#f9fcfc 100%);
  box-shadow:0 10px 28px rgba(16,24,40,.08),0 1px 0 #fff inset;
}
.pos-side-compact .pos-sum-row{
  margin-bottom:7px;
  border-radius:11px;
  border-color:#e6ebf1;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.pos-side-compact .pos-sum-row:hover{border-color:#cfe3e0;box-shadow:0 3px 10px rgba(16,24,40,.07)}
.pos-side-compact .pos-sum-label{
  background:linear-gradient(180deg,#f7fafb,#eef3f5);
  color:#55616f;font-size:.61rem;letter-spacing:.06em;
}
.pos-side-compact .pos-val,
.pos-side-compact .pos-sum-row .form-control{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.pos-side-compact .pos-sum-row .form-control{color:#334155}
.pos-side-compact .pos-sum-row .form-control::placeholder{color:#aab4c0}

/* PAYABLE: hero row */
.pos-side-compact .pos-sum-row:has(#sum_payable){
  position:relative;
  border-color:#a9dcd5;
  background:linear-gradient(90deg,#eafaf7,#ffffff 70%);
  box-shadow:0 3px 12px rgba(15,118,110,.12);
}
.pos-side-compact .pos-sum-row:has(#sum_payable)::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#0f766e,#17b3a3);
}
.pos-side-compact .pos-sum-row:has(#sum_payable) .pos-sum-label{
  background:linear-gradient(180deg,#e2f6f3,#d6f0ec);color:#0b5b55
}
.pos-side-compact .pos-sum-row:has(#sum_payable) .pos-val{font-size:1rem;letter-spacing:-.01em}

/* DUE / SUPPLIER DUE / BALANCE: soft alert tone */
.pos-side-compact .pos-sum-row:has(#sum_due),
.pos-side-compact .pos-sum-row:has(#sum_prev_due),
.pos-side-compact .pos-sum-row:has(#sum_balance){
  border-color:#f6d9d5;background:linear-gradient(90deg,#fff6f5,#ffffff 70%);
}
.pos-side-compact .pos-sum-row:has(#sum_due) .pos-sum-label,
.pos-side-compact .pos-sum-row:has(#sum_prev_due) .pos-sum-label,
.pos-side-compact .pos-sum-row:has(#sum_balance) .pos-sum-label{
  background:linear-gradient(180deg,#fdecea,#fbe2df);color:#b42318
}
.pos-side-compact .pos-sum-row:has(#sum_due) .pos-val,
.pos-side-compact .pos-sum-row:has(#sum_prev_due) .pos-val,
.pos-side-compact .pos-sum-row:has(#sum_balance) .pos-val{color:#b42318}

/* MODE select */
.pos-side-compact .pos-sum-row .form-select{color:#334155;font-weight:600}

/* Buttons */
.pos-side-compact .pos-save{
  border:0;border-radius:11px;font-weight:800;
  background:#0f766e;
  box-shadow:none;
  transition:transform .12s ease,box-shadow .18s ease,filter .18s ease;
}
.pos-side-compact .pos-save:hover{filter:brightness(1.05);box-shadow:0 9px 22px rgba(15,118,110,.32)}
.pos-side-compact .pos-save:active{transform:translateY(1px);box-shadow:0 4px 10px rgba(15,118,110,.24)}
.pos-side-compact .btn-outline-success{
  border-radius:11px;border-color:#cfe6e2;color:#0f766e;font-weight:700;
}
.pos-side-compact .btn-outline-success:hover{background:#effaf8;border-color:#0f766e}


/* ---- Purchase grid: Month+Year expiry cell (keyboard-friendly) ---- */
.exp-wrap { display: flex; flex-direction: column; gap: 2px; }
.exp-wrap .exp-text { font-weight: 600; text-align: center; letter-spacing: 0; max-width: 84px; font-size: .78rem; padding-left: .25rem; padding-right: .25rem; }
.exp-wrap .exp-text.is-invalid { border-color: var(--bs-danger, #dc3545); background: rgba(220,53,69,.06); }


/* ---- POS cart: TYPE (Sale/Return) select fits inside its column ---- */
.pos-table td .pos-ltype,
.pos-page .pos-table td .pos-ltype{
  width:100%;min-width:0;max-width:100%;
  font-size:.75rem;font-weight:600;min-height:32px;
  padding:.2rem 1.15rem .2rem .35rem;
  border-radius:8px;border-color:var(--pos-line);
  background-position:right .28rem center;background-size:11px 9px;
  text-overflow:ellipsis;line-height:1.15;
}
.pos-table td .pos-ltype:focus{box-shadow:none;border-color:#0f766e}
.pos-table th.pos-th-type,.pos-table td.pos-td-type{width:88px;min-width:88px}
@media (max-width:1400px){
  .pos-table td .pos-ltype,
  .pos-page .pos-table td .pos-ltype{font-size:.7rem;padding:.15rem 1rem .15rem .25rem;background-position:right .2rem center}
  .pos-table th.pos-th-type,.pos-table td.pos-td-type{width:82px;min-width:82px}
}
@media (max-width:767.98px){
  .pos-table td .pos-ltype,
  .pos-page .pos-table td .pos-ltype{font-size:.68rem;min-height:34px;padding:.15rem .95rem .15rem .22rem}
  .pos-table th.pos-th-type,.pos-table td.pos-td-type{width:78px;min-width:78px}
  /* summary rows keep label + value side by side without clipping the amount */
  .pos-sum-row>.input-group-text.pos-sum-label{min-width:82px;flex:0 0 auto}
  .pos-sum-row>.form-control,.pos-sum-row>.form-select{min-width:0;flex:1 1 auto}
  .pos-val{font-size:.9rem}
}

/* mobile: keep the TYPE select readable (full word visible), never squeezed to one letter */
@media (max-width:575.98px){
  .pos-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pos-table th.pos-th-type,.pos-table td.pos-td-type{width:74px;min-width:74px;padding-left:.15rem;padding-right:.15rem}
  .pos-table td .pos-ltype,
  .pos-page .pos-table td .pos-ltype{
    font-size:.66rem;min-height:32px;
    padding:.15rem .85rem .15rem .2rem;
    background-position:right .15rem center;background-size:9px 7px;
    text-overflow:clip;
  }
}

/* ---------- Pagination (brand themed) ---------- */
.pagination{
  --bs-pagination-color: var(--ink-2);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--line);
  --bs-pagination-border-radius: 10px;
  --bs-pagination-hover-color: var(--brand-dark);
  --bs-pagination-hover-bg: var(--brand-soft);
  --bs-pagination-hover-border-color: var(--brand);
  --bs-pagination-focus-color: var(--brand-dark);
  --bs-pagination-focus-bg: var(--brand-soft);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(15,118,110,.18);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--brand);
  --bs-pagination-active-border-color: var(--brand);
  --bs-pagination-disabled-color: var(--muted);
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: var(--line);
  gap: 4px;
}
.pagination .page-link{
  font-weight: 600;
  border-radius: 10px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pagination .page-item.active .page-link{
  box-shadow: 0 1px 3px rgba(15,118,110,.25);
}

/* ---------- Action buttons (New Sale / Filter / Reset) ---------- */
/* "+ New Sale" -> brand teal */
.btn-success,
.btn-new-sale{
  background:#0f766e;
  border-color:#0f766e;
  color:#fff;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-new-sale:hover,
.btn-new-sale:focus,
.btn-new-sale:active{
  background:#115e59;
  border-color:#115e59;
  color:#fff;
}

/* "Filter" -> same neutral look as "Reset" */
.btn-filter,
.btn-outline-secondary,
.btn-light{
  background:#fff;
  border-color:var(--line, #e5e7eb);
  color:var(--ink-2, #475569);
  font-weight:500;
}
.btn-filter:hover,
.btn-filter:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-light:hover,
.btn-light:focus{
  background:#f8fafc;
  border-color:#cbd5e1;
  color:var(--ink, #0f172a);
}

/* ================================================================
   FIX: click/tap korle button e blue color (browser + Bootstrap default)
   Added: 2026-08-20
   ================================================================ */

/* 1) Bootstrap er default blue focus-ring rgb ke brand green kora */
.btn,
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning,
.btn-info, .btn-light, .btn-dark, .btn-link,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info,
.btn-outline-light, .btn-outline-dark,
.btn-close, .dropdown-toggle, .page-link, .nav-link {
  --bs-btn-focus-shadow-rgb: 15,118,110;
  --bs-focus-ring-color: rgba(15,118,110,.25);
  --bs-link-color-rgb: 15,118,110;
  -webkit-tap-highlight-color: transparent;
}

/* 2) Mobile tap er blue flash bondho (sob clickable element) */
html,
a, button, input, select, textarea, label,
.btn, .nav-link, .page-link, .dropdown-item, .list-group-item,
[role="button"], [onclick], .card, tr, td, th {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* 3) Mouse click e kono ring/outline na */
.btn:focus,
.btn:active,
.btn:active:focus,
button:focus,
a.btn:focus,
a:focus,
.btn-close:focus,
.dropdown-toggle:focus,
.dropdown-item:focus,
.dropdown-item:active,
.nav-link:focus,
.page-link:focus,
.accordion-button:focus,
.list-group-item:focus,
.navbar-toggler:focus,
.input-group > .btn:focus,
[role="button"]:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

/* 4) Keyboard user der jonno accessible ring — blue na, brand green */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
.btn-close:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(15,118,110,.55) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* 5) Active / toggled / checked state e default blue bg-border sorano */
.btn.active,
.btn:active,
.btn.show,
.btn-check:checked + .btn,
.btn-check:focus + .btn,
.btn-check:active + .btn,
.show > .btn.dropdown-toggle,
.show > .btn-primary.dropdown-toggle,
.show > .btn-secondary.dropdown-toggle,
.show > .btn-outline-primary.dropdown-toggle,
.show > .btn-outline-secondary.dropdown-toggle {
  box-shadow: none !important;
  outline: 0 !important;
}

.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--brand, #0f766e) !important;
  border-color: var(--brand, #0f766e) !important;
  color: #fff !important;
}

.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary:active {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: var(--ink, #0f172a) !important;
}

/* 6) Bootstrap er baki blue variant gulo brand color e */
.btn-primary,
.btn-info {
  background-color: var(--brand, #0f766e);
  border-color: var(--brand, #0f766e);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: var(--brand-dark, #0b5b55) !important;
  border-color: var(--brand-dark, #0b5b55) !important;
  color: #fff !important;
}

.btn-link { color: var(--brand, #0f766e); }
.btn-link:hover, .btn-link:focus { color: var(--brand-dark, #0b5b55); }

/* 7) Form control / modal / table focus e default blue na */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand, #0f766e);
  box-shadow: 0 0 0 .18rem rgba(15,118,110,.18);
}
.form-check-input:checked {
  background-color: var(--brand, #0f766e);
  border-color: var(--brand, #0f766e);
}
:root { accent-color: var(--brand, #0f766e); }

/* 8) Text selection er blue highlight (double-click e ase) softer brand tint */
.btn::selection, .btn *::selection { background: transparent; }
.btn, .nav-link, .page-link, .dropdown-item, [role="button"] {
  user-select: none;
  -webkit-user-select: none;
}

/* =========================================================================
   Sidebar — branded header + flat sectioned menu  (v2 patch)
   ========================================================================= */
.sidebar {
  width: 200px;
  flex: 0 0 200px;
  padding: 0 0 12px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-head {
  position: relative;
  background: linear-gradient(160deg, #0f9488 0%, #0f766e 100%);
  color: #fff;
  padding: 14px 12px 16px;
  border-radius: 0 0 14px 14px;
}
.sidebar-logo {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(2,44,40,.25);
}
.sidebar-logo img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-name {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.sidebar-sub {
  font-size: .78rem;
  color: rgba(255,255,255,.82);
  margin-top: 2px;
}
.sidebar-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
}
.sidebar-chip i { font-size: .78rem; }

.sidebar .sidebar-nav { padding: 6px 0 0; }
.sidebar .nav-section { margin-top: 10px; }
.sidebar .nav-section-label {
  padding: 6px 12px 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #94a3b8;
}
.sidebar .nav-link {
  position: relative;
  color: #334155;
  border-radius: 0;
  margin: 0;
  padding: 9px 12px;
  font-size: .88rem;
  font-weight: 700;
  gap: 10px;
}
.sidebar .nav-link i { width: 20px; font-size: 1.02rem; color: #64748b; }
.sidebar .nav-link:hover { background: #f1f5f9; color: #0f766e; }
.sidebar .nav-link:hover i { color: #0f766e; }
.sidebar .nav-link.active {
  background: #e9f7f3;
  color: #0f766e;
  font-weight: 600;
  box-shadow: none;
}
.sidebar .nav-link.active i { color: #0f766e; }
.sidebar .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #0f766e;
}

@media (max-width: 991.98px) {
  .sidebar { left: -260px; }
  .sidebar.show { left: 0; }
  .sidebar-close-btn {
    display: flex; position: absolute; top: 12px; right: 12px; left: auto;
    width: 2rem; height: 2rem;
    align-items: center; justify-content: center;
    padding: 0;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    box-shadow: none;
    color: #fff;
    font-size: .95rem;
    z-index: 2;
  }
  .sidebar-close-btn:hover, .sidebar-close-btn:focus {
    background: rgba(255,255,255,.32);
    border-color: rgba(255,255,255,.45);
    color: #fff;
    box-shadow: none;
    transform: none;
  }
  .sidebar-close-btn--float {
    position: fixed; top: .6rem; left: calc(200px + .6rem); right: auto;
    background: #fff; border-color: #e2e8f0; color: #0f172a;
  }
  #sidebar.show .sidebar-close-btn { display: flex; }
}
@media (min-width: 992px) {
  .sidebar-close-btn { display: none !important; }
}


/* --- PC: branded sidebar header hidden, collapsible groups --- */
@media (min-width: 992px) {
  .sidebar-head { display: none !important; }
  .sidebar .sidebar-nav { padding-top: 10px; }
}
.sidebar .nav-link.nav-parent { display: flex; align-items: center; font-weight: 600; }
.sidebar .nav-link.nav-parent .nav-caret {
  font-size: .72rem; width: auto; color: #94a3b8;
  transition: transform .18s ease;
}
.sidebar .nav-link.nav-parent.collapsed .nav-caret { transform: rotate(-90deg); }
.sidebar .nav-sub { margin: 0 0 4px 0; padding-left: 0; border-left: 0; }
.sidebar .nav-sub .nav-link { padding: 7px 16px 7px 48px; font-size: .87rem; font-weight: 600; color: #475569; }
.sidebar .nav-sub .nav-link.active { color: #0f766e; }

/* ================= POS mobile cart cards (presentation only) =================
   Below md the cart renders as a compact card list (see renderCards() in pos.js).
   The desktop table markup is untouched, only hidden on small screens. */
.pos-mc-head{padding:2px 2px 0}
.pos-mc-title{font-size:1rem;font-weight:700;color:#0f172a}
.pos-mc-count{display:inline-block;min-width:20px;padding:1px 6px;margin-left:5px;border-radius:999px;background:#eef2f6;color:#475467;font-size:.7rem;font-weight:700;vertical-align:middle}
.pos-mc-add{border:0;background:transparent;color:#0f766e;font-size:.8rem;font-weight:600;padding:2px 4px}
.pos-mc-add .bi{margin-right:3px}

.pos-cart-cards{display:block}
.pos-mc{background:#fff;border-bottom:1px solid #eef1f4;padding:10px 2px 10px}
.pos-mc:last-child{border-bottom:0}
.pos-mc.is-return{background:#fff3cd;border-radius:10px;padding-left:8px;padding-right:8px}
.pos-mc.is-bad{background:#fef3f2;padding-left:8px;padding-right:8px;border-radius:10px}
.pos-mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pos-mc-name{font-size:.88rem;font-weight:700;color:#0f172a;line-height:1.2;flex:1 1 auto}
.pos-mc-sub{font-size:.95rem;font-weight:700;color:#0f766e;white-space:nowrap;flex:0 0 auto}
.pos-mc-sub.neg{color:#b42318}
.pos-mc-mid{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:1px}
.pos-mc-meta,.pos-mc-split{font-size:.72rem;color:#98a2b3}
.pos-mc-split{white-space:nowrap}
.pos-mc-stock{font-size:.74rem;color:#0f766e;font-weight:600;margin-top:1px}
.pos-mc-stock.low{color:#d92d20}

.pos-mc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1.35fr) minmax(0,0.82fr);gap:6px;margin-top:8px}
.pos-mc-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.pos-mc-cell label{font-size:.6rem;font-weight:700;color:#98a2b3;letter-spacing:.03em;text-align:center}
.pos-mc-select{width:100%;height:34px;border:1px solid #e4e7ec;border-radius:8px;padding:0 4px 0 2px;font-size:.8rem;font-weight:600;color:#0f172a;background:#fff}
.pos-mc-select:focus{outline:0;border-color:#0f766e}
.pos-step{display:flex;align-items:center;border:1px solid #e4e7ec;border-radius:10px;overflow:hidden;background:#fff;max-width:100%}
.pos-step-btn{border:0;background:#fff;width:30px;flex:0 0 30px;height:34px;font-size:1rem;color:#344054;line-height:1;padding:0}
.pos-step-btn:active{background:#f2f4f7}
.pos-step-inp{flex:1 1 auto;min-width:0;width:38px;height:34px;border:0;border-left:1px solid #e4e7ec;border-right:1px solid #e4e7ec;text-align:center;font-size:.85rem;font-weight:700;color:#0f172a;padding:0}
.pos-step-inp:focus{outline:0;background:#f8fafc}
.pos-mc-disc{display:flex;align-items:center;gap:2px;border:1px solid #e4e7ec;border-radius:10px;padding:0 6px 0 2px;height:34px;background:#fff;max-width:100%}
.pos-mc-disc input{flex:1 1 auto;min-width:0;width:42px;height:32px;border:0;text-align:right;font-size:.85rem;font-weight:600;color:#0f172a;background:transparent;padding:0}
.pos-mc-disc input:focus{outline:0}
.pos-mc-disc input::-webkit-outer-spin-button,
.pos-mc-disc input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pos-mc-disc input{-moz-appearance:textfield;appearance:textfield}
.pos-mc-disc span{flex:0 0 auto;font-size:.75rem;color:#98a2b3}

.pos-mc-actions{display:flex;justify-content:flex-end;margin-top:6px}
.pos-chip{border-radius:999px;border:1px solid transparent;padding:3px 10px;font-size:.75rem;font-weight:600;background:#fff;line-height:1.3}
.pos-chip.chip-del{border-color:#fecaca;background:#fef2f2;color:#b42318}
.pos-chip.chip-del-sm{padding:2px 8px;font-size:.72rem}
.pos-chip.chip-del-sm .bi{font-size:.72rem;margin-right:3px}
.pos-chip:active{filter:brightness(.97)}
.pos-mc-empty{padding:30px 8px;text-align:center;color:#98a2b3;font-size:.82rem}

@media (min-width:768px){
  .pos-cart-cards,.pos-mc-head{display:none !important}
}

/* POS mobile QR / barcode scan button + reader */
.pos-scan-btn{ flex:0 0 auto; padding-left:14px; padding-right:14px; }
.pos-scan-reader{ width:100%; min-height:240px; border-radius:10px; overflow:hidden; background:#000; }
.pos-scan-reader video{ width:100%!important; height:auto!important; }






@media (min-width: 992px) {
    .sidebar {
        width: 180px !important;
        flex: 0 0 180px !important;
    }
}



/* ---- Sidebar submenu: one line, no side clipping (PC view) ---- */
@media (min-width: 992px) {
  .sidebar {
    width: 216px !important;
    flex: 0 0 216px !important;
  }
  .sidebar .nav-sub .nav-link {
    padding-left: 34px;
    padding-right: 8px;
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sidebar .nav-link {
    padding-left: 12px;
    padding-right: 10px;
    gap: 8px;
  }
}

/* =========================================================================
   Sidebar readability patch (02-09-2026) — sharper, higher-contrast menu text
   Override only; nothing above is removed.
   ========================================================================= */
.sidebar,
.sidebar .nav-link,
.sidebar .nav-section-label {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.sidebar .nav-link {
  color: #0f172a;
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
  padding-top: 10px;
  padding-bottom: 10px;
}

.sidebar .nav-link i {
  color: #475569;
  font-size: 1.05rem;
}

.sidebar .nav-section-label {
  color: #475569;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
  background: #eaf7f4;
  color: #0b5f59;
}
.sidebar .nav-link:hover i,
.sidebar .nav-link:focus i { color: #0b5f59; }

.sidebar .nav-link.active,
.sidebar .nav-link.active span {
  color: #0b5f59;
  font-weight: 700;
}
.sidebar .nav-link.active i { color: #0b5f59; }

.sidebar .nav-link.nav-parent { font-weight: 700; color: #0f172a; }
.sidebar .nav-link .nav-caret { color: #64748b; font-size: .8rem; }

.sidebar .nav-sub .nav-link {
  color: #1e293b;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  padding-top: 8px;
  padding-bottom: 8px;
}
.sidebar .nav-sub .nav-link:hover { color: #0b5f59; }
.sidebar .nav-sub .nav-link.active { color: #0b5f59; font-weight: 700; }

.sidebar-name { color: #fff; }
.sidebar-sub  { color: rgba(255,255,255,.92); }
.sidebar-chip { color: #fff; background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.42); }

/* PC: a little more width so labels are not clipped/ellipsised */
@media (min-width: 992px) {
  .sidebar {
    width: 200px !important;
    flex: 0 0 200px !important;
  }
  .sidebar .nav-link {
    padding-left: 12px;
    padding-right: 10px;
    font-size: .9rem;
  }
  .sidebar .nav-sub .nav-link {
    padding-left: 34px;
    padding-right: 8px;
    font-size: .84rem;
  }
}

/* Mobile drawer: same contrast + comfortable tap targets */
@media (max-width: 991.98px) {
  .sidebar .nav-link { font-size: .96rem; padding-top: 11px; padding-bottom: 11px; }
  .sidebar .nav-sub .nav-link { font-size: .9rem; }
}

/* ---- Save Sale button: solid color (no gradient) ---- */
.pos-save,
.pos-side-compact .pos-save,
button#saveBtn.pos-save{
  background:#0f766e !important;
  background-image:none !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:none !important;
  filter:none !important;
}
.pos-save:hover,.pos-save:focus,.pos-save:active,
.pos-side-compact .pos-save:hover,
.pos-side-compact .pos-save:focus,
.pos-side-compact .pos-save:active,
button#saveBtn.pos-save:hover{
  background:#0d5d56 !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}