/**
 * Copyright (c) 2020, 2024 Erik Nordstrøm <erik@nordstroem.no>
 *
 * Permission to use, copy, modify, and/or distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */


/*
 * # Main css file for http-horse status web-ui
 */

/*
 * ## General box-sizing
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

:root {
  box-sizing: border-box;
}

/*
 * ## General margins and paddings
 */

* {
  margin: 0;
  padding: 0;
}

/*
 * ## Color schemes
 */

/*
 * ### Color scheme: Midnight Purple (Dark Mode)
 */

:root {
  --midnight-purple-color-background: /* Deep Charcoal Purple */ #1E1B29;
  --midnight-purple-color-primary: /*    Dark Purple          */ #3E2C56;
  --midnight-purple-color-secondary: /*  Muted Lavender       */ #715B94;
  --midnight-purple-color-accent: /*     Soft Mauve           */ #A68EBB;
  --midnight-purple-color-text: /*       Light Gray           */ #E0E0E0;
}

:root[data-color-scheme="midnight-purple"] {
  --color-background: var(--midnight-purple-color-background);
  --color-primary: var(--midnight-purple-color-primary);
  --color-secondary: var(--midnight-purple-color-secondary);
  --color-accent: var(--midnight-purple-color-accent);
  --color-text: var(--midnight-purple-color-text);
  --color-text-alt: var(--midnight-purple-color-background);
}

/*
 * ### Color scheme: Slate Green (Dark Mode)
 */

:root {
  --slate-green-color-background: /* Charcoal Green   */ #2B3A42;
  --slate-green-color-primary: /*    Dark Slate Green */ #3F5C59;
  --slate-green-color-secondary: /*  Muted Moss Green */ #607D74;
  --slate-green-color-accent: /*     Soft Sage        */ #A2C4BF;
  --slate-green-color-text: /*       Pale Mint        */ #D8E1E0;
}

:root[data-color-scheme="slate-green"] {
  --color-background: var(--slate-green-color-background);
  --color-primary: var(--slate-green-color-primary);
  --color-secondary: var(--slate-green-color-secondary);
  --color-accent: var(--slate-green-color-accent);
  --color-text: var(--slate-green-color-text);
  --color-text-alt: var(--slate-green-color-background);
}

/*
 * ### Color scheme: Abyss Blue (Dark Mode)
 */

:root {
  --abyss-blue-color-background: /* Deep Blue Black  */ #0E1A26;
  --abyss-blue-color-primary: /*    Midnight Blue    */ #1F3548;
  --abyss-blue-color-secondary: /*  Desaturated Teal */ #41607A;
  --abyss-blue-color-accent: /*     Pale Turquoise   */ #6EA8BD;
  --abyss-blue-color-text: /*       Cool Gray        */ #E8F0F2;
}

:root[data-color-scheme="abyss-blue"] {
  --color-background: var(--abyss-blue-color-background);
  --color-primary: var(--abyss-blue-color-primary);
  --color-secondary: var(--abyss-blue-color-secondary);
  --color-accent: var(--abyss-blue-color-accent);
  --color-text: var(--abyss-blue-color-text);
  --color-text-alt: var(--abyss-blue-color-background);
}

/*
 * ### Color scheme: Graphite & Copper (Dark Mode)
 */

:root {
  --graphite-and-copper-color-background: /* Graphite Black */ #1C1C1C;
  --graphite-and-copper-color-primary: /*    Dark Gray      */ #333333;
  --graphite-and-copper-color-secondary: /*  Medium Gray    */ #545454;
  --graphite-and-copper-color-accent: /*     Copper         */ #BB8647;
  --graphite-and-copper-color-text: /*       White          */ #FFFFFF;
}

/* Graphite & Copper is the default color scheme unless otherwise is specified. */
:root:not([data-color-scheme]), :root[data-color-scheme="graphite-and-copper"] {
  --color-background: var(--graphite-and-copper-color-background);
  --color-primary: var(--graphite-and-copper-color-primary);
  --color-secondary: var(--graphite-and-copper-color-secondary);
  --color-accent: var(--graphite-and-copper-color-accent);
  --color-text: var(--graphite-and-copper-color-text);
  --color-text-alt: var(--graphite-and-copper-color-background);
}

/*
 * ### Color scheme: Crimson & Charcoal (Dark Mode)
 */

:root {
  --crimson-and-charcoal-color-background: /* Charcoal Black  */ #2B2B2B;
  --crimson-and-charcoal-color-primary: /*    Crimson         */ #4A1E26;
  --crimson-and-charcoal-color-secondary: /*  Dark Burgundy   */ #7D3A40;
  --crimson-and-charcoal-color-accent: /*     Rosewood        */ #B56468;
  --crimson-and-charcoal-color-text: /*       Very Light Gray */ #ECECEC;
}

:root[data-color-scheme="crimson-and-charcoal"] {
  --color-background: var(--crimson-and-charcoal-color-background);
  --color-primary: var(--crimson-and-charcoal-color-primary);
  --color-secondary: var(--crimson-and-charcoal-color-secondary);
  --color-accent: var(--crimson-and-charcoal-color-accent);
  --color-text: var(--crimson-and-charcoal-color-text);
  --color-text-alt: var(--crimson-and-charcoal-color-background);
}

/*
 * ## General color and styling
 */

:root {
  background-color: var(--color-background);
  color: var(--color-text);
  color-scheme: dark;
}

a, a:hover, a:active, a:visited {
  color: var(--color-text);
}

#header-main {
  background-color: var(--color-primary);
}

/*
 * ## General typography
 */

:root {
  font-family: sans-serif;
  font-size: 12pt;
  font-weight: 100;
}

@media (min-resolution: 192dpi) {
  :root {
    font-size: 10pt;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 200;
}

h1 {
  font-size: 1.829rem;
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.225rem;
}

/*
 * ## General list appearance
 */

ul {
  list-style-type: none;
}

li > ul {
  margin-left: 1rem;
}

/*
 * ## Margins and paddings for main containers
 */

#outer-main {
  padding-bottom: 0.618rem;
}

#header-main {
  padding: 1.618rem 1rem;
  overflow-x: hidden;
}

#header-main > h2 {
  margin-top: 0.618rem;
}

#inner-main {
  padding: 1rem;
}

/*
 * ## Page layout
 */

#outer-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#header-main {
  flex-shrink: 0;
}

#inner-main {
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
}

/*
 * ## Margins and paddings between sections
 */

#inner-main > section + section {
  margin-top: 0.618rem; /* NOTE: Same as margin-top of #list-pages-and-their-resources > li.page */
}

/*
 * ## Section: Pages and their resources
 */

#list-pages-and-their-resources > li.page {
  margin-top: 0.618rem;
}

a[data-file] {
  padding: 0.1337rem;
  display: block;
}

a[data-file]:hover {
  background: var(--color-accent);
  /* When background is the accent color, we use the alternate text color. */
  color: var(--color-text-alt);
}

/*
 * ## Section: Recent file system event history
 */