.shp-panel {
  /* TODO: peaksid vist enamik üldised olema */
  --grey-text: #8D92A5;
  --focus-border: #FFA600;
  --focus-bg: #FFF8DD;
  --bg: #F4F5F7; /* taust? */
  --bold-text: #101010;
  --white: #FFFFFF;
  --box-border: #E8EAED;
  --tag-green: #1e9f22;
  --tag-yellow: #ffc800;
  --tag-orange: #ffa600;
  --grey-text: #9498aa;
  --color-gray-light: #c1c1c1;
  --color-gray-light2: #ccc;
  --color-gray-lighter: #f1f1f1;
  --color-gray-medium: #a8a8a8;
  --color-gray-soft: #d9dadb;
  --color-gray-blue: #979cad;
  --color-light-gray-blue: #e1e4ea;
  --color-gray-lightest: #e0e0e0;
  --eye-yes: #4860a9;
  --eye-no: #d3d5db;
  --tag-red: #e43c3c;

  width: 961px; /*864*/
  /* ära lase dialoogil ekraanist välja minna */
  max-width: 100vw;
  max-height: 100dvh;
  overflow: auto;
  animation: fadeInOpacity ease .3s;
  box-sizing: border-box;
  border: 1px solid var(--pl-platinum);
  border-radius: .5em;
  background-color: var(--bg) !important;
  display: flex;
  flex-direction: row;

  #shpcount-container {
    position: absolute;
    width: 961px;
    margin-top: 715px;
    text-align: center;

    #shpcount {
      display: inline-block;
      background-color: var(--bg);
      border: 1px solid var(--border-box);
      border-radius: 6px;
      padding: .3em .75em;
      font-size: .9em;

      span:first-child { font-weight: bold }
      span:last-child { color: var(--grey-text); }
      span:last-child::before { content: ' / '; }
    }
  }

  &.dragging .drop-here { border: 1px solid var(--pl-brownish); font-weight: bold; }
  .msymbol { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 }
  .title { font-weight: bold; }
  .title:has(> span:empty) { display: none }
  .panel {
    flex: 1 1 50%;
    padding: 1.5em .875em 1em;

    .msymbol.close {
      font-size: 1.2em;
      background-color: var(--box-border);
      padding: .25em;
      border-radius: 4px;
      cursor: pointer;
    }
  }

  [data-before-sym]::before {
    content: attr(data-before-sym);
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline flow-root;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-decoration: none;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
  }

  .up::before   { color: var(--a-color); }
  .down::before { color: var(--b-color);  }

  .border-block {
    border: 1px solid var(--box-border);
    border-radius: .35em;
    padding: .5em;
    margin-bottom: 1em;
    background-color: var(--white);
  }

  .block2 {
    display: flex;
    flex-direction: row;

    .title { user-select: none }
    &.up::before, &.down::before { font-size: 1.5em }
    .a { flex: 1 1 10%; }
    .b { flex: 1 1 60%; padding-left: .45em; }
    .c { flex: 1 1 30%; text-align: right; }
  }

  .block1 {
    word-wrap: break-word;
    width: 450px;
  }
  .block1 .info:not(:empty), .block2 .info:not(empty) { margin-top: 1em; }
  .two-side { display: flex; flex-direction: row; justify-content: space-between; }

  .tag-button {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--white);
    border-radius: 6px;
    padding: 2px 5px;
    font-size: .9em;
    span { padding-right: .25em; }
    user-select: none;
    &.cancelled { color: var(--white); background-color: var(--tag-red); }
  }

  .head {
    padding-bottom: 2em;

    .flex {
      font-size: 14px;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: .3em;
      user-select: none;
      .shpno { color: var(--pl); user-select: all; padding-right: .2em; }
    }
  }

  .panel:first-child .head { padding-right: 1em; }
  .body { overflow: hidden; height: 570px; }
  .cancelled { color: var(--grey-text); }

  .goods {
    padding: .5em 0 1em;
    display: grid;
    .header, .row, .footer {
      display: grid;
      grid-template-columns: 2em 6em 3.5em 3.5em 3.5em 3.5em 10.8em;
      .cell {
        padding: .5em .5em;
        text-align: right;
        &:nth-child(2) { text-align: left; }
      }
    }

    .header { font-weight: bold; }
    .row {
      border-top: 1px solid var(--color-gray-soft);
      .notes { grid-column: 2 / span 6; text-align: left; padding-top: 0; }
      .container { display: flex; flex-direction: row; justify-content: space-between; padding: .5em 0; }
    }
    .footer {
      border-top: 1px solid var(--color-gray-soft);
      .cell {
        &:nth-child(2) { text-align: right; }
      }
      .amount-txt { grid-column: span 2; font-weight: bold; text-align: left; padding-left: .8em }
      .sum { font-weight: bold; }
      .waybill-note {
        text-align: left;
        grid-column: 1 / span 9;
        padding-top: 0;
        margin-left: 0em;
      }
    }
  }

  .border-block:has(.fee) {
    padding: 2px 6px 2px 6px;

    .footer { width: 100%; box-sizing: border-box; text-align: right; padding: 4px 0 2px 4px; white-space: nowrap; }
    .footer * { white-space: nowrap; text-align: right; display: inline-block; }

    .row {
      display: grid;
      grid-template-columns: 42% 15% 20% 20%; /* teadlikult natsa vähem kui 100%, ülejäänud on gap */
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--color-gray-soft);
      &:first-child { border-top: 0 }

      .cell {
        padding: 3px 0px;
        text-align: right;
        &:first-child { text-align: left }
      }
    }
  }


  .fee.row {
    .cell { padding-right: 4px; white-space: nowrap; }
    &.base .name { font-weight: bold; text-wrap: auto; }
    &.by-amount .price,
    &.by-price .amount { color: #666; }
    input { padding: 1px 2px; text-align: right; color: inherit; }
    .amount input, .price input { border: 0 none; max-width: 60px; outline: 0 none; }
    .amount input:hover, .price input:hover { background-color: var(--focus-bg); }
    .name { white-space: nowrap; max-width: 240px; }
    .quantity { white-space: nowrap; display: flex; align-items: center; overflow: hidden; div { display: inline-block; } div[contenteditable] { padding: 2px 4px 2px 2px; border: 1px solid transparent; }  }
  }
  .inv-link { padding: 0px 6px; text-align: right; }
  .inv-link a { color: var(--pl); }
  .inv-link a:hover { color: blue; }

  .files {
    .two-side > strong { user-select: none }
    button { background-color: var(--box-border); padding: 0 .45em; border-radius: 4px; cursor: pointer; text-align: center; }
    .row {
      display: grid;
      grid-template-columns: 1em 1em 12em 7em 8em;
      align-items: center;
      justify-content: space-between;
      gap: .25em;
      padding: .25em 0;

      div:nth-child(4), div:nth-child(5) { text-align: right; }
      .client_visible { display: block; }
      .driver_visible { display: block; }
      .client_visible .no, .driver_visible .no { color: var(--eye-no); }
      .client_visible .yes, .driver_visible .yes { color: var(--eye-yes); }
      .filename {
        display: flex;
        gap: .25em;

        a {
          display: block;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          width: 230px;
        }

        &:hover a { width: 20em; }
      }
      .delete_file { display: none; }
      .client_visible .msymbol, .driver_visible .msymbol, .filename .delete_file { cursor: pointer; }
      &:has(.filename:hover) span.delete_file { display: block; width: 1em; }
      &:has(.filename:hover) span.delete_file:hover { color:var(--traffic-red); }
    }
  }

  .button {
    cursor: pointer;
    width: auto;
    border: 1px solid var(--box-border);
    border-radius: .5em;
    box-shadow: 1px 1px var(--box-border);
    padding: .2em 1em;
    color: var(--pl-dark-grey);
    background-color: var(--white);
  }

  .buttons {
    margin-top: 1em;
    padding-right: 1em;
    button { margin: .25em; font-weight: 500; padding: .3em 1.5em; }
  }

  .button-bar { display: flex; gap: .5em; align-items: center; user-select: none; }
  a.button { display: block; text-decoration: none; }

  .tabs {
    gap: 1em;

    a {
      font-weight: bold;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      &:active, &:hover, &.active { border-color: var(--pl); }
    }
  }

  .price {
    label { padding-right: 1em }
  }

  .sellprice {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }

  input.price {
    outline: none;
    background: transparent;
    width: 5em;
    text-align: right;
    font-weight: bold;
    border: 1px solid transparent;
    border-radius: 4px;

    &::placeholder { color: var(--grey-text); font-weight: normal; text-align: center; }
    &:focus { border-color: var(--focus-border); background-color: var(--focus-bg); }
  }

  .sellprice .input-money-math-wrap {
    justify-content: flex-end;
  }

  .undef { color: var(--color-gray-blue); }

  .placeholder { color: var(--grey-text); font-weight: normal; margin-left: 4px; }
  [contenteditable] {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    padding: .1em 0;
  }
  .inline-suggest.waybill_note [contenteditable] { width: 410px; max-width: fit-content; }
  .container .inline-suggest, .seal .inline-suggest { max-width: fit-content }

  [contenteditable]:focus {
    background-color: var(--focus-bg);
    border: 1px solid var(--focus-border);
  }

  [contenteditable]:hover, .inline-suggest:hover, .inline-choice:hover, .price:hover {
    background-color: var(--focus-bg);
    cursor: pointer;
  }

  .inline-choice.waybill_note, .inline-suggest.waybill_note, .input-suggest.waybill_note, .container .inline-suggest, .seal .inline-suggest {
    [contenteditable] {
      border-radius: 4px;
      min-width: 100px;
      padding-left: .25em;
      padding-right: .25em;
    }
  }

  .carrier_block {
    padding-bottom: 1em;
    display: flex;
    flex-direction: row;
    gap: .25em;
    justify-content: space-between;

    .inline-choice.company,
    .inline-suggest.company,
    .input-suggest.company {
      [contenteditable] {
        border-radius: 4px;
        min-width: 80px;
        padding-left: .25em;
        padding-right: .25em;
      }
    }

    div.carrier, div.buyprice {
      display: flex;
      gap: 2em;
      div.label { width: 5em; }
    }

    div.buyprice input { text-align: left; }
  }

  .freight {
    table.tbl {
      width: 100%;
      margin-bottom: 1em;
      border-bottom: 1px solid var(--color-gray-lightest);
      empty-cells: show;

      td { padding: .15em .25em; align-content: center }
      td:first-child { padding-left: 0 };
      td:last-child { padding-right: 0 };
      .right { text-align: right; }

      .header {
        span {
          border: 1px solid var(--color-light-gray-blue);
          border-radius: 4px;
          background-color: var(--color-light-gray-blue);
          display: block;
          padding: .15em .5em;
          text-align: left;
          color: var(--color-gray-blue);
        }
        td { padding-bottom: .5em; }
        td.b span { display: inline-block; }
        td.d { color: var(--grey-text); }
      }

      .content {
        td { vertical-align: middle; }
        .notok { color: var(--tag-yellow) }
        .ok { color: var(--tag-green) }
        .tag {
          display: inline-block;
          padding: .1em .2em;
          border: 1px solid var(--box-border);
          border-radius: 4px;
          width: auto;
          text-align: center;
          font-size: .9em;
        }
        .tag.done {
          background-color: var(--tag-green);
          border-color: var(--tag-green);
          color: #fff;
        }
        .tag.undone {
          background-color: var(--tag-orange);
          border-color: var(--tag-orange);
          color: #fff;
        }

        td.a {
          width: 3.5em;
          font-weight: 500;
          &::first-letter { color: var(--grey-text); }
        }
        td.b {
          width: 2em;
          span.tag { width: 2em; }
        }

        td.c {
          width: 1em;
          a { color: var(--grey-text) }
        }

        td.e { width: 4em }
        td.f { width: 4em; color: var(--grey-text); }
        td.g {
          width: 1em;
          color: var(--grey-text);
          span { color: var(--traffic-red); }
        }
      }
    }
  }

  .timeline-container {
    /*height: 60vh;*/ /* if scrollbar exist, then remove it */
    overflow-y: auto;
    padding-right: .75em;
    scrollbar-width: auto;
    &::-webkit-scrollbar { width: 6px }
    &::-webkit-scrollbar-track { background: var(--color-gray-lighter); border-radius: 3px; }
    &::-webkit-scrollbar-thumb { background: var(--color-gray-light); border-radius: 3px; }
    &::-webkit-scrollbar-thumb:hover { background: var(--color-gray-medium); }

    .timeline { position: relative; max-width: 100%; }
    .timeline::before {
      content: '';
      position: absolute;
      left: 113px;
      top: .5em;
      bottom: 0;
      width: 2px;
      background: var(--color-gray-light2);
      z-index: 1;
      /*margin-bottom: 70px*/ /* hide line from last content */
    }
    .timeline .item { position: relative; display: flex; margin-bottom: 30px; }
    .timeline .dt {
      width: 90px;
      flex-shrink: 0;
      text-align: right;
      padding-right: 1.2em;
    }
    .timeline .marker {
      position: relative;
      color: var(--color-gray-light2);
      z-index: 2;
      flex-shrink: 0;
    }
    .timeline .marker.has-issue { color: var(--tag-yellow); }
    .timeline .marker.issue { color: var(--traffic-red); }
    .timeline .marker.pass-done { color: var(--tag-green); }
    .timeline .content {
      flex: 1;
      margin-left: 1.2em;

      .title span { padding-right: .25em; }
      .coords, a {
        color: var(--pl);
        font-weight: normal;
        text-decoration: none;

        &:hover { text-decoration: underline; }
      }

      .description {
        width: 250px;
        word-wrap: break-word;
      }

      .images {
        padding: .5em 0 1em;
        display: flex;
        flex-direction: row;
        gap: .5em;
        flex-wrap: wrap;

        a { display: inline-block; }

        img {
          border: 1px solid var(--bg);
          border-radius: 10px;
          width: 75px;
          height: 75px;
          object-fit: cover;
        }

        &:is(:empty) { display: none }
      }

      .files {
        margin-top: 1em;

        &:is(:empty) { display: none }
      }
    }
  }

  .panel:first-child .body, .timeline-container {
    height: 570px;
    overflow-y: auto;
    padding-right: .75em;
    scrollbar-width: auto;
    &::-webkit-scrollbar { width: 6px }
    &::-webkit-scrollbar-track { background: var(--color-gray-lighter); border-radius: 3px; }
    &::-webkit-scrollbar-thumb { background: var(--color-gray-light); border-radius: 3px; }
    &::-webkit-scrollbar-thumb:hover { background: var(--color-gray-medium); }
  }

  button:not(:disabled):hover, a.button:hover, .reasons .tag-button:hover, .msymbol.close:hover {
    border-color: #feb01f;
    background-color: var(--focus-border);
    color: var(--white);
    transition: border-color .6s, background-color .6s;
  }
  button:disabled { color: var(--grey-text); }
}

/*
.shp-loading {
  padding: 12px 24px;
  border-radius: 10px;
}
*/

#shp-cancel-curtain {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #263E5080 !important;
  backdrop-filter: blur(4px);
  z-index: 1000;
}
.cancel-shp {
  --bg: #F4F5F7;
  --focus-border: #FFA600;
  --focus-bg: #FFF8DD;
  --color-light-gray-blue: #e1e4ea;

  width: 500px;
  animation: fadeInOpacity ease .3s;
  box-sizing: border-box;
  border: 1px solid var(--pl-platinum);
  border-radius: .5em;
  background-color: var(--bg) !important;
  display: flex;
  flex-direction: column;
  gap: .75em;
  padding: 1.5em .875em 1em;

  .msymbol.close { font-size: 1.2em; background-color: var(--box-border); padding: .25em; border-radius: 4px; cursor: pointer; }

  .head { padding-bottom: 0 }

  .input {
    input {
      width: 100%;
      box-sizing: border-box;
      background-color: transparent;
      outline: none;
      border: 1px solid var(--color-gray-blue);
      border-radius: 6px;
      height: calc(2.2em - 2px);
      padding-left: 8px;
      padding-right: 8px;

      &:focus {
        border-color: var(--focus-border);
        background-color: var(--focus-bg);
        transition: border-color .6s, background-color .6s;
      }
    }
  }

  .reasons {
    .tag-button {
      background-color: var(--color-light-gray-blue);
      border-color: var(--color-light-gray-blue);
      justify-content: center;
      margin-bottom: 8px;
      min-width: 1.5em;
      margin-right: .5em;
      cursor: pointer;
      font-weight: bold;

      /*&:hover, &.selected { border-color: var(--pl); background-color: var(--pl); color: var(--white); }*/
    }
  }
}