/* Minecraft Release Companion - styles.css
   Uses CSS variables for themes; textured presets use CSS gradients (no images).
*/

:root{
  --bg: #0c1410;
  --bg-2: #0f1913;
  --card: #121a15;
  --muted: #9fb6a7;
  --text: #e9f6ee;
  --accent: #2ecc71;
  --accent-2: #18b358;
  --border: rgba(255,255,255,.04);
  --shadow: 0 14px 36px rgba(0,0,0,.5);
  --glass: rgba(255,255,255,.02);
}

/* light theme tokens */
:root[data-theme="light"]{
  --bg: #f3f6f4;
  --bg-2: #eef4ef;
  --card: #ffffff;
  --muted: #5c6d64;
  --text: #16221b;
  --accent: #1ca54e;
  --accent-2: #178a41;
  --border: rgba(0,0,0,.06);
  --glass: rgba(0,0,0,.03);
  --shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* creeper */
:root[data-theme="creeper"]{
  --bg: linear-gradient(180deg,#07110a,#0d2015);
  --bg-2: #07110a;
  --card:#0d1913;
  --muted:#9fe0a8;
  --text:#e9ffe6;
  --accent:#3bd15f;
  --accent-2:#26b34a;
  --border: rgba(59,209,95,.08);
}

/* ender */
:root[data-theme="ender"]{
  --bg: linear-gradient(180deg,#06020c,#12061a);
  --bg-2: #0f0720;
  --card:#140e1f;
  --muted:#d6c0ff;
  --text:#f4ebff;
  --accent:#b26cff;
  --accent-2:#9a45ff;
}

/* grass (textured) */
:root[data-theme="grass"]{
  --bg: linear-gradient(180deg,#0b1409,#071009);
  --bg-2: #07210a;
  --card:linear-gradient(180deg,#0d1913,#09160e);
  --muted:#b7e6bb;
  --text:#eaffea;
  --accent:#67d975;
  --accent-2:#32b84b;
}

/* stone */
:root[data-theme="stone"]{
  --bg: linear-gradient(180deg,#0b0b0b,#121212);
  --bg-2: #121212;
  --card: linear-gradient(180deg,#101010,#1b1b1b);
  --muted:#c9c9c9;
  --text:#f7f7f7;
  --accent:#bdbdbd;
  --accent-2:#9f9f9f;
}

/* sand */
:root[data-theme="sand"]{
  --bg: linear-gradient(180deg,#f2e5c8,#efe5d2);
  --bg-2: #efe5d2;
  --card: linear-gradient(180deg,#fffaf0,#fff7ea);
  --muted:#7b6b55;
  --text:#2b2b2b;
  --accent:#f2c96f;
  --accent-2:#e6b558;
}

/* base layout */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.topbar{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,transparent,rgba(0,0,0,.06)),var(--bg-2);border-bottom:1px solid var(--border);backdrop-filter:blur(6px)}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex; gap:12px; align-items:center}
.logo{font-size:28px}
.brand h1{margin:0;font-size:18px}
.sub{margin:0;color:var(--muted);font-size:12px}

.top-actions{display:flex;gap:8px;align-items:center}
.btn{border:0;padding:9px 12px;border-radius:10px;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#041a0c;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);box-shadow:none}
.btn.primary{background:linear-gradient(180deg,#7ee7a6,#3bd15f);color:#03210f}

/* main grid */
.main-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding:16px 0}
@media (max-width:920px){.main-grid{grid-template-columns:1fr}}

/* cards */
.card{background:var(--card);border-radius:12px;padding:14px;border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:12px}
.overview .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:820px){.overview .stats{grid-template-columns:1fr;}}
.stat h3{margin:0;color:var(--muted);font-weight:600}
.value{font-weight:800;font-size:20px;margin-top:6px}
.muted{color:var(--muted);font-size:13px}
.hero-actions{display:flex;align-items:center;gap:12px;margin-top:12px}
.spacer{flex:1}

/* explorer */
.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.toolbar{display:flex;gap:8px;align-items:center}
.toolbar input{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);min-width:220px}
.toolbar select{padding:8px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text)}
.icon{background:transparent;border:1px solid var(--border);padding:8px;border-radius:8px;color:var(--text);cursor:pointer}

/* table */
.tablewrap{overflow:auto;border-radius:10px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
th{color:var(--muted);font-weight:700}
tbody tr:hover{background:var(--glass)}
.compact th, .compact td{padding:8px}

/* settings modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.hidden{display:none}
.modal{position:fixed;right:50%;top:50%;transform:translate(50%,-50%);width:min(720px,95vw);max-height:90vh;overflow:auto;background:var(--card);border-radius:12px;padding:0;border:1px solid var(--border);z-index:50;box-shadow:var(--shadow)}
.modal.small{width:520px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.modal-body{padding:16px;display:grid;gap:14px}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--border)}
.icon{background:transparent;border:1px solid var(--border);padding:8px;border-radius:10px;color:var(--text);cursor:pointer}

/* theme swatches */
.theme-grid{display:flex;flex-wrap:wrap;gap:8px}
.theme-swatch{padding:10px;border-radius:10px;border:1px solid var(--border);background:transparent;cursor:pointer}

/* alert visual */
.alert-visual{height:64px;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.alert-visual.fire{animation:pop .9s linear}
@keyframes pop{0%{transform:scale(.94);opacity:.6}50%{transform:scale(1.06);}100%{transform:scale(1);opacity:1}}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;background:var(--card);border:1px solid var(--border);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);z-index:60;color:var(--text)}

/* small */
.small{font-size:13px;color:var(--muted)}