/* ==========================================================================
   idlhost — FOSSBilling client theme override layer
   --------------------------------------------------------------------------
   Loads AFTER vendor.css and huraga.css and re-points Bootstrap's own custom
   properties at the tokens from idlhost.com (idl-tokens.css). Overriding the
   --bs-* variables rather than chasing selectors means most components fall
   into line on their own, and the palette stays defined in exactly one place:
   change tokens.css on the website and billing follows.

   Nothing here edits huraga itself. This theme is a copy; huraga stays
   pristine so the site can be reverted by switching themes in admin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Map IDL tokens onto Bootstrap
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary: var(--idl-blue);
  --bs-primary-rgb: 0, 84, 166;
  --bs-primary-text-emphasis: var(--idl-blue-dark);
  --bs-primary-bg-subtle: var(--idl-blue-light);
  --bs-primary-border-subtle: #c3d7ec;

  --bs-link-color: var(--idl-blue);
  --bs-link-color-rgb: 0, 84, 166;
  --bs-link-hover-color: var(--idl-blue-dark);
  --bs-link-hover-color-rgb: 0, 65, 127;

  --bs-body-color: var(--idl-body);
  --bs-body-color-rgb: 90, 100, 114;
  --bs-body-bg: var(--idl-bg);
  --bs-emphasis-color: var(--idl-ink);
  --bs-secondary-color: var(--idl-muted);
  --bs-tertiary-bg: var(--idl-bg-alt);

  --bs-border-color: var(--idl-line);
  --bs-border-color-translucent: var(--idl-line-soft);

  --bs-success: var(--idl-green);
  --bs-success-rgb: 13, 177, 75;
  --bs-warning: var(--idl-orange);
  --bs-warning-rgb: 247, 148, 29;

  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: 1.6;

  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
}

/* --------------------------------------------------------------------------
   2. Typography — Work Sans for headings, Roboto for body, as on the site
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--idl-body);
  background: var(--idl-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand {
  font-family: var(--font-head);
  color: var(--idl-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: var(--fs-h1, 2rem); }
h2, .h2 { font-size: var(--fs-h2, 2rem); }
h3, .h3 { font-size: var(--fs-h3, 1.5rem); }

a { text-underline-offset: 0.15em; }

/* --------------------------------------------------------------------------
   3. Topbar — the thin navy strip that runs above the nav on idlhost.com
   -------------------------------------------------------------------------- */
.idl-topbar {
  background: var(--idl-navy);
  color: #cfe0f0;
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.idl-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  padding: 0.5rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.idl-topbar__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.idl-topbar a {
  color: #cfe0f0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.idl-topbar a:hover { color: #fff; text-decoration: underline; }
.idl-topbar__note { color: #9bb6d0; }

@media (max-width: 575.98px) {
  .idl-topbar__note { display: none; }
}

/* --------------------------------------------------------------------------
   4. Header / navigation
   -------------------------------------------------------------------------- */
header .navbar {
  background: var(--idl-bg);
  border-bottom: 1px solid var(--idl-line);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

header .navbar .nav-link {
  color: var(--idl-ink);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--fs-sm);
}

header .navbar .nav-link:hover,
header .navbar .nav-link.active {
  color: var(--idl-blue);
}

/* --------------------------------------------------------------------------
   5. Buttons — square-ish, confident, matching the site's CTAs
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-head);
  font-weight: 500;
  border-radius: 8px;
  padding: 0.55rem 1.15rem;
}

.btn-primary {
  --bs-btn-bg: var(--idl-blue);
  --bs-btn-border-color: var(--idl-blue);
  --bs-btn-hover-bg: var(--idl-blue-dark);
  --bs-btn-hover-border-color: var(--idl-blue-dark);
  --bs-btn-active-bg: var(--idl-blue-dark);
  --bs-btn-active-border-color: var(--idl-blue-dark);
  --bs-btn-disabled-bg: var(--idl-blue);
  --bs-btn-disabled-border-color: var(--idl-blue);
}

/* The site uses orange for the primary purchase action. Reserve it for the
   same job here so "buy" reads identically on both sides. */
.btn-order,
.btn-buy,
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--idl-orange);
  --bs-btn-border-color: var(--idl-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--idl-orange-dark);
  --bs-btn-hover-border-color: var(--idl-orange-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--idl-blue);
  --bs-btn-border-color: var(--idl-blue);
  --bs-btn-hover-bg: var(--idl-blue);
  --bs-btn-hover-border-color: var(--idl-blue);
}

/* --------------------------------------------------------------------------
   6. Surfaces — cards, tables, alerts
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--idl-line);
  border-radius: 12px;
  box-shadow: none;
}

.card-header {
  background: var(--idl-bg-alt);
  border-bottom: 1px solid var(--idl-line);
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--idl-ink);
}

.table > :not(caption) > * > * { border-color: var(--idl-line); }
.table > thead {
  font-family: var(--font-head);
  color: var(--idl-ink);
}

.alert-info {
  background: var(--idl-blue-light);
  border-color: #c3d7ec;
  color: var(--idl-blue-dark);
}

.badge.bg-primary { background: var(--idl-blue) !important; }

/* --------------------------------------------------------------------------
   7. Footer — navy block, matching the site
   -------------------------------------------------------------------------- */
#footer.idl-footer {
  background: var(--idl-navy);
  color: #9bb6d0;
  margin: 3rem 0 0;
  padding: 2rem 1rem 1.5rem;
  border-top: 0;
}

.idl-footer a { color: #cfe0f0; text-decoration: none; }
.idl-footer a:hover { color: #fff; text-decoration: underline; }

.idl-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

.idl-footer__legal { font-size: var(--fs-xs); color: #7f9bb8; }

/* --------------------------------------------------------------------------
   7b. Public pages (login, signup, password reset)
   layout_public ships with no header or footer, so these pages get the
   topbar plus a small footer of their own.
   -------------------------------------------------------------------------- */
.idl-public-footer {
  text-align: center;
  padding: 2rem 1rem 2.5rem;
  font-size: var(--fs-xs);
  color: var(--idl-muted);
}

.idl-public-footer a { color: var(--idl-blue); text-decoration: none; }
.idl-public-footer a:hover { text-decoration: underline; }

[data-bs-theme="dark"] .idl-public-footer { color: #7f9bb8; }
[data-bs-theme="dark"] .idl-public-footer a { color: #7fb2e5; }

/* --------------------------------------------------------------------------
   8. Dark mode — huraga ships a toggle. Keep it usable rather than fighting
   it: soften the surfaces toward the brand navy instead of pure black.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --bs-body-bg: #0b1c2e;
  --bs-body-color: #c3d2e0;
  --bs-emphasis-color: #ffffff;
  --bs-border-color: #1d3550;
  --bs-link-color: #7fb2e5;
  --bs-link-hover-color: #a8ccef;
  --bs-primary: #2e82d6;
  --bs-tertiary-bg: #10253b;
}

[data-bs-theme="dark"] header .navbar {
  background: #0b1c2e;
  border-bottom-color: #1d3550;
}

[data-bs-theme="dark"] .card {
  background: #10253b;
  border-color: #1d3550;
}

[data-bs-theme="dark"] .card-header {
  background: #14293f;
  border-bottom-color: #1d3550;
  color: #ffffff;
}