style.css

/* ============================================================
   01  DESIGN TOKENS – tweak one hex, reskin everything ✨
   ============================================================ */

/* ---------- LIGHT THEME (default) ---------- */
:root {
  /* Brand accent  */
  --brand-500: #3aafa9;  /* teal */
  --brand-600: #2b7a78;

  /* Backgrounds */
  --bg-body:  linear-gradient(to bottom, #def2f1 0%, #ffffff 100%);
  --bg-card:  #ffffff;
  --bg-header: var(--brand-500);
  --bg-footer: var(--brand-500);
  --bg-table-hover: #dff6f5;

  --link-in-privacy: #000000;

  /* Typography */
  --text-body:      #1f2937; /* gray-800 */
  --text-heading:   #111827; /* gray-900 */
  --text-link:      #ffffff;
  --text-link-hover:#ffffff;

  /* Buttons & inputs */
  --btn-bg:         var(--brand-500);
  --btn-bg-hover:   var(--brand-600);
  --btn-text:       #ffffff;
  --btn-shadow:     0 2px 6px rgb(0 0 0 / .20);
  --btn-lift:       -2px; /* upward movement on hover */

  --input-bg:       #ffffff;
  --input-border:   #cbd5e1; /* slate-300 */
  --title-text: #ffffff;
  /* Table header */
  --table-th-bg:    var(--brand-500);
  --table-th-text:  #ffffff;

  --border-default: transparent;
}

/* ---------- DARK THEME OVERRIDES ---------- */
.dark {
  --brand-500: #2d8b87;  /* teal */
  --brand-600: #2d8b87;
  --bg-body:        #111827; /* slate-900 */
  --bg-card:        #1e293b; /* slate-800 */
  --bg-header:      var(--brand-500); /* keep teal bar */
  --bg-footer:      var(--brand-500);
  --bg-table-hover: #1b2535;

  --text-body:      #cbd5e1; /* slate-300 */
  --text-heading:   #f1f5f9; /* slate-100 */
  --text-link:      #ffffff; /* sky-400 */
  --text-link-hover:#f2f7fa; /* sky-300 */

  --title-text: #bdcdcc;
  --btn-bg:         #2d8b87; /* sky-400 */
  --btn-bg-hover:   #36a8a3; /* sky-500 */
  --btn-shadow:     0 2px 6px rgb(0 0 0 / .40);
  --link-in-privacy: #ffffff;
  --input-bg:       #0f172a; /* slate-900 */
  --input-border:   #334155; /* slate-700 */

  --table-th-bg:    var(--brand-600);
  --table-th-text:  #ffffff;

  --border-default: transparent; 
}

/* ============================================================
   02  GLOBAL RESET & BASE ELEMENTS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}



/* Smooth anchor navigation */
html{scroll-behavior:smooth}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg-body);
  color:var(--text-body);
}


h1,h2,h3,h4,h5,h6{color:var(--text-heading);font-weight:700}

a{color:var(--text-link);transition:color .3s}
a:hover{color:var(--text-link-hover)}

main{flex:1 1 auto}

/* ============================================================
   03  LAYOUT CONTAINERS / CARDS
   ============================================================ */
.card,article,section.bg-white{
  background:var(--bg-card);
  color:var(--text-body);
  border-radius:.5rem;
  box-shadow:0 1px 4px rgb(0 0 0 / .05);
  transition:background-color .2s,color .2s;
}

/* ============================================================
   04  HEADER & NAVIGATION
   ============================================================ */
header{
  background:var(--bg-header);
  color:var(--title-text);
  position: relative; /* so the toggle’s “absolute” sticks to the header */
  padding: 1.5rem 2rem; 
}

/* Constrain central content when used with .container */
.container{max-width:1100px;margin:0 auto;padding:0 1rem}

/* Improve chart area spacing and legibility */
.chart-container{min-height:340px;padding:1rem;background:transparent}

/* Slightly rounded header and subtle shadow for depth */
header{border-bottom-left-radius:10px;border-bottom-right-radius:10px;box-shadow:0 6px 18px rgba(17,24,39,0.06)}

nav a {
  text-decoration: none;
  border-bottom: 2px solid var(--border-default); /* if you still want a bottom border “line” */
}

/* On hover, swap in the underline (or change the border-bottom color, if you want that style instead) */



/* If you have standalone inline text links outside of <nav>, you can do something similar: */
/*a.inline-text {
  text-decoration: none;
  color: var(--text-link);
  transition: color 0.2s, text-decoration 0.2s;
}

a.inline-text:hover {
  text-decoration: underline;
  color: var(--text-link-hover);
}*/

.nav-link {
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* 1) Make the underline full‐width but initially scaled down */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;               /* adjust gap under the text as needed */
  width: 100%;                /* full width of the link text */
  height: 2px;                /* thickness of the underline */
  background-color: white;    /* underline color */
  transform-origin: center;   /* grow from the middle */
  transform: scaleX(0);       /* start “collapsed” */
  transition: transform 0.25s ease;
}

/* 2) On hover (or focus), scale it to full width */
.nav-link:hover::after,
.nav-link:focus::after {
  transform: scaleX(1);
}

/* 3) (Optional) Keep the link text white on hover/focus */
.nav-link:hover,
.nav-link:focus {
  color: white;
}
/* ============================================================
   05  BUTTONS – pop & lift 🚀
   ============================================================ */
button,
.class-button{
  background: var(--btn-bg);
  color:      var(--btn-text);
  padding:    0.6rem 1.25rem;
  border:     none;
  border-radius: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor:      pointer;
  box-shadow:  var(--btn-shadow);
  transform:   translateY(0);
  transition:  background-color 0.2s,
               transform        0.15s,
               box-shadow       0.15s;
}

button:hover,
.class-button:hover {
  background:      var(--btn-bg-hover);
  transform:       translateY(var(--btn-lift));
  box-shadow:      0 4px 12px rgb(0 0 0 / 0.25);
}

/* Subscribe popup */
.subscribe-popup{position:fixed;right:20px;bottom:20px;background:var(--bg-card);color:var(--text-body);border-radius:12px;box-shadow:0 8px 24px rgba(2,6,23,0.12);padding:14px 16px;z-index:1200;max-width:320px;font-size:14px}
.subscribe-popup h4{margin:0 0 6px 0;font-size:15px}
.subscribe-popup p{margin:0 0 10px 0;color:var(--text-body);opacity:0.95;line-height:1.25}
.subscribe-popup .no-wrap{white-space:nowrap}
.subscribe-popup .actions{display:flex;gap:8px;justify-content:flex-end}
.subscribe-popup .actions a{background:var(--btn-bg);color:var(--btn-text);padding:.45rem .9rem;border-radius:8px;text-decoration:none;font-weight:700}
.subscribe-popup .actions .visit-cta{box-shadow:var(--btn-shadow)}
.subscribe-popup .actions button{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text-body);cursor:pointer;padding:.4rem .6rem;border-radius:8px;font-weight:700}

/* Ensure inline links inside the popup are visible in light mode */
.subscribe-popup p a{color:var(--brand-600);text-decoration:underline}
.subscribe-popup p a:hover{color:var(--brand-500)}

/* Popup animation & responsive */
.subscribe-popup{transform:translateY(12px);opacity:0;transition:transform .36s cubic-bezier(.2,.9,.2,1),opacity .26s ease;}
.subscribe-popup.show{transform:translateY(0);opacity:1}

/* Disclaimer style */
.site-disclaimer{font-size:13px;color:var(--text-body);opacity:0.9;margin-top:0.75rem;text-align:center;max-width:900px}

/* Sticky one-line disclaimer bar (dismissible) */
.sticky-disclaimer{
  position:fixed;
  left:0;right:0;bottom:0;
  background:var(--bg-footer);
  color:var(--text-link-hover);
  padding:8px 12px;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  z-index:1300;
}
.sticky-disclaimer a{color:var(--text-link-hover);text-decoration:underline}
.sticky-disclaimer .sd-close{background:transparent;border:none;color:var(--text-link-hover);font-size:18px;cursor:pointer}

/* CSV note style (small italic) */
.csv-note{font-size:12px;font-style:italic;color:var(--text-body);opacity:0.9;margin-bottom:0.25rem}

/* Responsive adjustments */
@media (max-width: 640px){
  :root{--btn-lift: -1px}
  header{padding:1rem}
  .nav-link{font-size:15px}
  .container{padding:0 0.75rem}
  .chart-container{min-height:220px;padding:.5rem}
  .subscribe-popup{right:12px;left:12px;bottom:16px;max-width:none;padding:12px}
  .subscribe-popup .actions{justify-content:space-between}
  .class-button,button{width:100%;display:block}
}

/* Make canvas responsive */
canvas{width:100% !important;height:auto !important}

/* Slightly stronger card shadows on desktop */
@media (min-width: 1024px){
  .card,article,section.bg-white{box-shadow:0 8px 30px rgba(2,6,23,0.06)}
}

button:active,
.class-button:active {
  transform:       translateY(0);
  box-shadow:      var(--btn-shadow);
}

button:focus-visible,
.class-buttonfocus-visible {
  outline:         3px solid var(--text-link);
  outline-offset:  2px;
}



/* ============================================================
   06  FORM CONTROLS
   ============================================================ */
input,select{
  background:var(--input-bg);
  color:var(--text-body);
  border:1px solid var(--input-border);
  border-radius:.375rem;
  padding:.35rem .5rem;
  transition:background-color .2s,border-color .2s,color .2s;
}
input:focus,select:focus{outline:2px solid var(--btn-bg);outline-offset:1px}

/* ============================================================
   07  DATATABLES + TABLE WRAPPER
   ============================================================ */
.table-wrapper{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bg-card);
  border-radius:.5rem;
  box-shadow:0 1px 2px rgb(0 0 0 / .1);
  margin-bottom:1.5rem;
}

table.dataTable{width:100%;border-collapse:collapse}

table.dataTable thead th{
  background:var(--table-th-bg);
  color:var(--table-th-text);
}

table.dataTable tbody tr:hover{background:var(--bg-table-hover)}

/* Prevent Tailwind utilities forcing white/black in dark */
.dark .bg-white,
.dark .bg-\[\#ffffff\] {
  background: var(--bg-card) !important;
}

.dark .text-black {
  color: var(--text-body) !important;
}


/* ============================================================
   08  CHART CONTAINER
   ============================================================ */

.chart-container {
    position: relative;
    width: 100%;
    /* Even taller graph */
    min-height: 450px;
    height: 70vw; /* scales with screen width on mobiles */
    max-height: 800px; /* avoids being massive on desktops */
    background: var(--bg-card);
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / .1);
  }
  .chart-container canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
  }
/* ============================================================
   09  FOOTER
   ============================================================ */
footer{
  background:var(--bg-footer);
  color:var(--text-link-hover);
}

/* ============================================================
   10  THEME TOGGLE BUTTON (uses tokens)
   ============================================================ */
#theme-toggle{
  position: absolute;
  top: 1rem;
  right: 1rem;         
  z-index: 50;
  background: var(--btn-bg);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: var(--btn-shadow);
}
#theme-toggle:hover {
  background: var(--btn-bg-hover);
}
/* ─────────────────────────────────────────────────────────────
   11  PAGE-TITLE (per-page main heading, separate from other headers)
   ───────────────────────────────────────────────────────────── */

.page-title {
  /* Base typography (you can override any Tailwind utility) */
  font-size: 1.875rem;      /* same as text-3xl */
  line-height: 2.25rem;     /* equivalent to `sm:text-4xl` on larger screens */
  font-weight: 700;         /* bold */

  /* Spacing */
  margin: 0;                /* remove any default margin */
  padding-bottom: 0.5rem;   /* e.g. push the nav down a bit */

  /* Color (you can read from tokens, or set a hard‐coded value) */
  color: var(--text-link-hover); /* white in light mode; (or override for dark) */
}

/* If you want the page-title to appear slightly larger on bigger screens: */
@media (min-width: 640px) {
  .page-title {
    font-size: 2.25rem;    /* sm:text-4xl */
    line-height: 2.5rem;
  }
}

/* If you want to tweak its color specifically in dark-mode: */
.dark .page-title {
  /* For instance, keep it “near white” if your header is still teal in dark mode: */
  color: var(--text-heading); /* slate-100 or a custom token */
}
.link-in-privacy {
  color: var(--link-in-privacy);
}

.link-in-privacy:hover {
  color: var(--link-in-privacy);
}

#about-project {
  /* a very soft gray background */
  background-color: #ffffff;    /* ↔ Tailwind’s gray-100 */
  /* dark gray text for good contrast */
  color:            #1f2937;    /* ↔ gray-800 */
}

#about-project a {
  /* your teal brand → keeps it on-brand */
  color:            #347470;    /* ↔ var(--brand-500) */
}
#about-project a:hover {
  /* lighten on hover so it still pops */
  color:            #000000;    /* ↔ var(--brand-600) */
}

/* Dark mode */
.dark #about-project {
  /* deep slate background */
  background-color: #1f2937;    /* ↔ slate-800 */
  /* near-white text for readability */
  color:            #e5e7eb;    /* ↔ slate-200 */
}

.dark #about-project a {
  /* a softer sky-blue fits the dark palette */
  color:            #38bdf8;    /* ↔ sky-400 */
}
.dark #about-project a:hover {
  /* very light on hover */
  color:            #38bdf8;   /* ↔ sky-300 */
}