/* TajirNova v6.3 - LIST PAGES (Orders/Sales and every table page) */

/* summary cards: same language as dashboard KPI cards */
#content .cards{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin-bottom:16px}
@media (min-width:1280px){#content .cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}}
#content .cards>.card{--k:#2563eb;position:relative;display:block!important;padding:10px 54px 10px 16px!important;min-height:64px;background:#fff!important;border:1px solid var(--line)!important;border-left:6px solid var(--k)!important;border-radius:18px!important;box-shadow:0 1px 2px rgba(15,30,70,.06)!important;overflow:hidden}
#content .cards>.card:before,#content .cards>.card:after{display:none!important}
#content .cards>.card:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(20,45,110,.35)!important}
#content .cards>.card .label{font-size:10.5px!important;font-weight:700;color:var(--muted)!important;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#content .cards>.card .value{font-family:var(--font-head);font-size:19px!important;font-weight:800;color:var(--text)!important;letter-spacing:-.02em;line-height:1.2;margin-top:2px;white-space:nowrap}
#content .cards>.card .hint{font-size:10.5px!important;color:var(--muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#content .cards>.card .tn-card-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px!important;height:32px!important;border-radius:11px!important;animation:none!important;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,0) 60%),var(--k)!important;box-shadow:0 5px 10px -5px var(--k)!important}
#content .cards>.card .tn-card-icon svg{width:17px;height:17px;stroke:#fff}
#content .cards>.card .tn-card-icon:after{display:none!important}
.card .value .ac{display:none!important}
.card .value>span{font:inherit!important;color:inherit!important}

/* panel + toolbar */
#content>.panel{background:#fff;border:1px solid var(--line)!important;border-left:6px solid #2563eb!important;border-radius:18px!important;padding:16px!important;box-shadow:0 1px 2px rgba(15,30,70,.05)}
.table-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.table-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 auto;min-width:0}
.table-filters input,.table-filters select,.table-toolbar>input,.search-row input,.search-row select{height:40px;border:1px solid var(--line)!important;background:var(--soft)!important;border-radius:12px!important;padding:0 12px;font-size:13px;color:var(--text);min-width:0}
.table-filters input:not([type=checkbox]){flex:1 1 240px}
.table-filters select{flex:0 1 auto}
.table-toolbar .btn,.table-filters .btn{height:40px;border-radius:12px}
.table-toolbar .btn.ghost,.table-toolbar .btn.secondary{background:#fff;border:1px solid var(--line);color:var(--text)}

/* table */
#content .table-wrap{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:auto;max-height:calc(100vh - 330px)}
#content .table-wrap .table{border-collapse:separate;border-spacing:0;width:100%}
#content .table-wrap .table thead th{position:sticky;top:0;z-index:2;background:#f3f7fd!important;white-space:nowrap;padding:11px 14px;border-bottom:1px solid var(--line)}
#content .table-wrap .table td{padding:11px 14px;border-bottom:1px solid #edf1f8;vertical-align:middle;font-size:13px}
#content .table-wrap .table tbody tr:last-child td{border-bottom:0}
#content .table-wrap .table td>b:first-child{font-family:var(--font-head);color:var(--primary-dark)}
#content .table-wrap .table td[title]{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* soft action buttons */
.table td .actions,.compact-record-actions{display:flex;flex-wrap:wrap;gap:6px}
.table td .btn.sm{height:30px;padding:0 11px;font-size:12px;font-weight:700;border-radius:9px;box-shadow:none!important;border:1px solid transparent!important;filter:none!important;transform:none!important}
.table td .btn.sm.primary{background:#e3ecff!important;color:#1d4ed8!important}
.table td .btn.sm.secondary{background:#f1eaff!important;color:#6d28d9!important}
.table td .btn.sm.success{background:#e0f7ea!important;color:#0b8a4b!important}
.table td .btn.sm.ghost{background:#eef1f6!important;color:#4b5873!important}
.table td .btn.sm.danger{background:#fde6ea!important;color:#c4243a!important}
.table td .btn.sm:hover{filter:brightness(.96)!important;transform:translateY(-1px)!important}
.table td input[type=checkbox]{width:16px;height:16px;accent-color:#2563eb}

/* phones: every table row becomes a card */
@media (max-width:760px){
  #content .cards{gap:8px!important}
  #content .cards>.card{padding:8px 30px 8px 11px!important;min-height:58px;border-left-width:4px!important;border-radius:14px!important}
  #content .cards>.card .label{font-size:8.5px!important;letter-spacing:.02em}
  #content .cards>.card .value{font-size:13px!important}
  #content .cards>.card .hint{font-size:8.5px!important}
  #content .cards>.card .tn-card-icon{right:6px;top:auto;bottom:7px;transform:none;width:20px!important;height:20px!important;border-radius:7px!important}
  #content .cards>.card .tn-card-icon svg{width:11px;height:11px}
  .card .value .af{display:none!important}
  .card .value .ac{display:inline!important}

  #content>.panel{padding:10px!important;border-left-width:4px!important;border-radius:16px!important}
  .table-filters input,.table-filters select{flex:1 1 100%;width:100%}
  .table-filters select{flex:1 1 calc(50% - 4px)}
  #content .table-wrap{border:0;background:transparent;max-height:none;overflow:visible}
  .table.tn-stack thead{display:none}
  .table.tn-stack,.table.tn-stack tbody{display:block;width:100%}
  .table.tn-stack tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;position:relative;background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:16px;padding:12px 12px 10px 14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(15,30,70,.05)}
  .table.tn-stack tbody td{display:block;padding:0!important;border:0!important;background:transparent!important;max-width:none!important;white-space:normal!important;min-width:0}
  .table.tn-stack td[data-label]:not([data-label=""]):before{content:attr(data-label);display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:1px}
  .table.tn-stack td[data-label=""]{position:absolute;top:12px;right:12px}
  .table.tn-stack td[data-label=""]:before{display:none}
  .table.tn-stack td[data-label="Order"],.table.tn-stack td[data-label="Items"],.table.tn-stack td[data-label="Customer"],.table.tn-stack td[data-label="Actions"],.table.tn-stack td[data-label="Courier / Tracking"],.table.tn-stack td[data-label="Description"],.table.tn-stack td[data-label="Name"],.table.tn-stack td[data-label="Product"],.table.tn-stack td[data-label="Vendor"]{grid-column:1/-1}
  .table.tn-stack td[data-label="Order"]{font-size:15px;padding-right:30px!important}
  .table.tn-stack td[data-label="Order"]:before{display:none}
  .table.tn-stack td[data-label="Items"]{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .table.tn-stack td[data-label="Status"]{justify-self:start}
  .table.tn-stack td[data-label="Actions"]{padding-top:8px!important;border-top:1px dashed var(--line)!important}
  .table.tn-stack td[data-label="Actions"]:before{display:none}
  .table.tn-stack td[data-label="Actions"] .actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .table.tn-stack td[data-label="Actions"] .btn.sm{width:100%;justify-content:center}
}

/* v6.3b - kill old fixed table widths on phones, keep Items on one line on desktop */
#content .table-wrap .table td[title]{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:280px!important}
@media (max-width:760px){
  #content .table-wrap .table.tn-stack,.table.tn-stack{min-width:0!important;width:100%!important;max-width:100%!important;table-layout:auto}
  .table.tn-stack tbody tr{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
  .table.tn-stack tbody td{width:auto!important;overflow-wrap:anywhere}
  .table.tn-stack td[data-label] .actions{max-width:100%}
  #content .table-wrap{overflow-x:hidden}
  .table-filters{max-width:100%}
  .table.tn-stack td[title]{white-space:normal!important;max-width:none!important}
}

/* v6.5 - Sales page: no summary cards (totals live on Dashboard), date filter on top, compact rows */
body[data-page="sales"] #content .cards{display:none!important}

.table-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.table-toolbar>.actions{order:-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.table-toolbar>.actions .btn{height:40px;border-radius:12px;font-weight:700}
.table-toolbar>.actions .btn:first-child{background:var(--primary-soft)!important;border:1px solid #bcd0fb!important;color:var(--primary-dark)!important;padding-left:38px;position:relative;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:18px}
.table-toolbar>.actions .btn.primary{margin-left:auto}
.table-toolbar .table-filters{display:flex;flex-wrap:wrap;gap:8px}

@media (max-width:760px){
  .table-toolbar>.actions{display:grid;grid-template-columns:1fr auto auto;gap:6px}
  .table-toolbar>.actions .btn{height:38px;font-size:12px;padding:0 10px}
  .table-toolbar>.actions .btn:first-child{padding-left:34px}
  .table-toolbar>.actions .btn.primary{grid-column:1/-1;margin-left:0;height:42px;font-size:13px}
  .table-toolbar .table-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .table-toolbar .table-filters::-webkit-scrollbar{display:none}
  .table-toolbar .table-filters input{flex:0 0 100%;order:-1;position:sticky;left:0}
  .table-toolbar .table-filters{display:grid;grid-auto-flow:column;grid-auto-columns:max-content}
  .table-toolbar .table-filters input{grid-column:1/-1;grid-row:1;position:static;width:calc(100vw - 56px)}
  .table-toolbar .table-filters select{grid-row:2;flex:none;width:auto;min-width:118px;height:36px;font-size:12px}

  /* one compact card per sale */
  .table.tn-stack tbody tr:has(td[data-label="Order"]){grid-template-columns:repeat(6,minmax(0,1fr));gap:5px 8px;padding:10px 12px 10px 14px;margin-bottom:8px}
  .table.tn-stack td[data-label=""]{display:none}
  .table.tn-stack td[data-label="Order"]{order:1;grid-column:1/5;font-size:14px;padding-right:0!important}
  .table.tn-stack td[data-label="Status"]{order:2;grid-column:5/7;justify-self:end}
  .table.tn-stack td[data-label="Customer"]{order:3;grid-column:1/5;font-weight:600;color:var(--text);font-size:12.5px}
  .table.tn-stack td[data-label="Date"]{order:4;grid-column:5/7;justify-self:end;font-size:11px;color:var(--muted);align-self:center}
  .table.tn-stack td[data-label="Items"]{order:5;grid-column:1/-1;font-size:11.5px;color:var(--muted);-webkit-line-clamp:1}
  .table.tn-stack td[data-label="Status"]:before,.table.tn-stack td[data-label="Customer"]:before,.table.tn-stack td[data-label="Date"]:before,.table.tn-stack td[data-label="Items"]:before,.table.tn-stack td[data-label="Order"]:before,.table.tn-stack td[data-label="Actions"]:before{display:none!important}
  .table.tn-stack td[data-label="Total"]{order:6;grid-column:1/3}
  .table.tn-stack td[data-label="Due / COD"]{order:7;grid-column:3/5}
  .table.tn-stack td[data-label="Profit"]{order:8;grid-column:5/7}
  .table.tn-stack td[data-label="Received"],.table.tn-stack td[data-label="Courier / Tracking"]{display:none}
  .table.tn-stack td[data-label="Total"],.table.tn-stack td[data-label="Due / COD"],.table.tn-stack td[data-label="Profit"]{background:#f6f9ff!important;border-radius:10px;padding:5px 8px!important;font-size:11.5px;font-weight:700}
  .table.tn-stack td[data-label="Total"] b{font-size:11.5px;color:var(--text)}
  .table.tn-stack td[data-label="Actions"]{order:11;grid-column:1/-1;padding-top:7px!important;border-top:1px dashed var(--line)!important}
  .table.tn-stack td[data-label="Actions"] .actions{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
  .table.tn-stack td[data-label="Actions"] .btn.sm{height:28px;padding:0;font-size:10.5px;border-radius:8px}
}
@media (max-width:760px){
  .table.tn-stack tbody tr:has(td[data-label="Order"]){gap:3px 8px!important;padding:9px 12px 9px 14px!important}
  .table.tn-stack td[data-label="Order"],.table.tn-stack td[data-label="Order"] b{font-size:14px!important}
  .table.tn-stack td[data-label="Status"] .badge{padding:2px 9px;font-size:11px}
  .table.tn-stack td[data-label="Total"]:before,.table.tn-stack td[data-label="Due / COD"]:before,.table.tn-stack td[data-label="Profit"]:before{font-size:8.5px!important}
  .table.tn-stack td[data-label="Total"],.table.tn-stack td[data-label="Due / COD"],.table.tn-stack td[data-label="Profit"],
  .table.tn-stack td[data-label="Total"] b{font-size:12px!important;font-weight:800!important;font-family:var(--font-body);color:var(--text)!important;margin-top:3px}
  .table.tn-stack td[data-label="Items"]{margin-bottom:2px}
}

/* v6.9 - dense single-line rows on desktop/tablet */
@media (min-width:761px){
  #content .table-wrap .table.tn-stack td{white-space:nowrap}
  #content .table-wrap .table.tn-stack td[data-label="Items"],
  #content .table-wrap .table.tn-stack td[data-label="Customer"],
  #content .table-wrap .table.tn-stack td[data-label="Description"]{max-width:240px;overflow:hidden;text-overflow:ellipsis}
  #content .table-wrap .table.tn-stack td[data-label="Actions"] .actions{flex-wrap:nowrap}
  #content .table-wrap .table.tn-stack td[data-label="Order"]{min-width:110px}
}

/* =====================================================================
   v7.0 - slim sale rows (phones) + calm neutral action buttons
   ===================================================================== */
/* neutral action buttons everywhere: white, thin border, coloured text only for View/Delete */
.table td .btn.sm,.table td .btn.sm.primary,.table td .btn.sm.secondary,.table td .btn.sm.success,.table td .btn.sm.ghost,.table td .btn.sm.danger{
  background:#fff!important;border:1px solid var(--line)!important;color:#3d4b6b!important;height:30px;padding:0 11px;border-radius:9px;font-weight:600;box-shadow:none!important}
.table td .btn.sm.primary{color:var(--primary-dark)!important;border-color:#c5d6fb!important;background:#f3f7ff!important}
.table td .btn.sm.danger{color:#c4243a!important}
.table td .btn.sm:hover{background:var(--primary-soft)!important;border-color:#b5cbf7!important;color:var(--primary-dark)!important}
.table td .btn.sm.danger:hover{background:#fde6ea!important;border-color:#f3b6c0!important;color:#c4243a!important}

@media (max-width:760px){
  .table.tn-stack tbody tr:has(td[data-label="Order"]){grid-template-columns:repeat(6,minmax(0,1fr));gap:2px 8px!important;padding:9px 12px 16px 14px!important;margin-bottom:7px;border-left-width:4px;cursor:pointer;border-radius:14px}
  .table.tn-stack tbody tr:has(td[data-label="Order"]):after{content:"";position:absolute;left:50%;bottom:4px;width:7px;height:7px;border-right:2px solid #a9b6d3;border-bottom:2px solid #a9b6d3;transform:translateX(-50%) rotate(45deg);transition:transform .2s}
  .table.tn-stack tbody tr.tn-open:has(td[data-label="Order"]):after{transform:translateX(-50%) rotate(-135deg) translateY(2px)}

  /* collapsed: 3 slim lines */
  .table.tn-stack td[data-label="Order"]{order:1;grid-column:1/5;font-size:13.5px!important;line-height:1.25}
  .table.tn-stack td[data-label="Total"]{order:2;grid-column:5/7;justify-self:end;background:transparent!important;padding:0!important;font-size:14px!important;font-weight:800!important;color:var(--text)!important;text-align:right;line-height:1.25}
  .table.tn-stack td[data-label="Total"]:before{display:none!important}
  .table.tn-stack td[data-label="Customer"]{order:3;grid-column:1/5;font-size:12px!important;font-weight:600;color:#3d4b6b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
  .table.tn-stack td[data-label="Status"]{order:4;grid-column:5/7;justify-self:end}
  .table.tn-stack td[data-label="Status"] .badge{padding:1px 8px;font-size:10.5px}
  .table.tn-stack td[data-label="Items"]{order:5;grid-column:1/5;font-size:11px!important;color:var(--muted);-webkit-line-clamp:1;margin:0!important}
  .table.tn-stack td[data-label="Date"]{order:6;grid-column:5/7;justify-self:end;font-size:10.5px!important;color:var(--muted);align-self:center}

  /* details + actions hidden until the card is tapped */
  .table.tn-stack td[data-label="Received"],.table.tn-stack td[data-label="Due / COD"],.table.tn-stack td[data-label="Profit"],
  .table.tn-stack td[data-label="Courier / Tracking"],.table.tn-stack td[data-label="Actions"]{display:none}
  .table.tn-stack tr.tn-open td[data-label="Received"],.table.tn-stack tr.tn-open td[data-label="Due / COD"],.table.tn-stack tr.tn-open td[data-label="Profit"]{
    display:block;grid-column:span 2;order:7;background:#f6f9ff!important;border-radius:10px;padding:6px 8px!important;margin-top:6px;font-size:12px!important;font-weight:700;color:var(--text)!important}
  .table.tn-stack tr.tn-open td[data-label="Received"]:before,.table.tn-stack tr.tn-open td[data-label="Due / COD"]:before,.table.tn-stack tr.tn-open td[data-label="Profit"]:before{display:block!important;font-size:8.5px!important}
  .table.tn-stack tr.tn-open td[data-label="Courier / Tracking"]{display:block;order:8;grid-column:1/-1;font-size:11px;color:var(--muted)}
  .table.tn-stack tr.tn-open td[data-label="Courier / Tracking"]:before{display:inline!important;margin-right:6px}
  .table.tn-stack tr.tn-open td[data-label="Actions"]{display:block;order:9;grid-column:1/-1;padding-top:8px!important;margin-top:4px;border-top:1px dashed var(--line)!important}
  .table.tn-stack td[data-label="Actions"] .actions{grid-template-columns:repeat(3,1fr)!important;gap:6px}
  .table.tn-stack td[data-label="Actions"] .btn.sm{height:34px;font-size:12px;border-radius:10px}
}
@media (max-width:760px){
  .table.tn-stack tbody tr:has(td[data-label="Order"]){padding:7px 12px 14px 13px!important;gap:0 8px!important;margin-bottom:6px}
  .table.tn-stack td[data-label="Order"],.table.tn-stack td[data-label="Order"] b{font-size:12.5px!important}
  .table.tn-stack td[data-label="Total"]{font-size:13px!important}
  .table.tn-stack td[data-label="Customer"]{font-size:11.5px!important}
  .table.tn-stack td[data-label="Status"] .badge{font-size:9.5px;padding:0 7px}
  .table.tn-stack td[data-label="Items"]{font-size:10.5px!important}
  .table.tn-stack td[data-label="Date"]{font-size:10px!important}
  .table.tn-stack tbody tr:has(td[data-label="Order"]):after{bottom:3px;width:6px;height:6px}
}

/* =====================================================================
   v7.2 - search box (auto-added) + CUSTOMERS
   ===================================================================== */
.tn-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;margin:0 0 12px;border:1px solid var(--line);background:var(--soft);border-radius:12px;color:var(--muted)}
.tn-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.12);background:#fff}
.tn-search input{flex:1;min-width:0;border:0!important;background:transparent!important;height:100%;box-shadow:none!important;padding:0!important;font-size:14px;color:var(--text)}
.tn-search .tn-count{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
#content>.panel>.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
#content>.panel>.panel-head .btn{height:40px;border-radius:12px;font-weight:700}
#content>.panel>.panel-head .btn.ghost{background:#fff;border:1px solid var(--line);color:var(--text)}

@media (min-width:761px){
  #content .table-wrap .table.tn-stack td[data-label="City / Address"],
  #content .table-wrap .table.tn-stack td[data-label="Name"]{max-width:260px;overflow:hidden;text-overflow:ellipsis}
  #content .table-wrap .table.tn-stack td[data-label="City / Address"] small{display:block;overflow:hidden;text-overflow:ellipsis}
  #content .table-wrap .table.tn-stack td[data-label="Name"]{font-weight:700;color:var(--text)}
}

@media (max-width:760px){
  .table.tn-stack tbody tr:has(td[data-label="Total Purchase"]){grid-template-columns:repeat(6,minmax(0,1fr));gap:0 8px;padding:8px 12px 15px 13px;margin-bottom:6px;border-radius:14px;cursor:pointer;border-left-width:4px}
  .table.tn-stack tbody tr:has(td[data-label="Total Purchase"]):after{content:"";position:absolute;left:50%;bottom:3px;width:6px;height:6px;border-right:2px solid #a9b6d3;border-bottom:2px solid #a9b6d3;transform:translateX(-50%) rotate(45deg);transition:transform .2s}
  .table.tn-stack tbody tr.tn-open:has(td[data-label="Total Purchase"]):after{transform:translateX(-50%) rotate(-135deg) translateY(2px)}
  .table.tn-stack tbody tr:has(td[data-label="Total Purchase"]) td:before{display:none!important}
  .table.tn-stack td[data-label="Name"]{order:1;grid-column:1/5;font-size:13.5px;font-weight:800;color:var(--text);font-family:var(--font-head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
  .table.tn-stack td[data-label="Total Purchase"]{order:2;grid-column:5/7;justify-self:end;font-size:13px;font-weight:800;color:var(--primary-dark)}
  .table.tn-stack td[data-label="Phone"]{order:3;grid-column:1/4;font-size:12px;color:#3d4b6b;font-weight:600}
  .table.tn-stack td[data-label="City / Address"]{order:4;grid-column:4/7;justify-self:end;font-size:11.5px;color:var(--muted);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important;max-width:100%}
  .table.tn-stack td[data-label="City / Address"] small{display:none}
  .table.tn-stack td[data-label="Total Sales"],.table.tn-stack td[data-label="Total Profit"],.table.tn-stack td[data-label="Last Sale"],.table.tn-stack td[data-label="Actions"]{display:none}
  .table.tn-stack tr.tn-open td[data-label="City / Address"]{grid-column:1/-1;justify-self:start;text-align:left;white-space:normal!important;order:5}
  .table.tn-stack tr.tn-open td[data-label="City / Address"] small{display:block;margin-top:2px}
  .table.tn-stack tr.tn-open td[data-label="Total Sales"],.table.tn-stack tr.tn-open td[data-label="Total Profit"],.table.tn-stack tr.tn-open td[data-label="Last Sale"]{display:block;grid-column:span 2;order:6;background:#f6f9ff;border-radius:10px;padding:6px 8px!important;margin-top:6px;font-size:12px;font-weight:700;color:var(--text)}
  .table.tn-stack tr.tn-open:has(td[data-label="Total Purchase"]) td[data-label="Total Sales"]:before,.table.tn-stack tr.tn-open:has(td[data-label="Total Purchase"]) td[data-label="Total Profit"]:before,.table.tn-stack tr.tn-open:has(td[data-label="Total Purchase"]) td[data-label="Last Sale"]:before{display:block!important;font-size:8.5px!important}
  .table.tn-stack tr.tn-open td[data-label="Actions"]{display:block;grid-column:1/-1;order:7;padding-top:8px!important;margin-top:4px;border-top:1px dashed var(--line)!important}
  .table.tn-stack tr.tn-open td[data-label="Actions"] .btn.sm{height:34px;font-size:12px;border-radius:10px}
  .table.tn-stack td[data-label="Actions"] .btn.sm{margin-right:6px}
  #content>.panel>.panel-head{flex-wrap:nowrap}
}
@media (max-width:760px){
  .table.tn-stack tbody tr{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
  .table.tn-stack tr.tn-open:has(td[data-label="Total Purchase"]) td[data-label="Actions"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .table.tn-stack tr.tn-open:has(td[data-label="Total Purchase"]) td[data-label="Actions"] .btn.sm{width:100%;margin:0;justify-content:center}
}
@media (max-width:760px){.table.tn-stack tbody tr:hover td,.table.tn-stack tbody tr:nth-child(even) td{background:transparent!important}
.table.tn-stack tr.tn-open td[data-label="Total Sales"],.table.tn-stack tr.tn-open td[data-label="Total Profit"],.table.tn-stack tr.tn-open td[data-label="Last Sale"],.table.tn-stack tr.tn-open td[data-label="Received"],.table.tn-stack tr.tn-open td[data-label="Due / COD"],.table.tn-stack tr.tn-open td[data-label="Profit"]{background:#f6f9ff!important}}

/* =====================================================================
   v7.5 - PRODUCTS
   ===================================================================== */
td[data-tn-stock]{font-weight:700}
td[data-tn-stock]::first-line{font-weight:700}
.table td[data-tn-stock="low"],.table td[data-tn-stock="out"],.table td[data-tn-stock="ok"]{white-space:nowrap}
.table td[data-tn-stock="ok"]{color:#0b8a4b}
.table td[data-tn-stock="low"]{color:#b36a00}
.table td[data-tn-stock="out"]{color:#c4243a}
.product-list-cell{display:flex;align-items:center;gap:10px;min-width:0}
.product-list-thumb{flex:none;width:34px;height:34px;border-radius:10px;background:var(--grad-soft);color:var(--primary-dark);display:grid;place-items:center;font-weight:800;font-size:12px;overflow:hidden}
.product-list-thumb img{width:100%;height:100%;object-fit:cover}
.product-list-cell b{color:var(--text);font-family:var(--font-body)}
#content>.panel>.panel-head .search-row{flex:1 1 280px;min-width:0}
#content>.panel>.panel-head .search-row input{width:100%}
#content>.panel>.panel-head .actions{display:flex;gap:8px;align-items:center}

@media (max-width:760px){
  #content>.panel>.panel-head .search-row{flex:1 1 100%}
  #content>.panel>.panel-head .actions{width:100%;justify-content:space-between}
  #content>.panel>.panel-head .actions .btn.primary{order:-1;flex:1}
  .table.tn-stack tbody td{width:auto!important;min-width:0!important;writing-mode:horizontal-tb!important;text-orientation:mixed!important;transform:none!important}

  .table.tn-stack tbody tr:has(td[data-label="Sale Price"]){grid-template-columns:repeat(6,minmax(0,1fr));gap:2px 8px;padding:8px 12px 15px 13px;margin-bottom:6px;border-radius:14px;cursor:pointer;border-left-width:4px}
  .table.tn-stack tbody tr:has(td[data-label="Sale Price"]):after{content:"";position:absolute;left:50%;bottom:3px;width:6px;height:6px;border-right:2px solid #a9b6d3;border-bottom:2px solid #a9b6d3;transform:translateX(-50%) rotate(45deg);transition:transform .2s}
  .table.tn-stack tbody tr.tn-open:has(td[data-label="Sale Price"]):after{transform:translateX(-50%) rotate(-135deg) translateY(2px)}
  .table.tn-stack tbody tr:has(td[data-label="Sale Price"]) td:before{display:none!important}
  .table.tn-stack td[data-label="Name"]{order:1;grid-column:1/5;font-size:13px}
  .table.tn-stack td[data-label="Name"] .product-list-thumb{width:28px;height:28px;border-radius:8px;font-size:10px}
  .table.tn-stack td[data-label="Name"] b{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .table.tn-stack td[data-label="Name"] small{display:none}
  .table.tn-stack td[data-label="Name"] .product-list-cell>div{min-width:0;flex:1}
  .table.tn-stack td[data-label="Sale Price"]{order:2;grid-column:5/7;justify-self:end;align-self:center;font-size:13px;font-weight:800;color:var(--primary-dark)}
  .table.tn-stack td[data-label="Category / Brand"]{order:3;grid-column:1/5;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
  .table.tn-stack td[data-label="Category / Brand"] small{display:none}
  .table.tn-stack td[data-label="Stock"]{order:4;grid-column:5/7;justify-self:end;font-size:11.5px}
  .table.tn-stack td[data-label="Stock"]:before{display:inline!important;content:"Stock ";font-size:11px!important;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;margin:0}
  .table.tn-stack td[data-label="SKU"],.table.tn-stack td[data-label="Barcode"],.table.tn-stack td[data-label="Type"],.table.tn-stack td[data-label="Cost Price"],.table.tn-stack td[data-label="Low Stock"],.table.tn-stack td[data-label="Actions"]{display:none}
  .table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="SKU"],.table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Barcode"],.table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Type"],.table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Cost Price"],.table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Low Stock"]{display:block;grid-column:span 2;order:5;background:#f6f9ff!important;border-radius:10px;padding:6px 8px!important;margin-top:6px;font-size:12px;font-weight:700;color:var(--text)}
  .table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Barcode"]:before,.table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="SKU"]:before,.table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Type"]:before,.table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Cost Price"]:before,.table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Low Stock"]:before{display:block!important;font-size:8.5px!important}
  .table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Actions"]{display:block;grid-column:1/-1;order:8;padding-top:8px!important;margin-top:4px;border-top:1px dashed var(--line)!important}
  .table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Actions"] .actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .table.tn-stack tr.tn-open:has(td[data-label="Sale Price"]) td[data-label="Actions"] .btn.sm{width:100%;height:34px;padding:0;font-size:11.5px;justify-content:center}
}
@media (max-width:760px){
  .table.tn-stack tr:has(td[data-label="Sale Price"]) td[data-label="Name"] b{font-size:13px!important;font-weight:700!important}
  .table.tn-stack tr:has(td[data-label="Sale Price"]) td[data-label="Sale Price"]{font-size:13px!important;font-weight:800!important;line-height:1.2}
  .table.tn-stack tr:has(td[data-label="Sale Price"]) td[data-label="Stock"]{font-size:12px!important}
  .table.tn-stack tr:has(td[data-label="Sale Price"]) td[data-label="Stock"]:before{display:inline!important;content:"Stock: "!important;font-size:11px!important;font-weight:600!important;color:var(--muted)!important;text-transform:none!important;letter-spacing:0!important;margin:0!important}
  .table.tn-stack tbody tr:has(td[data-label="Sale Price"]){padding:8px 12px 14px 13px;gap:0 8px}
}

/* =====================================================================
   v7.7 - PRODUCTS polish: stock pills, filter chips, tidy tiles
   ===================================================================== */
.tn-chips{display:flex;gap:8px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tn-chips::-webkit-scrollbar{display:none}
.tn-chips button{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#4b5873;font:600 12.5px var(--font-body);cursor:pointer;transition:all .15s}
.tn-chips button b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#eef2f9;color:#4b5873;font-size:11px;display:grid;place-items:center}
.tn-chips button.on{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 8px 16px -10px var(--primary)}
.tn-chips button.on b{background:rgba(255,255,255,.25);color:#fff}
.tn-chips button[data-f="low"]:not(.on) b{background:#fff1d6;color:#b36a00}
.tn-chips button[data-f="out"]:not(.on) b{background:#fde6ea;color:#c4243a}
table[data-tn-f="low"] tbody tr:not(:has(td[data-tn-stock="low"])),
table[data-tn-f="out"] tbody tr:not(:has(td[data-tn-stock="out"])){display:none!important}

/* stock pill (desktop + phone) */
.table td[data-tn-stock="ok"],.table td[data-tn-stock="low"],.table td[data-tn-stock="out"]{font-weight:700}
.table td[data-tn-stock]:not([data-tn-stock=""]){position:relative}
.table td[data-tn-stock="ok"]{color:#0b8a4b}.table td[data-tn-stock="low"]{color:#b36a00}.table td[data-tn-stock="out"]{color:#c4243a}
.table td[data-tn-stock="ok"]:before,.table td[data-tn-stock="low"]:before,.table td[data-tn-stock="out"]:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
.product-list-thumb{background:linear-gradient(135deg,#e8f0ff,#efe8ff)!important;border:1px solid #dbe5f8}

@media (max-width:760px){
  .table.tn-stack tr:has(td[data-label="Sale Price"]) td[data-label="Stock"]:before{content:""!important;display:inline-block!important;width:8px!important;height:8px!important;font-size:0!important;margin-right:5px!important;color:inherit!important}
  .table.tn-stack tr:has(td[data-label="Sale Price"]) td[data-label="Stock"]{display:inline-flex;align-items:center;justify-self:end;padding:2px 10px!important;border-radius:999px;font-size:11.5px!important;font-weight:800;background:color-mix(in srgb,currentColor 10%,#fff)}
  .table.tn-stack tr:has(td[data-label="Sale Price"]) td[data-label="Stock"]:not([data-tn-stock]){color:#6a7794;background:#eef1f6}
  .table.tn-stack tr:has(td[data-label="Sale Price"]) td[data-label="Stock"][data-tn-stock=""]{color:#6a7794;background:#eef1f6}
  .table.tn-stack tr:has(td[data-label="Sale Price"]) td[data-label="Name"] .product-list-thumb{width:30px;height:30px}
  .table.tn-stack tr:has(td[data-label="Sale Price"]) td[data-label="Name"] .product-list-thumb svg{width:16px;height:16px}
  .tn-chips{margin-bottom:10px}
}

/* =====================================================================
   v7.8 - CATEGORIES
   ===================================================================== */
.table td .btn.sm.warning{background:#fff!important;border:1px solid var(--line)!important;color:#b36a00!important;height:30px;border-radius:9px;font-weight:600;box-shadow:none!important}
.category-summary-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.category-summary-card{display:flex!important;flex-direction:column;gap:2px;padding:10px 14px!important;background:#fff!important;border:1px solid var(--line)!important;border-left:5px solid var(--primary)!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(15,30,70,.05)!important}
.category-summary-card:nth-child(2){border-left-color:#10a65a!important}
.category-summary-card:nth-child(3){border-left-color:#7c3aed!important}
.category-summary-card small{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.category-summary-card b{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--text)}
.category-panel .table-toolbar{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;gap:10px}
.category-panel .table-toolbar>.actions{order:2!important;margin-left:auto;flex:none}
.category-panel .category-search-wrap{flex:1;min-width:0}
.category-panel .category-search-wrap input{width:100%;height:40px;border-radius:12px!important;border:1px solid var(--line)!important;background:var(--soft)!important;padding:0 12px}
.category-panel .table-toolbar>.actions .btn:first-child{background:var(--grad)!important;border:0!important;color:#fff!important;padding-left:14px;background-image:var(--grad)!important}

@media (max-width:760px){
  .category-summary-grid{gap:6px;margin-bottom:10px}
  .category-summary-card{padding:7px 9px!important;border-left-width:4px!important;border-radius:12px!important}
  .category-summary-card small{font-size:8.5px}
  .category-summary-card b{font-size:15px}
  .category-panel .table-toolbar>.actions .btn{height:40px;font-size:12px;padding:0 12px}

  .table.tn-stack tbody tr:has(td[data-label="Category"]){grid-template-columns:repeat(6,minmax(0,1fr));gap:1px 8px;padding:9px 12px 15px 13px;margin-bottom:6px;border-radius:14px;cursor:pointer;border-left-width:4px}
  .table.tn-stack tbody tr:has(td[data-label="Category"]):after{content:"";position:absolute;left:50%;bottom:3px;width:6px;height:6px;border-right:2px solid #a9b6d3;border-bottom:2px solid #a9b6d3;transform:translateX(-50%) rotate(45deg);transition:transform .2s}
  .table.tn-stack tbody tr.tn-open:has(td[data-label="Category"]):after{transform:translateX(-50%) rotate(-135deg) translateY(2px)}
  .table.tn-stack tbody tr:has(td[data-label="Category"]) td:before{display:none!important}
  .table.tn-stack td[data-label="Category"]{order:1;grid-column:1/5;font-size:13.5px}
  .table.tn-stack td[data-label="Category"] b{font-family:var(--font-body);color:var(--text);font-size:13.5px}
  .table.tn-stack td[data-label="Status"]{order:2;grid-column:5/7;justify-self:end}
  .table.tn-stack td[data-label="Status"] .badge{font-size:10px;padding:1px 8px}
  .table.tn-stack td[data-label="Products"]{order:3;grid-column:1/5;font-size:11.5px;color:var(--muted)}
  .table.tn-stack tr:has(td[data-label="Category"]) td[data-label="Products"]:after{content:" products"}
  .table.tn-stack tr:has(td[data-label="Category"]) td[data-label="Type"]{display:none}
  .table.tn-stack tr:has(td[data-label="Category"]) td[data-label="Actions"]{display:none}
  .table.tn-stack tr.tn-open:has(td[data-label="Category"]) td[data-label="Type"]{display:block;order:4;grid-column:5/7;justify-self:end;font-size:11px;color:var(--muted)}
  .table.tn-stack tr.tn-open:has(td[data-label="Category"]) td[data-label="Actions"]{display:block;order:5;grid-column:1/-1;padding-top:8px!important;margin-top:6px;border-top:1px dashed var(--line)!important}
  .table.tn-stack tr.tn-open:has(td[data-label="Category"]) td[data-label="Actions"] .actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .table.tn-stack tr.tn-open:has(td[data-label="Category"]) td[data-label="Actions"] .btn.sm{width:100%;height:34px;padding:0;font-size:12px;justify-content:center}
}
#content .category-panel .table-toolbar{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px}
#content .category-panel .table-toolbar>.actions{display:flex!important;order:2!important;grid-template-columns:none!important;flex:none;margin-left:0}
#content .category-panel .table-toolbar>.actions .btn.primary{grid-column:auto;margin-left:0;height:40px;font-size:12px;white-space:nowrap}
@media (max-width:760px){
  .table.tn-stack tr:has(td[data-label="Category"]) td[data-label="Category"] b{font-size:13px!important;font-family:var(--font-body)!important;color:var(--text)!important;font-weight:700}
  .table.tn-stack tbody tr:has(td[data-label="Category"]){padding:8px 12px 13px 13px!important;gap:0 8px!important}
  .table.tn-stack tr:has(td[data-label="Category"]) td[data-label="Products"]{font-size:11px!important}
}

/* v8.4 - no full-height blue line on list-page panels (row cards keep their own accent) */
#content>.panel:not(.business-insights-panel),#content .category-panel{border-left:1px solid var(--line)!important}
@media (max-width:760px){#content>.panel:not(.business-insights-panel),#content .category-panel{border-left-width:1px!important}}
#content>.panel:not(.business-insights-panel):before,#content>.panel:not(.business-insights-panel):after,#content .category-panel:before,#content .category-panel:after{display:none!important;content:none!important}

/* =====================================================================
   v8.5 - summary cards become a slim scroll strip on phones; PURCHASES
   ===================================================================== */
@media (max-width:760px){
  body:not([data-page="sales"]) #content .cards{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:8px!important;margin:0 -2px 10px;padding:2px;scrollbar-width:none}
  #content .cards::-webkit-scrollbar{display:none}
  #content .cards>.card{flex:0 0 132px;min-height:54px}
  #content .cards>.card .label{font-size:8.5px!important}
  #content .cards>.card .value{font-size:13px!important}
}
.table td[data-tn-due="1"]{color:#c4243a;font-weight:700}
.table td[data-tn-due="0"]{color:#0b8a4b}

@media (max-width:760px){
  .table.tn-stack tbody tr:has(td[data-label="Purchase Type"]){grid-template-columns:repeat(6,minmax(0,1fr));gap:1px 8px;padding:9px 12px 15px 13px;margin-bottom:6px;border-radius:14px;cursor:pointer;border-left-width:4px}
  .table.tn-stack tbody tr:has(td[data-label="Purchase Type"]):after{content:"";position:absolute;left:50%;bottom:3px;width:6px;height:6px;border-right:2px solid #a9b6d3;border-bottom:2px solid #a9b6d3;transform:translateX(-50%) rotate(45deg);transition:transform .2s}
  .table.tn-stack tbody tr.tn-open:has(td[data-label="Purchase Type"]):after{transform:translateX(-50%) rotate(-135deg) translateY(2px)}
  .table.tn-stack tbody tr:has(td[data-label="Purchase Type"]) td:before{display:none!important}
  .table.tn-stack td[data-label="Invoice"]{order:1;grid-column:1/4;font-size:13px}
  .table.tn-stack td[data-label="Invoice"] b{font-size:13px;color:var(--primary-dark)}
  .table.tn-stack td[data-label="Total"]:not([data-label="Invoice"]){}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Total"]{order:2;grid-column:4/7;justify-self:end;font-size:14px;font-weight:800;color:var(--text)}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Vendor"]{order:3;grid-column:1/4;font-size:12px;font-weight:600;color:#3d4b6b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Due"]{display:block;order:4;grid-column:4/7;justify-self:end;font-size:11px;font-weight:700}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Due"][data-tn-due="1"]:before{display:inline!important;content:"Due ";font-size:11px!important;margin:0;text-transform:none;letter-spacing:0}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Due"][data-tn-due="0"]{font-size:0}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Due"][data-tn-due="0"]:after{content:"Paid";font-size:11px}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Items"]{order:5;grid-column:1/5;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important;display:block;-webkit-line-clamp:unset}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Date"]{order:6;grid-column:5/7;justify-self:end;font-size:10.5px;color:var(--muted)}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Purchase Type"],
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Linked Sale"],
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Tax"],
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Tax Type"],
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Paid"],
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Actions"]{display:none}
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Purchase Type"],
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Linked Sale"],
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Tax"],
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Tax Type"],
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Paid"]{display:block;order:7;grid-column:span 3;background:#f6f9ff!important;border-radius:10px;padding:6px 8px!important;margin-top:6px;font-size:12px;font-weight:700;color:var(--text)}
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Purchase Type"]:before,
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Linked Sale"]:before,
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Tax"]:before,
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Tax Type"]:before,
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Paid"]:before{display:block!important;font-size:8.5px!important}
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Actions"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;order:9;grid-column:1/-1;padding-top:8px!important;margin-top:6px;border-top:1px dashed var(--line)!important}
  .table.tn-stack tr.tn-open:has(td[data-label="Purchase Type"]) td[data-label="Actions"] .btn.sm{width:100%;height:34px;justify-content:center}
}
@media (max-width:760px){
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Vendor"]{font-size:12.5px!important;font-weight:600!important}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Due"]{font-size:11.5px!important;font-weight:800!important}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Due"][data-tn-due="0"]{font-size:0!important}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Due"][data-tn-due="0"]:after{content:"Paid";font-size:11.5px!important}
  .table.tn-stack tr:has(td[data-label="Purchase Type"]) td[data-label="Items"]{font-size:11px!important}
}

/* =====================================================================
   v8.7 - INVENTORY / STOCK
   ===================================================================== */
@media (max-width:760px){
  #content .cards>.card{flex:0 0 auto!important;min-width:120px}
  .table.tn-stack tbody tr:has(td[data-label="Current Stock"]){grid-template-columns:repeat(6,minmax(0,1fr));gap:2px 8px;padding:9px 12px 15px 13px;margin-bottom:6px;border-radius:14px;cursor:pointer;border-left-width:4px}
  .table.tn-stack tbody tr:has(td[data-label="Current Stock"]):after{content:"";position:absolute;left:50%;bottom:3px;width:6px;height:6px;border-right:2px solid #a9b6d3;border-bottom:2px solid #a9b6d3;transform:translateX(-50%) rotate(45deg);transition:transform .2s}
  .table.tn-stack tbody tr.tn-open:has(td[data-label="Current Stock"]):after{transform:translateX(-50%) rotate(-135deg) translateY(2px)}
  .table.tn-stack tbody tr:has(td[data-label="Current Stock"]) td{width:auto!important;min-width:0!important;writing-mode:horizontal-tb!important;text-orientation:mixed!important;transform:none!important}
  .table.tn-stack tbody tr:has(td[data-label="Current Stock"]) td:before{display:none!important}
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Product / Service"]{order:1;grid-column:1/5;font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Status"]{order:2;grid-column:5/7;justify-self:end}
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Status"] .badge{font-size:10px;padding:1px 8px}
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Current Stock"]{order:3;grid-column:1/4;font-size:12px;color:var(--muted)}
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Current Stock"]:before{display:inline!important;content:"Stock: ";font-size:12px!important;margin:0;text-transform:none;letter-spacing:0;font-weight:500}
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Current Stock"] b{font-size:13px;color:var(--text);font-family:var(--font-body)}
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Value"]{order:4;grid-column:4/7;justify-self:end;font-size:12.5px;font-weight:800;color:var(--primary-dark)}
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="SKU"],
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Type"],
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Opening"],
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Purchased"],
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Issued / Sold"],
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Returned"],
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Adjustment"],
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Avg Cost"]{display:none}
  .table.tn-stack tr.tn-open:has(td[data-label="Current Stock"]) td[data-label="SKU"],
  .table.tn-stack tr.tn-open:has(td[data-label="Current Stock"]) td[data-label="Type"],
  .table.tn-stack tr.tn-open:has(td[data-label="Current Stock"]) td[data-label="Opening"],
  .table.tn-stack tr.tn-open:has(td[data-label="Current Stock"]) td[data-label="Purchased"],
  .table.tn-stack tr.tn-open:has(td[data-label="Current Stock"]) td[data-label="Issued / Sold"],
  .table.tn-stack tr.tn-open:has(td[data-label="Current Stock"]) td[data-label="Returned"],
  .table.tn-stack tr.tn-open:has(td[data-label="Current Stock"]) td[data-label="Adjustment"],
  .table.tn-stack tr.tn-open:has(td[data-label="Current Stock"]) td[data-label="Avg Cost"]{display:block;order:6;grid-column:span 2;background:#f6f9ff!important;border-radius:10px;padding:5px 8px!important;margin-top:6px;font-size:12px;font-weight:700;color:var(--text)}
  .table.tn-stack tr.tn-open:has(td[data-label="Current Stock"]) td[data-label]:not([data-label="Product / Service"]):not([data-label="Status"]):not([data-label="Current Stock"]):not([data-label="Value"]):before{display:block!important;font-size:8.5px!important;font-weight:700;text-transform:uppercase;color:var(--muted)}
}
@media (max-width:760px){
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Product / Service"]{font-size:13.5px!important;font-weight:700!important}
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Value"]{font-size:13px!important;font-weight:800!important}
  .table.tn-stack tr:has(td[data-label="Current Stock"]) td[data-label="Current Stock"]{font-size:12px!important}
  .table.tn-stack tbody tr:has(td[data-label="Current Stock"]){padding:8px 12px 14px 13px;gap:0 8px}
}

/* =====================================================================
   v8.9 - VENDORS / SUPPLIERS
   ===================================================================== */
@media (max-width:760px){
  .table.tn-stack tbody tr:has(td[data-label="Purchases"]):has(td[data-label="City"]){grid-template-columns:repeat(6,minmax(0,1fr));gap:2px 8px;padding:9px 12px 15px 13px;margin-bottom:6px;border-radius:14px;cursor:pointer;border-left-width:4px;min-height:0}
  .table.tn-stack tbody tr:has(td[data-label="Purchases"]):has(td[data-label="City"]):after{content:"";position:absolute;left:50%;bottom:3px;width:6px;height:6px;border-right:2px solid #a9b6d3;border-bottom:2px solid #a9b6d3;transform:translateX(-50%) rotate(45deg);transition:transform .2s}
  .table.tn-stack tbody tr.tn-open:has(td[data-label="Purchases"]):has(td[data-label="City"]):after{transform:translateX(-50%) rotate(-135deg) translateY(2px)}
  .table.tn-stack tbody tr:has(td[data-label="Purchases"]):has(td[data-label="City"]) td{width:auto!important;min-width:0!important;writing-mode:horizontal-tb!important}
  .table.tn-stack tbody tr:has(td[data-label="Purchases"]):has(td[data-label="City"]) td:before{display:none!important}
  .table.tn-stack tr:has(td[data-label="Purchases"]):has(td[data-label="City"]) td[data-label="Name"]{order:1;grid-column:1/5;font-size:13.5px!important;font-weight:700;color:var(--text)}
  .table.tn-stack tr:has(td[data-label="Purchases"]):has(td[data-label="City"]) td[data-label="Purchases"]{order:2;grid-column:5/7;justify-self:end;font-size:13px!important;font-weight:800;color:var(--primary-dark)}
  .table.tn-stack tr:has(td[data-label="Purchases"]):has(td[data-label="City"]) td[data-label="Phone"]{order:3;grid-column:1/4;font-size:12px!important;color:#3d4b6b;font-weight:600}
  .table.tn-stack tr:has(td[data-label="Purchases"]):has(td[data-label="City"]) td[data-label="City"]{order:4;grid-column:4/7;justify-self:end;font-size:12px!important;color:var(--muted)}
  .table.tn-stack tr:has(td[data-label="Purchases"]):has(td[data-label="City"]) td[data-label="Address"],
  .table.tn-stack tr:has(td[data-label="Purchases"]):has(td[data-label="City"]) td[data-label="Actions"]{display:none}
  .table.tn-stack tr.tn-open:has(td[data-label="Purchases"]):has(td[data-label="City"]) td[data-label="Address"]{display:block;order:5;grid-column:1/-1;font-size:11.5px!important;color:var(--muted);margin-top:4px}
  .table.tn-stack tr.tn-open:has(td[data-label="Purchases"]):has(td[data-label="City"]) td[data-label="Actions"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;order:6;grid-column:1/-1;padding-top:8px!important;margin-top:6px;border-top:1px dashed var(--line)!important}
  .table.tn-stack tr.tn-open:has(td[data-label="Purchases"]):has(td[data-label="City"]) td[data-label="Actions"] .btn.sm{width:100%;height:34px;justify-content:center}
}

/* =====================================================================
   v9.0 - GENERIC slim rows (Expenses, Tax Records, Accounts, Assets, Owner...)
   ===================================================================== */
@media (max-width:760px){
  .table.tn-stack tbody tr[data-tn-g]{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px 8px;padding:9px 12px 15px 13px;margin-bottom:6px;border-radius:14px;cursor:pointer;border-left-width:4px}
  .table.tn-stack tbody tr[data-tn-g]:after{content:"";position:absolute;left:50%;bottom:3px;width:6px;height:6px;border-right:2px solid #a9b6d3;border-bottom:2px solid #a9b6d3;transform:translateX(-50%) rotate(45deg);transition:transform .2s}
  .table.tn-stack tbody tr[data-tn-g].tn-open:after{transform:translateX(-50%) rotate(-135deg) translateY(2px)}
  .table.tn-stack tbody tr[data-tn-g] td{width:auto!important;min-width:0!important;writing-mode:horizontal-tb!important;transform:none!important}
  .table.tn-stack tbody tr[data-tn-g] td:before{display:none!important}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="chk"]{display:none}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="title"]{order:1;grid-column:1/5;font-size:13px!important;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="title"] b{font-size:13px!important;font-family:var(--font-body)!important;color:var(--text)!important}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="amount"]{order:2;grid-column:5/7;justify-self:end;font-size:13.5px!important;font-weight:800;color:var(--text);white-space:nowrap}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="amount"] b{font-size:13.5px!important;font-family:var(--font-body)!important;color:var(--text)!important}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="sub"]{order:3;grid-column:1/5;font-size:11.5px!important;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="sub"] .badge{font-size:10px;padding:0 8px}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="date"]{order:4;grid-column:5/7;justify-self:end;font-size:11px!important;color:var(--muted);white-space:nowrap}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="more"],.table.tn-stack tbody tr[data-tn-g] td[data-r="act"]{display:none}
  .table.tn-stack tbody tr[data-tn-g].tn-open td[data-r="more"]{display:block;order:6;grid-column:span 3;background:#f6f9ff!important;border-radius:10px;padding:5px 8px!important;margin-top:6px;font-size:12px!important;font-weight:700;color:var(--text)}
  .table.tn-stack tbody tr[data-tn-g].tn-open td[data-r="more"]:before{display:block!important;content:attr(data-label);font-size:8.5px!important;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 1px}
  .table.tn-stack tbody tr[data-tn-g].tn-open td[data-r="act"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;order:9;grid-column:1/-1;padding-top:8px!important;margin-top:6px;border-top:1px dashed var(--line)!important}
  .table.tn-stack tbody tr[data-tn-g].tn-open td[data-r="act"] .btn.sm{width:100%;height:34px;justify-content:center;margin:0}
  .table.tn-stack tbody tr[data-tn-g].tn-open td[data-r="act"] .actions{display:contents}
}

/* =====================================================================
   v9.1 - PAYMENT ACCOUNTS (card based page)
   ===================================================================== */
.accounts-page .accounts-hero,.accounts-page .panel{border:1px solid var(--line)!important;border-left:1px solid var(--line)!important;border-radius:18px!important;background:#fff!important}
.accounts-page .accounts-hero:before,.accounts-page .accounts-hero:after,.accounts-page .panel:before,.accounts-page .panel:after{display:none!important;content:none!important}
.accounts-page .accounts-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px!important;margin-bottom:12px;box-shadow:0 1px 2px rgba(15,30,70,.05)}
.accounts-page .accounts-hero h3{font-family:var(--font-head);font-size:17px;margin:0}
.accounts-page .accounts-hero p{margin:3px 0 0;color:var(--muted);font-size:12.5px;max-width:520px}
.accounts-page .accounts-hero .btn{white-space:nowrap}
.accounts-summary-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.accounts-summary-grid>article{--k:#2563eb;position:relative;display:flex;flex-direction:column;gap:1px;padding:10px 14px!important;background:#fff!important;border:1px solid var(--line)!important;border-left:5px solid var(--k)!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(15,30,70,.05)!important;overflow:hidden}
.accounts-summary-grid>article:before,.accounts-summary-grid>article:after{display:none!important}
.accounts-summary-grid>article:nth-child(2){--k:#10a65a}.accounts-summary-grid>article:nth-child(3){--k:#7c3aed}.accounts-summary-grid>article:nth-child(4){--k:#e08a12}
.accounts-summary-grid small{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.accounts-summary-grid b{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--text)}
.accounts-summary-grid span{font-size:10.5px;color:var(--muted)}
.account-card-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.account-pro-card{display:flex!important;flex-direction:column;gap:8px;padding:12px 14px!important;background:#fff!important;border:1px solid var(--line)!important;border-left:5px solid var(--primary)!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(15,30,70,.05)!important}
.account-pro-head{display:flex;align-items:center;gap:10px}
.account-pro-head>div:nth-child(2){flex:1;min-width:0}
.account-pro-head h4{margin:0;font-size:14px;font-family:var(--font-body);font-weight:700;color:var(--text)}
.account-pro-head span:not(.badge){font-size:11.5px;color:var(--muted)}
.account-pro-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--grad-soft);font-size:18px;flex:none}
.account-pro-stats{display:flex!important;gap:8px}
.account-pro-stats>div{flex:1;background:#f6f9ff;border-radius:10px;padding:5px 9px;display:flex;flex-direction:column}
.account-pro-stats span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.account-pro-stats b{font-size:12.5px;color:var(--text)}
.account-pro-actions{display:flex;gap:6px}
.account-pro-actions .btn.sm{flex:1;height:32px;justify-content:center;background:#fff!important;border:1px solid var(--line)!important;color:#3d4b6b!important;box-shadow:none!important;border-radius:9px;font-weight:600}
.account-pro-actions .btn.sm.primary{background:#f3f7ff!important;border-color:#c5d6fb!important;color:var(--primary-dark)!important}
@media (max-width:760px){
  .accounts-page .accounts-hero{padding:10px 12px!important;border-radius:14px!important}
  .accounts-page .accounts-hero p{display:none}
  .accounts-page .accounts-hero h3{font-size:15px}
  .accounts-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .accounts-summary-grid>article{padding:8px 10px!important;border-left-width:4px!important;border-radius:13px!important}
  .accounts-summary-grid b{font-size:16px}
  .accounts-summary-grid span{display:none}
  .account-card-grid{grid-template-columns:1fr}
  .account-pro-card{padding:10px 12px!important;gap:6px;border-left-width:4px!important;border-radius:14px!important}
  .account-pro-icon{width:30px;height:30px;font-size:15px;border-radius:9px}
  .account-pro-head h4{font-size:13.5px}
  .account-pro-stats>div{padding:4px 8px}
  .account-pro-actions .btn.sm{height:30px;font-size:11.5px}
}

/* v9.2 - date-range filter bar stays visible on phones */
@media (max-width:760px){
  #content>.filter-panel{display:block!important;padding:10px 12px!important;margin-bottom:10px;border-radius:16px!important}
  #content>.filter-panel>.panel-head{margin:0 0 8px;flex-wrap:nowrap}
  #content>.filter-panel>.panel-head h3{font-size:14px}
  #content>.filter-panel>.panel-head small{display:none}
  #content>.filter-panel>.panel-head .btn{height:34px;font-size:12px;padding:0 12px}
  #content>.filter-panel .period-filter{display:flex!important;flex-wrap:wrap;gap:8px;align-items:flex-end}
  #content>.filter-panel .period-filter .field{flex:1 1 130px;min-width:0;margin:0}
  #content>.filter-panel .period-filter label{font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--muted)}
  #content>.filter-panel .period-filter select,#content>.filter-panel .period-filter input{width:100%;height:38px;font-size:13px}
}
@media (max-width:760px){
  #content>.filter-panel .period-filter{flex-wrap:nowrap;align-items:center}
  #content>.filter-panel .period-filter .field{flex:1 1 auto;display:block;height:auto}
  #content>.filter-panel .period-filter .field label{display:none}
  #content>.filter-panel .period-filter .field select{height:38px;border-radius:12px;background:var(--primary-soft);border:1px solid #bcd0fb;color:var(--primary-dark);font-weight:700}
  #content>.filter-panel .period-filter .period-label{display:none}
  #content>.filter-panel .period-filter .period-custom:not(.hidden){display:grid;grid-template-columns:1fr 1fr auto;gap:6px;width:100%}
  #content>.filter-panel .period-filter{flex-wrap:wrap}
}
@media (max-width:760px){#content>.filter-panel .period-filter .period-label{display:none!important}}

/* v9.5 - generic rows with a status badge */
@media (max-width:760px){
  .table.tn-stack tbody tr[data-tn-g]:has(td[data-r="badge"]) td[data-r="sub"]{grid-column:1/5}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="badge"]{order:3;grid-column:5/7;justify-self:end;align-self:center}
  .table.tn-stack tbody tr[data-tn-g] td[data-r="badge"] .badge{font-size:10px;padding:0 8px}
  .table.tn-stack tbody tr[data-tn-g]:has(td[data-r="badge"]) td[data-r="date"]{order:4;grid-column:1/-1;justify-self:start;font-size:10.5px!important}
  .table.tn-stack tbody tr[data-tn-g]:has(td[data-r="badge"]) td[data-r="sub"]{order:3}
}

/* v9.7 - empty-state rows */
.table tbody tr[data-tn-empty] td{text-align:center!important;color:var(--muted);font-size:13px;padding:28px 12px!important;white-space:normal!important}
@media (max-width:760px){
  .table.tn-stack tbody tr[data-tn-empty]{display:block!important;border:1px dashed #cdd8ee!important;border-left:1px dashed #cdd8ee!important;background:#fafcff!important;box-shadow:none!important;cursor:default;padding:0!important}
  .table.tn-stack tbody tr[data-tn-empty]:after{display:none!important}
  .table.tn-stack tbody tr[data-tn-empty] td{display:block!important;position:static!important}
}

/* v10.2 - summary cards: all visible, 2 per row on phones (no hidden side-scroll) */
@media (max-width:760px){
  body:not([data-page="sales"]) #content .cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;margin:0 0 10px!important;padding:0!important;gap:8px!important}
  #content .cards>.card{flex:none!important;min-width:0!important;width:auto!important}
  #content .cards>.card .label{white-space:normal!important;line-height:1.2}
}

/* =====================================================================
   v10.3 - multi-colour row accents (status based, otherwise varied)
   ===================================================================== */
@media (max-width:760px){
  .table.tn-stack tbody tr[data-tn-c]{border-left-color:var(--rc,#2563eb)!important}
  .table.tn-stack tbody tr[data-tn-c]:not([data-tn-empty]){box-shadow:-5px 0 14px -10px var(--rc,#2563eb),0 1px 2px rgba(15,30,70,.05)!important}
}
@media (min-width:761px){
  .table.tn-stack tbody tr[data-tn-c] td:first-child{box-shadow:inset 4px 0 0 var(--rc,transparent)}
}
.account-pro-card:nth-child(6n+1){border-left-color:#2563eb!important}.account-pro-card:nth-child(6n+2){border-left-color:#10a65a!important}.account-pro-card:nth-child(6n+3){border-left-color:#7c3aed!important}
.account-pro-card:nth-child(6n+4){border-left-color:#e08a12!important}.account-pro-card:nth-child(6n+5){border-left-color:#0891b2!important}.account-pro-card:nth-child(6n){border-left-color:#e0344a!important}

/* v10.4 - status tabs */
.tn-status-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 0 12px;padding:2px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tn-status-tabs::-webkit-scrollbar{display:none}
.tn-status-tabs button{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#3d4b6b;font:600 12.5px var(--font-body);cursor:pointer;white-space:nowrap;transition:all .15s}
.tn-status-tabs button i{width:8px;height:8px;border-radius:50%;flex:none}
.tn-status-tabs button b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#eef2f9;color:#4b5873;font-size:11px;display:grid;place-items:center}
.tn-status-tabs button.on{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 8px 16px -10px var(--primary)}
.tn-status-tabs button.on b{background:rgba(255,255,255,.25);color:#fff}
.tn-hide-s{display:none!important}

/* =====================================================================
   v10.5 - Sales cards: as slim as the Customers rows (2 lines)
   ===================================================================== */
@media (max-width:760px){
  .table.tn-stack tbody tr:has(td[data-label="Order"]){padding:8px 12px 14px 13px!important;gap:1px 8px!important;margin-bottom:6px!important}
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Order"]{order:1;grid-column:1/4;font-size:13px!important}
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Order"] b{font-size:13px!important}
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Date"]{order:2;grid-column:4/5;justify-self:start;align-self:center;font-size:10px!important;color:var(--muted);white-space:nowrap}
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Total"]{order:3;grid-column:5/7;justify-self:end;font-size:13.5px!important}
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Customer"]{order:4;grid-column:1/5;font-size:11.5px!important;font-weight:600;color:#3d4b6b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Status"]{order:5;grid-column:5/7;justify-self:end;align-self:center}
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Status"] .badge{font-size:9.5px;padding:0 7px}
  /* items + money details only when the card is opened */
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Items"]{display:none}
  .table.tn-stack tr.tn-open:has(td[data-label="Order"]) td[data-label="Items"]{display:block;order:6;grid-column:1/-1;font-size:11.5px!important;color:var(--muted);margin-top:4px;white-space:normal!important;-webkit-line-clamp:3}
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Due / COD"],
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Profit"]{display:none}
  .table.tn-stack tr.tn-open:has(td[data-label="Order"]) td[data-label="Due / COD"],
  .table.tn-stack tr.tn-open:has(td[data-label="Order"]) td[data-label="Profit"],
  .table.tn-stack tr.tn-open:has(td[data-label="Order"]) td[data-label="Received"]{display:block;order:7;grid-column:span 2;background:#f6f9ff!important;border-radius:10px;padding:5px 8px!important;margin-top:6px;font-size:12px!important;font-weight:700;color:var(--text)!important}
  .table.tn-stack tr.tn-open:has(td[data-label="Order"]) td[data-label="Due / COD"]:before,
  .table.tn-stack tr.tn-open:has(td[data-label="Order"]) td[data-label="Profit"]:before,
  .table.tn-stack tr.tn-open:has(td[data-label="Order"]) td[data-label="Received"]:before{display:block!important;font-size:8.5px!important}
}
/* status tabs: slimmer, like the other chips */
.tn-status-tabs button{height:30px;padding:0 10px;font-size:11.5px;gap:6px}
.tn-status-tabs button b{min-width:18px;height:17px;font-size:10px;padding:0 5px}
.tn-status-tabs{margin-bottom:8px}
@media (max-width:760px){
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Order"]{grid-column:1/3!important}
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Date"]{grid-column:3/5!important;justify-self:start!important;white-space:nowrap!important;font-size:10.5px!important}
  .table.tn-stack tr:has(td[data-label="Order"]) td[data-label="Customer"]{align-self:center}
}

/* v12.0 - sales channel icon beside the order number */
.tn-ch{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-right:7px;vertical-align:-4px;flex:none;box-shadow:0 3px 8px -3px rgba(0,0,0,.35)}
td[data-label="Order"] .tn-ch+b,td[data-label="Sale / Order"] .tn-ch+b,td[data-label="Sale / Order"] .tn-ch+a{vertical-align:middle}
@media (max-width:760px){.tn-ch{width:21px;height:21px;margin-right:6px}}
@media (max-width:760px){.table.tn-stack td[data-label="Order"] small{display:none}}

/* v12.2 - brand logo badges; icon + order number on ONE row */
.tn-ch.tn-ch-img{background:#fff!important;border:1px solid #e3e9f5;border-radius:7px;width:23px;height:23px;padding:2px;box-shadow:0 2px 6px -3px rgba(15,30,70,.35)}
.tn-ch.tn-ch-img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:4px}
td[data-label="Order"]{white-space:nowrap}
td[data-label="Order"] br,td[data-label="Order"] small{display:none!important}
td[data-label="Order"] .tn-ch,td[data-label="Sale / Order"] .tn-ch{vertical-align:middle}
td[data-label="Courier / Tracking"] .tn-ch,td[data-label="Courier"] .tn-ch{margin-right:6px;vertical-align:middle}
@media (max-width:760px){.tn-ch.tn-ch-img{width:24px;height:24px}}

/* v8: order list pages instead of inner scroll */
body.tn-v8 #salesGrid .table-wrap{max-height:none}