/* public/styles.css — JVO brand: cream #f1ebe3, sage #688b5d */
:root { --cream:#f1ebe3; --sage:#688b5d; --ink:#222; --line:#d8cfc2; --card:#fff; }
* { box-sizing: border-box; }
/* The [hidden] attribute must always win over component display rules
   (e.g. .loading{display:grid}) — otherwise .hidden=true never hides them. */
[hidden] { display: none !important; }
body { margin:0; font-family: Arial, "Segoe UI", sans-serif; background:var(--cream); color:var(--ink); }
.brand-seal { font-family: Impact, "Arial Black", sans-serif; letter-spacing:2px;
  background:var(--sage); color:#fff; padding:.4rem .8rem; border-radius:6px; display:inline-block; }
.brand-seal.small { font-size:.9rem; padding:.25rem .5rem; }
.login-body { display:grid; place-items:center; min-height:100vh; }
.login-card { background:var(--card); padding:2rem; border-radius:12px; width:min(360px,92vw);
  box-shadow:0 8px 30px rgba(0,0,0,.12); display:grid; gap:1rem; text-align:center; }
.login-card label { display:grid; gap:.3rem; text-align:right; font-size:.9rem; }
.login-card input, .filters input, .filters select { padding:.55rem; border:1px solid var(--line);
  border-radius:8px; font-size:1rem; width:100%; }
button { background:var(--sage); color:#fff; border:0; padding:.6rem 1rem; border-radius:8px;
  cursor:pointer; font-size:1rem; }
button:hover { filter:brightness(.95); }
.err { color:#b3261e; font-size:.9rem; }
.topbar { display:flex; align-items:center; gap:1rem; padding:.7rem 1rem; background:var(--card);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.search { flex:1; padding:.6rem .9rem; border:1px solid var(--line); border-radius:999px; font-size:1rem; }
.user { display:flex; align-items:center; gap:.6rem; font-size:.9rem; }
.kpis { display:flex; gap:.8rem; flex-wrap:wrap; padding:1rem; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.8rem 1.1rem; min-width:110px; text-align:center; }
.kpi-v { font-size:1.6rem; font-weight:700; color:var(--sage); }
.kpi-l { font-size:.8rem; color:#666; }
.tabs { display:flex; gap:.4rem; padding:0 1rem; }
.tabs button { background:transparent; color:var(--ink); border:1px solid var(--line); }
.tabs button.active { background:var(--sage); color:#fff; }
.layout { display:grid; grid-template-columns:220px 1fr; gap:1rem; padding:1rem; }
.filters { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; display:grid; gap:.8rem; align-content:start; height:fit-content; }
.filters label { display:grid; gap:.3rem; font-size:.85rem; }
.results { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; cursor:pointer; transition:transform .08s; }
.card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.card h3 { margin:0 0 .3rem; font-size:1.05rem; }
.card .meta { color:#777; font-size:.82rem; margin-bottom:.4rem; }
.seo-badge { margin-top:.5rem; font-size:.8rem; color:var(--sage); }
.empty { color:#888; }
.drawer { position:fixed; inset:0 0 0 auto; width:min(480px,95vw); background:var(--card);
  box-shadow:-8px 0 30px rgba(0,0,0,.18); overflow:auto; z-index:10; }
.drawer-inner { padding:1.5rem; }
.drawer table { width:100%; border-collapse:collapse; margin:.5rem 0; }
.drawer th, .drawer td { border-bottom:1px solid var(--line); padding:.4rem; text-align:right; font-size:.85rem; vertical-align:top; }
.close { position:absolute; left:1rem; top:1rem; background:transparent; color:var(--ink); font-size:1.1rem; }
.seo-table { width:100%; border-collapse:collapse; background:var(--card); }
.seo-table th, .seo-table td { border-bottom:1px solid var(--line); padding:.5rem; text-align:right; font-size:.85rem; }
.loading { position:fixed; inset:0; display:grid; place-items:center; background:var(--cream); font-size:1.2rem; }
.users-panel { grid-column:1/-1; display:grid; gap:1rem; }
.user-form { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:1rem; display:grid; gap:.7rem; max-width:420px; }
.user-form h3 { margin:0; }
.user-form label { display:grid; gap:.3rem; font-size:.85rem; text-align:right; }
.user-form input, .user-form select { padding:.55rem; border:1px solid var(--line);
  border-radius:8px; font-size:1rem; width:100%; }
.u-msg { font-size:.9rem; min-height:1.1em; }
.u-ok { color:var(--sage); }
.u-del { background:#b3261e; padding:.35rem .7rem; font-size:.8rem; }
@media (max-width:720px){ .layout{ grid-template-columns:1fr; } }

/* Ads tab */
.ads-summary { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; grid-column:1/-1; }
.ads-big { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.4rem; min-width:150px; text-align:center; flex:1; }
.ads-big-v { font-size:1.8rem; font-weight:700; color:var(--sage); }
.ads-big-l { font-size:.82rem; color:#666; margin-top:.2rem; }
.ads-big.out .ads-big-v { color:#b3261e; }
.ads-big.in .ads-big-v { color:#2e7d32; }
.ads-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; grid-column:1/-1; }
.ads-card h3 { margin:0 0 .2rem; }
.ads-table { width:100%; border-collapse:collapse; margin-top:.6rem; }
.ads-table th, .ads-table td { border-bottom:1px solid var(--line); padding:.4rem .3rem; font-size:.9rem; }
.ads-table th { text-align:right; color:#555; font-weight:600; }
.ads-table td { text-align:left; font-weight:700; }

/* View toggle (cards / table) */
.view-toggle { display:flex; gap:.3rem; }
.view-toggle button { background:transparent; color:var(--ink); border:1px solid var(--line);
  padding:.4rem .7rem; font-size:.85rem; }
.view-toggle button.active { background:var(--sage); color:#fff; }
/* Rows / table view */
.rows-table { grid-column:1/-1; width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:10px; }
.rows-table th, .rows-table td { border-bottom:1px solid var(--line); padding:.6rem .7rem;
  text-align:right; font-size:.9rem; vertical-align:top; }
.rows-table thead th { background:#efe9df; color:#444; font-weight:700; }
.rows-table tbody tr.row { cursor:pointer; }
.rows-table tbody tr.row:hover { background:#f5f1ea; }
.rows-table th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.rows-table th.sortable:hover { background:#e6ded0; }

/* Post cards */
.post-card .post-date { font-size:.78rem; color:var(--sage); font-weight:700; margin-bottom:.3rem; }
.post-card h3 { font-size:1rem; line-height:1.35; margin:.1rem 0 .4rem; }
.post-card h3 a { color:var(--ink); text-decoration:none; }
.post-card h3 a:hover { text-decoration:underline; color:var(--sage); }
.post-metrics { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; font-size:.76rem; color:#555; }
.post-metrics span { background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:.15rem .5rem; }
.post-link { color:var(--sage); font-weight:600; text-decoration:none; }
.post-link:hover { text-decoration:underline; }

/* Self-registration + approval */
.pending-box { background:#fff8e6; border:1px solid #e6c200; border-radius:10px; padding:1rem; margin-bottom:1rem; }
.pending-box h3 { margin:0 0 .6rem; color:#8a6d00; }
.u-approve { background:var(--sage); padding:.35rem .7rem; font-size:.8rem; margin-left:.3rem; }
.reg-note { font-size:.85rem; color:#666; margin:0; }
.reg-alt { font-size:.85rem; margin:.2rem 0 0; }
.reg-alt a { color:var(--sage); }