/* general page style */
.shipment-list {
  font-family: "IBM-Plex" !important;

  .awesomeTable.enhanceTable {
    position: relative;
  }
}

/* Start Shipment Details Sidenav */
.shipment-details {
  font-family: "IBM-Plex" !important;
  md-tabs-wrapper md-prev-button,
  md-tabs-wrapper md-next-button {
    background: unset;
  }
  md-tabs-wrapper md-prev-button svg {
    transform: scale(-1);
  }
}
.shipment-details {
  .page-content {
    .layout-row {
      position: relative;

      .edit {
        position: absolute;
        left: 0;
        right: unset;
        top: 68px;
        z-index: 9;
        background: linear-gradient(160deg, #00bcd470, #feb47ba8);
        backdrop-filter: blur(10px);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        max-width: 800px;
        padding: 0 24px;
        border-radius: 16px;

        .child {
          max-width: 100%;

          md-checkbox .md-label {
            padding: unset !important;
            margin-top: unset !important;
          }

          .md-button.md-default-theme[disabled],
          .md-button[disabled] {
            background-color: var(--green-bg);
            color: var(--white-color);
            opacity: 0.7;
            cursor: not-allowed !important;

            /* &:hover {
              background-color: var(--gray-bg) !important;
            } */

            img {
              filter: brightness(0) invert(1);
            }
          }

          .md-button.md-default-theme[disabled],
          .md-button[disabled]:hover {
            background-color: var(--gray-bg);
          }

          .table-wrapper {
            max-height: calc(100% - 42px);
          }
        }

        #header-warp {
          position: static;
          width: 100%;
        }
      }
    }

    md-tabs[md-border-bottom] md-tabs-wrapper {
      border: unset;
    }
  }
}

.shipment-details .awesomeTable.enhanceTable tbody td.total-cell {
  background-color: var(--gray-bg) !important;

  input {
    color: var(--green-bg) !important;
  }
}

.shipment-details .newCode {
  top: 41px !important;
  left: unset !important;
  inset-inline-start: 12px !important;
  padding: unset !important;
  filter: invert(48%) sepia(6%) saturate(305%) hue-rotate(179deg)
    brightness(93%) contrast(89%) !important;
}

.shipment-details .page-content .search-content .actions-buttons {
  display: flex;
  gap: 24px;
  flex-direction: column;
  justify-content: space-evenly;
  background: linear-gradient(45deg, #0096883d, #f3cfae6e);
}

.shipment-details .page-content .search-content md-input-container {
  margin: unset !important;
  padding: unset !important;
}

.shipment-details .page-content .search-content .actions-buttons button {
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer !important;
  font-size: 16px;
  line-height: unset !important;
  margin: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: var(--white-color);
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  width: 100%;
  box-shadow: unset !important;
  min-height: 48px;

  img {
    width: 16px;
    filter: invert(1);
  }
}

.shipment-details-search-container {
  .search-inputs {
    flex-basis: 90%;
  }

  .actions-buttons {
    flex-basis: 10%;
    border: 1px solid var(--border-color);
    padding: 16px;
    border-radius: 16px;
  }
}

/* End Shipment Details Sidenav */
/* start reception */
.reception-page {
  font-family: "IBM-Plex" !important;
}

/* end reception */

/* start reception details */
.reception-details-page {
  font-family: "IBM-Plex" !important;

  .input-container.top {
    align-items: end;

    .search-actions {
      grid-column: span 2;
      margin-inline-start: 20%;

      label {
        margin-bottom: 0 !important;
      }
    }
  }

  .newCode {
    position: absolute;
    left: unset !important;
    inset-inline-start: 12px !important;
    cursor: default;
    top: 40px;
  }

  .card {
    margin-bottom: 16px;
    padding: 8px;
    border-radius: 16px;
    background-color: var(--gray-bg);
    margin-top: 16px;
    box-shadow: none;
    border: 1px solid var(--color-highlight);

    legend {
      color: var(--color-highlight);
    }

    .input-container:last-of-type {
      margin-top: 8px;
    }
  }

  md-checkbox {
    margin-left: unset !important;
  }

  .check-and-radio {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 24px;

    md-input-container {
      width: auto !important;
    }

    .visit-payment-type {
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border-color);
    }
  }

  .search-actions {
    display: flex;
    gap: 8px;
    justify-content: start;
    align-items: end;
    md-input-container {
      width: auto !important;
      flex: unset;
      padding: unset !important;
      margin: unset !important;
    }

    .img-container {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      img {
        width: 40px;
        height: 40px;
      }
    }
  }

  md-checkbox {
    margin-bottom: unset !important;
  }

  md-checkbox .md-label {
    margin-top: unset !important;
  }
}

/* end reception details */
/* start patient list */
.patient-list {
  font-family: "IBM-Plex" !important;
}

/* end patient list */
/* start patient transfer */
.patientTransfer-page {
  font-family: "IBM-Plex" !important;
}

/* end patient transfer */

/* start patient transfer details */
.patient-transfer-details {
  font-family: "IBM-Plex" !important;
  md-checkbox {
    margin-bottom: unset !important;
  }
  md-checkbox .md-label {
    margin-top: unset !important;
  }
  .check-box-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* end patient transfer details */

/* start discharge */
.discharge-list {
  font-family: "IBM-Plex" !important;
}

/* end discharge */
/* start discharge details */
.discharge-details {
  font-family: "IBM-Plex" !important;
}

/* end discharge details */

/* start patient payment details */
.patient-payment-details {
  font-family: "IBM-Plex" !important;

  md-checkbox {
    margin-bottom: unset !important;
  }

  md-checkbox .md-label {
    margin-top: unset !important;
  }

  .check-and-print {
    display: flex;
    align-items: center;
    justify-content: start;

    md-checkbox {
      margin-left: 0 !important;
    }
  }
}

/* end patient payment details */
/* start bed status */

.bed-status-page {
  font-family: "IBM-Plex" !important;

  /* md-menu-content.menu-items-container {
    width: 200px !important;
  } */
  .content_wrapper {
    padding: 0 !important;

    .ng-scope:first-of-type {
      .floor-name {
        margin-top: 0;
      }
    }
  }

  .cardsWrapper {
    padding: 0 !important;
    overflow: hidden;
  }

  /* Make the floor filter (entire bar) sticky */
  .filter-container {
    background: #fff;
    top: 150px;
    position: sticky;
    z-index: 100;
    padding-top: 9px;

    .md-tab {
      color: #656565;
      font-size: 16px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .md-tab.md-active {
      background: #ea4c89;
      color: #fff;
      border-radius: 41px;
      font-weight: 700;
    }

    md-ink-bar.md-right,
    md-tabs md-ink-bar {
      display: none;
    }
  }

  .floor-type {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: bold;
    color: #673ab7;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
    margin-bottom: 12px;
    margin-top: 12px;

    img {
      width: 24px;
      height: 24px;
    }
  }

  .floor-name {
    padding: 8px 16px;
    background-color: var(--gray-bg) !important;
    border-radius: 8px;
    font-size: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;

    img {
      width: 24px;
      height: 24px;
    }
  }

  .beds-cotainer {
    width: 100% !important;

    .cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 8px;

      .cardContent,
      R-card .cardHeader {
        width: 100% !important;
        margin: 0 !important;
      }

      .cardHeader {
        padding: 8px 16px;

        .card-menu-button {
          top: 50% !important;
          transform: translateY(-50%) !important;
          left: unset !important;
          inset-inline-start: 16px !important;
          min-width: unset !important;
          filter: brightness(0);
        }

        .header-title {
          display: flex;
          align-items: center;
          gap: 8px;

          img {
            filter: drop-shadow(0 0 0 blue);
            width: 24px;
            height: 24px;
          }
        }
      }

      .icForCard {
        margin: unset !important;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          position: relative;
          filter: invert(55%) sepia(93%) saturate(1126%) hue-rotate(86deg)
            brightness(90%) contrast(90%);
        }
      }

      .user-details {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        justify-content: center;

        .patientName {
          margin: 0 !important;
          font-weight: 500;
          text-shadow: 0 0 var(--alert-red);
          font-size: 20px;
          letter-spacing: 1px;
          white-space: nowrap !important;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100%;
        }

        img {
          width: 24px;
          height: 24px;
        }
      }

      .doctorName {
        display: none !important;
        position: relative;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        img {
          width: 24px;
          height: 24px;
          filter: brightness(0) invert(1);
        }
      }

      R-card {
        all: unset;
        display: inline-block;
        border-radius: 12px;
        color: var(--white-color);
        transition: all 0.3s ease;
        overflow: hidden;
        border-radius: 8px;
      }

      .dateWrapper {
        all: unset;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        padding-top: 0;
        margin-top: auto;

        .cardtime div,
        .carddate div {
          all: unset;
        }

        .cardtime,
        .carddate {
          display: flex;
          align-items: center;
          gap: 8px;
          background-color: transparent;
          width: auto !important;
          border: unset;

          img {
            width: 20px;
            height: 20px;
          }

          span {
            font-size: 14px;
            color: var(--slate-blue-dark);
            font-weight: bold;
            letter-spacing: 0.3px;
          }
        }
      }

      .cardContent {
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .card-expanded {
        font-weight: bold;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.9),
          rgba(245, 250, 255, 0.9)
        );
        backdrop-filter: blur(8px);
        border-radius: 6px 34px !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 124px;
        display: flex;
        flex-direction: column;
      }

      .bed-container {
        border-radius: 6px 36px;
      }

      /* Available bed - Green background */
      .bed-available {
        border: 2px solid var(--forest-green) !important;

        .header-title {
          img {
            filter: invert(55%) sepia(93%) saturate(1126%) hue-rotate(86deg)
              brightness(90%) contrast(90%);
          }

          img.bed2 {
            filter: unset !important;
            width: 24px;
            height: 24px;
          }
        }
      }

      /* Reserved bed - Red background */
      .bed-reserved {
        border: 2px solid var(--alert-red) !important;
      }

      /* Optional: Add some styling for better appearance */
      .bed-available .card-title,
      .bed-available .cardContent {
        color: var(--dark-color);
      }

      .bed-reserved .card-title,
      .bed-reserved .cardContent,
      .bed-reserved .patientName,
      .bed-reserved .dateWrapper {
        color: var(--dark-color);
      }
    }
  }

  .page-content.side-nav {
    background: linear-gradient(45deg, #c6fffa, #fff1e4);
    margin-right: unset;
    margin-bottom: 8px;
    position: sticky;
    top: 64px;
    z-index: 999;

    .right-nav {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      width: 100%;
      position: unset;
    }

    .md-ripple-container {
      position: relative !important;
    }

    .fileter-buttons {
      padding: 8px 0;

      button {
        padding: 0 !important;
        margin: 0 !important;
        height: 24px !important;
      }

      span {
        color: var(--dark-color) !important;
      }
    }

    .filter-container {
      background-color: #ffffff63;
      border: 1px solid #9da4ae;
      padding: 8px;
      border-radius: 8px;

      .filter-list {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        margin-top: 0;
        justify-content: space-around;

        md-switch {
          margin: 0 !important;
        }
      }
    }
  }
}

/* end bed status */
/* start patient details */
.patient-details-page {
  font-family: "IBM-Plex" !important;

  .img-and-inputs {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    @media (max-width: 1280px) {
      flex-direction: column;
    }
  }

  .imgBox {
    min-width: 160px !important;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    height: auto !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    .image {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      background: #e2e8f0;
      display: flex;
      justify-content: center;
      align-items: center;

      a {
        height: 100%;
        width: 100%;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        /* ✅ makes photos look neat */
        border-radius: 8px;
      }
    }

    .btns {
      margin-top: 8px;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 8px;

      div {
        background: var(--bright-blue);
        /* primary blue */
        color: #fff;
        padding: 4px;
        text-align: center;
        border-radius: 6px;
        transition: 0.2s;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
          background: #1e3a8a;
        }

        i {
          font-size: 14px;
        }
      }

      /* delete button */
      div:last-child {
        background: var(--alert-red);

        &:hover {
          background: #991b1b;
        }
      }
    }
  }
}

/* end patient details */
/* start current patients */
.current-patients-detials {
  font-family: "IBM-Plex" !important;

  .actions-buttons {
    margin-top: 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;

    .md-button.md-icon-button {
      padding: 0 !important;
      margin: 0 !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

/* end current patients */

/* start companion query */
.companion-query {
  font-family: "IBM-Plex" !important;

  .check-search {
    display: flex;
    align-items: start;
    gap: 8px;
    position: relative;

    md-checkbox {
      position: absolute;
      inset-inline-start: 0;
      z-index: 99999;
    }

    label {
      padding-inline-start: 28px !important;
    }
  }
}

/* end companion query */

/* start patient letter list */
.patient-letter-list {
  font-family: "IBM-Plex" !important;
}

/* end patient letter list */
/* start patient letter detail */
.patient-letter-detail {
  font-family: "IBM-Plex" !important;
}

/* end patient letter detail */
/* start curative nights query */
.curative-nights-query {
  font-family: "IBM-Plex" !important;
  .table-wrapper {
    margin-block: 8px !important;
  }
  .Rooms {
    all: unset !important;
    margin-top: 8px !important;
  }
}

/* end curative nights query */
/* start inpatient cases */
.inpatient-cases-details {
  font-family: "IBM-Plex" !important;

  .account-type {
    margin-block: 16px;
    padding-block: 16px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .radio-and-check {
    display: flex;
    gap: 24px;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    margin-top: 16px;
    padding-top: 16px;

    .invoice-type {
      border-inline-start: 2px solid var(--border-color);
      padding-inline-start: 16px;
    }
  }

  .radio-filter {
    background-color: var(--white-color);
    display: block;
    padding: 8px 16px;
    border-radius: 8px;
    margin-bottom: 16px;

    md-radio-button:first-of-type {
      margin-right: unset;
    }
  }
}

/* end inpatient cases */
/* start discharge cases */
.discharge-cases-details {
  font-family: "IBM-Plex" !important;

  .radio-and-check {
    display: flex;
    gap: 24px;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
    margin-top: 16px;
    padding-top: 16px;

    .invoice-type {
      border-inline-start: 2px solid var(--border-color);
      padding-inline-start: 16px;
    }
  }

  .account-type {
    margin-block: 16px;
    padding-block: 16px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .radio-filter {
    background-color: var(--white-color);
    display: block;
    padding: 8px 16px;
    border-radius: 8px;
    margin-bottom: 16px;

    md-radio-button:first-of-type {
      margin-right: unset;
    }
  }
}

/* end discharge cases */
/* start current patients */
.current-patients3-detials {
  font-family: "IBM-Plex" !important;
}

/* end current patients */
/* start print barcode details */
.print-barcode-details {
  font-family: "IBM-Plex" !important;
}

/* end print barcode details */
/* start medical params list */
.medical-params-list {
  font-family: "IBM-Plex" !important;
}

/* end medical params list */
/* start inpatient in out service execution list */
.inpatient-in-out-service-execution-list {
  font-family: "IBM-Plex" !important;
}

/* end inpatient in out service execution list */
/* start inpatient in out service execution detail */
.inpatient-in-out-service-execution-detail {
  font-family: "IBM-Plex" !important;

  .edit-button {
    margin-inline-start: 8px !important;
  }
  .patient-opened {
    color: var(--color-highlight);
    background-color: var(--white-color);
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .action-buttons {
    gap: 1px !important;
  }

  .div-header {
    background-color: var(--gray-bg);
    color: var(--color-highlight);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 8px;
    padding: 8px 16px 8px 0;
    font-weight: bold;
    img {
      filter: invert(17%) sepia(73%) saturate(6249%) hue-rotate(287deg)
        brightness(58%) contrast(102%);
    }
  }

  .total {
    color: var(--color-highlight);
  }
}

/* end inpatient in out service execution detail */
/* START style menu  */
.md-open-menu-container.md-active > md-menu-content > * {
  border-bottom: 1px solid var(--border-color);
}

md-menu-content {
  padding: 0 !important;
  font-family: "IBM-Plex" !important;

  span {
    font-family: "IBM-Plex" !important;
  }
}

.menu-items-container {
  padding: 0;

  span {
    font-family: "IBM-Plex" !important;
  }

  .md-button.md-ink-ripple {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* end style menu */

/* end current patients */

/* start emergency document list */
.emergency-document-list {
  font-family: "IBM-Plex" !important;
}

/* end emergency document list */

/* start emergency document detail */
.emergency-document-details {
  font-family: "IBM-Plex" !important;
}

/* end emergency document detail */

/* start orders package list */
.orders-package-list {
  font-family: "IBM-Plex" !important;
}

/* end orders package list */

/* start orders package detail */
.orders-package-detail {
  font-family: "IBM-Plex" !important;
}

/* end orders package detail */

/* start emergency not applicable case list */
.emergency-not-applicable-case-list {
  font-family: "IBM-Plex" !important;
}

/* end emergency not applicable case list */

/* start emergency not applicable case detail */
.emergency-not-applicable-case-detail {
  font-family: "IBM-Plex" !important;
}

/* end emergency not applicable case detail */

/* start patient invoice list */
.patient-invoice-list {
  font-family: "IBM-Plex" !important;
}

/* end patient invoice list */

/* start reception triage list */
.reception-triage-list {
  font-family: "IBM-Plex" !important;
}

/* end reception triage list */

/* start reception triage detail */
.reception-triage-detail {
  font-family: "IBM-Plex" !important;
  .card {
    margin-bottom: 16px;
    padding: 8px;
    border-radius: 16px;
    background-color: var(--gray-bg);
    margin-top: 16px;
    box-shadow: none;
    border: 1px solid var(--color-highlight);
    legend {
      color: var(--color-highlight);
    }
  }
  .actions {
    display: flex;
    align-items: end;
    gap: 4px;
    button {
      min-width: fit-content;
    }
  }
}

/* end reception triage detail */

/* end reception triage detail */
/* start patient assessment detail */
.patient-assessment-detials {
  font-family: "IBM-Plex" !important;

  .input-container {
    align-items: end;
  }

  @media (min-width: 1200px) {
    .input-container.main {
      grid-template-columns: repeat(5, 1fr);
    }

    .input-container.sub {
      margin-top: 16px;
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/* end patient assessment detail */
/* start triage assessment list */
.triage-assessment-list {
  font-family: "IBM-Plex" !important;

  .gender,
  .patient-name {
    input {
      width: fit-content !important;
    }
  }

  @media (min-width: 1200px) {
    .input-container {
      grid-template-columns: repeat(5, 1fr);
    }
  }
}

/* end triage assessment list */

/* start medical param detail */
.medical-param-detail {
  font-family: "IBM-Plex" !important;

  .imgBox {
    min-width: 160px !important;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    height: fit-content !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;

    .image {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      background: #e2e8f0;
      display: flex;
      justify-content: center;
      align-items: center;

      a {
        height: 100%;
        width: 100%;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        border-radius: 8px;
      }
    }
  }

  .btns {
    margin-top: 8px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;

    div {
      background: var(--bright-blue);
      /* primary blue */
      color: #fff;
      padding: 4px;
      text-align: center;
      border-radius: 6px;
      transition: 0.2s;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        background: #1e3a8a;
      }

      i {
        font-size: 14px;
      }
    }

    /* delete button */
    div:last-child {
      background: var(--alert-red);

      &:hover {
        background: #991b1b;
      }
    }
  }
}

/* end medical param detail */