/* Menggunakan shell, warna, kartu, dan tombol modal ERP yang sudah ada. */
#supplier-root > .section { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; }
.supplier-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:0; }
.supplier-count, .supplier-hint { color:var(--muted); font-size:.76rem; }
.supplier-btn { border:1px solid var(--border); border-radius:10px; padding:9px 13px; background:var(--card); color:var(--ink-soft); font-family:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
.supplier-btn--add { background:#E7F6EE; color:#1B7F4B; border-color:transparent; font-weight:700; }
.supplier-btn--danger { color:var(--red-dark); }
.supplier-btn:disabled { cursor:wait; opacity:.55; }
.supplier-btn:focus-visible, .supplier-name:focus-visible, .supplier-qr:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.supplier-scroll { overflow-x:auto; overflow-y:visible; scrollbar-width:none; border:1px solid var(--border); border-radius:12px; margin:-8px 0 12px; }
.supplier-scroll::-webkit-scrollbar { height:0; }
.supplier-floating-scroll { position:fixed; left:0; bottom:0; z-index:45; height:18px; overflow-x:scroll; overflow-y:hidden; scrollbar-color:#8C8C96 #ECECEF; scrollbar-width:auto; background:#ECECEF; border:1px solid #D7D7DC; border-radius:8px 8px 0 0; box-shadow:0 -2px 8px rgba(20,20,26,.10); }
.supplier-floating-scroll::-webkit-scrollbar { height:16px; }
.supplier-floating-scroll::-webkit-scrollbar-track { background:#ECECEF; border-radius:7px; }
.supplier-floating-scroll::-webkit-scrollbar-thumb { background:#8C8C96; border:3px solid #ECECEF; border-radius:999px; }
.supplier-floating-scroll::-webkit-scrollbar-thumb:hover { background:#686871; }
.supplier-floating-scroll[hidden] { display:none; }
.supplier-floating-scroll > div { height:1px; }
.supplier-mobile-search { display:none; }
.supplier-table { border-collapse:separate; border-spacing:0; width:max-content; font-size:.84rem; }
.supplier-table th { position:sticky; top:0; z-index:2; background:#F5F5F7; color:var(--ink-soft); text-align:left; font-size:.78rem; font-weight:800; white-space:nowrap; }
.supplier-table th, .supplier-table td { padding:10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.supplier-table td { min-width:110px; max-width:190px; white-space:pre-wrap; overflow-wrap:anywhere; }
.supplier-table th:first-child, .supplier-table td:first-child { min-width:42px; text-align:center; color:var(--muted); }
.supplier-table th:nth-child(2), .supplier-table td:nth-child(2) { position:sticky; left:0; width:180px; min-width:180px; max-width:180px; background:var(--card); z-index:1; border-right:1px solid var(--border); }
.supplier-table th:nth-child(2) { background:#F5F5F7; z-index:3; }
.supplier-table tbody tr:last-child td { border-bottom:0; }
.supplier-table tbody tr:hover td { background:#FFFAFA; }
.supplier-name { display:inline-flex; align-items:center; gap:6px; border:0; background:none; text-align:left; font:inherit; color:var(--ink); font-weight:700; cursor:pointer; }
.supplier-name:hover { color:var(--red-dark); }
.supplier-title { display:flex; align-items:center; gap:7px; min-width:0; width:100%; }
.supplier-edit-icon { width:14px; height:14px; flex-shrink:0; color:var(--muted); opacity:0; }
.supplier-cell:hover .supplier-edit-icon, .supplier-name:focus-visible .supplier-edit-icon { opacity:1; }
.supplier-links-cell { min-width:145px; }
.supplier-links { display:grid; gap:6px; }
.supplier-external-link { display:inline-flex; align-items:center; gap:6px; width:max-content; max-width:100%; color:#2563EB; font-weight:700; text-decoration:none; }
.supplier-external-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.supplier-external-link svg { width:15px; height:15px; flex:0 0 auto; }
.supplier-external-link:visited { color:#2563EB; }
.supplier-external-link:hover, .supplier-external-link:focus-visible { color:#1D4ED8; text-decoration:underline; }
.supplier-empty-cell { color:#A7A7AE; }
.supplier-prefix { display:inline-block; background:#F2F3F6; border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-family:ui-monospace,monospace; white-space:nowrap; }
.supplier-qr { border:1px solid var(--border); background:#fff; border-radius:8px; padding:4px; cursor:zoom-in; }
.supplier-qr img { display:block; width:48px; height:48px; object-fit:contain; }
.supplier-dialog { border:0; border-radius:var(--radius-lg); padding:24px; margin:auto; width: min(640px, calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; color:var(--ink); box-shadow:var(--shadow-card); }
.supplier-dialog::backdrop { background:rgba(27,32,51,.5); }
.supplier-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.supplier-dialog h2 { font-size:1.15rem; }
.supplier-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.supplier-field { display:flex; flex-direction:column; gap:6px; font-size:.76rem; font-weight:700; }
.supplier-field input:not([type=checkbox]), .supplier-field textarea { width:100%; min-width:0; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--bg); color:var(--ink); font-family:inherit; font-size:.83rem; font-weight:400; }
.supplier-field input:focus, .supplier-field textarea:focus { outline:2px solid #E4212B44; border-color:var(--red); }
.supplier-field textarea { resize:vertical; min-height:76px; }
.supplier-field--wide { grid-column:1/-1; }
.supplier-field small { font-size:.7rem; font-weight:400; color:var(--muted); }
.supplier-links-editor { gap:9px; }
.supplier-links-editor-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#supplier-links-list { display:grid; gap:8px; }
.supplier-link-entry { display:grid; grid-template-columns:minmax(120px, .8fr) minmax(180px, 1.5fr) auto; gap:8px; }
.supplier-link-entry input { width:100%; min-width:0; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--bg); color:var(--ink); font:400 .83rem inherit; }
.supplier-link-entry input:focus { outline:2px solid #E4212B44; border-color:var(--red); }
.supplier-form-error { color:var(--red-dark); font-size:.8rem; margin-top:14px; white-space:pre-wrap; }
.supplier-dialog .confirm-modal-actions { margin-top:20px; }
.supplier-delete { margin-top:18px; }
.supplier-qr-preview { width:110px; height:110px; object-fit:contain; border:1px solid var(--border); border-radius:8px; }
.supplier-qr-large { display:block; max-width:100%; max-height:65vh; object-fit:contain; margin:0 auto; }
.supplier-notice { background:#E7F6EE; color:#17683E; border-radius:10px; padding:12px; margin-bottom:14px; font-size:.8rem; }
.supplier-notice button { margin-left:12px; }
@media(max-width:600px) { .supplier-form-grid { grid-template-columns:1fr; } .supplier-dialog { padding:18px; } .supplier-table th:nth-child(2), .supplier-table td:nth-child(2) { width:160px; min-width:160px; max-width:160px; } .supplier-link-entry { grid-template-columns:1fr; } .supplier-link-entry .supplier-btn { width:max-content; } }
@media(max-width:900px) { #supplier-root > .section { padding:14px; } .supplier-mobile-search { display:block; width:100%; margin:12px 0; padding:11px 12px; border:1px solid var(--border); border-radius:10px; font:inherit; font-size:.8rem; background:var(--bg); } }
@media(max-width:859px) { .supplier-floating-scroll { bottom:calc(65px + var(--safe-bottom)); } html.aplikasi-menu .supplier-floating-scroll { bottom:0; } }