/**
 * Auto Color Scheme for JustTheDocs Theme
 * 
 * This file implements automatic color scheme switching based on user's
 * system preferences using CSS media queries.
 * 
 * The implementation uses prefers-color-scheme to apply conditional styles
 * for both light and dark modes.
 */

/* Light mode styles - default behavior */
@media (prefers-color-scheme: light) {
  :root {
    /* Keep the default light theme variables */
    /* No overrides needed as light is the default */
  }
  
  /* Ensure logo uses light version in light mode */
  .site-logo {
    background-image: url('/assets/logo/smarkform.svg') !important;
  }
}

/* Dark mode styles - applied when system prefers dark */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override with dark theme colors */
    /* These variables match JustTheDocs dark theme */
    --body-background-color: #202020;
    --sidebar-color: #0d0d0d;
    --border-color: #44434d;
    --body-text-color: #e9e9e9;
    --body-heading-color: #e9e9e9;
    --nav-child-link-color: #e9e9e9;
    --search-result-preview-color: #ddd;
    --link-color: #7253ed;
    --btn-primary-color: #5f48d0;
    --base-button-color: #f7f7f7;
  }
  
  /* Apply dark background and text colors */
  body {
    background-color: #202020;
    color: #e9e9e9;
  }
  
  /* Sidebar dark background */
  .side-bar {
    background-color: #0d0d0d;
    border-right-color: #44434d;
  }
  
  /* Main content area */
  .main-content {
    color: #e9e9e9;
  }
  
  /* Links in dark mode */
  a {
    color: #7253ed;
  }
  
  a:visited {
    color: #9379f0;
  }
  
  /* Code blocks */
  code {
    background-color: #2e2e2e;
    border-color: #44434d;
  }
  
  pre {
    background-color: #2e2e2e;
    border-color: #44434d;
  }
  
  /* Tables */
  table {
    border-color: #44434d;
  }
  
  th, td {
    border-color: #44434d;
  }
  
  thead {
    background-color: #2e2e2e;
  }
  
  /* Search */
  .search-input {
    background-color: #2e2e2e;
    color: #e9e9e9;
    border-color: #44434d;
  }
  
  /* Navigation */
  .nav-list-link {
    color: #e9e9e9;
  }
  
  .nav-list-link:hover,
  .nav-list-link.active {
    background-color: #2e2e2e;
  }
  
  /* Footer */
  .site-footer {
    border-top-color: #44434d;
    background-color: #0d0d0d;
  }
  
  /* Ensure logo uses dark version in dark mode */
  .site-logo {
    background-image: url('/assets/logo/smarkform_dark.svg') !important;
  }
  
  /* Buttons */
  .btn,
  .btn-outline {
    background-color: #2e2e2e;
    color: #e9e9e9;
    border-color: #44434d;
  }
  
  .btn:hover,
  .btn-outline:hover {
    background-color: #3e3e3e;
  }
  
  /* Callouts */
  .callout {
    background-color: #2e2e2e;
    border-color: #44434d;
  }
  
  /* Horizontal rules */
  hr {
    border-color: #44434d;
  }
  
  /* Blockquotes */
  blockquote {
    border-left-color: #44434d;
    color: #ddd;
  }
  
  /* Tab components (code examples) */
  .tab-label {
    background-color: #2e2e2e !important;
    border-color: #44434d !important;
    color: #e9e9e9 !important;
  }
  
  .tab-label:hover {
    background-color: #3e3e3e !important;
  }
  
  .tab-label-active {
    background-color: #3e3e3e !important;
  }
  
  .tab-content {
    background-color: #202020 !important;
    border-color: #44434d !important;
    color: #e9e9e9 !important;
  }
  
  /* Code block containers - fix white background underneath */
  .highlight,
  figure.highlight,
  div.highlight {
    background-color: #2e2e2e !important;
  }
  
  /* Headings in dark mode */
  h1, h2, h3, h4, h5, h6 {
    color: #e9e9e9 !important;
  }
  
  /* Form inputs and textareas - use middle gray instead of bright white */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    background-color: #3a3a3a !important;
    color: #e9e9e9 !important;
    border-color: #44434d !important;
  }
  
  /* Inputs without type attribute (defaults to text) */
  input:not([type]),
  input[type=""] {
    background-color: #3a3a3a !important;
    color: #e9e9e9 !important;
    border-color: #44434d !important;
  }
  
  /* Placeholder text in inputs */
  input::placeholder,
  textarea::placeholder {
    color: #999 !important;
  }
  
  /* Regular buttons - make them less bright */
  .btn:not(:disabled),
  .btn-outline:not(:disabled),
  button:not(:disabled) {
    background-color: #2a2a2a !important;
    color: #e9e9e9 !important;
    border-color: #44434d !important;
  }
  
  .btn:not(:disabled):hover,
  .btn-outline:not(:disabled):hover,
  button:not(:disabled):hover {
    background-color: #353535 !important;
  }
  
  /* Tables - fix white backgrounds */
  table,
  table tbody,
  table tr,
  table td,
  table th {
    background-color: transparent !important;
  }
  
  table thead,
  table thead tr,
  table thead th {
    background-color: #2e2e2e !important;
  }
  
  /* Striped table rows */
  table tbody tr:nth-child(2n) {
    background-color: #252525 !important;
  }
  
  /* Links - make them brighter for better visibility */
  a {
    color: #8c7aff !important;
  }
  
  a:visited {
    color: #a896ff !important;
  }
  
  /* Sidebar nav links */
  .nav-list-link {
    color: #b8b8b8 !important;
  }
  
  .nav-list-link:hover {
    color: #e9e9e9 !important;
  }
  
  /* Child nav links under sections */
  .nav-list .nav-list-item .nav-list-link {
    color: #a8a8a8 !important;
  }
  
  .nav-list .nav-list-item .nav-list-link:hover {
    color: #e9e9e9 !important;
  }
  
  /* Inline code tags - make them less bright */
  code {
    background-color: #2a2a2a !important;
    border-color: #44434d !important;
    color: #d4d4d4 !important;
  }
  
  /* Auxiliary nav links (top right) */
  .aux-nav,
  .aux-nav .aux-nav-list,
  .aux-nav .aux-nav-list-item {
    background-color: transparent !important;
  }
  
  .aux-nav .aux-nav-list-item a {
    background-color: #2a2a2a !important;
    color: #e9e9e9 !important;
    border-color: #44434d !important;
  }
  
  .aux-nav .aux-nav-list-item a:hover {
    background-color: #353535 !important;
  }
}