/* PRELIMINARY CSS */

.requisition-entry {
  padding: 2rem;
  border: 4px solid var(--color-base);
  border-radius: 16px;
  background: var(--color-light);

  table thead tr {
    border: 2px solid var(--color-base);
  }

  .--contents {
    display: flex;

    .left {
      padding-right: 2rem;
      flex-grow: 1;
    }

    .right {
      display: flex;
      flex-direction: column;

      a.btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: var(--wa-form-control-height);
        padding: 0 16px;
        border-radius: var(--wa-form-control-border-radius);
        width: max-content;
      }

      .btn+.btn {
        margin-top: 1rem;
      }
    }

    .priority {
      div[class^="priority-"] {
        padding: 6px 8px;
        border-radius: 9999px;
        display: inline-block;
        font-size: 0.85rem;
        border-style: solid;
        border-width: 2px;
      }
      .priority-0 {
        background-color: #f3f4f6;
        color: #4b5563;
        border-color: #9ca3af;
      }
      .priority-1 {
        background-color: #fef3c7;
        color: #b45309;
        border-color: #f59e0b;
      }
      .priority-2 {
        background-color: #ffe4e6;
        color: #be123c;
        border-color: #fb7185;
      }
      .priority-3 {
        background-color: #fecaca;
        color: #b91c1c;
        border-color: #ef4444;
        font-weight: 600;
        border-radius: 4px !important;
      }
    }

    .status-field {
      display: flex;
      align-items: center;

      .lamp {
        width: 36px;
        height: 36px;
        border: 2px solid var(--color-base);
        border-radius: 50%;
        margin-right: 1rem;
      }

      .lamp.status-0 {
        background-color: rgb(112, 154, 228);
      }
      .lamp.status-1 {
        background-color: rgb(207, 228, 112);
      }
      .lamp.status-2 {
        background-color: rgb(228, 158, 112);
      }
      .lamp.status-3 {
        background-color: rgb(112, 228, 118);
      }
      .lamp.status-4 {
        background-color: rgb(131, 112, 228);
      }
      .lamp.status-5 {
        background-color: rgb(228, 112, 112);
      }
    }

    .descr {
      padding: 1rem 2rem;
      word-break: break-all;
      border-left: 4px solid var(--color-base);
    }
  }
}

.requisition-entry+.requisition-entry {
  margin-top: 3rem;
}