/* FileGator v8 — core theme */
:root {
  /* Native controls (checkbox, radio, select, scrollbar) follow this, not the
     palette variables. The <meta> says the page supports both schemes, but it
     can only follow the system; without this declaration a user who chose
     Light on a dark machine keeps dark checkboxes. Each theme block below sets
     it again, matching the variables. */
  color-scheme: light;

  --primary: #34b891;
  --primary-dark: #2a9b79;
  --primary-light: #e8f8f3;

  --text: #363636;
  --text-light: #7a7a7a;
  --text-invert: #ffffff;

  --bg: #f5f7fa;
  --surface: #ffffff;
  --border: #e3e6ea;
  --border-strong: #cdd3da;

  --danger: #f14668;
  --warning: #ffb70f;
  --info: #3e8ed0;

  /* Neutral tints: row hover, the guest row, a menu highlight. */
  --tint: #f5f5f5;
  --tint-strong: #ebebeb;

  /* Tinted message surfaces, so a notice reads the same shape in both
     themes: a wash, its text, and its border. */
  --danger-bg: #feecf0;
  --danger-text: #cc0f35;
  --warning-bg: #fff5e5;
  --warning-text: #8a5300;
  --warning-border: #e6a700;

  --radius: 6px;
  --shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.06);
  --shadow-md: 0 4px 14px rgba(10, 10, 10, 0.1);

  /* The interface width, set from the admin's max_width setting. "none"
     means no cap. */
  --max-width: 960px;

  /* The logo pair, light theme: the light variant is shown, the dark one is
     not. Both are declared here as well as in the dark blocks, because a
     variable that is never defined on :root makes `display: var(--logo-light)`
     invalid — which falls back to the element's default display and shows
     BOTH logos at once. */
  --logo-light: block;
  --logo-dark: none;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  /* White, not the tinted surface colour: the card is the content, and a grey
     page behind it read as a second frame around the whole application.
     --bg is still used for insets such as the search field and code blocks,
     where a tint is what distinguishes them. */
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/* Dark theme -------------------------------------------------------------- */

/*
 * The theme is selected by the user's stored choice (`data-theme="dark"` on
 * <html>) *and* by the system when they have not chosen. Both are needed: the
 * attribute alone would ignore the system, the media query alone would make
 * the toggle do nothing. The `:not([data-theme="light"])` guard lets a user
 * who chose light keep it on a dark machine.
 *
 * Every surface is a variable. A hardcoded #fff or #f5f5f5 in a component is
 * a light patch in the dark theme, which is why the components use --surface,
 * --bg, --tint and friends rather than literals.
 *
 * The palette is the interface's own inverted, with the brand green lightened
 * so it stays legible on a dark surface (--primary-dark keeps the true brand
 * value where a filled control needs contrast against white text).
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --text: #e6e6e8;
    --text-light: #9a9aa0;
    --text-invert: #17171a;

    --primary: #4fd1a9;
    --primary-dark: #34b891;
    --primary-light: #14332b;

    --bg: #1d1d20;
    --surface: #131315;
    --border: #2c2c30;
    --border-strong: #3d3d43;

    --danger: #ff6b85;
    --warning: #ffc53d;
    --info: #6aa8e0;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.6);

    /* Neutral tints: row hover, the guest row, a menu highlight. The grey
       that reads as "under the pointer" on a light page is the page's
       background on a dark one, so here it is a step lighter than the surface. */
    --tint: #202024;
    --tint-strong: #2a2a2f;

    --danger-bg: #3a1520;
    --danger-text: #ff8da1;
    --warning-bg: #3a2c0a;
    --warning-text: #ffd166;
    --warning-border: #5c4410;

    /* The logo pair: on a dark page the dark variant is the one shown. The
       selectors below repeat for the user's own choice, like the palette. */
    --logo-light: none;
    --logo-dark: block;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --text: #e6e6e8;
  --text-light: #9a9aa0;
  --text-invert: #17171a;

  --primary: #4fd1a9;
  --primary-dark: #34b891;
  --primary-light: #14332b;

  --bg: #1d1d20;
  --surface: #131315;
  --border: #2c2c30;
  --border-strong: #3d3d43;

  --danger: #ff6b85;
  --warning: #ffc53d;
  --info: #6aa8e0;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.6);

  --tint: #202024;
  --tint-strong: #2a2a2f;

  --danger-bg: #3a1520;
  --danger-text: #ff8da1;
  --warning-bg: #3a2c0a;
  --warning-text: #ffd166;
  --warning-border: #5c4410;

  --logo-light: none;
  --logo-dark: block;
}

/* Logos ------------------------------------------------------------------- */

/*
 * Every logo is two <img> elements, one per theme, distinguished by
 * .logo-light and .logo-dark. The palette variables above decide which is
 * shown, and `display: none` means the browser never downloads the other one:
 * an image hidden with opacity or visibility would still be fetched, putting a
 * request for a logo nobody sees in every network log.
 *
 * These rules come after `.hidden` and repeat `!important` because that utility
 * is how the views show and hide a logo (setVisible adds .hidden). Without it
 * an element with both classes would stay visible: a lesser rule loses to
 * `.hidden` whatever its specificity.
 *
 * js/modules/logo.js writes the src and alt of both images, once.
 */
.logo-light:not(.hidden) {
  display: var(--logo-light) !important;
}

.logo-dark:not(.hidden) {
  display: var(--logo-dark) !important;
}

/* Utilities */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.is-flex {
  display: flex;
}

.is-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}