/* ============================================================
   admin.css — Shared styles for the import system UI
   Used by: settings, import-connections, all mapping pages
   ============================================================ */

/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f3f4f6;
    color: #111827;
    font-size: 14px;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
code {
    background: #f0f4f8;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: Consolas, monospace;
    font-size: 12px;
}

/* ── Layout ──────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }
.main   { flex: 1; padding: 28px 32px; }
@media (max-width: 768px) {
    .sidebar { display: none; }
    .main    { padding: 16px; }
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #1e2433;
    color: #e5e7eb;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sb-head { padding: 20px 18px 16px; border-bottom: 1px solid #2d3547; }
.sb-back { font-size: 12px; color: #6b7280; display: block; margin-bottom: 8px; }
.sb-back:hover { color: #9ca3af; text-decoration: none; }
.sb-logo { font-size: 15px; font-weight: 800; color: #fff; }
.sb-sub  { font-size: 11px; color: #4b5563; margin-top: 3px; }
.sb-nav  { padding: 8px 0; flex: 1; }
.sb-sec  { padding: 10px 18px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #4b5563; font-weight: 700; }
.sb-item { display: flex; align-items: center; gap: 9px; padding: 9px 18px; font-size: 13px; color: #9ca3af; text-decoration: none; transition: background .1s, color .1s; }
.sb-item:hover { background: #2d3547; color: #e5e7eb; text-decoration: none; }
.sb-item.active { background: #2563eb; color: #fff; }
.sb-item.dim    { opacity: .38; pointer-events: none; }
.sb-icon { width: 17px; text-align: center; }
.sb-cnt  { margin-left: auto; background: #2d3547; color: #9ca3af; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.sb-item.active .sb-cnt { background: rgba(255,255,255,.18); color: #fff; }
.sb-soon { margin-left: auto; font-size: 10px; color: #374151; }
.sb-foot { padding: 12px 18px; border-top: 1px solid #2d3547; font-size: 11px; color: #4b5563; }

/* ── Page header ─────────────────────────────────────────── */
.ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ph h1 { font-size: 21px; font-weight: 800; margin: 0 0 4px; }
.ph p  { font-size: 13px; color: #6b7280; margin: 0; }

/* ── Notices / alerts ────────────────────────────────────── */
.notice { padding: 11px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; }
.notice-ok  { background: #dcfce7; color: #166534; }
.notice-err { background: #fee2e2; color: #991b1b; }

.warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #78350f;
}
.warning-banner.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.wb-icon { font-size: 18px; flex-shrink: 0; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 12px rgba(15,23,42,.07);
    margin-bottom: 14px;
    transition: box-shadow .15s;
}
.card:hover { box-shadow: 0 4px 20px rgba(15,23,42,.11); }
.card.inactive { opacity: .72; }

.card-top    { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #f3f4f6; }
.card-body   { display: grid; grid-template-columns: 1fr 1fr; }
.card-col    { padding: 18px 22px; }
.card-col + .card-col { border-left: 1px solid #f3f4f6; }
.card-footer { display: flex; align-items: center; gap: 8px; padding: 12px 22px; background: #f9fafb; border-top: 1px solid #e5e7eb; flex-wrap: wrap; }

.card-name { font-size: 15px; font-weight: 800; color: #111827; }
.card-sub  { font-size: 12px; color: #9ca3af; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-info { flex: 1; min-width: 0; }
.card-sep  { width: 1px; height: 22px; background: #e5e7eb; margin: 0 4px; }
.card-right { margin-left: auto; display: flex; gap: 6px; }
.card-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; font-weight: 700; margin-bottom: 10px; }

.empty-state { text-align: center; padding: 56px 24px; background: #fff; border-radius: 14px; border: 2px dashed #e5e7eb; margin-bottom: 14px; }
.empty-state h3 { margin: 0 0 8px; color: #374151; }
.empty-state p  { margin: 0 0 16px; font-size: 13px; color: #6b7280; }

/* ── Pills & badges ──────────────────────────────────────── */
.pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; padding-top: 2px; }
.pill  { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.p-green  { background: #dcfce7; color: #166534; }
.p-yellow { background: #fef9c3; color: #713f12; }
.p-red    { background: #fee2e2; color: #991b1b; }
.p-gray   { background: #f3f4f6; color: #6b7280; }
.p-blue   { background: #dbeafe; color: #1e40af; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip  { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.ck-ok   { background: #dcfce7; color: #166534; }
.ck-warn { background: #fef9c3; color: #713f12; }
.ck-miss { background: #fee2e2; color: #991b1b; }

.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-mapped   { background: #dcfce7; color: #166534; }
.badge-create   { background: #dbeafe; color: #1e40af; }
.badge-skipped  { background: #f3f4f6; color: #6b7280; }
.badge-unmapped { background: #fee2e2; color: #991b1b; }

.impact-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ip-green { background: #dcfce7; color: #166534; }
.ip-blue  { background: #dbeafe; color: #1e40af; }
.ip-amber { background: #fef9c3; color: #713f12; }
.ip-red   { background: #fee2e2; color: #991b1b; }
.ip-gray  { background: #f3f4f6; color: #6b7280; }

/* ── Stats / metrics ─────────────────────────────────────── */
.stats { display: flex; gap: 18px; flex-wrap: wrap; }
.stat  { font-size: 12px; color: #6b7280; }
.stat strong { display: block; font-size: 22px; font-weight: 800; color: #111827; line-height: 1.15; }
.stat.ok   strong { color: #16a34a; }
.stat.warn strong { color: #d97706; }
.stat.dim  strong { color: #9ca3af; font-size: 16px; }

/* Import preview */
.import-preview { background: #fff; border-radius: 14px; border: 1px solid #e5e7eb; box-shadow: 0 2px 12px rgba(15,23,42,.07); margin-bottom: 20px; overflow: hidden; }
.ip-header { padding: 14px 22px 12px; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; gap: 10px; }
.ip-header h3 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
.ip-header span { font-size: 12px; color: #9ca3af; }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ipm { padding: 20px 22px; border-right: 1px solid #f3f4f6; }
.ipm:last-child { border-right: none; }
.ipm-num   { font-size: 32px; font-weight: 800; line-height: 1; margin-bottom: 6px; color: #111827; }
.ipm-label { font-size: 12px; color: #6b7280; font-weight: 500; line-height: 1.4; }
.ipm-dot   { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.ipm.green .ipm-num { color: #16a34a; }
.ipm.blue  .ipm-num { color: #2563eb; }
.ipm.amber .ipm-num { color: #d97706; }
.ipm.red   .ipm-num { color: #dc2626; }
.ipm.muted .ipm-num { color: #9ca3af; }
.ipm.total { background: #f9fafb; }
.ipm.total .ipm-num { color: #374151; font-size: 28px; }

/* Sync schedule */
.sched { display: flex; flex-direction: column; gap: 4px; }
.sched-row   { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sched-label { color: #9ca3af; width: 90px; font-size: 12px; }
.sched-val   { font-weight: 600; color: #374151; }

/* Debug files accordion */
.debug-bar { display: flex; align-items: center; gap: 8px; padding: 8px 22px; background: #f9fafb; border-top: 1px solid #f3f4f6; cursor: pointer; user-select: none; }
.debug-bar:hover { background: #f3f4f6; }
.debug-toggle { font-size: 12px; color: #9ca3af; display: flex; align-items: center; gap: 5px; margin-left: auto; }
.debug-toggle svg { transition: transform .2s; }
.debug-toggle.open svg { transform: rotate(180deg); }
.debug-files { display: none; padding: 10px 22px 14px; background: #f9fafb; border-top: 1px solid #f3f4f6; flex-wrap: wrap; gap: 6px; }
.debug-files.open { display: flex; }
.debug-link { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; background: #fff; border: 1px solid #e5e7eb; color: #374151; text-decoration: none; font-family: Consolas, monospace; }
.debug-link:hover { border-color: #6b7280; color: #111827; text-decoration: none; }
.debug-link.missing { opacity: .4; cursor: default; pointer-events: none; }

/* Cron */
.cron-row { display: flex; align-items: center; gap: 12px; padding: 10px 22px; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.cron-row:last-child { border: none; }
.cron-name { flex: 1; font-weight: 600; }
.cron-meta { font-size: 12px; color: #6b7280; min-width: 120px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 9px; border: 0; cursor: pointer; font-size: 13px; font-weight: 700; text-decoration: none; gap: 5px; transition: opacity .1s; white-space: nowrap; }
.btn:hover { opacity: .85; text-decoration: none; }
.b-primary { background: #2563eb; color: #fff; }
.b-gray    { background: #e5e7eb; color: #111827; }
.b-green   { background: #dcfce7; color: #166534; }
.b-red     { background: #fee2e2; color: #991b1b; }
.b-sm      { padding: 5px 10px; font-size: 12px; }

/* ── Forms ───────────────────────────────────────────────── */
.form-card { background: #fff; border-radius: 14px; border: 1px solid #e5e7eb; padding: 28px; margin-bottom: 14px; }
.form-card h2 { margin: 0 0 20px; font-size: 16px; }
.fg { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.fg-full { grid-column: 1 / -1; }
.fg label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #374151; }
/* Prevent long option labels from blowing out layout */
select { max-width: 100%; width: 100%; box-sizing: border-box; }
.fg input, .fg select, .fg textarea { padding: 8px 11px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; background: #fff; }
.form-actions { display: flex; gap: 8px; margin-top: 20px; }
@media (max-width: 640px) { .fg { grid-template-columns: 1fr; } }

/* ── Mapping table ───────────────────────────────────────── */
.map-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 20px 10px; border-bottom: 1px solid #f3f4f6; }
.map-toolbar input[type=search] { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; width: 200px; }
.filter-btn { padding: 5px 12px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; color: #374151; }
.filter-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.toolbar-hint  { font-size: 11px; color: #9ca3af; }

.map-table { width: 100%; border-collapse: collapse; }
.map-table th { background: #f9fafb; padding: 9px 12px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; border-bottom: 2px solid #e5e7eb; font-weight: 700; }
.map-table td { padding: 9px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.map-table tr:last-child td { border-bottom: none; }
.map-table tr:hover td { background: #fafafa; }
.map-table tr.row-mapped   td:first-child { border-left: 3px solid #16a34a; }
.map-table tr.row-create   td:first-child { border-left: 3px solid #2563eb; }
.map-table tr.row-skipped  td:first-child { border-left: 3px solid #d1d5db; }
.map-table tr.row-unmapped td:first-child { border-left: 3px solid #f87171; }
.map-table tr.row-mapped { background: #f0fdf4; }
.map-table tr.row-create { background: #eff6ff; }
.map-table tr.hidden-row { display: none; }

.map-name  { font-weight: 700; font-size: 13px; }
.map-count { font-size: 13px; font-weight: 700; color: #374151; }
.map-sel   { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 12px; background: #fff; }
.map-sel.mapped { border-color: #16a34a; background: #f0fdf4; }

/* Site fields */
.sys-sel { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 7px; font-size: 12px; background: #fff; }
.sys-sel.mapped-sel { border-color: #16a34a; background: #f0fdf4; }
.key-cell { font-family: Consolas, monospace; font-size: 12px; color: #1d4ed8; }
.src-chip { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.src-core       { background: #dbeafe; color: #1e40af; }
.src-meta       { background: #e5e7eb; color: #374151; }
.src-stock      { background: #dcfce7; color: #166534; }
.src-dimensions { background: #ede9fe; color: #5b21b6; }
.src-image      { background: #fce7f3; color: #9d174d; }
.src-taxonomy   { background: #fef9c3; color: #713f12; }
.src-attribute  { background: #ffedd5; color: #9a3412; }
.src-brand      { background: #f0fdf4; color: #166534; }

/* Import connections list */
.conn-card { background: #fff; border-radius: 14px; border: 1px solid #e5e7eb; box-shadow: 0 2px 10px rgba(15,23,42,.06); margin-bottom: 14px; overflow: hidden; }
.conn-card-inactive { opacity: .6; border-style: dashed; }
.conn-card-inactive .conn-name { color: #6b7280; }
.conn-top  { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #f3f4f6; }
.conn-name { font-size: 16px; font-weight: 800; color: #111827; }
.conn-meta { font-size: 12px; color: #9ca3af; margin-top: 3px; }
.conn-info { flex: 1; min-width: 0; }
.conn-body { padding: 14px 22px; display: flex; gap: 24px; flex-wrap: wrap; }
.conn-footer { display: flex; align-items: center; gap: 8px; padding: 11px 22px; background: #f9fafb; border-top: 1px solid #f3f4f6; flex-wrap: wrap; }
.ready-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.form-card select, .fg select { max-width: 600px; }