/* =========================
   Tool Deal Hub – Shared Theme
   Dark, cohesive across /bmsm and /hack
   ========================= */

/* ---- Design tokens ---- */
:root{
    --bg:#0b1220;
    --card:#0f172a;
    --card2:#0b1528;
    --ink:#e5e7eb;
    --muted:#94a3b8;
    --line:#1e293b;
    --accent:#60a5fa;
    --accent2:#22c55e;

    /* light-ish surfaces for contrast inside dark cards */
    --soft:#020617;

    --shadow: 0 8px 28px rgba(0,0,0,.25);
    --shadow-soft: 0 2px 10px rgba(0,0,0,.25);
}

/* ---- Global reset-ish ---- */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    line-height:1.35;
}

/* Links */
a{ color:#93c5fd; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Headings */
h1,h2,h3{ margin:0 0 .5rem 0; }

/* =========================
   Shared Header / Nav
   ========================= */
.site-header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(2,6,23,.82);
    backdrop-filter: blur(10px) saturate(140%);
    border-bottom: 1px solid var(--line);
}

.site-inner{
    max-width:1100px;
    margin:0 auto;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.brand{
    font-weight:800;
    letter-spacing:.02em;
    color: var(--ink);
    text-decoration:none;
}

.nav{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.nav-link{
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    color: var(--muted);
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}

.nav-link:hover{
    color: var(--ink);
    background: rgba(96,165,250,.08);
    border-color: rgba(96,165,250,.35);
}

.nav-link.active{
    color:#031024;
    background: var(--accent);
    border-color: transparent;
}

/* =========================
   Layout containers
   ========================= */

/* /bmsm uses .wrap; keep it */
.wrap{
    max-width:1100px;
    margin:24px auto;
    padding:0 16px;
}

/* /hack TOOL_TEMPLATE uses .page-container */
.page-container{
    max-width:960px;
    margin:24px auto;
    padding:0 16px;
}

/* /hack INDEX_TEMPLATE currently has body padding; remove that dependency by styling content spacing */
body > h1,
body > p,
body > .tabs,
body > .tool-search,
body > .tool-grid,
body > .empty-state{
    max-width:1100px;
    margin-left:auto;
    margin-right:auto;
    padding-left:16px;
    padding-right:16px;
}
body > h1{ margin-top:18px; }
body > p{ margin-top:6px; color:var(--muted); }

/* =========================
   Shared "Card" language
   ========================= */
.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px;
    box-shadow: var(--shadow);
}

.card + .card{ margin-top:14px; }

/* Freegood “hero-card” becomes a dark card too */
.hero-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:16px 18px;
    box-shadow: var(--shadow);
    margin-bottom:14px;
}

.hero-title{
    margin:0 0 6px 0;
    font-size:18px;
}

.hero-sub{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.highlight{ font-weight:700; color:var(--ink); }

/* =========================
   Tabs (used in both apps)
   ========================= */
.tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:10px auto 14px;
    max-width:1100px;
    padding:0 16px;
}

.tab{
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--line) #0ea5e9;
    color: var(--muted);
    text-decoration:none;
    font-size:13px;
    font-weight:600;
}

.tab:hover{
    color: var(--ink);
    background: rgba(96,165,250,.08);
    border-color: rgba(96,165,250,.35);
}

.tab.active{
    background: var(--accent);
    color:#031024;
    border-color: transparent;
}

/* BMSM badge */
.badge{
    display:inline-block;
    padding:0 6px;
    border-radius:999px;
    font-size:11px;
    margin-left:6px;
    background:#0b1220;
    color:#cbd5e1;
    border:1px solid var(--line);
}

/* =========================
   BMSM specifics (kept very close to your original)
   ========================= */
.h1{ font-size:20px; margin:0 0 6px; }
.sub{ color:var(--muted); font-size:13px; margin:0; }
.count{ font-size:12px; color:#cbd5e1; }

.controls{
    margin:14px 0 10px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--line);
    background:var(--soft);
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
    align-items:center;
}

.controls-container{
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    padding: 12px 14px;
    border-radius: 12px;
    margin: 14px 0;
}

.controls-label{
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:10px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    opacity:.85;
}

.controls input[type="search"],
.controls select{
    background:var(--card2);
    border:1px solid var(--line);
    color:var(--ink);
    border-radius:8px;
    padding:9px 11px;
    font-size:13px;
}

.controls input[type="search"]{ flex:1 1 260px; }
.controls select{ flex:0 0 220px; }

.pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 10px;
    font-size:13px;
}

.targets{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:10px;
    margin-top:10px;
}

.item{
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    display:flex;
    gap:10px;
    background: rgba(255,255,255,0.02);
}

.img{
    width:100px;
    height:100px;
    border-radius:8px;
    object-fit:cover;
    flex:0 0 auto;
    background:var(--card2);
    border:1px solid var(--line);
}

.name{ font-weight:500; font-size:14px; line-height:1.35; margin:0 0 4px; }
.muted{ color:var(--muted); font-size:12px; }

.qty{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.step{
    width:26px;height:26px;
    border-radius:6px;
    border:1px solid var(--line);
    background:var(--card2);
    color:var(--ink);
    font-weight:700;
    line-height:0;
    cursor:pointer;
}
.qty input{
    width:54px;
    padding:6px;
    border-radius:6px;
    border:1px solid var(--line);
    background:var(--card2);
    color:var(--ink);
    text-align:center;
}

.actions{
    position:sticky;
    bottom:10px;
    z-index:10;
    margin-top:12px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    background:transparent;
}
.bar{
    display:flex;
    gap:10px;
    background:rgba(15,23,42,.9);
    backdrop-filter:saturate(140%) blur(6px);
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px;
}

.btn{
    background:var(--accent);
    color:#041421;
    border:0;
    padding:10px 14px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
}
.btn:hover{ filter:brightness(1.05); }

.btn-secondary, a.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:var(--muted);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 14px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
}
.btn-secondary:hover{
    background:var(--card2);
    color:var(--ink);
    border-color:#475569;
}

.kpi{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; }
.tile{
    background:var(--card2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    font-size:13px;
}
.ok{ background:rgba(34,197,94,.12)!important; border-color:#1e8f45; }
.warn{ background:rgba(245,158,11,.12)!important; border-color:#9a6a0a; }

.sale-blurb{
    margin:4px 0 12px;
    padding:10px 12px;
    border-radius:10px;
    background: rgba(56,189,248,.06);
    border: 1px solid #0ea5e9;
    font-size:12px;
    color:#e0f2fe;
    line-height:1.4;
}
.sale-blurb-title{
    font-weight:600;
    margin-bottom:4px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.rakuten-alert{
    margin-top:6px;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid #22c55e;
    background: linear-gradient(90deg, rgba(34,197,94,.16), rgba(15,23,42,0.9));
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
}
.rakuten-pill{
    padding:3px 8px;
    border-radius:999px;
    background:#22c55e;
    color:#022c16;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    flex-shrink:0;
}
.rakuten-text strong{ font-weight:700; color:#bbf7d0; }
.rakuten-toggle{
    font-size:11px;
    color:#93c5fd;
    cursor:pointer;
    margin-left:6px;
    border:none;
    background:transparent;
    padding:0;
}
.rakuten-toggle:hover{ text-decoration:underline; }
.rakuten-row{ display:none; margin-top:4px; gap:6px; flex-wrap:wrap; }
.rakuten-row.visible{ display:flex; }

.added-badge{
    display:inline-block;
    margin-left:6px;
    padding:2px 6px;
    background:#ef4444;
    border-radius:6px;
    color:white;
    font-size:11px;
    font-weight:700;
}

/* Accordions */
details{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
details + details{ margin-top:12px; }
summary{
    display:flex; align-items:center; gap:8px;
    padding:10px 12px;
    background:var(--card2);
    border-bottom:1px solid var(--line);
    font-weight:700;
    cursor:pointer;
}
summary::before{ content:"▸"; transition:transform .2s ease; }
details[open] summary::before{ transform:rotate(90deg); }
.panel{ padding:12px; }

/* =========================
   Freegood INDEX (tool grid/search)
   ========================= */

/* Search form */
.tool-search{
    margin: 14px auto 18px;
    padding: 12px 14px;
    max-width:1100px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
    align-items:center;
}

.tool-search label{
    font-size: 13px;
    color: var(--muted);
    display:flex;
    align-items:center;
    gap:8px;
}

.tool-search input[type="text"]{
    font-size: 13px;
    padding: 9px 11px;
    min-width: 260px;
    background: var(--card2);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 10px;
}

.tool-search button{
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--accent);
    color: #041421;
    font-weight: 800;
}
.tool-search button:hover{ filter:brightness(1.05); }

/* Grid */
.tool-grid{
    max-width:1100px;
    margin: 0 auto 24px;
    padding: 0 16px;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.tool-card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--shadow-soft);
    display:flex;
    flex-direction:column;
    gap: 8px;
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.tool-card:hover{
    transform: translateY(-1px);
    border-color: rgba(96,165,250,.35);
    background: rgba(255,255,255,0.02);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.tool-image-wrapper{
    width: 100%;
    height: 120px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    border-radius: 12px;
    background: var(--card2);
    border: 1px solid var(--line);
}
.tool-image-wrapper img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tool-card-name{
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
}
.tool-card-meta{
    font-size: 12px;
    color: var(--muted);
}
.empty-state{
    max-width:1100px;
    margin: 18px auto;
    padding: 0 16px;
    font-style: italic;
    color: var(--muted);
}

/* =========================
   Tables (used by both apps)
   ========================= */
table{
    width:100%;
    border-collapse:collapse;
    margin-top:8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow:hidden;
    box-shadow: var(--shadow-soft);
}

thead{ background: rgba(255,255,255,0.04); }

th,td{
    padding:8px 10px;
    border-bottom:1px solid var(--line);
    text-align:left;
    font-size:13px;
    vertical-align: top;
}

tr:last-child td{ border-bottom:none; }
.num{ white-space:nowrap; }

/* Freegood-specific table bits */
.breadcrumb{
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--muted);
}
.subtext{
    font-size: 12px;
    color: var(--muted);
}
.promo-name{ font-weight: 700; color: var(--ink); }

/* Best badge */
.badge-best{
    display:inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(245,158,11,.12);
    color: #fbbf24;
}

/* Retailer pills (keep brand colors but readable on dark) */
.retailer-pill{
    display:inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 2px;
    border: 1px solid rgba(255,255,255,0.12);
}

.retailer-pill.hd{ background:#f96302; color:#fff; border-color: rgba(249,99,2,.35); }
.retailer-pill.ace{ background:#cc0000; color:#fff; border-color: rgba(204,0,0,.35); }
.retailer-pill.acme{ background:#0059b3; color:#fff; border-color: rgba(0,89,179,.35); }

/* =========================
   Freegood TOOL page table
   Scoped so it won't affect BMSM (which doesn't use .page-container)
   ========================= */

.page-container table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
    margin-top: 16px;
}

.page-container thead {
    background: rgba(255,255,255,0.04);
}

.page-container th {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    font-size: 12px;
    color: var(--muted);
}

.page-container td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid rgba(30,41,59,0.7);
    vertical-align: top;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.45;
}

.page-container tr:last-child td {
    border-bottom: none;
}

/* reduce visual noise inside cells */
.page-container .promo-name {
    font-weight: 800;
    margin-bottom: 6px;
}

.page-container .subtext {
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
}

/* keep numbers aligned, readable */
.page-container .num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Hack results: make product links look like small chips --- */
table a[target="_blank"]{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .55rem;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: .82rem;
    line-height: 1.2;
    background: rgba(0,0,0,.03);
    transition: transform .05s ease, background .12s ease, border-color .12s ease;
}

table a[target="_blank"]:hover{
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.22);
}

table a[target="_blank"]:active{
    transform: translateY(1px);
}

table a[target="_blank"]:focus-visible{
    outline: 2px solid rgba(0,0,0,.35);
    outline-offset: 2px;
}

/* Optional: add a tiny external-link glyph purely with CSS */
table a[target="_blank"]::after{
    content: "↗";
    font-size: .85em;
    opacity: .7;
}

/* If you want the chip to say “Open product page” instead of the tool name,
   you can hide the link text and inject your own label (no HTML changes),
   BUT it makes the name not visible. Uncomment only if you want that behavior.

table a[target="_blank"]{
  color: transparent;
  position: relative;
}
table a[target="_blank"]::before{
  content: "Open product page";
  color: inherit;
}
*/