/* SkyeMSG operator admin console — minimal supplemental styling (Bootstrap does
   the heavy lifting). Sibling of the customer portal.css. */

/* Skyetel brand palette (matches skyetel.com / official docs):
   primary #0066CC · dark #003366 · accent #00A3E0 · gray #4A4A4A */
.admin-auth-bg {
  background: linear-gradient(135deg, #003366 0%, #0066CC 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  max-width: 420px;
  width: 100%;
}

.login-header {
  background: linear-gradient(135deg, #0066CC 0%, #003366 100%);
  color: #fff;
  padding: 2rem;
  border-radius: 16px 16px 0 0;
  text-align: center;
}

.login-body {
  padding: 2rem;
}

.admin-brand {
  font-weight: 700;
  letter-spacing: 1px;
}
.brand-logo {
  height: 24px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
}

.card h2,
.card h3,
.card h4 {
  margin-bottom: 0;
}

.stat-card {
  border-left: 4px solid #0066CC;
}

.status-pass { color: #28A745; }
.status-warn { color: #FD7E14; }
.status-fail { color: #DC3545; }

.badge-active { background-color: #28A745; }
.badge-suspended { background-color: #FD7E14; }
.badge-disabled { background-color: #6c757d; }
.badge-testing { background-color: #00A3E0; color: #fff; }

/* Skyetel-blue primary buttons + links (align Bootstrap defaults to brand) */
.btn-primary {
  background-color: #0066CC;
  border-color: #0066CC;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #0055aa;
  border-color: #0055aa;
}
.card a:not(.btn), .container-fluid a.text-decoration-none { color: #0066CC; }

.table td, .table th { vertical-align: middle; }

/* Wide data tables scroll horizontally INSIDE their card instead of pushing the
   page (Bootstrap tables aren't responsive unless wrapped; this makes every
   table card behave like .table-responsive). */
.card-body { overflow-x: auto; }
.card-body > .table { margin-bottom: 0; }

.toast-region {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
  max-width: 380px;
}

/* ── Left sidebar navigation ──────────────────────────────────────────────
   Restyle the Bootstrap top navbar into a PERSISTENT LEFT SIDEBAR (matching
   the legacy console layout) and offset page content to its right. Applied at
   >= 768px; narrow screens keep the default top bar (Bootstrap collapse). */
@media (min-width: 768px) {
  .navbar.bg-dark {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 220px;
    align-items: stretch;
    overflow-y: auto;
    z-index: 1030;
    padding: 0;
    background: #003366 !important; /* Skyetel dark blue */
  }
  .navbar.bg-dark > .container-fluid {
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: 0;
    flex-wrap: nowrap;
  }
  .navbar.bg-dark .admin-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 18px 18px 14px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  .navbar.bg-dark .brand-logo {
    width: 150px;
    height: auto;
    margin-right: 0;
  }
  .navbar.bg-dark .navbar-nav {
    flex-direction: column !important;
    width: 100%;
    margin: 0 !important;
  }
  .navbar.bg-dark .navbar-nav.me-auto {
    margin-right: 0 !important;
    padding: 6px 0;
  }
  .navbar.bg-dark .nav-link {
    padding: 9px 18px;
    border-left: 3px solid transparent;
  }
  .navbar.bg-dark .nav-link.active {
    background: rgba(255, 255, 255, 0.10);
    border-left-color: #00A3E0; /* Skyetel accent cyan */
    color: #fff;
  }
  .navbar.bg-dark .nav-link:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  /* logout / env group pinned to the bottom of the sidebar */
  .navbar.bg-dark .navbar-nav:last-child {
    margin-top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 0;
  }
  /* Push page content clear of the fixed sidebar. max-width caps the container so
     the 240px offset shrinks it instead of overflowing the viewport to the right
     (a full-width .container-fluid + margin-left would run off the page). */
  body > .container-fluid {
    margin-left: 240px;
    max-width: calc(100% - 240px);
  }
}