/* Light theme variables (default) */
:root {
    --font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
    --table-width: 100%;
    --border-collapse: collapse;
    --cell-padding: 0.33em;
    /* Text and colors */
    --text-color: #000000;
    --border-color: #dddddd;
    --highlight-bg: rgba(25, 135, 84, 1);
    --fade-odd-from: rgba(25, 135, 84, 1);
    --fade-odd-to: #ffffff;
    --fade-even-from: rgba(25, 135, 84, 1);
    --fade-even-to: #d9e1f2;
    --bold-text-color: #000000;
    --normal-text-color: #000000;
    --text-hover-color: inherit;
    --detail-even-bg: #d9e1f2;
    --detail-odd-bg: #ffffff;

    /* Articles table specific variables */
    --article-text-color: #000000;
    --article-header-bg: #212529;
    --article-header-text: #ffffff;
    --article-odd-bg: #ffffff;
    --article-even-bg: #d9e1f2;
    --article-link-color: #000000;
    --article-link-hover: #333333;
  }
  
  /* Dark theme overrides */
  [data-theme="dark"] {
    --text-color: #A0AEC0;
    --border-color: #252C3B;
    --highlight-bg: rgba(74, 85, 104, 1);
    --fade-odd-from: rgba(74, 85, 104, 1);
    --fade-odd-to: #2E3749;
    --fade-even-from: rgba(74, 85, 104, 1);
    --fade-even-to: #1A202C;
    --bold-text-color: #A0AEC0;
    --normal-text-color: #A0AEC0;
    --text-hover-color: whitesmoke;
    --detail-even-bg: #1A202C;
    --detail-odd-bg: #2E3749;

    /* Articles table dark theme overrides */
    --article-text-color: #A0AEC0;
    --article-header-bg: #212529;
    --article-header-text: #ffffff;
    --article-odd-bg: #2E3749;
    --article-even-bg: #1A202C;
    --article-link-color: #A0AEC0;
    --article-link-hover: #ffffff;
  }
  
  /* Apply theme variables */
  #customers {
    font-family: var(--font-family);
    border-collapse: var(--border-collapse);
    width: var(--table-width);
    color: var(--text-color);
  }
  
  #customers td {
    border: 1px solid var(--border-color);
    padding: var(--cell-padding);
  }
  
  #customers tr.highlight {
    background-color: var(--highlight-bg);
  }
  
  @keyframes fadeout-odd {
    0% { background-color: var(--fade-odd-from); }
    100% { background-color: var(--fade-odd-to); }
  }
  
  @keyframes fadeout-even {
    0% { background-color: var(--fade-even-from); }
    100% { background-color: var(--fade-even-to); }
  }
  
  .bold-text {
    font-weight: bold;
    color: var(--bold-text-color);
    text-decoration: none;
  }
  
  .bold-text:hover {
    color: var(--text-hover-color);
    text-decoration: none;
  }
  
  .normal-text {
    font-weight: normal;
    color: var(--normal-text-color);
    text-decoration: none;
  }
  
  .normal-text:hover {
    color: var(--text-hover-color);
    text-decoration: none;
  }
  
  .detail-even {
    background-color: var(--detail-even-bg) !important;
  }
  
  .detail-odd {
    background-color: var(--detail-odd-bg) !important;
  }