/* ══════════════════════════════════════════════
   Payless Automation Hub — styles.css
   ══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sidebar-w:   252px;
  --navy:        #0b1f3a;
  --navy-2:      #0f2a4e;
  --navy-3:      #132f56;
  --blue:        #1e5799;
  --accent:      #3b9eda;
  --accent-soft: rgba(59,158,218,0.12);
  --green:       #10b981;
  --green-soft:  rgba(16,185,129,0.12);
  --amber:       #f59e0b;
  --red:         #ef4444;
  --bg:          #eef2f8;
  --bg-soft:     #f1f5f9;
  --card:        #ffffff;
  --border:      #e2e8f0;
  --text:        #1e293b;
  --text-1:      #1e293b;
  --text-2:      #64748b;
  --text-3:      #94a3b8;
  --log-bg:      #0d1b2e;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}

/* ══ LAYOUT ══════════════════════════════════════════════════════════════════ */

body { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, #0b1f3a 0%, #0d2444 60%, #0f2a4e 100%);
  display: flex;
  flex-direction: column;
  padding: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  box-shadow: 4px 0 24px rgba(0,0,0,0.18);
}

.main-wrap {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ══ SIDEBAR ════════════════════════════════════════════════════════════════ */

.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: contain;
  background: #fff;
  padding: 5px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 2px rgba(59,158,218,0.25);
}

.brand-dept {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: #eaf6ff;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(59,158,218,0.30), rgba(59,158,218,0.10));
  border: 1px solid rgba(59,158,218,0.38);
  box-shadow: 0 2px 12px rgba(59,158,218,0.20), inset 0 1px 0 rgba(255,255,255,0.10);
}

.brand-dept-icon { font-size: 15px; line-height: 1; flex-shrink: 0; }

.brand-name {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.2px;
}

.brand-sub {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
  line-height: 1.2;
}

.sidebar-nav {
  flex: 1;
  min-height: 0;            /* allow the nav to shrink below its content height */
  overflow-y: auto;         /* scroll the menu instead of pushing the footer off-screen */
  overscroll-behavior: contain;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Thin bluish scrollbar to match the sidebar theme */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(59,158,218,0.30);
  border-radius: 3px;
}
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(59,158,218,0.50); }
.sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(59,158,218,0.35) transparent; }

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  padding: 12px 10px 5px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  background: none;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s;
  width: 100%;
  position: relative;
}

.nav-item:hover:not(.nav-disabled) {
  background: rgba(255,255,255,0.08);
  color: #fff;
  transform: translateX(2px);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(59,158,218,0.2), rgba(59,158,218,0.1));
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(59,158,218,0.25);
  box-shadow: 0 2px 8px rgba(59,158,218,0.15);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.nav-disabled {
  cursor: default;
  opacity: 0.5;
}

.nav-icon { font-style: normal; width: 16px; text-align: center; flex-shrink: 0; }

.nav-badge {
  margin-left: auto;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Collapsible nav group (e.g. "Weekly Reports") */
.nav-item.nav-group-parent {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.nav-item.nav-group-parent:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  transform: none;
}
.nav-group-chevron {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.nav-item.nav-group-parent:hover .nav-group-chevron {
  opacity: 0.9;
}
.nav-group-children {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 4px 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.10);
}
.nav-item.nav-child {
  padding: 7px 10px;
  font-size: 12.5px;
}
.nav-item.nav-child .nav-icon {
  font-size: 12px;
  opacity: 0.85;
}

.sidebar-footer {
  padding: 12px 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.chrome-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all 0.15s;
}

.chrome-pill:hover { background: rgba(255,255,255,0.09); }
.chrome-pill.connected { border-color: rgba(16,185,129,0.4); color: var(--green); background: rgba(16,185,129,0.07); justify-content: center; }
/* When disconnected, label pushes the Connect button to the right */
.chrome-pill:not(.connected) #chromeLabel { flex: 1; }

.chrome-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
  transition: background 0.3s;
}

.chrome-pill.connected .chrome-dot { background: var(--green); box-shadow: 0 0 5px var(--green); }

/* ══ VIEWS ═══════════════════════════════════════════════════════════════════ */

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.view { display: none; padding: 28px 32px; }
.view.active-view {
  display: block;
  animation: viewFadeIn 0.3s ease both;
}

/* ══ TOPBAR ══════════════════════════════════════════════════════════════════ */

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}

.page-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.4px;
}
.page-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }

.date-chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}

/* ══ STATS ═══════════════════════════════════════════════════════════════════ */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0.06;
  background: currentColor;
}

.stat-card:nth-child(1) { border-top: 3px solid #6366f1; }
.stat-card:nth-child(2) { border-top: 3px solid var(--green); }
.stat-card:nth-child(3) { border-top: 3px solid var(--accent); }
.stat-card:nth-child(4) { border-top: 3px solid var(--amber); }

.stat-val {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -1px;
}

.stat-val.green { color: var(--green); }
.stat-val.blue  { color: var(--accent); }

.stat-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

/* ══ SECTION HEADERS ════════════════════════════════════════════════════════ */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
}

/* ══ MODULE GRID ════════════════════════════════════════════════════════════ */

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.module-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s;
  cursor: pointer;
}

.module-card:hover:not(.module-soon) {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 16px 40px rgba(0,0,0,0.13);
}

.module-card.module-soon { cursor: default; opacity: 0.65; }

.module-stripe {
  height: 6px;
  width: 100%;
}

.module-body { padding: 20px; }

.module-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.module-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.status-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 20px;
}

.status-active   { background: var(--green-soft); color: var(--green); }
.status-soon     { background: rgba(245,158,11,0.1); color: var(--amber); }
.status-running  { background: rgba(59,158,218,0.12); color: var(--accent); }
.status-error    { background: rgba(239,68,68,0.1); color: var(--red); }

.module-name { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.module-desc { font-size: 12px; color: var(--text-2); line-height: 1.55; }

.module-meta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.module-last-run { font-size: 11px; color: var(--text-3); }

.btn-open {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(59,158,218,0.2);
  border-radius: 8px;
  padding: 5px 13px;
  cursor: pointer;
  transition: all 0.18s;
}

.btn-open:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateX(2px);
}

.module-sources {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.source-tag {
  font-size: 10px;
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text-2);
}

.module-skeleton {
  height: 200px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 16px;
}

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ══ ACTIVITY LIST ═══════════════════════════════════════════════════════════ */

.activity-list {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.activity-empty {
  padding: 20px;
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
}

.activity-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  transition: background 0.1s;
}

/* Separator sits between runs (the whole item), so a failed run's error panel
   stays visually grouped with its own row, not the next one. */
.activity-item { border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-row:hover { background: #f8fafc; }

/* Failed runs expand to show why (click the row) */
.activity-item.has-error .activity-row { cursor: pointer; }
.activity-caret {
  display: inline-block;
  font-size: 9px;
  color: var(--text-3);
  transition: transform 0.12s;
}
.activity-item.open .activity-caret { transform: rotate(90deg); }
.activity-error {
  display: none;
  margin: 0 18px 12px 40px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--red);
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.activity-item.open .activity-error { display: block; }

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-dot.success { background: var(--green); }
.activity-dot.error   { background: var(--red); }

.activity-info { flex: 1; }
.activity-name { font-size: 13px; font-weight: 500; }
.activity-time { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.activity-status { font-size: 11px; font-weight: 600; }
.activity-status.success { color: var(--green); }
.activity-status.error   { color: var(--red); }

/* ══ MODULE VIEW ════════════════════════════════════════════════════════════ */

/* ── Module hero banner ──────────────────────────────────────────────────── */
.mod-hero {
  position: relative;
  margin: -28px -32px 28px;          /* bleed past .view padding */
  height: 200px;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.mod-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.6s ease;
}

.mod-hero-photo.hidden { opacity: 0; }

.mod-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(11,31,58,0.82) 0%,
    rgba(11,31,58,0.55) 55%,
    rgba(0,0,0,0.25) 100%
  );
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 18px 24px;
}

.mod-hero-left { display: flex; flex-direction: column; gap: 6px; }

.mod-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background 0.15s;
  width: fit-content;
}
.mod-hero-back:hover { background: rgba(255,255,255,0.25); }

.mod-hero-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  line-height: 1.1;
}

.mod-hero-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

.mod-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.mod-hero-badge {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 99px;
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.mod-hero-quote {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  font-style: italic;
  text-align: right;
  max-width: 200px;
}

/* Floating orbs inside the hero */
.mod-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.18;
  pointer-events: none;
}

.module-view-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.back-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}

.back-btn:hover { border-color: var(--accent); color: var(--accent); }

.mv-title { font-size: 22px; font-weight: 700; }
.mv-sub   { font-size: 13px; color: var(--text-2); margin-top: 3px; }

.module-view-body {
  display: grid;
  /* minmax(0, 1fr) clamps the main column so wide tables (like the
     commission Review & Insert table) scroll internally instead of
     pushing the whole grid wider than the viewport — otherwise the
     sidebar gets squeezed / pushed off-screen. */
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

/* ── Sales Commission sub-module picker ─────────────────────────────────── */
.comm-sub-tile {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.comm-sub-tile:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  border-color: var(--navy, #1e3a5f);
}
.comm-sub-tile.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.comm-sub-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comm-sub-tile-icon {
  font-size: 32px;
  line-height: 1;
}
.comm-sub-tile-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1, #0f172a);
}
.comm-sub-tile-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3, #64748b);
}

.comm-breadcrumb-back {
  background: var(--navy, #1e3a5f);
  border: 1px solid var(--navy, #1e3a5f);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.comm-breadcrumb-back:hover {
  background: #2a4d73;
  box-shadow: 0 3px 9px rgba(15, 23, 42, .26);
  transform: translateY(-1px);
}

/* Active sub-module pill shown next to the module title in the hero */
.mod-hero-subtag {
  display: inline-block;
  margin-left: 12px;
  padding: 3px 13px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  vertical-align: middle;
  white-space: nowrap;
}

/* Run panel */
.run-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  min-width: 0;   /* allow the panel to shrink inside a grid track */
}

.run-panel-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.run-panel-title { font-size: 14px; font-weight: 700; }

.run-steps { padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; }

.run-step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 0.2s;
}

.run-step.step-active  { border-color: var(--accent); background: #f0f7ff; }
.run-step.step-done    { border-color: #86efac; background: #f0fdf4; }

.step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s;
}

.run-step.step-active .step-circle { background: var(--accent); color: #fff; }
.run-step.step-done   .step-circle { background: var(--green);  color: #fff; }

.step-info { flex: 1; }
.step-label { font-size: 12px; font-weight: 600; }
.step-hint  { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.step-hint.ok { color: var(--green); font-weight: 600; }

.btn-chrome {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  min-width: 120px;
}

.btn-chrome:hover:not(:disabled) { background: var(--blue); }
.btn-chrome:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-chrome.ok { background: var(--green); }

/* Mini Connect button that lives inside the sidebar Chrome pill */
.btn-chrome-mini {
  background: rgba(59,130,246,0.85);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: .2px;
}
.btn-chrome-mini:hover { background: var(--blue); }

.btn-run-module {
  margin: 0 22px 20px;
  width: calc(100% - 44px);
  background: linear-gradient(135deg, #1e5799, #3b9eda);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 4px 16px rgba(30,87,153,0.35);
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
}

.btn-run-module::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
}

.btn-run-module:hover:not(:disabled)::after { transform: translateX(100%); }

.btn-run-module:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 24px rgba(30,87,153,0.45);
}

.btn-run-module:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-stop {
  flex-shrink: 0;
  background: #fee2e2;
  color: var(--red);
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-stop:hover:not(:disabled) { background: #fecaca; }
.btn-stop:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-run-module.running  { background: linear-gradient(135deg, #374151, #4b5563); }
.btn-run-module.done     { background: linear-gradient(135deg, #065f46, var(--green)); }
.btn-run-module.errored  { background: linear-gradient(135deg, #7f1d1d, var(--red)); }

/* Log */
.log-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.log-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.log-title { font-size: 13px; font-weight: 700; }

.log-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: #e2e8f0;
  color: var(--text-2);
}

.log-pill.running { background: #dbeafe; color: #1e40af; }
.log-pill.done    { background: #dcfce7; color: #14532d; }
.log-pill.error   { background: #fee2e2; color: #7f1d1d; }

.log-body {
  background: var(--log-bg);
  font-family: 'Menlo', 'Monaco', monospace;
  font-size: 11.5px;
  line-height: 1.75;
  padding: 14px 16px;
  height: 340px;        /* fixed — never grows, never shrinks */
  overflow-x: hidden;   /* long lines wrap instead of expanding the panel */
  overflow-y: auto;
  color: #8baec8;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Compact single-line status bar — used where there's no streaming log */
.log-body-compact {
  background: var(--log-bg);
  font-family: 'Menlo', 'Monaco', monospace;
  font-size: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8baec8;
  overflow: hidden;
}
.log-body-compact span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-line         { display: block; word-break: break-word; }
.log-line.success { color: #4ade80; }
.log-line.error   { color: #f87171; }
.log-line.warn    { color: #fbbf24; }
.log-line.step    { color: #60a5fa; font-weight: 600; margin-top: 2px; }
.log-idle         { color: #3d5872; font-style: italic; }

/* Side panel */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}

.info-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
  margin-bottom: 12px;
}

.info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.info-row:last-child { border-bottom: none; }
.info-key   { color: var(--text-2); flex-shrink: 0; margin-right: 10px; }
.info-value { font-weight: 600; text-align: right; }

.emp-list-mini { display: flex; flex-direction: column; gap: 6px; }

/* Cap long avatar lists so the side panel scrolls internally instead of pushing
   the whole page down. ~6-7 rows show before the list starts scrolling. */
.list-scroll { max-height: 360px; overflow-y: auto; overflow-x: hidden; padding-right: 3px; }
.list-scroll::-webkit-scrollbar { width: 7px; }
.list-scroll::-webkit-scrollbar-track { background: transparent; }
.list-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.list-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

.emp-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.emp-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--accent));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emp-n  { font-size: 12px; font-weight: 600; }
.emp-sh { font-size: 10px; color: var(--text-3); }

/* ══ MODAL ═══════════════════════════════════════════════════════════════════ */

.overlay {
  position: fixed; inset: 0;
  background: rgba(10,22,40,0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--card);
  border-radius: 20px;
  padding: 32px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  text-align: center;
}

.custom-modal {
  animation: fadeSlideUp 0.25s cubic-bezier(.34,1.56,.64,1) both;
  max-width: 420px;
}

.custom-modal-icon {
  font-size: 44px;
  margin-bottom: 14px;
  line-height: 1;
}

.custom-modal .modal-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

.custom-modal .modal-body {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}

.custom-modal-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  background: #f8fafc;
  outline: none;
  font-family: inherit;
  margin-top: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.custom-modal-input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59,158,218,0.13);
}

.custom-modal-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  background: #f8fafc;
  outline: none;
  font-family: inherit;
  margin-top: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.custom-modal-select:focus {
  border-color: var(--accent);
  background: #fff;
}

.custom-modal-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 16px;
  text-align: left;
}

.btn-modal-danger {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-modal-danger:hover { background: #dc2626; transform: translateY(-1px); }

.modal-icon  { font-size: 40px; margin-bottom: 16px; }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.modal-body  { font-size: 13px; color: var(--text-2); line-height: 1.6; }

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  justify-content: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--accent));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: #f1f5f9;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-secondary:hover { background: var(--border); }

/* ══ COMMISSION MODULE ═══════════════════════════════════════════════════════ */

.comm-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comm-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: #f8fafc;
  transition: border-color 0.15s, background 0.15s;
  color: var(--text);
}
.comm-input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(59,158,218,0.1); }

/* Stepper */
.comm-step-row {
  display: flex;
  gap: 14px;
}

.comm-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 34px;
  flex-shrink: 0;
}

.comm-step-node {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--border);
  background: #f8fafc;
  color: var(--text-3);
  transition: all 0.25s;
  z-index: 1;
}

.comm-step-line {
  width: 2px;
  flex: 1;
  min-height: 16px;
  background: var(--border);
  margin: 4px 0;
  transition: background 0.4s;
  border-radius: 1px;
}

.comm-step-content { flex: 1; padding-bottom: 22px; }

.comm-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 6px;
  transition: color 0.2s;
}

.comm-step-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.5;
  transition: color 0.2s;
}

.comm-step-row.active  .comm-step-node { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59,158,218,0.18); }
.comm-step-row.done    .comm-step-node { background: var(--green);  color: #fff; border-color: var(--green); }
.comm-step-row.warning .comm-step-node { background: var(--amber);  color: #fff; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(245,158,11,0.18); }
.comm-step-row.error   .comm-step-node { background: var(--red);    color: #fff; border-color: var(--red); }
.comm-step-row.active  .comm-step-label { color: var(--accent); }
.comm-step-row.done    .comm-step-label { color: var(--green); }
.comm-step-row.warning .comm-step-label { color: #d97706; }
.comm-step-row.error   .comm-step-label { color: var(--red); }
.comm-step-row.active  .comm-step-hint  { color: var(--accent); }
.comm-step-row.done    .comm-step-hint  { color: #16a34a; }
.comm-step-row.warning .comm-step-hint  { color: #d97706; }
.comm-step-row.done    .comm-step-line  { background: var(--green); }
.comm-step-row.error   .comm-step-line  { background: var(--red); }

/* Duplicate alert */
.comm-dup-alert {
  margin-top: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 14px 16px;
}

.comm-dup-btn {
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}
.comm-dup-btn.proceed { background: var(--green); color: #fff; }
.comm-dup-btn.proceed:hover { background: #059669; }
.comm-dup-btn.skip    { background: #fee2e2; color: var(--red); border: 1px solid #fca5a5; }
.comm-dup-btn.skip:hover    { background: #fecaca; }

/* Data preview */
.comm-data-grid { display: flex; flex-direction: column; }

.comm-data-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.comm-data-row:last-child { border-bottom: none; }

.comm-data-col {
  font-family: 'Menlo', monospace;
  font-size: 10px;
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
}

.comm-data-key { color: var(--text-2); }

.comm-data-val {
  font-weight: 600;
  color: var(--text-3);
  text-align: right;
  font-style: italic;
}
.comm-data-val.filled { color: var(--text); font-style: normal; }

/* ══ SETTINGS BUTTON ═════════════════════════════════════════════════════════ */

.settings-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 12px;
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: left;
}
.settings-btn:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}

/* ══ COMMISSION ESTIMATE DROP ZONES ═════════════════════════════════════════ */

.ce-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 18px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #f8fafc;
  user-select: none;
}
.ce-drop-zone:hover { border-color: var(--navy); background: #f0f5ff; color: var(--navy); }
.ce-drop-zone.ce-drop-active { border-color: #0f766e; background: #f0fdfa; color: #0f766e; }
.ce-drop-zone.ce-drop-filled { border-color: #16a34a; background: #f0fdf4; color: #16a34a; border-style: solid; }

/* ══ SCROLLBARS ══════════════════════════════════════════════════════════════ */

.log-body::-webkit-scrollbar { width: 5px; }
.log-body::-webkit-scrollbar-track { background: transparent; }
.log-body::-webkit-scrollbar-thumb { background: #1e3a55; border-radius: 3px; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .module-view-body { grid-template-columns: 1fr; }
  .stats-row        { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .sidebar     { display: none; }
  .view        { padding: 16px; }
}

/* ══ HUB BODY LAYOUT ════════════════════════════════════════════════════════ */

#hubBody {
  display: flex;
  height: 100vh;
  overflow: hidden;
  width: 100%;
}

/* ══ LOGIN SCREEN ════════════════════════════════════════════════════════════ */

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatUp {
  0%   { transform: translateY(0px) rotate(0deg); opacity: 0.15; }
  50%  { transform: translateY(-30px) rotate(180deg); opacity: 0.08; }
  100% { transform: translateY(0px) rotate(360deg); opacity: 0.15; }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 0.4; }
  100% { transform: scale(1.55); opacity: 0; }
}

.login-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  overflow: hidden;
}

/* Rotating photo background */
.login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.login-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1.5s ease;
  opacity: 0;
}
.login-bg-img.active { opacity: 1; }
.login-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11,31,58,0.78) 0%, rgba(10,22,50,0.72) 100%);
}

/* Floating orbs in background */
.login-overlay::before,
.login-overlay::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.login-overlay::before {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(59,158,218,0.15) 0%, transparent 70%);
  top: -100px; left: -100px;
  animation: floatUp 10s ease-in-out infinite;
}

.login-overlay::after {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
  bottom: -80px; right: -80px;
  animation: floatUp 13s ease-in-out infinite reverse;
}

.login-card {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 44px 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.15);
  text-align: center;
  animation: fadeSlideUp 0.5s cubic-bezier(.34,1.56,.64,1) both;
  position: relative;
  z-index: 1;
}

.login-logo-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
}

.login-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  opacity: 0.25;
  animation: pulse-ring 2.5s ease-out infinite;
}

.login-logo-bg {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--navy), #1e3a6e);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(11,31,58,0.45), 0 0 0 2px rgba(59,158,218,0.3);
  position: relative;
}

.login-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

.login-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.login-sub {
  font-size: 12.5px;
  color: var(--text-3);
  margin-bottom: 30px;
  font-weight: 500;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.login-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Reusable small input used inside module panels and admin forms.
   (The repeated inline style in app.js has been replaced with this class.) */
.hub-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  background: #fff;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, background-color 0.15s;
}
.hub-input:focus { border-color: var(--accent); }

/* Locked variant — used for URL fields that should not be edited by accident.
   Looks dimmed / non-interactive until the user clicks Edit. Click on the
   input itself does nothing (cursor stays in not-allowed). */
.hub-input.hub-input-locked {
  background: #f3f4f6;
  color: var(--text-2, #4b5563);
  cursor: not-allowed;
  border-color: var(--border);
  user-select: text;     /* let user copy the URL even when locked */
}
.hub-input.hub-input-locked:focus {
  border-color: var(--border);
  outline: none;
}
.hub-input.hub-input-editing {
  background: #fff;
  color: var(--text);
  border-color: var(--accent, #1e5799);
  box-shadow: 0 0 0 2px rgba(30, 87, 153, 0.12);
}

/* Pill-shaped edit/save toggle button next to a hub-input */
.hub-input-toggle {
  background: none;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hub-input-toggle:hover { background: #f3f4f6; }
.hub-input-toggle.editing {
  background: var(--navy, #1e5799);
  color: #fff;
  border-color: var(--navy, #1e5799);
}
.hub-input-toggle.editing:hover { background: #18416f; }
.hub-input-toggle:disabled { opacity: 0.6; cursor: wait; }

.login-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  font-size: 14px;
  color: var(--text);
  background: #f8fafc;
  outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  font-family: inherit;
}

.login-input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(59,158,218,0.13);
}

.login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12px;
  color: #b91c1c;
  line-height: 1.5;
  text-align: left;
}

.login-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #1e5799, #3b9eda, #2563eb);
  background-size: 200% 200%;
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 18px rgba(30,87,153,0.4);
  margin-top: 4px;
  font-family: inherit;
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
}

.login-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
}

.login-btn:hover:not(:disabled)::after { transform: translateX(100%); }

.login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30,87,153,0.5);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Microsoft SSO Button */
.ms-login-btn {
  width: 100%;
  padding: 12px 16px;
  background: #ffffff;
  color: #1e293b;
  border: 1.5px solid #d1d5db;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  font-family: inherit;
}

.ms-login-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ms-login-btn:active:not(:disabled) {
  transform: translateY(0);
  background: #f1f5f9;
}

.ms-login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ms-tenant-hint {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.2px;
}

.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0 14px;
  color: var(--text-3);
  font-size: 11.5px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}

.login-divider span {
  padding: 0 10px;
}

.login-footer {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 22px;
}

/* ══ DASHBOARD HERO BANNER ══════════════════════════════════════════════════ */

.dash-hero {
  background: linear-gradient(135deg, #0b1f3a 0%, #1e3a6e 50%, #1a306a 100%);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(11,31,58,0.18);
}

.dash-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,158,218,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.dash-hero::after {
  content: '';
  position: absolute;
  bottom: -40px; left: 30%;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.dash-hero-text { position: relative; z-index: 1; }

.dash-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.dash-hero-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

.dash-hero-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 40px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.dash-hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ══ ADMIN PANEL ═════════════════════════════════════════════════════════════ */

.admin-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}

.admin-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 10px 22px;
  text-align: left;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}

.admin-table td {
  padding: 12px 22px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: #f8fafc; }

.admin-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-badge.admin  { background: rgba(59,158,218,0.12); color: var(--accent); }
.admin-badge.user   { background: #f1f5f9;               color: var(--text-3); }

.admin-module-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
  white-space: nowrap;
}

.admin-chip.all { background: #dcfce7; color: #15803d; }

.admin-actions {
  display: flex;
  gap: 6px;
}

.btn-admin-edit {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}

.btn-admin-edit:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.btn-admin-del {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: var(--red);
  cursor: pointer;
  transition: all 0.15s;
}

.btn-admin-del:hover { background: #fee2e2; }

/* Admin create/edit form */
.admin-form {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.admin-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-form-input {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: #f8fafc;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}

.admin-form-input:focus { border-color: var(--accent); background: #fff; }

.admin-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.admin-module-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  transition: all 0.15s;
  user-select: none;
}

.admin-module-check:hover { border-color: var(--accent); color: var(--text); }
.admin-module-check.checked { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.admin-module-check input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }

.admin-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ══ ADMIN — USER TABLE ══════════════════════════════════════════════════════
   Was ~30 lines of repeated inline style per row. Pulled out here so a row is
   readable markup, and so every pill/button shares one definition instead of a
   copy per column. Everything is nowrap on purpose: wrapped badges and dates
   were making each row three lines tall. */

.admin-users {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* No `min-width: max-content` here, deliberately.
   It was added to stop the name column being squeezed, but measurement showed it
   never did that — with every row collapsed the column widths are identical with
   and without it. What it DID do was size the table to the widest thing inside it,
   and the expanded "Edit Access & Permissions" panel is a colspan cell holding one
   checkbox per module. So the table grew by roughly 150px per module: 31 modules
   pushed it to 4,506px inside a 1,058px card, i.e. ~3.4k of sideways scrolling, and
   it got worse with every automation added. Without it the panel wraps and grows
   taller instead, which is what a form should do. */

.admin-users thead th {
  padding: 9px 14px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.admin-users thead th.au-right { text-align: right; }

.admin-users tbody td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-users tbody tr.au-row { transition: background .12s ease; }
.admin-users tbody tr.au-row:hover { background: rgba(59,158,218,0.05); }
.admin-users tbody tr.au-off { background: #fbfcfd; }
.admin-users tbody tr.au-off .au-name,
.admin-users tbody tr.au-off .au-modules { opacity: .55; }

.au-name { font-size: 13px; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.au-sub  { font-size: 11px; font-weight: 400; color: var(--text-3); white-space: nowrap; }
.au-you  { font-size: 10px; font-weight: 500; color: var(--text-3); }

.au-account { display: flex; align-items: center; gap: 5px; white-space: nowrap; }

.au-pill {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 6px; padding: 2px 7px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.au-pill-ms    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.au-pill-local { background: var(--bg-soft); color: #475569; border: 1px solid #cbd5e1; }
.au-pill-admin { background: var(--accent-soft); color: var(--blue); border: 1px solid #bfdbfe; }
.au-pill-off   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.au-modules {
  font-size: 12px; color: var(--text-2);
  max-width: 180px;          /* widest single column; the full list is in the tooltip
                                and in the Edit panel, so trimming it here buys the
                                most horizontal room for the least lost information */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.au-activity { font-size: 11px; color: var(--text-3); white-space: nowrap; line-height: 1.55; }
.au-activity .au-live { color: var(--green); font-weight: 500; }

.au-actions { display: flex; gap: 5px; justify-content: flex-end; white-space: nowrap; }

.au-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 500;
  color: var(--text-2);
  white-space: nowrap; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.au-btn:hover       { background: var(--bg-soft); border-color: #cbd5e1; color: var(--text-1); }
.au-btn-blue        { color: #1d4ed8; border-color: #bfdbfe; }
.au-btn-blue:hover  { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.au-btn-red         { color: var(--red); border-color: #fca5a5; }
.au-btn-red:hover   { background: #fef2f2; border-color: #f87171; color: var(--red); }
.au-btn-green       { color: var(--green); border-color: #86efac; }
.au-btn-green:hover { background: #f0fdf4; border-color: #4ade80; color: var(--green); }

/* ══ SIGNET MODULE ═══════════════════════════════════════════════════════════
   Namespaced like the commission block above. Signet was written against
   .field-label / .input-field / .data-table / .muted, none of which existed --
   so every control fell back to the browser's own styling. These are the same
   shapes the rest of the Hub uses, on the same tokens.                       */

.signet-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.signet-tab {
  background: var(--card);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.signet-tab:hover { background: #f8fafc; color: var(--blue); }
.signet-tab.is-active {
  background: var(--accent-soft);
  color: var(--blue);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,158,218,0.09);
}

.signet-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.signet-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #f8fafc;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.signet-input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59,158,218,0.1);
}
textarea.signet-input { resize: vertical; line-height: 1.55; min-height: 96px; }
/* The template body is HTML, so it reads far better aligned than in the body
   face. */
textarea#signetTplBody {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

.signet-muted { color: var(--text-2); font-size: 13px; line-height: 1.6; }

.signet-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.signet-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 10px 16px;
  text-align: left;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.signet-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-1);
}
.signet-table tr:last-child td { border-bottom: none; }
.signet-table tr:hover td { background: #f8fafc; }
/* A board with ten columns must scroll inside its own panel rather than push
   the grid wider than the viewport -- the same reason .module-view-body pins
   its first track to minmax(0, 1fr). */
.signet-scroll { overflow-x: auto; }

/* The board is eight columns wide. Squeezed into the main track it wrapped every
   cell -- "Waiting on employee" over three lines, a Signet ID over four -- which
   is unreadable for the one screen a manager actually watches. A min-width lets
   it scroll inside its own panel instead, and nothing that reads as a single
   value is allowed to break across lines. */
.signet-scroll .signet-table { min-width: 900px; }
.signet-table .signet-nowrap,
.signet-table td.signet-muted { white-space: nowrap; }
.signet-id {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.signet-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.signet-actions .btn-primary,
.signet-actions .btn-secondary {
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* ── SIGNET — composing a run and a template ──────────────────────────────────
   The token chips and the per-person picture cards. Same palette tokens as the
   rest of the Hub; classes are namespaced so nothing here can reach another
   module's markup. */

/* Bringing in a Word document. Same accent-edged panel as the chips below it --
   the two are the beginning and the end of writing a document, so they read as
   the same kind of thing. */
.signet-import {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(59, 158, 218, 0.05), rgba(59, 158, 218, 0));
}
.signet-import-head {
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
}
.signet-import-head b { display: block; color: var(--text-1); margin-bottom: 2px; }
.signet-import-btn { margin-top: 10px; }
.signet-import-notes {
  font-size: 12.5px; line-height: 1.6; color: var(--text-2);
}
.signet-import-notes:empty { display: none; }
.signet-import-notes.is-busy,
.signet-import-notes.is-ok,
.signet-import-notes.is-bad {
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border);
}
.signet-import-notes.is-bad { color: #b91c1c; }
.signet-import-ok { color: var(--text-1); font-weight: 600; margin-bottom: 6px; }
.signet-import-notes ul { margin: 0; padding-left: 17px; }
.signet-import-notes li { margin-bottom: 4px; }

.signet-chips {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px 4px;
  background: linear-gradient(180deg, rgba(59, 158, 218, 0.05), rgba(59, 158, 218, 0));
}
.signet-chips-head {
  font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 10px;
}
.signet-chips-head b { color: var(--text-1); }
.signet-chipgroup { margin-bottom: 11px; }
.signet-chiplabel {
  font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 5px;
}
.signet-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }

.signet-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); padding: 5px 9px;
  cursor: grab; font: inherit; text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.signet-chip:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(30, 87, 153, 0.12);
  transform: translateY(-1px);
}
.signet-chip:active { cursor: grabbing; transform: translateY(0); }
.signet-chip-name { font-size: 12.5px; color: var(--text-1); }
.signet-chip-token {
  font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--blue); background: var(--accent-soft);
  padding: 1px 5px; border-radius: 4px;
}

/* ── Per-person pictures ──────────────────────────────────────────────────── */
.signet-picgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px; margin-top: 4px;
}
.signet-pic {
  border: 1.5px dashed var(--border); border-radius: 9px;
  background: var(--card); padding: 10px; min-height: 92px;
  display: flex; gap: 10px; align-items: center;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.signet-pic:focus { outline: none; border-color: var(--accent); }
.signet-pic:focus, .signet-pic.is-over {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(59, 158, 218, 0.12);
}
.signet-pic.is-filled { border-style: solid; }
.signet-pic-drop { width: 100%; text-align: center; }
.signet-pic-thumb {
  width: 78px; height: 58px; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.signet-pic-body { min-width: 0; }
.signet-pic-who {
  font-size: 12.5px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.signet-pic-hint  { font-size: 11.5px; color: var(--text-3); margin: 3px 0 5px; }
.signet-pic-meta  { font-size: 11px; color: var(--text-3); margin: 2px 0 4px; }
.signet-pic-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.signet-notneeded { color: var(--text-3); font-style: italic; }
.signet-filefail  { color: #92400e; font-weight: 600; }

/* The document editor's dialog. The Hub's own `.modal` is a 440px confirmation
   box with centred text -- right for "are you sure", wrong for a name field, a
   fourteen-row textarea and twelve chips. Same `.overlay` backdrop, its own body. */
.signet-modal-overlay { padding: 24px; }
.signet-modal {
  background: var(--card);
  border-radius: 16px;
  width: min(860px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(10,22,40,0.35);
  animation: fadeSlideUp .22s cubic-bezier(.34,1.56,.64,1) both;
  overflow: hidden;
}
.signet-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.signet-modal-title { font-size: 15px; font-weight: 700; color: var(--text-1); }
.signet-modal-x {
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  padding: 0 4px;
  transition: color .15s ease;
}
.signet-modal-x:hover { color: var(--text-1); }
/* The body scrolls, the footer does not -- Save must stay reachable however long
   the document in the textarea gets. */
.signet-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.signet-modal-foot {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

/* Document and Period, side by side. A grid rather than a flex row so hiding the
   Period box leaves Document at its own column width instead of stretching it
   across the whole panel. */
.signet-runhead {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
@media (max-width: 620px) { .signet-runhead { grid-template-columns: 1fr; } }

/* The saved-people panel. Sits inline under the grid rather than in a modal:
   it is a picker, not a decision, and a sheet that dims the page for it is more
   ceremony than the job deserves. */
.signet-roster {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #f8fafc;
  padding: 14px 16px;
}
.signet-roster-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
.signet-roster-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.signet-roster-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  background: #eef2f8;
  border-radius: 99px;
  padding: 1px 8px;
}
.signet-roster-q { flex: 1 1 220px; max-width: 340px; margin-left: auto; }
.signet-roster-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
}
.signet-roster-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  cursor: pointer;
}
.signet-roster-row:last-child { border-bottom: 0; }
.signet-roster-row:hover { background: #f4f9fe; }
.signet-roster-row.is-in { opacity: .55; cursor: default; }
.signet-roster-row.is-in:hover { background: transparent; }
.signet-roster-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 0;
}
.signet-roster-who .signet-muted { font-size: 12px; }
/* Both content columns are `flex: 1 1 0`, so they split the row evenly. The
   manager used to be `margin-left: auto`, which parked it against the right
   edge with a lake of white between it and the name it belongs to. */
.signet-roster-mgr {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 0;
  font-size: 12px;
}
.signet-roster-mgr .signet-muted { font-size: 12.5px; color: var(--text-2); }
.signet-roster-mgrlabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.signet-roster-tag {
  font-size: 11px;
  color: var(--text-3);
  background: #eef2f8;
  border-radius: 99px;
  padding: 2px 9px;
  white-space: nowrap;
}
.signet-roster-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
/* Two boxes per row, so "Manager email" sits under "Manager" instead of being
   thrown onto a full-width line of its own by a 3+1 wrap. */
.signet-addgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 12px;
}
@media (max-width: 620px) { .signet-addgrid { grid-template-columns: 1fr; } }

/* The one way a person who isn't saved yet gets into a run, so it carries more
   weight than the plain secondary buttons beside it. */
.signet-addnew {
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  color: var(--blue);
  border-radius: 9px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.signet-addnew:hover {
  background: rgba(59,158,218,0.20);
  border-color: var(--blue);
  transform: translateY(-1px);
}

.signet-back {
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.signet-back:hover {
  color: var(--accent, #3b9eda);
  border-color: var(--accent, #3b9eda);
  background: #f4f9fe;
}

.signet-linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--blue); text-decoration: underline;
}
.signet-linkbtn:hover { color: var(--accent); }
.signet-linkbtn.is-quiet { color: var(--text-3); }
.signet-linkbtn.is-quiet:hover { color: var(--text-2); }

/* ── SIGNET — the people in a run, as fields ──────────────────────────────── */

/* A placeholder had no colour of its own, so it inherited the input's and read
   like real data already typed in. */
.signet-input::placeholder,
.signet-fieldinput::placeholder {
  color: var(--text-3, #94a3b8);
  opacity: 1;                       /* Firefox dims placeholders by default */
}

.signet-people { display: flex; flex-direction: column; gap: 10px; }

.signet-person {
  border: 1px solid var(--border, #e2e8f0);
  border-left: 3px solid var(--accent, #3b9eda);
  border-radius: 10px;
  background: var(--card, #fff);
  padding: 12px 14px 14px;
}
.signet-person.is-bad { border-left-color: #d97706; }

.signet-person-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
}
.signet-person-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent-soft, rgba(59,158,218,0.12));
  color: var(--blue, #1e5799);
  font-size: 11.5px; font-weight: 700;
}
.signet-person-who {
  font-weight: 600; font-size: 14px; color: var(--text-1, #1e293b);
}
.signet-person-flag {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #92400e; background: rgba(217,119,6,.12);
  padding: 2px 8px; border-radius: 100px;
}

.signet-person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 12px;
}

.signet-field { display: flex; flex-direction: column; gap: 4px; }
.signet-fieldlabel {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-2, #64748b);
}
.signet-fieldinput { width: 100%; }
.signet-field.is-bad .signet-fieldinput {
  border-color: #d97706;
  background: rgba(217,119,6,.04);
}
.signet-fielderr { font-size: 11.5px; color: #92400e; }

.signet-empty {
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 18px 16px;
  text-align: center;
}

/* Paste is the fast path but no longer the only one, so it folds away. */

/* Board run picker */
.signet-chase {
  font-size: 12px; font-weight: 600;
  color: #92400e; background: rgba(217,119,6,.12);
  padding: 3px 9px; border-radius: 100px; white-space: nowrap;
}
.signet-clear {
  font-size: 12px; font-weight: 600;
  color: #166534; background: rgba(22,101,52,.10);
  padding: 3px 9px; border-radius: 100px; white-space: nowrap;
}

/* The run picker on the Board tab is four columns, not the detail board's eight,
   so it does not need the 900px floor that keeps that one readable — and with it
   the Open button fell off the end at laptop width. */
.signet-scroll .signet-table.signet-runlist { min-width: 0; }

/* The Templates list, for the same reason. Its Remove button sits in the last
   column, and .run-panel clips overflow, so a table wider than its panel hid
   Remove with no scrollbar to reach it (2026-09-16). The list of fields a
   document asks for is a comma-separated phrase, not a single value, so it may
   wrap -- one long list must not push every row's buttons off the edge. The
   Used cell keeps its own inline nowrap. */
.signet-scroll .signet-table.signet-tpllist { min-width: 0; }
.signet-table.signet-tpllist th,
.signet-table.signet-tpllist td.signet-muted { white-space: normal; }

/* ── Signet: one document's signing history ──────────────────────────────────
   The drill-down behind History on a board row (signet_timeline.js). This is
   where the step-by-step trail lives now that the certificate page is one page
   and prints no event list.

   Left-rule steps rather than a table: the rows are three lines of unequal
   length, and a table of them reads as a spreadsheet of a thing that is
   actually a story. Same rule-and-indent the certificate used, so anyone who
   saw the old PDF recognises the shape. */
.signet-timeline-doc {
  padding: 0 0 12px 0;
  border-bottom: 1px solid var(--border);
}
.signet-timeline-doc-title {
  font-size: 15px; font-weight: 700; color: var(--text-1); margin-bottom: 3px;
}

.signet-timeline { list-style: none; margin: 14px 0 0 0; padding: 0; }
.signet-timeline-step {
  margin: 0 0 13px 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--accent);
}
/* Declined, refused, failed. Coloured so an investigation finds the wrong turn
   by scanning rather than by reading every row. */
.signet-timeline-step.is-bad { border-left-color: #dc2626; }
.signet-timeline-step.is-bad .signet-timeline-what { color: #991b1b; }

.signet-timeline-what { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.signet-timeline-when { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.signet-timeline-utc  { color: var(--text-3); }
.signet-timeline-who  { font-size: 12px; color: var(--text-3); margin-top: 1px;
                        word-break: break-word; }
.signet-timeline-detail {
  font-size: 11.5px; color: var(--text-3); margin-top: 3px;
  font-family: ui-monospace, monospace; word-break: break-word;
}
.signet-timeline-bad { color: #991b1b; font-size: 13.5px; line-height: 1.6; }

/* ── Signet: who signs a template — internal or external ─────────────────────
   Two radio cards in the document editor. Not a dropdown: there are exactly
   two, they have genuinely different consequences for how a signature is
   proved, and a dropdown hides the one you did not pick. */
.signet-audience { display: flex; flex-direction: column; gap: 9px; }
.signet-audience-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  background: var(--card);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.signet-audience-card:hover { border-color: var(--accent); }
.signet-audience-card.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 1px 10px rgba(59,158,218,0.12);
}
.signet-audience-card input { margin-top: 3px; flex: none; }
.signet-audience-title {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--text-1);
}
.signet-audience-detail {
  display: block; font-size: 12px; color: var(--text-2);
  line-height: 1.5; margin-top: 2px;
}

/* Only EXTERNAL is tagged on the templates list. Internal is the default and
   the common case, so tagging both would put a badge on every row and the one
   that matters would stop standing out. Amber rather than blue: it is not an
   error, it IS the row where identity is not verified. */
.signet-tag-external {
  color: #92400e;
  background: rgba(245,158,11,0.16);
  font-weight: 600;
}