/* Minimal admin styles. */
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; color: #222; background: #f7fafc; }
a { color: #2b6cb0; text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #edf2f7; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.85em; }

/* header */
.pim-header {
  display: flex; align-items: center; gap: 2rem;
  padding: 0 1.5rem; background: #1a202c; color: #fff; height: 56px;
}
.pim-header a { color: #fff; }
.pim-logo { font-weight: 600; font-size: 1.05rem; }
.pim-nav { display: flex; gap: 1.25rem; flex: 1; }
.pim-nav a { opacity: 0.85; }
.pim-nav a:hover { opacity: 1; text-decoration: none; }
.pim-user { font-size: 0.9rem; display: flex; gap: 1rem; align-items: center; }

/* main layout */
.pim-main { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }
.pim-page-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.pim-page-header h1 { margin: 0; font-size: 1.3rem; flex: 1; }
.pim-help { color: #4a5568; font-size: 0.88rem; margin: 0.3rem 0; }

/* buttons */
.pim-btn {
  display: inline-block; padding: 0.4rem 0.9rem; background: #edf2f7; color: #2d3748;
  border: 0; border-radius: 4px; cursor: pointer; font-size: 0.9rem; font-weight: 500; text-decoration: none;
}
.pim-btn:hover { background: #e2e8f0; text-decoration: none; }
.pim-btn-primary { background: #1a202c; color: #fff; }
.pim-btn-primary:hover { background: #2d3748; color: #fff; }
.pim-btn-danger { background: #c53030; color: #fff; }
.pim-btn-danger:hover { background: #9b2c2c; color: #fff; }

/* tables */
.pim-table { width: 100%; background: #fff; border-collapse: collapse; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.pim-table th, .pim-table td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid #edf2f7; font-size: 0.9rem; }
.pim-table th { background: #f7fafc; color: #4a5568; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.02em; }
.pim-table tr:last-child td { border-bottom: 0; }
.pim-table tr:hover { background: #f7fafc; }
.pim-empty { padding: 2rem; text-align: center; color: #a0aec0; background: #fff; border-radius: 6px; }
.pim-actions { text-align: right; }

/* filters */
.pim-filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center; flex-wrap: wrap; }
.pim-filters input, .pim-filters select {
  padding: 0.4rem 0.6rem; border: 1px solid #cbd5e0; border-radius: 4px;
  font-size: 0.9rem; height: 34px; box-sizing: border-box;
}
/* Buttons inside a filter bar inherit the .pim-btn look so they match
   the inputs they sit next to and the "New X" buttons elsewhere */
.pim-filters button {
  padding: 0 0.9rem; height: 34px; box-sizing: border-box;
  background: #edf2f7; color: #2d3748;
  border: 0; border-radius: 4px; cursor: pointer;
  font-size: 0.9rem; font-weight: 500;
}
.pim-filters button:hover { background: #e2e8f0; }

/* forms */
.pim-form { background: #fff; padding: 1.5rem; border-radius: 6px; max-width: 720px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.pim-field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.pim-field label { font-weight: 600; font-size: 0.85rem; color: #2d3748; }
.pim-field input[type="text"], .pim-field input[type="search"], .pim-field input[type="password"], .pim-field textarea, .pim-field select {
  padding: 0.5rem 0.6rem; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 0.9rem; font-family: inherit;
}
.pim-field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.pim-field input:disabled, .pim-field textarea:disabled { background: #edf2f7; color: #718096; }
.pim-field input[type="checkbox"] { width: 18px; height: 18px; }
.pim-help { color: #718096; font-size: 0.78rem; margin: 0; }
.pim-form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #edf2f7; }

/* flash messages */
.pim-error { color: #c53030; background: #fed7d7; padding: 0.6rem 0.9rem; border-radius: 4px; margin: 0 0 1rem; font-size: 0.9rem; }
.pim-notice { color: #22543d; background: #c6f6d5; padding: 0.6rem 0.9rem; border-radius: 4px; margin: 0 0 1rem; font-size: 0.9rem; }

/* tags */
.pim-tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.pim-tag-ok { background: #c6f6d5; color: #22543d; }
.pim-tag-danger { background: #fed7d7; color: #c53030; }
.pim-tag-warn { background: #feebc8; color: #744210; }
.pim-tag-info { background: #bee3f8; color: #2a4365; }

/* run panel on feed edit */
.pim-run-panel { background: #fff; padding: 1.5rem; border-radius: 6px; margin-top: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); max-width: 720px; }
.pim-run-panel h2 { margin: 0 0 0.5rem; font-size: 1rem; }
.pim-run-output { background: #1a202c; color: #c6f6d5; padding: 1rem; border-radius: 4px; font-size: 0.8rem; white-space: pre-wrap; margin-top: 1rem; max-height: 400px; overflow: auto; }

.pim-run-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; padding: 1rem; background: #fff; border-radius: 6px; margin-bottom: 1.5rem; font-size: 0.88rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.pim-card-plain { cursor: default; }
.pim-card-plain:hover { transform: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.pim-card-warn { background: #fffaf0; border-left: 4px solid #f6ad55; }
.pim-card-warn .pim-card-num { color: #c05621; }

h2 { font-size: 1.05rem; margin: 1.75rem 0 0.75rem; color: #2d3748; }
h3 { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; color: #2d3748; }

.pim-error-log { background: #1a202c; color: #feb2b2; padding: 1rem; border-radius: 4px; font-size: 0.82rem; white-space: pre-wrap; max-height: 400px; overflow: auto; }

/* tabs */
.pim-tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid #e2e8f0; margin-bottom: 1.25rem; }
.pim-tabs a { padding: 0.5rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -2px; color: #4a5568; font-weight: 500; }
.pim-tabs a.active { border-color: #1a202c; color: #1a202c; }
.pim-tabs a:hover { text-decoration: none; color: #1a202c; }
.pim-tab-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.pim-tab-header h2 { margin: 0; font-size: 1rem; flex: 1; }

/* inline canonical select in the unmapped queue */
.pim-inline-canonical {
  padding: 0.3rem 0.5rem; border: 1px solid #cbd5e0; border-radius: 4px;
  font-size: 0.88rem; background: #fff; min-width: 160px;
}
.pim-inline-canonical:disabled { opacity: 0.5; cursor: progress; }

/* "✨ Navy" suggestion link sits next to the inline select */
.pim-suggest-accept {
  display: inline-block; margin-left: 0.4rem; padding: 0.25rem 0.5rem;
  background: #ebf8ff; color: #2c5282; border: 1px solid #bee3f8;
  border-radius: 4px; font-size: 0.82rem; font-weight: 500;
  text-decoration: none;
}
.pim-suggest-accept:hover { background: #bee3f8; text-decoration: none; }

/* Bulk action bar on the unmapped queue — appears when rows are ticked */
.pim-bulk-bar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.6rem 0.8rem; margin-bottom: 0.75rem;
  background: #fffaf0; border: 1px solid #f6ad55; border-radius: 6px;
  font-size: 0.9rem;
}
.pim-bulk-count { font-weight: 600; color: #7b341e; }
.pim-bulk-bar select {
  padding: 0.3rem 0.5rem; border: 1px solid #cbd5e0; border-radius: 4px;
  font-size: 0.88rem; background: #fff; min-width: 180px;
}

/* swatches */
.pim-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 0.25rem; border: 1px solid rgba(0,0,0,0.15); }
.pim-swatch-sep { display: inline-block; color: #a0aec0; margin: 0 0.2rem; font-weight: 500; }

/* repeatable canonical picker rows (multi-colour mapping dialog) */
.pim-canonicals-list { margin-bottom: 1rem; }
.pim-canonical-row { display: flex; gap: 0.4rem; margin-bottom: 0.35rem; align-items: center; }
.pim-canonical-row select { flex: 1; padding: 0.4rem 0.6rem; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 0.9rem; }
.pim-btn-small { padding: 0.25rem 0.6rem; font-size: 0.8rem; height: auto; }

/* dialogs (modal CRUD forms) */
.pim-dialog { border: 0; border-radius: 8px; padding: 1.5rem; min-width: 420px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.pim-dialog::backdrop { background: rgba(0,0,0,0.4); }
.pim-dialog h3 { margin: 0 0 1rem; font-size: 1.05rem; }

/* structural change banner */
.pim-banner { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.pim-banner-warn { background: #fffaf0; border: 1px solid #f6ad55; color: #7b341e; }
.pim-banner-warn strong { display: block; margin-bottom: 0.25rem; }

/* API key box */
.pim-key-box { background: #fffaf0; border: 2px solid #f6ad55; padding: 1.25rem; border-radius: 6px; margin-bottom: 1.5rem; }
.pim-key-box h2 { margin: 0 0 0.5rem; font-size: 1rem; color: #7b341e; }
.pim-key { display: block; padding: 0.75rem; background: #1a202c; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border-radius: 4px; margin: 0.75rem 0; word-break: break-all; }

/* dashboard cards */
.pim-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.pim-card {
  display: block; background: #fff; padding: 1.25rem; border-radius: 6px;
  text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: transform 0.1s, box-shadow 0.1s;
}
.pim-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); text-decoration: none; }
.pim-card-num { font-size: 1.75rem; font-weight: 700; color: #1a202c; line-height: 1; }
.pim-card-label { font-size: 0.85rem; color: #718096; margin-top: 0.25rem; }

/* login */
.pim-login-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f7fafc; }
.pim-login {
  background: #fff; padding: 2rem; border-radius: 8px; min-width: 320px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 1rem;
}
.pim-login h1 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.pim-login label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.pim-login input { padding: 0.5rem; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 1rem; }
.pim-login button { padding: 0.6rem; background: #1a202c; color: #fff; border: 0; border-radius: 4px; font-weight: 600; cursor: pointer; }
.pim-login button:hover { background: #2d3748; }

/* products grid */
.pim-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.pim-product-card { display: flex; flex-direction: column; background: #fff; border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: transform 0.1s, box-shadow 0.1s; }
.pim-product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-decoration: none; }
.pim-thumb { aspect-ratio: 1 / 1; background: #f7fafc; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pim-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pim-thumb-empty { color: #a0aec0; font-size: 0.8rem; }
.pim-product-meta { padding: 0.6rem 0.8rem; }
.pim-product-style { font-weight: 600; font-size: 0.95rem; }
.pim-product-brand { color: #4a5568; font-size: 0.85rem; }
.pim-product-supplier { color: #718096; font-size: 0.75rem; margin-top: 0.25rem; }
.pim-product-counts { margin-top: 0.4rem; display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.75rem; color: #718096; }

/* product detail */
.pim-group-banner { background: #ebf8ff; border: 1px solid #bee3f8; border-radius: 6px; padding: 0.6rem 0.8rem; margin-bottom: 1rem; font-size: 0.9rem; color: #2c5282; }
.pim-group-banner code { background: rgba(0,0,0,0.05); padding: 0 0.25rem; border-radius: 3px; }
.pim-product-meta-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; padding: 1rem; background: #fff; border-radius: 6px; font-size: 0.88rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); margin-bottom: 1rem; }
.pim-colour-block { background: #fff; border-radius: 6px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.pim-colour-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.pim-colour-title { flex: 1; display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }
.pim-colour-title strong { font-size: 1.05rem; }
.pim-colour-specs { font-size: 0.85rem; color: #4a5568; margin-bottom: 0.5rem; }
.pim-colour-canonicals { font-size: 0.82rem; color: #718096; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.pim-swatch-lg { width: 32px; height: 32px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0; }
.pim-image-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
.pim-image-strip figure { margin: 0; flex: 0 0 auto; }
.pim-image-strip img { width: 120px; height: 120px; object-fit: contain; border-radius: 4px; background: #f7fafc; display: block; }
.pim-image-strip figcaption { font-size: 0.7rem; color: #718096; text-align: center; margin-top: 0.2rem; text-transform: uppercase; }

/* pagination controls */
.pim-pagination {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.75rem; padding: 0.6rem 0.8rem; background: #fff;
  border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin: 0.75rem 0; font-size: 0.88rem;
}
.pim-pagination-summary { color: #4a5568; }
.pim-pagination-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pim-pagination-page { color: #2d3748; padding: 0 0.5rem; font-weight: 500; }
.pim-pagination-per-page { display: flex; align-items: center; gap: 0.4rem; margin-left: 0.75rem; color: #718096; font-size: 0.82rem; }
.pim-pagination-per-page select { padding: 0.2rem 0.4rem; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 0.85rem; }
.pim-btn-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }