/* ============================================================
   AdamsWP Dashboard — Sitemap Builder Styles  v2.0.8
   ============================================================ */

/* ── Sitemaps list ───────────────────────────────────────────────────────── */
.sm-admin-table { width:100%; font-size:.85rem; }
.sm-row-link { font-weight:500; color:var(--accent,#2563eb); cursor:pointer; text-decoration:none; }
.sm-row-link:hover { text-decoration:underline; }
.sm-row-desc { font-size:.75rem; color:var(--text2,#64748b); margin-top:2px; }
.sm-type-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.72rem; font-weight:600; }
.sm-type-badge.sm-type-direct { background:#eff6ff; color:#2563eb; }
.sm-type-badge.sm-type-agency { background:#f0fdf4; color:#15803d; }

/* ── Builder layout ──────────────────────────────────────────────────────── */
.sm-builder { display:flex; flex-direction:column; height:100%; overflow:hidden; }

.sm-toolbar { display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem; border-bottom:1px solid var(--border,#e2e8f0); background:var(--card-bg,#fff); flex-shrink:0; flex-wrap:wrap; z-index:10; }
.sm-toolbar-title { font-weight:600; font-size:.9rem; color:var(--text,#1e293b); cursor:pointer; }
.sm-toolbar-title:hover { text-decoration:underline; }
.sm-toolbar-meta { font-size:.75rem; color:var(--text-muted,#64748b); margin-left:6px; }
.sm-toolbar-sep { color:#cbd5e1; }

.sm-color-btn { width:26px; height:26px; border-radius:50%; border:2px solid rgba(0,0,0,.15); cursor:pointer; flex-shrink:0; transition:transform .12s; }
.sm-color-btn:hover { transform:scale(1.15); }
.sm-color-palette { display:none; position:absolute; z-index:200; background:var(--card-bg,#fff); border:1px solid var(--border,#e2e8f0); border-radius:8px; padding:.6rem; box-shadow:0 4px 16px rgba(0,0,0,.12); flex-wrap:wrap; gap:6px; width:186px; }
.sm-color-palette.open { display:flex; }
.sm-color-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .1s; }
.sm-color-swatch:hover { transform:scale(1.2); border-color:rgba(0,0,0,.2); }
.sm-color-swatch.active { border-color:#000; }
.sm-custom-color { display:flex; align-items:center; gap:6px; width:100%; margin-top:2px; }
.sm-custom-color input[type=color] { width:28px; height:28px; border:none; padding:0; cursor:pointer; border-radius:4px; }
.sm-custom-color label { font-size:.75rem; color:var(--text-muted,#64748b); }

.sm-btn { padding:.35rem .8rem; font-size:.78rem; border-radius:5px; border:1px solid var(--border,#e2e8f0); background:var(--card-bg,#fff); cursor:pointer; transition:background .12s; white-space:nowrap; }
.sm-btn:hover { background:var(--hover-bg,#f1f5f9); }
.sm-btn-primary { background:var(--sm-ui-color,#3b82f6); color:#fff; border-color:transparent; }
.sm-btn-primary:hover { opacity:.88; background:var(--sm-ui-color,#3b82f6); }

/* ── Work area ───────────────────────────────────────────────────────────── */
.sm-work-area { flex:1; position:relative; overflow:hidden; display:flex; }

/* ── Canvas ──────────────────────────────────────────────────────────────── */
.sm-canvas {
  flex:1; overflow:auto; position:relative;
  background:#f0f2f5;
  padding:3rem 4rem 6rem;
}
.sm-canvas-inner {
  position:relative;
  display:inline-flex;
  flex-direction:column;
  gap:3rem;
  min-width:100%;
  transform-origin:top left;
  /* No transition on transform — connectors must redraw after the exact final position,
     not mid-animation, so instant zoom is correct here. */
}
.sm-svg-overlay { position:absolute; top:0; left:0; pointer-events:none; overflow:visible; }

/* ── Zoom controls ───────────────────────────────────────────────────────── */
.sm-zoom-controls {
  position:absolute;
  top:.75rem;
  left:.75rem;
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--card-bg,#fff);
  border:1px solid var(--border,#e2e8f0);
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  padding:3px 6px;
  z-index:20;
}
.sm-zoom-btn {
  width:24px; height:24px;
  background:none; border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:1rem;
  color:var(--text-muted,#64748b);
  display:flex; align-items:center; justify-content:center;
  transition:background .1s;
}
.sm-zoom-btn:hover { background:var(--hover-bg,#f1f5f9); color:var(--text,#1e293b); }
.sm-zoom-label { font-size:.72rem; font-weight:600; color:var(--text-muted,#64748b); min-width:34px; text-align:center; }

/* ── Section ─────────────────────────────────────────────────────────────── */
.sm-section { position:relative; }
.sm-section-header { display:flex; align-items:center; gap:.5rem; margin-bottom:2.5rem; }
.sm-section-divider { flex:1; height:1px; background:#cbd5e1; }
.sm-section-label { font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; white-space:nowrap; cursor:pointer; padding:2px 6px; border-radius:4px; border:1px solid transparent; }
.sm-section-label:hover { background:#f1f5f9; border-color:#e2e8f0; }
.sm-section-del { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:1rem; padding:2px 4px; border-radius:3px; }
.sm-section-del:hover { color:#ef4444; background:#fee2e2; }

/* ── Tree ────────────────────────────────────────────────────────────────── */
.sm-tree { display:flex; justify-content:center; gap:20px; align-items:flex-start; }
.sm-node { display:flex; flex-direction:column; align-items:center; position:relative; }
.sm-children { display:flex; flex-direction:row; align-items:flex-start; gap:20px; margin-top:80px; position:relative; }

/* ── Page card ───────────────────────────────────────────────────────────── */
.sm-card-wrap {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  position:relative; cursor:pointer;
}
.sm-card {
  width:120px; height:138px;
  border:1.5px solid var(--sm-color,#4a4a4a);
  border-radius:6px; background:#fff; overflow:hidden; position:relative;
  transition:box-shadow .15s, border-color .15s;
}
.sm-card-wrap:hover .sm-card { box-shadow:0 3px 14px rgba(0,0,0,.14); }
.sm-node.sm-selected .sm-card {
  border-color:var(--sm-color,#2563eb);
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
}

.sm-card-chrome { height:14px; background:#fff; border-bottom:1px solid var(--sm-color,#4a4a4a); display:flex; align-items:center; gap:3px; padding:0 5px; flex-shrink:0; }
.sm-card-chrome-dot { width:4px; height:4px; border-radius:50%; background:var(--sm-color,#4a4a4a); opacity:.4; }

/* Card icon — inherits --wf-N from .sm-canvas via applyTheme().
   fill:none on the svg root makes background paths transparent without
   breaking the wf-N class fills defined inside each SVG's <style> block. */
.sm-card-icon { width:100%; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:4px; }
.sm-card-icon svg { width:100%; height:100%; object-fit:contain; display:block; fill:none; }
.sm-card-icon img { width:100%; height:100%; object-fit:contain; display:block; }

.sm-card-name { font-size:.72rem; font-weight:500; text-align:center; color:var(--text,#1e293b); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Hover add button ────────────────────────────────────────────────────── */
.sm-hover-add {
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  display:none;
  flex-direction:column;
  align-items:center;
  z-index:20;
}
.sm-card-wrap:hover .sm-hover-add { display:flex; }

.sm-add-trigger {
  width:22px; height:22px;
  border-radius:50%;
  background:var(--card-bg,#fff);
  border:1.5px solid var(--sm-color,#4a4a4a);
  color:var(--sm-color,#4a4a4a);
  font-size:.95rem; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s;
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.sm-add-trigger:hover { background:var(--sm-color,#4a4a4a); color:#fff; }

.sm-add-popover-wrap { position:relative; display:flex; flex-direction:column; align-items:center; }

.sm-add-popover {
  display:none;
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  background:var(--card-bg,#fff);
  border:1px solid var(--border,#e2e8f0);
  border-radius:7px;
  box-shadow:0 4px 14px rgba(0,0,0,.13);
  padding:4px;
  white-space:nowrap;
  flex-direction:row;
  gap:2px;
  z-index:30;
}
.sm-add-popover.open { display:flex; }
.sm-add-popover button { background:none; border:none; cursor:pointer; padding:5px 9px; font-size:.72rem; border-radius:4px; color:var(--text,#1e293b); transition:background .1s; }
.sm-add-popover button:hover { background:#f1f5f9; }

/* "Add first page" for empty sections */
.sm-add-root { display:flex; flex-direction:column; align-items:center; gap:6px; }
.sm-add-root-btn { width:120px; height:138px; border:1.5px dashed #cbd5e1; border-radius:6px; background:#f8fafc; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#94a3b8; transition:border-color .15s, color .15s; }
.sm-add-root-btn:hover { border-color:#94a3b8; color:#64748b; }

/* ── Right-side page panel ───────────────────────────────────────────────── */
.sm-page-panel {
  position:absolute; top:0; right:0; width:390px; height:100%;
  background:var(--card-bg,#fff);
  border-left:1px solid var(--border,#e2e8f0);
  box-shadow:-4px 0 24px rgba(0,0,0,.10);
  display:flex; flex-direction:column;
  z-index:40;
  transform:translateX(100%);
  transition:transform .22s ease;
}
.sm-page-panel.open { transform:translateX(0); }

.sm-panel-hd { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem .75rem; border-bottom:1px solid var(--border,#e2e8f0); flex-shrink:0; }
.sm-panel-title { font-weight:600; font-size:.9rem; color:var(--text,#1e293b); }
.sm-panel-close { background:none; border:none; cursor:pointer; font-size:1.3rem; line-height:1; color:#94a3b8; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:4px; }
.sm-panel-close:hover { background:#f1f5f9; color:#374151; }

.sm-panel-bd { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:1rem; gap:.85rem; }
.sm-panel-field { display:flex; flex-direction:column; gap:.35rem; }
.sm-panel-icons-field { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:.35rem; }
.sm-panel-label { font-size:.72rem; font-weight:600; color:var(--text-muted,#64748b); text-transform:uppercase; letter-spacing:.04em; }

.sm-panel-ft { padding:.75rem 1rem; border-top:1px solid var(--border,#e2e8f0); display:flex; flex-direction:column; gap:.4rem; flex-shrink:0; }
#smPanelExtra { display:flex; flex-direction:column; gap:.35rem; }
.sm-panel-sec-btn { width:100%; padding:.42rem .75rem; font-size:.8rem; background:none; border:1px solid var(--border,#e2e8f0); border-radius:5px; cursor:pointer; text-align:left; color:var(--text-muted,#64748b); transition:background .12s, color .12s; }
.sm-panel-sec-btn:hover { background:#f8fafc; color:var(--text,#1e293b); }
.sm-panel-sec-btn.danger { color:#ef4444; border-color:#fecaca; }
.sm-panel-sec-btn.danger:hover { background:#fef2f2; }

/* ── Icon category tabs ──────────────────────────────────────────────────── */
.sm-icon-cats {
  display:flex; flex-wrap:wrap; gap:4px;
  padding:2px 0 4px;
  flex-shrink:0;
}
.sm-cat-pill {
  padding:3px 9px; font-size:.7rem; font-weight:500;
  border-radius:20px;
  border:1px solid var(--border,#e2e8f0);
  background:var(--card-bg,#fff);
  color:var(--text-muted,#64748b);
  cursor:pointer;
  white-space:nowrap;
  transition:background .1s, border-color .1s, color .1s;
}
.sm-cat-pill:hover { background:#f1f5f9; border-color:#cbd5e1; color:var(--text,#1e293b); }
.sm-cat-pill.active { background:var(--sm-color,#2563eb); border-color:var(--sm-color,#2563eb); color:#fff; }

/* ── Icon picker — grouped view ──────────────────────────────────────────── */
.sm-icon-picker {
  flex:1; min-height:0; overflow-y:auto;
  padding:2px 2px 4px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sm-icon-group { display:flex; flex-direction:column; gap:5px; }
.sm-icon-group-hd {
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted,#94a3b8);
  padding:0 2px 2px;
  border-bottom:1px solid var(--border,#e2e8f0);
}
.sm-icon-group-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:4px;
}
.sm-icon-loading { padding:1.5rem 1rem; text-align:center; color:var(--text-muted,#94a3b8); font-size:.82rem; }
.sm-icon-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 3px 5px; border:1.5px solid var(--border,#e2e8f0); border-radius:6px; cursor:pointer; transition:border-color .12s, background .12s; }
.sm-icon-item:hover { border-color:#94a3b8; background:#f8fafc; }
.sm-icon-item.selected { border-color:var(--sm-color,#3b82f6); background:#eff6ff; }

/* Thumbnail — hardcoded grays so icons are always visible regardless of theme.
   fill:none on svg root = background paths transparent.
   *:not([class]) fallback catches SVG elements that lack a wf-N class
   (e.g. form fields, chart bars, grid lines) so they aren't invisible. */
.sm-icon-thumb {
  width:72px; height:80px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  --wf-1:#3d3d3d; --wf-2:#505050; --wf-3:#666; --wf-4:#808080;
  --wf-5:#979797; --wf-6:#b4b4b4; --wf-7:#d0d0d0; --wf-8:#f0f0f0;
}
.sm-icon-thumb svg { width:100%; height:100%; object-fit:contain; display:block; fill:none; }
/* Fallback fill for unclassed SVG elements (chart bars, form fields, grid lines, etc.) */
.sm-icon-thumb svg *:not([class]) { fill: var(--wf-5, #979797); }
.sm-card-icon svg *:not([class]) { fill: var(--wf-5, #979797); }
.sm-icon-item span { font-size:.58rem; text-align:center; color:var(--text-muted,#64748b); line-height:1.2; max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sm-icon-search { width:100%; box-sizing:border-box; }

/* ── Icon Library settings page ──────────────────────────────────────────── */
.sm-settings-wrap { padding:1.5rem; max-width:560px; }
.sm-settings-card { background:var(--card-bg,#fff); border:1px solid var(--border,#e2e8f0); border-radius:10px; overflow:hidden; }
.sm-settings-hd { padding:1.25rem 1.5rem; border-bottom:1px solid var(--border,#e2e8f0); }
.sm-settings-title { font-size:1.05rem; font-weight:700; color:var(--text,#1e293b); margin:0 0 .35rem; }
.sm-settings-desc { font-size:.8rem; color:var(--text-muted,#64748b); margin:0; line-height:1.5; }
.sm-cat-list { padding:.5rem 0; }
.sm-cat-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 1.5rem;
  cursor:pointer;
  transition:background .1s;
  gap:1rem;
}
.sm-cat-row:hover { background:var(--hover-bg,#f8fafc); }
.sm-cat-row-info { display:flex; align-items:baseline; gap:.6rem; flex:1; }
.sm-cat-row-name { font-size:.875rem; font-weight:500; color:var(--text,#1e293b); }
.sm-cat-row-count { font-size:.75rem; color:var(--text-muted,#94a3b8); }
.sm-cat-cb { width:16px; height:16px; accent-color:var(--accent,#2563eb); cursor:pointer; flex-shrink:0; }
.sm-settings-ft { padding:1rem 1.5rem; border-top:1px solid var(--border,#e2e8f0); display:flex; gap:.5rem; }