/** https://github.com/jamesread/femtocrank **/

@layer components, karma; 

@layer components {
:root {
  --karma-good: lightgreen;
  --karma-bad: salmon;
  --karma-warning: moccasin;
  --karma-severe: lightsalmon;
  --karma-important: lightgoldenrodyellow;
  --karma-note: lightblue;
  --karma-info: #efefef;
  --karma-old: wheat;

  --karma-good-fg: mediumseagreen;
  --karma-bad-fg: rgb(206, 54, 54); /** Someone who picked the colors in the 90s chose really bad colors for red **/
  --karma-warning-fg: orange;
  --karma-severe-fg: rgb(191, 86, 86);
  --karma-important-fg: darkgoldenrod;
  --karma-note-fg: rgb(84, 144, 182);
  --karma-info-fg: darkgray;
  --karma-old-fg: darkolivegreen;

  --border-color: #d7d7d7;
  --standout-bg-color: #f8f9fa;

  --hover-background-color: #e9e9e9;
  --hover-text-color: #000;

  --header-hover-background-color:#555;
  --header-hover-text-color: #fff;

  --disabled-background-color: #e9e9e9;
  --disabled-text-color: #999;

  --text-color: rgb(51, 65, 85);
}

html, body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #dee3e7;
  color: var(--text-color);
}

a, a:visited { 
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a.active {
	text-decoration: underline;
}

ul {
	list-style: '\25b9    ';
	list-style-position: outside;
	padding-left: 1.4em;
}

main {
  margin: 0;
  padding: 1em;
  flex-grow: 1;
}

section {
  background-color: white;
  padding: 1em;
  border-radius: .4em;
  margin-bottom: 1em;
  box-shadow: 0 0 .5em #9a9a9a;

  &.transparent {
    background-color: transparent;
    box-shadow: none;
  }

  &.small {
    max-width: 320px;
    border-radius: .8em;
  } 
}

section.small form {
	grid-template-columns: 1fr;
}

section.small fieldset {
  grid-column: span 1;
}

section.with-header-and-content {
  padding: 0;
}

section .section-header {
	background-color: #f8f9fa;
	border-radius: .4em;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 1px solid var(--border-color);
	padding-left: 1em;
	padding-right: .4em;
	padding-top: .4em;
	padding-bottom: .4em;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
}

section .section-header h2 {
	margin: 0;
	padding-top: .5em;
	padding-bottom: .5em;
}

section .section-header div[role="toolbar"] {
  margin-bottom: 0;
}

section .section-header .button {
  margin-bottom: 0;
}

section .section-subheader {
    padding-left: 1em;
	padding-top: .4em;
	padding-bottom: .4em;
	border-bottom: 1px solid var(--border-color);
}

section .section-subheader h3 {
	font-weight: 600;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
}

section .section-content *:first-child {
	margin-top: 0;
}

section .section-content *:last-child {
	margin-bottom: 0;
}

.padding {
  padding: 1em;
}

header {
  background-color: #444;
  color: white;
  display: flex;
  box-shadow: 0px 0px 6px 5px #aaa;
  border-bottom: 1px solid #3f3f3f;
  align-items: center;
  gap: 1em;
  z-index: 3; /* So the header box-shadow shows over the top of the sidebar */
  min-height: 3em; /* .logo 2em + .5em padding */

  & a, & a:visited {
    color: white;
    text-decoration: none;
    cursor: pointer;
  }

  & a.active {
    text-decoration: underline;
  }

  & img.logo {
    width: 2em;
    height: 2em;
    padding: .5em;
  }

  & p {
    margin: 0;
  }

  &.fixed {
    position: fixed;
    width: 100%;
  }
}

.icon {
  font-size: 2em;
}

.logo-and-title {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  margin: 0;
  margin-right: 1em;
  font-size: 1em;
}

h2 {
  font-weight: 800;
  font-size: 1.1em;
  letter-spacing: -.025em;
  margin-bottom: -.25em;
}

h2:first-child {
  margin-top: 0;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

header nav li {
  display: inline-block;
}

header nav a {
  padding: .6em;
  border-radius: .4em;
  display: block;
}

pre {
  background-color: var(--standout-bg-color);
  border: 1px solid var(--border-color);
  padding: 1em;
  border-radius: .4em;
  overflow-x: auto;
  font-family: monospace;
  white-space: pre-wrap; /* Allows wrapping of long lines */
  text-align: left;
  margin-bottom: 0;
}

.br {
  border-radius: .4em;
}

.bs {
  box-shadow: 0 0 .5em #9a9a9a;
}

.annotation, .tag, .inline-notification {
  border-radius: .4em;
  border: 1px solid var(--border-color);
  padding: .4em;
  margin: .1em;
  margin-bottom: .4em;
  display: inline-block;
  background-color: #f8f9fa;
  color: black;
  user-select: none;
}

.annotation-key {
	border-radius: .4em 0 0 .4em;
  border-right: 1px solid var(--border-color);
  padding-right: .4em;
	display: inline-block;
	color: #666;
}

.annotation-val {
	border-radius: 0 .4em .4em 0;
	display: inline-block;
	color: black;
}

.notification {
  padding: 0.5em;
  border-radius: .4em;
  margin-bottom: 1em;
  cursor: pointer;
}

.notification a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.inline-notification {
  display: block;
}

button, .button, .button:visited {
  padding-top: .4em;
  padding-bottom: .4em;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: .4em;
  background-color: transparent;
  font-weight: bold;
  font-family: sans-serif;
  color: black;
  border: 1px solid var(--border-color);
  cursor: pointer;
  text-align: center;
  font-size: 1em;
  font-family: sans-serif;
  text-decoration: none;
}

header button:hover, header .button:hover {
  background-color: #6e6e6e;
  color: white;
}

button:hover, .button:hover {
  background-color: var(--hover-background-color);
  color: var(--hover-text-color);
}

.subtle {
  color: #999;
  font-size: .9em;
}

.stat {
  font-size: 1.4em;
  font-weight: bold;
}

form {
  display: grid;
  gap: 1em;
  grid-template-columns: minmax(0, max-content) minmax(0, 600px);
  grid-template-rows: auto;
  flex-direction: column;
  border-radius: .4em;
  align-items: baseline;
}

label, span.fake-label {
  font-weight: bold;
  cursor: pointer;
}

select {
  padding: 1em;
  border-radius: .4em;
  border: 1px solid var(--border-color);
  font-family: sans-serif;
  background-color: white;
}

textarea {
  padding: 1em;
  border-radius: .4em;
  border: 1px solid var(--border-color);
  font-family: sans-serif;
  min-height: 6em;
}

textarea[readonly] {
  background-color: var(--disabled-background-color);
  color: var(--disabled-text-color);
  font-style: italic;
}

input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"], 
input[type="url"],
input[type="datetime-local"] {
  padding: 1em;
  border-radius: .4em;
  border: 1px solid var(--border-color);
  font-family: sans-serif;
}

form input[type="checkbox"] {
  justify-self: start;
  padding: 0;
  margin: 0;
}

/**
input:invalid {
	border: 1px solid red;
	box-shadow: 0 0 5px red;
}
**/

input:disabled, input[readonly], textarea:disabled {
  cursor: not-allowed !important;
  background-color: var(--disabled-background-color);
  color: var(--disabled-text-color);
}

fieldset {
  border: 0;
  display: flex;
  flex-direction: row;
  grid-column: span 2;
  padding: 0;
  gap: 1em;
  font-family: sans-serif;
  align-items: start;
}

label:has(input[type="checkbox"]) {
  border-radius: .4em;
  margin-right: .5em;
}

label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
  align-items: center;
  gap: .5em;
  cursor: pointer;
  padding: .5em;
  user-select: none;
}

label:has(input[type="checkbox"]):hover, label:has(input[type="radio"]):hover {
  background-color: #f0f0f0;
  color: black;
}

label:has(input:checked) {
  background-color: #488448;
  color: white;
}

label:has(input:checked):hover {
  background-color: #3a6f3a;
  color: white;
}

.radio-group {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: .4em;
}

.radio-group input[type="radio"] {
  border-radius: .4em;
}

.radio-group label {
  background-color: white;
  padding: .5em;
  cursor: pointer;
  flex-grow: 1;
  text-align: center;
}

.radio-group label:hover {
  background-color: #f0f0f0;
  color: white;
}

.radio-group label:first-child {
  border-radius: .4em 0 0 .4em;
}

.radio-group label:last-child {
  border-radius: 0 .4em .4em 0;
}

.grid {
  display: grid;
  gap: 1em;
  justify-content: center;
}

.grid-display {
  display: grid;
}

.grid-boxed {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid section {
  margin-bottom: 0;
}

.gc-xl {
  grid-template-columns: repeat(auto-fit,minmax(500px,1fr));
}

.stat-display {
  border: 1px solid var(--border-color);
  background-color: var(--standout-bg-color);
  padding: 1em;
  border-radius: .4em;
  text-align: center;
}

.stat-display span.subtle {
  display: block;
}

.tac {
  text-align: center;
}

.blocktext {
  letter-spacing: 1px;
  text-transform: uppercase;
}

div[role="toolbar"] {
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: center;
  margin-bottom: 1em;
}

table {
  width: 100%;
}

table.bordered {
  border: 1px solid var(--border-color);
  border-radius: .4em;
  border-collapse: collapse;
  box-shadow: 0 .1em .1em #9a9a9a;
}

table, th, td {
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-collapse: collapse;
}

table.row-hover tr:hover td {
  background-color: beige;
  color: black;
}

td,th  {
  padding: .5em;
}

th {
  text-align: left;
}

th.small {
  width: 10%;
}

td.uneditable {
  background-color: #f0f0f0;
  font-weight: bold;
}

ul.noListStyle {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul[role="menubar"] {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul[role="menubar"] li {
  display: inline-block;
}

ul[role="menubar"] li span.submenu  {
  text-decoration: dotted underline;
}

ul[role=menubar] li div {
  position: absolute;
  display: none;
  box-shadow: 0 0 6px 0 #444;
}

ul[role=menubar] li:hover {
  background-color: beige;
}

ul[role=menubar] li span {
  cursor: pointer;
}

ul[role=menubar] li:hover div {
  display: block;
  background-color: #fff;
  min-width: 12em;
}

ul[role=menubar] li {
  border-radius: .5em;
}

header ul[role=menubar] li:hover ul {
  margin: 0;
  padding: 0;
}

ul[role=menubar] div ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul[role=menubar] div ul li {
  display: block;
  margin-right: 0;
}

ul[role=menubar] div ul a {
  text-decoration: none;
  display: block;
  padding: .2em;
}

header ul[role=menubar] div li a {
  border-radius: 0;
}

ul[role=menubar] div ul a:hover {
  background-color: beige;
}

header ul[role=menubar] div ul a:hover {
  background-color: #555;
}

header ul[role=menubar] a, header ul[role=menubar] a:visited {
  color: white;
  background-color: #444;
}

header ul[role=menubar] a:hover {
  background-color: var(--header-hover-background-color);
}

aside {
  position: fixed;
  background-color: #fff;
  box-shadow: 0 0 .5em #9a9a9a;
  transition: left .5s, visibility .5s;
  min-width: 14em;
  width: 14em;
  visibility: hidden;
  left: -14em;
  height: 100vh;
  z-index: 2; /* So the sidebar box-shadow is above the main content */
}

aside.stuck { 
  position: static;
  height: auto; /* flex element */
}

aside.shown {
  visibility: visible;
  left: 0;
}

aside a, aside a:visited {
  text-decoration: none;
  color: black;
}

aside ul {
  list-style: none;
  padding: 0;
}

aside ul li a {
  text-decoration: none;
  display: block;
  padding: .4em;
  padding: .4em .6em;
}

aside a:hover {
  background-color: #f2f2f2;
}

footer {
  text-align: center;
  padding: .5em;
}

#layout {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

#content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

footer span {
  padding: .5em 1em .5em 1em;
  border-radius: .5em;
  background-color: #c6d0d7;
  display: inline-block;
  margin-right: 1em;
}

.a11yhidden {
  position: absolute;
  left: -500px;
}

.a11yhidden:focus {
  left: 1em;
  background-color: black;
  border: 2px solid #555;
  border-radius: .5em;
  padding: .5em;
  color: white;
}

#sidebar-button {
  width: 14em;
  cursor: pointer;
  border-right: 1px solid #333;
  display: flex;
  flex-direction: row;
}

#sidebar-button:hover {
  background-color: var(--header-hover-background-color);
  color: var(--header-hover-text-color);
}

#sidebar-button .menu-icon {
  padding: .5em;
}

#sidebar-button .logo-and-title {
  flex-grow: 1;
}

dialog {
  border-radius: .4em;
  padding: 1em;
  max-width: 600px;
  margin: auto;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.vh {
  visibility: hidden;
}

.script-button {
  padding: .5em;
  cursor: pointer;
}

.fs2 {
  font-size: 2em;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.fg0 {
  flex-grow: 0;
}

.fg1 {
  flex-grow: 1;
}

.g1 {
  gap: 1em;
}

.g2 {
  gap: 2em;
}

.flex-spacer {
  flex-grow: 1;
}

dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0;
}

dt:after {
	content: ':';
}

dt {
	font-weight: bold;
	border-right: 1px solid var(--border-color);
	text-align: right;
	padding: 0.6em;
}

dd {
	margin-left: 0;
	padding: 0.6em;
	word-break: break-word;
}

a svg, button svg, h2 svg {
	vertical-align: bottom;
}

@media (max-width: 600px) {
  header {
    gap: .5em;
  }

  header h1 {
  font-size: 1.2em;
  }

  header p {
  font-size: .8em;
  }

  header nav ul li {
  display: block;
  margin-right: 0;
  }

  main {
    padding: 0;
  }

  section {
	margin: 0;
	margin-top: 1em;
	border-radius: 0;
	padding: .75em;
  }

  .hide-small {
	display: none;
  }

  form {
	grid-template-columns: 1fr;
  }

  fieldset {
    grid-column: span 1;
  }

  aside.stuck {
    position: absolute;
	width: 100%;
  }

  dl {
    display: grid;
	grid-template-columns: 1fr;
  }

  dt {
	text-align: left;
	padding: 0;
	border-right: none;
  }

  dd {
	padding-left: 0;
	margin-bottom: .8em;
  }
}
}

@layer karma {
  .critical, .error, .bad {
    color: black;
    background-color: var(--karma-bad);
  }

  .warning {
    color: black;
    background-color: var(--karma-warning);
  }

  .severe {
    color: black;
    background-color: var(--karma-severe);
  }

  .important {
    color: black;
    background-color: var(--karma-important);
  }

  .note {
    color: black;
    background-color: var(--karma-note);
  }

  .info {
    color: black;
    background-color: var(--karma-info);
  }

  .success, .good {
    background-color: var(--karma-good);
    color: black;
  }

  .old {
    background-color: var(--karma-old);
  }

  .fg-critical, .fg-bad {
    color: var(--karma-bad-fg);
    font-weight: 500;;
  }

  .fg-warning {
    color: var(--karma-warning-fg);
    font-weight: 500;;
  }

  .fg-severe {
    color: var(--karma-severe-fg);
    font-weight: 500;;
  }

  .fg-important {
    color: var(--karma-important-fg);
    font-weight: 500;;
  }

  .fg-note {
    color: var(--karma-note-fg);
    font-weight: 500;;
  }

  .fg-info {
    color: var(--karma-info-fg);
    font-weight: 500;;
  }

  .fg-good, .fg-success {
    color: var(--karma-good-fg);
    font-weight: 500;;
  }

  .fg-old {
    color: var(--karma-old-fg);
  }

  button[type="submit"], button.good, .button.good {
    background-color: #488448;
    color: white;
    border: 0;
  }

  button[type="submit"]:hover, button.good:hover, .button.good:hover {
    background-color: #3a6f3a;
  }

  button:disabled, .button:disabled {
    background-color: #6e6e6e;
    color: #999;
    cursor: not-allowed;
  }

  button:disabled:hover, .button:disabled:hover {
    background-color: #6e6e6e;
  }

  button[type="reset"], button.bad, .button.bad {
    background-color: #d9534f;
    color: white;
    border: 0;
  }

  button[type="reset"]:hover, button.bad:hover, .button.bad:hover {
    background-color: #c9302c;
  }

  button[type="cancel"], button.warning, .button.warning {
    background-color: #c7872c;
    color: white;
    border: 0;
  }

  button[type="cancel"]:hover, button.warning:hover, .button.warning:hover {
    background-color: #b77a2c;
  }

}