/*
Theme Name: Nasz‑Nas Portal
Theme URI: https://nasz-nas.pl/
Author: Jacek Madejski + ChatGPT
Description: Nowoczesny portal startowy (dark + glass + glow) dla domowego serwera Nasz‑Nas.pl. Kafle + news + pogoda.
Version: 1.0.10
License: GPLv2 or later
Text Domain: nasznas-portal
*/


:root{
  --bg0:#050609;
  --bg1:#0b1020;
  --card: rgba(255,255,255,.06);
  --text:#f3f4f6;
  --muted:#cbd5e1;
  --muted2:#94a3b8;
  --accent:#facc15;
  --accent2:#22c55e;
  --blue:#60a5fa;
  --shadow: 0 20px 80px rgba(0,0,0,.55);
  --radius: 22px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(250,204,21,.18), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(34,197,94,.10), transparent 60%),
    radial-gradient(1100px 800px at 50% 90%, rgba(96,165,250,.12), transparent 65%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
  background-attachment: fixed;
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
}

.card{
  width:min(1100px, 100%);
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-3px;
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(250,204,21,.28), transparent 55%),
    radial-gradient(700px 520px at 85% 25%, rgba(34,197,94,.14), transparent 60%),
    radial-gradient(900px 680px at 55% 95%, rgba(96,165,250,.14), transparent 70%);
  filter: blur(22px);
  opacity:.70;
  animation: floatGlow 10s ease-in-out infinite;
  pointer-events:none;
}
@keyframes floatGlow{
  0%{ transform: translate3d(0,0,0) scale(1); opacity:.66; }
  50%{ transform: translate3d(-10px,8px,0) scale(1.03); opacity:.78; }
  100%{ transform: translate3d(0,0,0) scale(1); opacity:.66; }
}
.hcode{
  font-family: var(--mono);
  font-size: 13px;
  color:var(--muted2);
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.hcode .dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(250,204,21,.12);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  font-weight:750;
  cursor:pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); transform: translateY(-1px); text-decoration:none; }
.btn.primary{ background: linear-gradient(180deg, rgba(250,204,21,.22), rgba(250,204,21,.12)); border-color: rgba(250,204,21,.35); }


/* Layout */
.container{ width:min(1100px, 100%); margin:0 auto; padding:28px 16px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.brandline{ display:flex; align-items:center; gap:14px; }
.brandline img{ width:52px; height:52px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.25); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.brandmeta .title{ font-weight:900; font-size:18px; }
.brandmeta .sub{ color:var(--muted2); font-size:13px; }

.navchips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.chip{ padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.20); font-family:var(--mono); font-size:12px; color:rgba(226,232,240,.9); }

.grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; margin-top:18px; }
@media (max-width: 980px){ .grid{ grid-template-columns:1fr; } }

.cardpad{ position:relative; padding:22px; }
.hero h1{ margin:12px 0 8px; font-size:44px; letter-spacing:-.9px; line-height:1.05; }
@media (max-width: 420px){ .hero h1{ font-size:34px; } }
.hero p{ margin:0 0 12px; color:var(--muted); font-size:16px; line-height:1.6; }

.tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:14px; }
@media (max-width: 980px){ .tiles{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .tiles{ grid-template-columns: 1fr; } }

.tilelink{ display:block; border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); padding:14px; transition: transform .08s ease, background .12s ease, border-color .12s ease; }
.tilelink:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); text-decoration:none; }
.tilehead{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tiletitle{ font-weight:850; }
.tiledesc{ margin-top:6px; color:var(--muted2); font-size:13px; line-height:1.5; }
.tilemeta{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.pill{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); font-family:var(--mono); font-size:12px; color:rgba(226,232,240,.9); }

.sectiontitle{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
.sectiontitle h2{ margin:0; font-size:18px; letter-spacing:-.2px; }
.sectiontitle .hint{ color:var(--muted2); font-size:12px; }

.newscols{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 520px){ .newscols{ grid-template-columns: 1fr; } }

.newsbox{ border-radius:18px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); padding:14px; }
.newsbox h3{ margin:0 0 10px; font-size:14px; color:rgba(226,232,240,.92); }
.newsbox ul{ margin:0; padding-left:18px; }
.newsbox li{ margin:6px 0; color:var(--muted); font-size:14px; line-height:1.45; }
.newsbox li a{ color:rgba(226,232,240,.92); }
.newsbox li a:hover{ text-decoration:underline; }

.footerline{ margin-top:18px; color: rgba(203,213,225,.75); font-size:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.smallmono{ font-family:var(--mono); font-size:12px; color:rgba(226,232,240,.85); }

.notice{ border-radius:18px; border:1px solid rgba(250,204,21,.22); background: rgba(250,204,21,.06); padding:12px; color:rgba(226,232,240,.92); }


/* --- v1.0.2 additions --- */
.navtiles{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.navtile{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  font-weight:850; font-size:12px;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.navtile:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); text-decoration:none; }

.newsitem{ display:flex; gap:12px; align-items:flex-start; }
.newsimg{
  width:58px; height:58px; flex:0 0 58px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  overflow:hidden;
}
.newsimg img{ width:100%; height:100%; object-fit:cover; display:block; }
.newsmeta{ flex:1; min-width:0; }
.newsdate{ color: var(--muted2); font-family: var(--mono); font-size: 11px; margin-top:4px; }

.weatherg{ display:grid; grid-template-columns: 1fr; gap:12px; }
.weatherrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.weathericon{
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
}
.hourly{
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.hourly table{ width:100%; border-collapse:collapse; min-width:760px; }
.hourly th, .hourly td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:13px;
  color: rgba(226,232,240,.92);
  text-align:left;
  white-space:nowrap;
}
.hourly th{ color: var(--muted2); font-family: var(--mono); font-size:12px; }
.hourly tr:last-child td{ border-bottom:none; }


/* --- v1.0.3 weather polish --- */
.weatherbig{
  display:grid;
  gap:12px;
}
.weatherbig .bigrow{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding:14px;
}
.weatherbig .left{
  display:flex; align-items:center; gap:14px;
}
.weatherbig .bigicon{
  width:58px; height:58px; border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:30px;
}
.weatherbig .bigtemp{
  font-size:28px; font-weight:900; letter-spacing:-.5px;
}
.weatherbig .biglabel{
  color: rgba(226,232,240,.92);
  font-weight:850;
}
.weatherbig .bigmeta{
  color: var(--muted);
  font-family: var(--mono);
  font-size:12px;
  margin-top:6px;
}
.detailsbox{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding:12px;
}
.detailsbox summary{
  cursor:pointer;
  list-style:none;
  font-weight:850;
  display:flex; align-items:center; justify-content:space-between;
}
.detailsbox summary::-webkit-details-marker{ display:none; }
.detailsbox .hint{
  color: var(--muted2);
  font-family: var(--mono);
  font-size:12px;
}

.weekly{
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.weekly table{ width:100%; border-collapse:collapse; min-width:700px; }
.weekly th, .weekly td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:13px;
  color: rgba(226,232,240,.92);
  text-align:left;
  white-space:nowrap;
}
.weekly th{ color: var(--muted2); font-family: var(--mono); font-size:12px; }
.weekly tr:last-child td{ border-bottom:none; }


/* --- v1.0.4 compact tables --- */
.hourly table{ min-width:0 !important; table-layout:fixed; }
.hourly th, .hourly td{ padding:8px 10px; font-size:14px; }
.hourly th{ font-size:12px; }
.hourly td:nth-child(1){ width:90px; }
.hourly td:nth-child(2){ width:auto; }
.hourly td:nth-child(3){ width:64px; text-align:right; }

.bigmeta .line{ display:block; margin-top:2px; }


/* FIX: dopasowanie tabel pogody do szerokości panelu (V6.1) */
.hourly, .weekly { width: 100%; }
.hourly table, .weekly table { width: 100%; min-width: 0 !important; table-layout: fixed; }

.weekly td, .weekly th,
.hourly td, .hourly th { overflow: hidden; text-overflow: ellipsis; }

.weekly td:nth-child(1), .weekly th:nth-child(1) { width: 110px; }
.weekly td:nth-child(3), .weekly th:nth-child(3) { width: 60px; }
.weekly td:nth-child(4), .weekly th:nth-child(4) { width: 60px; }
.weekly td:nth-child(5), .weekly th:nth-child(5) { width: 70px; text-align:right; }

/* Footer: wersja na środku */
.footerbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;
}
.footerbar .left{ justify-self:start; }
.footerbar .center{ justify-self:center; color: rgba(226,232,240,.88); font-family: var(--mono); font-size: 12px; }
.footerbar .right{ justify-self:end; }


/* admin-sortable (V6.2) */
.nasznas-sort-handle{
  cursor:move;
  font-size:16px;
  padding:0 8px;
  color:#64748b;
  user-select:none;
}
.nasznas-sort-row{
  display:grid;
  grid-template-columns: 34px 1fr 2fr 1.2fr 90px;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  margin:8px 0;
  background:#fff;
}
.nasznas-sort-row input{ width:100%; }
.nasznas-sort-row .mini{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; color:#6b7280; }
.nasznas-sort-actions{ display:flex; gap:8px; justify-content:flex-end; }
.nasznas-btn-danger{ color:#b91c1c; }