/* ========================================
   VOUCHER MANAGEMENT
======================================== */

.voucher-management{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.voucher-management__header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

.voucher-management__header span{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:#4F6EF7;
    margin-bottom:6px;
}

.voucher-management__header h2{
    margin:0;
    font-size:32px;
    font-weight:800;
}

.voucher-management__header p{
    margin:10px 0 0;
    color:#667085;
}

.voucher-management-page-count{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:140px;
    height:42px;
    border-radius:999px;
    background:#EEF4FF;
    color:#335CFF;
    font-size:13px;
    font-weight:700;
}

.voucher-management__filters{
    display:grid;
    grid-template-columns:
        2fr
        repeat(4,1fr);
    gap:14px;
}

.voucher-management-search{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    height:46px;
    border:1px solid #E4E7EC;
    border-radius:12px;
    background:#fff;
}

.voucher-management-search svg{
    width:18px;
    height:18px;
    stroke:#98A2B3;
    fill:none;
    stroke-width:2;
}

.voucher-management-search input{
    flex:1;
    border:none;
    outline:none;
    background:none;
    font-size:14px;
}

.voucher-management__filters select{
    height:46px;
    border-radius:12px;
    border:1px solid #E4E7EC;
    padding:0 14px;
    background:#fff;
    font-size:14px;
}


/* ========================================
   VOUCHER TABLE
======================================== */

.voucher-management-table-wrap {
  position: relative;

  width: 100%;

  overflow: visible;

  border: 1px solid #e4e7ec;

  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 12px 35px
    rgba(15, 23, 42, 0.06);
}


.voucher-management-table {
  width: 100%;

  min-width: 1180px;

  border-collapse: collapse;
}


.voucher-management-table th,
.voucher-management-table td {
  padding: 14px 13px;

  border-bottom: 1px solid #e4e7ec;

  text-align: left;

  vertical-align: middle;
}


.voucher-management-table th {
  color: #667085;

  background: #f8fafc;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.05em;

  text-transform: uppercase;
}


.voucher-management-table tbody tr {
  background: #ffffff;

  transition:
    background-color
    150ms ease;
}


.voucher-management-table tbody tr:hover {
  background: #fbfdff;
}


.voucher-management-table tbody tr:last-child td {
  border-bottom: 0;
}


/* ========================================
   VOUCHER IDENTITY
======================================== */

.voucher-management-table__voucher {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 10px;
}


.voucher-management-table__icon {
  width: 36px;

  height: 36px;

  flex: 0 0 36px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  color: #2563eb;

  background: #eff6ff;
}


.voucher-management-table__icon svg {
  width: 18px;

  height: 18px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.9;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.voucher-management-table__voucher > div {
  min-width: 0;
}


.voucher-management-table__voucher strong,
.voucher-management-table__value {
  display: block;

  overflow: hidden;

  color: #101828;

  font-size: 12px;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.voucher-management-table small {
  display: block;

  overflow: hidden;

  margin-top: 4px;

  color: #667085;

  font-size: 10px;

  line-height: 1.4;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* ========================================
   USAGE DISPLAY
======================================== */

.voucher-management-usage {
  min-width: 250px;
}


.voucher-management-usage__top,
.voucher-management-usage__bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;
}


.voucher-management-usage__top strong {
  color: #101828;

  font-size: 12px;

  font-weight: 850;
}


.voucher-management-usage__top span,
.voucher-management-usage__bottom span {
  color: #667085;

  font-size: 10px;

  font-weight: 650;

  white-space: nowrap;
}


.voucher-management-usage__track {
  width: 100%;

  height: 8px;

  margin: 9px 0;

  overflow: hidden;

  border-radius: 999px;

  background: #eaf0f7;
}


.voucher-management-usage__track > span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #60a5fa
    );
}


/* ========================================
   STATUS BADGES
======================================== */

.voucher-management-badge {
  min-height: 25px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 4px 8px;

  border: 1px solid transparent;

  border-radius: 999px;

  font-size: 10px;

  font-weight: 800;

  white-space: nowrap;
}


.voucher-management-badge > span {
  width: 6px;

  height: 6px;

  flex: 0 0 6px;

  border-radius: 50%;
}


.voucher-management-badge.is-success {
  color: #067647;

  border-color:
    rgba(7, 148, 85, 0.15);

  background: #ecfdf3;
}


.voucher-management-badge.is-success > span {
  background: #079455;
}


.voucher-management-badge.is-blue {
  color: #1d4ed8;

  border-color:
    rgba(37, 99, 235, 0.15);

  background: #eff6ff;
}


.voucher-management-badge.is-blue > span {
  background: #2563eb;
}


.voucher-management-badge.is-warning {
  color: #b54708;

  border-color:
    rgba(245, 158, 11, 0.2);

  background: #fffaeb;
}


.voucher-management-badge.is-warning > span {
  background: #f59e0b;
}


.voucher-management-badge.is-danger {
  color: #b42318;

  border-color:
    rgba(217, 45, 32, 0.15);

  background: #fff1f0;
}


.voucher-management-badge.is-danger > span {
  background: #d92d20;
}


.voucher-management-badge.is-neutral {
  color: #667085;

  border-color: #e4e7ec;

  background: #f2f4f7;
}


.voucher-management-badge.is-neutral > span {
  background: #98a2b3;
}


/* ========================================
   ACTION MENU
======================================== */

.voucher-management-actions {
  position: relative;

  display: flex;

  justify-content: flex-end;
}


.voucher-management-action-trigger {
  width: 34px;

  height: 34px;

  display: grid;

  place-items: center;

  padding: 0;

  border: 1px solid #e4e7ec;

  border-radius: 10px;

  color: #344054;

  background: #ffffff;

  cursor: pointer;
}


.voucher-management-action-trigger:hover,
.voucher-management-action-trigger[
  aria-expanded="true"
] {
  color: #1d4ed8;

  border-color:
    rgba(37, 99, 235, 0.25);

  background: #eff6ff;
}


.voucher-management-action-trigger svg {
  width: 18px;

  height: 18px;

  fill: currentColor;

  stroke: currentColor;
}


.voucher-management-actions__menu {
  position: absolute;

  top: calc(100% + 8px);

  right: 0;

  z-index: 200;

  width: 190px;

  display: none;

  padding: 7px;

  border: 1px solid #e4e7ec;

  border-radius: 14px;

  background: #ffffff;

  box-shadow:
    0 18px 45px
    rgba(15, 23, 42, 0.18);
}


.voucher-management-actions__menu.is-open {
  display: grid;
}


.voucher-management-actions__menu button {
  width: 100%;

  padding: 9px 10px;

  border: 0;

  border-radius: 9px;

  color: #344054;

  background: transparent;

  text-align: left;

  font: inherit;

  font-size: 11px;

  font-weight: 750;

  cursor: pointer;
}


.voucher-management-actions__menu button:hover {
  color: #1d4ed8;

  background: #eff6ff;
}


.voucher-management-actions__menu > span {
  height: 1px;

  margin: 5px 4px;

  background: #e4e7ec;
}


/* Keep the last row menu visible */

.voucher-management-table
tbody
tr:last-child
.voucher-management-actions__menu {
  top: auto;

  bottom: calc(100% + 8px);
}


/* ========================================
   TABLE STATES
======================================== */

.voucher-management-table-state {
  padding: 48px 20px !important;

  color: #667085;

  text-align: center !important;

  font-size: 12px;

  font-weight: 700;
}


.voucher-management-table-state.is-error {
  color: #b42318;
}


.voucher-management-empty {
  min-height: 300px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 40px 22px;

  text-align: center;
}


.voucher-management-empty[hidden] {
  display: none;
}


.voucher-management-empty > span {
  width: 58px;

  height: 58px;

  display: grid;

  place-items: center;

  border-radius: 18px;

  color: #2563eb;

  background: #eff6ff;
}


.voucher-management-empty > span svg {
  width: 25px;

  height: 25px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.9;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.voucher-management-empty h3 {
  margin: 16px 0 0;

  color: #101828;

  font-size: 16px;

  font-weight: 900;
}


.voucher-management-empty p {
  margin: 7px 0 0;

  color: #667085;

  font-size: 12px;
}


/* ========================================
   PAGINATION
======================================== */

.voucher-management-pagination {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 12px;

  padding: 16px 18px;

  border-top: 1px solid #e4e7ec;
}


.voucher-management-pagination span {
  min-width: 74px;

  color: #344054;

  font-size: 11px;

  font-weight: 800;

  text-align: center;
}


.voucher-management-pagination button:disabled {
  opacity: 0.45;

  cursor: not-allowed;
}






/* ========================================
   VIEW VOUCHER MODAL
======================================== */

body.voucher-management-view-modal-open {
  overflow: hidden;
}


.voucher-management-view-modal {
  position: fixed;

  inset: 0;

  z-index: 4000;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 24px;

  background:
    rgba(
      7,
      11,
      20,
      0.74
    );

  backdrop-filter:
    blur(
      8px
    );
}


.voucher-management-view-modal.is-open {
  display: flex;
}


.voucher-management-view-modal__dialog {
  width:
    min(
      940px,
      100%
    );

  max-height:
    calc(
      100vh -
      48px
    );

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius: 26px;

  background: #ffffff;

  box-shadow:
    0 34px 90px
    rgba(
      7,
      11,
      20,
      0.34
    );
}


/* ========================================
   MODAL HEADER
======================================== */

.voucher-management-view-modal__header {
  flex: 0 0 auto;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 22px;

  padding: 24px 26px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(
        53,
        112,
        243,
        0.38
      ),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #070b14,
      #0d1729,
      #173675
    );
}


.voucher-management-view-modal__header span {
  display: block;

  margin-bottom: 7px;

  color: #ffcc33;

  font-size: 10px;

  font-weight: 850;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.voucher-management-view-modal__header h2 {
  margin: 0;

  color: #ffffff;

  font-size: 24px;

  font-weight: 900;
}


.voucher-management-view-modal__close {
  width: 38px;

  height: 38px;

  flex:
    0 0 38px;

  display: grid;

  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius: 12px;

  color: #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );

  font-size: 22px;

  cursor: pointer;
}


.voucher-management-view-modal__close:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.14
    );
}


/* ========================================
   MODAL CONTENT
======================================== */

.voucher-management-view-modal__content {
  min-height: 0;

  flex: 1;

  padding: 24px 26px;

  overflow-y: auto;

  background: #ffffff;
}


/* ========================================
   VOUCHER SUMMARY
======================================== */

.voucher-management-view-summary {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  padding: 20px;

  border:
    1px solid
    rgba(
      37,
      99,
      235,
      0.14
    );

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(
        37,
        99,
        235,
        0.08
      ),
      #ffffff
    );
}


.voucher-management-view-summary > div {
  min-width: 0;
}


.voucher-management-view-summary > div > span {
  display: block;

  color: #1d4ed8;

  font-size: 10px;

  font-weight: 850;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.voucher-management-view-summary h3 {
  margin: 7px 0 0;

  color: #101828;

  font-size: 30px;

  font-weight: 950;

  letter-spacing: -0.04em;
}


.voucher-management-view-summary p {
  margin: 8px 0 0;

  color: #667085;

  font-size: 12px;

  line-height: 1.55;
}


/* ========================================
   MODAL USAGE CARD
======================================== */

.voucher-management-view-usage {
  margin-top: 16px;

  padding: 18px;

  border:
    1px solid #dbe5f0;

  border-radius: 16px;

  background: #f8fbff;
}


.voucher-management-view-usage__top,
.voucher-management-view-usage__bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;
}


.voucher-management-view-usage__top strong {
  color: #101828;

  font-size: 14px;

  font-weight: 900;
}


.voucher-management-view-usage__top span,
.voucher-management-view-usage__bottom span {
  color: #667085;

  font-size: 11px;

  font-weight: 700;
}


.voucher-management-view-usage__track {
  width: 100%;

  height: 10px;

  margin: 12px 0;

  overflow: hidden;

  border-radius: 999px;

  background: #e5edf7;
}


.voucher-management-view-usage__track > span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #60a5fa
    );
}


/* ========================================
   DETAIL SECTIONS
======================================== */

.voucher-management-view-section {
  margin-top: 24px;

  padding-top: 21px;

  border-top: 1px solid #e4e7ec;
}


.voucher-management-view-section > header {
  margin-bottom: 14px;
}


.voucher-management-view-section > header span {
  display: block;

  margin-bottom: 5px;

  color: #2563eb;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.voucher-management-view-section > header h4 {
  margin: 0;

  color: #101828;

  font-size: 15px;

  font-weight: 900;
}


/* ========================================
   DETAILS GRID
======================================== */

.voucher-management-view-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 12px;
}


.voucher-management-view-item {
  min-width: 0;

  padding: 14px;

  border: 1px solid #e4e7ec;

  border-radius: 14px;

  background: #f8fafc;
}


.voucher-management-view-item span {
  display: block;

  margin-bottom: 6px;

  color: #667085;

  font-size: 9px;

  font-weight: 850;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


.voucher-management-view-item strong {
  display: block;

  overflow-wrap: anywhere;

  color: #101828;

  font-size: 12px;

  font-weight: 850;

  line-height: 1.45;
}


/* ========================================
   MODAL FOOTER
======================================== */

.voucher-management-view-modal__footer {
  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  padding: 16px 26px 22px;

  border-top: 1px solid #e4e7ec;

  background: #ffffff;
}


/* ========================================
   RESPONSIVE LAYOUT
======================================== */

@media (
  max-width:
  1300px
) {

  .voucher-management__filters {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .voucher-management-search {
    grid-column:
      1 /
      -1;
  }

}


@media (
  max-width:
  760px
) {

  .voucher-management__header {
    flex-direction: column;
  }


  .voucher-management__filters {
    grid-template-columns: 1fr;
  }


  .voucher-management-search {
    grid-column: auto;
  }


  .voucher-management-table-wrap {
    overflow: visible;
  }


  .voucher-management-table {
    min-width: 0;
  }


  .voucher-management-table thead {
    display: none;
  }


  .voucher-management-table,
  .voucher-management-table tbody,
  .voucher-management-table tr,
  .voucher-management-table td {
    display: block;

    width: 100%;
  }


  .voucher-management-table tr {
    padding: 15px;

    border-bottom: 1px solid #e4e7ec;
  }


  .voucher-management-table td {
    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding: 8px 0;

    border: 0;
  }


  .voucher-management-table td::before {
    content:
      attr(
        data-label
      );

    flex:
      0 0 100px;

    color: #667085;

    font-size: 9px;

    font-weight: 900;

    text-transform: uppercase;
  }


  .voucher-management-table td:first-child {
    display: block;

    padding-bottom: 14px;
  }


  .voucher-management-table td:first-child::before {
    display: none;
  }


  .voucher-management-usage {
    width: 100%;

    min-width: 0;
  }


  .voucher-management-actions {
    width: 100%;
  }


  .voucher-management-view-modal {
    align-items: flex-end;

    padding: 0;
  }


  .voucher-management-view-modal__dialog {
    width: 100%;

    max-height: 94vh;

    border-radius:
      24px 24px 0 0;
  }


  .voucher-management-view-modal__header {
    padding: 21px 18px;
  }


  .voucher-management-view-modal__content {
    padding: 20px 18px 24px;
  }


  .voucher-management-view-summary {
    flex-direction: column;
  }


  .voucher-management-view-grid {
    grid-template-columns: 1fr;
  }


  .voucher-management-view-usage__top,
  .voucher-management-view-usage__bottom {
    align-items: flex-start;

    flex-direction: column;

    gap: 6px;
  }


  .voucher-management-view-modal__footer {
    padding: 14px 18px 20px;
  }


  .voucher-management-view-modal__footer > * {
    width: 100%;
  }


  .voucher-management-pagination {
    justify-content: space-between;

    padding: 14px;
  }

}