/* ============================================================
   nexpand.css — the shared Nexpand brand layer
   Portable across the suite (CRM / Mail / Watch). Layer it over
   Bootstrap 5.3 (CRM) or use standalone (Mail, Watch, landing).
   Spec: BRAND.md in the repo root.
   ============================================================ */

:root {
  /* Brand palette */
  --nx-ink: #0F1B33;
  --nx-ink-soft: #1C2C4F;      /* hover surface on ink */
  --nx-primary: #4F46E5;
  --nx-primary-hover: #4338CA;
  --nx-primary-soft: #E0E7FF;
  --nx-primary-softer: #EEF2FF;
  --nx-emerald: #10B981;
  --nx-emerald-deep: #059669;
  --nx-emerald-soft: #D1FAE5;
  --nx-amber: #F59E0B;
  --nx-amber-deep: #B45309;
  --nx-amber-soft: #FEF3C7;
  --nx-rose: #E11D48;
  --nx-rose-deep: #BE123C;
  --nx-rose-soft: #FFE4E6;

  /* Neutrals */
  --nx-bg: #F6F7FB;
  --nx-card: #FFFFFF;
  --nx-border: #E3E7F0;
  --nx-border-strong: #CBD3E1;
  --nx-text: #0F1B33;
  --nx-muted: #64748B;
  --nx-faint: #94A3B8;

  /* Shape & type */
  --nx-radius: 10px;
  --nx-radius-lg: 14px;
  --nx-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nx-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --nx-shadow: 0 1px 2px rgba(15, 27, 51, .05);
  --nx-shadow-lg: 0 8px 24px rgba(15, 27, 51, .10);

  /* Shell */
  --nx-sidebar-w: 214px;
  --nx-topbar-h: 56px;
}

/* ---------- base ---------- */
body {
  font-family: var(--nx-font);
  background: var(--nx-bg);
  color: var(--nx-text);
  font-feature-settings: "cv05";
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--nx-text);
}
a { color: var(--nx-primary); }
a:hover { color: var(--nx-primary-hover); }
code { font-family: var(--nx-mono); color: var(--nx-muted); }
.text-muted { color: var(--nx-muted) !important; }
.nx-num { font-variant-numeric: tabular-nums; }

/* ---------- Bootstrap re-theme ---------- */
.btn { border-radius: 8px; font-weight: 500; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--nx-primary-soft); }

.btn-primary {
  --bs-btn-bg: var(--nx-primary);
  --bs-btn-border-color: var(--nx-primary);
  --bs-btn-hover-bg: var(--nx-primary-hover);
  --bs-btn-hover-border-color: var(--nx-primary-hover);
  --bs-btn-active-bg: var(--nx-primary-hover);
  --bs-btn-active-border-color: var(--nx-primary-hover);
  --bs-btn-disabled-bg: #A5B4FC;
  --bs-btn-disabled-border-color: #A5B4FC;
}
.btn-outline-primary {
  --bs-btn-color: var(--nx-primary);
  --bs-btn-border-color: var(--nx-border-strong);
  --bs-btn-hover-bg: var(--nx-primary-softer);
  --bs-btn-hover-color: var(--nx-primary-hover);
  --bs-btn-hover-border-color: var(--nx-primary);
  --bs-btn-active-bg: var(--nx-primary-soft);
  --bs-btn-active-color: var(--nx-primary-hover);
  --bs-btn-active-border-color: var(--nx-primary);
  --bs-btn-disabled-color: var(--nx-faint);
  --bs-btn-disabled-border-color: var(--nx-border);
}
.btn-outline-secondary {
  --bs-btn-color: var(--nx-muted);
  --bs-btn-border-color: var(--nx-border-strong);
  --bs-btn-hover-bg: var(--nx-bg);
  --bs-btn-hover-color: var(--nx-text);
  --bs-btn-hover-border-color: var(--nx-border-strong);
  --bs-btn-active-bg: var(--nx-border);
  --bs-btn-active-color: var(--nx-text);
  --bs-btn-active-border-color: var(--nx-border-strong);
}
.btn-outline-success {
  --bs-btn-color: var(--nx-emerald-deep);
  --bs-btn-border-color: var(--nx-border-strong);
  --bs-btn-hover-bg: var(--nx-emerald-soft);
  --bs-btn-hover-color: var(--nx-emerald-deep);
  --bs-btn-hover-border-color: var(--nx-emerald);
  --bs-btn-active-bg: var(--nx-emerald-soft);
  --bs-btn-active-color: var(--nx-emerald-deep);
  --bs-btn-active-border-color: var(--nx-emerald);
}
.btn-outline-danger {
  --bs-btn-color: var(--nx-rose);
  --bs-btn-border-color: var(--nx-border-strong);
  --bs-btn-hover-bg: var(--nx-rose-soft);
  --bs-btn-hover-color: var(--nx-rose-deep);
  --bs-btn-hover-border-color: var(--nx-rose);
  --bs-btn-active-bg: var(--nx-rose-soft);
  --bs-btn-active-color: var(--nx-rose-deep);
  --bs-btn-active-border-color: var(--nx-rose);
}
.btn-danger {
  --bs-btn-bg: var(--nx-rose);
  --bs-btn-border-color: var(--nx-rose);
  --bs-btn-hover-bg: var(--nx-rose-deep);
  --bs-btn-hover-border-color: var(--nx-rose-deep);
  --bs-btn-active-bg: var(--nx-rose-deep);
  --bs-btn-active-border-color: var(--nx-rose-deep);
}
.btn-success {
  --bs-btn-bg: var(--nx-emerald-deep);
  --bs-btn-border-color: var(--nx-emerald-deep);
  --bs-btn-hover-bg: #047857;
  --bs-btn-hover-border-color: #047857;
}
.btn-link { color: var(--nx-primary); }

.card {
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--nx-border);
  font-weight: 600;
  font-size: .92rem;
  padding-top: .7rem;
  padding-bottom: .7rem;
}

.table { --bs-table-hover-bg: var(--nx-primary-softer); }
.table thead th, .table-light th {
  background: #F1F3F9 !important;
  color: var(--nx-muted);
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--nx-border) !important;
  white-space: nowrap;
}
.table td { border-color: #EDF0F6; }
.nx-sticky-head thead th { position: sticky; top: var(--nx-topbar-h); z-index: 5; }

.form-control, .form-select {
  border-color: var(--nx-border-strong);
  border-radius: 8px;
  color: var(--nx-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--nx-primary);
  box-shadow: 0 0 0 3px var(--nx-primary-soft);
}
.form-control::placeholder { color: var(--nx-faint); }

.pagination {
  --bs-pagination-color: var(--nx-muted);
  --bs-pagination-active-bg: var(--nx-primary);
  --bs-pagination-active-border-color: var(--nx-primary);
  --bs-pagination-hover-color: var(--nx-primary);
  --bs-pagination-focus-color: var(--nx-primary);
  --bs-pagination-border-color: var(--nx-border);
}

.alert { border-radius: var(--nx-radius); border-width: 1px; }
.alert-info { background: var(--nx-primary-softer); border-color: var(--nx-primary-soft); color: #3730A3; }
.alert-success { background: var(--nx-emerald-soft); border-color: #A7F3D0; color: #065F46; }
.alert-warning { background: var(--nx-amber-soft); border-color: #FDE68A; color: var(--nx-amber-deep); }
.alert-danger { background: var(--nx-rose-soft); border-color: #FECDD3; color: var(--nx-rose-deep); }

.badge { font-weight: 500; }
.badge.text-bg-success { background: var(--nx-emerald-deep) !important; color: #fff !important; }
.badge.text-bg-danger { background: var(--nx-rose) !important; color: #fff !important; }
.badge.text-bg-warning { background: var(--nx-amber-soft) !important; color: var(--nx-amber-deep) !important; }
.badge.text-bg-info { background: var(--nx-primary-soft) !important; color: #3730A3 !important; }
.badge.text-bg-light { background: #EEF0F4 !important; color: var(--nx-muted) !important; }
.badge.text-bg-secondary { background: #64748B !important; color: #fff !important; }

.dropdown-menu { border-color: var(--nx-border); border-radius: var(--nx-radius); box-shadow: var(--nx-shadow-lg); }

/* ---------- app shell ---------- */
.nx-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--nx-sidebar-w);
  background: var(--nx-ink);
  color: #C7CEDD;
  display: flex;
  flex-direction: column;
  padding: 14px 10px 12px;
  overflow-y: auto;
  z-index: 1040;
  transition: transform .2s ease;
}
.nx-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 14px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.02em;
}
.nx-brand img { width: 24px; height: 24px; }
.nx-brand .nx-product { color: #818CF8; font-weight: 600; }
.nx-brand:hover { color: #fff; }

.nx-navlabel {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #5B6B8C;
  padding: 12px 10px 4px;
}
.nx-navlink {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #C7CEDD;
  text-decoration: none;
  font-size: .875rem;
  margin-bottom: 1px;
}
.nx-navlink i { font-size: 1rem; line-height: 1; opacity: .85; }
.nx-navlink:hover { background: var(--nx-ink-soft); color: #fff; }
.nx-navlink.active { background: var(--nx-primary); color: #fff; }
.nx-navlink.active i { opacity: 1; }
.nx-navlink .badge { margin-left: auto; }

.nx-sidebar-foot {
  margin-top: auto;
  padding: 12px 10px 0;
  border-top: 1px solid #24365C;
  font-size: .78rem;
  color: var(--nx-faint);
}
.nx-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.nx-dot.on { background: #34D399; }
.nx-dot.off { background: #64748B; }
.nx-dot.warn { background: var(--nx-amber); }

.nx-main { min-height: 100vh; }
body.nx-app .nx-main { margin-left: var(--nx-sidebar-w); }

.nx-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--nx-topbar-h);
  background: var(--nx-card);
  border-bottom: 1px solid var(--nx-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
}
.nx-topbar .nx-title { font-size: 1rem; font-weight: 600; margin: 0; }
.nx-userchip {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--nx-primary-soft);
  color: #3730A3;
  font-size: .74rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.nx-userchip:hover { background: #C7D2FE; color: #312E81; }

.nx-jobchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: #3730A3;
  background: var(--nx-primary-softer);
  border: 1px solid var(--nx-primary-soft);
  border-radius: 99px;
  padding: 3px 12px;
  text-decoration: none;
  max-width: 340px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-jobchip:hover { background: var(--nx-primary-soft); color: #312E81; }

.nx-pausedbar {
  background: var(--nx-amber-soft);
  color: var(--nx-amber-deep);
  border-bottom: 1px solid #FDE68A;
  padding: 6px 20px;
  font-size: .84rem;
}

.nx-content { padding: 22px 24px 48px; }

.nx-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 51, .5);
  z-index: 1039;
}

@media (max-width: 991.98px) {
  body.nx-app .nx-main { margin-left: 0; }
  .nx-sidebar { transform: translateX(-100%); }
  body.nx-sidebar-open .nx-sidebar { transform: none; }
  body.nx-sidebar-open .nx-backdrop { display: block; }
  .nx-content { padding: 16px 14px 40px; }
}

/* ---------- shared components ---------- */
.nx-stat {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow);
  padding: .8rem 1rem;
  height: 100%;
}
.nx-stat .label { font-size: .74rem; color: var(--nx-muted); }
.nx-stat .value { font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.nx-stat .value .sub { font-size: .8rem; color: var(--nx-faint); font-weight: 500; }
a.nx-statlink { text-decoration: none; color: inherit; display: block; height: 100%; }
a.nx-statlink .nx-stat:hover { border-color: var(--nx-primary); box-shadow: 0 2px 10px rgba(79, 70, 229, .12); }

.nx-progress { height: 5px; border-radius: 3px; background: #EEF0F4; overflow: hidden; }
.nx-progress > div { height: 100%; border-radius: 3px; background: var(--nx-primary); }
.nx-progress > .fill-emerald { background: var(--nx-emerald); }
.nx-progress > .fill-amber { background: var(--nx-amber); }

.nx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  background: var(--nx-primary-softer);
  color: #3730A3;
  border: 1px solid var(--nx-primary-soft);
  border-radius: 99px;
  padding: 2px 10px;
}
.nx-chip a { color: inherit; text-decoration: none; font-weight: 600; }

.nx-avatar {
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--nx-primary-soft);
  color: #3730A3;
  font-size: .68rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nx-empty {
  text-align: center;
  color: var(--nx-muted);
  padding: 2.4rem 1rem;
}
.nx-empty i { font-size: 1.9rem; color: var(--nx-faint); display: block; margin-bottom: .5rem; }

.nx-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nx-toast {
  background: var(--nx-ink);
  color: #fff;
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow-lg);
  padding: .6rem .9rem;
  font-size: .86rem;
  max-width: 360px;
  animation: nx-toast-in .18s ease-out;
}
.nx-toast.success { background: var(--nx-emerald-deep); }
.nx-toast.danger { background: var(--nx-rose-deep); }
@keyframes nx-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.nx-help { font-size: .82rem; color: var(--nx-muted); max-width: 760px; }
summary.nx-helptoggle {
  cursor: pointer;
  color: var(--nx-faint);
  font-size: .8rem;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
summary.nx-helptoggle::-webkit-details-marker { display: none; }
summary.nx-helptoggle:hover { color: var(--nx-primary); }