/* ===========================
   NILAC THEME (reusable CSS)
   v1.0
   =========================== */

/* ---------- CSS Variables (Theme Tokens) ---------- */
:root{
  /* Brand */
  --nilac-blue:#0E192B;
  --nilac-orange:#EB622B;

  /* System colors */
  --surface:#12151b;         /* unified card surface */
  --surface-2:#0c0f14;       /* deeper panel if needed */
  --border:#2a2f39;

  --text:#ffffff;
  --muted:#b6bbc6;
  --muted-2:#9aa0a6;

  --success:#3ddc84;
  --danger:#f44336;
  --warn:#ffd166;
  --purple:#9c27b0;

  /* Layout */
  --radius:16px;
  --radius-lg:20px;
  --gap:12px;
  
  --footer-h: clamp(64px, 10vh, 96px); /* min 64px, grows a bit on small screens */
}

/* ---------- Base / Reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--nilac-blue);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* padding-bottom:100px; /* room for fixed footer */
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ---------- Layout Helpers ---------- */
.container{ max-width:1200px; margin:0 auto; padding:0 16px; }
/* .section{ margin-bottom:24px; } */
.section{   /* to protect the footer */
  margin-bottom: 24px;
  scroll-margin-bottom: calc(var(--footer-h) + 24px);
}
.section-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }

.header{ padding:16px 0; background:transparent; }
.welcome{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.welcome-text h2{ font-size:1.375rem; font-weight:800; margin-bottom:4px; }
.welcome-text p{ font-size:.95rem; color:var(--nilac-orange); }

/* Remove link underline from the profile icon link */
.profile-btn,
.profile-btn:link,
.profile-btn:visited,
.profile-btn:hover,
.profile-btn:active,
.profile-btn:focus {
  text-decoration: none !important;
  border-bottom: 0; /* just in case you style links with a bottom border */
}

/* tighten the icon box */
.profile-btn i { line-height: 1; }

/* ---------- Typography ---------- */
.section-title{ font-size:1.375rem; font-weight:800; color:var(--text); }
.section-link{ font-size:.875rem; color:var(--nilac-orange); text-decoration:none; }
.section-link:hover{ text-decoration:underline; }

.summary-title{ color:var(--muted); font-size:1rem; font-weight:600; margin-bottom:10px; }
.summary-value{ font-size:2rem; line-height:1.1; font-weight:800; letter-spacing:.2px; margin-bottom:12px; }
.summary-sub{ color:var(--muted); font-size:1rem; line-height:1.4; }

/* ---------- Surfaces ---------- */
.card,
.stat-card,
.opportunity-card,
.task-group,
/* .resources-panel, */
.resource-card,
.todo-card,
.summary-pill,
.motivational-card{
  background:var(--surface);
  color:var(--text);
  border-radius:var(--radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* ---------- Buttons ---------- */
button{ font:inherit; }
.primary-btn, .footer-btn{
  padding:12px; background:var(--nilac-orange); color:#fff;
  border:none; border-radius:10px; font-weight:700; cursor:pointer;
}
.secondary-btn{
  padding:12px; background:transparent; color:var(--nilac-orange);
  border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; gap:8px; cursor:pointer;
}
.apply-btn{
  padding:8px 12px; background:rgba(235,98,43,.18); color:var(--nilac-orange);
  border-radius:10px; border:1px solid var(--border); font-size:.875rem; cursor:pointer;
}
.primary-btn:hover, .footer-btn:hover, .apply-btn:hover{ filter:brightness(1.05); }

button:focus-visible, a:focus-visible{
  outline:2px solid #fff; outline-offset:2px; border-radius:12px;
}

/* Utility groups */
.cta-buttons{ display:flex; gap:10px; justify-content:center; }
.cta-buttons .primary-btn{ flex:0 0 25%; max-width:25%; }
@media (max-width:640px){
  .cta-buttons .primary-btn{ flex-basis:60%; max-width:60%; }
}

/* ---------- Header actions ---------- */
.profile-btn{
  color:var(--nilac-orange); 
  font-size:2rem; /* 1.25rem; */
  display: inline-flex; 
  width: 60px; height: 60px;  /* bigger hit target */
  align-items: center; 
  justify-content: center;
  background:none; 
  border:none; 
  cursor:pointer;
}
.logout-btn{
  font-size:.875rem; color:var(--danger);
  padding:6px 12px; background:rgba(255,255,255,.08);
  border-radius:10px; border:1px solid var(--border);
  margin-left:auto; display:block;
}

/* ---------- Stat Grid ---------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap); margin-bottom:16px;
}
@media (max-width: 900px){
  .stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 550px){
  .stat-grid{ grid-template-columns:1fr; }
}
.stat-card{ padding:14px; height:120px; position:relative; }
.stat-icon{ margin-bottom:8px; }
.stat-value{ font-size:1.5rem; font-weight:800; margin-bottom:4px; }
.stat-title{ font-size:.875rem; color:var(--muted); }
.stat-delta{ position:absolute; bottom:12px; left:12px; font-size:.8125rem; color:var(--muted-2); }

/* Semantic stat accents */
.stat--success .stat-icon, .stat--success .stat-value{ color:var(--success); }
.stat--accent  .stat-icon, .stat--accent  .stat-value{ color:var(--nilac-orange); }
.stat--warn    .stat-icon, .stat--warn    .stat-value{ color:var(--warn); }
.stat--danger  .stat-icon, .stat--danger  .stat-value{ color:var(--danger); }
.stat--purple  .stat-icon, .stat--purple  .stat-value{ color:var(--purple); }

/* ---------- Opportunities ---------- */
.opportunity-card{
  display:flex; align-items:center; padding:16px; gap:12px; margin-bottom:12px;
  transition: transform .15s ease, box-shadow .15s ease; cursor:pointer;
}
.opportunity-card:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.45); }
.opportunity-logo{
  width:50px; height:50px; border-radius:10px;
  background:rgba(235,98,43,.15);
  display:flex; align-items:center; justify-content:center; color:var(--nilac-orange);
}
.opportunity-details{ flex:1; }
.opportunity-brand{ font-weight:800; margin-bottom:4px; }
.opportunity-sport{ font-size:.875rem; color:var(--muted); margin-bottom:4px; }
.opportunity-meta{ display:flex; align-items:center; gap:6px; font-size:.875rem; color:var(--muted); }
.opportunity-compensation{ color:var(--nilac-orange); font-weight:700; }

/* ---------- Tasks ---------- */
.task-group{
  display:flex; align-items:center; padding:12px; gap:12px; margin-bottom:8px; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease; cursor:pointer;
}
.task-group:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.45); }
.task-indicator{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.task-indicator.urgent{ background:var(--danger); }
.task-indicator.normal{ background:var(--warn); }
.task-group-details{ flex:1; }
.task-group-title{ color:var(--nilac-orange); font-size:.95rem; font-weight:700; }
.task-group-subtitle{ font-size:.875rem; color:var(--muted); }
.task-group-chevron{ color:var(--nilac-orange); }

/* ---------- Social / Metrics ---------- */
.metric-pills{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.metric-pill{ padding:8px 10px; border-radius:10px; background:rgba(235,98,43,.12); }
.metric-title{ font-size:.8125rem; color:var(--muted-2); }
.metric-value{ font-size:1rem; font-weight:700; }

.chart-container{ height:220px; margin-bottom:12px; }

/* ---------- Earnings ---------- */
.earnings-card{ border-radius:calc(var(--radius) + 4px); }
.summary-pills{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 16px; }
@media (max-width: 900px){ .summary-pills{ grid-template-columns:1fr; } }
.summary-pill{ padding:20px; border-radius:var(--radius-lg); }

.progress-bar{ height:10px; background:#262a31; border-radius:6px; margin:6px 0 8px; }
.progress-fill{ height:100%; width:70%; background:var(--success); border-radius:6px; }

.info-tiles{ display:flex; gap:12px; }
.info-icon{ font-size:1.25rem; margin-right:12px; }
.info-title{ color:var(--muted); font-size:1rem; font-weight:600; margin-bottom:4px; }
.info-value{ font-size:1.5rem; font-weight:800; }

/* ---------- Resources ---------- */
.resources-panel{ 
    padding:12px; 
    border-radius: 0; /* var(--radius); */
    background:transparent; /* var(--surface); */
    box-shadow: none; /* 0 2px 10px rgba(0,0,0,.35); */
}
.resource-card{
  display:flex; align-items:center; gap:14px; padding:18px 20px; margin-bottom:12px; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease; cursor:pointer;
}
.resource-card:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.45); }
.resource-icon{
  width:44px; height:44px; min-width:44px; border-radius:10px;
  background:rgba(235,98,43,.15); display:flex; align-items:center; justify-content:center;
}
.resource-icon i{ color:var(--nilac-orange); font-size:1.15rem; }
.resource-details{ flex:1; }
/* .resource-title{ color:#fff; font-size:1.05rem; font-weight:700; margin-bottom:4px; } */
.resource-title{ color: var(--text); font-size:1.05rem; font-weight:700; margin-bottom:4px; }
.resource-subtitle{ color:var(--muted); font-size:.95rem; }
/* .resource-chevron{ color:var(--muted-2); font-size:1rem; } */
.resource-chevron{ color: var(--nilac-orange); font-size:1rem; }
.resource-card:hover .resource-chevron{
  color: var(--nilac-orange);
  transform: translateX(2px);
  transition: transform .15s ease;
}


/* ---------- Motivational / To-do ---------- */
.motivational-card{ padding:20px; }
.motivational-header{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.motivational-icon{
  width:44px; height:44px; border-radius:50%;
  background:rgba(235,98,43,.15); display:flex; align-items:center; justify-content:center;
}
.motivational-icon i{ color:var(--nilac-orange); font-size:1.2rem; }
.motivational-title{ font-weight:800; font-size:1.25rem; }
.motivational-description{ font-size:.95rem; color:var(--muted); }
.checklist{ margin:12px 0; }
.checklist-item{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.checklist-icon{ color:var(--nilac-orange); }
.checklist-text{ font-size:.95rem; }

.impact-chips{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.impact-chip{
  font-size:.95rem; padding:6px 10px; border-radius:12px;
  background:#1f2227; color:var(--muted); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ---------- Footer ---------- */
.footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(14,25,43,.95);
  height: var(--footer-h);             /* exact height */
  box-sizing: border-box;              /* include padding inside height */
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; gap: 12px;
  backdrop-filter: saturate(120%) blur(4px);
}
.footer-icon-btn{
  width:50px; padding:12px; background:#fff; color:var(--nilac-orange);
  border:none; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* ---------- Header Button Placement Variant ---------- */
.header .logout-btn{ margin-left:auto; }

/* ---------- Accessibility / Visibility Utilities ---------- */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; clip-path:inset(50%);
}

/* ---------- Optional: Light Elevation Utility ---------- */
.hover-lift{ transition: transform .15s ease, box-shadow .15s ease; }
.hover-lift:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.45); }

/* --- Panel theme toggle (light panels) --- */
body.panels-light .card,
body.panels-light .stat-card,
body.panels-light .opportunity-card,
body.panels-light .task-group,
body.panels-light .summary-pill,
body.panels-light .motivational-card,
body.panels-light .resource-card,
body.panels-light .todo-card {
  /* local variable overrides (inherit down) */
  --surface: #f1f2f4;        /* tile background */
  --text: #0b1220;           /* primary text on tiles */
  --muted: #6b7280;          /* secondary text */
  --muted-2: #8a9099;
  --border: #e5e7eb;

  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(2,6,23,.06), 0 8px 24px rgba(2,6,23,.05);
}

/* Progress bar looks better with lighter track in light panels */
body.panels-light .progress-bar { background:#e5e7eb; }

/* Simple iOS-style switch */
.theme-toggle{ display:inline-flex; align-items:center; gap:.5rem; margin-left:.5rem; }
.theme-toggle .switch{ position:relative; width:44px; height:24px; }
.theme-toggle input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.theme-toggle .slider{
  position:absolute; inset:0; border-radius:999px; background:var(--border);
  transition:background .2s ease;
}
.theme-toggle .slider::before{
  content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .2s ease;
}
.theme-toggle input:checked + .slider{ background:var(--nilac-orange); }
.theme-toggle input:checked + .slider::before{ transform:translateX(20px); }
.theme-toggle .label{ color:var(--muted); font-size:.9rem; }