:root{--green:#4CAF50;--blue:#007bff;--red:#dc3545;--cyan:#17a2b8;--purple:#6f42c1;--bg:#f5f5f5;--container:#ffffff;--forms:#f9f9f9;--header:#f1f1f1}
*{box-sizing:border-box}
body{margin:20px;background:var(--bg);font-family:'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#333}
h1{font-size:26px;margin:0 0 16px}h2{font-size:22px;margin:16px 0}h3{font-size:20px;margin:12px 0}
.container{background:var(--container);padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);width:100%;max-width:1600px;margin:0 auto}
/* Use most of the viewport width on large screens */
@media (min-width: 1400px){
  .container{max-width:95vw}
}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tab-button{border:1px solid #ddd;background:#fff;padding:8px 16px;border-radius:20px;cursor:pointer;transition:all .2s ease}
.tab-button.active{border-color:var(--green);color:#fff;background:var(--green)}
.tab-content{display:none}.tab-content.active{display:block}
.card{background:var(--forms);padding:16px 20px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.05);margin-bottom:12px}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.form-grid input,.form-grid textarea{padding:8px;border:1px solid #ccc;border-radius:4px}
.btn-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.btn{padding:8px 16px;border:none;border-radius:4px;background:#e0e0e0;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px rgba(0,0,0,.05)}
.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--green);color:#fff}.btn.info{background:var(--blue);color:#fff}.btn.danger{background:var(--red);color:#fff}.btn.purple{background:var(--purple);color:#fff}.btn.cyan{background:var(--cyan);color:#fff}
.store-code-input{text-transform:uppercase}
.checkbox-inline{display:flex;align-items:center;gap:6px}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.tag{background:#f1f1f1;padding:6px 12px;border-radius:20px;font-size:12px;cursor:pointer}.tag.active{background:var(--green);color:#fff}
.spreadsheet-header{display:grid;background:var(--header);padding:6px;border-radius:8px;margin-top:8px;font-weight:600}
.index-header{grid-template-columns:1fr 1fr 2fr auto auto}
.encore-header{grid-template-columns:1fr 1fr 2fr 1.5fr auto}
.companies-header{grid-template-columns:1.5fr 1.5fr 1fr auto}
.history-header{grid-template-columns:1fr 1fr 2fr 1.5fr 1fr 1.2fr}
.referto-header{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr auto}
.list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.product-item{display:grid;grid-template-columns:inherit;background:#fff;border-radius:8px;padding:4px 8px;box-shadow:0 2px 5px rgba(0,0,0,.05);align-items:center;transition:all .2s ease;min-height:42px}
.product-item.highlight{border:2px solid var(--green)}
.cell{padding:2px 6px;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-group{display:flex;gap:6px;flex-wrap:wrap}
.btn{padding:6px 10px}
.cell.strong{font-weight:700}
/* Bold important columns across lists */
.product-item .cell[data-label="Store Code"],
.product-item .cell[data-label="Supplier Reference"]{
  font-weight:700;
}

/* Compact, thin row layout for Index and Encore */
.product-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:4px 8px;
  margin-bottom:4px;
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.product-row.highlight{border-color:var(--green)}
.product-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.product-header{display:flex;align-items:center;gap:8px;white-space:nowrap}
.badge{display:inline-flex;align-items:center;max-width:260px;padding:2px 8px;border-radius:12px;background:#f1f1f1;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge.store-code{background:#eaf7ee;color:#1b5e20}
.badge.supplier-ref{background:#eef3ff;color:#0b3d91}
.color-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:0.8rem;font-weight:600;color:#fff}
.color-badge.green{background-color:#28a745}
.color-badge.blue{background-color:#007bff}
.color-badge.red{background-color:#dc3545}
.color-badge.yellow{background-color:#ffc107;color:#000}
/* Ensure badge-like pills don't force lowercase; prefer uppercase for visibility */
.badge, .tag, .color-badge{ text-transform: uppercase; letter-spacing: .02em }

/* Companies tab: do not force lowercase on names/badges */
.company-name, .company-badge, .company-pill, .company-tag { text-transform: none !important }
/* Also target current markup cells for safety */
.company-row .cell[data-label="Company Name"],
.company-row .cell[data-label="Contact Person"],
.company-row .cell[data-label="Phone"] { text-transform: none !important }
/* Ensure the selected company display preserves original case */
.current-company-name{ text-transform: none !important }
.product-note{font-size:12px;opacity:.8;line-height:1.2;max-height:2.4em;overflow:hidden}
.product-actions{display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
.product-actions .btn{padding:6px 10px}

/* Soft highlight background for full Colory row */
.product-row.row-colory{
  background-color:#ffeaa7; /* stronger light yellow for clearer highlight */
}
.current-company{display:flex;gap:8px;align-items:center;margin:8px 0}.current-company-title{font-weight:600}.current-company-name{padding:4px 10px;background:#eef;border-radius:4px}
.company-row.selected{background:#d1ecf1;border-left:4px solid var(--cyan)}
.bulk-import-textarea{width:100%;min-height:150px;padding:8px;border:1px solid #ccc;border-radius:4px;background:#fff}
.table-preview table{width:100%;border-collapse:collapse}.table-preview th,.table-preview td{border:1px solid #ddd;padding:8px}
.preview-duplicate{background:#ffebee}
.info-box{margin:8px 0;padding:8px;background:#fff;border:1px solid #ddd;border-radius:4px}
.modal{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);align-items:center;justify-content:center;padding:10px}
.modal .modal-content{background:#fff;border-radius:8px;padding:16px;max-width:900px;width:100%;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.modal .modal-content.large{max-width:1000px}
.modal.show{display:flex}
.notification{position:fixed;top:20px;right:20px;z-index:9999;background:#333;color:#fff;padding:10px 16px;border-radius:4px;opacity:0;transition:opacity .3s ease}
.notification.show{opacity:1}.notification.success{background:var(--green)}.notification.error{background:var(--red)}.notification.info{background:var(--blue)}
@media (max-width:767px){.spreadsheet-header{display:none}.product-item{grid-template-columns:1fr}.cell{position:relative;padding-left:110px;min-height:24px}.cell::before{content:attr(data-label);position:absolute;left:8px;top:4px;font-size:12px;color:#666}.btn-group{flex-direction:column}.form-grid{grid-template-columns:1fr}}

/* ReferTo modal table */
.refer-table{width:100%;border-collapse:collapse;font-size:.9rem}
.refer-table th,.refer-table td{border:1px solid #ddd;padding:4px 8px;text-align:left;vertical-align:middle}
.refer-table thead th{background-color:#f5f5f5;font-weight:600}
.refer-table tbody tr:nth-child(even){background-color:#fafafa}