/* TVS Motor Company LATAM — Brand Colors */
:root {
  --md-primary-fg-color: #0C3688;
  --md-primary-fg-color--light: #1a4aad;
  --md-primary-fg-color--dark: #082569;
  --md-accent-fg-color: #EE2D3D;
  --md-accent-fg-color--transparent: rgba(238, 45, 61, 0.1);
}

/* Dark mode overrides */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1a4aad;
  --md-accent-fg-color: #EE2D3D;
}

/* Navigation tabs */
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--md-accent-fg-color) !important;
}

/* Admonition custom — TVS red for danger */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: #EE2D3D;
}
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: rgba(238, 45, 61, 0.1);
}

/* Code blocks */
.md-typeset pre > code {
  font-size: 0.85em;
}

/* Table header */
.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: white;
}

/* Status badges */
.badge-active {
  background-color: #2e7d32;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: 600;
}

.badge-inactive {
  background-color: #c62828;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: 600;
}

.badge-pending {
  background-color: #f57f17;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: 600;
}

/* Custom logo — replace Material icon with TVS LATAM brand logo */
.md-header__button.md-logo svg {
  display: none;
}
.md-header__button.md-logo::after {
  content: '';
  display: block;
  width: 120px;
  height: 40px;
  background-image: url('https://45449540.fs1.hubspotusercontent-na1.net/hubfs/45449540/LOGO_W_Transparente.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* Home page hero */
.hero-banner {
  background: linear-gradient(135deg, #0C3688 0%, #1a4aad 100%);
  color: white;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  border-left: 6px solid #EE2D3D;
}

.hero-banner h1 {
  color: white !important;
  margin-top: 0;
}

.hero-banner p {
  opacity: 0.9;
  font-size: 1.1em;
}