:root {
    /* Light theme colors (default) */
    --border-color: #A9AEDB;
    --background-color: #ffffff;
    --accent-color: #0F69C4;
    --heading-color: #4CAF50;
    --title-color: #0F69C4;
    --type-name-color: #605f60;
    --reference-border-color: #E7DEFB;
    --reference-background-color: #E7DEFB;
    --reference-text-color: #0F0D61;
    --plantuml-border-color: #E7DEFB;
    --datatable-border-color: #0F69C4;
    --datatable-header-bg-color: #0F69C4;
    --datatable-header-text-color: #fff;
    --datatable-body-border-color: #0F69C4;
    --text-color: inherit;
    
    /* Dark theme colors (not applied by default) */
    --dark-border-color: #5D63A6;
    --dark-background-color: var(--color-sidebar-background);
    --dark-accent-color: #58A9FF;
    --dark-heading-color: #6FCF75;
    --dark-title-color: #58A9FF;
    --dark-type-name-color: #BBBBBB;
    --dark-reference-border-color: #504982;
    --dark-reference-background-color: #504982;
    --dark-reference-text-color: #E7DEFB;
    --dark-plantuml-border-color: #504982;
    --dark-datatable-border-color: #58A9FF;
    --dark-datatable-header-bg-color: #3A5E8C;
    --dark-datatable-header-text-color: #E7DEFB;
    --dark-datatable-body-border-color: #58A9FF;
    --dark-text-color: #E7DEFB;
  }
  
  /* Apply dark theme variables when dark theme is explicitly selected */
  body[data-theme="dark"] {
    --border-color: var(--dark-border-color);
    --background-color: var(--dark-background-color);
    --accent-color: var(--dark-accent-color);
    --heading-color: var(--dark-heading-color);
    --title-color: var(--dark-title-color);
    --type-name-color: var(--dark-type-name-color);
    --reference-border-color: var(--dark-reference-border-color);
    --reference-background-color: var(--dark-reference-background-color);
    --reference-text-color: var(--dark-reference-text-color);
    --plantuml-border-color: var(--dark-plantuml-border-color);
    --datatable-border-color: var(--dark-datatable-border-color);
    --datatable-header-bg-color: var(--dark-datatable-header-bg-color);
    --datatable-header-text-color: var(--dark-datatable-header-text-color);
    --datatable-body-border-color: var(--dark-datatable-body-border-color);
    --text-color: var(--dark-text-color);
  }
  
  /* Apply dark theme variables when auto theme is selected and system prefers dark */
  @media (prefers-color-scheme: dark) {
    body[data-theme="auto"] {
      --border-color: var(--dark-border-color);
      --background-color: var(--dark-background-color);
      --accent-color: var(--dark-accent-color);
      --heading-color: var(--dark-heading-color);
      --title-color: var(--dark-title-color);
      --type-name-color: var(--dark-type-name-color);
      --reference-border-color: var(--dark-reference-border-color);
      --reference-background-color: var(--dark-reference-background-color);
      --reference-text-color: var(--dark-reference-text-color);
      --plantuml-border-color: var(--dark-plantuml-border-color);
      --datatable-border-color: var(--dark-datatable-border-color);
      --datatable-header-bg-color: var(--dark-datatable-header-bg-color);
      --datatable-header-text-color: var(--dark-datatable-header-text-color);
      --datatable-body-border-color: var(--dark-datatable-body-border-color);
      --text-color: var(--dark-text-color);
    }
  }
  
  /* Light Theme (Default) Styles using variables */
  .need_container > table,
  .needs_layout_itrend,
  .needs_type_itrend-requirement {
      border: 1px solid var(--border-color) !important;
      background-color: var(--background-color) !important;
      border-radius: 8px !important;
      margin: 20px 0;
      border-left: 10px solid var(--border-color) !important;
      border-right: 10px solid var(--border-color) !important;
      color: var(--text-color);
  }
  
  .need_container > table h3,
  .needs_layout_itrend h3,
  .needs_type_itrend-requirement h3 {
      color: var(--heading-color);
  }
  
  .need_container > table .needs_title,
  .needs_layout_itrend .needs_title,
  .needs_type_itrend-requirement .needs_title {
      color: var(--title-color) !important;
      font-size: x-large;
  }
  
  .need_container > table .needs_type_name,
  .needs_layout_itrend .needs_type_name,
  .needs_type_itrend-requirement .needs_type_name {
      text-transform: uppercase;
      font-size: small;
      color: var(--type-name-color);
  }
  
  .need_container > table .needs-id,
  .needs_layout_itrend .needs-id,
  .needs_type_itrend-requirement .needs-id {
      font-size: x-small;
      white-space: nowrap;
  }
  
  .need_container > table .head,
  .needs_layout_itrend .head,
  .needs_type_itrend-requirement .head {
      padding-top: 1px !important;
      padding-bottom: 1px !important;
  }
  
  .need_container > table .head .needs_head .line,
  .needs_layout_itrend .head .needs_head .line,
  .needs_type_itrend-requirement .head .needs_head .line {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
  }
  
  .need_container > table td,
  .needs_layout_itrend td,
  .needs_type_itrend-requirement td {
      border-bottom: 0px !important;
  }
  
  .need_container > table tr.head,
  .needs_layout_itrend tr.head,
  .needs_type_itrend-requirement tr.head {
      background-color: var(--background-color) !important;
  }
  
  .need_container > table a.reference,
  .needs_layout_itrend a.reference,
  .needs_type_itrend-requirement a.reference {
      font-size: x-small;
      white-space: nowrap;
      border: 1px solid var(--reference-border-color) !important;
      padding: 2px;
      border-radius: 4px;
      background-color: var(--reference-background-color) !important;
      color: var(--reference-text-color) !important;
  }
  
  p.plantuml {
      overflow: auto;
      border-top: 10px solid var(--plantuml-border-color);
      border-bottom: 10px solid var(--plantuml-border-color);
      border-left: 2px solid var(--plantuml-border-color);
      border-right: 2px solid var(--plantuml-border-color);
      border-radius: 4px;
  }
  
  table.need {
      max-width: 100%;
      table-layout: fixed;
  }
  
  .dataTables_wrapper {
      border: 1px solid var(--reference-border-color);
      border-radius: 4px;
      padding: 4px !important;
      font-size: small;
      color: var(--text-color);
      background-color: var(--background-color);
  }
  
  table.dataTable {
      border: 1px dashed var(--datatable-border-color) !important;
      background-color: var(--background-color);
  }
  
  table.dataTable thead th,
  table.dataTable thead td {
      padding: 10px 18px;
      border: 1px solid #fff;
      background-color: var(--datatable-header-bg-color) !important;
      color: var(--datatable-header-text-color);
      font-weight: bold;
  }
  
  table.dataTable tbody th,
  table.dataTable tbody td {
      border: 1px dashed var(--datatable-body-border-color);
      color: var(--text-color);
  }
  
  h1,
  h2,
  h3 {
      color: var(--accent-color);
  }
  
  /* Additional specific styling for dark theme tables */
  body[data-theme="dark"] table.dataTable,
  @media (prefers-color-scheme: dark) {
    body[data-theme="auto"] table.dataTable {
      background-color: #2D2D3F;
    }
  }