/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

.subtitle {
  color: grey;
  font-weight: normal;
}

main {
  padding: 1em;
  padding-top: 0;
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
  h1 {
    font-size: 4em;
    margin-bottom: 0;
  }
  nav {
    margin-top:2em;
    margin-bottom:2em;
  }
  nav .button {
    color: white;
    text-decoration: none;
    background-color:#007bff;
    border-radius: 3px;
    padding:0.5em;
    padding-left: 1em;
    padding-right: 1em;
    margin:0.7em;
    &:first-child {
      margin-left:0;
    }
  }
}

form {
  input {
    display:block;
    margin-top:0.5em;
    margin-bottom:0.5em;
    padding:0.35em;
    border-radius: 3px;
    border: grey 1px solid;
    font-size:0.9em;
  }
  fieldset {
    label {
      display:block;
      input[type="radio"] {
        display:inline;
      }
    }
  }
  label p {
    margin-block:0;
    #organization {
      display: inline;
      padding: 0.2em;
    }
  }
  #prefix {
    padding: 0.2em;
    display:inline;
    text-align: right;
    width:6em;
  }
  .header-mini {
    margin-block-end: 0;
  }
}

nav {
  /* Base styles */
  ul {
    display: inline-block;
    padding-inline-start: 0;
    list-style-type: none;
    background-color: white;
    min-width: 10em;
  }
  li {
    min-width: 10em;
    width: max-content;
    text-align: center;
  }
  /* Top row */
  > ul > li {
    position: relative;
    display: inline-block;
    &:not(:last-child) {
      border-right: 1px solid lightgrey;
      margin-right: -1px;
    }
  }
  /* Dropdowns */
  ul ul {
    display: none;
    position: absolute;
    width: 100%;
    li {
      width: 100%;
      padding: 0.3em;
      &:not(:last-child) {
        border-bottom: 1px solid lightgrey;
      }
    }
  }
  ul li ul {
    padding-top: 0.5em;
    transition: transform 0.2s, opacity 0.2s;
    transform: translateY(-50%) scaleY(0);
    visibility: hidden;
    display: block;
    opacity: 0;
    border: 1px solid lightgrey;
    border-top: 0;
  }
  ul li:hover ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%) scaleY(1) ;
  }
  li:has(ul) {
    &:before {
      content: "⌄";
      position: absolute;
      margin-top: -0.15em;
      transition: transform 0.1s linear;
      left: 0.5em;
    }
    &:hover:before {
      transform: scaleY(-1) translateY(-0.55em);
    }
  }
}

.submit-button {
  text-decoration: none;
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
  &:hover {
    background-color: #218838;
    border-color: #1e7e34;
  }
  border: 1px solid transparent;
  padding: 0.5em;
  border-radius: 0.25em;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  display: inline-block;
}

.item-submission-text {
  border: 1px solid grey;
  background-color: lightgrey;
  border-radius: 0.25em;
  padding: 0.8em;
  font-size: 0.8em;
}

ul.inline-list {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  display: inline;
  list-style: none;
}

ul.comma-list {
  li {
    display: inline;
    &:not(:last-child):after {
      content: ", ";
    }
  }
}

form.inline-form {
  display: inline;
  input {
    display: inline;
  }
}

.item-tag {
  background-color: var(--tag-color);
  border-radius: 0.5em;
  font-size: 0.9em;
  padding: 0.1em;
  color: rgba(40, 40, 40, 1);
  padding-left: 0.4em;
  padding-right: 0.4em;
  display: inline-block;
}

.inline-button {
  /* transition: background-color 0.2s; */
  background-color: unset;
  border: none;
  outline: none;
  display: inline;
  cursor: pointer;
  margin-top: 0;
  margin-bottom: 0;
  padding-inline: 0;
}

#item-page {
  display: flex;
  flex-direction: row;
  gap: 1em;
  section:first-child {
    flex-grow: 1;
  }
}

.item-sidebar-list {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  list-style: none;
  li {
    white-space: nowrap;
  }
}

.item-text {
  font-family: inherit;
  margin-block: 0;
  display: inline;
  white-space: pre-wrap;
  word-break: break-word;
}

blockquote {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0;
  padding-left: 15px;
  border-left: 3px solid #ccc;
}

textarea {
  font-family: inherit;
}

.form-error {
  border-radius: 0.5em;
  border: 1px solid red;
  background-color: rgb(255, 150, 150);
  padding: 0.4em;
  margin-bottom: 0.6em;
}

.item-list {
  border-collapse: collapse;
  min-width: 100%;
  th:not(:first-child) {
    text-align: left;
  }
  td, th {
    padding-left: 0.25em;
    padding-right: 0.25em;
    border: 1px solid black;
  }
  td:first-child {
    white-space: nowrap;
  }
  td:not(:first-child) {
    width: 100%;
  }
  .submitted {
    background-color: #d9ead3;
  }
  .assigned {
    background-color: #cfe2f3;
  }
}

#item-form-wrap {
  display: flex;
  gap: 1em;
  flex-direction: row;
  max-width: 100%;
}

#page-wrap {
  min-width: 0;
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  > a {
    align-self: flex-end;
  }
}

.item-preview {
  width: 100%;
  border: 1px solid black;
  button {
    float: right;
  }
  div {
    display: inline-block;
    margin-right: 1em;
  }
  .item-preview-edit {
    float: right;
  }
}

/* Wish there was a better way to look disabled but still submit */
input[readonly] {
  color: GrayText;
  background-color: -moz-DisabledField;
  outline: none;
  pointer-events: none;
}

input[disabled] ~ label, label:has(+ input[readonly]) {
  color: GrayText;
  background-color: -moz-DisabledField;
}

.item-form {
  min-width: max-content;
  input {
    margin-bottom: 0.25em;
    margin-top: 0.25em;
  }
  .item-submit-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.item-content {
  width: 100%;
  font-family: sans-serif;
  border-radius: 3px;
  border-width: 1px;
  font-size: 0.9em;
}

input.small-number {
  width: 5em;
  margin-right: 1em;
}

input.wide-text {
  width: 25em;
}

.form-inline > * {
  display: inline-block;
}

form sup {
  line-height: 0;
}

.form-field-small-label {
  margin-top: 0.2em;
  > label  {
    font-size: 0.7em;
    margin-bottom: 0px;
  }
  input {
    margin-top: 0px;
  }
}

.form-radio-bar-clear {
  display: inline-block;
  input[type="radio"] {
    display: none;
  }
  label {
    color: grey;
  }
}

.form-radio-bar {
  display: inline-block;
  font-size: 0.9em;
  input[type="radio"] {
    display: none;
  }
  input[type="radio"]:checked + label {
    background-color: var(--radio-bg-color, orange);
  }
  label {
    transition: background-color 0.1s;
    border: 1px solid grey;
    border-radius: 0.2em;
    &:not(:last-of-type) {
      border-right: none;
      border-top-right-radius: unset;
      border-bottom-right-radius: unset;
    }
    &:not(:first-of-type) {
      border-top-left-radius: unset;
      border-bottom-left-radius: unset;
    }
    display: inline-block;
    padding: 0.25em;
  }
}

header .user-link {
  float: right;
}

.user-list {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  li {
    margin-top: -1px;
    margin-right: -1px;
    padding: 0.7em;
    border: 1px solid black;
  }
  li span {
    display: block;
  }
}

.item-submission {
  background-color: lightgreen;
  padding: 0.6em;
  border: 1px solid green;
  border-radius: 0.5em;
  margin: 1em;
}

.item-file-list {
  padding-inline-start: 0;
  list-style: none;

  li {
    display: inline-block;
  }

  img {
    max-width: 100%;
    max-height: 500px;
  }

  a {
    display: block;
  }
}


.submission-button-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  form {
    align-content: end;
  }
}

.button {
  border-radius: 5px;
  padding: 0.4em;
  padding-left: 0.6em;
  padding-right: 0.6em;
  text-decoration: none;
  transition: background-color 0.15s;
  margin: 0.2em;
  display: inline-block;
  &.button-primary {
    color: white;
    background-color: #007bff;
    &:hover {
      background-color: #0069d9;
    }
  }

  &.button-success {
    color: white;
    background-color: #28a745;
    &:hover {
      background-color: #218838;
    }
  }
}

.global-buttons {
  float: right;
  margin-right: 2em;
}

#empty_submission:checked ~ #new_item_submission {
  display: none;
}

#empty_submission:not(:checked) ~ #mark_as_done {
  display: none;
}

#home {
  display: flex;
  flex-direction: row;
  gap: 1em;
  section:not(#events) {
    flex-basis: 40%;
  }
  #events {
    flex-basis: 20%;
  }
  #pins {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  #pins div {
    &:last-child {
      flex-grow: 1;
    }
  }
  ul {
    padding: 0.7em;
    display: block;
    li {
      word-break: break-word;
    }
  }
  #hq-visit, #events, #pins div {
    border: 1px solid black;
    h3 {
      margin-bottom: 0;
      padding: 0.7em;
      margin-top: 0;
      border-bottom: 1px solid black;
    }
  }
}