/* ███ JLP NIGHT MODE — Dystopian Retro-Futurist ███
   Moody blood-red accents, iron blacks, readable gold ink,
   scanlines + vignette. Compatible with your current HTML. */

:root{
  /* Core palette */
  --bg: #070808;                             /* near-black */
  --card-bg: rgba(12, 10, 10, 0.84);         /* smoked glass */
  --panel: rgba(20, 14, 14, 0.9);
  --row-dark: #0f0c0c;
  --row-light: #171112;

  --ink: #e8dcc1;                            /* aged gold text */
  --ink-dim: #a8956b;
  --accent: #ff4941;                         /* hot red (CTAs) */
  --accent-2: #7a1816;                       /* iron red outlines */
  --focus: #ff8a57;                          /* warm focus halo */
  --danger: #ff6150;                         /* alarming red */
  --ok: #3ec978;                             /* hope glimmer (rare) */

  --shadow: 0 18px 50px rgba(0,0,0,.6);
  --radius: 14px;

  font-family: 'Inter', system-ui, Arial, sans-serif;
  color: var(--ink);
  font-size: 1.05rem;
}

/* ======= Background: poster + scanlines + vignette ======= */
html,body{margin:0;padding:0;min-height:100%;overflow-x:hidden;}
*,*:before,*:after{box-sizing:border-box;}

body::before{
  content:"";
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 700px at 65% -15%, rgba(255,68,54,.18), transparent 70%),
    url("bg-dark.png") center/cover no-repeat fixed; /* fallback for older browsers */
  filter: saturate(1.05) contrast(1.08) brightness(.5);
  opacity:.95;
}

/* WebP support */
.webp body::before {
  background:
    radial-gradient(1200px 700px at 65% -15%, rgba(255,68,54,.18), transparent 70%),
    url("bg-dark.webp") center/cover no-repeat fixed;
}

/* AVIF support (best compression) */
.avif body::before {
  background:
    radial-gradient(1200px 700px at 65% -15%, rgba(255,68,54,.18), transparent 70%),
    url("bg-dark.avif") center/cover no-repeat fixed;
}
/* subtle scanlines + static */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 3px),
    radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,.65), transparent 60%);
  mix-blend-mode:soft-light; opacity:.35;
}

/* ======= Headings & links ======= */
h1,h2{margin:0; font-weight:800; color:var(--accent); text-align:center; letter-spacing:.6px;}
h1 span{color:var(--ink); opacity:.85;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:#ffd3b8;}

/* ======= Main card ======= */
.card{
  max-width: 1000px;
  margin: clamp(1.2rem, 3vw, 2rem) auto;
  padding: 2rem 2.2rem;
  background: var(--card-bg);
  border: 1.5px solid rgba(122,24,22,.55);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px) saturate(120%);
  z-index: 0;
}
@media (prefers-reduced-motion:no-preference){
  .fade-in{animation: fade .55s ease-out both;}
  @keyframes fade{from{opacity:0; transform:translateY(12px)}}
}

/* ======= Headline bar ======= */
.headline{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.headline h1{flex:1; min-width:220px; text-align:left;}
.headline-actions{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;}

/* ======= Buttons ======= */
.btn-primary,.btn-outline{
  font: 700 .9rem/1 'Inter',sans-serif;
  padding:.65rem 1rem; border-radius:12px;
  display:inline-flex; align-items:center; gap:.45em;
  cursor:pointer; letter-spacing:.25px;
  transition: transform .06s ease, background .2s, color .2s, border-color .2s;
}
.btn-primary{
  background: linear-gradient(180deg, #ff6b54, #d9382b);
  color:#1d0e0c; border:1px solid #a51f19;
  box-shadow: 0 8px 20px rgba(217,56,43,.28);
}
.btn-primary:hover{filter:brightness(.98);}
.btn-primary:active{transform: translateY(1px);}
.btn-outline{
  color:#ffd3b8;
  background: rgba(122,24,22,.22);
  border:1.5px solid var(--accent-2);
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,.06);
}
.btn-outline:hover{background: rgba(122,24,22,.35); color:var(--accent);}
.btn-outline:focus-visible,.btn-primary:focus-visible{outline:3px solid var(--focus); outline-offset:2px;}

/* ======= Inline date picker (header) ======= */
.range-picker-inline{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;}
.range-picker-inline input[type="date"]{
  padding:.45rem .6rem; width:100%; min-width:0; min-height:2.5rem;
  font:600 .85rem 'Inter',sans-serif;
  color:var(--ink); background:var(--panel);
  border:1px solid rgba(165,31,25,.45); border-radius:8px;
}
.range-picker-inline button{padding:.5rem .9rem; font-size:.85rem; min-height:2.5rem;}
/* (If you still use the block picker elsewhere) */
.range-picker{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) 140px; gap:1rem; align-items:end;}
.picker-field{display:grid; gap:.35rem;}
label{font-size:.8rem; color:var(--ink-dim);}
input[type="date"]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,73,65,.18);}


/* Make the calendar icon visible on dark inputs (Chromium/WebKit) */
.range-picker-inline input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.2) contrast(1.2); /* turn black icon light */
  opacity: 0.9;
  cursor: pointer;
}

/* Give the icon a bit more room and a subtle focus ring */
.range-picker-inline input[type="date"]{
  padding-right: 2.25rem;           /* room for icon */
  color-scheme: dark;               /* use dark-aware picker where supported */
}
.range-picker-inline input[type="date"]:focus-visible{
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 2px;
}

/* Optional: show a custom icon for browsers that hide the default one.
   This overlays a tiny calendar glyph; clicking still hits the input. */
.range-picker-inline .date-wrap{
  position: relative;
  flex:1 1 160px;
  min-width:7.5rem;
}
.range-picker-inline .date-wrap::after{
  content: "";
  position: absolute;
  top: 50%;
  right: .75rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  background: center/contain no-repeat
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<rect x='3' y='4' width='18' height='18' rx='2' ry='2'/>\
<line x1='16' y1='2' x2='16' y2='6'/>\
<line x1='8' y1='2' x2='8' y2='6'/>\
<line x1='3' y1='10' x2='21' y2='10'/>\
</svg>");
  pointer-events: none; /* clicks go to the input */
  opacity: .9;
}

/* ======= Table ======= */
.btn-icon{
  padding:.5rem;
  min-width:2.75rem;
  justify-content:center;
}
.btn-icon span[aria-hidden="true"]{font-size:1.15rem; line-height:1;}

.table-wrapper{position: relative;}
.table-wrapper h2{margin-top:.6rem; margin-bottom:1rem;}

.table-scroll{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.25rem;
}
.table-scroll::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:12px;
}

/* Watermark */
.table-wrapper::before{
  content: "OpenJUP.com";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.03);
  z-index: 3;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.05em;
  font-family: 'Inter', sans-serif;
}

table{width:100%; border-collapse:separate; border-spacing:0; font-size:.92rem; position: relative; z-index: 2;}
th,td{padding:.75rem .7rem; text-align:center;}
th{
  background: linear-gradient(180deg, #1b1212, #120d0d);
  color:#ffe6c7;
  position:sticky; top:0; z-index:3;
  border-bottom:1px solid rgba(122,24,22,.6);
  text-transform:uppercase; letter-spacing:.45px; font-weight:800;
}
tbody tr:nth-child(odd){background: var(--row-dark);}
tbody tr:nth-child(even){background: var(--row-light);}
tbody tr:hover{background:#1f1516;}
td{border-bottom:1px solid rgba(122,24,22,.35);}
.num{text-align:right; font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1;}
table tr > *:first-child{border-left:1px solid rgba(122,24,22,.45);}
table tr > *:last-child{border-right:1px solid rgba(122,24,22,.45);}

/* ======= Totals ======= */
.grand-total{margin-top:.75rem; text-align:right; font-weight:800; color:#ffe6c7;}
.grand-total span{color:#ffb27f; text-shadow:0 0 12px rgba(255,178,127,.22);}

/* ======= APR Summary ======= */
.apr-summary{text-align:center; margin-top:1.2rem;}
.apr-grid{
  margin-top:.9rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;
}
.apr-grid div{
  background: linear-gradient(180deg, #140f10, #0f0c0c);
  border: 1.5px solid rgba(122,24,22,.55);
  border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow:0 10px 22px rgba(0,0,0,.55);
}
.apr-grid strong{
  color:#ffb27f; font-size:1.24rem; display:block;
  text-shadow:0 0 10px rgba(255,73,65,.14);
}
.apr-grid small{font-size:.75rem; color:var(--ink-dim);}

/* Optional “coming soon / hope” box class (green accent) */
.coming-share{
  position:relative;
  background: linear-gradient(180deg, #0e1c14, #0b1610);
  border-color: rgba(62,201,120,.45);
}
.coming-share strong{color:var(--ok); text-shadow:0 0 10px rgba(62,201,120,.25);}
.coming-share small{color:#a6e7c0;}
.coming-share .tag{
  position:absolute; top:-10px; right:12px;
  font:700 .65rem/1 'Inter',sans-serif;
  color:#0b1b11; background:#3ec978; padding:.25rem .5rem; border-radius:8px;
  box-shadow:0 4px 10px rgba(62,201,120,.3);
}

/* ======= Footer ======= */
footer{
  margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap;
  align-items:center; justify-content:space-between; font-size:.9rem;
}
footer .share{margin-left:auto;}

/* ======= Utilities ======= */
.hidden{display:none !important;}
@media (max-width:560px){
  .headline h1{font-size:1.35rem;}
  .btn-outline{width:100%;}
}
:focus-visible{scroll-margin:80px;}

@media (max-width: 768px){
  .card{
    /* margin: 1rem 1rem 1.6rem; */
    padding: 1rem 1rem;
  }
  .headline{
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .headline{
    flex-direction:column;
    align-items:stretch;
    gap:.75rem;
  }
  .headline h1{
    text-align:center;
  }
  .headline-actions{
    width:100%;
    justify-content:center;
  }
  .range-picker-inline{
    width:100%;
    justify-content:center;
    gap:.4rem;
    flex-wrap:nowrap;
  }
  .range-picker-inline .date-wrap{
    flex:1 1 7.5rem;
  }
  .range-picker-inline input[type="date"]{
    width:100%;
    font-size:.78rem;
    padding:.4rem .55rem;
  }
  .range-picker-inline button{
    flex:0 0 auto;
    font-size:.8rem;
    padding:.45rem;
  }
}

@media (max-width: 520px){
  .apr-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem;
  }
  .apr-grid div{
    padding:.8rem .85rem;
  }
  .apr-grid strong{
    font-size:1.05rem;
  }
  .apr-grid small{
    font-size:.68rem;
  }
}

@media (max-width: 400px){
  .range-picker-inline .date-wrap{
    flex:1 1 7.5rem;
  }
  .apr-grid{
    gap:.6rem;
  }
}