/* =========================================================================
   v6 — themes (8 palettes) + table/name polish
   Applies only to authenticated panel pages: body[data-theme].
   The login page carries no data-theme and is therefore unchanged.
   ========================================================================= */

/* -- palette tokens ------------------------------------------------------- */
body[data-theme="grey"] {
  --t-bg: #0a0a0b; --t-side: #0b0b0d; --t-panel: #101012; --t-panel2: #141417;
  --t-line: #202024; --t-line2: #2a2a30; --t-txt: #d6d6d9; --t-muted: #76767d;
  --t-accent: #e8e8ea; --t-accent-fg: #0a0a0b; --t-hover: #17171c;
}
body[data-theme="black"] {
  --t-bg: #000000; --t-side: #000000; --t-panel: #070707; --t-panel2: #0b0b0b;
  --t-line: #161616; --t-line2: #232323; --t-txt: #d2d2d2; --t-muted: #6c6c6c;
  --t-accent: #f2f2f2; --t-accent-fg: #000000; --t-hover: #101010;
}
body[data-theme="crimson"] {
  --t-bg: #0a0607; --t-side: #0d0709; --t-panel: #130c0e; --t-panel2: #180f12;
  --t-line: #2a171b; --t-line2: #3a2025; --t-txt: #ecdcdd; --t-muted: #94797d;
  --t-accent: #d93a52; --t-accent-fg: #fff5f6; --t-hover: #201316;
}
body[data-theme="green"] {
  --t-bg: #050a07; --t-side: #070d09; --t-panel: #0b1310; --t-panel2: #0f1814;
  --t-line: #1a2a22; --t-line2: #24382d; --t-txt: #d9e7df; --t-muted: #7d938a;
  --t-accent: #2f8f5f; --t-accent-fg: #f0fff7; --t-hover: #12211a;
}
body[data-theme="blue"] {
  --t-bg: #05070d; --t-side: #070a12; --t-panel: #0b1019; --t-panel2: #0e1520;
  --t-line: #1a2434; --t-line2: #243349; --t-txt: #d9e2f0; --t-muted: #7c89a0;
  --t-accent: #3f74d6; --t-accent-fg: #f4f8ff; --t-hover: #131d2b;
}
body[data-theme="pink"] {
  --t-bg: #0b0609; --t-side: #0d070b; --t-panel: #140b10; --t-panel2: #190e14;
  --t-line: #2a1721; --t-line2: #3b2230; --t-txt: #f0dde6; --t-muted: #a08390;
  --t-accent: #e0558f; --t-accent-fg: #fff5f9; --t-hover: #22131a;
}
body[data-theme="purple"] {
  --t-bg: #07060c; --t-side: #090711; --t-panel: #0f0c17; --t-panel2: #130f1d;
  --t-line: #211a30; --t-line2: #2f2545; --t-txt: #e3dcf2; --t-muted: #8b80a3;
  --t-accent: #7b5cd6; --t-accent-fg: #f7f4ff; --t-hover: #1a1427;
}
body[data-theme="white"] {
  --t-bg: #f2f2f4; --t-side: #fafafa; --t-panel: #ffffff; --t-panel2: #f7f7f9;
  --t-line: #e2e2e7; --t-line2: #d2d2d9; --t-txt: #1c1c20; --t-muted: #6a6a74;
  --t-accent: #1c1c20; --t-accent-fg: #ffffff; --t-hover: #ededf1;
}

/* -- surfaces ------------------------------------------------------------- */
body[data-theme] { background: var(--t-bg); color: var(--t-txt); }
body[data-theme] .sidebar { background: var(--t-side); border-right-color: var(--t-line); }
body[data-theme] .sidebar-foot { border-top-color: var(--t-line); }
body[data-theme] .brand-name { color: var(--t-txt); }
body[data-theme] .nav-item { color: var(--t-muted); }
body[data-theme] .nav-item .ico { color: var(--t-muted); }
body[data-theme] .nav-item:hover { background: var(--t-hover); color: var(--t-txt); }
body[data-theme] .nav-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--t-accent) 16%, transparent), transparent);
  color: var(--t-txt);
  box-shadow: inset 2px 0 0 var(--t-accent);
}
body[data-theme] .profile:hover { background: var(--t-hover); }
body[data-theme] .profile-name { color: var(--t-txt); }

body[data-theme] .topbar { border-bottom-color: var(--t-line); }
body[data-theme] .topbar h1 { color: var(--t-txt); }
body[data-theme] .topbar p, body[data-theme] .foot { color: var(--t-muted); }

body[data-theme] .card { background: var(--t-panel); border-color: var(--t-line); }
body[data-theme] .card:hover { border-color: var(--t-line2); }
body[data-theme] .card-head { border-bottom-color: var(--t-line); }
body[data-theme] .card-head h2 { color: var(--t-muted); }
body[data-theme] .card-body { color: var(--t-txt); }
body[data-theme] .hr { background: var(--t-line); }

body[data-theme] th { background: var(--t-panel2); color: var(--t-muted); border-bottom-color: var(--t-line); }
body[data-theme] td { color: var(--t-txt); border-bottom-color: var(--t-line); }
body[data-theme] tbody tr:hover td { background: var(--t-hover); }
body[data-theme] a { color: var(--t-txt); }
body[data-theme] .muted, body[data-theme] .help, body[data-theme] .stat-sub { color: var(--t-muted); }

/* -- controls ------------------------------------------------------------- */
body[data-theme] .btn {
  background: var(--t-panel2); border-color: var(--t-line2); color: var(--t-txt);
}
body[data-theme] .btn:hover { background: var(--t-hover); border-color: var(--t-accent); color: var(--t-txt); }
body[data-theme] .btn.primary {
  background: var(--t-accent); border-color: var(--t-accent); color: var(--t-accent-fg);
}
body[data-theme] .btn.primary:hover { filter: brightness(1.08); color: var(--t-accent-fg); }
body[data-theme] input[type=text], body[data-theme] input[type=password],
body[data-theme] input[type=email], body[data-theme] input[type=number],
body[data-theme] input[type=url], body[data-theme] select, body[data-theme] textarea {
  background: var(--t-panel2); border-color: var(--t-line2); color: var(--t-txt);
}
body[data-theme] input:focus, body[data-theme] select:focus, body[data-theme] textarea:focus {
  border-color: var(--t-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 18%, transparent);
}
body[data-theme] .field > label { color: var(--t-muted); }
body[data-theme] input[type=file] { background: var(--t-panel2); border-color: var(--t-line2); color: var(--t-txt); }
body[data-theme] input[type=file]::file-selector-button {
  background: var(--t-panel); border-color: var(--t-line2); color: var(--t-txt);
}
body[data-theme] .stat { background: var(--t-panel); border-color: var(--t-line); }
body[data-theme] .stat-value { color: var(--t-txt); }
body[data-theme] .stat-label { color: var(--t-muted); }

/* -- bits ---------------------------------------------------------------- */
body[data-theme] .asset-card,
body[data-theme] .preset,
body[data-theme] .account-row,
body[data-theme] .step-row,
body[data-theme] .quick-links a,
body[data-theme] .row-thumb,
body[data-theme] .phrase-box,
body[data-theme] .copyable,
body[data-theme] .alert,
body[data-theme] .var-chip {
  background: var(--t-panel2); border-color: var(--t-line2); color: var(--t-txt);
}
body[data-theme] .asset-thumb { background: var(--t-bg); border-bottom-color: var(--t-line); }
body[data-theme] .preset.active { border-color: var(--t-accent); background: var(--t-hover); }
body[data-theme] .step-num { background: var(--t-panel); border-color: var(--t-line2); color: var(--t-muted); }
body[data-theme] .quick-links a:hover { border-color: var(--t-line2); background: var(--t-hover); }
body[data-theme] .pagination .pg { border-color: var(--t-line2); }

/* white theme tuning */
body[data-theme="white"] .btn.primary { color: #fff; }
body[data-theme="white"] .card { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
body[data-theme="white"] .brand-name { text-shadow: none; }
body[data-theme="white"] .avatar { background: #ececf0; border-color: #dcdce2; color: #6a6a74; }
body[data-theme="white"] .signout { color: #c0392b; }

/* -- table polish: page names upper-case, centred thumbnails --------------- */
.slug-name { text-transform: uppercase; letter-spacing: .02em; }
td .row-thumb, .row-thumb { margin-left: auto; margin-right: auto; }

/* theme picker */
.theme-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.theme-opt {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; cursor: pointer;
  border: 1px solid var(--t-line2, #2a2a30); border-radius: 7px;
  background: var(--t-panel2, #141417); color: var(--t-txt, #d6d6d9);
}
.theme-opt:hover { border-color: var(--t-accent, #e8e8ea); }
.theme-opt.active { border-color: var(--t-accent, #e8e8ea); box-shadow: 0 0 0 1px var(--t-accent, #e8e8ea); }
.theme-dot { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); }
.theme-meta { display: flex; flex-direction: column; line-height: 1.25; font-size: 11px; }
.theme-meta strong { font-size: 11.5px; font-weight: 600; }
@media (max-width: 1100px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* theme-aware sign-out */
body[data-theme] .btn.signout {
  background: rgba(217, 119, 127, .12);
  border-color: rgba(217, 119, 127, .42);
  color: #e78a92;
}
body[data-theme] .btn.signout:hover {
  background: rgba(217, 119, 127, .22);
  border-color: rgba(217, 119, 127, .65);
  color: #ffd3d6;
}

/* white theme: readable status colours */
body[data-theme="white"] .btn.signout {
  background: #fdecec; border-color: #f2c4c4; color: #b2323c;
}
body[data-theme="white"] .btn.signout:hover { background: #fbdcdc; color: #8f1f28; }
body[data-theme="white"] .badge.ok { color: #14724b; background: #e4f6ec; border-color: #bce6d1; }
body[data-theme="white"] .badge.warn { color: #8a5a00; background: #fdf3df; border-color: #ecd7a8; }
body[data-theme="white"] .badge.err { color: #a32830; background: #fdeaea; border-color: #f3c5c5; }
body[data-theme="white"] .badge.info { color: #3a3a44; background: #eeeef2; border-color: #dcdce3; }
body[data-theme="white"] .presence.off { background: #c0454c; }
body[data-theme="white"] .presence.on { background: #1fa06b; box-shadow: none; }
body[data-theme="white"] .phrase-box,
body[data-theme="white"] .copyable { background: #fafafc; border-color: #e2e2e7; }
body[data-theme="white"] .nav-item.active { background: #ededf2; box-shadow: inset 2px 0 0 #1c1c20; }
body[data-theme="white"] .brand-name { color: #141418; animation: none; }

/* nav dropdown (Page Previews) */
.nav-dd { margin: 0; }
.nav-dd > summary { list-style: none; cursor: pointer; }
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd .chev { margin-left: auto; font-size: 10px; color: var(--t-muted, #6f6f77); }
.nav-sub { margin: 2px 0 4px 10px; padding-left: 8px; border-left: 1px solid var(--t-line, #202024); display: flex; flex-direction: column; gap: 1px; }
.nav-sub-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 5px; font-size: 11px; color: var(--t-muted, #76767d); text-decoration: none; }
.nav-sub-item:hover { background: var(--t-hover, #17171c); color: var(--t-txt, #d6d6d9); text-decoration: none; }
.nav-sub-item .nav-prev { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

/* flows canvas */
.flow-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr) 250px; gap: 12px; align-items: start; }
@media (max-width: 1200px) { .flow-layout { grid-template-columns: 1fr; } }
.flow-aside, .flow-routes { position: sticky; top: 16px; }
.flow-rows { display: flex; flex-direction: column; padding: 6px; gap: 2px; max-height: 60vh; overflow: auto; }
.flow-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; font-size: 11.5px; color: var(--t-muted, #76767d); text-decoration: none; }
.flow-row:hover { background: var(--t-hover, #17171c); color: var(--t-txt, #d6d6d9); text-decoration: none; }
.flow-row.active { background: var(--t-hover, #17171c); color: var(--t-txt, #d6d6d9); box-shadow: inset 2px 0 0 var(--t-accent, #e8e8ea); }
.flow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t-accent, #e8e8ea); opacity: .7; flex: 0 0 6px; }
.flow-row span:nth-child(2) { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-main { display: flex; flex-direction: column; gap: 12px; }
.flow-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; }
.flow-head input, .flow-head select { height: 32px; }
.flow-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.flow-card { display: block; padding: 12px; border: 1px solid var(--t-line, #202024); border-radius: 8px; background: var(--t-panel2, #141417); color: var(--t-txt, #d6d6d9); text-decoration: none; }
.flow-card:hover { border-color: var(--t-line2, #2a2a30); text-decoration: none; }
.flow-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.flow-card-head strong { flex: 1 1 auto; font-size: 12.5px; }
.flow-card-meta { font-size: 10.5px; color: var(--t-muted, #76767d); margin-bottom: 8px; }
.flow-card-steps { display: flex; flex-wrap: wrap; gap: 4px; }
.flow-step-chip { font-size: 9.5px; padding: 2px 7px; border-radius: 4px; background: var(--t-panel, #101012); border: 1px solid var(--t-line, #202024); color: var(--t-muted, #76767d); }
.flow-pages { display: flex; flex-direction: column; padding: 6px; max-height: 60vh; overflow: auto; }
.flow-page { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border-radius: 5px; font-size: 11px; color: var(--t-muted, #76767d); text-decoration: none; }
.flow-page:hover { background: var(--t-hover, #17171c); color: var(--t-txt, #d6d6d9); text-decoration: none; }
.step-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t-accent, #e8e8ea); opacity: .6; flex: 0 0 5px; }

/* mailer layout */
.mailer-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--t-line, #202024); margin-bottom: 12px; }
.mailer-tab { padding: 8px 14px; font-size: 11.5px; color: var(--t-muted, #76767d); text-decoration: none; border-bottom: 2px solid transparent; }
.mailer-tab.active { color: var(--t-txt, #d6d6d9); border-bottom-color: var(--t-accent, #e8e8ea); }
.mailer-tab:hover { color: var(--t-txt, #d6d6d9); text-decoration: none; }
.mailer-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .mailer-layout { grid-template-columns: 1fr; } }
.mailer-left, .mailer-right { display: flex; flex-direction: column; gap: 12px; }
.mailer-preview { background: #0b0b0d; border-radius: 6px; overflow: hidden; min-height: 260px; }
.mailer-preview iframe { width: 100%; height: 340px; border: 0; background: #fff; }
.preset-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preset span:last-child { font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }

/* page previews accordion */
.pv-list { display: flex; flex-direction: column; gap: 6px; }
.pv-item { border: 1px solid var(--t-line, #202024); border-radius: 8px; background: var(--t-panel2, #141417); overflow: hidden; }
.pv-item[open] { border-color: var(--t-line2, #2a2a30); }
.pv-summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.pv-summary::-webkit-details-marker { display: none; }
.pv-title { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 140px; }
.pv-title strong { font-size: 12.5px; }
.pv-meta { font-size: 10.5px; color: var(--t-muted, #76767d); min-width: 70px; }
.pv-chev { font-size: 10px; color: var(--t-muted, #76767d); transition: transform .15s ease; }
.pv-item[open] .pv-chev { transform: rotate(180deg); }
.pv-body { border-top: 1px solid var(--t-line, #202024); padding: 10px 12px 12px; background: var(--t-panel, #101012); }
.pv-step { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; }
.pv-step + .pv-step { border-top: 1px solid var(--t-line, #202024); }
.pv-step-num { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; background: var(--t-panel2, #141417); border: 1px solid var(--t-line2, #2a2a30); font-size: 10px; color: var(--t-muted, #76767d); }
.pv-step-name { flex: 0 0 150px; font-size: 11.5px; }
.pv-step-path { flex: 1 1 auto; font-size: 10.5px; color: var(--t-muted, #76767d); }
@media (max-width: 900px) { .pv-summary { flex-wrap: wrap; } .pv-meta { min-width: 0; } }

/* dashboard visitors table (reference composition) */
.visitor { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.visitor-cc { font-size: 15px; line-height: 1; width: 22px; text-align: center; }
.visitor-main { display: flex; flex-direction: column; gap: 2px; }
.visitor-loc { display: flex; flex-direction: column; gap: 2px; min-width: 130px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: #6a6a72; }
.status-dot.on { background: #3fce8f; box-shadow: 0 0 6px rgba(63,206,143,.6); }
.status-dot.off { background: #6a6a72; }
.count-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--t-muted, #76767d); }

/* mailer empty preview */
.mailer-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 300px; color: var(--t-muted, #76767d); background: var(--t-panel2, #141417); border-radius: 6px; }
.mailer-empty span { font-size: 22px; opacity: .6; }
.mailer-empty p { font-size: 11.5px; margin: 0; }

/* flow step kind + branches + route chips */
.step-kind { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted, #76767d); flex: 0 0 auto; }
.branch-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px 34px; }
.branch-zone { flex: 0 0 170px; padding: 8px 10px; border: 1px dashed var(--t-line2, #2a2a30); border-radius: 6px; font-size: 10px; color: var(--t-muted, #76767d); }
.route-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; }
.route-chip { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--t-line, #202024); background: var(--t-panel2, #141417); color: var(--t-muted, #76767d); }