/* Suppliers view */
#view-suppliers{display:flex;flex:1;overflow:hidden}

/* Sidebar */
#sidebar{width:280px;min-width:280px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100%}
.sidebar-header{padding:16px;border-bottom:1px solid var(--border)}
.sidebar-header h2{font-size:14px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.sidebar-header h2 .count{font-size:11px;background:var(--border);padding:1px 7px;border-radius:10px;font-weight:500;color:var(--text-dim)}
#search{width:100%;padding:7px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:13px;outline:none}
#search:focus{border-color:var(--accent)}
#supplier-list{flex:1;overflow-y:auto;padding:8px}
.state-group{margin-bottom:4px}.state-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-faint);padding:8px 8px 4px;user-select:none}
.supplier-item{padding:8px 10px;border-radius:var(--radius);cursor:pointer;font-size:13px;color:var(--text-dim);display:flex;align-items:center;gap:8px;transition:background .1s}
.supplier-item:hover{background:var(--surface2);color:var(--text)}
.supplier-item.active{background:rgba(92,168,92,.1);color:var(--accent)}
.supplier-item.selected{background:rgba(92,168,92,.08);color:var(--text)}
.supplier-item.selected:hover{background:rgba(92,168,92,.12)}
.btn-orange{background:var(--orange);color:#fff;border-color:var(--orange)}
.supplier-item .sname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supplier-item .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dot-real{background:var(--green)}.dot-mm{background:var(--yellow)}
.supplier-item .link-icon{font-size:10px;color:var(--orange);flex-shrink:0}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border)}
.sidebar-footer button{width:100%;padding:8px;background:var(--green);color:#fff;font-weight:600;border:none;border-radius:var(--radius);font-size:13px}

/* Main */
#main{flex:1;overflow-y:auto}
#empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-faint);font-size:14px}
#detail{display:none}#detail.active{display:block}

.detail-header{padding:20px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg);z-index:10}
.detail-header h1{font-size:20px;font-weight:700;letter-spacing:-.4px}
.detail-header .handle{font-family:var(--font);font-size:12px;color:var(--text-dim);margin-top:2px}
.header-actions{display:flex;gap:8px}

/* Save zones */
.save-zone{border:1px solid var(--border);border-radius:var(--radius-lg);padding:4px 20px 16px;margin-bottom:16px;background:var(--surface)}
.save-zone-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);padding:8px 0 4px;border-bottom:1px solid var(--border);margin-bottom:8px}

/* Sections */
.section{padding:20px 28px;border-bottom:1px solid var(--border)}
.section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-title .badge{font-size:10px;background:var(--border);padding:1px 6px;border-radius:8px;font-weight:500;text-transform:none;letter-spacing:0}

/* Product table */
.product-table{width:100%;border-collapse:collapse;font-size:13px}
.product-table th{text-align:left;padding:8px 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-faint);border-bottom:1px solid var(--border);background:var(--surface)}
.product-table td{padding:6px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.product-table tr:hover td{background:var(--surface2)}
.cat-badge{font-size:11px;padding:2px 8px;border-radius:8px;font-weight:600;display:inline-block}
.cat-mulch{background:rgba(92,168,92,.1);color:#5CA85C}.cat-soil{background:rgba(184,134,11,.1);color:#8b6914}.cat-stone{background:rgba(120,113,100,.12);color:#6b6152}.cat-firewood{background:rgba(184,71,42,.1);color:#b8472a}
.product-table input{width:100%;padding:4px 6px;background:transparent;border:1px solid transparent;border-radius:3px;color:var(--text);font-size:13px;outline:none}
.product-table input:hover{border-color:var(--border)}.product-table input:focus{border-color:var(--accent);background:var(--surface)}
.product-table input.money{font-family:var(--font);font-size:12px;width:80px;text-align:right}
.product-table input.combo{min-width:120px;font-size:12px}
.product-table .actions{text-align:right;white-space:nowrap}
.product-table .actions button{background:none;border:none;color:var(--text-faint);font-size:12px;padding:4px 6px;border-radius:3px;cursor:pointer}
.product-table .actions button:hover{color:var(--text);background:var(--surface2)}
.product-table .actions button.btn-save-product{color:var(--accent);font-weight:600}
.product-table .actions button.btn-save-product:hover{background:var(--accent);color:#fff}
.product-table .actions button.del:hover{color:var(--red);background:var(--red-dim)}
.product-table tr.dirty{background:rgba(5,150,105,.04)}
.product-table tr.dirty .btn-save-product{color:#fff;background:var(--accent);padding:4px 10px;border-radius:4px}
.product-table select{padding:4px 6px;background:transparent;border:1px solid transparent;border-radius:3px;color:var(--text);font-size:12px;outline:none}
.product-table select:hover{border-color:var(--border)}.product-table select:focus{border-color:var(--accent);background:var(--surface)}
.product-table tr.new-row{background:rgba(14,165,233,.06);border-left:3px solid var(--accent)}
.product-table tr.new-row td{padding:6px 8px}
.no-products{color:var(--text-faint);font-size:13px;padding:20px 0;text-align:center}
.btn-save-all{font-size:14px;padding:8px 24px;font-weight:700}

/* Cost tiers button */
.btn-tiers{transition:background .15s,color .15s}
.btn-tiers:hover{background:var(--surface2)}

/* Zip pills */
.zip-pill{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;font-family:var(--font);font-weight:600;letter-spacing:.3px}
.zip-pill.zip-active{background:rgba(92,168,92,.12);color:#3d7a3d}
.zip-pill.zip-inactive{background:rgba(192,57,43,.08);color:#a03020}
.zip-pill.zip-unknown{background:var(--surface2);color:var(--text-dim)}

/* Supplier note log */
.note-entry{display:flex;gap:10px;padding:10px 12px;border-left:3px solid var(--border);margin-bottom:6px;border-radius:0 var(--radius) var(--radius) 0;background:var(--surface);transition:background .15s}
.note-entry:hover{background:var(--surface2)}
.note-entry.tag-delivery{border-left-color:var(--green)}
.note-entry.tag-pricing{border-left-color:var(--yellow)}
.note-entry.tag-quality{border-left-color:var(--red)}
.note-entry.tag-other{border-left-color:var(--border-light)}
.note-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap;text-transform:uppercase;letter-spacing:.3px}
.note-tag.tag-delivery{background:rgba(92,168,92,.1);color:#3d7a3d}
.note-tag.tag-pricing{background:rgba(184,134,11,.1);color:#8b6914}
.note-tag.tag-quality{background:rgba(192,57,43,.08);color:#a03020}
.note-tag.tag-other{background:var(--surface2);color:var(--text-dim)}
.note-date{font-size:11px;color:var(--text-faint);font-family:var(--font);white-space:nowrap}
.note-text{font-size:13px;color:var(--text);flex:1;line-height:1.4}
.note-del{border:none;background:none;color:var(--text-faint);cursor:pointer;font-size:14px;padding:0 2px;line-height:1;opacity:0;transition:opacity .15s}
.note-entry:hover .note-del{opacity:1}
.note-del:hover{color:var(--red)}
.note-empty{font-size:12px;color:var(--text-faint);padding:12px 0;text-align:center}

/* Blackout date pills */
.blackout-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;font-size:11px;color:var(--text-dim);font-family:var(--font)}
.blackout-pill button{border:none;background:none;color:var(--text-faint);cursor:pointer;font-size:14px;padding:0 2px;line-height:1}
.blackout-pill button:hover{color:var(--red)}

/* Lead time editor */
.lt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.schedule-table{width:100%;border-collapse:collapse;font-size:13px}
.schedule-table th{text-align:left;padding:6px 8px;font-size:11px;font-weight:600;text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--border)}
.schedule-table td{padding:6px 8px;border-bottom:1px solid var(--border)}
.schedule-table input[type="time"]{background:var(--surface);border:1px solid var(--border);border-radius:3px;color:var(--text);padding:3px 6px;font-size:12px;outline:none}
.schedule-table input[type="number"]{background:var(--surface);border:1px solid var(--border);border-radius:3px;color:var(--text);padding:3px 6px;font-size:12px;width:50px;text-align:center;outline:none}
.schedule-table input[type="checkbox"]{accent-color:var(--accent)}
.blackout-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.blackout-tag{font-size:12px;padding:3px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;gap:4px;font-family:var(--font)}
.blackout-tag button{background:none;border:none;color:var(--red);font-size:14px;cursor:pointer;padding:0 2px}

/* Sync */
.sync-panel{display:flex;gap:12px;flex-wrap:wrap}
.sync-card{flex:1;min-width:260px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px}
.sync-card h4{font-size:13px;font-weight:600;margin-bottom:8px}
.sync-card .desc{font-size:12px;color:var(--text-dim);margin-bottom:12px}
.sync-opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sync-opts label{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:4px}
.sync-opts input[type="checkbox"]{accent-color:var(--accent)}
.sync-log{font-family:var(--font);font-size:11px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:10px;max-height:200px;overflow-y:auto;white-space:pre-wrap;color:var(--text-dim);display:none}
.sync-log.active{display:block;margin-top:10px}
.sync-log-tall{height:500px !important;max-height:500px !important;overflow-y:scroll !important}
.sync-log-wrap{position:relative}
.sync-log-copy{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:10px;font-weight:600;background:var(--surface);border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text-dim);opacity:0;transition:opacity .15s;pointer-events:none;z-index:1}
.sync-log-wrap:hover .sync-log-copy,.sync-log-copy.copied{opacity:1;pointer-events:auto}
.sync-log-copy.copied{color:var(--accent);border-color:var(--accent)}

/* Modal wide */
.modal-wide{width:700px}

/* Portal group manager (Admin tab editor reuses these) */
.group-list{margin-bottom:16px}
.group-item{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:8px}
.group-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.group-item-header input{background:var(--bg);border:1px solid var(--border);border-radius:3px;color:var(--text);padding:4px 8px;font-size:13px;font-weight:600;outline:none;width:200px}
.group-members{display:flex;flex-wrap:wrap;gap:4px}
.group-member-chip{font-size:11px;padding:3px 8px;background:var(--surface);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;gap:4px;font-family:var(--font)}
.group-member-chip button{background:none;border:none;color:var(--red);cursor:pointer;font-size:12px}
.group-add-row{margin-top:8px;position:relative}
.group-add-row .group-search{width:100%;padding:8px 12px;font-size:13px}
.group-dropdown{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:240px;overflow-y:auto;z-index:100;margin-top:4px}
.gdd-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;border-bottom:1px solid var(--surface2);font-size:13px}
.gdd-item:last-child{border-bottom:none}
.gdd-item:hover{background:var(--surface)}

/* Mobile */
@media(max-width:768px){
  #view-suppliers{flex-direction:column}
  #sidebar{width:100%;min-width:100%;height:auto;max-height:200px;border-right:none;border-bottom:1px solid var(--border)}
  #supplier-list{max-height:120px}
  .sidebar-footer{padding:8px 12px}
  #main{overflow-y:auto}
  .detail-header{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .detail-header h1{font-size:16px}
  .header-actions{width:100%}
  .header-actions .btn{flex:1;justify-content:center}
  .section{padding:14px 16px}
  .product-table{display:block;overflow-x:auto}
  .sync-panel{flex-direction:column}
  .sync-card{min-width:100%}
  .schedule-table{font-size:12px}
  .schedule-table th,.schedule-table td{padding:4px 6px}
}