:root{--y:#ffc422;--ink:#111827;--muted:#6b7280;--bg:#f5f7fb;--line:#e5e7eb;--blue:#2f9be8;--red:#d92d20;--green:#14804a}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}a{color:#1167a8;text-decoration:none}.top{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:28px;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;font-weight:700}.brand img{width:135px;max-height:42px;object-fit:contain}.top nav{display:flex;gap:18px;flex:1}.top nav a{color:#222;font-weight:600;font-size:14px}.user{font-size:13px;color:var(--muted)}.wrap{max-width:1280px;margin:28px auto;padding:0 20px}.page-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.page-title h1{margin:0;font-size:30px}.page-title p{margin:5px 0 0;color:var(--muted)}.card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.05);padding:20px;margin-bottom:20px}.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(4,1fr)}.kpi b{font-size:26px;display:block;margin-top:8px}.kpi span{color:var(--muted);font-size:13px}.btn{display:inline-block;border:0;border-radius:6px;background:var(--blue);color:#fff;padding:10px 16px;cursor:pointer;font-size:14px}.btn.secondary{background:#fff;color:#222;border:1px solid #cfd4dc}.btn.danger{background:var(--red)}.btn.yellow{background:var(--y);color:#111}.btn.sm{padding:6px 10px;font-size:12px}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #cfd4dc;border-radius:6px;background:#fff;font:inherit}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.form-grid .wide{grid-column:span 2}label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:10px 9px;border-bottom:1px solid var(--line);font-size:13px;text-align:left;vertical-align:top}th{background:#f8fafc;font-size:12px;text-transform:uppercase;color:#4b5563;position:sticky;top:0}.status{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}.paid,.confirmed,.received{background:#e7f6ee;color:var(--green)}.unpaid{background:#fdecec;color:var(--red)}.receivable{background:#fff4d6;color:#8a5b00}.cancelled{background:#fdecec;color:var(--red)}.tabs{display:flex;gap:18px;justify-content:center;font-weight:700;font-size:18px;margin:6px 0 22px}.tabs a{color:#111}.tabs a+a:before{content:'|';margin-right:18px}.report-box{max-width:760px;margin:auto}.flash{padding:12px 14px;border-radius:8px;background:#e7f6ee;margin-bottom:15px}.muted{color:var(--muted)}.right{text-align:right}.hide{display:none}@media(max-width:900px){.top{height:auto;align-items:flex-start;flex-wrap:wrap;padding:12px}.top nav{order:3;overflow:auto;width:100%;padding-bottom:4px}.kpis,.form-grid{grid-template-columns:1fr 1fr}.wrap{margin-top:18px}}@media(max-width:560px){.kpis,.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:span 1}}

/* Product catalogue */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.product-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.05)}.product-image{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:12px;border-bottom:1px solid var(--line)}.product-image img{width:100%;height:100%;object-fit:contain}.product-card-body{padding:15px}.product-code{font-size:18px;font-weight:800;margin-bottom:7px}.product-desc{font-size:13px;line-height:1.45;color:#4b5563;min-height:58px}.product-meta{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.product-meta span{display:flex;flex-direction:column;gap:4px}.product-meta b{font-size:14px;color:var(--ink)}
/* Admin */
.admin-product-form textarea{resize:vertical}.product-filter{display:grid;grid-template-columns:minmax(240px,1fr) 180px auto;gap:10px;align-items:center}.admin-thumb{width:72px;height:72px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px}.type-pill{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}.type-pill.product{background:#e7f6ee;color:var(--green)}.type-pill.operation{background:#eef2ff;color:#3949ab}.flash.error{background:#fdecec;color:var(--red)}td form{margin:0}.admin-kpis{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.product-grid{grid-template-columns:repeat(2,1fr)}.product-filter{grid-template-columns:1fr}.admin-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.product-grid{grid-template-columns:1fr}.admin-kpis{grid-template-columns:1fr}}

/* V1.2 navigation and dashboard */
.top{gap:22px}.top .brand{flex:0 0 auto}.top .brand img{transition:transform .25s ease}.top .brand img:hover{transform:scale(1.03)}
.main-nav{display:flex;align-items:center;gap:0!important;flex:1;white-space:nowrap}.main-nav a{position:relative;padding:10px 12px;color:#222!important;font-weight:700!important;transition:transform .18s ease,color .18s ease,background .18s ease;border-radius:7px}.main-nav a:hover{transform:translateY(-2px);background:#fff8dc;color:#8a5b00!important}.main-nav a:after{content:'|';position:absolute;right:-2px;color:#b7bdc7;transform:none}.main-nav a:last-child:after{display:none}
.dashboard-kpis{grid-template-columns:repeat(3,1fr)}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-heading h2{margin:0}.cancelled-row{opacity:.62;background:#fff8f8}.total-row td{background:#f8fafc;border-top:2px solid #d1d5db}.check-label{display:flex;align-items:center;gap:8px;padding-top:30px}.check-label input{width:auto}.type-pill.admin{background:#fff4d6;color:#8a5b00}.type-pill.user{background:#eef2ff;color:#3949ab}.admin-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.admin-kpis{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.main-nav{order:3;width:100%;overflow:auto;padding-bottom:4px}.main-nav a{padding:8px 12px}.dashboard-kpis{grid-template-columns:1fr 1fr}.admin-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.dashboard-kpis,.admin-action-grid{grid-template-columns:1fr}}


/* V1.3 status + responsive refinements */
.status.confirmed,.status.paid{background:#e7f6ee;color:var(--green);border:1px solid #b7e4ca}
.status.cancelled,.status.unpaid{background:#fdecec;color:var(--red);border:1px solid #f3b7b2}

/* Keep wide business tables usable on phones without breaking layout */
.table-wrap{-webkit-overflow-scrolling:touch;max-width:100%}
.table-wrap table{min-width:760px}

/* Fluid content and controls */
img{max-width:100%}
.wrap{width:100%}
input,select,textarea,button{max-width:100%}

@media(max-width:900px){
  .top{position:relative}
  .top .user{margin-left:auto}
  .page-title{align-items:flex-start;gap:12px}
  .card{padding:16px}
  .report-box{max-width:100%}
}

@media(max-width:640px){
  body{font-size:14px}
  .wrap{padding:0 12px;margin:14px auto}
  .top{padding:10px 12px;gap:10px}
  .top .brand img{width:115px}
  .top .user{font-size:12px}
  .main-nav{display:flex;overflow-x:auto;scrollbar-width:thin;white-space:nowrap}
  .main-nav a{flex:0 0 auto;padding:8px 10px}
  .page-title{display:flex;flex-direction:column;align-items:stretch}
  .page-title h1{font-size:25px}
  .page-title .btn{width:100%;text-align:center}
  .dashboard-kpis,.kpis,.admin-kpis{grid-template-columns:1fr}
  .kpi b{font-size:23px}
  .card{border-radius:10px;padding:14px}
  .tabs{font-size:15px;gap:10px;overflow-x:auto;justify-content:flex-start;white-space:nowrap;padding-bottom:6px}
  .tabs a+a:before{margin-right:10px}
  .actions{align-items:stretch}
  .actions .btn,.actions button,.actions input,.actions select{width:100%}
  .product-meta{flex-direction:column}
  th,td{padding:9px 8px}
}

@media(max-width:420px){
  .top .user{width:100%;margin-left:0}
  .main-nav{order:4}
  .product-card-body{padding:12px}
}

/* V1.4 Expense + Accounts Receivable */
.module-heading{margin:0 0 16px}.expense-submit,.receivable-submit{display:flex;align-items:flex-end}.expense-submit .btn,.receivable-submit .btn{width:100%}.expense-kpis,.receivable-kpis{grid-template-columns:repeat(2,1fr);max-width:760px}.expense-summary{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.expense-summary h3{margin:0 0 12px}.summary-cards{display:flex;gap:10px;flex-wrap:wrap}.summary-item{min-width:170px;background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:11px 13px}.summary-item span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.summary-item b{font-size:15px}@media(max-width:760px){.expense-kpis,.receivable-kpis{grid-template-columns:1fr;max-width:none}.expense-submit,.receivable-submit{align-items:stretch}}

/* V1.4.1 Month selector */
.month-filter-card{padding:14px 18px}
.month-filter{display:flex;align-items:flex-end;gap:12px;max-width:520px}
.month-filter>div:first-child{flex:1}
.month-filter-actions{display:flex;gap:8px;align-items:center}
@media(max-width:560px){
  .month-filter{flex-direction:column;align-items:stretch;max-width:none}
  .month-filter-actions{width:100%;flex-direction:column}
  .month-filter-actions .btn{width:100%;text-align:center}
}

/* V1.5 Customers */
.customer-submit{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}.customer-search{display:flex;align-items:flex-end;gap:12px}.customer-search>div:first-child{flex:1}.customer-search-actions{display:flex;gap:8px}.row-operations{display:flex;gap:6px;flex-wrap:wrap;min-width:390px}.row-operations form{display:inline}.customer-detail-kpis{grid-template-columns:repeat(3,1fr)}.customer-profile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.customer-profile>div{display:flex;flex-direction:column;gap:6px;padding:12px;background:#f8fafc;border:1px solid var(--line);border-radius:9px}.customer-profile strong{font-size:12px;text-transform:uppercase;color:var(--muted)}@media(max-width:760px){.customer-search{flex-direction:column;align-items:stretch}.customer-search-actions{width:100%;flex-direction:column}.customer-search-actions .btn{width:100%;text-align:center}.customer-detail-kpis{grid-template-columns:1fr}.customer-profile{grid-template-columns:1fr}.row-operations{min-width:360px}.customer-submit{align-items:stretch}.customer-submit .btn{width:100%;text-align:center}}

/* V1.6 Sales */
.sale-entry-grid{display:grid;grid-template-columns:1.1fr 2fr repeat(5,minmax(100px,.8fr));gap:12px;align-items:end}.sale-desc{min-width:220px}.sale-add{display:flex;align-items:flex-end}.sale-add .btn{width:100%}.sale-help{margin:14px 0 0;line-height:1.5}.sale-total-row{display:flex;justify-content:flex-end;gap:18px;align-items:center;font-size:20px;margin:18px 0}.sale-save-actions{justify-content:flex-end}.sale-line-ops{min-width:140px}.sales-filter{display:grid;grid-template-columns:2fr 1fr auto;gap:12px;align-items:end}.sales-filter-actions{display:flex;gap:8px;flex-wrap:wrap}.sales-kpis{grid-template-columns:repeat(3,1fr)}.sales-ops{min-width:390px}.invoice-layout{grid-template-columns:2fr 1fr}
@media(max-width:1100px){.sale-entry-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.sale-desc{grid-column:span 2}.sales-filter{grid-template-columns:1fr 1fr}.sales-filter-actions{grid-column:1/-1}.invoice-layout{grid-template-columns:1fr}}
@media(max-width:700px){.sale-entry-grid{grid-template-columns:1fr 1fr}.sale-desc{grid-column:1/-1}.sales-filter{grid-template-columns:1fr}.sales-filter-actions{grid-column:auto;flex-direction:column}.sales-filter-actions .btn{width:100%;text-align:center}.sales-kpis{grid-template-columns:1fr}.sale-total-row{justify-content:space-between;font-size:17px}.sale-save-actions{flex-direction:column}.sale-save-actions .btn{width:100%;text-align:center}.sales-ops{min-width:360px}}
@media(max-width:430px){.sale-entry-grid{grid-template-columns:1fr}.sale-desc{grid-column:auto}}

/* V1.6.1 configurable sales settings */
.settings-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 20px}
.settings-check{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;padding:10px;background:#f8fafc;cursor:pointer}
.settings-check input{width:auto;margin-top:3px}.settings-check span{display:flex;flex-direction:column;gap:3px}.settings-check small{color:var(--muted);font-size:12px}
@media(max-width:850px){.settings-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.settings-product-grid{grid-template-columns:1fr}}

/* V1.6.2 Sales refinements */
.sale-entry-grid textarea{width:100%;resize:vertical;min-height:76px}
.sale-save-actions{flex-wrap:wrap}
@media(max-width:700px){.sale-save-actions button,.sale-save-actions a{width:100%;text-align:center}}

/* V1.6.3 Sales entry refinements */
.sale-customer-grid{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(240px,1fr) minmax(180px,.75fr) minmax(300px,1.45fr);gap:12px;align-items:end}
.sale-customer-grid input,.sale-customer-grid select{width:100%}
.sale-entry-grid{grid-template-columns:minmax(145px,.75fr) minmax(230px,1.25fr) repeat(5,minmax(105px,.7fr));align-items:end}
.sale-entry-grid .sale-desc textarea{height:52px;min-height:52px;max-height:95px;line-height:1.2;padding:8px 10px;resize:vertical}
@media(max-width:1150px){.sale-customer-grid{grid-template-columns:1fr 1fr}.sale-entry-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.sale-desc{grid-column:span 2}}
@media(max-width:700px){.sale-customer-grid{grid-template-columns:1fr}.sale-entry-grid{grid-template-columns:1fr 1fr}.sale-desc{grid-column:1/-1}}
@media(max-width:430px){.sale-entry-grid{grid-template-columns:1fr}.sale-desc{grid-column:auto}}

/* V1.6.4 requested customer layout */
.sale-customer-grid.requested-layout{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);
  gap:14px 16px;
  align-items:end;
}
.requested-layout .invoice-date-field{grid-column:1 / 2}
.requested-layout .customer-search-field{grid-column:1 / 2}
.requested-layout .customer-name-field{grid-column:2 / 3}
.requested-layout .customer-phone-field{grid-column:1 / 2}
.requested-layout .customer-address-field{grid-column:2 / 3}
.requested-layout .invoice-id-field{grid-column:1 / 2}
.requested-layout input,.requested-layout select,.requested-layout textarea{width:100%}
.requested-layout .customer-address-field textarea{
  min-height:82px;
  height:82px;
  resize:vertical;
  line-height:1.35;
}
@media(max-width:760px){
  .sale-customer-grid.requested-layout{grid-template-columns:1fr}
  .requested-layout .invoice-date-field,
  .requested-layout .customer-search-field,
  .requested-layout .customer-name-field,
  .requested-layout .customer-phone-field,
  .requested-layout .customer-address-field,
  .requested-layout .invoice-id-field{grid-column:1}
}

/* V1.6.5 force requested Sales customer form layout */
@media (min-width:761px){
  .card .sale-customer-grid.requested-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "date empty"
      "search name"
      "phone address" !important;
    column-gap:18px !important;
    row-gap:14px !important;
    align-items:start !important;
  }
  .sale-customer-grid.requested-layout .invoice-date-field{grid-area:date !important;grid-column:auto !important}
  .sale-customer-grid.requested-layout .customer-search-field{grid-area:search !important;grid-column:auto !important}
  .sale-customer-grid.requested-layout .customer-name-field{grid-area:name !important;grid-column:auto !important}
  .sale-customer-grid.requested-layout .customer-phone-field{grid-area:phone !important;grid-column:auto !important}
  .sale-customer-grid.requested-layout .customer-address-field{grid-area:address !important;grid-column:auto !important}
  .sale-customer-grid.requested-layout .invoice-id-field{grid-column:1 !important}
}
.sale-customer-grid.requested-layout label{display:block;margin-bottom:6px}
.sale-customer-grid.requested-layout input,
.sale-customer-grid.requested-layout select,
.sale-customer-grid.requested-layout textarea{
  width:100% !important;
  box-sizing:border-box;
}
.sale-customer-grid.requested-layout .customer-address-field textarea{
  min-height:92px !important;
  height:92px !important;
  resize:vertical;
}
@media(max-width:760px){
  .card .sale-customer-grid.requested-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "date"
      "search"
      "name"
      "phone"
      "address" !important;
  }
}

/* V1.7 Invoice Print configuration */
.payment-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.payment-admin-option{border:1px solid var(--line);background:#f8fafc;border-radius:10px;padding:14px}
.payment-admin-option h3{margin-top:0}
.payment-admin-option label{display:block;margin-top:10px}
.payment-admin-option input{width:100%}
.settings-large-textarea{width:100%;min-height:180px;resize:vertical}
.settings-qr-preview{max-width:180px;max-height:180px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px}
@media(max-width:900px){.payment-admin-grid{grid-template-columns:1fr}}

/* V1.8 Reporting */
.report-header{text-align:center;margin:10px 0 18px}.report-header h1{font-size:40px;margin:0 0 6px}.report-header p{margin:0;color:var(--muted)}
.report-tabs{display:flex;justify-content:center;gap:8px;margin:0 auto 18px}.report-tabs a{padding:10px 22px;border:1px solid var(--line);border-radius:9px;background:#fff;color:inherit;text-decoration:none;font-weight:700;transition:.18s ease}.report-tabs a:hover{transform:translateY(-1px)}.report-tabs a.active{background:var(--accent);border-color:var(--accent);color:#111}
.report-filter-card{max-width:950px;margin:0 auto 22px}.report-filter{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}.report-filter-actions{display:flex;gap:8px;flex-wrap:wrap}
.report-section-title{display:flex;justify-content:space-between;align-items:end;margin:26px 0 12px}.report-section-title h2{margin:0 0 4px}.report-section-title p{margin:0;color:var(--muted)}
.report-kpis-primary{grid-template-columns:repeat(3,1fr)}.report-kpis-secondary{grid-template-columns:repeat(3,1fr);max-width:980px}.report-kpis .kpi small{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.report-row-actions{min-width:210px}.report-expense-total td{background:#fff8e6}.report-net-total td{background:#eefbf2}
.collection-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.collection-summary-item{padding:14px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}.collection-summary-item span,.collection-summary-item small{display:block}.collection-summary-item span{font-weight:700}.collection-summary-item b{display:block;font-size:20px;margin:6px 0}.collection-summary-item small{color:var(--muted)}
.receipt-search{display:flex;gap:10px;align-items:end;max-width:620px}.receipt-search>div{flex:1}.receipt-search .btn{height:fit-content}
@media(max-width:900px){.report-kpis-primary{grid-template-columns:repeat(2,1fr)}.collection-summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.report-header h1{font-size:32px}.report-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.report-tabs a{text-align:center;padding:9px 8px}.report-filter{grid-template-columns:1fr}.report-filter-actions{flex-direction:column}.report-filter-actions .btn{width:100%;text-align:center}.report-kpis-primary,.report-kpis-secondary{grid-template-columns:1fr}.collection-summary-grid{grid-template-columns:1fr}.receipt-search{flex-direction:column;align-items:stretch}.receipt-search .btn{width:100%}}

/* V1.9 Product Performance */
.report-filter:has(select[name="product"]){grid-template-columns:1fr 1fr auto}
.product-kpis{grid-template-columns:repeat(3,1fr)}
.comparison-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.comparison-card{border:1px solid var(--line);border-radius:10px;background:#f8fafc;padding:14px}.comparison-card span,.comparison-card small,.comparison-card em{display:block}.comparison-card b{font-size:21px;margin:7px 0;display:block}.comparison-card small{color:var(--muted)}.comparison-card em{font-style:normal;font-weight:700;margin-top:7px}.comparison-card .up{color:#17833d}.comparison-card .down{color:#c43131}.comparison-card .neutral{color:var(--muted)}
.management-highlights{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}.highlight-card span,.highlight-card small{display:block}.highlight-card span{color:var(--muted);font-size:12px;text-transform:uppercase;font-weight:700}.highlight-card b{display:block;font-size:24px;margin:7px 0}.highlight-card small{color:var(--muted)}
.visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.bar-chart{display:flex;flex-direction:column;gap:11px}.bar-row{display:grid;grid-template-columns:72px minmax(100px,1fr) 115px;gap:10px;align-items:center}.bar-label{font-weight:700}.bar-track{height:12px;background:#edf1f6;border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:#2f9be8;border-radius:999px}.profit-bars .bar-fill{background:#27a463}.qty-bars .bar-fill{background:#8d69d6}.box-bars .bar-fill{background:#e3a32c}.bar-row b{text-align:right;font-size:12px}
.trend-chart-wrap{overflow-x:auto}.trend-chart{width:100%;min-width:650px;height:300px}.trend-grid{stroke:#e6eaf0;stroke-width:1}.trend-label{font-size:12px;fill:#687386}.trend-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.trend-revenue{stroke:#2f9be8}.trend-profit{stroke:#27a463}.trend-boxes{stroke:#e3a32c}.trend-dot{stroke:#fff;stroke-width:2}.revenue-dot{fill:#2f9be8}.profit-dot{fill:#27a463}.boxes-dot{fill:#e3a32c}.trend-legend{display:flex;gap:18px;justify-content:center;margin-top:8px}.trend-legend span{display:flex;align-items:center;gap:6px;font-size:12px}.trend-key{width:10px;height:10px;border-radius:50%;display:inline-block}.trend-key.revenue{background:#2f9be8}.trend-key.profit{background:#27a463}.trend-key.boxes{background:#e3a32c}
@media(max-width:1100px){.management-highlights{grid-template-columns:repeat(3,1fr)}.comparison-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.product-kpis{grid-template-columns:repeat(2,1fr)}.visual-grid{grid-template-columns:1fr}.report-filter:has(select[name="product"]){grid-template-columns:1fr 1fr}.report-filter:has(select[name="product"]) .report-filter-actions{grid-column:1/-1}}
@media(max-width:700px){.product-kpis,.comparison-grid,.management-highlights{grid-template-columns:1fr}.report-filter:has(select[name="product"]){grid-template-columns:1fr}.report-filter:has(select[name="product"]) .report-filter-actions{grid-column:auto}.bar-row{grid-template-columns:58px minmax(90px,1fr) 92px;gap:7px}.trend-legend{flex-wrap:wrap}}

/* V1.9.1 Product report QA/reconciliation */
.reconciliation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.reconciliation-grid>div{padding:13px;border:1px solid var(--line);border-radius:9px;background:#f8fafc}
.reconciliation-grid span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.reconciliation-grid b{display:block;font-size:18px}
.reconciliation-grid .reconciled{color:#17833d}.reconciliation-grid .not-reconciled{color:#c43131}
.reconciliation-ops{margin-top:8px}.reconciliation-note{margin:14px 0 0;line-height:1.5}
@media(max-width:900px){.reconciliation-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.reconciliation-grid{grid-template-columns:1fr}}

/* V1.10 Responsive header */
.responsive-top{position:relative}
.responsive-top .mobile-top-row{display:contents}
.mobile-menu-toggle{display:none}

@media(max-width:760px){
  .responsive-top{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:8px 12px !important;
    min-height:auto !important;
    overflow:visible !important;
  }
  .responsive-top .mobile-top-row{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
  }
  .responsive-top .brand{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .responsive-top .brand img{
    width:auto !important;
    max-width:135px !important;
    max-height:52px !important;
    object-fit:contain;
    display:block;
  }
  .responsive-top .brand span{
    font-size:12px;
    white-space:nowrap;
  }
  .responsive-top .user{
    margin:0 !important;
    font-size:13px;
    white-space:nowrap;
    text-align:right;
  }
  .mobile-menu-toggle{
    display:block;
    width:100%;
    margin-top:8px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    padding:9px 12px;
    font:inherit;
    font-weight:700;
    text-align:left;
    cursor:pointer;
  }
  .responsive-top .main-nav{
    display:none !important;
    width:100% !important;
    margin:7px 0 0 !important;
    padding:5px !important;
    overflow:visible !important;
    white-space:normal !important;
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
  }
  .responsive-top .main-nav.mobile-open{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
  }
  .responsive-top .main-nav a{
    display:block !important;
    width:100% !important;
    padding:10px 12px !important;
    margin:0 !important;
    border-radius:7px;
    text-decoration:none;
    transform:none !important;
  }
  .responsive-top .main-nav a:after{
    content:none !important;
  }
  .responsive-top .main-nav a:hover{
    transform:none !important;
  }
  .responsive-top .main-nav a.active{
    background:var(--accent);
    color:#111;
  }
}

/* V1.10 Branding settings */
.logo-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.logo-setting-box{border:1px solid var(--line);border-radius:10px;padding:15px;background:#f8fafc}
.logo-setting-box label{display:block;margin:10px 0 6px}
.logo-setting-box input{width:100%}
.settings-logo-preview{display:block;max-width:260px;max-height:110px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;margin-top:14px}
@media(max-width:700px){.logo-settings-grid{grid-template-columns:1fr}}

/* V1.10.1 Desktop header: user/logout below logo */
@media(min-width:761px){
  .responsive-top .mobile-top-row{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2px;
  }
  .responsive-top .brand{
    display:flex;
    align-items:center;
  }
  .responsive-top .user{
    margin:0 !important;
    width:100%;
    text-align:center;
    font-size:13px;
    line-height:1.25;
    white-space:nowrap;
  }
}

/* V1.10.2 Admin header cleanup */
.admin-body .responsive-top .brand span{display:none}



/* V1.10.3 Site icon settings */
.settings-icon-preview{display:block;width:72px;height:72px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px;margin-top:14px}
@media(min-width:900px){.logo-settings-grid{grid-template-columns:repeat(3,1fr)}}

/* V1.10.5 Product activation / sequence */
.product-active-check{display:flex!important;align-items:center;gap:8px;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#f8fafc}
.product-active-check input{width:auto!important}
.inactive-product-row{opacity:.62;background:#fafafa}

.sale-summary-row{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:18px 0}.sale-summary-row .sale-total-row{margin:0}.shipment-carton-field{width:280px}.shipment-carton-field label{display:block;font-weight:700;margin-bottom:6px}.shipment-carton-field input{width:100%}.shipment-carton-field small{display:block;margin-top:5px}@media(max-width:700px){.sale-summary-row{flex-direction:column;align-items:stretch}.shipment-carton-field{width:100%}}

/* V1.10.8 Retail/Wholesale shipping carton logic */
#boxCount[readonly]{background:#f4f6f8;color:#4d5968}

/* V1.11.6 Product catalogue commercial values */
.product-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:10px}
.product-meta span:nth-child(2){text-align:center;align-items:center}
.product-meta span:last-child{text-align:right;align-items:flex-end}
@media(max-width:520px){.product-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.product-meta b{font-size:13px}.product-meta{font-size:11px}}

/* V1.11.7 Product Performance separate six-month trend charts */
.product-trend-card{padding-bottom:22px}
.trend-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:6px 0 18px}
.trend-summary{border:1px solid #e3e7ed;border-radius:12px;background:#f8fafc;padding:11px 13px;min-width:0}
.trend-summary span{display:block;color:#6b7280;font-size:12px;margin-bottom:5px}
.trend-summary b{display:block;font-size:16px;line-height:1.2;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-panel{border-top:1px solid #e7eaf0;padding-top:14px;margin-top:14px}
.trend-panel-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:3px}
.trend-panel-heading h3{margin:0;font-size:16px}
.trend-panel-heading p{margin:2px 0 0;color:#6b7280;font-size:12px}
.trend-chart-compact{height:250px;min-width:650px}
.trend-axis{stroke:#cfd5de;stroke-width:1}
.trend-scale-label{font-size:11px;fill:#687386}
.trend-margin-strip{display:grid;grid-template-columns:1.25fr repeat(6,1fr);gap:8px;align-items:stretch;margin-top:18px;padding-top:16px;border-top:1px solid #e7eaf0}
.trend-margin-strip>span{border:1px solid #e3e7ed;border-radius:10px;padding:9px 8px;text-align:center;background:#fff}
.trend-margin-strip .trend-margin-title{display:flex;align-items:center;justify-content:center;background:#f8fafc;font-weight:700;color:#374151}
.trend-margin-strip small{display:block;color:#6b7280;font-size:11px;margin-bottom:4px}
.trend-margin-strip b{font-size:13px}
@media(max-width:1000px){.trend-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.trend-margin-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.trend-margin-strip .trend-margin-title{grid-column:1/-1}}
@media(max-width:640px){.trend-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trend-summary b{font-size:14px}.trend-margin-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}