/* kate: space-indent on; indent-width 2; replace-tabs on; hl CSS;
 *
 * let the text breathe. embrace whitespace.
 * 60-100 characters per line - width: 60ch = 60 characters, ideally 74
 * line-height: >= 1.5
 * padding: at least 15px
 * color contrast: https://webaim.org/resources/contrastchecker/
 * text size: min 16px
 * body serif, headers sans-serif
 * use bulleted lists
 * we only read the first two words of paragraphs, bullet points, headings etc
 * max. two to three colors (not including shades)
 * no icons without a label
 * use images sparingly and make sure they don't look like an ad
 * underwhelming is better than overwhelming
 * patterns are good - consistency is better than originality
 * F-shaped reading pattern
 * the most important information needs to be visible before scrolling
 * consistency: things that are the same thing should look the same,
 *              things that are a different thing should look different
 * unpredictability drives us nuts
 * often we don't do _anything_ because we don't want to do the _wrong_ thing
 * text sizes must be in pt and divisible by 4 -- https://pixelsconverter.com/pt-to-px
 *
 * Source: https://www.youtube.com/watch?v=Jf0cjocP8Wk
 */

:root {
  --color-background:   #FFFFFF;
  --color-headings:     #222222;
  --color-text:         #333333;
  --color-inactive:     #6C757D;
  --color-sev-ok:       #228B22;
  --color-sev-log:      #CCCCCC;
  --color-sev-info:     #007BFF;
  --color-sev-warning:  #E5D726;
  --color-sev-error:    #DAA520;
  --color-sev-critical: #B22222;
  --color-sev-disaster: #8B0000;
  --color-border:       #DEE2E6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-background:   #121212;
    --color-text:         #E0E0E0;
    --color-headings:     #F0F0F0;
    --color-inactive:     #B0B0B0;
    --color-sev-ok:       #52D726;
    --color-sev-info:     #82CAFF;
    --color-sev-warning:  #F9D800;
    --color-sev-error:    #FFC107;
    --color-sev-critical: #FE803D;
    --color-sev-disaster: #FF5C5C;
    --color-border:       #DEE2E6;
  }
}

html {
  display: block;
  width: 100%;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-400);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--bs-gray-400);
}

body {
  background-color: var(--color-background);
  background-repeat: no-repeat;
  background-position: left 0, right 0, center;
  color: var(--color-text);
  display: block;
  margin: 0;
  overscroll-behavior: auto !important;
}

[popover] {
  margin: auto;
}

summary {
  cursor: pointer;
}

.sev-ok       { font-weight: bold; color: var(--color-sev-ok);       }
.sev-log      { font-weight: bold; color: var(--color-sev-log);      }
.sev-info     { font-weight: bold; color: var(--color-sev-info);     }
.sev-warning  { font-weight: bold; color: var(--color-sev-warning);  }
.sev-error    { font-weight: bold; color: var(--color-sev-error);    }
.sev-critical { font-weight: bold; color: var(--color-sev-critical); }
.sev-disaster { font-weight: bold; color: var(--color-sev-disaster); }

.bg-sev-ok       { background-color: var(--color-sev-ok)       !important; }
.bg-sev-log      { background-color: var(--color-sev-log)      !important; }
.bg-sev-info     { background-color: var(--color-sev-info)     !important; }
.bg-sev-warning  { background-color: var(--color-sev-warning)  !important; }
.bg-sev-error    { background-color: var(--color-sev-error)    !important; }
.bg-sev-critical { background-color: var(--color-sev-critical) !important; }
.bg-sev-disaster { background-color: var(--color-sev-disaster) !important; }

.text-inactive   { color: var(--color-inactive); }

div.header {
  /* Total height = 30+25+30 = 85px */
  margin: 30px 0;

  ul.menu {
    display: inline-block;
    margin-left: auto;
    width:  100%;
    height:  25px;

    li {
      display: inline-block;
      margin-left: 50px;

      a {
        text-decoration: none;
      }

      a:hover {
        color: blue;
      }
    }
  }
}

div.content {
  display: block;
  padding: 0px 0px 0px 0px;
}

img.logo {
  width: 280px;
  float: left;
}

p.74ch {
  max-width: 74ch;
}

select {
  background-color: white;
  border-style: solid;
  border-color: var(--color-border);
}

form.device-edit {
  li {
    margin-bottom: 5px;
  }

  label {
    width: 180px;
  }

  input[type=text], input[type=number], select {
    width: 210px;
  }
}

div.tickettitle {
  border-left-style: solid;
  border-left-width: 5px;
  margin: 15px; padding-left: 13px;
}

div.tickettitle-ok        { border-left-color: var(--color-sev-ok      ); }
div.tickettitle-log       { border-left-color: var(--color-sev-log     ); }
div.tickettitle-info      { border-left-color: var(--color-sev-info    ); }
div.tickettitle-warning   { border-left-color: var(--color-sev-warning ); }
div.tickettitle-error     { border-left-color: var(--color-sev-error   ); }
div.tickettitle-critical  { border-left-color: var(--color-sev-critical); }
div.tickettitle-disaster  { border-left-color: var(--color-sev-disaster); }

a {
  color: var(--nav-link-color);
}

.timeline {
  overflow-y: auto;
  table {
    margin: 0;
    td {
      padding: 0 5px;
    }
  }
}

ul.ticketlist {
  margin: 0 10px;
  padding: 0;

  li {
    border: 1px solid var(--bs-gray-400);
    border-radius: 8px;
    margin-bottom: 4px;
    line-height: 1.1;
    list-style-type: none
  }
  li:hover {
    background-color: var(--bs-gray-100);
  }
}

div.ticketview {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 15px;
}

@media screen and (max-width:576px /* bootstrap xs */) {
  div.ticketview {
    display: block;
  }
}

ul.ticketmessages {
  grid-column: 1;
}

li.ticketmessage {
  padding: 15px;
  list-style-type: none;

  div.ticketmessage-icon {
    width: 50px;
    float: left;
    margin-top: 10px;
    font-size: 26px /* 20pt */;
  }

  div.ticketmessage-body {
    margin-left: 65px;
    border: 1px solid #CCC;
    border-radius: 8px;
    overflow: hidden;

    div.ticketmessage-inner {
      /* prevent very long messages from messing up the whole thread view */
      max-height: 500px;
      overflow-y: auto;

      div.ticketmessage-content {
        right: 0;
        padding: 0 15px;
        max-width: 74ch;

        pre {
          background-color: transparent;
          padding: 0;
        }
      }
    }
  }
}

li.ticketevent {
  padding: 0 15px;
  list-style-type: none;

  div.ticketevent-body {
    margin-left: 65px;
    border: none;
  }
}

a.ticketmessage-link {
  text-decoration: none;
  color: black;
}

a.ticketmessage-link:hover {
  text-decoration: underline;
  color: black;
}

div.ticketmessage-editform {
  padding: 5px;
  width: 100%;
}

div.ticketmeta {
  grid-column: 2 /* / span 2 ? */;
  width: 150px;
}

@media screen and (max-width:576px /* bootstrap xs */) {
  div.ticketmeta {
    border: 1px solid #CCC;
    border-radius: 8px;
    margin: 15px;
    width: auto;
  }
}

div.search-bar-container {
  button {
    margin-bottom: 0 !important;
  }
  input {
    margin-bottom: 0 !important;
  }
}

button.inventory-popover-button {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  text-align: left;
  font-weight: normal;
}

button.inventory-popover-button:hover,
button.inventory-popover-button:active,
button.inventory-popover-button:focus {
  color: var(--bs-primary-text-emphasis);
}

#inventory-popover {
  height: 80%;
  width: 550px;
  border-radius: 16px;
  border-width: thin;
  border-color: var(--bs-primary);
  padding: 15px;
  background-color: var(--bs-gray-100);

  div.ipo-content {
    height: 100%;
    width:  100%;
    display: flex;
    flex-direction: column;

    div.ipo-content-panel {
      background-color: var(--color-background);
      border-radius: 10px;
      padding: 5px;
      margin-bottom: 8px;

      span.device-details-buttons {
        float: right;
      }

      ul {
        margin: 0;
        padding-left: 8px;
        list-style: none;
      }
    }
  }
}

#inventory-popover::backdrop {
  background-color: rgba(245, 245, 245, 0.8);
}

li.orgeventlog-entry {
  display: block;
  margin: 0; padding-left: 13px;
  font-size: 12px /* 10pt */;

  code {
    background-color: white;
    font-size: 12px /* 10pt */;
  }

  div.orgeventlog-details {
    margin: 5px 5px 0px 17px;
    padding: 5px;
    border: solid 1px var(--bs-gray-400);
    border-radius: 8px;
  }

}

@media screen and (max-width:576px /* bootstrap xs */) {
  li.ticketmessage {
    padding: 0 15px 5px 0;

    div.ticketmessage-icon {
      display: none;
    }

    div.ticketmessage-body {
      margin-left: 5px;
    }
  }
  li.ticketevent {
    div.ticketevent-body {
      margin-left: 5px;
    }
  }
  .hero__content {
    padding-bottom: 8px;
  }
  .hero--noimage::after {
    background-color: var(--bs-gray-200);
  }
  div.entry-wrapper {
    margin-top: 0;
  }
  #inventory-popover {
    width: 340px; /* smallest iPhone has 375 */
  }
}
@media screen and (max-width:767px /* bootstrap md */) {
  table.loginform {
    input, select {
      max-width: 30%;
    }
  }
}