/* =============================================================
   NEXSYS — Core Override Foundation
   File: overrides.core.css
   Load: EVERY page (via structure.pdt, after application.min.css)
   Rules: Global tokens, global shell, global components.
          Page-specific overrides live in their own files.
   Version: 2.0
============================================================= */

/* ─────────────────────────────────────────────────────────────
   TOKEN SYSTEM  (Single source of truth — never redefine :root
   in any page-specific override file)
───────────────────────────────────────────────────────────── */
:root {
  /* Brand accent — NEXSYS teal-blue */
  --nx-accent:        #3994A8;
  --nx-accent-2:      #2a7a92;       /* hover / gradient bottom */
  --nx-accent-3:      #1d6478;       /* deep / text on light */
  --nx-accent-soft:   rgba(57,148,168,.10);
  --nx-accent-border: rgba(57,148,168,.25);
  --nx-ring:          rgba(57,148,168,.22);

  /* Surfaces */
  --nx-bg:            #eef7fb;
  --nx-surface:       #ffffff;
  --nx-surface-2:     #f7fbff;

  /* Text */
  --nx-text:          #0f172a;
  --nx-muted:         rgba(15,23,42,.62);

  /* Borders */
  --nx-border:        rgba(15,23,42,.08);
  --nx-border-2:      rgba(15,23,42,.05);

  /* Radii */
  --nx-radius:        16px;
  --nx-radius-sm:     10px;
  --nx-radius-btn:    999px;

  /* Shadows — all values defined here, used anywhere */
  --nx-shadow:        0 8px 24px rgba(15,23,42,.08);
  --nx-shadow-soft:   0 4px 16px rgba(15,23,42,.05);
  --nx-shadow-sm:     0 4px 16px rgba(15,23,42,.06);
  --nx-shadow-hover:  0 16px 36px rgba(15,23,42,.12);
}

/* ─────────────────────────────────────────────────────────────
   BASE
───────────────────────────────────────────────────────────── */
html, body {
  background: var(--nx-bg) !important;
  color: var(--nx-text);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container widths — NOTE: container-fluid intentionally excluded */
.container,
.container-md {
  max-width: 1180px;
}

.container-md {
  padding-top: 18px !important;
  padding-bottom: 34px !important;
}

/* ─────────────────────────────────────────────────────────────
   NAVBAR PROTECTION
   Prevent global card/panel rules touching navbar children.
───────────────────────────────────────────────────────────── */
nav.navbar .card,
nav.navbar .panel,
nav.navbar .well,
nav.navbar .box,
nav.navbar .section,
nav.navbar .widget {
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────────
   CARDS / PANELS
───────────────────────────────────────────────────────────── */
.card, .panel, .well, .widget, .content_section, .box, .section, .list-group {
  border-radius: var(--nx-radius) !important;
  border: 1px solid var(--nx-border) !important;
  background: var(--nx-surface) !important;
  box-shadow: var(--nx-shadow-soft) !important;
}

.card-header, .panel-heading {
  background: linear-gradient(180deg, var(--nx-surface-2), var(--nx-surface)) !important;
  border-bottom: 1px solid var(--nx-border-2) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--nx-text) !important;
  padding: 14px 16px !important;
}

.card-body, .panel-body {
  padding: 14px 16px !important;
}

/* ─────────────────────────────────────────────────────────────
   BUTTONS
   Pill shape only on primary actions; small/inline stay rounded
───────────────────────────────────────────────────────────── */
.btn, button, input[type="submit"], input[type="button"] {
  font-weight: 700 !important;
  letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Primary pill buttons */
.btn-primary,
.btn-success,
.btn.btn-primary,
.btn.btn-success {
  border-radius: var(--nx-radius-btn) !important;
  background: linear-gradient(180deg, var(--nx-accent), var(--nx-accent-2)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(57,148,168,.20) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn.btn-primary:hover,
.btn.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(57,148,168,.26) !important;
  color: #fff !important;
}

/* Ghost / secondary buttons */
.btn-default, .btn-secondary, .btn-light,
.btn.btn-default, .btn.btn-secondary, .btn.btn-light {
  border-radius: var(--nx-radius-btn) !important;
  background: #fff !important;
  border: 1px solid var(--nx-accent-border) !important;
  color: rgba(15,23,42,.88) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.05) !important;
}

.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
  transform: translateY(-1px);
  border-color: rgba(57,148,168,.40) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}

/* Small / inline buttons stay rounded, not pill */
.btn-sm, .btn-xs, .btn-sm.btn-default {
  border-radius: var(--nx-radius-sm) !important;
  font-weight: 700 !important;
}

/* Focus ring */
.btn:focus, button:focus, input:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--nx-ring) !important;
}

/* ─────────────────────────────────────────────────────────────
   FORM INPUTS
───────────────────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea {
  border-radius: 12px !important;
  border: 1px solid var(--nx-border) !important;
  background: var(--nx-surface) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.04) !important;
  color: var(--nx-text) !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(57,148,168,.45) !important;
  box-shadow: 0 0 0 4px var(--nx-ring), 0 4px 14px rgba(15,23,42,.06) !important;
}

/* ─────────────────────────────────────────────────────────────
   TABLES
───────────────────────────────────────────────────────────── */
.table, table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.table thead th, table thead th {
  background: rgba(15,23,42,.03) !important;
  border-bottom: 1px solid var(--nx-border) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--nx-muted) !important;
  padding: 10px 12px !important;
}

.table td, table td {
  border-top: 1px solid var(--nx-border-2) !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

.table tbody tr:hover, table tbody tr:hover {
  background: var(--nx-accent-soft) !important;
}

/* ─────────────────────────────────────────────────────────────
   ALERTS
───────────────────────────────────────────────────────────── */
.alert {
  border-radius: 12px !important;
  border: 1px solid var(--nx-border) !important;
  box-shadow: none !important;
}

.alert-info {
  background: rgba(57,148,168,.08) !important;
  border-color: rgba(57,148,168,.20) !important;
}

.alert-success {
  background: rgba(16,185,129,.08) !important;
  border-color: rgba(16,185,129,.20) !important;
}

.alert-warning {
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.20) !important;
}

.alert-danger {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.20) !important;
}

/* ─────────────────────────────────────────────────────────────
   BADGES / STATUS PILLS
───────────────────────────────────────────────────────────── */
.badge, .label {
  border-radius: 999px !important;
  padding: 4px 9px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .04em;
}

/* Semantic status colors */
.badge-success, .label-success { background: rgba(16,185,129,.14) !important; color: #065f46 !important; }
.badge-warning, .label-warning { background: rgba(245,158,11,.14) !important; color: #78350f !important; }
.badge-danger,  .label-danger  { background: rgba(239,68,68,.14)  !important; color: #7f1d1d !important; }
.badge-info,    .label-info    { background: rgba(57,148,168,.14)  !important; color: var(--nx-accent-3) !important; }
.badge-default, .label-default { background: rgba(15,23,42,.07)   !important; color: var(--nx-muted) !important; }

/* ─────────────────────────────────────────────────────────────
   DROPDOWN MENUS
───────────────────────────────────────────────────────────── */
.dropdown-menu {
  border-radius: 12px !important;
  border: 1px solid var(--nx-border) !important;
  box-shadow: var(--nx-shadow) !important;
  padding: 6px !important;
}

.dropdown-item, .dropdown-menu > li > a {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: var(--nx-text) !important;
  font-weight: 600;
  transition: background .1s ease;
}

.dropdown-item:hover, .dropdown-menu > li > a:hover {
  background: var(--nx-accent-soft) !important;
  color: var(--nx-text) !important;
}

/* ─────────────────────────────────────────────────────────────
   LINKS
───────────────────────────────────────────────────────────── */
a {
  color: var(--nx-accent-2);
  text-decoration: none;
}

a:hover {
  color: var(--nx-accent);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   MODALS
───────────────────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--nx-radius) !important;
  border: 1px solid var(--nx-border) !important;
  box-shadow: var(--nx-shadow) !important;
}

.modal-header {
  border-bottom: 1px solid var(--nx-border-2) !important;
  padding: 16px 20px !important;
}

.modal-footer {
  border-top: 1px solid var(--nx-border-2) !important;
}

/* ─────────────────────────────────────────────────────────────
   NAV TABS
───────────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--nx-border-2) !important;
  gap: 4px;
}

.nav-tabs > li > a {
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  padding: 7px 13px !important;
  font-weight: 700 !important;
  color: var(--nx-muted) !important;
}

.nav-tabs > li > a:hover {
  background: var(--nx-accent-soft) !important;
  border-color: var(--nx-accent-border) !important;
  color: var(--nx-text) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  background: rgba(57,148,168,.12) !important;
  border-color: var(--nx-accent-border) !important;
  color: var(--nx-text) !important;
}

/* ─────────────────────────────────────────────────────────────
   SPACING HELPERS
───────────────────────────────────────────────────────────── */
.right_content .card,
.right_content .panel,
.right_content .content_section,
.right_content .box {
  margin-bottom: 16px !important;
}

/* Remove stray page-header blocks that Blesta renders above real content */
.right_content .page-header,
.right_content .page_header,
.right_content .page-title,
.right_content .page_title,
.right_content .header,
.right_content .content-header,
.container-md > .page-header,
.container-md > .page_header {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE
───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .container-md {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   NAV LOGIN BUTTON ("My Account" for guests)
───────────────────────────────────────────────────────────── */
/* Nav login button — override the generic .nav-link padding that collapses it */
.navbar-nav .nav-item .nx-nav-login-btn,
.navbar-nav .nx-nav-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 24px !important;   /* horizontal padding creates the pill width */
  margin: auto 0 !important;
  border-radius: 8px !important;
  border: none !important;
  background: #1F8DBB !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .01em;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(31,141,187,.35);
}

.navbar-nav .nav-item .nx-nav-login-btn:hover,
.navbar-nav .nx-nav-login-btn:hover {
  background: #16739A !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(31,141,187,.45);
  text-decoration: none !important;
}