/* ==========================================================================
   House of Winners — member dashboard (account hub)

   The logged-in landing page (member/, member_view.php): a left sidebar of
   account links and a card holding the welcome greeting, the referral link
   with a COPY button, and the QR code. No hero band — the content sits directly
   under the sticky nav (Frame 1043 starts 20px below it).

   The sidebar links out to the other account pages (Change Password, Game ID,
   Bank Info, History), which are not redesigned yet; only "Dashboard" is the
   current page. Functionality is unchanged from the legacy view — same targets,
   same refLink/QR — only the copy button is newly wired (it was a dead icon).

   Reminder: css/assets/css/style.css sets html{font-size:62.5%}, so 1rem =
   10px here. rem for type, px for structure.
   ========================================================================== */

.hw-dash{
  background:var(--hw-page-bg,#000);
  padding:20px 0 90px;
}

.hw-dash__wrap{
  max-width:1251px;
  margin-inline:auto;
  padding-inline:20px;
  display:flex;
  align-items:flex-start;
  gap:15px;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.hw-dash__aside{
  flex:none;
  width:256px;
  padding:16px 0;
  background:var(--hw-footer-bg,#171717);
  border:1px solid rgba(255,255,255,.05);
  border-radius:6px;
}
.hw-dash__nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0 16px;
}
.hw-dash__link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:8px;
  color:var(--hw-on-surface,#FFF);
  font-family:var(--hw-font);
  font-size:1.4rem;
  font-weight:400;
  line-height:20px;
  text-decoration:none;
  transition:background .15s,color .15s;
}
.hw-dash__link:hover,
.hw-dash__link:focus{
  background:rgba(255,255,255,.04);
  color:var(--hw-on-surface,#FFF);
  text-decoration:none;
}
/* Active row — gold tint, gold right accent, gold label (Figma). */
.hw-dash__link--active,
.hw-dash__link--active:hover,
.hw-dash__link--active:focus{
  background:rgba(250,207,90,.1);
  border-right:4px solid var(--hw-gold,#FACF5A);
  color:#F0C040;
}

/* --------------------------------------------------------------------------
   Main card
   -------------------------------------------------------------------------- */
.hw-dash__main{flex:1;min-width:0;}
.hw-dash__card{
  background:var(--hw-footer-bg,#171717);
  border-radius:6px;
  padding:24px 30px;
}
.hw-dash__body{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* Shared section label */
.hw-dash__label{
  margin:0;
  font-family:var(--hw-font);
  font-size:1.6rem;
  font-weight:700;
  line-height:18px;
  letter-spacing:.01em;
  color:var(--hw-on-surface,#FFF);
}

/* Welcome */
.hw-dash__welcome{display:flex;flex-direction:column;gap:8px;}
.hw-dash__name{
  margin:0;
  font-family:var(--hw-font);
  font-size:4rem;               /* 40px */
  font-weight:700;
  line-height:46px;
  letter-spacing:-.05em;
  background:linear-gradient(180deg,#FFF8A2 16.58%,#C49616 82.61%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Referral link + COPY */
.hw-dash__field{display:flex;flex-direction:column;gap:16px;}
.hw-dash__link-row{
  display:flex;
  align-items:center;
  height:50px;
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:6px;
  overflow:hidden;
}
.hw-dash__link-input{
  flex:1;min-width:0;height:100%;
  background:transparent;border:0;
  padding:0 12px 0 24px;
  color:var(--hw-on-surface,#FFF);
  font-family:var(--hw-font);font-size:1.4rem;letter-spacing:.01em;
}
.hw-dash__link-input:focus{outline:none;}
.hw-dash__copy{
  flex:none;width:78px;height:50px;border:0;
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
  color:#000;font-family:var(--hw-font);font-weight:700;font-size:1.6rem;
  letter-spacing:.01em;cursor:pointer;
}
.hw-dash__copy:hover{filter:brightness(1.05);}

/* QR */
.hw-dash__qr-block{display:flex;flex-direction:column;gap:16px;}
.hw-dash__qr{
  width:205px;height:205px;padding:6px;
  background:#FFF;border-radius:5px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.hw-dash__qr img{width:100%;height:100%;object-fit:contain;display:block;}
.hw-dash__qr-ph{font-size:12px;color:#888;text-align:center;}

/* --------------------------------------------------------------------------
   Forms (Change Password — and any other account page that posts a form).
   Same card shell: a stack of labelled inputs and a gold Save button.
   -------------------------------------------------------------------------- */
.hw-dash__flash:empty{display:none;}
.hw-dash .alert{
  position:relative;margin:0 0 20px;padding:12px 40px 12px 16px;
  border:1px solid var(--hw-gold-line,#9F853F);border-radius:var(--hw-radius,5px);
  background:rgba(250,207,90,.06);color:var(--hw-gold-mid,#F3C961);
  font-size:1.3rem;line-height:1.5;
}
.hw-dash .alert-success{border-color:rgba(143,209,143,.5);background:rgba(143,209,143,.08);color:var(--hw-success,#8FD18F);}
.hw-dash .alert-danger{border-color:rgba(255,107,122,.5);background:rgba(255,107,122,.08);color:var(--hw-danger,#FF6B7A);}
.hw-dash .alert .close{position:absolute;top:8px;right:10px;padding:0;background:transparent;border:0;color:inherit;opacity:.7;font-size:2rem;line-height:1;text-shadow:none;cursor:pointer;}
.hw-dash .alert .close:hover{opacity:1;}

.hw-dash__form{display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
.hw-dash__fields{display:flex;flex-direction:column;gap:16px;width:100%;}
.hw-dash__group{display:flex;flex-direction:column;gap:4px;width:100%;}
.hw-dash__field-label{
  font-family:var(--hw-font);font-size:1.4rem;font-weight:400;line-height:16px;
  letter-spacing:.01em;color:var(--hw-on-surface,#FFF);
}
.hw-dash__req{color:var(--hw-danger,#FF6B7A);margin-left:2px;}
.hw-dash__input{
  width:100%;height:50px;
  border:1px solid var(--hw-gold-line,#9F853F);border-radius:6px;background:transparent;
  padding:0 24px;color:var(--hw-on-surface,#FFF);
  font-family:var(--hw-font);font-size:1.4rem;letter-spacing:.01em;
}
.hw-dash__input::placeholder{color:rgba(255,255,255,.55);}
.hw-dash__input:focus{outline:none;border-color:var(--hw-gold,#FACF5A);}

/* Select (Bank Info) — matches the input shell, native chevron replaced with a
   gold SVG on the right (Figma). appearance:none is needed for the swap. */
.hw-dash__select{
  width:100%;height:50px;
  border:1px solid var(--hw-gold-line,#9F853F);border-radius:6px;background-color:transparent;
  padding:0 44px 0 24px;color:var(--hw-on-surface,#FFF);
  font-family:var(--hw-font);font-size:1.4rem;letter-spacing:.01em;line-height:1;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23FACF5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 20px center;background-size:14px;
}
.hw-dash__select:focus{outline:none;border-color:var(--hw-gold,#FACF5A);}
/* Dark dropdown list (browsers that honour option styling). */
.hw-dash__select option{background:var(--hw-footer-bg,#171717);color:var(--hw-on-surface,#FFF);}
.hw-dash__save{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:10px 24px;border:0;border-radius:6px;
  background:var(--hw-gold-gradient,linear-gradient(180deg,#CD932C 0%,#F3C961 50%,#EFCF35 75%,#C49616 100%));
  color:#000;font-family:var(--hw-font);font-weight:700;font-size:1.4rem;letter-spacing:.01em;
  cursor:pointer;transition:filter .15s;
}
.hw-dash__save:hover{filter:brightness(1.05);}

/* --------------------------------------------------------------------------
   Game ID — a titled grid of game-credential cards (name + ID/PW, each with a
   copy button). Shares the .hw-dash sidebar + card shell.
   -------------------------------------------------------------------------- */
.hw-gid__title{
  margin:0 0 24px;
  font-family:var(--hw-font);font-size:4rem;font-weight:700;line-height:46px;
  letter-spacing:-.05em;text-transform:uppercase;
  background:linear-gradient(180deg,#FFF8A2 16.58%,#C49616 82.61%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* auto-fill so the 3-up desktop grid (Figma) collapses to 2 then 1 as the card
   narrows — no per-breakpoint column counts needed. */
.hw-gid__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:24px;
}
.hw-gid__card{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  padding:24px;
  background:var(--hw-footer-bg,#171717);
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}
.hw-gid__name{
  margin:0;
  font-family:var(--hw-font);font-size:2.4rem;font-weight:700;line-height:28px;letter-spacing:-.05em;
  background:linear-gradient(180deg,#FFF8A2 16.58%,#C49616 82.61%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hw-gid__row{display:flex;align-items:center;gap:8px;min-width:0;}
.hw-gid__key{flex:none;width:50px;font-family:var(--hw-font);font-size:1.4rem;line-height:16px;letter-spacing:.01em;color:var(--hw-on-surface,#FFF);}
.hw-gid__val{flex:1;min-width:0;font-family:var(--hw-font);font-size:1.4rem;line-height:16px;letter-spacing:.01em;color:var(--hw-on-surface,#FFF);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hw-gid__copy{flex:none;width:16px;height:16px;padding:0;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:opacity .15s;}
.hw-gid__copy:hover{opacity:.75;}
.hw-gid__copy.is-copied{opacity:.4;}
.hw-gid__copy svg{width:16px;height:16px;display:block;}
.hw-gid__empty{margin:0;color:var(--hw-muted,#B3B3B3);font-family:var(--hw-font);font-size:1.4rem;}

/* --------------------------------------------------------------------------
   History — filter (reuses .hw-dash__form / .hw-dash__group / .hw-dash__select /
   .hw-dash__save) + a results table. Date fields tint the native picker gold.
   -------------------------------------------------------------------------- */
.hw-dash__input[type="date"]{color:var(--hw-on-surface,#FFF);}
.hw-dash__input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  /* tints the default dark glyph toward the brand gold (approximate). */
  filter:invert(72%) sepia(55%) saturate(560%) hue-rotate(358deg) brightness(101%) contrast(96%);
}
.hw-hist__err{margin:0;color:var(--hw-danger,#FF6B7A);font-family:var(--hw-font);font-size:1.3rem;}

/* Table — gold-bordered; header #2E2A1E gold text, body black. The wrapper owns
   the radius + horizontal scroll so narrow screens scroll instead of crushing. */
.hw-hist__scroll{
  width:100%;
  border:1px solid var(--hw-gold-line,#9F853F);border-radius:6px;
  overflow-x:auto;
}
.hw-hist__table{width:100%;min-width:640px;border-collapse:collapse;font-family:var(--hw-font);}
.hw-hist__table th{
  background:#2E2A1E;color:#F0C040;font-weight:700;font-size:1.4rem;letter-spacing:.01em;
  padding:16px 12px;text-align:center;white-space:nowrap;
  border-bottom:1px solid var(--hw-gold-line,#9F853F);
}
.hw-hist__table td{
  background:#000;color:var(--hw-on-surface,#FFF);font-size:1.4rem;letter-spacing:.01em;
  padding:16px 12px;text-align:center;white-space:nowrap;
}
/* Qualified with `td` so they outrank `.hw-hist__table td{color:#FFF}` — a bare
   `.hw-hist__amt--pos` (0,0,1,0) loses to that rule (0,0,1,1) and renders white. */
.hw-hist__table td.hw-hist__amt--pos{color:#0DB40D;}
.hw-hist__table td.hw-hist__amt--neg{color:#EF1E1E;}
.hw-hist__table td.hw-hist__status--ok{color:#0DB40D;}
.hw-hist__table td.hw-hist__status--bad{color:#EF1E1E;}
.hw-hist__empty td{color:var(--hw-muted,#B3B3B3);}

/* Detail column — hidden on desktop (Ref + Date & Time are their own columns);
   revealed on mobile as an ⓘ that opens a popover carrying those two fields. */
.hw-hist__c-detail{display:none;}
.hw-hist__info{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;padding:0;border:0;background:transparent;cursor:pointer;
}
.hw-hist__info svg{width:16px;height:16px;display:block;}
.hw-hist__info-img{width:16px;height:16px;display:block;}

/* Detail popover — appended to <body>, positioned in JS. */
.hw-hist__pop{
  position:absolute;z-index:1200;width:180px;padding:12px 14px;
  background:#000;border:1px solid var(--hw-gold-line,#9F853F);border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.55);font-family:var(--hw-font);
}
.hw-hist__pop-title{color:#F0C040;font-weight:700;font-size:1.2rem;margin-bottom:8px;letter-spacing:.01em;}
.hw-hist__pop-row{color:var(--hw-on-surface,#FFF);font-size:1.2rem;line-height:1.4;letter-spacing:.01em;}
.hw-hist__pop-row + .hw-hist__pop-row{margin-top:6px;}
.hw-hist__pop-row span{display:block;color:var(--hw-muted,#A7A7A7);}

/* --------------------------------------------------------------------------
   Responsive. On mobile (393 frame) the card comes FIRST and the sidebar drops
   below it — the reverse of desktop — done with flex `order` so the DOM (aside
   then main, needed for the desktop left-rail) is untouched. The fixed mobile
   tab bar's 76px clearance is handled globally by .page-wrapper (css/footer.css),
   so no extra bottom padding is needed here. Breakpoint 767 flips with the
   header's own mobile switch.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .hw-dash{padding-bottom:60px;}
  .hw-dash__wrap{gap:12px;}
  .hw-dash__card{padding:20px;}
}

@media (max-width:767px){
  .hw-dash{padding:16px 0 24px;}
  .hw-dash__wrap{flex-direction:column;gap:15px;padding-inline:9px;}

  /* Card above, sidebar below (mobile Figma order). Names/QR keep their full
     size per the mobile frame (40px name, 205px QR). */
  .hw-dash__main{order:-1;width:auto;align-self:stretch;}
  .hw-dash__aside{order:0;width:auto;align-self:stretch;padding:16px 12px;}

  .hw-dash__card{padding:12px 16px;}

  /* Change Password (Frame 1043 mobile): the Save button centres on mobile —
     desktop left-aligns it. The fields keep full width via their own width:100%,
     so only the button (not stretched) responds to the centred cross-axis. */
  .hw-dash__form{align-items:center;}

  /* History table (Frame 1043 mobile): blockify the table so each row is a flex
     row, drop Ref + Date & Time, reorder to Game / Amount / Type / Status /
     Detail, and reveal the ⓘ Detail column. Header bar (#2E2A1E) and body (#000)
     take the frame's shape; the wrapper's gold border + radius stay. Column
     rules are .hw-hist__table-qualified so they outrank the generic th/td. */
  .hw-hist__scroll{overflow-x:visible;}
  .hw-hist__table{display:block;min-width:0;}
  .hw-hist__table thead{display:block;}
  .hw-hist__table thead tr{display:flex;align-items:center;gap:3px;padding:16px;background:#2E2A1E;border-radius:6px 6px 0 0;}
  .hw-hist__table tbody{display:flex;flex-direction:column;gap:24px;padding:16px;background:#000;border-radius:0 0 6px 6px;}
  .hw-hist__table tbody tr{display:flex;align-items:center;gap:3px;}
  .hw-hist__table th,
  .hw-hist__table td{display:block;flex:1 1 0;min-width:0;padding:0;background:transparent;border:0;font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  .hw-hist__table .hw-hist__c-ref,
  .hw-hist__table .hw-hist__c-date{display:none;}
  .hw-hist__table .hw-hist__c-game{order:0;}
  .hw-hist__table .hw-hist__c-amt{order:1;}
  .hw-hist__table .hw-hist__c-type{order:2;}
  .hw-hist__table .hw-hist__c-status{order:3;}
  .hw-hist__table .hw-hist__c-detail{display:flex;align-items:center;justify-content:center;order:4;flex:none;width:35px;overflow:visible;}
  .hw-hist__table .hw-hist__empty td{flex:1 1 100%;text-align:center;white-space:normal;}
}