/* =============================================================
   MiniTP — Drawer "Account" menu
   Styles for the full account/menu content ported into
   .drawer-left (id="drawerLeft"), so the side drawer shows the
   same rich menu as the standalone Account page.
   Loaded globally (layouts/app.blade.php) since the drawer
   include can appear on any page.
   ============================================================= */

/* ---- drawer's own head (title + close X) ---- */
.drawer-menu-head{
  flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 12px;
  margin:-20px -16px 0;   /* cancel .drawer-left's own padding so this sits flush */
}
.drawer-menu-head > b{ font-size:17px; font-weight:800; }

/* ---- scrollable body under the head ---- */
.drawer-menu-scroll{
  flex:1;
  overflow-y:auto;
  padding:2px 8px 18px;
  margin:0 -16px;         /* cancel .drawer-left's own side padding */
  scrollbar-width:none;
}
.drawer-menu-scroll::-webkit-scrollbar{ display:none; }

.drawer-menu-scroll.blur-background{
  filter:blur(4px) brightness(.7);
  pointer-events:none;
  user-select:none;
  transition:filter .2s ease;
}
.drawer-menu-scroll{ transition:filter .2s ease; }

/* ---- profile card ---- */
.profile-card{
  background:linear-gradient(160deg, rgba(59,123,255,.1), var(--surface));
  border:1px solid var(--line); border-radius:18px; padding: 8px; margin:2px 0 14px;
}
.profile-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.profile-left{ display:flex; gap:11px; }
.profile-avatar{
  width:48px; height:48px; border-radius:100px; flex:none;
  background:linear-gradient(135deg, var(--gold), #a5701f);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px;
  box-shadow:0 8px 18px -6px rgba(232,184,75,.55);
  color:#1a1206;
}
.profile-name-row{ display:flex; align-items:center; gap:7px; }
.edit-ico{ width:12px; height:12px; color:var(--ink-2); cursor:pointer; }
.rank-row{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--ink-1); margin:4px 0 8px; }
.rank-row svg{ width:12px; height:12px; flex:none; }
.tag-row{ display:flex; gap:6px; }
.tag{
  font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:100px;
  background:var(--surface-hi); border:1px solid var(--line); color:var(--ink-1);
}
.tag.verified{ display:flex; align-items:center; gap:3px; background:rgba(46,207,143,.14); border-color:rgba(46,207,143,.35); color:var(--green); }
.tag.verified svg{ width:9px; height:9px; }
.profile-actions{ display:flex; gap:7px; }
.profile-meta small{ color:var(--ink-2); font-size:10.5px; }

.view-profile-btn{
  width: 100%;
    background: var(--surface-hi);
    border: 1px solid var(--line);
    color: var(--ink-0);
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    padding: 10px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    margin-bottom: 4px;
}
.view-profile-btn svg{ width:13px; height:13px; }
.network-row{ display:flex; align-items:center; background:rgba(255,255,255,.03); border-radius:13px; padding:7px 0; }
.network-stat{ flex:1; text-align:center; cursor:pointer; }
.network-stat small{ display:block; font-size:10px; color:var(--ink-2); margin-bottom:4px; }
.network-stat b{ font-size:15px; font-weight:800; }
.network-div{ width:1px; height:26px; background:var(--line); }

/* ---- generic card ---- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:16px; margin-bottom:14px;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.card-head h4{ font-size:12.5px; font-weight:700; color:var(--ink-1); margin:0; text-transform:uppercase; letter-spacing:.4px; }
.card-head .link{ font-size:11.5px; color:var(--blue-400); font-weight:700; text-decoration:none; display:flex; align-items:center; gap:3px; cursor:pointer; }
.card-head .link svg{ width:11px; height:11px; }

/* ---- wallet tile ---- */
.wallet-tile{ display:flex; align-items:center;justify-content: space-around; }
.wallet-tile-left{ display: flex;
    align-items: center;
    gap: 7px;
    justify-content: space-between;
    width: 100%; }
.wallet-ico{
  width:30px; height:30px; border-radius:12px; flex:none;
  color:var(--blue-400);
  display:flex; align-items:center; justify-content:center;
}
.wallet-ico svg{ width:19px; height:19px; }
.wallet-tile-left small{ display:block; font-size:10px; color:var(--ink-2); margin-bottom:2px; }
.wallet-amt-row{ display:flex; align-items:flex-end; gap:5px; margin:2px 0; }
.wallet-amt-row b{ font-size:10px; font-weight:800; }
.wallet-amt-row span{ font-size:8px; color:var(--ink-1); font-weight:600; }
.eye-toggle{ width:14px; height:14px; color:var(--ink-2); cursor:pointer; margin-left:2px; }
.usd-eq{ font-size:10px; color:var(--ink-2); }

.wallet-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.wallet-action{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.wallet-action-ico{ width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; }
.wallet-action-ico svg{ width:13px; height:13px; }
.wallet-action span{ font-size:9px; color:var(--ink-1); font-weight:600; }
.wallet-action-ico.green{ background:rgba(46,207,143,.14); color:var(--green); }
.wallet-action-ico.blue{  background:rgba(59,123,255,.14); color:var(--blue-400); }
.wallet-action-ico.gold{  background:rgba(232,184,75,.14); color:var(--gold); }
.wallet-action-ico.grey{  background:var(--surface-hi); color:var(--ink-1); }

/* ---- section label + tile grid ---- */
.section-label{ font-size:11px; font-weight:700; color:var(--ink-1); text-transform:uppercase; letter-spacing:.5px; margin:4px 2px 10px; }
.menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-bottom:16px; }
.menu-tile{
  display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 9px 7px 9px 7px;
    cursor: pointer;
    justify-content: space-between;
}
.menu-tile-ico{ width:16px; height:16px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.menu-tile-ico svg{ width:16px; height:16px; }
.menu-tile b{ display:block; font-size:11px; font-weight:700; margin-bottom:2px;line-height: 1; }
.menu-tile small{ font-size:9.5px; color:var(--ink-2); line-height:1; }
.menu-tile-ico.blue{  color:var(--blue-400); }
.menu-tile-ico.gold{  color:var(--gold); }
.menu-tile-ico.green{  color:var(--green); }

/* ---- list card (rows with chevron) ---- */
.list-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:4px 14px; margin-bottom:16px;
}
.list-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.list-row:last-child{ border-bottom:0; }
.list-row-left{ display:flex; align-items:center; gap:11px; }
.list-ico{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.list-ico svg{ width:16px; height:16px; }
.list-row b{ display:block; font-size:12px; font-weight:700; margin-bottom:2px; }
.list-row small{ font-size:9.5px; color:var(--ink-2); }
.chev{ width:14px; height:14px; color:var(--ink-2); flex:none; }
.list-ico.green{ background:rgba(46,207,143,.14); color:var(--green); }
.list-ico.blue{  background:rgba(59,123,255,.14); color:var(--blue-400); }
.list-ico.gold{  background:rgba(232,184,75,.14); color:var(--gold); }
.list-ico.red{   background:rgba(239,90,111,.14); color:var(--red); }

/* ---- small icon buttons (profile actions row) ----
   Scoped fallback in case a host page doesn't already define
   .icon-btn / .badge globally — won't override the host page's
   own version outside the drawer. */
.drawer-left .icon-btn{
  width:34px; height:34px; border-radius:10px;
  background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-1); cursor:pointer; flex:none; position:relative;
}
.drawer-left .icon-btn svg{ width:16px; height:16px; }
.icon-btn.sm{ width:30px; height:30px; }
.icon-btn.sm svg{ width:14px; height:14px; }

/* ---- self-contained toast + confirm modal for the drawer ---- */
#drawerToast{
  position:absolute; left:50%; bottom:88px; transform:translateX(-50%) translateY(12px);
  background:var(--navy-700); border:1px solid var(--line-strong);
  color:var(--ink-0); font-size:12px; font-weight:600;
  padding:10px 16px; border-radius:100px;
  box-shadow:0 16px 32px -12px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:60; white-space:nowrap; display:flex; align-items:center; gap:7px;
}
#drawerToast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
#drawerToast svg{ width:13px; height:13px; color:var(--blue-400); flex:none; }

#drawerConfirmModal{
  position:absolute; left:16px; right:16px; bottom:50%;
  background:var(--navy-800); border:1px solid var(--line-strong);
  border-radius:18px; padding:18px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.65);
  z-index:60;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
#drawerConfirmModal.show{ opacity:1; visibility:visible; transform:translateY(0); }
#drawerConfirmModal h5{ font-size:14px; margin:0 0 6px; }
#drawerConfirmModal p{ font-size:11.5px; color:var(--ink-1); margin:0 0 16px; line-height:1.5; }
.drawer-confirm-actions{ display:flex; gap:9px; }
.drawer-confirm-actions button{
  flex:1; padding:11px; border-radius:11px; font-size:11px; font-weight:700;
  font-family:inherit; cursor:pointer; border:1px solid var(--line);
}
.drawer-confirm-cancel{ background:var(--surface); color:var(--ink-1); }
.drawer-confirm-ok{ background:var(--red); color:#fff; border-color:var(--red); }