/* =====================================================
  Air India Group Virtual — Dark-only clean theme
  - Custom dark mode colors and Air India Red header/nav.
  - Uses brand Red #ED1C24 for header + nav.
  ===================================================== */

/* Override Material theme CSS variables and define brand tokens */
:root {
  /* Brand tokens */
  --brand: #ed1c24; /* Air India Red (Replacing IndiGo Blue) */
  --brand-accent: #d4af37; /* Air India Gold (Replacing Light Blue) */

  /* Dark Theme Overrides */
  --md-default-bg-color: #0d1018; /* Dark Background */
  --md-default-fg-color: #f0f3f8; /* Light Foreground Text */
  --md-default-fg-color--light: #b0b4be;
  --md-default-fg-color--lighter: #9aa6c0;
  --md-code-bg-color: #141922; /* Code Block Background */

  /* User's Font Customization */
  --md-text-font: "Standard", sans-serif;
  --md-code-font: "monospace", monospace;

  /* Set structural elements to brand color */
  --md-header-bg-color: var(--brand);
  --md-accent-fg-color: var(--brand-accent);
}

/* --------------------
  Header Customization: Set background to Brand Red
  -------------------- */
.md-header {
  background-color: var(--brand);
  color: #fff;
}
.md-header__title {
  color: #fff !important;
}
.md-header__button,
.md-header__button svg,
.md-header__button * {
  color: #fff !important;
  fill: #fff !important;
}

/* --------------------
  Tabs (Navigation Bar) Customization: Set background to Brand Red
  -------------------- */
.md-tabs {
  background-color: var(--brand);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.md-tabs__link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
}
.md-tabs__link:hover {
  /* Minimal effect: remove background box, only brighten text to white */
  background: transparent !important;
  color: #fff !important;
}
.md-tabs__link--active {
  /* Text color set to #fff for maximum brightness, matching hover state */
  color: #fff !important;
  box-shadow: inset 0 -3px 0 #fff; /* White underline for contrast on brand background */
}

/* --------------------
  Logo Customization (from original file)
  -------------------- */
.md-header__button.md-logo img {
  height: 3.2em; /* 0.1em bigger than the title font size */
  width: auto; /* maintain aspect ratio */
  vertical-align: middle;
}

/* --------------------
  Tables Customization (from original file)
  -------------------- */

/* Borders between every row/column */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  border: 1px solid var(--md-default-fg-color--lighter);
  padding: 6px 12px;
}

/* Header row that works in light and dark */
.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color); /* theme-aware */
  font-weight: 700;
}

/* Optional: subtle row hover (theme-aware) */
.md-typeset table:not([class]) tbody tr:hover {
  background: color-mix(
    in srgb,
    var(--md-default-bg-color) 10%,
    var(--md-default-fg-color) 90%
  );
}

/* Optional: sticky header for long tables */
.md-typeset table:not([class]) thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Active sidebar link — same red as nav/header */
.md-nav__link--active,
.md-nav__link--active:hover {
  color: var(--brand) !important;
}

/* ============================================
   Content Text Links (Markdown content only)
   - No effect on nav, tabs, table headers, etc.
   ============================================ */

/* .md-typeset a:not(.md-button):not(.md-nav__link) {
  color: var(--brand) !important;
  transition: color 0.15s ease-in-out;
} */

/* Slightly darker red on hover */
/* .md-typeset a:not(.md-button):not(.md-nav__link):hover {
  color: color-mix(in srgb, var(--brand) 85%, black 15%) !important;
  text-decoration: underline;
} */

/* -----------------------------
  Table hover & contrast fixes
  - Subtle, readable hover colors for light + dark
  - Ensure table cell text remains clear
  - Place at end of stylesheet (higher specificity / override)
  ----------------------------- */

/* Base: ensure table text is always readable (light/dark aware) */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  color: var(
    --md-default-fg-color,
    #222
  ) !important; /* will pick theme fg if set */
  transition: background-color 160ms ease, color 160ms ease;
}

/* Light mode: gentle dark tint on hover */
@media (prefers-color-scheme: light) {
  .md-typeset table:not([class]) tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04) !important; /* very subtle */
  }
  /* defensive: any special highlighted/selected rows */
  .md-typeset table:not([class]) tbody tr.is-selected,
  .md-typeset table:not([class]) tbody tr.highlight,
  .md-typeset table:not([class]) tbody tr.active {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--md-default-fg-color, #222) !important;
  }
}

/* Dark mode: gentle light tint on hover */
@media (prefers-color-scheme: dark) {
  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    color: var(--md-default-fg-color, #f0f3f8) !important;
  }

  .md-typeset table:not([class]) tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important; /* subtle lift */
  }

  .md-typeset table:not([class]) tbody tr.is-selected,
  .md-typeset table:not([class]) tbody tr.highlight,
  .md-typeset table:not([class]) tbody tr.active {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--md-default-fg-color, #f0f3f8) !important;
  }
}

/* Keep header row strong and readable in both modes */
.md-typeset table:not([class]) thead th {
  color: var(--md-default-fg-color, inherit) !important;
}

/* Tighten hover on small screens and reduce flashing */
@media (max-width: 900px) {
  .md-typeset table:not([class]) tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
  }
}

/* Ensure cells with muted/disabled styling (if any) remain legible */
.md-typeset table:not([class]) td[aria-disabled="true"],
.md-typeset table:not([class]) td.muted,
.md-typeset table:not([class]) tr.muted td {
  opacity: 0.88 !important;
  color: inherit !important;
}