/* vim: set fileencoding=utf-8 */
/* Copyright ⓒ 2025 Michael Scheper, for Psyclopedia */

/*** sitewide ***/

[x-cloak] {
  /* For AlpineJS */
  display: none !important;
}

/** colours **/

:root {
  --body-link: #44296f;
  --body-text: #27556e;
  --body-background-color: cyan;
  --background-image-url: url('background_lores.jpeg');

  --info-text: var(--body-text);
  --info-background: #a8cbcccc;
  --info-border: #5a8c9d;

  --success-text: white;
  --success-background: #8f9f5a;
  --success-border: green;

  --warning-text: yellow;
  --warning-background: black;
  --warning-border: orange;

  --error-text: #a05b8d;
  --error-background: #e4d3eb;
  --error-border: #c6463d;

  --dropdown-background: white;
  --dropdown-border: #5a8c9d;

  --h1: #696960;
  --h2: #148e96;

  --scrollbar-color: #3cbcc4;
  --box-shadow-color: #51535a;

  --psyclocontent-text: black;
  --psyclocontent-link: #6d5b9e;
  --psyclocontent-border: #27556e;

  --hover-border: rgba(154, 99, 97, 1.0);
  --hover-background: rgba(154, 99, 97, 0.5);
  --hover-background-2: rgba(154, 99, 97, 0.2);
  --navbar-current: white;

  --panel-background: #ede4d4;
  --panel-background-66: #ede4d466;
  --panel-background-dd: #ede4d4dd;
  --panel-background-highlight: #fff5e3;

  --widget: #a49b8e;
  --widget-cc: #a49b8ecc;
  --widget-color: var(--h1);
  --widget-background: white;
  --widget-border: #a49b8e;
  --widget-shadow: #a49b8e;
  --widget-shadow-33: #a49b8e33;
  --widget-translucent: #00000080;
  --button-border: var(--widget-border);
  --button-active-background: #3cbcc444;
  --button-hover-background: #8f9f5aff;
  --button-pressed: var(--widget-background);
  --button-pressed-background: #8f9f5acc;
  --tab-hack: #ede5d4;
  --autocomplete-background: #fffaf2;

  --form-help-text: var(--widget);
  --form-error-text: var(--widget);
  --crossed-off: var(--error-border);
}



@font-face {
  font-family: 'MysteryQuest';
  src: url('mystery-quest.regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
  box-sizing: border-box;
  height: 100vh;
}
@supports (height: 100dvh) {
  html {
    height: 100dvh;
  }
}



body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  font-family: sans-serif;
  font-size: 1rem;
  color: var(--body-text);
  background-color: var(--body-background-color);
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)),
              var(--background-image-url);
  animation: colorRotate 30s linear infinite;
}
@keyframes colorRotate {
  0% {background-color: #44296f;}
  40% {background-color: #8f9f5a;}
  55% {background-color: #6d5b9e;}
  80% {background-color: #3cbcc4;}
  100% {background-color: #44296f;}
  100% {
    background-image: filter(url('background_lores.png'), hue-rotate(360deg));
  }
}

a {
  text-decoration: none;
}

a:link,
a:visited,
.psyclolinkbutton {
  color: var(--body-link);	/* overridden in #psyclocontent */
}
a:hover,
.psyclolinkbutton:hover {
  text-decoration: underline dotted;
}
a:active,
.psyclolinkbutton:active {
  color: var(--h1);
}


h1, h2 {
  font-family: 'MysteryQuest', serif;
  font-weight: normal;
  color: var(--panel-background);
}
h1:first-child, h2:first-child {
  margin-top: 0;
}
h1, h2, h3, h4, h5 {
  margin-bottom: 0.5ex;
}
h1 + ul,
h1 + ol,
h2 + ul,
h2 + ol,
h3 + ul,
h3 + ol,
h4 + ul,
h4 + ol,
h5 + ul,
h5 + ol {
  margin-top: 0;
}


figure {
  margin: 0;
}


/*** layout ***/

/** header **/

header {
  flex: 0 2;
  display: flex;
  align-items: center;
  margin: 0.5rem;
}
header .logo {
  flex: 0 0;
  margin-right: 1rem;
}
header .logo img {
  vertical-align: middle;
}


/** psyclomessages **/

ul.psyclomessages {
  margin: 0;
  padding: 0;

  li {
    display: block;
    list-style-type: none;
    color: var(--info-text);
    border-radius: 0.5rem;
    border: 2px solid var(--info-border);
    background: var(--info-background);
    margin: 0.5rem;
    padding: 0.25rem 0.5rem;

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

    &.success {
      color: var(--success-text);
      border-color: var(--success-border);
      background: var(--success-background);
    }

    &.warning {
      color: var(--warning-text);
      border-color: var(--warning-border);
      background: var(--warning-background);
    }

    &.error {
      color: var(--error-text);
      border-color: var(--error-border);
      background: var(--error-background);
    }
  }
}

/** content **/

#psyclocontent {
  flex: 1 5;
  overflow: auto;
  margin: 0 0.5rem;
  border: 0.25rem solid var(--psyclocontent-border);
  border-radius: 0.5rem;
  padding: 1rem;
  color: var(--psyclocontent-text);
  background: var(--panel-background-dd);
  scrollbar-color: var(--scrollbar-color) transparent;

  > p:first-child {
    margin-block-start: 0;
  }

  h1 {
    color: var(--h1);
  }
  h2 {
    color: var(--h2);
  }

  dt {
    color: var(--h1);
    font-weight: 500;
  }

  a:link,
  a:visited,
  .psyclolinkbutton {
    color: var(--psyclocontent-link);
  }
  a:hover,
  .psyclolinkbutton:hover {
    text-decoration: underline dotted var(--psyclocontent-text);
  }
}


/** footer **/

footer {
  flex: 0 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--info-border);
  border-radius: 0.5rem;
  background: var(--info-background);
  margin: 0.5rem;
  padding: calc(0.25rem - 2px) 0.5rem 0.25rem;

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

    li {
      display: inline;

      &:not(:first-child)::before {
        content: "|\00a0";
      }
    }
  }
}



/*** tabs ***/

.psyclotab-container > [role="tablist"] > [role="tab"] {
  color: var(--panel-background-dd);
  background: var(--widget-translucent);
  border: 1px solid var(--widget-border);
  border-radius: 0.2em 0.2em 0 0;
}

.psyclotab-container > [role="tablist"] > [role="tab"]:focus {
  color: var(--panel-background);
  border: 1px dotted var(--widget-border);
}

.psyclotab-container > [role="tablist"] > [role="tab"]:hover::before,
.psyclotab-container > [role="tablist"] > [role="tab"]:focus::before,
.psyclotab-container > [role="tablist"] > [role="tab"][aria-selected="true"]::before {
  border-top: 0.1ex solid var(--button-pressed-background);
}

.psyclotab-container > [role="tablist"] > [role="tab"][aria-selected="true"] {
  color: var(--widget-color);
  background: var(--panel-background-dd);
}
.psyclotab-container > [role="tablist"] > [role="tab"][aria-selected="true"]:focus {
  background: var(--panel-background);
}

.psyclotab-container > [role="tablist"] > [role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before {
  border-top: 5px solid var(--widget-border);
}

.psyclotab-container > [role="tablist"] > [role="tab"][aria-selected="true"]::after {
  /* hack because background alphas are doubling up */
  background: var(--tab-hack);
}

.psyclotab-container > [role="tablist"] > [role="tab"]:hover::before,
.psyclotab-container > [role="tablist"] > [role="tab"]:focus::before {
  border-color: var(--h1);
}

.psyclotab-container > [role="tabpanel"] {
  background: var(--panel-background-dd);
  border-color: var(--widget-border);
  box-shadow: 0.25ex 0.25ex 0.4ex var(--box-shadow-color);
}

.psyclotab-container > [role="tabpanel"]:focus {
  border-color: var(--h1);
  box-shadow: 0.25ex 0.25ex 0.4ex var(--box-shadow-color);
}

.psyclotab-container > [role="tabpanel"]:focus::after {
  border-bottom: 3px solid var(--h1);
}


/** tabs as main content **/

#psyclocontent:has(> .psyclotab-container) {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#psyclocontent:has(> .psyclotab-container) > * {
  flex: 0 0 auto;
}

#psyclocontent:has(> .psycloform) > h1,
#psyclocontent:has(> .psyclotab-container) > h1 {
  margin-bottom: 0.5rem;
}

.h-container {
  max-height: 15%;
  overflow: hidden auto;
  h1, h2 {
    margin-bottom: 0.2ex;
  }
}

#psyclocontent > .psyclotab-container  {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

#psyclocontent:has(> .psyclotab-container) > .psyclotab-container > [role="tablist"]  {
  flex: 0 0;
}

#psyclocontent:has(> .psyclotab-container) > .psyclotab-container > [role="tabpanel"]  {
  flex: 1 1;
  overflow: auto;
}

#psyclocontent:has(> .psyclotab-container) > .psyclotab-container > [role="tabpanel"] img {
  max-width: 100%;
}


/*** buttons ***/

input[type="submit"],
button:not([role="tab"]):not(.psyclolinkbutton),
:not(img)[role="button"] {
  display: inline-block;
  position: relative;
  padding: 0.4em 0.7em;
  border: 1px solid var(--button-border);
  border-radius: 0.2em;
  box-shadow: 0.2ex 0.2ex 0.1ex var(--box-shadow-color);
  color: var(--widget-color);
  background: var(--panel-background-dd);
  font-weight: bold;
}

button[disabled]:not([role="tab"]):not(.psyclolinkbutton),
:not(img)[role="button"][disabled] {
  color: var(--widget);
  opacity: 0.4;
}

input[type="submit"]:hover,
button:not([role="tab"]):not([disabled]):not(.psyclolinkbutton):hover,
:not(img)[role="button"]:not([disabled]):hover {
  background: var(--button-hover-background);
  cursor: default;
}

input[type="submit"]:focus,
button:not([role="tab"]):not(.psyclolinkbutton):focus,
:not(img)[role="button"]:focus {
  outline: none;
}

input[type="submit"]:focus::before,
button:not([role="tab"]):not(.psyclolinkbutton):focus::before,
:not(img)[role="button"]:focus::before {
  position: absolute;

  /* button border width - outline width - offset */
  top: calc(-1px - 2px - 3px);
  right: calc(-1px - 2px - 3px);
  bottom: calc(-1px - 2px - 3px);
  left: calc(-1px - 2px - 3px);
  border: 1px dotted var(--psyclocontent-text);

  /* button border radius + outline width + offset */
  border-radius: calc(1px + 2px + 3px);
  content: "";
}

input[type="submit"]:active,
button:not([role="tab"]):not(.psyclolinkbutton):active,
:not(img)[role="button"]:active {
  color: var(--widget-cc);
  text-shadow: 0 -1px 1px var(--widget-shadow-33);
  background-color: var(--button-active-background);
  box-shadow: 0.1ex 0.1ex 0.2ex 0.3ex var(--box-shadow-color);
}

button:not([role="tab"]):not(.psyclolinkbutton)[aria-pressed="true"],
:not(img)[role="button"][aria-pressed="true"] {
  color: var(--button-pressed);
  box-shadow: -0.1ex -0.1ex 0.2ex 0.1ex var(--box-shadow-color);
  background-color: var(--button-pressed-background);
}

button:not([role="tab"]):not(.psyclolinkbutton)[aria-pressed="true"]:active,
:not(img)[role="button"][aria-pressed="true"]:active {
  text-shadow: 0 -1px 1px var(--psyclocontent-border);
  background-color: var(--button-active-background);
}

button:not([role="tab"]):not(.psyclolinkbutton)[aria-pressed="true"]:hover,
:not(img)[role="button"][aria-pressed]:hover {
  border-color: var(--widget-color);
  background-color: var(--button-hover-background-cc);
}

.button-bar > :not(:first-child) {
  margin-left: 1ex;
}


/*** forms ***/

form.psycloform.selfcontained {
  background: var(--panel-background-dd);
  padding: 1ex 0.5em;
  border: 1px solid var(--widget-border);
  border-radius: 0.2em 0.2em 0 0;
  box-shadow: 0.25ex 0.25ex 0.4ex var(--box-shadow-color);
  max-width: 40em;
}

form.psycloform table {
  width: calc(100% - 1em);
}

form.psycloform table {
  border-spacing: 0 0.5ex;
}

form.psycloform input[type="text"],
form.psycloform input[type="url"],
form.psycloform input[type="email"],
form.psycloform .phac_aspc_form_autocomplete_focus_ring,
form.psycloform textarea {
  width: 100%;
}

form.psycloform textarea,
form.psycloform select,
form.psycloform input[type="text"],
form.psycloform input[type="number"],
form.psycloform input[type="date"],
form.psycloform input[type="time"],
form.psycloform input[type="time-local"],
form.psycloform input[type="datetime"],
form.psycloform input[type="datetime-local"],
form.psycloform input[type="email"],
form.psycloform input[type="password"],
form.psycloform input[type="url"],
.phac_aspc_form_autocomplete_focus_ring > div,
.phac_aspc_form_autocomplete_focus_ring.active > div,
form.psycloform trix-editor {
  background: var(--autocomplete-background);
  border: 1px inset var(--widget-border);
  border: border-radius: 0;
}
form.psycloform trix-editor {
  color: var(--psyclocontent-text);
}

form.psycloform table th {
  color: var(--h1);
  font-weight: 500;
  vertical-align: baseline;
  text-align: end;
  white-space: nowrap;
  width: 0; /* Makes as narrow as possible */
}

form.psycloform table td span.helptext {
  display: block;
  color: var(--form-help-text);
  font-size: 75%;
  font-style: italic;
  vertical-align: baseline;
  padding-top: 0.25ex;
  /*text-align: end;*/
}

form.psycloform table td br {
  display: none;
}

form.psycloform table td ul.errorlist {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

form.psycloform table td ul.errorlist li {
  color: var(--form-error-text);
}

form.psycloform table tr.button-row td {
  display: flex;
  padding-top: 1ex;
}

/** django-trix-editor **/

form.psycloform trix-editor {
  background: var(--autocomplete-background) !important;
  border: 1px inset var(--widget-border);
  border: border-radius: 0;
}

/** django-htmx-autocomplete **/

.phac_aspc_form_autocomplete_focus_ring > div,
.phac_aspc_form_autocomplete_focus_ring.active > div {
  background: var(--autocomplete-background) !important;
  min-height: inherit;
}
.phac_aspc_form_autocomplete_focus_ring {
  padding: 0 !important;
  border: 2px solid transparent;
  border-radius: 0.25em !important;
  position: relative;
  left: -2px;
}
.phac_aspc_form_autocomplete {
  padding: 0 0.1em !important;
  border-radius: 0 !important;
  width: calc(100% - 5px) !important; /* Don't know why */
}
.phac_aspc_form_autocomplete ul.ac_container input.textinput,
.phac_aspc_form_autocomplete ul.ac_container li.chip {
  line-height: 1.5ex !important;
  margin: 0.25ex 0 0 0.25ex !important;
}
.phac_aspc_form_autocomplete ul.ac_container li.chip {
  font-size: 83%;
}
.phac_aspc_form_autocomplete ul.ac_container li.chip a {
  top: 10ex !important;
}
.phac_aspc_form_autocomplete ul.ac_container li input.textinput {
  height: inherit !important;
  font-size: 1.5ex !important;
}
.phac_aspc_form_autocomplete .results {
  padding: 0.5ex 0 !important;
  font-size: 1.5ex !important;
}


/*** tables ***/

table.psyclotable > th,
table.psyclotable > * > th {
  color: var(--panel-background-dd);
  background: var(--h1);
  font-weight: 500;
}


/*** psyclostatuses ***/

[x-psyclostatus="new"],
[x-psyclostatus="submitted"] {
  opacity: 25%;
}

[x-psyclostatus="pending-review"] {
  opacity: 40%;
  font-style: italic;
}

[x-psyclostatus="unconfirmed"] {
  font-style: italic;
}

[x-psyclostatus="denied"] {
  text-decoration: line-through var(--h1);
}

[x-psyclostatus="cancelled"] {
  text-decoration: line-through var(--crossed-off);
}

[x-psyclostatus="hidden"] {
  opacity: 40%;
}

[x-psyclostatus="hidden"] {
  text-decoration: line-through;
}



/*** popups ***/

/* Positioning, etc. managed by AlphineJS Anchor plugin in psyclopopup.py */
.psyclopopup-container {
  background: var(--panel-background);
  border: 0.25rem solid var(--dropdown-border);
  border-radius: 0.5rem;
  box-shadow: 0.25ex 0.25ex 0.4ex var(--box-shadow-color);
  margin: 0.5rem;
  padding: 1rem;
}


/*** utility classes ***/

img.inline-icon {
  height: 1em;
  object-fit: contain;
  vertical-align: text-bottom;
}

.psyclocentre {
  margin: auto;
}

.nobr {
  white-space: nowrap;
}

/* Highlight parts of strings (search results, etc.) */
.highlight {
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: var(--h2);
}

/* Apply to buttons to make them look like links */
.psyclolinkbutton {
  background: none!important;
  border: none;
  padding: 0!important;
  font-family: sans-serif;
  font-size: 1em;
  cursor: pointer;
}

/* Nicer <dl>s */
dl.psyclogrid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  row-gap: 1.5ex;
}
dl.psyclogrid > dt {
  white-space: nowrap;
  grid-column-start: 1;
  grid-column-end: 1;
  justify-self: end;
}
dl.psyclogrid > dt:has(+ dd)::after {
  content: ":";
}
dl.psyclogrid > dd {
  grid-column-start: 2;
  grid-column-end: 2;
  margin-inline-start: 1ex;
  overflow: hidden;
}

dl ul {
  margin: 0;
  padding-inline-start: 1em;
}

dl ul:has(li:only-child) {
  padding-inline-start: 0;
}

dl ul li:only-child {
  list-style-type: none;
}