/* humanranked – terminal/“bitchat” theme */
/* One file: static/styles.css */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  /* Colors tuned for contrast on dark */
  --bg: #070a08;                 /* near-black green */
  --fg: #d9ffe6;                 /* readable mint text */
  --fg-dim: #b7f4cb;             /* secondary text */
  --accent: #2ee66e;             /* primary neon-ish */
  --accent-dim: #24bf59;
  --danger: #ff6b6b;
  --danger-dark: #ff4f4f;
  --danger-text: #290404;
  --btn-text-dark: #022d15;
  --line: rgba(46,230,110,.35);  /* borders */
  --faint: rgba(46,230,110,.10); /* panels/alerts */
}

html,body{height:100%}
body{
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.2px;
  -webkit-font-smoothing: antialiased;
  /* subtle corner glow only (keeps text crisp) */
  background:
    radial-gradient(1000px 700px at 10% -10%, rgba(46,230,110,.08), transparent 60%),
    radial-gradient(1000px 700px at 110% 110%, rgba(46,230,110,.06), transparent 60%),
    var(--bg);
}

/* Optional faint grid. If you want it stronger, raise the alpha values. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(to bottom, rgba(46,230,110,.025) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(to right, rgba(46,230,110,.025) 0 2px, transparent 2px 4px);
  mix-blend-mode:screen;
}

/* Links */
a{ color: var(--accent-dim); text-decoration:none }
a:hover{ color: var(--accent); text-shadow:0 0 8px var(--accent) }

/* Navbar */
.nav-terminal{
  background: rgba(0,0,0,.5);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -6px 12px rgba(46,230,110,.06);
  position: relative; z-index: 2;
}
.nav-terminal .navbar-brand,
.nav-terminal .nav-link,
.nav-terminal .navbar-text{ color: var(--fg) !important }
.nav-terminal .nav-link:hover,
.nav-terminal .navbar-brand:hover{ color: var(--accent) !important }

/* Make the burger button visible & greenish */
.navbar-dark .navbar-toggler{ border-color: var(--accent-dim) }
.navbar-dark .navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(46,230,110,.25) }
.navbar-dark .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(46,230,110,0.95)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Cards / panels */
.card{
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(46,230,110,.12);
}
.card-hover:hover{ box-shadow: 0 0 18px rgba(46,230,110,.25) }

/* Lists / sidebar */
.list-group-item{
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
}
.list-group-item a{ color: var(--fg) }
.list-group-item.active{
  background: rgba(46,230,110,.15);
  color: var(--accent);
  border-color: var(--accent);
}

/* Buttons */
.btn{
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: 0 0 10px rgba(46,230,110,.25);
}
.btn:hover{ background: rgba(46,230,110,.18); color: #022d15 }
.btn:active{ transform: translateY(1px) }
.btn-primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #022d15;
}
.btn-primary:hover{ background: #37f07a; border-color: #37f07a }

/* Vote buttons: provide clear visual state for cast votes */
.vote-button{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.vote-marker{
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vote-button-up{
  color: var(--accent);
  border-color: var(--accent);
}

.vote-button-up:hover{
  background: rgba(46,230,110,.22);
  color: var(--btn-text-dark);
}

.vote-button-up.is-active{
  background: var(--accent);
  color: var(--btn-text-dark);
  box-shadow: 0 0 14px rgba(46,230,110,.45);
}

.vote-button-up.is-active .vote-marker{
  color: var(--btn-text-dark);
}

.vote-button-down{
  color: var(--danger);
  border-color: var(--danger);
}

.vote-button-down:hover{
  background: rgba(255,107,107,.22);
  color: var(--danger-text);
  border-color: var(--danger);
}

.vote-button-down.is-active{
  background: var(--danger);
  color: var(--danger-text);
  border-color: var(--danger-dark);
  box-shadow: 0 0 14px rgba(255,107,107,.35);
}

.vote-button-down.is-active .vote-marker{
  color: var(--danger-text);
}

.vote-button:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.vote-category-row{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .35rem .5rem;
}

.vote-category-label{
  font-weight: 600;
  min-width: 0;
}

.vote-category-actions{
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vote-category-actions form{
  margin: 0;
}

.category-list-row{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: .35rem .5rem;
}

.category-list-name{
  min-width: 0;
  display: block;
}

.category-list-actions{
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.category-list-actions form{
  margin: 0;
}

@media (max-width: 576px){
  .vote-category-row,
  .category-list-row{
    grid-template-columns: minmax(0,1fr);
  }

  .vote-category-actions,
  .category-list-actions{
    justify-content: flex-start;
  }
}

/* Badges */
.badge{
  background: rgba(46,230,110,.22)!important;
  color: var(--accent);
  border: 1px solid var(--line);
}

/* Forms */
.form-control,.form-select,.form-check-input{
  background: rgba(0,0,0,.45);
  color: var(--fg);
  border: 1px solid var(--line);
}
.form-control::placeholder{ color: rgba(215,255,231,.6) }
.form-control:focus,.form-select:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(46,230,110,.25);
}
label{ color: var(--fg-dim) }

/* Alerts */
.alert{
  background: var(--faint);
  border-color: var(--accent);
  color: var(--fg);
}

.alert-celebration{
  background: rgba(46,230,110,.16);
  border-color: rgba(46,230,110,.65);
  box-shadow: 0 0 18px rgba(46,230,110,.35);
}

.alert-celebration .btn-close{
  filter: invert(75%);
}

/* Offcanvas (mobile categories) */
.offcanvas{ background: rgba(0,0,0,.7); color: var(--fg); border-right: 1px solid var(--line) }
.offcanvas .list-group-item{ border-color: var(--line) }

/* Tables */
.table{ color: var(--fg); border-color: var(--line); --bs-table-bg: transparent }
.table thead th{ border-bottom: 1px solid var(--line); color: var(--accent) }
.table td,.table th{ border-color: var(--line) }
.table td{ color: var(--accent) }
.table a{ color: var(--accent) }
.table-custom th,.table-custom td{ background-color: transparent }
.table-hover.table-custom tbody tr:hover{ background: var(--faint) }

/* Make "muted" text readable on dark background */
.text-muted {
  color: var(--fg-dim) !important;   /* from our palette */
}

/* Extra faint text for less prominent bylines */
.text-faint {
  color: rgba(183,244,203,.55) !important;
}

/* If you want it a touch brighter, use this instead: */
/* .text-muted { color: rgba(217,255,230,.8) !important; } */
/* Headings */
h1,h2,h3,h4{ color: var(--fg); text-shadow: 0 0 6px rgba(46,230,110,.12) }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .btn:active{ transform:none }
  body::before{ background:none }
}

/* Breadcrumbs: high-contrast on dark */
.breadcrumb {
  --bs-breadcrumb-item-color: var(--fg-dim);
  --bs-breadcrumb-item-active-color: var(--fg);      /* or var(--accent) if you want green */
  --bs-breadcrumb-divider-color: var(--fg-dim);
}

.breadcrumb .breadcrumb-item a {
  color: var(--fg-dim);
}
.breadcrumb .breadcrumb-item a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--fg-dim);   /* divider " / " or ">" */
  opacity: .9;
}

/* Make the active crumb (tool name) pop a bit more */
.breadcrumb-item.active {
  color: var(--fg);       /* swap to var(--accent) for neon green */
  font-weight: 600;
}

/* Brand stack under the navbar title */
.brand-title{
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: .2px;
}

.brand-subtitle{
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .15rem;
  font-size: .72rem;
  line-height: 1;
  color: var(--accent);
}

/* Keep the subtitle dim even when hovering the brand link */
.nav-terminal .navbar-brand:hover .brand-subtitle{
  color: var(--fg-dim);
}

.brand-finxter-logo{
  height: 14px;     /* tweak to 15–16px if your PNG looks tiny */
  width: auto;
  vertical-align: -2px;
}

.brand-logo{
  height: 32px;
  width: auto;
}

@media (min-width: 768px){
  .brand-title{ font-size: 1.28rem }
  .brand-subtitle{ font-size: .86rem }
}

/* Slightly tighter vertical padding so the stack fits neatly */
.navbar-brand{ padding-top: .25rem; padding-bottom: .25rem }

/* --- Page layout so footer sits below the fold on short pages --- */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#page-content { flex: 1 0 auto; }   /* content grows */
.site-footer   { flex-shrink: 0; }   /* footer stays at the end */

/* --- Footer (quiet, compact, low-contrast) --- */
.site-footer{
  border-top: 1px solid var(--line, rgba(255,255,255,.12));
  background: transparent;
  margin-top: 2.25rem;           /* healthy spacing from content */
  padding: 1rem 0 1.25rem;       /* breathable but compact */
  font-size: 0.78rem;            /* smaller than .small */
  line-height: 1.4;
  color: var(--fg-weak, rgba(255,255,255,.48)); /* lowered contrast */
}

.site-footer .legal-links{
  display: flex;
  align-items: center;
  gap: .75rem;
}

.site-footer a{
  color: var(--fg-weak, rgba(255,255,255,.6));
  text-decoration: none;
}
.site-footer a:hover{
  color: var(--accent, #38bdf8);
  text-decoration: underline;
}

.site-footer .legal-disclaimer{
  max-width: 95ch;   /* keep it readable and unobtrusive */
  margin: .25rem 0 0 0;
  opacity: .9;       /* another nudge down in emphasis */
}

/* Slightly smaller on wide screens */
@media (min-width: 992px){
  .site-footer{ font-size: 0.75rem; }
}

/* Tool logos */
.tool-logo-img{
  width:40px;
  height:40px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
}

.tool-logo-default{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  background: var(--line);
  color: var(--accent);
  border-radius:50%;
}

/* Category suggestions dropdown */
.category-suggestions{
  position:absolute;
  top:calc(100% + 0.25rem);
  left:0;
  right:0;
  z-index:1050;
  max-height:16rem;
  overflow-y:auto;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
  background:#0f1d16;
  border:1px solid var(--line);
  border-radius:.75rem;
}

.category-suggestions .list-group-item{
  cursor:pointer;
  background:#0f1d16;
  color:var(--fg);
  border-color:rgba(46,230,110,.25);
  transition:background-color .15s ease, color .15s ease;
}

.category-suggestions .list-group-item + .list-group-item{
  border-top-color:rgba(46,230,110,.2);
}

.category-suggestions .list-group-item:hover,
.category-suggestions .list-group-item:focus{
  background:#183325;
  color:var(--accent);
}

.category-suggestions .badge{
  background:rgba(46,230,110,.18);
  color:var(--accent);
}

.form-text{
  color:var(--fg-dim);
}