/* =========================================
   Johnny2Step — Slate Breeze (mid-tone theme)
   ========================================= */

/* Palette (mid-contrast, no harsh whites) */
:root{
  --bg: #1b212d;          /* page background (slate) */
  --nav: #1e2532;         /* navbar strip (slightly brighter than bg) */
  --panel: #242c3b;       /* cards / tiles */
  --panel-elev: #2a3445;  /* inner panel in dance rows */
  --border: #323c4e;      /* soft border */
  --text: #e8ecf3;        /* main text (off-white blue) */
  --muted: #bac3d3;       /* muted text */
  --subtle: #9da8ba;      /* tertiary text */
  --accent: #38c6b0;      /* teal accent */
  --accent-2: #2ab09b;    /* hover teal */
  --accent-warm: #ff8a66; /* warm accent for likes */
  --radius: 12px;
  --shadow: 0 8px 22px rgba(0,0,0,.28);
}

/* Base */
html, body{
  background: var(--bg);
  color: var(--text);
  font-family: "Inter","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-2); }

/* Navbar */
.navbar{
  background: var(--nav) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.navbar-brand, .nav-link{ color: var(--muted) !important; }
.navbar-brand:hover, .nav-link:hover{ color: var(--text) !important; }

/* Cards / Panels */
.card, .panel-contrast{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel-contrast{ background: var(--panel-elev); }
.card-body{ color: var(--text); }
.card-footer{
  background: transparent;
  border-top: 1px solid var(--border);
  color: var(--subtle);
}

/* Buttons */
.btn{
  border-radius: 10px;
  font-weight: 600;
  transition: all .18s ease;
}
.btn-primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #0b1414;
}
.btn-primary:hover{ background: var(--accent-2); border-color: var(--accent-2); }

.btn-outline-light{
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(2px);
}
.btn-outline-light:hover{
  border-color: var(--accent);
  color: var(--text);
  background: rgba(56,198,176,.12);
}

/* Heart pill emphasis (warm but not neon) */
.btn.btn-sm.btn-primary,
.btn.btn-sm.btn-primary span{
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  color: #2a0f08;
}
.btn.btn-sm.btn-primary:hover{ background: #ffa385; border-color: #ffa385; }

/* Tables (one row per dance) */
.table{
  color: var(--text);
  border-collapse: separate;
  border-spacing: 0 14px;       /* floating rows */
}
.table thead th{
  background: #212838;          /* close to bg, low contrast */
  color: var(--subtle);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .08em;
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: .8rem 1rem;
}
.table td{
  border-top: 0;
  padding: 0 1rem 1rem 1rem;
  vertical-align: top;
}
.table tbody tr:hover td{ background: rgba(255,255,255,.02); }

/* Badges */
.badge.text-bg-dark{
  background: #263044 !important;
  color: var(--muted) !important;
  border: 1px solid var(--border);
  padding: .36rem .62rem;
  border-radius: 999px;
  font-weight: 700;
}

/* Text helpers */
h1,h2,h3,h4,h5{ color: var(--text); font-weight: 700; letter-spacing:.2px; }
.text-muted{ color: var(--muted) !important; }
.small, small{ color: var(--subtle) !important; }

/* Forms */
.form-control, .form-select, textarea{
  background: #202837;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
}
.form-control::placeholder, textarea::placeholder{ color: var(--subtle); }
.form-control:focus, .form-select:focus, textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 .18rem rgba(56,198,176,.18);
}

/* Inline action buttons inside dance panel */
.panel-contrast .btn.btn-sm{
  padding:.34rem .52rem;
  border-radius: 9px;
}

/* Timestamp chip inside panel */
.panel-contrast .timestamp,
.panel-contrast .small.text-muted.ms-2{
  display:inline-block;
  padding:.28rem .5rem;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: var(--muted);
  font-size:.8rem;
}

/* Section heading accent */
.container .h4, .container h1.h4{
  border-left: 5px solid var(--accent);
  padding-left: .6rem;
  margin-top:.5rem;
}

/* Subtle lift on hover for inner panel only */
.panel-contrast:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
  transition: all .22s ease;
}
/* --- Remove white-ish fills behind panels and rows --- */
.panel-contrast,
.card {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);   /* darker shadow, no glow */
}

/* kill the light gradient inside the card */
.panel-contrast .card-body {
  background: transparent !important;
}

/* ensure no white table background shows through */
.table,
.table * {
  background-color: transparent !important;
}

/* make the whole row area the same slate as the page (no white strip) */
.table tbody tr td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-top: 0;
}

/* optional: add a subtle divider between rows instead of a light band */
.table tbody tr + tr td {
  border-top: 1px solid var(--border);
}

/* keep the inner action-chip backgrounds dark, not milky */
.btn-outline-light {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* timestamp chip darker */
.panel-contrast .timestamp,
.panel-contrast .small.text-muted.ms-2 {
  background: rgba(0, 0, 0, .18) !important;
}

/* inner mini card (where the music/level sits) slightly darker than panel */
.panel-contrast {
  background: var(--panel-elev) !important;
}

/* if you still see light halos, this removes any stray gradients we set earlier */
:root {
  --panel-grad: none !important;
}
/* add to static/style.css */
.table thead th { padding-left: 1rem; }
.table td { padding-left: 1rem; }

/* Bright white for dance titles */
.dance-name,
.dance-name a,
.dance-name a:visited {
  color: #ffffff !important;
}

/* YouTube thumbnail strip */
.yt-strip .yt-thumb img{
  width: 140px;
  height: 78px;         /* 16:9-ish, slight crop */
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  display: block;
}
.yt-strip .yt-thumb img:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  opacity: .95;
}

/* Make the title link look like the current title styling */
.dance-name-link { color: #fff; text-decoration: none; }
.dance-name-link:hover { text-decoration: underline; }

.ratio iframe { border: 0; }
.post-body img { max-width: 100%; height: auto; }

/* J2S dances table: single hairline between rows */
.j2s-grid { border-collapse: collapse; }
.j2s-grid tbody tr { border-bottom: 1px solid var(--border); }
.j2s-grid tbody tr:last-child { border-bottom: 0; }

/* Keep the compact padding you already set */
.table-compact th,
.table-compact td { padding: .4rem .6rem; }
.dance-name { color: var(--text); }


/* ===== Compact dance list ===== */
.dance-table thead th {
  padding-top: .15rem;
  padding-bottom: .15rem;
}

.dance-table tbody td {
  padding-top: .15rem;         /* was ~.75–1rem via Bootstrap */
  padding-bottom: .15rem;
}

.dance-table .dance-title {
  margin-bottom: .25rem;       /* was mb-2 */
  font-size: 1rem;             /* was fs-5 ? slightly smaller */
  line-height: 1.2;
}

.dance-table .panel-compact {
  padding: .5rem .6rem;        /* was ~.9–1.2rem */
  margin: .25rem 0 .4rem;      /* reduce gap around the card/panel */
  border-radius: .5rem;
}

.dance-table .meta-line {
  margin-top: .15rem;          /* tighten meta block spacing */
}

.dance-table .btn, 
.dance-table .badge {
  padding: .5rem .4rem;       /* smaller pills/buttons */
  font-size: .8rem;
  line-height: 1.1;
}

.dance-table .chip,
.dance-table .icon-btn {
  height: 10px;
  padding: 0 .4rem;
  font-size: .8rem;
}


/* ===== Kill lines between dance rows ===== */
.dance-table { 
  border-collapse: collapse !important;  /* no gaps between rows */
  border-spacing: 0 !important;
}

/* remove any borders Bootstrap or earlier rules add */
.dance-table thead th,
.dance-table tbody td { 
  border: 0 !important; 
}

/* you have a divider rule earlier — neutralize it for this table */
.dance-table tbody tr + tr td { 
  border-top: 0 !important; 
}

/* ignore Bootstrap’s border utilities applied in the markup */
.dance-table .border-top,
.dance-table .border-bottom { 
  border: 0 !important; 
}

/* Title inside the compact panel */
.panel-compact .dance-title {
  margin: 0 0 .35rem;
  padding: 0;
  line-height: 1.25;
}

.panel-compact .dance-name-link { color: #fff; text-decoration: none; }
.panel-compact .dance-name-link:hover { text-decoration: underline; }

/* Hide legacy title row that appears above the card */
.dance-table td > .dance-title { 
  display: none !important;
}

/* Ensure the title inside the panel stays visible */
.dance-table .panel-compact .dance-title {
  display: block !important;
  margin-bottom: .35rem;
}

/* ===== Compact spacing for dance list ===== */

/* shrink the gap below each inner card */
.panel-contrast { 
  margin-bottom: .25rem !important;   /* was .5rem via .mb-2 */
}

/* compact the wrapper panel spacing */
.panel-compact { 
  margin: .15rem 0 .25rem !important; /* was ~.25–.4rem */
  padding: .25rem .35rem !important;  /* was .5rem .6rem */
}

/* reduce table cell vertical padding */
.dance-table tbody td { 
  padding-top: .15rem !important; 
  padding-bottom: .15rem !important; 
}

/* tighten title spacing inside the card */
.panel-compact .dance-title { 
  margin-bottom: .1rem !important; 
}

/* keep media/controls row snug */
.panel-contrast .btn.btn-sm,
.panel-contrast .badge { 
  margin-top: 0 !important; 
}

/* remove any accidental extra spacing between rows */
.dance-table tbody tr { 
  height: auto; 
}


/* CopperKnob 12-point star */
.ck-star { display:inline-block; vertical-align:-3px; color:#f5c542; }
.ck-btn.btn-outline-light:hover .ck-star { filter:brightness(1.1); transform:scale(1.05); }

/* Panel background image layer (lazy) */
.panel-contrast { position: relative; overflow: hidden; }
.panel-contrast .card-body { position: relative; z-index: 1; }

.panel-contrast .panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .10;             /* 20% opacity */
  filter: saturate(110%);
  transition: opacity .3s ease, transform .4s ease;
  border-radius: inherit;
}

/* CopperKnob 12-point star */
.ck-star { display:inline-block; vertical-align:-3px; color:#f5c542; }
.ck-btn.btn-outline-light:hover .ck-star { filter:brightness(1.1); transform:scale(1.05); }