/* ══════════════════════════════════════════════
   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); }