/*
 Combined Application CSS - Merging simple.css with application theming

 This started out with https://simplecss.org/ but slightly modified to make
 it easier to theme and adding some more useful classes. Feel free to modify
 this then minify it like this:

    make minify
*/

/* Core theme tokens */
:root {
  /* Base HSL values - adjust these to theme the entire application */
  --primary-hue: 210;
  --success-hue: 150;
  --warning-hue: 45;
  --danger-hue: 355;
  --neutral-hue: 220;

  /* Transition */
  --tranistion-base: "ease-out";

  /* Layout */
  --content-width: 85rem;
  --content-padding: 2rem;
  --standard-border-radius: 5px;

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* Breakpoints */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Typography */
  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, "Noto Sans",
    "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  /* Spacing scale (0.25rem = 4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Default light theme */
  --bg-hsl: var(--neutral-hue) 20% 98%;
  --surface-hsl: var(--neutral-hue) 15% 95%;
  --text-hsl: var(--neutral-hue) 15% 15%;
  --text-secondary-hsl: var(--neutral-hue) 10% 40%;
  --border-hsl: var(--neutral-hue) 10% 90%;

  /* Semantic colors */
  --bg: hsl(var(--bg-hsl));
  --surface: hsl(var(--surface-hsl));
  --text: hsl(var(--text-hsl));
  --text-secondary: hsl(var(--text-secondary-hsl));
  --text-primary: hsl(var(--primary-hue) 100% 95%);
  --border: hsl(var(--border-hsl));

  --primary: hsl(var(--primary-hue) 85% 50%);
  --primary-hover: hsl(var(--primary-hue) 85% 40%);
  --success: hsl(var(--success-hue) 70% 45%);
  --warning: hsl(var(--warning-hue) 95% 50%);
  --danger: hsl(var(--danger-hue) 70% 50%);
  --neutral: hsl(var(--neutral-hue) 15% 15%);

  /* Component specific */
  --accent: var(--primary);
  --accent-bg: var(--surface);
  --accent-hover: var(--primary-hover);
  --accent-text: var(--bg);
  --code: hsl(var(--danger-hue) 85% 45%);
  --marked: hsl(var(--warning-hue) 90% 60%);
}

/* Dark theme */
[data-theme="dark"] {
  --bg-hsl: var(--neutral-hue) 15% 12%;
  --surface-hsl: var(--neutral-hue) 10% 18%;
  --text-hsl: var(--neutral-hue) 10% 95%;
  --text-secondary-hsl: var(--neutral-hue) 5% 70%;
  --border-hsl: var(--neutral-hue) 10% 25%;
}

/* High Contrast theme example */
[data-theme="high-contrast"] {
  --bg-hsl: var(--neutral-hue) 100% 100%;
  --surface-hsl: var(--neutral-hue) 15% 95%;
  --text-hsl: var(--neutral-hue) 100% 0%;
  --text-secondary-hsl: var(--neutral-hue) 100% 20%;
  --border-hsl: var(--neutral-hue) 100% 40%;
  --primary-hue: 240;
  --success-hue: 120;
  --warning-hue: 30;
  --danger-hue: 0;
}

/* Sepia theme example */
[data-theme="sepia"] {
  --neutral-hue: 35;
  --bg-hsl: var(--neutral-hue) 30% 96%;
  --surface-hsl: var(--neutral-hue) 25% 90%;
  --text-hsl: var(--neutral-hue) 50% 20%;
  --text-secondary-hsl: var(--neutral-hue) 30% 40%;
  --border-hsl: var(--neutral-hue) 30% 80%;
  --primary-hue: 35;
}

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

/* Reset default appearance */
textarea,
select,
input,
progress {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

html {
  /* Set the font globally */
  font-family: var(--sans-font);
  scroll-behavior: smooth;
}

body {
  color: var(--text);
  background-color: var(--bg);
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0;
  padding: 0 var(--content-padding);
}

/* Layout Classes */
.layout-narrow {
  max-width: calc(var(--content-width) * 0.7);
  margin: 0 auto;
}

.layout-wide {
  max-width: var(--content-width);
  margin: 0 auto;
}

.layout-full {
  max-width: none;
  margin: 0;
}

/* Automatic Grid/Flex Container */
/* Any direct children of elements with these classes will be arranged in a grid/flex */
.auto-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.auto-flex {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.auto-flex > * {
  flex: 1 1 20rem;
}

.flex {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Basic Elements */
a,
a:visited {
  color: var(--accent);
}

a:hover {
  text-decoration: none;
}

/* Typography */
h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.6rem;
  margin-top: 3rem;
}

h3 {
  font-size: 2rem;
  margin-top: 3rem;
}

h4 {
  font-size: 1.44rem;
}

h5 {
  font-size: 1.15rem;
}

h6 {
  font-size: 0.96rem;
}

p {
  margin: 1.5rem 0;
}

/* Components */
article,
fieldset,
aside,
details,
dialog {
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--standard-border-radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Natural side-by-side articles */
article + article {
  margin-top: 0;
}

@media (min-width: 768px) {
  article:not(:only-of-type) {
    flex: 1;
  }

  article + article {
    margin-left: var(--space-4);
  }
}
article h2:first-child,
section h2:first-child,
article h3:first-child,
section h3:first-child {
  margin-top: 1rem;
}
section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 3rem 0;
  padding: 2rem 1rem;
}
section + section,
section:first-child {
  border-top: 0;
  padding-top: 0;
}
section + section {
  margin-top: 0;
}
section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
details {
  padding: 0.7rem 1rem;
}
summary {
  cursor: pointer;
  word-break: break-all;
  margin: -0.7rem -1rem;
  padding: 0.7rem 1rem;
  font-weight: 700;
}
details[open] > summary + * {
  margin-top: 0;
}
details[open] > summary {
  margin-bottom: 0.5rem;
}
details[open] > :last-child {
  margin-bottom: 0;
}
table {
  border-collapse: collapse;
  margin: 1.5rem 0;
}
figure > table {
  width: max-content;
  margin: 0;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
}

td,
th {
  border: 1px solid var(--border);
  padding: var(--space-2);
  text-align: left;
}

th {
  background-color: var(--accent-bg);
  font-weight: bold;
}

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

/* Code */
code,
pre,
kbd,
samp {
  font-family: var(--mono-font);
  color: var(--code);
}

pre {
  background-color: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: var(--standard-border-radius);
  padding: var(--space-4);
  overflow-x: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    font-size: 1rem;
    padding: 0 var(--space-4);
  }

  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2.1rem;
  }
  h3 {
    font-size: 1.75rem;
  }

  .auto-flex > * {
    flex: 1 1 100%;
  }

  article + article {
    margin-left: 0;
    margin-top: var(--space-4);
  }
}

hr {
  border: none;
  height: 1px;
  background: var(--border);
}

blockquote {
  margin-inline-start: var(--space-8);
  margin-inline-end: 0;
  margin-block: var(--space-8);
  padding: var(--space-2) var(--space-3);
  border-inline-start: var(--space-1) solid var(--accent);
  color: var(--text-light);
  font-style: italic;
}

/* Form Elements */
button,
.btn,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  --btn-bg: var(--surface);
  --btn-text: var(--text);
  --btn-radius: var(--radius-md);
  --btn-padding: var(--space-2) var(--space-4);
  --btn-font: var(--text-md);
  --btn-shadow: var(--shadow-sm);

  /* Base styles */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--btn-padding);
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font);
  font-weight: var(--weight-medium);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: filter var(--transition-base);

  &:hover {
    filter: brightness(0.9);
    &:active {
      filter: brightness(0.6);
    }
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &.btn-sm {
    --btn-padding: var(--space-1) var(--space-2);
  }

  &.btn-lg {
    --btn-padding: var(--space-3) var(--space-6);
    --btn-font: var(--text-lg);
  }

  &.btn-primary {
    --btn-bg: var(--primary);
    --btn-text: var(--text-primary);
    border: None;
  }

  &.btn-outline {
    --border: var(--primary);
    --btn-text: var(--primary);
    --btn-bg: var(--background);
  }

  &.btn-success {
    --btn-bg: var(--success);
  }
  &.btn-warning {
    --btn-bg: var(--warning);
  }
  &.btn-danger {
    --btn-bg: var(--danger);
  }
}

input,
select,
textarea {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--standard-border-radius);
  color: var(--text);
  padding: var(--space-2);
  font-size: inherit;
  font-family: inherit;
}

/* Validation - this will highlight the input after a user interacts with it */
input:user-valid,
select:user-valid,
textarea:user-valid {
  outline: 1px solid var(--success);
}
input:user-invalid {
  outline: 1px solid var(--danger);
}

/* Help text */
label {
  display: block;
}

.help,
input + p,
input + div + p, /* password managers insert a div */
select + p,
label + p,
textarea + p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

textarea:not([cols]) {
  width: 100%;
}

/* Add arrow to drop-down */
select:not([multiple]) {
  background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
    linear-gradient(135deg, var(--text) 51%, transparent 49%);
  background-position: calc(100% - 15px), calc(100% - 10px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 25px;
}
*[dir="rtl"] select:not([multiple]) {
  background-position: 10px, 15px;
}

/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
  position: relative;
  width: min-content;
}

input[type="checkbox"]:valid,
input[type="radio"] {
  vertical-align: middle;
  position: relative;
  width: min-content;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-block;
}

input[type="radio"] {
  border-radius: 100%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--accent);
}

input[type="checkbox"]:checked::after {
  /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
  content: " ";
  width: 0.18em;
  height: 0.32em;
  border-radius: 0;
  position: absolute;
  top: 0.05em;
  left: 0.17em;
  background-color: transparent;
  border-right: solid var(--surface) 0.08em;
  border-bottom: solid var(--surface) 0.08em;
  font-size: 1.8em;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  /* creates a colored circle for the checked radio button  */
  content: " ";
  width: 0.25em;
  height: 0.25em;
  border-radius: 100%;
  position: absolute;
  top: 0.125em;
  background-color: var(--surface);
  left: 0.125em;
  font-size: 32px;
}

/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
abbr[title] {
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

/* Makes input fields wider on smaller screens */
@media only screen and (max-width: 720px) {
  textarea,
  select,
  input {
    width: 100%;
  }
}

/* Set a height for color input */
input[type="color"] {
  height: 2.5rem;
  padding: 0.2rem;
}

/* do not show border around file selector button */
input[type="file"] {
  border: 0;
}

/* Utility Classes */
.text-primary {
  color: var(--primary);
}
.text-success {
  color: var(--success);
}
.text-warning {
  color: var(--warning);
}
.text-danger {
  color: var(--danger);
}
.text-secondary {
  color: var(--text-secondary);
}

.bg-primary {
  background-color: var(--primary);
  color: var(--accent-text);
}
.bg-success {
  background-color: var(--success);
  color: var(--accent-text);
}
.bg-warning {
  background-color: var(--warning);
  color: var(--accent-text);
}
.bg-danger {
  background-color: var(--danger);
  color: var(--accent-text);
}
