/*
 * Modernized FLTK CSS with Dark Mode Support
 * based on original fltk.css structure.
 *
 * Transition started June 29, 2026.
 * Updated background and link colors July 4/5, 2026.
 * Support light browsers like Dillo that don't support CSS Custom Properties: var(...).
 * For other updates see Git.
 */

/* NOTE: comments below saying "fallback" stand for Dillo 3.0 and other browsers
 * that may or may not support CSS Custom Properties "var(...)" and some other
 * CSS properties like "box-shadow". Hard coded properties defined as "fallback"
 * *must* precede the corresponding property in var(...) syntax so the former
 * serve as fallbacks for the latter. All colors defined in this way *should*
 * be carefully sync'd with the (color) declarations in the head of this file.
 *
 * Note also that Dillo doesn't support dark mode (media query) which makes
 * it always use "light mode". There's no known way to use both the fallback
 * mechanism (hard coded colors) *and* the media query - unless the entire file
 * would be duplicated for both (light and dark) modes which is not feasible.
 *
 * Also ruled out: embedding the entire CSS into every HTML stream generated
 * by PHP, even though PHP could theoretically evaluate the user agent (browser).
 * This would *contradict* the actual purpose of CSS (loading it only once).
*/
:root {
  /* ------------------------------------ */
  /* --- Light Mode (Original Colors) --- */
  /* ------------------------------------ */

  --bg-body:               #bbbbee;
  --bg-page:               #dddfff;
  --bg-header:             #cccccc;
  --bg-code:               #f5f5f5; /* code/command box */

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

  --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;
  --text-str-idx:          #666666; /* STR comment and/or file index */

/*
 * Link colors chosen with the help of claude.ai (2026-07-04 20:00)
 * based on given background colors (internal: option B3)
*/
  --bg-data0:              #e0e0ff;
  --bg-data1:              #d1d1ff;

  --link-color:            #a51d1d;
  --link-visited:          #1e3a8a;
  --link-hover:            #913f00;

/*  end of: claude.ai (2026-07-04 12:00) */

  /* FIXME: is class 'title' ever used ? */
  --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     --- */
  /* ----------------------------------- */

    --bg-body:             #1e2a4a; /* Deep blue-gray */
    --bg-page:             #16213e; /* Slightly lighter than body */
    --bg-header:           #2c3e50; /* Dark slate */
    --bg-code:             #3c5090; /* code/command box */

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

    --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 */
    --text-str-idx:        #999999; /* STR comment and/or file index */

/*
 * Background and link colors chosen with the help of claude.ai (2026-07-04 20:00)
 * based on given background colors in normal mode (see above)
*/
    --bg-data0:            #1b2340;
    --bg-data1:            #131a33;

    --link-color:          #ff6b6b;
    --link-visited:        #7db8ff;
    --link-hover:          #ffe066;

/*  end of: claude.ai (2026-07-04 12:00) */

    /* FIXME: is class 'title' ever used ? */
    --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: #181818;                       /* fallback */
  background-color: #bbbbee;            /* fallback */
  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: #a51d1d;                       /* fallback */
  color: var(--link-color);
}

a:visited {
  /* text-decoration: none;  -- note: impossible to override due to :visited */
  font-weight: bold;
  color: #1e3a8a;                       /* fallback */
  color: var(--link-visited);
}

a:hover {
  text-decoration: underline;
  color: #913f00;                       /* Dillo: ":hover" not supported! */
  color: var(--link-hover);
  font-weight: bold;
}

/* FIXME: is class 'title' ever used ? */
a.title {
  color: #990000;                       /* fallback */
  color: var(--link-title);
}

a.title:hover {
  color: #0000cc;                       /* Dillo: ":hover" not supported! */
  color: var(--link-title-hover);
}

/* --- Header Navigation --- */
/* Selected links in page header */
a.sel, tr.sel {
  background-color: #dddddd;            /* fallback */
  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: #b0b0dd;            /* fallback */
  color: #000000;                       /* fallback */
  background-color: var(--bg-unsel);
  color: var(--text-unsel);
  border-radius: 4px 4px 0 0;
  /* 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: #cccccc;            /* fallback */
  color: #181818;                       /* fallback */
  background-color: var(--bg-header);
  color: var(--text-main);
}

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

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

/* Data row 1 */
tr.data1, tr.data1 td, td.data1 {
  background-color: #d1d1ff;            /* fallback */
  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: #ddaaaa;            /* fallback */
  color: #181818;                       /* fallback */
  background-color: var(--bg-header-red);
  color: var(--text-main);
}

tr.data0-red, tr.data0-red td, td.data0-red {
  background-color: #dd7777;            /* fallback */
  color: #181818;                       /* fallback */
  background-color: var(--bg-data0-red);
  padding: 2px;
  color: var(--text-main);
}

tr.data1-red, tr.data1-red td, td.data1-red {
  background-color: #dd6666;            /* fallback */
  color: #181818;                       /* fallback */
  background-color: var(--bg-data1-red);
  color: var(--text-main);
  padding: 2px;
}

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

table.simple-table th,
table.simple-table td {
  border: 2px solid #000000;            /* fallback */
  color: #181818;                       /* fallback */
  border: 2px solid var(--border-color);
  color: var(--text-main);
  padding: 3px;
}

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

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

/* --- Code and Shell Command Blocks --- */
pre.command,
pre.code {
  background-color: #f5f5f5;            /* fallback */
  color: #181818;                       /* fallback */
  background-color: var(--bg-code);
  color: var(--text-main);
  margin-left: 2em;
  padding: 10px;
  border-radius: 4px;
}

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: #996633;            /* fallback */
  color: #ddddaa;                       /* fallback */
  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 {
  background-color: #d8d8ff;            /* fallback */
  color:            #181818;            /* fallback */
  border: 5px solid #aaaadd;            /* fallback */;
  background-color: var(--bg-site-news);
  color: var(--text-main);
  border: 5px solid var(--bg-site-news-border);
  border-radius: 8px;
  margin-top: 20px;
}

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

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

/* Documentation warnings */
.doc-warning {
  background-color: #ddbcdf;            /* fallback */
  border: 1px solid #000000;            /* fallback */
  color:            #181818;            /* fallback */
  background-color: var(--bg-doc-warning);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-weight: bold;
  display: inline-block;                  /* supported by Dillo >= 3.1 */
  margin: 0 0 0 15px;
  padding: 5px 10px;
  border-radius: 4px;
}

/* Image Shadow Box */
.image-shadow-box {
  /* Ensure image container has background */
  background-color: #dddfff;            /* fallback */
  background-color: var(--bg-page);
  /* Dillo doesn't support box-shadow, but maybe other old browsers do ? */
  /* All box-shadow properties *must* be specified in one statement ! */
  box-shadow: 2px 2px 4px 2px rgba(102, 102, 102, 0.50);  /* fallback */
  box-shadow: 2px 2px 4px 2px var(--shadow-color);
  border-width: 0;
  border-radius: 6px;
  margin-bottom: 8px;
}