/**
 * Automatic Version:
 * Light theme by default, automatically switches to dark theme 
 * based on the user's system preference.
 */

:root {
  --background-body: #fff;
  --background: #efefef;
  --background-alt: #f7f7f7;
  --selection: #9e9e9e;
  --text-main: #363636;
  --text-bright: #000;
  --text-muted: #70777f;
  --links: #0076d1;
  --focus: #0096bfab;
  --border: #dbdbdb;
  --code: #000;
  --animation-duration: 0.1s;
  --button-base: #d0cfcf;
  --button-hover: #9b9b9b;
  --scrollbar-thumb: rgb(170, 170, 170);
  --scrollbar-thumb-hover: var(--button-hover);
  --form-placeholder: #949494;
  --form-text: #1d1d1d;
  --variable: #39a33c;
  --highlight: #ff0;
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-body: #202b38;
    --background: #161f27;
    --background-alt: #1a242f;
    --selection: #1c76c5;
    --text-main: #dbdbdb;
    --text-bright: #fff;
    --text-muted: #a9b1ba;
    --links: #41adff;
    --focus: #0096bfab;
    --border: #526980;
    --code: #ffbe85;
    --animation-duration: 0.1s;
    --button-base: #0c151c;
    --button-hover: #040a0f;
    --scrollbar-thumb: var(--button-hover);
    --scrollbar-thumb-hover: rgb(0, 0, 0);
    --form-placeholder: #a9a9a9;
    --form-text: #fff;
    --variable: #d941e2;
    --highlight: #efdb43;
    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
  }
}

html {
  scrollbar-color: var(--scrollbar-thumb) var(--background-body);
  scrollbar-width: thin;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.4;
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  word-wrap: break-word;
  color: var(--text-main);
  background: var(--background-body);
  text-rendering: optimizeLegibility;
}

button, input, textarea, select {
  transition: background-color var(--animation-duration) linear,
              border-color var(--animation-duration) linear,
              color var(--animation-duration) linear,
              box-shadow var(--animation-duration) linear,
              transform var(--animation-duration) ease;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 12px;
  margin-top: 24px;
  color: var(--text-bright);
}

h1 { font-size: 2.2em; margin-top: 0; }
strong, b, th { font-weight: 600; color: var(--text-bright); }

blockquote, q {
  border-left: 4px solid var(--focus);
  margin: 1.5em 0;
  padding: 0.5em 1em;
  font-style: italic;
}

mark {
  background-color: var(--highlight);
  border-radius: 2px;
  padding: 0 2px;
  color: #000;
}

button, select, input[type='submit'], input[type='reset'], input[type='button'], input[type='checkbox'], input[type='range'], input[type='radio'] {
  cursor: pointer;
}

input, select, textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  color: var(--form-text);
  background-color: var(--background);
  font-family: inherit;
  font-size: inherit;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}

[type='checkbox'], [type='radio'] {
  display: inline-block;
  width: auto;
  margin-right: 6px;
}

button, input[type='submit'], input[type='reset'], input[type='button'] {
  display: inline-block;
  width: auto;
  color: var(--form-text);
  background-color: var(--button-base);
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
}

button:hover, input[type='submit']:hover {
  background: var(--button-hover);
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

select {
  background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
  padding-right: 35px;
  -webkit-appearance: none;
}

input:focus, select:focus, textarea:focus, button:focus {
  box-shadow: 0 0 0 2px var(--focus);
}

input[type='checkbox']:active, input[type='radio']:active, button:active, input[type='submit']:active {
  transform: translateY(2px);
}

::placeholder {
  color: var(--form-placeholder);
}

a {
  text-decoration: none;
  color: var(--links);
}

a:hover {
  text-decoration: underline;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 25px 0;
}

/* Tables are beautifully styled for listings */
table {
  border-collapse: collapse;
  margin: 20px 0;
  width: 100%;
}

td, th {
  padding: 10px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

thead {
  border-bottom: 2px solid var(--border);
}

tbody tr:nth-child(even) {
  background-color: var(--background);
}

/* General Layout helpers for your dashboard buttons */
.nav-menu {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

/* Custom Status Badges to work with the layout */
.badge-active { color: #28a745; font-weight: bold; }
.badge-sick { color: #dc3545; font-weight: bold; }
.status-Deceased { background-color: #343a40; color: #ffffff; font-style: italic; }