/* ==========================================================================
   MTT Manager - Native Material for MkDocs Light Theme
   ========================================================================== */

:root {
  --mtt-blue: #0d6efd;
  --mtt-blue-hover: #0b5ed7;
  --mtt-text: #1e293b;
  --mtt-border: #e9ecef;
  --mtt-radius: 12px;
}

/* --------------------------------------------------------------------------
   1. Header Navbar & Navigation Tabs
   -------------------------------------------------------------------------- */
.md-header {
  background-color: #ffffff !important;
  color: var(--mtt-text) !important;
  border-bottom: 1px solid var(--mtt-border);
  box-shadow: none !important;
}

.md-header__title,
.md-header__button,
.md-nav__link {
  color: var(--mtt-text) !important;
}

.md-tabs {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--mtt-border);
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--mtt-blue) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   2. Sidebar Navigation & Active States
   -------------------------------------------------------------------------- */
.md-nav__link:hover {
  color: var(--mtt-blue) !important;
}

/* Active Page Indicator (Soft Blue Pill + Left Accent Line) */
.md-nav__item--active > .md-nav__link--active {
  color: var(--mtt-blue) !important;
  font-weight: 600 !important;
  background-color: rgba(13, 110, 253, 0.08) !important;
  border-left: 3px solid var(--mtt-blue) !important;
  border-radius: 0 6px 6px 0 !important;
  padding-left: 10px !important;
  transition: all 0.2s ease-in-out;
}

/* --------------------------------------------------------------------------
   3. Native Grid Cards (Matches MTT App Cards)
   -------------------------------------------------------------------------- */
.grid.cards > ul > li {
  background: #ffffff !important;
  border: 1px solid var(--mtt-border) !important;
  border-radius: var(--mtt-radius) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  padding: 1.25rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.grid.cards > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
  border-color: #cbd5e1 !important;
}

/* --------------------------------------------------------------------------
   4. Buttons, Callouts & Code Block Aesthetics
   -------------------------------------------------------------------------- */
/* Primary Blue Action Buttons */
.md-typeset .md-button--primary {
  background-color: var(--mtt-blue) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 600;
  border: none !important;
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.25);
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.md-typeset .md-button--primary:hover {
  background-color: var(--mtt-blue-hover) !important;
}

/* Admonitions (Tip / Warning / Note Boxes) */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--mtt-radius) !important;
  border-width: 1px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

/* Code Blocks & Tables */
.md-typeset pre > code {
  border-radius: 8px !important;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--mtt-border) !important;
  border-radius: 8px !important;
  overflow: hidden;
}