/* ===========================================================
   1VELA — Shell layout, dark theme, and content components
   Loaded after style.css. Works together with assets/js/shell.js.
   Menu/sidebar removed — header + footer only.
   =========================================================== */

/* ---------- dark theme palette ---------- */
:root[data-theme="dark"]{
  --bg:#0E1613;
  --surface:#16211D;
  --ink-900:#F3F7F5;
  --ink-700:#C9D6D1;
  --ink-500:#8FA29B;
  --ink-300:#4E5F58;
  --line:#26332D;
  --line-soft:#1D2925;
  --vela-50:#152420;
  --vela-100:#173028;
  --ok-bg:#12281C;
  --warn-bg:#2B2110;
  --err-bg:#2B1414;
  --gold-100:#2B2410;
}
:root[data-theme="dark"] .balance-card,
:root[data-theme="dark"] .ref-card{ box-shadow:none }
:root[data-theme="dark"] .input{ background:var(--surface); color:var(--ink-900) }
:root[data-theme="dark"] .icon-btn.light{ background:var(--line-soft); color:var(--ink-700) }
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .table-card,
:root[data-theme="dark"] .stat-card{ border-color:var(--line) }
:root[data-theme="dark"] .notif-item.unread{ background:var(--vela-50) }

body{ transition:background-color .2s ease, color .2s ease }

/* ===================== SHELL LAYOUT ===================== */
#vela-shell{ display:block; min-height:100dvh }
.vela-page{ padding:18px 16px 96px; max-width:640px; width:100%; margin:0 auto }

/* ---------- header: username | logo | bell ---------- */
.vtb{
  position:sticky; top:0; z-index:20;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:14px 18px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.vtb-username{
  justify-self:start; display:flex; align-items:center; gap:8px;
  border:none; background:transparent; cursor:pointer; color:var(--ink-900);
  font-size:14px; font-weight:700; padding:4px 4px 4px 0; margin-left:-4px;
}
.vtb-username span:not(.vtb-avatar):not(.vela-verified-badge){
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:92px;
}
@media (min-width:400px){
  .vtb-username span:not(.vtb-avatar):not(.vela-verified-badge){ max-width:160px }
}
@media (min-width:660px){
  .vtb-username span:not(.vtb-avatar):not(.vela-verified-badge){ max-width:none }
}
.vtb-username svg:last-child{ color:var(--ink-300) }
.vela-verified-badge{ display:inline-flex; align-items:center; flex:none; }
.vela-verified-badge svg{ display:block }
.vtb-avatar{
  width:32px; height:32px; border-radius:50%; background:var(--vela-100); color:var(--vela-800);
  display:grid; place-items:center; font-size:11.5px; font-weight:800; flex:none;
}
.vtb-logo{ justify-self:center }
.vtb-logo img{ height:30px }
.vtb-right{ justify-self:end }
.icon-btn.light{
  width:40px; height:40px; border-radius:50%; background:var(--vela-50); color:var(--vela-700);
  border:none; display:grid; place-items:center; position:relative; cursor:pointer;
}
.notif-badge{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--err); color:#fff; font-size:10px; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--surface);
}

/* ---------- dropdowns (profile + notifications) ---------- */
.vtb-dropdown{
  position:absolute; top:60px; width:220px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-2);
  padding:8px; display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none; transform:translateY(-6px); transition:all .15s var(--ease); z-index:50;
}
.vtb-dropdown#velaProfileDropdown{ left:16px }
.vtb-dropdown.open{ opacity:1; pointer-events:auto; transform:translateY(0) }
.vtb-dropdown a, .vtb-dropdown button{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  font-size:13px; font-weight:600; color:var(--ink-700); background:none; border:none; text-align:left; cursor:pointer; font-family:inherit;
}
.vtb-dropdown a:hover, .vtb-dropdown button:hover{ background:var(--vela-50) }
.vtb-dropdown a.danger{ color:var(--err) }
.vtb-dropdown a.danger:hover{ background:var(--err-bg) }

.notif-panel{ right:16px; left:auto; width:320px; max-width:88vw; padding:0; overflow:hidden }
.notif-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line-soft) }
.notif-panel-head strong{ font-size:13.5px }
.notif-list{ max-height:360px; overflow-y:auto }
.notif-item{ padding:12px 16px; border-bottom:1px solid var(--line-soft) }
.notif-item:last-child{ border-bottom:none }
.notif-item.unread{ background:var(--vela-50) }
.notif-item-top{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.notif-item-top strong{ font-size:13px; color:var(--ink-900) }
.notif-dot{ width:7px; height:7px; border-radius:50%; background:var(--vela-600); flex:none }
.notif-item p{ font-size:12px; color:var(--ink-500); margin-top:4px; line-height:1.45 }
.notif-item .btn{ margin-top:10px; width:auto; padding:0 14px }
.notif-dismiss{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  border:none; background:var(--line-soft); color:var(--ink-500); display:grid; place-items:center; cursor:pointer;
}
.notif-dismiss:hover, .notif-dismiss:active{ background:var(--line); color:var(--ink-800) }
.notif-item{ position:relative }
.notif-item .notif-item-top{ padding-right:32px }
.notif-claimed-tag{ font-size:11px; font-weight:700; color:var(--ok); margin-top:8px !important }

/* ---------- footer: the only nav in the system ---------- */
.vbb{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; background:var(--surface); border-top:1px solid var(--line);
  max-width:640px; margin:0 auto;
  padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 8px);
}
.vbb a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 2px; border-radius:12px; color:var(--ink-300); font-size:10.5px; font-weight:700;
  position:relative; transition:color .15s, background-color .15s; -webkit-tap-highlight-color:transparent;
}
.vbb a svg{ transition:transform .15s }
.vbb a:active svg{ transform:scale(.88) }
.vbb a.active{ color:var(--vela-700); background:var(--vela-50) }
.vbb a.active::before{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:16px; height:3px; border-radius:0 0 3px 3px; background:var(--vela-600);
}

/* dashboard: two content columns (stacks naturally on mobile since
   .dash-grid isn't a grid until the desktop breakpoint below) */
.dash-main, .dash-side{ display:flex; flex-direction:column; gap:18px }
.dash-main{ margin-bottom:18px }

@media (min-width:660px){
  .vela-page{ padding:26px 24px 100px }
  .vbb{ left:50%; transform:translateX(-50%); border-radius:18px 18px 0 0; border-left:1px solid var(--line); border-right:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,0,0,.06) }
}

/* ---------- wide desktop: use the extra space instead of floating a
   phone-width column in the middle of the screen ---------- */
@media (min-width:1024px){
  .vela-page{ max-width:980px; padding:32px 32px 110px }
  .vbb{ max-width:980px }
  #vela-content{ max-width:none !important }

  /* simple single-column pages (profile, team, chat, task pages) read
     better capped to a comfortable width instead of stretching full-wide */
  body[data-narrow="true"] .vela-page{ max-width:680px }
  body[data-narrow="true"] .vbb{ max-width:680px }

  /* dashboard: balance + tasks on the left, growth/info as a side rail */
  .dash-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:start }
  .dash-grid > div{ min-width:0 }
  .dash-main{ margin-bottom:0 }
  .dash-side{ position:sticky; top:88px }

  /* Withdraw/Transfer: the history tables are wide (6 columns), so give
     them the full page width instead of squeezing into a side column —
     the wider .vela-page above already fixes the "narrow phone column
     floating on a big screen" problem without needing a split here. */
  .desktop-split{ display:block }
}

/* ===================== PASSWORD / FORM HELPERS ===================== */
.field-check{ display:flex; align-items:center; gap:6px; font-size:12px; margin-top:6px }
.field-check.ok{ color:var(--ok) }
.field-check.err{ color:var(--err) }
.field-check svg{ flex:none }
.hint.ok{ display:flex; align-items:center; gap:5px; color:var(--ok) }
.hint.ok-text{ color:var(--ok) }
.input.is-invalid{ border-color:var(--err) !important }

/* ===================== CONTENT COMPONENTS ===================== */
.page-head{ margin-bottom:18px }

.greet-hero{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap }
.greet-hero .flag{ font-size:20px; line-height:1 }

.stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px }
.stat-strip .mini{ background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; padding:12px }
.stat-strip .mini .l{ font-size:11px; color:var(--ink-500); font-weight:600 }
.stat-strip .mini .v{ font-size:15px; font-weight:800; margin-top:4px }

/* task grid wrapper: one gradient box, each tile keeps its own mini box */
.tasks-box{
  background:linear-gradient(160deg,var(--vela-50),var(--surface) 55%);
  border:1px solid var(--line-soft);
  border-radius:20px;
  padding:16px;
}
:root[data-theme="dark"] .tasks-box{
  background:linear-gradient(160deg,var(--vela-100),var(--surface) 60%);
}
.tasks-box .tile{
  background:linear-gradient(160deg,var(--surface),var(--vela-50) 130%);
}
:root[data-theme="dark"] .tasks-box .tile{
  background:linear-gradient(160deg,var(--surface),var(--vela-50) 130%);
}

.sec-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.sec-head .see-all{ font-size:12px; font-weight:700; color:var(--vela-700) }

/* side-by-side button pair (Timetable / Weekly Challenge) */
.pair-row{ display:flex; gap:10px }
.pair-row .pair-btn{
  flex:1; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--vela-100); border-radius:14px; padding:14px;
  cursor:pointer; text-align:left; box-shadow:var(--shadow-1);
  transition:border-color .15s var(--ease), transform .12s var(--ease);
}
.pair-row .pair-btn:hover{ border-color:var(--vela-400); transform:translateY(-1px) }
:root[data-theme="dark"] .pair-row .pair-btn{ border-color:var(--line); background:var(--vela-50) }
.pair-row .pair-btn .ic{ width:34px; height:34px; border-radius:10px; background:var(--vela-100); color:var(--vela-700); display:grid; place-items:center }
.pair-row .pair-btn strong{ font-size:13.5px; color:var(--ink-900) }
.pair-row .pair-btn small{ font-size:11.5px; color:var(--ink-500) }

/* feed card (task video lists) */
.feed-card{ display:flex; gap:12px; background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; padding:12px; align-items:center }
.feed-card .thumb{
  width:92px; height:64px; border-radius:10px; flex:none; background:linear-gradient(150deg,var(--vela-100),var(--vela-50));
  display:grid; place-items:center; color:var(--vela-600);
}
.feed-card .info{ flex:1; min-width:0 }
.feed-card .info strong{ font-size:13.5px; display:block; margin-bottom:3px }
.feed-card .info small{ font-size:11.5px; color:var(--ink-500) }
.feed-card .cta{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.feed-card .cta .pay{ font-size:13px; font-weight:800; color:var(--vela-700) }

/* media grid (status uniform tiles) */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px }
.media-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; overflow:hidden }
.media-card .thumb{
  aspect-ratio:9/13; background:linear-gradient(150deg,var(--vela-100),var(--vela-50));
  display:grid; place-items:center; color:var(--vela-500); position:relative;
}
.media-card .thumb .dur{ position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.55); color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px }
.media-card .body{ padding:10px }
.media-card .body strong{ font-size:12.5px; display:block; line-height:1.35 }
.media-card .body .row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px }
.media-card .body .pay{ font-size:11.5px; font-weight:800; color:var(--vela-700) }

/* video thumbnail (YouTube preview or generic placeholder) used inside .media-card */
.video-thumb{
  display:block; width:100%; aspect-ratio:16/9; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--vela-800),var(--vela-900)); cursor:pointer; border:none;
}
.video-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.video-thumb .play-overlay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
iframe.video-thumb{ border:none }

/* chat: profile list + conversation */
.chat-list-item{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--line-soft) }
.chat-list-item:last-child{ border-bottom:none }
.chat-list-item .thumb{ width:46px; height:46px; border-radius:50%; background:linear-gradient(150deg,var(--vela-100),var(--vela-50)); flex:none; position:relative; display:grid; place-items:center; color:var(--vela-700); font-weight:800; font-size:14px }
.chat-list-item .meta{ flex:1; min-width:0 }
.chat-list-item .meta strong{ display:block; font-size:13.5px }
.chat-list-item .meta small{ display:block; font-size:12px; color:var(--ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chat-list-item .time{ font-size:10.5px; color:var(--ink-300); flex:none }

.chat-window{ display:flex; flex-direction:column; gap:10px; padding:6px 2px 16px }
.bubble{ max-width:78%; padding:10px 13px; border-radius:16px; font-size:13.5px; line-height:1.45 }
.bubble.in{ background:var(--surface); border:1px solid var(--line-soft); align-self:flex-start; border-bottom-left-radius:5px }
.bubble.out{ background:var(--vela-700); color:#fff; align-self:flex-end; border-bottom-right-radius:5px }
.bubble time{ display:block; font-size:10px; opacity:.6; margin-top:5px }

/* profile picture upload */
.avatar-upload{ position:relative; width:92px; height:92px; margin:0 auto }
.avatar-upload .pic{ width:92px; height:92px; border-radius:50%; background:var(--vela-100); color:var(--vela-800); display:grid; place-items:center; font-size:26px; font-weight:800; overflow:hidden }
.avatar-upload .pic img{ width:100%; height:100%; object-fit:cover }
.avatar-upload label{
  position:absolute; right:-2px; bottom:-2px; width:32px; height:32px; border-radius:50%;
  background:var(--vela-700); color:#fff; display:grid; place-items:center; cursor:pointer; border:3px solid var(--surface);
}
.avatar-upload input{ display:none }

/* read-only / admin-only field */
.field.locked .input{ background:var(--line-soft); color:var(--ink-500); cursor:not-allowed }
.field .field-note{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-500); margin-top:6px }

/* sortable table (Team, Withdraw History) */
.level-stats{
  display:flex; flex-direction:column; gap:2px; background:var(--vela-50); border:1px solid var(--vela-100);
  border-radius:12px; padding:12px 14px; margin-bottom:14px;
}
.level-stat-line{ font-size:12.5px; color:var(--ink-700) }
.level-stat-line strong{ color:var(--vela-800); font-size:13.5px }
.data-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px }
.data-toolbar .search-bar{ flex:1; min-width:180px; margin:0 }
.data-toolbar .sort-select{ flex:none; width:auto }
.view-all-row{ display:flex; justify-content:center; padding:12px; border-top:1px solid var(--line-soft) }
th.sortable{ cursor:pointer; user-select:none }
th.sortable .arrows{ display:inline-flex; margin-left:4px; opacity:.5 }
th.sortable.sort-asc .arrows,
th.sortable.sort-desc .arrows{ opacity:1; color:var(--vela-700) }

/* timetable list */
.timetable-day{ display:flex; align-items:center; justify-content:space-between; padding:12px 4px; border-bottom:1px solid var(--line-soft) }
.timetable-day:last-child{ border-bottom:none }
.timetable-day .d{ font-weight:700; font-size:13.5px }
.timetable-day .t{ font-size:12px; color:var(--ink-500); margin-top:2px }

/* countdown */
.countdown{ display:flex; gap:8px }
.countdown .box{ background:var(--vela-900); color:#fff; border-radius:10px; padding:8px 10px; text-align:center; min-width:52px }
.countdown .box b{ display:block; font-size:16px; font-weight:800 }
.countdown .box span{ font-size:9.5px; opacity:.7; text-transform:uppercase; letter-spacing:.04em }

/* admin: lightweight section tabs replacing the old heavy sidebar */
.admin-tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:18px }
.admin-tabs a{
  flex:none; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:11px;
  font-size:13px; font-weight:700; color:var(--ink-500); background:var(--surface); border:1px solid var(--line-soft); white-space:nowrap;
}
.admin-tabs a.active{ background:var(--vela-700); color:#fff; border-color:var(--vela-700) }