:root {
  --pico-font-family: monospace;
  --pico-font-size: 1em;

  --stroke-width: 1px; /* Use for borders, etc. same stroke width as the icons use. */

  --z-index-very-top: 50001;
  --z-index-menu: 50000; /* Weird, but needed to be on top of the leaflet map. */
  --z-index-on-static: 2;
  --z-index-static: 1;
  --z-index-bg: 0;

  /* Core color definitions */
  --color-primary: #a4131c;
  --color-primary-rgb: 164, 19, 28;
  --color-primary-hsl: 356, 79%, 36%;

  /* Derived colors - lighter/darker variants */
  --color-primary-lighter: #c41821;
  --color-primary-darker: #8a1017;

  /* Secondary colors - lighter versions of primary */
  --color-secondary: #d85a62;
  --color-secondary-rgb: 216, 90, 98;
  --color-secondary-hsl: 356, 65%, 60%;
  --color-secondary-lighter: #e68087;
  --color-secondary-darker: #c93940;

  /* Neutral/background colors */
  --color-background: white;
  --color-background-alt: #f8f5f5;
  --color-background-dark: #1a1a1a;
  --color-background-dark-alt: #2a2a2a;

  /* Text colors */
  --color-text-on-primary: white;
  --color-text-on-primary-rgb: 255, 255, 255;
  --color-text-on-primary-hsl: 0, 0%, 100%;
  --color-text-on-primary-dimmed: #f0f0f0;
  --color-text-on-secondary: white;
  --color-text-on-secondary-lighter: white;
  --color-text-on-background: #333333;
  --color-text-on-background-dark: #f0f0f0;

  /* Status colors */
  --color-success: #2e7d32;
  --color-warning: #f9a825;
  --color-danger: #d32f2f;
  --color-info: #a4131c; /* Use primary color for info */

  /* Text on status colors */
  --color-text-success: var(--color-success);
  --color-text-warning: var(--color-warning);
  --color-text-danger: var(--color-danger);
  --color-text-info: var(--color-info);
  --color-text-on-success: white;
  --color-text-on-warning: #333333;
  --color-text-on-danger: white;
  --color-text-on-info: white;

  /* Opacity values */
  --opacity-lighter: 0.8;
  --opacity-light: 0.5;
  --opacity-very-light: 0.2;

  --desktop-layout-min-width: 601px;

  --pico-modal-overlay-backdrop-filter: blur(0.2em);
}

dialog {
  --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.5);
}

/* light theme customizations for pico colors */
[data-theme=light],
:root:not([data-theme=dark]) {
  --pico-background-color: var(--color-background);
  --pico-primary: var(--color-primary);
  --pico-primary-background: var(--color-primary);
  --pico-primary-hover: var(--color-primary-darker);
  --pico-primary-focus: rgba(var(--color-primary-rgb), 0.25);
  --pico-primary-inverse: var(--color-text-on-primary);

  --pico-secondary: var(--color-secondary);
  --pico-secondary-background: var(--color-secondary);
  --pico-secondary-hover: var(--color-secondary-darker);
  --pico-secondary-focus: rgba(var(--color-secondary-rgb), 0.10);
  --pico-secondary-inverse: var(--color-text-on-secondary);

  --pico-contrast: var(--color-text-on-background);
  --pico-accordion-open-summary-color: var(--color-primary);
  --pico-border-color: rgba(var(--color-primary-rgb), var(--opacity-very-light));
  --pico-table-border-color: rgba(var(--color-primary-rgb), var(--opacity-very-light));
  --pico-primary-underline: var(--color-primary);
  --pico-mark-background-color: color-mix(in srgb, var(--color-primary), white 80%);
  --pico-mark-background-color-inverted: color-mix(in srgb, var(--color-text-on-primary), white 80%);

  --pico-h1-color: var(--color-primary);
  --pico-h2-color: var(--color-primary);
  --pico-h3-color: var(--color-primary);
  --pico-h4-color: var(--color-primary);
  --pico-h5-color: var(--color-primary);
  --pico-h6-color: var(--color-primary);

  /* Status colors */
  --pico-success: var(--color-success);
  --pico-warning: var(--color-warning);
  --pico-danger: var(--color-danger);
  --pico-info: var(--color-info);
}

/* DARK theme customizations for pico colors */
/* for dark do it here and below, must be done twice 🤷🏻‍♀️ see https://picocss.com/docs/css-variables */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-background-color: var(--color-background-dark);
    --pico-card-background-color: var(--color-background-dark-alt);
    --pico-color: var(--color-text-on-background-dark);

    --pico-primary: var(--color-primary-lighter);
    --pico-primary-background: var(--color-primary);
    --pico-primary-hover: var(--color-primary-darker);
    --pico-primary-focus: rgba(var(--color-primary-rgb), 0.25);
    --pico-primary-inverse: var(--color-text-on-primary);

    --pico-secondary: var(--color-secondary-lighter);
    --pico-secondary-background: var(--color-secondary);
    --pico-secondary-hover: var(--color-secondary-darker);
    --pico-secondary-focus: rgba(var(--color-secondary-rgb), 0.20);
    --pico-secondary-inverse: var(--color-text-on-secondary-lighter);

    --pico-card-sectioning-background-color: var(--color-background-dark-alt);
    --pico-primary-underline: var(--color-primary-lighter);
    --pico-primary-hover-underline: var(--color-primary-lighter);

    --pico-h1-color: var(--color-primary-lighter);
    --pico-h2-color: var(--color-primary-lighter);
    --pico-h3-color: var(--color-primary-lighter);
    --pico-h4-color: var(--color-primary-lighter);
    --pico-h5-color: var(--color-primary-lighter);
    --pico-h6-color: var(--color-primary-lighter);

    /* Status colors */
    --pico-success: color-mix(in srgb, var(--color-success), white 20%);
    --pico-warning: color-mix(in srgb, var(--color-warning), white 20%);
    --pico-danger: color-mix(in srgb, var(--color-danger), white 20%);
    --pico-info: color-mix(in srgb, var(--color-info), white 20%);
  }
}

[data-theme=dark] {
  --pico-background-color: var(--color-background-dark);
  --pico-card-background-color: var(--color-background-dark-alt);
  --pico-color: var(--color-text-on-background-dark);

  --pico-primary: var(--color-primary-lighter);
  --pico-primary-background: var(--color-primary);
  --pico-primary-hover: var(--color-primary-darker);
  --pico-primary-focus: rgba(var(--color-primary-rgb), 0.25);
  --pico-primary-inverse: var(--color-text-on-primary);

  --pico-secondary: var(--color-secondary-lighter);
  --pico-secondary-background: var(--color-secondary);
  --pico-secondary-hover: var(--color-secondary-darker);
  --pico-secondary-focus: rgba(var(--color-secondary-rgb), 0.20);
  --pico-secondary-inverse: var(--color-text-on-secondary-lighter);

  --pico-card-sectioning-background-color: var(--color-background-dark-alt);
  --pico-primary-underline: var(--color-primary-lighter);
  --pico-primary-hover-underline: var(--color-primary-lighter);

  --pico-h1-color: var(--color-primary-lighter);
  --pico-h2-color: var(--color-primary-lighter);
  --pico-h3-color: var(--color-primary-lighter);
  --pico-h4-color: var(--color-primary-lighter);
  --pico-h5-color: var(--color-primary-lighter);
  --pico-h6-color: var(--color-primary-lighter);

  /* Status colors */
  --pico-success: color-mix(in srgb, var(--color-success), white 20%);
  --pico-warning: color-mix(in srgb, var(--color-warning), white 20%);
  --pico-danger: color-mix(in srgb, var(--color-danger), white 20%);
  --pico-info: color-mix(in srgb, var(--color-info), white 20%);
}

@view-transition {
  navigation: auto;
}

html, body {
  -webkit-overflow-scrolling: touch; /* Add momentum scrolling to iOS devices. */
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 1rem;
  min-height: 100vh; /* Maybe not only, but required for the safe-area stuff in ios.css. */
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 1.5rem;
  }
  h2, h3, h4, h5, h6 {
    font-size: 1.2rem;
  }
}

article {
  border-radius: 1rem;
}

textarea {
  field-sizing: content;
}

.errorlist {
  color: var(--color-danger);
}

table thead {
  white-space: nowrap;
}

table td.date {
  white-space: nowrap;
}

table td {
  vertical-align: top;
}

.danger {
  color: var(--color-danger);
}

.danger:hover {
  background-color: var(--color-danger);
  color: var(--color-text-on-danger);
  text-decoration: none;
  opacity: 1;
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}