:root {
  color-scheme: dark;
}

body {
  background: #1c1c1c;
  background-image: radial-gradient(circle at 72% 63%,
      rgba(132, 94, 20, 0.2),
      transparent 34%);
}

.main-shell {
  background: #050505;
  box-shadow: 0 15px 48px rgba(0, 0, 0, 0.55);
}

.sidebar {
  background: #1c1c1c;
}

.nav-item:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(ellipse at center,
      rgba(237, 188, 77, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%);

  width: 100%;
  height: 1px;
  transition: opacity 0.2s;
  pointer-events: none;
}

.nav-active,
.nav-item:hover {
  background: linear-gradient(100deg, #e7b339, #a96c14);
  color: #1c1c1c;
  border-radius: 10px 0 0 10px;
}

/* Settings navigation and its expanded tree */
.settings-nav-item {
  min-height: 56px;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(100deg, #e7b339, #a96c14);
  color: #1c1c1c;
  font-size: 18px;
  font-weight: 500;
}

.settings-nav-item img {
  filter: brightness(0) saturate(100%);
}

/* ==========================================================================
   Sidebar navigation — single source of truth
   ========================================================================== */
.nav-item {
  position: relative;
  transition: background 0.2s;
  font-size: 18px;
  font-weight: 500;
}

.nav-active img,
.nav-item:hover img {
  filter: brightness(0) saturate(100%);
}

.settings-submenu {
  position: relative;
  margin: 0 0 8px 16px;
  padding: 8px 0 0 25px;
}

.settings-submenu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 17px;
  left: 6px;
  width: 1px;
  background: #565656;
}

.settings-submenu a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 36px;
  color: #ededed;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 300;
  text-decoration: none;
  transition: color 0.2s;
}

.settings-submenu a::before {
  content: "";
  position: absolute;
  left: -19px;
  width: 13px;
  height: 1px;
  background: #565656;
  top: 17px;
}

.settings-submenu a:hover,
.settings-submenu a[aria-current="page"] {
  color: #e7b339;
}

.sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

.has-submenu button {
  width: 100%;
}

/* ==========================================================================
   Ultimate Chess Dashboard — Global responsive overrides
   Loaded on every page AFTER the Tailwind CDN so these rules win on
   equal specificity. Scales down gaps, spacing and font sizes on
   laptop-class screens (1560px and below).
   ========================================================================== */

/* --------------------------------------------------------------------------
   <= 1560px  (standard laptops)  — ~12% reduction
   -------------------------------------------------------------------------- */
@media (max-width: 1920px) {
  .space-y-12> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2.4rem * calc(1 - var(--tw-space-y-reverse))) !important;
    margin-bottom: calc(2.4rem * var(--tw-space-y-reverse)) !important;
  }
}

@media (max-width: 1530px) {
  .space-y-12> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))) !important;
    margin-bottom: calc(3rem * var(--tw-space-y-reverse)) !important;
  }

  html {
    font-size: 15px;
  }

  .gap-\[3rem\] {
    gap: 1.5rem !important;
  }

  /* ---- Metric cards: shrink the 20px labels further ---- */
  .metric-card .text-\[20px\],
  .metric-card [style*="font-size: 20px"],
  .metric-card [style*="font-size:20px"] {
    font-size: 16px !important;
  }

  /* ---- Font sizes ---- */
  .text-\[11px\] {
    font-size: 10px;
  }

  .text-\[12px\] {
    font-size: 11px;
  }

  .text-\[13px\] {
    font-size: 12px;
  }

  .text-\[14px\] {
    font-size: 13px !important;
  }

  .text-\[15px\] {
    font-size: 14px;
  }

  .text-\[16px\] {
    font-size: 14px !important;
  }

  .text-\[17px\] {
    font-size: 15px !important;
  }

  .text-\[18px\] {
    font-size: 16px !important;
  }

  .text-\[20px\] {
    font-size: 17px !important;
  }

  .text-\[22px\] {
    font-size: 19px !important;
  }

  .text-\[24px\] {
    font-size: 20px !important;
  }

  .text-\[26px\] {
    font-size: 22px !important;
  }

  .text-\[28px\] {
    font-size: 23px !important;
  }

  .text-\[30px\] {
    font-size: 25px !important;
  }

  .text-\[32px\] {
    font-size: 26px;
  }

  .text-\[34px\] {
    font-size: 28px !important;
  }

  .text-\[36px\] {
    font-size: 29px !important;
  }

  .text-\[40px\] {
    font-size: 32px !important;
  }

  .text-\[44px\] {
    font-size: 35px !important;
  }

  .text-\[48px\] {
    font-size: 38px !important;
  }

  .text-\[56px\] {
    font-size: 44px !important;
  }

  .text-\[64px\] {
    font-size: 50px;
  }

  .text-xs {
    font-size: 11px;
    line-height: 15px;
  }

  .text-sm {
    font-size: 13px;
    line-height: 18px;
  }

  .text-base {
    font-size: 14px;
    line-height: 20px;
  }

  .text-lg {
    font-size: 16px;
    line-height: 22px;
  }

  .text-xl {
    font-size: 18px;
    line-height: 24px;
  }

  .text-2xl {
    font-size: 20px;
    line-height: 27px;
  }

  .text-3xl {
    font-size: 25px;
    line-height: 31px;
  }

  .text-4xl {
    font-size: 30px;
    line-height: 36px;
  }

  .text-5xl {
    font-size: 38px;
    line-height: 1.1;
  }

  .text-6xl {
    font-size: 48px;
    line-height: 1.1;
  }

  /* ---- Line heights ---- */
  .leading-\[19px\] {
    line-height: 17px;
  }

  .leading-\[20px\] {
    line-height: 18px;
  }

  .leading-\[22px\] {
    line-height: 19px;
  }

  .leading-\[24px\] {
    line-height: 21px;
  }

  .leading-\[26px\] {
    line-height: 22px;
  }

  .leading-\[29px\] {
    line-height: 25px;
  }

  .leading-\[30px\] {
    line-height: 26px;
  }

  .leading-\[34px\] {
    line-height: 29px;
  }

  .leading-\[36px\] {
    line-height: 31px;
  }

  .leading-\[40px\] {
    line-height: 34px;
  }

  /* ---- Gaps ---- */
  .gap-\[3rem\] {
    gap: 2rem;
  }

  .gap-\[10px\] {
    gap: 8px;
  }

  .gap-\[12px\] {
    gap: 10px;
  }

  .gap-\[14px\] {
    gap: 11px;
  }

  .gap-\[15px\] {
    gap: 12px;
  }

  .gap-\[16px\] {
    gap: 13px;
  }

  .gap-\[18px\] {
    gap: 14px;
  }

  .gap-\[20px\] {
    gap: 15px;
  }

  .gap-\[24px\] {
    gap: 18px;
  }

  .gap-\[25px\] {
    gap: 19px;
  }

  .gap-\[30px\] {
    gap: 22px;
  }

  .gap-\[36px\] {
    gap: 26px;
  }

  .gap-\[40px\] {
    gap: 28px;
  }

  .gap-\[48px\] {
    gap: 34px;
  }

  .gap-\[50px\] {
    gap: 35px;
  }

  .gap-2 {
    gap: 0.4rem;
  }

  .gap-3 {
    gap: 0.6rem;
  }

  .gap-4 {
    gap: 0.8rem;
  }

  .gap-5 {
    gap: 1rem;
  }

  .gap-6 {
    gap: 1.2rem;
  }

  .gap-7 {
    gap: 1.4rem;
  }

  .gap-8 {
    gap: 1.6rem;
  }

  .gap-10 {
    gap: 2rem;
  }

  .gap-12 {
    gap: 2.4rem;
  }

  .gap-x-5 {
    column-gap: 1rem;
  }

  .gap-y-5 {
    row-gap: 1rem;
  }

  .gap-x-4 {
    column-gap: 0.8rem;
  }

  .gap-y-4 {
    row-gap: 0.8rem;
  }

  /* ---- Padding (arbitrary) ---- */
  .px-\[16px\] {
    padding-left: 13px;
    padding-right: 13px;
  }

  .px-\[20px\] {
    padding-left: 16px;
    padding-right: 16px;
  }

  .px-\[24px\] {
    padding-left: 18px;
    padding-right: 18px;
  }

  .px-\[26px\] {
    padding-left: 20px;
    padding-right: 20px;
  }

  .px-\[30px\] {
    padding-left: 22px;
    padding-right: 22px;
  }

  .px-\[38px\] {
    padding-left: 28px;
    padding-right: 28px;
  }

  .px-\[40px\] {
    padding-left: 30px;
    padding-right: 30px;
  }

  .px-\[48px\] {
    padding-left: 34px;
    padding-right: 34px;
  }

  .px-\[60px\] {
    padding-left: 42px;
    padding-right: 42px;
  }

  .py-\[8px\] {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .py-\[10px\] {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .py-\[14px\] {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .py-\[16px\] {
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .py-\[18px\] {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .py-\[20px\] {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .py-\[22px\] {
    padding-top: 17px;
    padding-bottom: 17px;
  }

  .py-\[25px\] {
    padding-top: 19px;
    padding-bottom: 19px;
  }

  .py-\[30px\] {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .py-\[40px\] {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .pt-\[25px\] {
    padding-top: 19px;
  }

  .pt-\[30px\] {
    padding-top: 22px;
  }

  .pt-\[40px\] {
    padding-top: 28px;
  }

  .pb-\[25px\] {
    padding-bottom: 19px;
  }

  .pb-\[30px\] {
    padding-bottom: 22px;
  }

  .pb-\[40px\] {
    padding-bottom: 28px;
  }

  .p-\[20px\] {
    padding: 16px;
  }

  .p-\[24px\] {
    padding: 18px;
  }

  .p-\[30px\] {
    padding: 22px;
  }

  /* ---- Padding (scale) ---- */
  .p-2 {
    padding: 0.4rem;
  }

  .p-3 {
    padding: 0.6rem;
  }

  .p-4 {
    padding: 0.8rem;
  }

  .p-5 {
    padding: 1rem;
  }

  .p-6 {
    padding: 1.2rem;
  }

  .p-8 {
    padding: 1.6rem;
  }

  .px-2 {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .px-3 {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  .px-4 {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  .px-5 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .px-6 {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .px-7 {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }

  .px-8 {
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .py-1 {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  .py-2 {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .py-3 {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .py-4 {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  .py-5 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .py-6 {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }

  .py-7 {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }

  .py-8 {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }

  /* ---- Margins ---- */
  .mb-\[10px\] {
    margin-bottom: 8px;
  }

  .mb-\[15px\] {
    margin-bottom: 12px;
  }

  .mb-\[20px\] {
    margin-bottom: 15px;
  }

  .mb-\[25px\] {
    margin-bottom: 19px;
  }

  .mb-\[30px\] {
    margin-bottom: 22px;
  }

  .mb-\[40px\] {
    margin-bottom: 28px;
  }

  .mt-\[10px\] {
    margin-top: 8px;
  }

  .mt-\[20px\] {
    margin-top: 15px;
  }

  .mt-\[22px\] {
    margin-top: 17px;
  }

  .mt-\[25px\] {
    margin-top: 19px;
  }

  .mt-\[30px\] {
    margin-top: 22px;
  }

  .mt-\[40px\] {
    margin-top: 28px;
  }

  .mt-3 {
    margin-top: 0.6rem;
  }

  .mt-4 {
    margin-top: 0.8rem;
  }

  .mt-5 {
    margin-top: 1rem;
  }

  .mt-6 {
    margin-top: 1.2rem;
  }

  .mt-7 {
    margin-top: 1.4rem;
  }

  .mt-8 {
    margin-top: 1.6rem;
  }

  .mb-3 {
    margin-bottom: 0.6rem;
  }

  .mb-4 {
    margin-bottom: 0.8rem;
  }

  .mb-5 {
    margin-bottom: 1rem;
  }

  .mb-6 {
    margin-bottom: 1.2rem;
  }

  .mb-8 {
    margin-bottom: 1.6rem;
  }

  .my-3 {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
  }

  .my-4 {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
  }

  /* ---- Vertical / horizontal rhythm ---- */
  .space-y-\[30px\]> :not([hidden])~ :not([hidden]) {
    margin-top: 22px;
  }

  .space-y-\[20px\]> :not([hidden])~ :not([hidden]) {
    margin-top: 15px;
  }

  .space-y-3> :not([hidden])~ :not([hidden]) {
    margin-top: 0.6rem;
  }

  .space-y-4> :not([hidden])~ :not([hidden]) {
    margin-top: 0.8rem;
  }

  .space-y-5> :not([hidden])~ :not([hidden]) {
    margin-top: 1rem;
  }

  .space-y-6> :not([hidden])~ :not([hidden]) {
    margin-top: 1.2rem;
  }

  .space-y-9> :not([hidden])~ :not([hidden]) {
    margin-top: 1.8rem;
  }

  .space-x-3> :not([hidden])~ :not([hidden]) {
    margin-left: 0.6rem;
  }

  .space-x-4> :not([hidden])~ :not([hidden]) {
    margin-left: 0.8rem;
  }

  /* ---- Control / icon sizing ---- */
  .h-\[70px\] {
    height: 58px;
  }

  .h-\[55px\] {
    height: 46px;
  }

  .h-\[54px\] {
    height: 45px;
  }

  .h-\[51px\] {
    height: 43px;
  }

  .h-\[48px\] {
    height: 41px;
  }

  .h-\[47px\] {
    height: 40px;
  }

  .h-\[35px\] {
    height: 30px;
  }

  .h-\[22px\] {
    height: 19px;
  }

  .h-\[100px\] {
    height: 82px;
  }

  .w-\[54px\] {
    width: 45px;
  }

  .w-\[48px\] {
    width: 41px;
  }

  .w-\[47px\] {
    width: 40px;
  }

  .w-\[35px\] {
    width: 30px;
  }

  .w-\[22px\] {
    width: 19px;
  }

  /* ---- Sidebar / nav ---- */
  .sidebar {
    width: 240px;
  }

  .nav-item {
    font-size: 15px;
  }

  .nav-item i,
  .nav-item img,
  .nav-item svg {
    width: 20px;
    height: 20px;
  }
}

/* --------------------------------------------------------------------------
   <= 1440px  — a further step down
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  html {
    font-size: 14px;
  }

  .gap-\[3rem\] {
    gap: 1.5rem;
  }

  .px-\[48px\] {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  .px-\[38px\] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .px-\[20px\] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .py-\[30px\] {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .py-\[18px\] {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .text-\[16px\],
  .text-base {
    font-size: 13px;
  }

  .text-\[18px\] {
    font-size: 15px;
  }

  .text-\[20px\] {
    font-size: 16px;
  }

  .text-\[24px\] {
    font-size: 19px;
  }

  .text-\[30px\] {
    font-size: 23px;
  }

  .text-\[36px\] {
    font-size: 27px;
  }

  .text-\[48px\] {
    font-size: 34px;
  }

  .h-\[70px\] {
    height: 52px;
  }

  .sidebar {
    width: 220px;
  }

  .nav-item {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   <= 1280px  — small laptops / large tablets
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  html {
    font-size: 13px;
  }

  .gap-\[3rem\] {
    gap: 1.1rem;
  }

  .px-\[48px\] {
    padding-left: 20px;
    padding-right: 20px;
  }

  .px-\[38px\] {
    padding-left: 18px;
    padding-right: 18px;
  }

  .px-\[26px\] {
    padding-left: 14px;
    padding-right: 14px;
  }

  .text-\[16px\],
  .text-base {
    font-size: 12px;
  }

  .text-\[20px\] {
    font-size: 15px;
  }

  .text-\[24px\] {
    font-size: 18px;
  }

  .text-\[30px\] {
    font-size: 21px;
  }

  .text-\[36px\] {
    font-size: 24px;
  }

  .text-\[48px\] {
    font-size: 30px;
  }

  .h-\[70px\] {
    height: 48px;
  }

  .sidebar {
    width: 200px;
  }
}

/* ==========================================================================
   Large desktop — 1530px and up
   Tightens the type scale so headings and body copy stay proportional on
   wide screens. Primary targets: the heavily used 24px and 20px sizes.
   ========================================================================== */
@media (min-width: 1530px) {

  /* ---- Font sizes ---- */
  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 10px;
  }

  .text-\[12px\] {
    font-size: 11px;
  }

  .text-\[13px\] {
    font-size: 12px;
  }

  .text-\[14px\] {
    font-size: 13px;
  }

  .text-\[15px\] {
    font-size: 14px;
  }

  .text-\[16px\] {
    font-size: 14px;
  }

  .text-\[17px\] {
    font-size: 15px;
  }

  .text-\[18px\] {
    font-size: 16px;
  }

  .text-\[20px\] {
    font-size: 17px;
  }

  .text-\[22px\] {
    font-size: 18px;
  }

  .text-\[23px\] {
    font-size: 19px;
  }

  .text-\[24px\] {
    font-size: 20px;
  }

  .text-\[25px\] {
    font-size: 21px;
  }

  .text-\[26px\] {
    font-size: 22px;
  }

  .text-\[27px\] {
    font-size: 22px;
  }

  .text-\[29px\] {
    font-size: 24px;
  }

  .text-\[30px\] {
    font-size: 25px;
  }

  .text-\[46px\] {
    font-size: 36px;
  }

  .text-\[48px\] {
    font-size: 38px;
  }

  .text-\[50px\] {
    font-size: 39px;
  }

  .text-\[86px\] {
    font-size: 66px;
  }

  .text-xs {
    font-size: 11px;
    line-height: 15px;
  }

  .text-sm {
    font-size: 13px;
    line-height: 18px;
  }

  .text-base {
    font-size: 14px;
    line-height: 20px;
  }

  .text-lg {
    font-size: 16px;
    line-height: 22px;
  }

  .text-xl {
    font-size: 17px;
    line-height: 24px;
  }

  .text-2xl {
    font-size: 20px;
    line-height: 27px;
  }

  .text-3xl {
    font-size: 25px;
    line-height: 31px;
  }

  .text-4xl {
    font-size: 30px;
    line-height: 36px;
  }

  /* ---- Page-level rules that set font-size outside the type scale ---- */
  .history-table th,
  .session-table th {
    font-size: 17px;
  }

  /* ---- Tighter horizontal gutters for header + page content ---- */
  header,
  .page-content {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* --------------------------------------------------------------------------
   16px type scale — continues the ladder below 1280px down to mobile.
   Full ladder: 1530 -> 14px, 1440 -> 13px, 1280 -> 12px, 1024 -> 12px,
   768 -> 11px, 480 -> 11px.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .text-\[16px\],
  .text-base {
    font-size: 12px;
  }
  .absBtn{
  height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.commPAr{
      padding-left: 50px !important;
    overflow: hidden;
}
}

@media (max-width: 768px) {

  .text-\[16px\],
  .text-base {
    font-size: 11px;
  }
}

@media (max-width: 767px) {
  .table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll .table-scroll-inner {
    min-width: var(--table-scroll-width, 600px);
  }

  .metric-card {
    min-height: 90px;
  }

  .resourceMobile {
    button {
      width: 100%;
      max-width: 70%;
      padding-block: 10px !important;
      height: 40px !important;
    }

    .res_ico {
      margin-bottom: 20px !important;
    }

    p {
      font-size: 13px !important;
    }
  }
  .achievBox{
    padding-block: 30px;
  }
.gold_achiev{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
header a .userImg{
height: 45px;
width: 45px;
}
.charity-search-wrap{
      padding-left: 50px !important;
    overflow: hidden;
}
.charity-search{
  height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /* width: 100%; */
    /* max-width: 40px; */
}
}

@media (max-width: 420px) {
  .quick-actions-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {

  .text-\[16px\],
  .text-base {
    font-size: 11px;
    line-height: 1.5;
  }
}

/* ==========================================================================
   Tablet & mobile layer — 1024px and below
   ==========================================================================
   Everything above this point is the existing laptop type/spacing ladder and
   is left untouched, so 1366px and up renders exactly as before.

   The rules below only take effect at 1024px and narrower. They reuse the
   page's own classes (.main-area, .page-content, .content-panel, .card,
   .sidebar, .nav-item, the per-page *-table-wrap wrappers) rather than
   introducing new components or a new visual style.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global overflow guards — applied at every width.
   Long unbroken strings (emails, ids, URLs) are the main source of sideways
   scroll on narrow screens; media is the other.
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

/* Preserve intrinsic sizing for elements the design sizes explicitly. */
.nav-item img,
#headerAvatar {
  max-width: none;
}

/* The drawer toggle and its backdrop are injected on every page but must not
   exist visually above the mobile breakpoint, where the sidebar is permanent.
   Declared here so the desktop default is "hidden" regardless of the UA's
   default display for <button>/<div>. */
.nav-toggle,
.nav-close,
.nav-backdrop {
  display: none;
}

/* --------------------------------------------------------------------------
   <= 1024px — tablets. The sidebar is already an icon rail at this width
   (each page collapses it to 76px); this adapts the content beside it.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* ---- Fluid containers ---- */
  .page-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .main-area header {
    padding-left: 20px;
    padding-right: 20px;
  }

  .content-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* ---- Grids: 4-up and 3-up step down to 2-up ---- */
  /* .grid-cols-4:not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]),
  .grid-cols-3:not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  } */

  /* Explicit two-track template grids become a single fluid column. */
  .profile-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ---- Grid/flex children must be allowed to shrink ---- */
  .grid>*,
  .flex>* {
    min-width: 0;
  }

  /* ---- Metric tiles: equal height across each row. Grid items already
     stretch, but the tiles carry uneven authored padding (only some have
     py-[15px]), so normalise it and give them a floor. ---- */
  .metric-grid>.metric-card {
    height: 100%;
    min-height: 92px;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  /* ---- Smaller icon leaves more room for the figures.
     The 55px size is set by utility classes on the element, so the
     width/height/flex-basis triplet all need overriding. ---- */
  .metric-card .metric-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .metric-card .metric-icon img {
    max-width: 55%;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Tables — keep them usable at every narrow width via their own scrollers.
   Several pages wrap tables in page-specific wrappers that already declare
   overflow-x:auto; the ones that don't get it here. Tables keep their
   min-width so columns never crush, exactly as on desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {

  .pay-table-wrap,
  .ern-table-wrap,
  .sub-table-wrap,
  [data-table-scroll] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Tables authored without any scrolling wrapper get one of their own.
   Below 1280px only: at 1280px and up these tables still fit their column,
   and turning them into scrollers there would re-flow the desktop layout. */
@media (max-width: 1279px) {

  .session-table:not([data-table-scroll] *),
  .history-table:not([data-table-scroll] *) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* `display:block` detaches the row/cell boxes, so restore table layout on
     the sections the browser still lays out as a table. The table keeps its
     own authored min-width (e.g. min-w-[900px]); none is added here, so
     tables that already fit are left at their natural width. */
  .session-table:not([data-table-scroll] *)>thead,
  .session-table:not([data-table-scroll] *)>tbody,
  .session-table:not([data-table-scroll] *)>tfoot,
  .history-table:not([data-table-scroll] *)>thead,
  .history-table:not([data-table-scroll] *)>tbody,
  .history-table:not([data-table-scroll] *)>tfoot {
    display: table;
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   <= 991px — tablets and phones. The sidebar becomes an off-canvas drawer
   (see assets/js/mobile-nav.js). Per-page CSS collapses the sidebar to an
   icon rail at <=1023px and hides it outright at <=640px, and those page
   <style> blocks load after this file, so the drawer rules that must beat
   them carry !important.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

  /* ---- Off-canvas drawer ---- */
  .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 280px !important;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 60;
  }

  /* The page rules that reserve room for a docked sidebar no longer apply
     once it is off-canvas. */
  .main-area {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .nav-drawer-open .sidebar {
    transform: translateX(0);
  }

  /* Full nav labels belong in the drawer, even though the <=1023px per-page
     rule hides them for the icon rail. */
  .sidebar .label {
    display: inline !important;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
  }

  .nav-backdrop[hidden] {
    display: none;
  }

  /* Lock the page behind the open drawer. */
  .nav-drawer-open {
    overflow: hidden;
  }

  /* Holds the toggle beside the page title so the header keeps two flex
     items and space-between still splits title-group / avatar. */
  .header-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Without this the title cannot shrink below its content width. */
    min-width: 0;
  }

  /* ---- Toggle button: uses the sidebar's own gold gradient ---- */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    margin-right: 0;
    padding: 0 9px;
    border: 1px solid rgba(196, 139, 27, 0.67);
    border-radius: 10px;
    background: #060606;
    cursor: pointer;
  }

  .nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(100deg, #e7b339, #a96c14);
  }

  /* ---- Close button inside the drawer ---- */
  .nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(196, 139, 27, 0.67);
    border-radius: 50%;
    background: #060606;
    color: #e7b339;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  /* ---- Header fits the viewport ---- */
  .main-area header {
    height: auto;
    min-height: 68px;
    padding: 12px 16px;
    gap: 12px;
  }

  .main-area header h1 {
    font-size: 20px;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* The avatar is pulled off-canvas by a page rule tuned for the desktop
     crop; neutralise that so it sits inside its 54px frame on mobile. */
  #headerAvatar {
    position: static;
    width: 100%;
    height: 100%;
    left: auto;
    top: auto;
    object-fit: cover;
  }

  /* ---- Containers ---- */
  .page-content {
    padding: 16px 12px;
  }

  .content-panel {
    padding: 18px 14px;
    border-radius: 16px;
    min-height: 0;
  }

  /* ---- Everything stacks ---- */
 

  /* The dashboard metric tiles are compact enough to hold two across down
     to the 575px rule below, so they opt out of the blanket stack. */
  

  /* ---- Cards fit the viewport ---- */
  .card,
  .metric-card,
  .action-card {
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  /* ---- Rows of controls wrap instead of overflowing ---- */
  .flex:not(.flex-col):not(.sidebar):not(.nav-item):not(.nav-toggle) {
    flex-wrap: wrap;
  }
  .chip-rail{
    flex-wrap: nowrap !important;
  }

  /* ---- Forms and controls stay usable ---- */
  input,
  select,
  textarea {
    max-width: 100%;
    /* 16px keeps iOS Safari from zooming the page on focus. */
    font-size: 16px;
  }

  /* ---- Text wraps rather than escaping its box ---- */
  h1,
  h2,
  h3,
  h4,
  p,
  label {
    overflow-wrap: anywhere;
  }

  /* ---- Modals fit the screen ---- */
  [role="dialog"] {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: 90vh;
    overflow-y: auto;
  }

  /* ---- Decorative blur orbs must not create scroll ---- */
  [class*="blur-\["] {
    max-width: 60vw;
    max-height: 60vw;
  }
  #eventModal{
    max-width: unset;
    max-height: unset;
  }
  #eventModalContent{
    padding: 30px 15px;
  }
}

/* --------------------------------------------------------------------------
   <= 575px — the metric tiles no longer fit two across.
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {

  .metric-grid[class*="grid-cols-"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .main-area header{
    gap: 5px;
  }
  header a .userImg {
    height: 35px;
    width: 35px;
}
header a.gap-4{
gap: 5px !important;
}
.top-user-copy .text-\[24px\] {
    font-size: 16px !important;
}
.top-user-copy .text-\[16px\] {
    font-size: 12px !important;
}
}

/* --------------------------------------------------------------------------
   <= 480px — small phones. Tighter gutters only; no further restyling.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

  .page-content {
    padding: 14px 10px;
  }

  .content-panel {
    padding: 14px 12px;
  }

  .main-area header {
    padding: 10px 12px;
  }

  .main-area header h1 {
    font-size: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   Auth / terms pages (index, register, forgot-password, reset-password,
   verify-email, terms, terms-agreement). These have no sidebar; their card
   is a fixed-height two-panel layout that needs to become fluid.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .max-w-\[1262px\] {
    height: auto !important;
    max-height: none !important;
  }

  /* The inner form panel is pinned to 769px tall on the login page. */
  .max-w-\[1262px\] .h-\[769px\] {
    height: auto !important;
  }
}

@media (max-width: 640px) {

  .max-w-\[1262px\] {
    border-radius: 16px;
    padding: 8px;
  }
}


/* --------------------------------------------------------------------------
   Profile form fields. Below 1024px the leading icon is pinned to the left
   edge of the field and vertically centred, so the input can use the full
   remaining width instead of being pushed by the icon in normal flow.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .field {
    position: relative;
  }

  .field img {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
  }

  .field input {
    padding-left: 32px;
  }
}


/* --------------------------------------------------------------------------
   Decorative glow orbs.
   These are absolutely positioned with negative offsets (e.g. right:-60px) and
   sit outside the viewport at every width, which produces a sideways scrollbar
   with nothing visible in it. Containing them costs nothing visually — they are
   soft radial gradients that fade to transparent well before their own edge —
   and it removes the phantom scroll. Left visible, just clipped to the page.
   -------------------------------------------------------------------------- */
.dashglow,
.dashglow-top,
.dashglow-btm {
  max-width: 100vw;
}

.main-area,
.main {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   analytics-old.html uses `.main` where every other page uses `.main-area`,
   so that page's own breakpoint rules (which target `.main-area`) never
   applied and it kept its desktop 255px gutter on mobile. Mirror them here.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .main {
    margin-left: 76px;
  }
  #profileForm{
    display: flex;
    flex-direction: column-reverse;
  }
  .account-card.detail-card, .detailform{
    width: 100%;
  }
  #profileForm .gold-button, #passwordForm .gold-button, #passwordForm .outlined-button {
    height: 50px;
    width: 100%;
    max-width: 70%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 991px) {

  .preferences-card {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .preferences-card .preference-row {
    min-width: 760px;
    flex-wrap: nowrap;
  }
  #passwordForm .password-field {
    position: relative;
    padding-left: 4rem !important;
  }

  .password-field img {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
  }
  .charity-search-wrap {
    position: relative;
    padding-left: 50px !important;
    overflow: hidden;
}
  .charity-search {
    height: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
}

@media (max-width: 640px) {
  .main {
    margin-left: 0;
  }

  .main header {
    height: auto;
    min-height: 68px;
    padding: 12px 16px;
    gap: 12px;
  }

  .main>.page-content,
  .main>section {
    padding-left: 12px;
    padding-right: 12px;
  }
  #saveChanges{
    height: 50px;
    width: 100%;
    max-width: 60%;
    margin-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: unset;
  }
  .toggle {
    height: 28px;
    width: 54px;
}
  .toggle span {
    height: 20px;
    width: 20px;
}
.toggle[aria-checked='true'] span {
    transform: translateX(22px);
}
.setting-icon{
  height: 35px !important;
  width: 35px !important;
}
.setting-icon img{
  width: 100%;
  max-width: 50%;
}
}

/* --------------------------------------------------------------------------
   Fixed min-widths that exceed the smallest viewports.
   Tables keep their min-width on purpose (they scroll); these are layout
   boxes, so releasing the floor lets them wrap in place instead of forcing
   the page sideways. Scoped to phones so desktop sizing is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* `!important` because the Tailwind CDN injects its utilities at runtime,
     after this stylesheet — the same reason the rules above use it. */
  .min-w-\[320px\],
  .min-w-\[219px\],
  .min-w-\[200px\],
  .min-w-\[190px\],
  .min-w-\[146px\] {
    min-width: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Main-area gutter at the sidebar breakpoints.
   Every page carries `ml-[312px]` in markup plus its own media queries that
   reset it, but the Tailwind CDN injects that utility at runtime — after both
   the page <style> block and this file — so on some pages the reset loses and
   the content stays pinned in a 312px-narrow column. Restating it here with
   `!important` makes the collapse reliable everywhere.
   -------------------------------------------------------------------------- */
/* @media (max-width: 1023px) {

  .main-area {
    margin-left: 76px !important;
  }
} */

@media (max-width: 640px) {

  .main-area {
    margin-left: 0 !important;
  }
  .page-content{
    padding-inline: 12px !important;
  }
  .main-area header {
    padding: 10px 10px !important;
}
}

@media (max-width: 400px) {
  .leaderRow{
    flex-direction: column;
    align-items: start !important;
  }
  .nav-toggle {
    width: 35px;
    height: 35px;
    padding: 0 5px;
}
.personalRank{
  width: 210px !important;
  height: 200px !important;
  margin-top: 0 !important;
}
.personalRank .text-\[50px\] {
    font-size: 42px;
}
.personalRank img{
  width: 100%;
  max-width: 50px;
}
.personalRank .-top-\[33px\] {
    top: -20px;
}
}
/* --------------------------------------------------------------------------
   Account preferences rows: below 991px the icon / label / value / Edit run
   stops fitting, so the card scrolls sideways instead of crushing the columns.
   The card carries `overflow-hidden` in markup and the rows carry Tailwind
   min-widths, both injected by the CDN at runtime — hence `!important`.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Password fields: below 991px the lock icon is pinned to the left edge and
   vertically centred so the input can use the full width of the field.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

  
  
}