/* ==============================================================================
   Custom CSS for Trading Notes Documentation
   ==============================================================================
   This file contains custom styles that extend the Material theme.
   ============================================================================== */

/* ------------------------------------------------------------------------------
   Root Variables
   ------------------------------------------------------------------------------ */
:root {
  /* Custom colors */
  --md-primary-fg-color: #673ab7;  /* Deep purple */
  --md-primary-fg-color--light: #9575cd;
  --md-primary-fg-color--dark: #512da8;
  --md-accent-fg-color: #ffc107;   /* Amber */
  
  /* Custom fonts - can be overridden */
  --md-text-font: "Inter", sans-serif;
  --md-code-font: "JetBrains Mono", monospace;
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1a1a2e;
  --md-default-fg-color: #e0e0e0;
}

/* ------------------------------------------------------------------------------
   Typography Enhancements
   ------------------------------------------------------------------------------ */

/* Better heading styles */
.md-typeset h1 {
  font-weight: 700;
  color: var(--md-primary-fg-color);
}

.md-typeset h2 {
  border-bottom: 1px solid var(--md-default-fg-color--lighter);
  padding-bottom: 0.5em;
}

/* ------------------------------------------------------------------------------
   Navigation Enhancements
   ------------------------------------------------------------------------------ */

/* Smoother navigation transitions */
.md-nav__link {
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* Active navigation item highlight */
.md-nav__item--active > .md-nav__link {
  font-weight: 600;
}

/* ------------------------------------------------------------------------------
   Content Cards (for grid layouts)
   ------------------------------------------------------------------------------ */

/* Card hover effects */
.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.md-typeset .grid.cards > ul > li {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ------------------------------------------------------------------------------
   Admonition Customizations
   ------------------------------------------------------------------------------ */

/* Custom admonition for trading signals */
.md-typeset .admonition.signal,
.md-typeset details.signal {
  border-color: #00bcd4;
}

.md-typeset .signal > .admonition-title,
.md-typeset .signal > summary {
  background-color: rgba(0, 188, 212, 0.1);
}

.md-typeset .signal > .admonition-title::before,
.md-typeset .signal > summary::before {
  background-color: #00bcd4;
  -webkit-mask-image: var(--md-admonition-icon--tip);
  mask-image: var(--md-admonition-icon--tip);
}

/* ------------------------------------------------------------------------------
   Code Block Enhancements
   ------------------------------------------------------------------------------ */

/* Better code block styling */
.md-typeset pre > code {
  border-radius: 6px;
}

/* Line numbers styling */
.md-typeset .highlight .linenos {
  opacity: 0.5;
  user-select: none;
}

/* ------------------------------------------------------------------------------
   Table Enhancements
   ------------------------------------------------------------------------------ */

/* Zebra striping for tables */
.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background-color: var(--md-default-fg-color--lightest);
}

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

/* ------------------------------------------------------------------------------
   Custom Components
   ------------------------------------------------------------------------------ */

/* Trade setup card */
.trade-setup {
  border: 2px solid var(--md-primary-fg-color);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  background: var(--md-default-bg-color);
}

/* Profit/Loss indicators */
.profit {
  color: #4caf50;
  font-weight: 600;
}

.loss {
  color: #f44336;
  font-weight: 600;
}

/* ------------------------------------------------------------------------------
   Print Styles
   ------------------------------------------------------------------------------ */

@media print {
  /* Hide navigation on print */
  .md-sidebar {
    display: none;
  }
  
  /* Ensure content takes full width */
  .md-content {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------------------
   Responsive Adjustments
   ------------------------------------------------------------------------------ */

@media screen and (max-width: 76.1875em) {
  /* Mobile-specific styles */
  .md-typeset h1 {
    font-size: 1.6rem;
  }
}