/* SeamLock Colors – WordPress Plugin
   All styles scoped to .sl-app to avoid theme conflicts */
.sl-app {
  --bg:#ffffff; --panel:#ffffff; --panel2:#f3f5f8; --border:#d8dde5;
  --text:#111318; --muted:#5a6372; --accent:#c07a00; --accent2:#0a66c2;
  --good:#0a7d4b; --bad:#b71c1c; --warn:#8a6d00;
  --row-hover:#f2f5fa; --row-selected:#dce7f5;
  --hit-bg:#fff2b2; --hit-fg:#3a2e00;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  padding: 12px 0 80px;
}
.sl-app * { box-sizing: border-box; }

.sl-app 
  *{box-sizing:border-box}
  
  
  header h1{font-size:16px;margin:0;font-weight:600;letter-spacing:.3px;color:var(--text)}
  header h1 .dog{color:var(--accent)}
  .tabs{display:flex;gap:4px;margin-left:12px}
  .tab{background:transparent;border:1px solid var(--border);color:var(--muted);
    padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px}
  .tab.active{background:var(--panel2);color:var(--text);border-color:#3a4354}
  .spacer{flex:1}
  .btn{background:var(--panel2);border:1px solid var(--border);color:var(--text);
    padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px}
  .btn:hover{border-color:#8e98a8;background:#eef1f5}
  .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
  .btn.primary:hover{filter:brightness(1.05)}
  .btn.danger{color:var(--bad);border-color:#d9b5b5}
  .btn.danger:hover{background:#fbeeee}
  .btn.ghost{background:transparent}
  
  .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.sl-app .toolbar input[type="search"], .sl-app .toolbar select, .sl-app .field input, .sl-app .field select, .sl-app .field textarea{
    background:var(--panel);border:1px solid var(--border);color:var(--text);
    padding:7px 10px;border-radius:6px;font-size:13px;outline:none}
  .toolbar input[type="search"]{min-width:280px;flex:1 1 320px;width:100%}
  .toolbar .search-wrap{position:relative;display:flex;flex:1 1 320px;min-width:280px}
  .toolbar .search-wrap input[type="search"]{padding-right:30px;flex:1 1 auto;min-width:0}
  /* Hide native clear buttons so our custom one is the only one visible */
  .toolbar .search-wrap input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
  .search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);
    background:transparent;border:none;color:var(--muted);font-size:18px;line-height:1;
    width:22px;height:22px;border-radius:50%;cursor:pointer;padding:0;display:flex;
    align-items:center;justify-content:center}
  .search-clear:hover{background:var(--panel2);color:var(--text)}
.sl-app .toolbar input[type="search"]:focus, .sl-app .field input:focus, .sl-app .field select:focus, .sl-app .field textarea:focus{
    border-color:var(--accent2);box-shadow:0 0 0 2px rgba(10,102,194,.15)}
  .chip{font-size:12px;color:var(--muted);padding:4px 8px;background:var(--panel);border:1px solid var(--border);border-radius:999px}
  /* Row-count chips in the tab buttons are hidden per UX preference. */
  #bdCount, #mfrCount{display:none}
  /* In viewer mode, hide add buttons and row edit actions. */
  .sl-app #bdAdd,
  .sl-app #mfrAdd,
  .sl-app .row-actions{display:none !important}
  /* Pill-style radio group (viewer only) — replaces the "Color Categories"
     <select> on the SeamLock Color Search page. */
  .radio-group{display:none;flex-wrap:wrap;align-items:center;gap:6px}
  .sl-app .radio-group{display:flex}
  .sl-app #mfrCategoryRadios{display:none !important}
  .sl-app #bdCategoryRadios{display:none !important}
  /* Viewer: search box gets its own full-width line above the filters. */
  .sl-app .toolbar .search-wrap{flex:1 1 100%}
  /* Inline "Search:" label — shown only on the viewer page. */
  .search-label{display:none}
  .sl-app .search-label{display:inline-flex;align-items:center;padding-right:8px;
    font-weight:600;font-size:13px;color:var(--text);white-space:nowrap}
  .radio-group .group-label{font-weight:600;font-size:13px;color:var(--text);margin-right:4px}
  .radio-group label{display:inline-flex;align-items:center;padding:4px 10px;
    border:1px solid var(--border);border-radius:14px;cursor:pointer;font-size:12px;
    background:var(--panel);color:var(--text);user-select:none;line-height:1.2}
  .radio-group label:hover{border-color:#8e98a8;background:var(--panel2)}
  .radio-group input[type=radio]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
  .radio-group label.checked{background:var(--accent2);color:#fff;border-color:var(--accent2)}
  /* Intro block above the tabs. */
  .intro{margin:4px 0 14px;color:var(--text)}
  .intro h2{font-size:20px;margin:0 0 2px;font-weight:700;letter-spacing:.2px}
  .intro h3{font-size:15px;margin:0 0 8px;color:var(--muted);font-weight:600}
  .intro ul{margin:6px 0 8px;padding-left:20px}
  .intro li{margin:2px 0}
  .intro p{margin:6px 0}
  .intro .disclaimer{font-size:12px;color:var(--muted);margin-top:8px;font-style:italic}
  .intro a{color:var(--accent2);text-decoration:underline;text-underline-offset:2px}
  .intro a:hover{color:var(--accent)}
  /* Wrapper gives us the rounded corners without putting overflow:hidden on the
     table itself (which would break sticky thead positioning). */
  #bdTableWrap, #mfrTableWrap{border:1px solid var(--border);border-radius:8px;background:var(--panel);overflow:visible}
  table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;background:var(--panel)}
  thead th{text-align:left;padding:8px 10px;font-weight:600;
    border-bottom:1px solid #2a2f36;
    position:sticky;top:52px;z-index:5;cursor:pointer;user-select:none;white-space:nowrap;
    box-shadow:0 1px 0 #2a2f36}
  thead th:first-child{border-top-left-radius:8px}
  thead th:last-child{border-top-right-radius:8px}
.sl-app thead th{background:#3a3f48 !important;color:#ffffff !important}
  thead th .sort{opacity:.5;margin-left:4px;font-size:10px}
  tbody td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
  tbody tr:hover{background:var(--row-hover)}
  tbody tr.selected{background:var(--row-selected)}
.sl-app tbody tr:nth-child(odd) td{background:#ffffff !important}
.sl-app tbody tr:nth-child(even) td{background:#d8d9db !important}
.sl-app tbody tr:hover td{background:var(--row-hover) !important}
.sl-app tbody tr.selected td{background:var(--row-selected) !important}
  .sw{display:inline-block;width:22px;height:22px;border-radius:4px;
    border:1px solid rgba(0,0,0,.25);vertical-align:middle;position:relative}
  /* On hover: pop a large preview of the color above the inline swatch, with
     the hex + RGB values overlaid at the bottom in a readable text color. */
  .sw:hover{z-index:10}
.sl-app .sw:hover::after{
    content:attr(data-info);
    position:absolute;left:50%;bottom:calc(100% + 6px);
    transform:translateX(-50%);
    background:var(--sw-bg);color:var(--sw-text,#fff);
    padding:144px 36px 20px;min-width:360px;text-align:center;
    border-radius:6px;border:1px solid rgba(0,0,0,.35);
    box-shadow:0 8px 22px rgba(0,0,0,.4);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;font-weight:700;letter-spacing:.3px;white-space:pre;
    pointer-events:none;z-index:20;line-height:1.5}
  /* Manufacturer Matches tab: triple-wide swatch, no hex text */
  #view-mfrs table .sw{width:66px}
  /* BigDog Colors tab: 4x-wide swatch, hex value hidden */
  #view-bigdog table .sw{width:88px}
  #view-bigdog tbody td .mono{display:none}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted)}
  a.bd-link{color:var(--accent2);text-decoration:underline;text-underline-offset:2px}
  a.bd-link:hover{color:var(--accent)}
  .row-actions{display:flex;gap:4px}
  .row-actions .btn{padding:3px 8px;font-size:12px}
  .pager{display:flex;gap:8px;align-items:center;margin-top:10px;color:var(--muted);font-size:12px}
  .modal-bg{position:fixed;inset:0;background:rgba(17,19,24,.45);display:none;align-items:center;justify-content:center;z-index:50}
  .modal-bg.open{display:flex}
  .modal{background:var(--panel);border:1px solid var(--border);border-radius:10px;
    width:min(680px,94vw);max-height:92vh;overflow:auto;padding:16px 18px}
  .modal h2{margin:0 0 10px;font-size:16px}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
  .field.full{grid-column:1/-1}
  .field input, .field select, .field textarea{color:var(--text);font-size:13px}
  .field .hexrow{display:flex;gap:6px;align-items:center}
  .field .hexrow input[type="color"]{width:40px;height:34px;padding:0;background:transparent;border:1px solid var(--border);border-radius:6px}
  .actions-row{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
  .hint{color:var(--muted);font-size:12px}
  .match-hit{background:var(--hit-bg);color:var(--hit-fg);border-radius:2px;padding:0 2px}
  .empty{padding:40px;text-align:center;color:var(--muted)}
  details.matches{margin-top:6px}
  details.matches summary{cursor:pointer;color:var(--accent2);font-size:12px}
  .match-list{margin:6px 0 0;padding:6px 10px;background:var(--panel2);border-radius:6px;border:1px solid var(--border)}
  .match-list div{padding:2px 0;border-bottom:1px dashed var(--border)}
  .match-list div:last-child{border-bottom:none}
  .badge{display:inline-block;background:var(--panel2);border:1px solid var(--border);color:var(--muted);
    padding:1px 6px;border-radius:999px;font-size:11px}
  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    background:var(--panel2);border:1px solid var(--border);color:var(--text);
    padding:10px 16px;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.15);display:none;z-index:100}
  .toast.show{display:block}
  /* BigDog editor — large color preview swatch */
  .bd-preview{height:140px;border-radius:6px;position:relative;overflow:hidden;
    border:1px solid rgba(0,0,0,.25);background:#888;transition:background .15s}
  .bd-preview-overlay{position:absolute;bottom:0;left:0;right:0;
    padding:8px 14px;background:rgba(0,0,0,.42);
    display:flex;gap:16px;align-items:center;flex-wrap:wrap;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13px;font-weight:700;color:#fff;letter-spacing:.3px;
    text-shadow:0 1px 4px rgba(0,0,0,.7)}
  /* ---- Image Color Picker ---- */
  #view-image{padding-bottom:40px}
  .ip-layout{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
  .ip-canvas-col{flex:1 1 380px;min-width:0;order:2}
  .ip-results-col{flex:0 0 280px;min-width:260px;order:1}
  .ip-dropzone{border:2px dashed var(--border);border-radius:10px;background:var(--panel2);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:220px;cursor:pointer;transition:border-color .15s,background .15s;
    position:relative;overflow:hidden;color:var(--muted);text-align:center;padding:20px}
  .ip-dropzone.drag{border-color:var(--accent2);background:#eef4fc}
  .ip-dropzone p{margin:8px 0 0;font-size:13px}
  .ip-dropzone .ip-icon{font-size:40px;line-height:1;opacity:.5}
  #ipCanvas{display:none;width:100%;border-radius:8px;border:1px solid var(--border);
    cursor:crosshair;image-rendering:pixelated;
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;touch-action:none}
  .ip-hint{font-size:12px;color:var(--muted);margin-top:6px;text-align:center}
  .ip-picked-row{display:flex;align-items:center;gap:10px;margin-top:10px;
    padding:8px 10px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;
    min-height:46px}
  .ip-picked-swatch{width:72px;height:72px;border-radius:6px;border:1px solid rgba(0,0,0,.2);
    flex-shrink:0;background:#ccc}
  .ip-picked-info{font-size:12px;color:var(--muted);line-height:1.5}
  .ip-picked-info strong{display:block;font-size:13px;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .ip-results-col h3{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px;
    text-transform:uppercase;letter-spacing:.5px}
  .ip-match-list{display:flex;flex-direction:column;gap:8px}
  .ip-match-card{display:flex;gap:10px;align-items:center;padding:8px 10px;
    background:var(--panel);border:1px solid var(--border);border-radius:8px;
    transition:border-color .15s}
  .ip-match-card:hover{border-color:#8e98a8}
  .ip-match-card.top-match{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2)}
  .ip-match-swatch{width:44px;height:44px;border-radius:6px;border:1px solid rgba(0,0,0,.2);
    flex-shrink:0}
  .ip-match-info{flex:1;min-width:0}
  .ip-match-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .ip-match-meta{font-size:11px;color:var(--muted);margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .ip-match-dist{font-size:11px;color:var(--muted);margin-top:2px}
  .ip-match-link{display:inline-block;margin-top:4px;font-size:11px;
    color:var(--accent2);text-decoration:underline;text-underline-offset:2px}
  .ip-match-link:hover{color:var(--accent)}
  .ip-empty{color:var(--muted);font-size:13px;text-align:center;padding:24px 0}
  .ip-btn-row{display:block !important;margin-bottom:8px}
  .ip-camera-btn{display:block !important;width:100% !important;
    background:var(--accent2) !important;color:#fff !important;
    border:1px solid var(--accent2) !important;border-radius:6px !important;
    padding:10px 14px !important;font-size:14px !important;font-weight:600 !important;
    text-align:center !important;cursor:pointer !important;
    box-sizing:border-box !important;line-height:1.4 !important;
    -webkit-appearance:none !important;appearance:none !important}
  .ip-change-btn{margin-bottom:8px;width:100%}
  /* Live color loupe that follows the cursor over the image */
  .ip-loupe{position:fixed;width:100px;height:100px;border-radius:10px;
    border:3px solid #fff;box-shadow:0 3px 14px rgba(0,0,0,.45);
    pointer-events:none;display:none;z-index:9999;
    transform:translate(14px,-100%) translateY(-14px);overflow:hidden}
  .ip-loupe-label{position:absolute;bottom:0;left:0;right:0;
    padding:3px 4px;background:rgba(0,0,0,.52);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;font-weight:700;color:#fff;text-align:center;
    letter-spacing:.3px;line-height:1.3}
  /* ---- Manufacturer PDFs tab ---- */
  #view-mfrpdf{padding-bottom:40px}
  .mp-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
  .mp-toolbar input[type="search"]{background:var(--panel);border:1px solid var(--border);
    color:var(--text);padding:7px 10px;border-radius:6px;font-size:13px;outline:none;
    min-width:260px;flex:1 1 260px}
  .mp-toolbar input[type="search"]:focus{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(10,102,194,.15)}
  .mp-toolbar select{background:var(--panel);border:1px solid var(--border);color:var(--text);
    padding:7px 10px;border-radius:6px;font-size:13px;outline:none;cursor:pointer}
  .mp-grid{columns:6;column-gap:12px}
  @media(max-width:600px){.sl-app .mp-grid{columns:2}}
  @media(min-width:601px) and (max-width:900px){.sl-app .mp-grid{columns:3}}
  @media(min-width:901px) and (max-width:1200px){.sl-app .mp-grid{columns:4}}
  @media(min-width:1201px){.sl-app .mp-grid{columns:6}}
  .mp-letter-anchor{break-inside:avoid;display:block}
  .mp-letter-head{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
    letter-spacing:.6px;padding:10px 0 2px;display:block}
  .mp-mfr-btn{background:none;border:none;color:var(--accent2);font-size:13px;font-weight:500;
    cursor:pointer;padding:3px 4px;text-align:left;text-decoration:underline;text-underline-offset:2px;
    width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:block;break-inside:avoid;border-radius:3px}
  .mp-mfr-btn:nth-of-type(odd){background:#f3f5f8}
  .mp-mfr-btn:nth-of-type(even){background:#ffffff}
  .mp-mfr-btn:hover{color:var(--accent)}
  .mp-empty{padding:40px;text-align:center;color:var(--muted);font-size:13px;grid-column:1/-1}
  .mp-generating{opacity:.6;pointer-events:none}
  /* ---- Mobile: hide Color (hex) column to keep tables narrow ---- */
  @media (max-width: 640px) {
    .col-hex { display: none !important; }
  }