:root {
  --ARCHIUM_COLOR_thorax_identity: #fed865;
  --ARCHIUM_COLOR_thorax_contents: #fff2cb;
  --ARCHIUM_COLOR_thorax_archival: #fff2cb;
  --ARCHIUM_COLOR_thorax_condition: #e2efd9;
  --ARCHIUM_COLOR_thorax_publication: #fce4d5;
  --ARCHIUM_COLOR_thorax_system: #d8d8d8;
  --ARCHIUM_COLOR_thorax_attachment: #d8e1f2;
  --ARCHIUM_COLOR_thorax_toolbar: hwb(128 70% 1%);
  --ARCHIUM_COLOR_thorax_titleimg: var(--ARCHIUM_COLOR_thorax_attachment);

  cursor: default;
}

/* ===================================================== */
/* ArTUX Dataset                                         */
/* ===================================================== */

#contentwrapper:has(.archium-background-Objekt) {
  max-width: 100%;
}

.archium-background-Objekt {
  border-radius: 0px;
  /*border: solid 2px black;*/
  background: #fff;
  width: 100%;
  min-width: min-content;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: 
  "toolbar toolbar toolbar toolbar toolbar" 
  "queue      queue      queue      queue      queue" 
  "identity   identity   identity   titleimg   titleimg" 
  "contents contents contents contents contents" 
  "condition  condition  condition  condition  condition" 
  "archival   archival   publication   publication   publication" 
  "attachment attachment attachment system system";
}

/* Hides empty lines */
div:has(.archium-background-Objekt) > p,
.archium-background-Objekt > p {
  display: none;
}

/* Define a basic container class */
.archium-grid-container-base {
  display: grid;
  padding: 32px;
  margin: 5px;
  column-gap: 35px;
  row-gap: 10px;

  border: solid 2px black;

  h3 {
    font-size: 1.4rem;
    font-weight: bold;
    grid-column: 1 / span 2;
    grid-row: 1/1;
  }

  grid-template-columns: auto 1fr;

  span.ftitle {
    grid-column: 1;
  }

  span:not(.ftitle),
  p {
    grid-column: 2;
  }

  span:not(.ftitle) > textarea {
    width: 100% !important;
  }

  pre {
    display: contents;
  }

  p {
    margin: 0;
  }
}

.archium-sub-grid {
  display: grid;
  column-gap: 35px;
  row-gap: 10px;
  max-width: 100%;

  grid-template-columns: auto 1fr;

  p {
    display: contents;
  }

  span.ftitle {
    grid-column: 1;
  }

  span:not(.ftitle),
  p {
    grid-column: 2;
  }
}

.multipleTemplateWrapper {
  display: inline;
}

.archium-grid-container-identity {
  grid-area: identity;
  background-color: var(--ARCHIUM_COLOR_thorax_identity);
}

.archium-grid-container-titleimg {
  grid-area: titleimg;
  background-color: var(--ARCHIUM_COLOR_thorax_attachment);
}

.archium-grid-container-contents {
  grid-area: contents;
  background-color: var(--ARCHIUM_COLOR_thorax_contents);
}

.archium-grid-container-archival {
  grid-area: archival;
  background-color: var(--ARCHIUM_COLOR_thorax_archival);
}

.archium-grid-container-condition {
  grid-area: condition;
  background-color: var(--ARCHIUM_COLOR_thorax_condition);
}

.archium-grid-container-publication {
  grid-area: publication;
  background-color: var(--ARCHIUM_COLOR_thorax_publication);
}

.archium-grid-container-attachment {
  grid-area: attachment;
  background-color: var(--ARCHIUM_COLOR_thorax_attachment);
}

.archium-grid-container-system {
  grid-area: system;
  background-color: var(--ARCHIUM_COLOR_thorax_system);
}

/**
 * Form specific rules 
 **/

.archium-background-Objekt {
  input,
  textarea,
  .oo-ui-buttonElement-button,
  select {
    border: solid 1px black !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: white !important;
    color: black !important;
  }

  input,
  select,
  .oo-ui-buttonElement-button {
    height: calc(1.5em + 0.75rem + 2px);
  }

  .fconst {
    display: inline-block;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 6px 12px;

    background: hsla(0, 0%, 95%, 1);
    color: hsla(0, 0%, 20%, 1);
    font-style: italic;

    align-content: center;
    text-align: center;
  }

  option {
    border-radius: 0 !important;
  }
}

.multipleTemplateInstance.multipleTemplate {
  border-radius: 0;
  background: #ffffff38;
}

input,
span.oo-ui-buttonWidget a {
  border-radius: 0 !important;
}

.archium-form .archium-grid-container-identity {
  .oo-ui-comboBoxInputWidget,
  .oo-ui-comboBoxInputWidget-field,
  input {
    width: 100% !important;
    max-width: 100%;
    display: flex;
  }
}

.archium-form .archium-grid-container-titleimg {
  grid-template-rows: repeat(2, min-content);
}

.archium-form .archium-grid-container-contents {
  span:has(.select2) {
    input {
      width: 100% !important;
    }

    & {
      position: relative;
    }

    .select2 {
      display: flex !important;
    }

    #pfForm .select2-container,
    .selection {
      width: 100%;
    }

    .select2-selection {
      min-width: 100px !important;
      width: 100% !important;
      max-width: 100% !important;
      border: 1px solid black !important;
      border-radius: 0px !important;
      background: hsl(0, 0%, 95%);
    }

    .select2-search {
      width: 100%;
    }

    max-width: 100% !important;
    background: #ffffff00;
  }
}

.archium-form .archium-grid-container-archival {
  grid-template-columns: auto 1fr auto 1fr;
  grid-template-rows: repeat(4, min-content);

  .inputSpan,
  input {
    width: 100% !important;
    display: inline-block;
  }

  h3 {
    grid-area: 1 / span 4;
  }

  span:has(.select2) {
    & {
      position: relative;
    }

    .select2 {
      display: flex !important;
    }

    #pfForm .select2-container,
    .selection {
      width: 100%;
    }

    .select2-selection {
      min-width: 100px !important;
      width: 100% !important;
      max-width: 100% !important;
      border: 1px solid black !important;
      border-radius: 0px !important;
      background: hsl(0, 0%, 95%);
    }

    .select2-search {
      width: 100%;
    }

    max-width: 100% !important;
    background: #ffffff00;
  }
}

.select2-results ul {
  max-height: 340px !important;
  border: 1px solid black;
}

#pfForm select {
  width: 100% !important;
}

.archium-form .archium-grid-container-condition {
  grid-template-columns: auto 1fr auto 1fr;

  input,
  .oo-ui-textInputWidget {
    width: 100% !important;
    max-width: 100% !important;
  }

  .archium-sub-grid .comboboxSpan {
    max-width: 380px;
  }

  .multipleTemplateInstance.multipleTemplate {
    width: fit-content;
  }
}

.archium-form .archium-grid-container-attachment {
  grid-column: 1 / span 5;

  .archium-sub-grid {
    grid-template-columns: min-content auto auto;
    grid-template-rows: fit-content fit-content fit-content auto;
  }

  .ar-attachment-preview {
    height: min-content;

    &:has(img[src]),
    &:has(canvas[height]) {
      background: white;
      grid-column: 3;
      grid-row: 1 / span 4;
      width: fit-content;
      border: solid 1px black !important;

      img {
        max-height: 200px;
      }
    }
  }

  /*.pfImagePreviewWrapper:has(img) {*/
  .ar-attachment-name {
    display: contents;
  }
}

.archium-form .archium-grid-container-publication {
  input,
  .oo-ui-textInputWidget {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/**
 * Display Template specific rules
 **/

.archium-grid-container-base.archium-grid-container-toolbar {
  display: flex;
  padding: 0;
  border: none;
  column-gap: 10px;

  span {
    border: solid 2px black;
    font-size: 1.75rem;
    font-weight: 600;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  span:has(a),
  span:has(div) {
    position: relative;
    width: 54.5px;
    padding: auto;
  }

  a,
  div {
    font-size: 0;
    text-decoration: none !important;
    align-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;

    &::after {
      display: inline-block;
      font-size: 1.7rem;
      width: 100%;
      text-align: center;
    }
  }

  .ar-toolbar-title {
    grid-column: 1;
    padding-left: 32px;
    flex-grow: 1;
    text-align: center;
  }

  .ar-toolbar-overview {
    background: #d3ffd4;

    a::after {
      content: "◎";
    }
  }

  .ar-toolbar-create {
    background: #d3feff;

    div::after {
      content: "✶";
    }
  }

  .ar-toolbar-copy {
    background: #ffd3ff;

    div::after {
      content: "🖹";
    }
  }

  .ar-toolbar-edit {
    background: #fff2d3;

    a::after {
      content: "✎";
    }
  }

  .ar-toolbar-delete {
    background: #ffd3d3;

    a::after {
      content: "🗙";
    }
  }
}

.ar-item-title,
.ar-item-content {
  padding: 4px;
}

.ar-item-content {
  background: hsla(0, 0%, 100%, 0.9);
}

.ar-item-content.archium-sub-grid {
  background: #fff0;
  padding: 0px;
}

/***/
.archium-grid-container-base {
  grid-auto-rows: min-content;
}

.ar-item-content.archium-sub-grid {
  grid-template-columns: 0px 40% 20% 40%;
  row-gap: 0;
  column-gap: 0;

  .ar-item-title {
    margin-left: 24px;
    margin-right: 8px;
  }
}

/***/
.archium-grid-container-output.archium-grid-container-attachment {
  grid-template-columns: 1fr 1fr;
}

.archium-grid-container-output.archium-grid-container-archival {
  .ar-item-title {
    white-space: nowrap;
  }

  .archium-sub-grid {
    grid-template-columns: 0% minmax(30px, min-content) min-content auto;
  }
}

/***/
.ar-item-content.archium-sub-grid.ar-aida-signature {
  grid-template-columns: 0px min-content min-content min-content min-content min-content auto;
  row-gap: 0;
  column-gap: 0;

  * {
    white-space: nowrap;
  }

  .ar-item-title {
    margin-left: 4px;
    margin-right: 4px;
  }
}

.ar-item-content.archium-sub-grid.ar-aida-running-time {
  grid-template-columns: 20% 30% 20% 30%;
  grid-template-rows: min-content min-content;
  row-gap: 10px;

  .ar-item-title {
    margin-left: 8px;
    margin-right: 0px;
  }

  .ar-item-content.ar-aida-date_description {
    grid-column: 2 / span 3;
  }
}

/**/
.archium-grid-container-titleimg {
  .embedvideo-wrapper div {
    display: none !important;
  }

  img,
  canvas {
    object-fit: contain;
    width: 230px;
    height: 230px;
    background: #fff;
    border: solid 1px black;
  }
}

.ar-item-content.ar-aida-timeframe {
  background: #fff0;
  padding: 0;
  display: grid;
  grid-template-columns: min-content min-content;
  row-gap: 5px;
  column-gap: 5px;

  .ar-item-multiple {
    padding: 4px;
    background: hsla(0, 0%, 100%, 0.9);
    white-space: nowrap;
  }
}

.ar-item-content.ar-aida-link {
  display: flex;
}

.ar-item-multiple.ar-aida-link {
  background: hsl(0, 0%, 90%);
  padding: 4px;
  margin-right: 4px;
}

.ar-item-multiple.ar-aida-aida-att {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px;

  padding: 8px;
  background: hsla(0, 0%, 100%, 0.4);

  .ar-item-content {
    grid-template-rows: repeat(auto-fill, minmax(0, max-content));
    grid-column: 2;
    display: grid;
  }

  span[typeof] {
    grid-column: 1;
    background: #fff;
    border: solid 1px black;
    width: 130px;
    height: 130px;

    img {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }

    .embedvideo,
    .embedvideo-wrapper,
    .embedvideo-consent {
      width: 100% !important;
      height: 100% !important;
      cursor: pointer;
    }

    .embedvideo-consent {
      display: none !important;
    }
  }

  span > span {
    padding: 0 !important;
  }

  span:empty {
    display: none;
  }

  span:not(span:has(img)) {
    grid-column: 1 / span 2;
    background: #fff;
    padding: 4px;
  }
}

.ar-button-edit_signature {
  background: hsl(0, 0%, 90%);
  padding: 4px;
  margin-left: 8px;
  justify-self: end;
  cursor: pointer;
  user-select: none;
}

/* ===================================================== */
/* Dataset Menu                                          */
/* ===================================================== */

.ar-menu {
  background: hwb(0 0% 100% / 0.7);
  backdrop-filter: blur(5px);
  z-index: 1100;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  justify-items: center;
  /*display: grid;*/
}

.ar-menu > .menu-body {
  position: relative;
  display: grid;
  grid-gap: 8px;
  /* margin: auto; */
  padding: 8px;
  z-index: 1100;
  background: var(--ARCHIUM_COLOR_thorax_identity);
  width: min-content;
  height: min-content;
  border: solid 2px black;

  .menu-titlebar {
    display: grid;
    font-size: large;
    font-weight: 600;
    grid-template-columns: min-content auto;

    * {
      white-space: nowrap;
      align-content: center;
      text-align: center;
    }
  }

  .menu-fields {
    display: inline-grid;

    p {
      margin: 0;
    }

    .ar-field-signature {
      display: grid;

      grid-template-columns: 10rem 5rem 5rem;
      grid-template-rows: min-content min-content;
      column-gap: 16px;
    }

    .ar_input_error {
      white-space: pre-line;
    }
  }

  .menu-buttons {
    display: grid;
    gap: 0px;
    justify-content: end;
    grid-template-columns: min-content min-content min-content;

    * {
      margin-left: 8px;
      width: min-content;
      background: hsl(0, 0%, 100%);
      padding: 8px 12px;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      align-content: center;
      text-align: center;

      &:hover {
        background: hsl(0, 0%, 95%);
      }
    }
  }

  input,
  textarea {
    border: solid 1px black !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: white !important;
    color: black !important;
  }

  input {
    height: calc(1.5em + 0.75rem + 2px);
  }
}

/* ============ */
/* LUA TECTONIC */
/* ============ */
#ar-container-levels {
  display: grid;
  grid-template-columns: min-content auto;
}

#ar-container-datasets {
  display: grid;
  grid-template-columns: min-content auto min-content;
}

#ar-container-datasets,
#ar-container-levels {
  width: 100%;
  row-gap: 4px;

  user-select: none;

  .ar-thorax-signature,
  .ar-thorax-title,
  .ar-thorax-timeframe {
    padding: 6px 4px;
    cursor: pointer;
  }

  .ar-thorax-signature {
    background: hsl(4, 0%, 85%);
    min-width: 36px;
    font-weight: bold;
  }

  .ar-thorax-title {
    background: hsl(4, 0%, 95%);
  }

  .ar-thorax-timeframe {
    background: hsl(4, 0%, 95%);
    white-space: nowrap;
  }

  .ar-thorax-entry:hover {
    .ar-thorax-signature {
      background: hsl(4, 0%, 75%);
    }

    .ar-thorax-title,
    .ar-thorax-timeframe {
      background: hsl(4, 0%, 85%);
    }
  }

  .ar-thorax-dataset.ar-thorax-entry {
    display: contents;
  }

  /*
    .ar-thorax-entry.level-1{display:none;}.ar-thorax-entry.level-2{display:none;}.ar-thorax-entry.level-3{display:none;}.ar-thorax-entry.level-4{display:none;}*/
}

#ar-thorax-toolbar {
  display: flex;
  column-gap: 4px;
  padding-bottom: 4px;

  user-select: none;
}

#tectonic-back,
#tectonic-forward,
#tectonic-home,
#tectonic-create {
  background: hsl(4, 0%, 85%);
  width: 40px;
  height: 40px;
  align-content: center;
  text-align: center;
  cursor: pointer;

  &:hover {
    background: hsl(4, 0%, 75%);
  }
}

#tectonic-signature {
  background: hsl(4, 0%, 85%);
  padding-left: 8px;
  align-content: center;
  text-align: left;
  flex-grow: 1;

  font-weight: bold;
  font-size: large;
}

#tectonic-search {
  width: 25%;
  background: hsl(4, 0%, 85%);
}

#tectonic-search-input {
  width: 100%;
  height: 100%;
  padding: 0 4px;
  font-size: large;
}

.ar-thorax-no-datasets {
  grid-column: 1 / span 2;
  height: 100px;
  align-content: center;
  text-align: center;
  font-size: large;
  font-weight: bold;
  background: hsl(4, 0%, 95%);
}

#ar-container-datasets {
  display: grid;
}

.ar-thorax-entry {
  display: contents;
}

/* ================== */
/* Personal           */
/* ================== */
#contentwrapper:has(.wikiEditor-ui) {
  max-width: 100%;
}


/* NEW TECTONIC */
body:has(.artux-tectonic-overview) {
  #firstHeading {
    display: none;
  }

  #maincontentwrapper {
    padding-top: 0 !important;
  }
}

.tectonic-toolbar {
  display: flex;
  background: hsl(0, 0%, 80%);
}

#tectonic-back,
#tectonic-forward,
#tectonic-home,
#tectonic-create,
#tectonic-reload,
#tectonic-view,
#tectonic-view-broken {
  background: hsl(4, 0%, 85%);
  width: 40px;
  height: 40px;
  align-content: center;
  text-align: center;
  cursor: pointer;
  font-weight: bold;

  &:hover {
    background: hsl(4, 0%, 75%) !important;
  }

  &.checked {
    background: hsl(4, 0%, 70%);
  }
}

#tectonic-signature {
  background: hsl(4, 0%, 85%);
  padding-left: 8px;
  align-content: center;
  text-align: left;
  flex-grow: 1;

  font-weight: bold;
  font-size: large;
}

#tectonic-tree-overview {
  background: hsl(300, 0%, 80%);
  font-size: 1rem;

  .to-level {
    padding: 0 4px;
    border-radius: 0px;
    margin: 0 4px;
    min-width: 10%;
  }

  ul {
    margin: 0;
    padding: 4px 8px;
  }

  li {
    display: grid;
    grid-template-columns: minmax(7%, max-content) auto;
    list-style: none;
    cursor: pointer;
    padding: 1px 0px;

    &:empty {
      height: 26px;
      cursor: unset;
    }

    &:hover:not(:empty) {
      background: hsl(300, 0%, 75%);
    }
  }
}

#tectonic-table tr {
  cursor: pointer;
}

#tectonic-tree-overview {
  li:nth-child(1) {
    .to-level {
      background: hsl(57, 98%, 63%);
    }
  }

  li:nth-child(2) {
    .to-level {
      background: hsl(57, 98%, 50%);
    }
  }

  li:nth-child(3) {
    .to-level {
      background: hsl(57, 98%, 49%);
    }
  }

  li:nth-child(4) {
    .to-level {
      background: hsl(57, 98%, 48%);
    }
  }

  li:nth-child(5) {
    .to-level {
      background: hsl(57, 98%, 47%);
    }
  }
}

tr:has(.dataset-details) > td {
  background: hsl(0, 0%, 90%);
}

.dataset-details {
  display: grid;
  gap: 4px;
  grid-template-columns: min-content auto;

  span,
  div {
    padding: 4px;
    background: hsla(0, 0%, 100%, 0.8);
  }
}