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

* { 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: #0f766e !important; color: #fff !important;
  border-radius: 999px; font-weight: 600; padding: 6px 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;
}
.sidebar .nav-link {
  color: var(--ink-2);
  border-radius: 8px;
  margin: 1px 6px;
  padding: 6px 10px;
  font-size: .875rem;
  font-weight: 500;
  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 (medicines 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; }
}

/* 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;
}
.pharmacy-logo {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
  background: #fff; padding: 4px; border: 1px solid var(--line);
}
.pharmacy-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:linear-gradient(90deg,#0f766e,#14b8a6);border:0;color:#fff;box-shadow:0 2px 6px rgba(15,118,110,.25)}
.pos-save:hover,.pos-save:focus,.pos-save:active{background:linear-gradient(90deg,#0b5f59,#0fa295);border:0;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}

/* ---- 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:linear-gradient(90deg,#0f766e,#17b3a3);
  box-shadow:0 4px 12px rgba(15,118,110,.22);
  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:linear-gradient(100deg,#0b6b63,#0f766e 40%,#19bfad);
  box-shadow:0 6px 16px rgba(15,118,110,.26);
  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);
}