/* ===========================================================================
 * JNIX theme for IXP Manager
 *
 * Loaded AFTER ixp-pack.css from resources/skins/jinix/layouts/ixpv4.foil.php.
 * Purely additive: it restyles, it never changes markup or behaviour, so
 * removing the <link> reverts cleanly to the stock skin.
 *
 * Palette sampled from the JNIX logo artwork:
 *   navy   #062E5A   blue #2265A8   steel #2A4D74   flame #FC661A
 * =========================================================================== */

:root {
  --jinix-navy-deep: #041d3a;
  --jinix-navy: #062e5a;
  --jinix-steel: #2a4d74;
  --jinix-blue: #2265a8;
  --jinix-blue-bright: #2f7fcf;
  --jinix-flame: #fc661a;
  --jinix-flame-soft: #ff8a4d;
  --jinix-ink: #16202e;
  --jinix-muted: #5b6b7f;
  --jinix-line: #e3e9f0;
  --jinix-surface: #f6f8fb;

  /* Bootstrap 5 tokens - restyles buttons, links, focus rings in one go. */
  --bs-primary: var(--jinix-blue);
  --bs-primary-rgb: 34, 101, 168;
  --bs-link-color: var(--jinix-blue);
  --bs-link-hover-color: var(--jinix-flame);
  --bs-body-color: var(--jinix-ink);
  --bs-border-color: var(--jinix-line);
}

/* Brand backdrop on every page. The scrim here is deliberately heavy: on the
   login screen the photograph is the hero, but behind member lists and the
   looking glass it must read as a faint texture, never as competition for the
   data. Content surfaces below stay fully opaque so tables keep their contrast. */
body {
  background-color: var(--jinix-surface);
  background-image:
    linear-gradient(rgba(246, 248, 251, 0.9), rgba(246, 248, 251, 0.94)),
    url("../images/bg-jinix.webp");
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--jinix-ink);
}

@media (max-width: 900px) {
  body {
    background-image:
      linear-gradient(rgba(246, 248, 251, 0.92), rgba(246, 248, 251, 0.95)),
      url("../images/bg-jinix-sm.webp");
    background-attachment: scroll; /* fixed is janky on mobile */
  }
}

/* Keep the reading surfaces solid - the backdrop shows through gutters only. */
.card,
.table,
#sidebar,
.sidebar,
nav.d-md-block,
.modal-content,
.dropdown-menu {
  background-color: #fff;
}

/* --- Top navigation ------------------------------------------------------ */
.navbar-dark,
.navbar.bg-dark,
header .navbar {
  background: linear-gradient(100deg, var(--jinix-navy-deep) 0%, var(--jinix-navy) 55%, var(--jinix-steel) 100%) !important;
  border-bottom: 3px solid var(--jinix-flame);
  box-shadow: 0 2px 10px rgba(4, 29, 58, 0.18);
}

header .navbar .nav-link,
header .navbar .navbar-brand {
  color: rgba(255, 255, 255, 0.86) !important;
  font-weight: 500;
}

header .navbar .nav-link:hover,
header .navbar .nav-link:focus {
  color: #fff !important;
}

/* Keep the active top-level item obvious without shouting. */
header .navbar .nav-item.active > .nav-link,
header .navbar .nav-link.active {
  color: #fff !important;
  box-shadow: inset 0 -3px 0 var(--jinix-flame);
}

/* --- Left sidebar -------------------------------------------------------- */
#sidebar,
.sidebar,
nav.col-md-2,
nav.d-md-block {
  background: #fff;
  border-right: 1px solid var(--jinix-line);
}

#sidebar h6,
.sidebar h6 {
  color: var(--jinix-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 1.1rem;
}

#sidebar .nav-link,
.sidebar .nav-link {
  color: var(--jinix-ink);
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

#sidebar .nav-link:hover,
.sidebar .nav-link:hover {
  background: rgba(34, 101, 168, 0.07);
  border-left-color: var(--jinix-blue);
  color: var(--jinix-navy);
}

#sidebar .nav-link.active,
.sidebar .nav-link.active,
#sidebar li.active > .nav-link,
.sidebar li.active > .nav-link {
  background: rgba(252, 102, 26, 0.09);
  border-left-color: var(--jinix-flame);
  color: var(--jinix-navy);
  font-weight: 600;
}

/* --- Page headings ------------------------------------------------------- */
main h1,
main h2,
main h3 {
  color: var(--jinix-navy);
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* --- Cards / panels ------------------------------------------------------ */
.card {
  border: 1px solid var(--jinix-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(4, 29, 58, 0.04);
}

.card-header {
  background: #fff;
  border-bottom: 1px solid var(--jinix-line);
  font-weight: 600;
  color: var(--jinix-navy);
}

/* --- Tables -------------------------------------------------------------- */
/* Shared typography for header cells, regardless of light/dark variant. */
.table > thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Keeping headers on one line is a desktop nicety only - see the small-screen
   block at the end of this file, where it actively makes tables overflow. */
@media (min-width: 992px) {
  .table > thead th {
    white-space: nowrap;
  }
}

/* Light headers (the default) get a faint navy wash. */
.table > thead:not(.table-dark):not(.thead-dark) th {
  background: rgba(6, 46, 90, 0.045);
  color: var(--jinix-navy);
  border-bottom: 2px solid var(--jinix-line) !important;
}

/* IXP Manager mixes Bootstrap 4 (.thead-dark) and Bootstrap 5 (.table-dark)
   markup, so both must be covered. Re-colour to brand navy and KEEP the text
   white - tinting it navy would put dark-on-dark and make headers unreadable. */
.table > thead.table-dark th,
.table > thead.thead-dark th,
thead.table-dark th,
thead.thead-dark th,
.table-dark > tr > th {
  background: var(--jinix-navy) !important;
  color: #fff !important;
  border-bottom: 3px solid var(--jinix-flame) !important;
}

.table > tbody > tr:hover > * {
  background-color: rgba(34, 101, 168, 0.05);
}

/* Monospace for the things operators actually compare: IPs, ASNs, prefixes. */
.table code,
td code,
code {
  color: var(--jinix-steel);
  background: rgba(6, 46, 90, 0.05);
  padding: 0.08em 0.36em;
  border-radius: 3px;
  font-size: 0.875em;
}

/* --- Buttons ------------------------------------------------------------- */
.btn-primary {
  background-color: var(--jinix-blue);
  border-color: var(--jinix-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--jinix-navy);
  border-color: var(--jinix-navy);
}

.btn-outline-primary {
  color: var(--jinix-blue);
  border-color: var(--jinix-blue);
}

.btn-outline-primary:hover {
  background-color: var(--jinix-blue);
  border-color: var(--jinix-blue);
}

.btn:focus,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(34, 101, 168, 0.22);
  border-color: var(--jinix-blue-bright);
}

/* --- Tabs ---------------------------------------------------------------- */
.nav-tabs .nav-link {
  color: var(--jinix-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  font-weight: 500;
}

.nav-tabs .nav-link:hover {
  color: var(--jinix-navy);
  border-bottom-color: var(--jinix-line);
}

.nav-tabs .nav-link.active {
  color: var(--jinix-navy);
  background: transparent;
  border-bottom: 2px solid var(--jinix-flame);
  font-weight: 650;
}

/* --- Alerts -------------------------------------------------------------- */
.alert {
  border: 1px solid var(--jinix-line);
  border-left-width: 4px;
  border-radius: 6px;
}

.alert-info {
  background: rgba(34, 101, 168, 0.07);
  border-left-color: var(--jinix-blue);
  color: var(--jinix-navy);
}

.alert-warning {
  border-left-color: var(--jinix-flame);
}

/* --- Footer -------------------------------------------------------------- */
footer,
.footer,
body > footer {
  background:
    linear-gradient(180deg, var(--jinix-navy) 0%, var(--jinix-navy-deep) 100%) !important;
  color: rgba(255, 255, 255, 0.72);
  border-top: 3px solid var(--jinix-flame);
}

footer a,
.footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

footer a:hover,
.footer a:hover {
  color: var(--jinix-flame-soft);
  text-decoration: underline;
}

.jinix-footer-logo {
  max-height: 34px;
}

.jinix-footer-tag {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.jinix-footer-head {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.jinix-footer-meta {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* Inline code in the footer sits on navy, so the light-surface treatment used
   elsewhere would be invisible here. */
.jinix-footer-meta code,
footer code {
  background: rgba(255, 255, 255, 0.1);
  color: var(--jinix-flame-soft);
}

.jinix-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  line-height: 1.9;
}

.jinix-footer-cta {
  background: var(--jinix-flame);
  border-color: var(--jinix-flame);
  color: #fff !important;
  font-weight: 600;
}

.jinix-footer-cta:hover {
  background: var(--jinix-flame-soft);
  border-color: var(--jinix-flame-soft);
  color: #071d33 !important;
  text-decoration: none;
}

.jinix-footer-rule {
  border-color: rgba(255, 255, 255, 0.14);
  margin: 1.4rem 0 0.9rem;
  opacity: 1;
}

.jinix-footer-legal {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  gap: 0.5rem;
}

/* --- Login page ---------------------------------------------------------- */
/* There is no login-specific body class, so key off the sign-in button. :has()
   avoids copying yet another template into the skin. Unsupported browsers just
   get the plain surface colour - nothing breaks. */
body:has(#login-btn) {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.62), rgba(246, 248, 251, 0.74)),
    url("../images/bg-jinix.webp");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Serve the lighter asset where the large one buys nothing. */
@media (max-width: 900px) {
  body:has(#login-btn) {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.66), rgba(246, 248, 251, 0.78)),
      url("../images/bg-jinix-sm.webp");
    background-attachment: scroll; /* fixed is janky on mobile */
  }
}

/* Lift the sign-in card off the photograph so the fields stay legible. */
body:has(#login-btn) .card,
body:has(#login-btn) form {
  backdrop-filter: blur(2px);
}

body:has(#login-btn) .card {
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 30px rgba(4, 29, 58, 0.16);
}

/* --- Looking glass / peering state --------------------------------------- */
/* Session state is the single most scanned thing on this portal - make
   established vs down readable at a glance without relying on colour alone. */
.badge.bg-success,
.badge.badge-success {
  background-color: #17794d !important;
}

.badge.bg-danger,
.badge.badge-danger {
  background-color: #c02a2a !important;
}

.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Respect users who ask for reduced motion; we add no animation, but any
   inherited transitions should not fight that preference. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* --- Navbar brand sizing -------------------------------------------------- */
/* The wordmark is wide and short; at the stock 34px cap it read as an
   afterthought next to the menu text. Give it real presence and let the bar
   grow to match rather than clipping. */
header .navbar {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

header .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

header .navbar-brand {
  font-size: 18px;
}

.jinix-brand-logo {
  max-height: 48px;
  margin-right: 1rem;
  width: auto;
}

@media (max-width: 991.98px) {
  .jinix-brand-logo {
    max-height: 36px;
    margin-right: 0.5rem;
  }
}

/* --- Small screens -------------------------------------------------------- */
/* Operator tables (routes, prefixes, member lists) are genuinely wider than a
   phone. Stock IXP Manager lets them stretch the document, so the whole page
   scrolls sideways and the chrome breaks. Confine the scroll to the table's own
   container instead: the page stays put, the data pans. */
@media (max-width: 991.98px) {
  .dataTables_wrapper,
  .dataTables_scrollBody,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Grid children default to min-width:auto, which refuses to shrink below the
     content and defeats the scroll container above. */
  .dataTables_wrapper > .row > [class*="col-"],
  .card-body,
  main .container-fluid {
    min-width: 0;
  }

  /* Belt and braces: never let the document itself pan sideways. */
  html,
  body {
    overflow-x: hidden;
  }

  /* Give the panned table a visible edge so it is obvious it scrolls. */
  .dataTables_wrapper .table {
    margin-bottom: 0;
  }
}