/*
 * Modernized FLTK CSS with Dark Mode Support
 * Based on original fltk.css structure
 */

:root {
  /* --- Light Mode (Original Colors) --- */
  --bg-body: #bbbbee;
  --bg-page: #dddfff;
  --bg-header: #cccccc;
  --bg-code: #f5f5f5; /* Inferred for consistency */

  --bg-sel: #dddddd;
  --bg-unsel: #b0b0dd;

  --bg-data0: #e0e0ff;
  --bg-data1: #d1d1ff;

  --bg-header-red: #ddaaaa;
  --bg-data0-red: #dd7777;
  --bg-data1-red: #dd6666;

  --bg-site-news: #d8d8ff;
  --bg-site-news-border: #aaaadd;
  --bg-doc-warning: #ddbcdf;
  --bg-search: #996633;

  --text-main: #181818;
  --text-unsel: #000000;
  --text-search: #ddddaa;

  --link-color: #961d1d;
  --link-visited: #c12525;
  --link-hover: #0000ff;
  --link-title: #990000;
  --link-title-hover: #0000cc;

  --border-color: #000000; /* For simple-table */
  --shadow-color: rgba(102, 102, 102, 0.50);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --- Dark Mode Overrides --- */
    /* Mapping light purples/blues to deep indigos/slates */
    --bg-body: #1e2a4a;       /* Deep blue-gray */
    --bg-page: #16213e;       /* Slightly lighter than body */
    --bg-header: #2c3e50;     /* Dark slate */

    --bg-sel: #34495e;        /* Muted blue-gray */
    --bg-unsel: #2c3e50;      /* Match header */

    --bg-data0: #2a3b6e;      /* Muted indigo */
    --bg-data1: #1f2d5a;      /* Darker indigo */

    --bg-header-red: #6e2a2a; /* Muted brick */
    --bg-data0-red: #8a3a3a;  /* Softer red */
    --bg-data1-red: #7a2f2f;  /* Darker red */

    --bg-site-news: #1f294a;
    --bg-site-news-border: #3e4c7a;
    --bg-doc-warning: #4a2a4f; /* Muted purple */
    --bg-search: #5c3d1e;      /* Darker brown */

    --text-main: #e0e0e0;
    --text-unsel: #ffffff;
    --text-search: #f0e68c;    /* Lighter yellow for contrast */

    --link-color: #ff6b6b;     /* Softer red for dark bg */
    --link-visited: #ff8585;
    --link-hover: #4da3ff;     /* Bright blue for hover visibility */
    --link-title: #ff8585;
    --link-title-hover: #4da3ff;

    --border-color: #555555;   /* Lighter border for visibility */
    --shadow-color: rgba(0, 0, 0, 0.60);
  }
}

/* --- Global Reset & Typography --- */
body {
  color: var(--text-main);
  background-color: var(--bg-body);
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

p, h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
}

sup, sub {
  font-size: 50%;
  line-height: 0;
}

/* --- Links --- */
a:link {
  text-decoration: none;
  font-weight: bold;
  color: var(--link-color);
}

a:visited {
  text-decoration: none;
  font-weight: bold;
  color: var(--link-visited);
}

a:link:hover {
  text-decoration: underline;
  color: var(--link-hover);
  font-weight: bold;
}

a.title {
  color: var(--link-title);
}

a.title:hover {
  color: var(--link-title-hover);
}

/* --- Header Navigation --- */
/* Selected links in page header */
a.sel, tr.sel {
  background-color: var(--bg-sel);
  border-radius: 4px 4px 0 0;
}

tr.sel td {
  padding: 2px;
}

/* Unselected links in page header */
a.unsel {
  background-color: var(--bg-unsel);
  border-radius: 4px 4px 0 0;
  color: var(--text-unsel);
  /* Ensure text contrast on dark bg in dark mode */
  font-weight: bold;
}

/* Page title, right of FLTK logo */
tr.header h1,
tr.header h2,
tr.header h3,
tr.header h4 {
  margin-left: 8px;
}

/* Page header background */
tr.header,
tr.header th,
th.header {
  background-color: var(--bg-header);
  color: var(--text-main);
}

/* Full page background color */
tr.page, td.page {
  background-color: var(--bg-page);
}

/* --- Tables (Alternating Rows) --- */
/* Data row 0 */
tr.data0, tr.data0 td, td.data0 {
  background-color: var(--bg-data0);
  padding: 2px;
  color: var(--text-main);
}

/* Data row 1 */
tr.data1, tr.data1 td, td.data1 {
  background-color: var(--bg-data1);
  padding: 2px;
  color: var(--text-main);
}

/* Red Variant Tables */
tr.header-red, tr.header-red th, th.header-red {
  background-color: var(--bg-header-red);
  color: var(--text-main);
}

tr.data0-red, tr.data0-red td, td.data0-red {
  background-color: var(--bg-data0-red);
  padding: 2px;
  color: var(--text-main);
}

tr.data1-red, tr.data1-red td, td.data1-red {
  background-color: var(--bg-data1-red);
  padding: 2px;
  color: var(--text-main);
}

/* Simple Table Borders */
table.simple-table {
  border: 2px solid var(--border-color);
  border-collapse: collapse;
}

table.simple-table th,
table.simple-table td {
  border: 2px solid var(--border-color);
  padding: 3px;
  color: var(--text-main);
}

/* --- Forms & Inputs --- */
input[type="text"], textarea {
  font-family: monospace;
  background-color: var(--bg-body);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 4px;
}

/* --- Lists --- */
dl {
  margin-left: 2em;
}

pre.command {
  margin-left: 2em;
  background-color: var(--bg-code); /* Optional: Add bg for code blocks */
  padding: 10px;
  border-radius: 4px;
  color: var(--text-main);
}

li {
  list-style-image: none;
}

/* List style images (ensure they are visible or consider SVG filters for dark mode) */
li.C, li.F, li.H, li.L, li.N {
  /* Note: GIF images may need dark-mode versions if they have white backgrounds */
}

/* --- Utilities & Special Boxes --- */
.search {
  background-color: var(--bg-search);
  color: var(--text-search);
  padding: 5px;
  border-radius: 4px;
}

.valid {
  /* Inherits default */
}

.invalid {
  color: #ff4444; /* Brighter red for dark mode visibility if needed */
}

.new {
  color: #ff8585; /* Lighter red for dark mode */
}

/* "Site News" box */
.site-news {
  border: 5px solid var(--bg-site-news-border);
  border-radius: 8px;
  background-color: var(--bg-site-news);
  margin-top: 20px;
  color: var(--text-main);
}

.site-news h3 {
  padding: 2px 10px 0 10px;
  margin: 1px 0 5px 0;
  font-size: 0.9em;
  text-align: center;
  color: var(--text-main);
}

.site-news p {
  margin: 0 5px;
  padding: 5px;
  border-top: 1px solid var(--border-color);
  font-size: 0.7em;
  color: var(--text-main);
}

/* Documentation warnings */
.doc-warning {
  background: var(--bg-doc-warning);
  font-weight: bold;
  display: inline-block;
  margin: 0 0 0 15px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 4px;
}

/* Image Shadow Box */
.image-shadow-box {
  border-width: 0;
  border-radius: 6px;
  box-shadow: 2px 2px 4px 2px var(--shadow-color);
  margin-bottom: 8px;
  background-color: var(--bg-page); /* Ensure image container has bg */
}