/* Direct instruction: "add a dark mode and light mode so user can pick their preference, just
   make sure to have a balance to be able to still see the contents which ever they choose."
   Every color in this file was already routed through these CSS custom properties (the dark
   palette below is exactly what this app has always used) — dark/light is implemented by
   swapping the values of these same variables under html[data-theme="light"] further down, so
   every page (index/login/dashboard/admin) that already consumes var(--bg) etc. picks up the
   new theme automatically with zero per-page CSS duplication. See /js/theme.js for the toggle
   logic and public/*.html for the toggle button + the tiny inline bootstrap script (applies the
   saved theme before first paint, avoiding a flash of the wrong theme). */
:root{
  --bg:#0f1720; --panel:#16212c; --panel2:#1c2a37; --border:#2a3a48;
  --text:#e6edf3; --muted:#8fa3b3; --accent:#3fb984; --accent2:#e0a03f;
  --danger:#e0603f; --blue:#4f9de0;
  /* Semantic tint pairs used by badges/alerts/highlights — kept as their own variables (rather
     than baking hex codes into each rule) specifically so the light theme below can give each one
     a properly-contrasting light-mode equivalent instead of just inheriting a dark-mode tint that
     would look muddy/low-contrast on a white background. */
  --tint-green-bg:#1f3d2c; --tint-green-bg-soft:#16281f; --tint-green-border:#2c5a3f;
  --tint-red-bg:#3d2323; --tint-red-border:#5a3232; --tint-red-text:#e08f7a;
  --tint-amber-bg:#3a2f1a; --tint-amber-bg-soft:#2a2110; --tint-amber-border:#55441f;
  --tint-purple-bg:#2a2f45;
  --row-hover-bg:#1a2733;
}
html[data-theme="light"]{
  --bg:#f4f6f8; --panel:#ffffff; --panel2:#eef1f4; --border:#d7dee4;
  --text:#17212b; --muted:#5b6b78;
  /* Darkened versions of the same brand hues — the dark-theme accent colors read fine as text on
     a near-black background but are too low-contrast to use as text on white, so the light theme
     uses a darker shade of the same hue rather than a different color entirely. */
  --accent:#1c8a5f; --accent2:#a9700a; --danger:#b83c24; --blue:#1c67a8;
  --tint-green-bg:#e3f5ec; --tint-green-bg-soft:#ecf7f1; --tint-green-border:#a9dfc4;
  --tint-red-bg:#fbeae6; --tint-red-border:#f0c3b6; --tint-red-text:#a8371f;
  --tint-amber-bg:#fbf0dc; --tint-amber-bg-soft:#fdf3e0; --tint-amber-border:#eccf95;
  --tint-purple-bg:#e8eaf7;
  --row-hover-bg:#f0f3f6;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;}
a{color:var(--blue);}
header.topbar{padding:14px 24px;border-bottom:1px solid var(--border);background:var(--panel);display:flex;justify-content:space-between;align-items:center;}
header.topbar h1{margin:0;font-size:17px;}
header.topbar nav a{margin-left:16px;color:var(--muted);text-decoration:none;font-size:13px;}
header.topbar nav a:hover{color:var(--text);}
.wrap{max-width:920px;margin:0 auto;padding:24px;}
.wrap.wide{max-width:1200px;}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:16px;}
.panel h2{margin:0 0 12px;font-size:15px;}
label{display:block;font-size:12.5px;color:var(--muted);margin:10px 0 4px;}
input,select{width:100%;padding:9px 10px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:14px;}
button{cursor:pointer;background:var(--accent);border:none;color:#08150f;font-weight:600;padding:10px 16px;border-radius:6px;font-size:14px;margin-top:14px;}
button.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--border);}
button.warn{background:var(--danger);color:#210a04;}
button.small{padding:6px 10px;font-size:12.5px;margin:2px;}
button:disabled{opacity:.5;cursor:not-allowed;}
.steps{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
.steps .step{flex:1;min-width:60px;text-align:center;padding:6px 4px;border-radius:5px;background:var(--panel2);color:var(--muted);font-size:10.5px;border:1px solid var(--border);}
.steps .step.active{background:var(--accent);color:#08150f;font-weight:700;border-color:var(--accent);}
.steps .step.done{background:var(--tint-green-bg);color:var(--accent);}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.pkg-card{background:var(--panel2);border:2px solid var(--border);border-radius:8px;padding:14px;cursor:pointer;}
.pkg-card:hover{border-color:var(--accent);}
.pkg-card.selected{border-color:var(--accent);background:var(--tint-green-bg-soft);}
.pkg-card h3{margin:0 0 4px;}
.pkg-card .price{font-size:20px;font-weight:700;color:var(--accent2);}
.pkg-card ul{margin:8px 0 0;padding-left:18px;font-size:12px;color:var(--muted);}
.error{background:var(--tint-red-bg);color:var(--tint-red-text);border:1px solid var(--tint-red-border);border-radius:6px;padding:10px 12px;font-size:13px;margin-top:10px;}
.success{background:var(--tint-green-bg);color:var(--accent);border:1px solid var(--tint-green-border);border-radius:6px;padding:10px 12px;font-size:13px;margin-top:10px;}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--border);font-size:13px;}
.kv b{font-weight:600;}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;}
.badge.yes{background:var(--tint-green-bg);color:var(--accent);}
.badge.no{background:var(--tint-red-bg);color:var(--tint-red-text);}
.badge.pending{background:var(--tint-amber-bg);color:var(--accent2);}
.epin{font-family:monospace;font-size:20px;letter-spacing:1px;color:var(--accent2);background:var(--panel2);border:1px dashed var(--accent2);border-radius:6px;padding:10px 14px;text-align:center;margin:10px 0;}
table{width:100%;border-collapse:collapse;font-size:12.5px;}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--border);}
th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;}
tr:hover{background:var(--row-hover-bg);}
.muted{color:var(--muted);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:800px){.grid2{grid-template-columns:1fr;}}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.tabs button{background:none;border:none;color:var(--muted);padding:10px 14px;border-radius:0;margin:0;font-weight:600;border-bottom:2px solid transparent;}
.tabs button.active{color:var(--text);border-bottom-color:var(--accent);}
.node{display:inline-block;vertical-align:top;text-align:center;margin:0 8px;}
.node .box{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:11.5px;display:inline-block;min-width:100px;}
.children{display:flex;justify-content:center;margin-top:6px;}
.tree{overflow-x:auto;padding:8px 0;}
.node .box.empty-slot{cursor:pointer;border-style:dashed;color:var(--muted);}
.node .box.empty-slot:hover{border-color:var(--accent2);color:var(--accent2);}
.node .box.occupied{cursor:pointer;background:var(--tint-green-bg-soft);border-color:var(--accent);}
.node .box.occupied:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.node .box.occupied b{color:var(--accent);}
.node .box.tree-root{border-width:2px;border-color:var(--accent2);}
.tree-breadcrumb{font-size:12px;margin-bottom:8px;}
.reward-row{margin-bottom:12px;}
.reward-row .head{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px;}
.progress-bar{height:8px;background:var(--panel2);border:1px solid var(--border);border-radius:5px;overflow:hidden;}
.progress-bar .fill{height:100%;background:var(--accent);}
.reward-row.achieved .progress-bar .fill{background:var(--accent2);}

/* Theme toggle (see /js/theme.js) — usable both as a small pill button in header.topbar nav
   (index/login/admin) and as a sidebar-foot link (dashboard), matching whichever context it's
   dropped into. */
button.theme-toggle{background:var(--panel2);color:var(--text);border:1px solid var(--border);padding:7px 12px;border-radius:6px;font-size:12.5px;font-weight:600;margin:0;cursor:pointer;}
button.theme-toggle:hover{border-color:var(--accent2);}
a.theme-toggle{cursor:pointer;}
header.topbar nav{display:flex;align-items:center;gap:14px;}

/* Notification bell (see /js/notifications.js) — direct instruction: "add a notification bell to
   inform user of important activity and milestone within his network and also for admin to
   announce important matters." Shared markup/CSS used identically on both dashboard.html (member)
   and admin.html (admin) — only the data behind it differs. */
.notif-bell{position:relative;}
.notif-bell-btn{background:none;border:none;cursor:pointer;font-size:19px;padding:6px;border-radius:50%;position:relative;line-height:1;color:var(--text);}
.notif-bell-btn:hover{background:var(--panel2);}
.notif-badge{position:absolute;top:0;right:0;background:var(--danger);color:#fff;font-size:10px;font-weight:700;border-radius:9px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.notif-panel{position:absolute;right:0;top:calc(100% + 8px);width:320px;max-height:420px;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:50;text-align:left;}
.notif-panel-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);}
.notif-panel-head h3{margin:0;font-size:13px;}
.notif-panel-head button{margin:0;}
.notif-item{padding:10px 14px;border-bottom:1px dashed var(--border);cursor:pointer;font-size:12.5px;}
.notif-item:hover{background:var(--panel2);}
.notif-item.unread{background:var(--tint-green-bg-soft);}
.notif-item .t{font-weight:600;margin-bottom:2px;}
.notif-item .b{color:var(--muted);font-size:11.5px;}
.notif-item .w{color:var(--muted);font-size:10.5px;margin-top:4px;}
.notif-empty{padding:20px 14px;text-align:center;color:var(--muted);font-size:12.5px;}

/* ===================== Responsive layout (mobile / tablet / laptop / desktop) =====================
   Direct instruction: "make the app responsive across all types of devices, mobile, tablet, laptop
   and desktop." Every page already had a `<meta name="viewport">` tag and most grids already used
   `repeat(auto-fit,minmax(...))`, which reflow on their own — the gaps closed here are: (1) the two
   fixed-width chrome elements that don't reflow on their own (admin.html's top `.tabs` bar, which
   just overflowed its container with no way to reach the hidden buttons; and dashboard.html's fixed
   230px `.sidebar`, which ate most of a phone-width screen) and (2) wide data tables, which would
   otherwise force the whole page to scroll horizontally instead of just the table. None of this
   changes desktop (>900px) layout — every rule below is either always-safe (scrollable tab bar) or
   gated behind a max-width query. */

/* Tabs bar (admin.html) — was a plain nowrap flex row with 13 buttons and no overflow handling, so
   on anything narrower than the button row's total width the trailing tabs became unreachable.
   Scrolling the bar itself (rather than wrapping it, which would eat many rows of vertical space
   for zero benefit) keeps every tab one tap/swipe away at any width, including desktop with a
   narrowed browser window. */
.tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
.tabs button{flex:none;white-space:nowrap;}

/* Wide data tables — rather than reflowing each row into a card (which would need a `data-label`
   attribute added to every single <td> across every admin/dashboard table, a much larger markup
   change), the table itself becomes an independently horizontally-scrollable block. Internal
   thead/tbody/tr/td table layout is unaffected, so columns still line up — only the outer box
   becomes a scroll container once its content doesn't fit. */
@media (max-width:760px){
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
}

@media (max-width:600px){
  header.topbar{padding:12px 16px;}
  header.topbar h1{font-size:15px;}
  .wrap{padding:14px;}
  .content{padding:16px !important;}
  .notif-panel{width:calc(100vw - 32px);right:-8px;}
}