/* NexConnect Brand — Customer Portal
 *
 * Light-themed adaptation of the dashboard design language for Perfex's
 * client-facing area (invoice/{id}/{hash}, login, profile, etc.).
 * Depends on tokens defined in brand-shared.css.
 */

.navbar a.navbar-brand img { height: 60px !important; }

body {
  background: var(--nxc-mist-50) !important;
  color: var(--nxc-ink-900);
  font-family: 'Inter', -apple-system, sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* ===== Top navbar — clean white with hairline ===== */
.navbar-default {
  background: #fff !important;
  border: none !important;
  border-bottom: 1px solid var(--nxc-hairline) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  min-height: 72px;
}
.navbar-default .navbar-nav > li > a {
  color: var(--nxc-ink-400) !important;
  font-weight: 500;
  font-size: 14px;
  padding: 24px 16px !important;
  transition: color .12s ease;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a {
  color: var(--nxc-mint-900) !important;
  background: transparent !important;
}

/* ===== CTAs (Pay invoice, Accept estimate) ===== */
.btn-primary, .btn-info, .btn-success, a.btn-info {
  background: var(--nxc-mint-600) !important;
  border-color: var(--nxc-mint-600) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  letter-spacing: 0.01em;
  font-size: 14px;
  transition: background .12s ease, transform .05s ease;
}
.btn-primary:hover, .btn-info:hover, .btn-success:hover {
  background: var(--nxc-mint-900) !important;
  border-color: var(--nxc-mint-900) !important;
}

/* ===== Invoice / estimate cards ===== */
.invoice-html,
.estimate-html,
.proposal-html {
  background: #fff;
  border: 1px solid var(--nxc-hairline);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  padding: 32px;
}

/* ===== Status badges — chip style ===== */
.label,
.label-success,
.invoice-status-paid {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  padding: 4px 10px !important;
  border-radius: 5px !important;
  border: 1px solid transparent;
}
.label-success,
.invoice-status-paid {
  background: rgba(102, 255, 153, 0.14) !important;
  color: var(--nxc-mint-900) !important;
  border-color: var(--nxc-accent-border) !important;
}

/* ===== Login form ===== */
.login-form input,
.login-form .form-control {
  border: 1px solid var(--nxc-hairline-strong) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.login-form input:focus,
.login-form .form-control:focus {
  border-color: var(--nxc-mint-400) !important;
  box-shadow: 0 0 0 3px rgba(102, 255, 153, 0.18) !important;
  outline: 0;
}

/* ===== Footer ===== */
.footer {
  background: #fff;
  border-top: 1px solid var(--nxc-hairline);
  color: var(--nxc-mist-400);
  font-size: 13px;
  padding: 24px 0;
}

/* ===== Tables in portal ===== */
.table thead > tr > th {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--nxc-mist-400) !important;
  background: var(--nxc-mist-50) !important;
  border-bottom: 1px solid var(--nxc-hairline) !important;
  padding: 12px 14px !important;
  font-weight: 500;
}
.table tbody > tr > td {
  padding: 14px !important;
  font-size: 13.5px;
  border-bottom: 1px solid var(--nxc-hairline);
  font-feature-settings: "tnum" 1;
}