/* ==========================================================
   PhotoGrid — Stylesheet responsive (mobile-first)
   ========================================================== */

:root{
  --bg: #0f1115;
  --bg-elevated: #171a21;
  --bg-card: #1c2029;
  --border: #2a2f3a;
  --text: #eef0f3;
  --text-dim: #9aa1ad;
  --accent: #ff6b4a;
  --accent-dim: #ff6b4a33;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --maxw: 1400px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(15,17,21,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.logo{font-size:1.25rem; font-weight:800; letter-spacing:-.02em; white-space:nowrap;}
.search-form{
  flex:1; min-width:180px; display:flex; background:var(--bg-card);
  border:1px solid var(--border); border-radius:999px; overflow:hidden;
}
.search-form input{
  flex:1; border:none; background:transparent; color:var(--text);
  padding:10px 16px; outline:none; font-size:.95rem;
}
.search-form button{
  border:none; background:transparent; color:var(--text-dim); padding:0 16px;
}
.nav-toggle{
  display:none; background:none; border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:8px 12px; font-size:1.1rem;
}
.main-nav{display:flex; align-items:center; gap:18px; font-size:.95rem;}
.main-nav a{color:var(--text-dim); transition:color .15s;}
.main-nav a:hover{color:var(--text);}
.btn-solid{
  background:var(--accent); color:#fff !important; padding:8px 16px; border-radius:999px; font-weight:600;
}
.btn-outline{
  border:1px solid var(--border); padding:8px 16px; border-radius:999px;
}

/* ---------- Layout generico ---------- */
.container{max-width:var(--maxw); margin:0 auto; padding:24px 20px;}
.page-title{font-size:1.6rem; font-weight:800; margin:8px 0 4px;}
.page-subtitle{color:var(--text-dim); margin-bottom:24px;}

/* ---------- Tag cloud ---------- */
.tag-cloud{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;}
.tag-pill{
  background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim);
  padding:6px 14px; border-radius:999px; font-size:.85rem; transition:.15s;
}
.tag-pill:hover, .tag-pill.active{background:var(--accent-dim); border-color:var(--accent); color:var(--accent);}

/* ---------- Media Grid Gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
@media (min-width:600px){
  .gallery-grid{grid-template-columns: repeat(3, 1fr); gap:14px;}
}
@media (min-width:900px){
  .gallery-grid{grid-template-columns: repeat(4, 1fr);}
}
@media (min-width:1300px){
  .gallery-grid{grid-template-columns: repeat(5, 1fr);}
}

.photo-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--bg-card); aspect-ratio:1/1; cursor:pointer;
  border:1px solid var(--border);
}
.photo-card img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.photo-card:hover img{transform:scale(1.06);}
.photo-card .card-overlay{
  position:absolute; inset:auto 0 0 0; padding:12px 12px 10px;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  opacity:0; transition:opacity .2s;
}
.photo-card:hover .card-overlay{opacity:1;}
.card-overlay h4{margin:0 0 2px; font-size:.9rem; font-weight:700; color:#fff;}
.card-overlay span{font-size:.78rem; color:#ccc;}

.empty-state{text-align:center; padding:60px 20px; color:var(--text-dim);}

/* ---------- Lightbox ---------- */
.lightbox{
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(5,6,8,.96); align-items:center; justify-content:center;
}
.lightbox.open{display:flex;}
.lightbox-content{max-width:92vw; max-height:92vh; display:flex; flex-direction:column; align-items:center; gap:14px;}
.lightbox-content img{max-width:92vw; max-height:70vh; border-radius:10px; object-fit:contain; box-shadow:var(--shadow);}
.lightbox-caption{max-width:700px; text-align:center; padding:0 16px;}
.lightbox-caption h3{margin:0 0 6px; font-size:1.15rem;}
.lightbox-caption p{margin:0 0 10px; color:var(--text-dim);}
.lightbox-author{font-size:.9rem; color:var(--text-dim); margin-bottom:8px;}
.lightbox-author a{color:var(--accent); margin:0 6px;}
.lightbox-tags{display:flex; gap:6px; flex-wrap:wrap; justify-content:center;}
.lightbox-close, .lightbox-nav{
  position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:#fff; border-radius:50%; width:44px; height:44px; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close{top:18px; right:18px;}
.lightbox-prev{left:14px; top:50%; transform:translateY(-50%);}
.lightbox-next{right:14px; top:50%; transform:translateY(-50%);}
@media (max-width:640px){
  .lightbox-nav{width:38px;height:38px;font-size:1rem;}
}

/* ---------- Form (login, registrazione, upload) ---------- */
.form-card{
  max-width:480px; margin:20px auto; background:var(--bg-elevated);
  border:1px solid var(--border); border-radius:var(--radius); padding:28px;
}
.form-group{margin-bottom:16px;}
.form-group label{display:block; margin-bottom:6px; font-size:.88rem; color:var(--text-dim);}
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text); outline:none; font-size:.95rem;
}
.form-group input:focus, .form-group textarea:focus{border-color:var(--accent);}
.form-actions{margin-top:20px;}
.btn{
  display:inline-block; border:none; background:var(--accent); color:#fff;
  padding:12px 22px; border-radius:10px; font-weight:700; font-size:.95rem; width:100%;
}
.btn.secondary{background:var(--bg-card); border:1px solid var(--border); color:var(--text);}
.alert{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:.9rem;}
.alert-error{background:#ff6b4a22; border:1px solid #ff6b4a55; color:#ffb3a0;}
.alert-success{background:#4ade8022; border:1px solid #4ade8055; color:#9df5be;}
.form-hint{color:var(--text-dim); font-size:.8rem; margin-top:6px;}

/* Upload dropzone: funziona anche su smartphone/tablet grazie a input file nativo */
.dropzone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:30px 16px;
  text-align:center; color:var(--text-dim); position:relative; margin-bottom:16px;
}
.dropzone input[type=file]{
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.dropzone.dragover{border-color:var(--accent); color:var(--accent);}
#uploadPreview{margin-top:14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px;}
#uploadPreview img{border-radius:8px; aspect-ratio:1/1; object-fit:cover;}

/* ---------- Dashboard / Admin tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius);}
table{width:100%; border-collapse:collapse; min-width:600px;}
th, td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); font-size:.9rem;}
th{color:var(--text-dim); font-weight:600; background:var(--bg-elevated);}
tr:last-child td{border-bottom:none;}
.thumb-cell img{width:56px; height:56px; object-fit:cover; border-radius:8px;}
.badge{padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:600;}
.badge-approved{background:#4ade8022; color:#4ade80;}
.badge-pending{background:#facc1522; color:#facc15;}
.badge-rejected{background:#ff6b4a22; color:#ff6b4a;}
.badge-admin{background:#a78bfa22; color:#a78bfa;}
.badge-user{background:#38bdf822; color:#38bdf8;}
.action-link{color:var(--accent); font-size:.85rem; margin-right:10px;}

.admin-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px;}
.stat-card{background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:18px;}
.stat-card .num{font-size:1.8rem; font-weight:800;}
.stat-card .label{color:var(--text-dim); font-size:.85rem;}

.admin-tabs{display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap;}
.admin-tabs a{padding:9px 16px; border-radius:999px; border:1px solid var(--border); font-size:.88rem; color:var(--text-dim);}
.admin-tabs a.active{background:var(--accent); border-color:var(--accent); color:#fff;}

.profile-social{display:flex; gap:14px; margin-top:6px;}
.profile-social a{color:var(--text-dim); font-size:1.2rem;}
.profile-social a:hover{color:var(--accent);}

.site-footer{text-align:center; padding:30px 20px; color:var(--text-dim); font-size:.82rem; border-top:1px solid var(--border); margin-top:40px;}

/* ---------- Mobile nav ---------- */
@media (max-width:780px){
  .nav-toggle{display:block; order:3;}
  .main-nav{
    display:none; width:100%; order:4; flex-direction:column; align-items:flex-start;
    gap:4px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px;
    padding:12px; margin-top:8px;
  }
  .main-nav.open{display:flex;}
  .main-nav a{padding:8px 4px; width:100%;}
}