/* ═══════════════════════════════════════════════════════════
   ProCash — Light / Dark mode (v27)
   All pages use these variables, so ONE switch flips everything.
   ═══════════════════════════════════════════════════════════ */

/* ── LIGHT (default) ── */
:root{
  --t-bg:#f6f8fc;      /* page background      */
  --t-card:#ffffff;    /* cards / panels       */
  --t-soft:#f8fafc;    /* soft inner surfaces  */
  --t-head:#0f172a;    /* headings             */
  --t-text:#475569;    /* body text            */
  --t-mut:#94a3b8;     /* muted / captions     */
  --t-line:#e2e8f0;    /* borders              */
}

/* ── DARK ── */
html.dark{
  --t-bg:#0f1524;
  --t-card:#161d31;
  --t-soft:#1a2138;
  --t-head:#eef1f8;
  --t-text:#a8b2c8;
  --t-mut:#7c87a3;
  --t-line:#2a3350;
}

/* Apply to page shells that don't use the vars directly */
html.dark body{background:var(--t-bg) !important;color:var(--t-text)}
body{background:var(--t-bg)}

/* Catch-all for pages/components still using literal colours */
html.dark .card,html.dark .stat-card,html.dark .task-card,html.dark .tc,
html.dark .table-wrap{
  background:var(--t-card) !important;border-color:var(--t-line) !important;color:var(--t-text) !important;box-shadow:none !important}
html.dark h1,html.dark h2,html.dark h3,html.dark h4,html.dark h5,
html.dark .page-title,html.dark .card-title,html.dark .tc-title{color:var(--t-head) !important}
html.dark p,html.dark li,html.dark td,html.dark label{color:var(--t-text)}
html.dark .page-sub,html.dark .tc-meta,html.dark small{color:var(--t-mut) !important}
html.dark table th{background:var(--t-soft) !important;color:var(--t-mut) !important;border-color:var(--t-line) !important}
html.dark table td{border-color:var(--t-line) !important}
html.dark tr:hover td{background:var(--t-soft) !important}
html.dark .form-control,html.dark input,html.dark select,html.dark textarea{
  background:var(--t-bg) !important;border-color:var(--t-line) !important;color:var(--t-head) !important}
html.dark .form-label{color:var(--t-mut) !important}
html.dark ::placeholder{color:var(--t-mut) !important;opacity:.75}
html.dark .btn-gray{background:var(--t-soft) !important;color:var(--t-text) !important;border-color:var(--t-line) !important}
html.dark a{color:#93b0f5}
html.dark code{background:var(--t-soft) !important;color:var(--t-head) !important;border-color:var(--t-line) !important}
html.dark hr{border-color:var(--t-line)}

/* light coloured info boxes → dark equivalents */
html.dark [style*="background:#eef2ff"],html.dark [style*="background:#fffbeb"],
html.dark [style*="background:#fff7ed"],html.dark [style*="background:#f0fdf4"],
html.dark [style*="background:#fef2f2"],html.dark [style*="background:#fff5f5"],
html.dark .tip,html.dark .warnbox,html.dark .warn,html.dark .good,html.dark .ttip{
  background:var(--t-soft) !important;border-color:var(--t-line) !important;color:var(--t-text) !important}

/* ── ALWAYS DARK (designed that way, both modes) ── */
.pubnav,nav,footer.sf,.uf,.hero,.trust,.ticker,.final,.sp{color-scheme:dark}
html.dark .pubnav,html.dark nav{background:#0a0f1c !important}
html.dark .hero,html.dark .trust,html.dark .ticker{background:#080c16 !important}
html.dark .hero h1,html.dark .final h2,html.dark .final p,html.dark .sp,html.dark .sp *{color:#fff !important}
html.dark .hero h1 em,html.dark .tg-n{color:var(--lime,#C6F24E) !important}
html.dark .tgwrap,html.dark section{background:var(--t-bg) !important}
html.dark .step,html.dark .tcard{background:var(--t-card) !important;border-color:var(--t-line) !important}
html.dark .step h4,html.dark .tcard h4{color:var(--t-head) !important}
html.dark .step p,html.dark .tcard p{color:var(--t-text) !important}

/* ── Toggle button ── */
.pc-theme-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:9px;color:#aab2c8;padding:7px 10px;font-size:14px;cursor:pointer;line-height:1;transition:.15s}
.pc-theme-btn:hover{background:rgba(255,255,255,.14);color:#fff}

body,.card,input,select,textarea,table td,table th{transition:background-color .18s,color .18s,border-color .18s}


/* ── SAFETY: nothing may paint the whole viewport ── */
html.dark .modal-bg{background:rgba(8,12,22,.75) !important}
.pub-main,.a-main,main,section{background:transparent}
html.dark .pub-main,html.dark .a-main{background:transparent !important}
/* buttons must never stretch beyond their box */
.tc-btn,.btn,.cta-p{max-width:100%}

/* ═══════════════════════════════════════════════════════════
   v41 — AUTHORITATIVE MOBILE LAYOUT (user app area)
   Loads last, so it wins over style.css / theme.css conflicts.
   Goal: header fits any phone, sidebar is a clean slide-in drawer.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:860px){
  /* ---- top bar: only the essentials, nothing overflows ---- */
  .topbar{padding:0 10px !important; gap:8px !important; height:56px !important}
  .hamburger{display:block !important; font-size:22px !important; padding:2px 6px !important; flex-shrink:0}
  .topbar-brand .brand-text span{display:none}          /* hide "Earn" subtitle */
  .topbar-brand .brand-text{font-size:15px !important}
  .topbar-search{display:none !important}               /* search lives in the sidebar */
  .topbar-nav{display:none !important}                  /* links live in the sidebar */

  /* right cluster: keep only bell + balance + avatar; drop the rest */
  .topbar-right{gap:8px !important}
  .topbar-right select{display:none !important}         /* language → sidebar */
  .topbar-right #pc-theme-btn,.topbar-right .pc-theme-btn{display:none !important} /* theme → sidebar */
  .topbar-right a[href*="logout"]{display:none !important}   /* logout → sidebar */
  .balance-pill{font-size:11px !important; padding:5px 8px !important; white-space:nowrap}

  /* ---- sidebar as a proper drawer ---- */
  .layout{display:block}
  .sidebar{
    position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important;
    height:100vh !important; width:82% !important; max-width:300px !important;
    z-index:2000 !important; transform:translateX(-100%); transition:transform .25s ease;
    overflow-y:auto; box-shadow:4px 0 30px rgba(0,0,0,.4)
  }
  .sidebar.open{transform:translateX(0) !important}
  .sidebar-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1900
  }
  .sidebar-overlay.open{display:block}
  .app-main,.main-content,main{width:100% !important; margin-left:0 !important; padding:14px !important}

  /* give the drawer a close (✕) affordance at the top */
  .sidebar::before{content:""}
}
@media(max-width:380px){
  .topbar-brand .brand-text{font-size:14px !important}
  .balance-pill{font-size:10px !important; padding:4px 6px !important}
  .topbar-right{gap:6px !important}
}
/* stop ANY sideways scroll on the whole app */
/* overflow-x moved to .app to avoid breaking fixed/sticky positioning */
html,body{max-width:100vw}
.app{overflow-x:hidden}

/* v41: show sidebar close + mobile controls only on phones */
@media(max-width:860px){
  #sidebar-close{display:block !important}
  .sidebar-mobile-controls{display:flex !important}
}

/* v48: on mobile the announcement bar sits BELOW the fixed header (never covers it)
   and scrolls away naturally; the header stays pinned on top */
@media(max-width:860px){
  .announcement-bar{position:static !important; height:auto !important; margin-top:56px; z-index:1 !important}
  .has-announcement .topbar{top:0 !important}
  .has-announcement .sidebar{top:56px !important; height:calc(100vh - 56px) !important}
  /* announcement already occupies flow space below the header — no extra padding needed */
  .has-announcement .layout{padding-top:0 !important}
  .layout{padding-top:56px}
}

/* ═══ v60: user-area mobile polish ═══ */
@media(max-width:768px){
  /* stat/summary card grids collapse to one column */
  .main [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* balance / dashboard hero cards: tighter padding */
  .card{padding:15px !important}
  .page-title{font-size:20px !important}
  /* big numbers shouldn't overflow */
  [style*="font-size:2"], [style*="font-size:3"]{font-size:26px !important;word-break:break-word}
  /* tables scroll sideways instead of squishing */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:520px}
  /* task cards full width */
  .task-card,.offer-card{width:100% !important}
  /* buttons easy to tap */
  .btn-lg{width:100%;justify-content:center;padding:13px !important}
  /* forms full width */
  input.form-control,select.form-control,textarea.form-control{width:100% !important;max-width:100% !important;font-size:16px !important} /* 16px stops iOS zoom */
  /* two-column form rows stack */
  .form-row,[style*="display:flex"][style*="gap"]{flex-wrap:wrap}
  /* quick actions grid → 2 cols max */
  .quick-actions{grid-template-columns:1fr 1fr !important}
}
@media(max-width:420px){
  .main{padding:12px !important}
  .quick-actions{grid-template-columns:1fr !important}
  .page-sub{font-size:12px}
}