/* ============================================================
   EQUINOX THEME OVERRIDE
   Load this AFTER wwwroot/lib/bootstrap/dist/css/bootstrap.min.css
   in _Layout.cshtml, e.g.:

   <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
   <link rel="stylesheet" href="~/css/theme.css" />
   <link rel="stylesheet" href="~/css/site.css" />   <!-- keep AFTER theme.css if it has page-specific rules -->

   Design direction: warm orange accent (#F29F67) against a near-black
   anchor (#1E1E2C), cool supporting colors reserved for status/data only.
   Structural restraint modeled on dense B2B dashboards: flat cards,
   hairline borders, muted headers, color used as signal not decoration.
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --eq-accent: #F29F67;
  --eq-accent-hover: #EC8A47;
  --eq-accent-soft: #FDF0E6;   /* tint background for accent badges/active states */
  --eq-ink: #1E1E2C;           /* near-black, used for headings/high-emphasis text */

  /* ---- Supporting / status colors (charts, badges — NOT chrome) ---- */
  --eq-blue: #3B8FF3;
  --eq-teal: #34B1AA;
  --eq-gold: #E0B50F;
  --eq-red: #E5484D;

  /* ---- Neutrals ---- */
  --eq-text: #2A2A35;
  --eq-text-muted: #6B6B76;
  --eq-text-faint: #9797A1;
  --eq-border: #E6E6EA;
  --eq-border-strong: #D6D6DC;
  --eq-bg-page: #FAFAFB;
  --eq-bg-sidebar: #FAFAFB;
  --eq-bg-card: #FFFFFF;
  --eq-bg-subtle: #F2F2F5;

  /* ---- Overwrite Bootstrap's own variables where the app reads them directly ---- */
  --bs-primary: var(--eq-accent);
  --bs-primary-rgb: 242, 159, 103;
  --bs-body-color: var(--eq-text);
  --bs-body-bg: var(--eq-bg-page);
  --bs-border-color: var(--eq-border);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-link-color: var(--eq-ink);
  --bs-link-hover-color: var(--eq-accent);
}

/* Several Bootstrap components bake their "active" state as a literal hex
   AND re-declare it as an own custom property directly on the component
   class itself (e.g. .nav-pills{--bs-nav-pills-link-active-bg:#0d6efd}),
   not just at :root. An element's own declaration always wins over an
   inherited :root value regardless of specificity, so overriding these at
   :root (as originally tried) silently does nothing — they have to be
   re-declared on the same component selectors Bootstrap itself uses.
   Caught via the Identity area's scaffolded "Manage account" sub-nav,
   which still showed stock blue after the :root-only attempt. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--eq-accent);
  --bs-nav-pills-link-active-color: #FFFFFF;
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--eq-accent);
  --bs-dropdown-link-active-color: #FFFFFF;
}
.pagination {
  --bs-pagination-active-bg: var(--eq-accent);
  --bs-pagination-active-border-color: var(--eq-accent);
  --bs-pagination-active-color: #FFFFFF;
}
.list-group {
  --bs-list-group-active-bg: var(--eq-accent);
  --bs-list-group-active-border-color: var(--eq-accent);
  --bs-list-group-active-color: #FFFFFF;
}

/* ============================================================
   TYPOGRAPHY
   Fixes the oversized/inconsistent headings and the stray
   "Welcome" heading rendering in a different font.
   ============================================================ */

body {
  font-family: var(--bs-font-sans-serif);
  color: var(--eq-text);
  background-color: var(--eq-bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-font-sans-serif) !important; /* kills any leftover serif/default override */
  color: var(--eq-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Page-title scale: previously default Bootstrap h1 (~2.5rem, bold) read as oversized.
   Dial back to a confident-but-restrained size, matching dense dashboard conventions. */
h1, .h1 { font-size: 1.5rem;  font-weight: 600; margin-bottom: 0.25rem; }
h2, .h2 { font-size: 1.25rem; font-weight: 600; }
h3, .h3 { font-size: 1.1rem;  font-weight: 600; }

/* Page subtitle pattern (e.g. "Change your account settings", "Azure AD tenants...") */
.page-subtitle,
h1 + p:first-of-type {
  color: var(--eq-text-muted);
  font-size: 0.9rem;
  font-weight: 400;
}

a {
  color: var(--eq-ink);
  text-decoration: none;
}
a:hover {
  color: var(--eq-accent);
}

small, .text-muted {
  color: var(--eq-text-faint) !important;
}

/* ============================================================
   LAYOUT SHELL — topbar / sidebar
   ============================================================ */

.navbar,
.top-bar {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--eq-border);
}

.sidebar,
.nav-sidebar {
  background-color: var(--eq-bg-sidebar);
  border-right: 1px solid var(--eq-border);
}

/* Nav links — default state */
.sidebar .nav-link,
.nav-sidebar .nav-link {
  color: var(--eq-text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: var(--bs-border-radius-sm);
  padding: 0.55rem 0.75rem;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.sidebar .nav-link:hover,
.nav-sidebar .nav-link:hover {
  background-color: var(--eq-bg-subtle);
  color: var(--eq-ink);
}

/* Active nav state — replaces the solid saturated-blue block.
   Subtle tinted background + accent-colored text/icon, matching
   Port.io's restrained "highlighted, not blocked" active state. */
.sidebar .nav-link.active,
.nav-sidebar .nav-link.active {
  background-color: var(--eq-accent-soft);
  color: var(--eq-accent-hover);
  font-weight: 600;
}
.sidebar .nav-link.active svg,
.sidebar .nav-link.active .bi,
.nav-sidebar .nav-link.active svg,
.nav-sidebar .nav-link.active .bi {
  color: var(--eq-accent-hover);
}

/* ============================================================
   CARDS
   Flat, hairline border, no colored borders/backgrounds on
   icon containers (fixes the blue-bordered "Tenants" card).
   ============================================================ */

.card {
  background-color: var(--eq-bg-card);
  border: 1px solid var(--eq-border);
  border-radius: var(--bs-border-radius);
  box-shadow: none;
}

.card:hover {
  border-color: var(--eq-border-strong);
}

.card-body {
  padding: 1.25rem;
}

.card-icon,
.card .icon-badge {
  background-color: var(--eq-bg-subtle) !important;
  color: var(--eq-ink) !important;
  border-radius: var(--bs-border-radius-sm);
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   TABLES
   Replaces heavy black borders / bold header rule with
   hairline borders and de-emphasized header row.
   ============================================================ */

.table {
  --bs-table-bg: transparent;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--eq-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--eq-border);
  border-top: none;
  padding: 0.65rem 1rem;
  background-color: transparent;
  vertical-align: middle;
}

.table tbody td {
  font-size: 0.9rem;
  color: var(--eq-text);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--eq-border);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background-color: var(--eq-bg-subtle);
}

/* Monospace treatment for IDs — keep this, it already read well */
.table .font-monospace,
.table code {
  font-size: 0.82rem;
  color: var(--eq-text-muted);
  background: none;
}

/* ============================================================
   BUTTONS
   Flatter, less saturated, no default Bootstrap shadow.
   ============================================================ */

.btn {
  border-radius: var(--bs-border-radius-sm);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  box-shadow: none !important;
}

.btn-primary {
  background-color: var(--eq-accent);
  border-color: var(--eq-accent);
  color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--eq-accent-hover);
  border-color: var(--eq-accent-hover);
}

.btn-danger {
  background-color: var(--eq-red);
  border-color: var(--eq-red);
}

.btn-outline-secondary,
.btn-secondary {
  background-color: #FFFFFF;
  border-color: var(--eq-border-strong);
  color: var(--eq-text);
}
.btn-outline-secondary:hover,
.btn-secondary:hover {
  background-color: var(--eq-bg-subtle);
  border-color: var(--eq-border-strong);
  color: var(--eq-ink);
}

/* ============================================================
   BADGES / PILLS
   Extends the one pattern in the app that already worked
   (the gray "ClipPush" pill) into a full semantic system.
   ============================================================ */

.badge {
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

.badge-neutral {
  background-color: var(--eq-bg-subtle);
  color: var(--eq-text-muted);
}
.badge-accent {
  background-color: var(--eq-accent-soft);
  color: var(--eq-accent-hover);
}
.badge-blue {
  background-color: #E8F1FE;
  color: #2B6FCB;
}
.badge-teal {
  background-color: #E6F6F5;
  color: #22857F;
}
.badge-gold {
  background-color: #FBF3D6;
  color: #A9860B;
}
.badge-red {
  background-color: #FCEAEA;
  color: #C93E42;
}

/* ============================================================
   FORM CONTROLS
   Fixes inconsistent field borders/backgrounds (e.g. the
   Username field rendering gray/disabled next to white fields).
   ============================================================ */

.form-control,
.form-select {
  border: 1px solid var(--eq-border-strong);
  border-radius: var(--bs-border-radius-sm);
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  color: var(--eq-text);
  background-color: #FFFFFF;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--eq-bg-subtle);
  color: var(--eq-text-muted);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--eq-accent);
  box-shadow: 0 0 0 3px var(--eq-accent-soft);
}

.form-label,
.form-floating > label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--eq-text-muted);
}

/* ============================================================
   FOOTER
   ============================================================ */

footer,
.footer {
  border-top: 1px solid var(--eq-border);
  color: var(--eq-text-faint);
  font-size: 0.8rem;
  background-color: var(--eq-bg-page);
}

footer a,
.footer a {
  color: var(--eq-text-muted);
}
footer a:hover,
.footer a:hover {
  color: var(--eq-accent-hover);
}