:root {
  --navy: #0c2a7a;
  --navy2: #071c5e;
  --blue: #1e63ef;
  --ink: #12205c;
  --muted: #5f6f9a;
  --bg: #f3f7ff;
  --line: #dbe5f6;
  --white: #fff;
  --green: #10a56f;
  --purple: #7042eb;
  --orange: #ff7a24;
  --red: #e93e66;
  --shadow: 0 10px 28px rgba(13, 41, 113, .08);
  --radius: 15px;
}


/* =========================================================
   GLOBAL
   ========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-top: 20px;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: var(--ink);

  background:
    linear-gradient(
      180deg,
      #f7faff 0,
      #edf4ff 100%
    );

  font-size: 14px;
}

a {
  text-decoration: none;
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

.icon {
  width: 22px;
  height: 22px;
  display: block;
}


/* =========================================================
   PAGE LAYOUT
   ========================================================= */

.main {
  width: 100%;
  min-height: 100vh;
}

.content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}


/* =========================================================
   PAGE HERO
   ========================================================= */

.page-hero {
  min-height: 132px;
  height: auto;

  border-radius: 15px;
  overflow: hidden;

  position: relative;

  color: #fff;

  background:
    linear-gradient(
      90deg,
      #08236d 0%,
      #0e3194 55%,
      rgba(14, 49, 148, .35) 100%
    ),
    url("/assets/dashboard-assets/banner-mountain.png");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;

  display: flex;
  align-items: center;

  padding: 18px 34px;
  margin-bottom: 16px;

  box-shadow: var(--shadow);
}

.page-hero::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 28, 94, .12),
      rgba(7, 28, 94, 0)
    );
}

.page-hero .hero-copy {
  position: relative;
  z-index: 2;

  max-width: 64%;

  padding: 3px 0;
}

.page-hero h1 {
  font-size: 42px;
  line-height: 1.08;

  margin: 0 0 8px;

  letter-spacing: -.025em;
}

.page-hero p {
  margin: 0;

  color: rgba(255, 255, 255, .9);

  font-size: 18px;
  line-height: 1.35;
}


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

.grid {
  display: grid;
  gap: 14px;
}

.g4 {
  grid-template-columns: repeat(4, 1fr);
}


/* =========================================================
   CARDS
   ========================================================= */

.card {
  background: #fff;

  border: 1px solid #e0e8f6;
  border-radius: 14px;

  box-shadow:
    0 7px 20px rgba(14, 41, 114, .045);
}

.panel {
  padding: 16px;
}


/* =========================================================
   ICON TILES
   ========================================================= */

.tile-icon {
  height: 44px;
  width: 44px;

  border-radius: 12px;

  display: grid;
  place-items: center;
}

.blue {
  background: #e9f1ff;
  color: #1f65ef;
}

.green {
  background: #e4f8ef;
  color: #0b9d6b;
}

.purple {
  background: #efe8ff;
  color: #6f3eeb;
}

.orange {
  background: #fff0e3;
  color: #f27418;
}

.pink {
  background: #ffe7ef;
  color: #d63b6a;
}


/* =========================================================
   STAT CARDS
   ========================================================= */

.stat-card {
  padding: 16px;

  display: flex;
  align-items: center;

  gap: 14px;

  min-height: 86px;
}

.stat-card .val {
  font-size: 25px;
  font-weight: 850;

  color: #0e246e;

  line-height: 1;
}

.stat-card .label {
  font-size: 13px;
  font-weight: 700;
}

.stat-card .sub {
  font-size: 11px;

  color: #7583a5;

  margin-top: 4px;
}


/* =========================================================
   FILTERS
   ========================================================= */

.filters {
  padding: 14px 16px;

  display: grid;

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

  gap: 14px;

  align-items: end;

  margin-bottom: 14px;
}

.filters label {
  min-width: 0;

  font-size: 11px;
  font-weight: 750;

  color: #26396e;
}

.filters .select {
  margin-top: 6px;
}


/* =========================================================
   SELECT INPUTS
   ========================================================= */

.select {
  width: 100%;
  height: 42px;

  border: 1px solid var(--line);
  border-radius: 10px;

  padding: 0 38px 0 14px;

  background-color: #fff;

  color: #25366d;

  font-weight: 600;

  outline: none;

  cursor: pointer;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.select:hover {
  border-color: #c1d0eb;
}

.select:focus {
  border-color: #2c68eb;

  background-color: #fff;

  box-shadow:
    0 0 0 3px rgba(30, 99, 239, .10);
}


/* =========================================================
   CLEAR FILTERS BUTTON
   ========================================================= */

.filters .link {
  height: 42px;

  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;

  border: 1px solid #d5e0f3;
  border-radius: 9px;

  background: #f4f7fd;

  color: #40547f;

  font-size: 12px;
  font-weight: 750;

  cursor: pointer;

  user-select: none;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.filters .link:hover {
  background: #eaf1ff;

  border-color: #b7caec;

  color: #164fc7;

  box-shadow:
    0 4px 12px rgba(22, 79, 199, .08);
}

.filters .link:active {
  transform: translateY(1px);

  box-shadow: none;
}

.filters .link:focus-visible {
  outline: 3px solid rgba(30, 99, 239, .16);
  outline-offset: 2px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  min-height: 42px;
  height: 42px;

  border-radius: 9px;

  border: 1px solid #1d5df0;

  background: #fff;

  color: #0e4bdc;

  padding: 0 22px;

  font-weight: 750;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.btn:hover {
  box-shadow:
    0 5px 14px rgba(14, 41, 114, .10);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 3px solid rgba(30, 99, 239, .16);
  outline-offset: 2px;
}

.btn.primary {
  background:
    linear-gradient(
      135deg,
      #0a2577,
      #071c61
    );

  border-color: #0a2577;

  color: #fff;

  box-shadow:
    0 4px 10px rgba(7, 28, 97, .12);
}

.btn.primary:hover {
  background:
    linear-gradient(
      135deg,
      #10338f,
      #092574
    );

  border-color: #10338f;

  box-shadow:
    0 6px 16px rgba(7, 28, 97, .18);
}

.btn.soft {
  border-color: #d6e1f5;

  background: #eff5ff;

  color: #174fc5;
}

.btn.soft:hover {
  background: #e4eeff;

  border-color: #c5d5f1;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;
}

.section-title .left {
  display: flex;
  align-items: center;

  gap: 10px;
}

.section-title h2 {
  font-size: 21px;

  margin: 0;

  color: #112668;
}

.section-title p {
  font-size: 12px;

  color: #6879a0;

  margin: 3px 0 0;
}


/* =========================================================
   TRANSACTION SEARCH
   ========================================================= */

.transactions-search-wrap {
  width: 100%;

  margin: 14px 0 16px;
}

.transactions-search {
  position: relative;

  width: 100%;
  max-width: 540px;

  display: flex;
  align-items: center;
}

.transactions-search .icon {
  position: absolute;

  left: 15px;
  z-index: 2;

  width: 19px;
  height: 19px;

  color: #7180a4;

  pointer-events: none;

  transition:
    color .18s ease;
}

.transactions-search-input {
  width: 100%;
  height: 44px;

  padding:
    0
    44px
    0
    44px;

  border: 1px solid #d9e3f3;
  border-radius: 11px;

  background: #f8faff;

  color: #18295f;

  font-size: 13px;
  font-weight: 550;

  line-height: normal;

  outline: none;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.transactions-search-input::placeholder {
  color: #8b98b8;

  font-weight: 500;

  opacity: 1;
}

.transactions-search-input:hover {
  border-color: #c2d1eb;

  background: #fff;
}

.transactions-search-input:focus {
  background: #fff;

  border-color: #2c68eb;

  box-shadow:
    0 0 0 3px rgba(30, 99, 239, .11),
    0 4px 14px rgba(14, 41, 114, .06);
}

.transactions-search:focus-within .icon {
  color: #1e63ef;
}


/* Chrome / Safari native search clear control */

.transactions-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}


/* =========================================================
   TRANSACTION TABLE
   ========================================================= */

.table-wrap {
  overflow-x: auto;

  width: 100%;

  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;

  border-collapse: collapse;
}

.table th,
.table td {
  padding: 12px 13px;

  border-bottom:
    1px solid #e3eaf6;

  text-align: left;

  font-size: 12px;
}

.table th {
  background: #f4f7fc;

  color: #314374;

  font-weight: 750;
}

.table td {
  color: #263666;
}

.table tbody tr {
  transition:
    background-color .15s ease;
}

.table tbody tr:hover {
  background: #fafcff;
}

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

.meta {
  font-size: 11px;

  color: #6878a0;
}


/* =========================================================
   TRANSACTION STATUS PILLS
   ========================================================= */

.pill {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 6px 12px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;
}

.pill .icon {
  width: 15px;
  height: 15px;
}

.paid {
  background: #e2f8ed;

  color: #0b8b60;
}

.pending {
  background: #fff0df;

  color: #c96400;
}

.refunded {
  background: #ffe7ef;

  color: #c12655;
}


/* =========================================================
   ACCESSIBILITY / INTERACTION
   ========================================================= */

button:disabled,
.btn:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;

  opacity: .6;
}


/* =========================================================
   RESPONSIVE - LARGE TABLET
   ========================================================= */

@media (max-width: 1200px) {

  .content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .g4 {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .page-hero .hero-copy {
    max-width: 75%;
  }

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

  .table {
    min-width: 850px;
  }

  .table-wrap {
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 900px) {

  .g4 {
    grid-template-columns: 1fr;
  }

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

  .filters .link,
  .filters .btn {
    width: 100%;
  }

  .page-hero {
    padding: 18px 24px;
  }

  .page-hero .hero-copy {
    max-width: 100%;
  }

  .page-hero h1 {
    font-size: 32px;
  }

  .page-hero p {
    font-size: 15px;
  }

  .section-title {
    align-items: flex-start;
  }

  .stat-card {
    min-height: 80px;
  }

  .transactions-search {
    max-width: 100%;
  }
}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 600px) {

  body {
    padding-top: 12px;
  }

  .content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-hero {
    border-radius: 12px;

    padding: 20px;
  }

  .page-hero h1 {
    font-size: 28px;
  }

  .page-hero p {
    font-size: 14px;
  }

  .panel {
    padding: 12px;
  }

  .stat-card {
    padding: 14px;
  }

  .stat-card .val {
    font-size: 22px;
  }

  .section-title {
    flex-direction: column;

    align-items: stretch;
  }

  .section-title .left {
    width: 100%;
  }

  .section-title .btn {
    width: 100%;
  }

  .filters {
    padding: 12px;

    grid-template-columns: 1fr;

    gap: 12px;
  }

  .filters .btn,
  .filters .link {
    width: 100%;
  }

  .select {
    height: 44px;
  }

  .btn {
    width: auto;

    min-height: 44px;
    height: 44px;
  }

  .transactions-search-wrap {
    margin:
      12px
      0
      14px;
  }

  .transactions-search {
    width: 100%;
    max-width: none;
  }

  .transactions-search-input {
    height: 46px;

    font-size: 14px;

    border-radius: 10px;
  }

  .table {
    min-width: 850px;
  }
}