/* style.css - Clean "gallery.php look" shared across all pages */

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Layout container: fixes full-width header/nav */
.container{
  max-width:1200px;
  margin:30px auto;
  padding:0 14px;
}

/* Links & text helpers */
a{ color:var(--text); text-decoration:none; }
.small{ color:var(--muted); font-size:13px; }
.muted{ color:var(--muted); }
h1,h2,h3{ margin:0 0 12px; }

/* Buttons */
.btn,
.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-text);
  text-decoration:none;
  cursor:pointer;
  font-size:14px;
}
.btn:hover,
.nav-btn:hover{ opacity:.9; }

.nav-btn.danger,
.btn.danger{
  background:var(--danger-bg);
  border-color:var(--danger-border);
  color:#fff;
}

/* Header */
.site-header{
  height:100px;
  background: linear-gradient(to right, var(--header-grad-a), var(--header-grad-b));
  border:1px solid var(--border);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}
.site-title{
  font-size:30px;
  font-weight:700;
  color:#000;
}
.header-right{
  display:flex;
  gap:10px;
  align-items:center;
}
.site-user{
  font-size:14px;
  font-weight:700;
  background:var(--chip-bg);
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--chip-border);
  color:#000 !important;
}

/* Theme toggle */
.theme-toggle{
  font-size:18px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.30);
  background:rgba(255,255,255,.70);
  cursor:pointer;
}
.theme-toggle:hover{ opacity:.85; }

/* Navbar */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:-18px;
}
.nav-left,.nav-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Grid (same behavior as gallery.php) */
.grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
@media(max-width:1200px){ .grid{ grid-template-columns:repeat(5,1fr); } }
@media(max-width:980px){ .grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:740px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .grid{ grid-template-columns:repeat(2,1fr); } }

/* Cards */
.card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background-color:var(--card-bg);
  border:1px solid transparent;
}
.card img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}
.card-link{ display:block; }

/* Badges overlay (inside image) */
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.25);
  font-size:12px;
  color:#fff;
  background:rgba(0,0,0,.55);
}
.badge-in-img{
  position:absolute;
  top:10px;
  left:10px;
  z-index:9;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.badge.user{
  top:10px;
  left:auto;
  right:10px;
}
.badge.approved{ background:#0a7d28; border-color:#0a7d28; }
.badge.pending{ background:#6b7280; border-color:#6b7280; }
.badge.rejected{ background:#b00020; border-color:#b00020; }

/* Delete icon/button overlay */
.del-form{
  position:absolute;
  right:10px;
  bottom:10px;
  margin:0;
  z-index:10;
}
.del-btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:16px;
}
.del-btn:hover{ opacity:.9; }
html[data-theme="dark"] .del-btn{
  background:rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.25);
  color:#fff;
}

/* Pager */
.pager{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:16px;
}

/* Forms (login/register/profile/admin) */
.form-wrap{
  max-width:560px;
  margin:24px auto;
}
.form-card{
  border:1px solid rgba(0,0,0,0.12);
  border-radius:14px;
  padding:16px;
  background:var(--card-bg);
}
label{ display:block; margin:10px 0 6px; font-size:13px; color:var(--muted); }
input, select{
  width:330px;
  padding:10px;
  border:1px solid rgba(0,0,0,0.20);
  border-radius:10px;
  background:transparent;
  color:var(--text);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select{
  border-color:rgba(255,255,255,0.20);
}

/* Upload box */
.box{border:2px dashed rgba(0,0,0,.25);border-radius:14px;padding:18px;text-align:center;margin-top:18px}
html[data-theme="dark"] .box{border-color:rgba(255,255,255,.25)}
.box.drag{border-color:#333;background:rgba(0,0,0,.03)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;justify-content:center}
.item{padding:6px 0;border-bottom:1px solid rgba(0,0,0,.08);font-size:14px;text-align:left}
.ok{color:#0a7d28}
.err{color:#b00020}

/* Footer */
.site-footer{
  margin-top:30px;
  padding:14px 10px;
  text-align:center;
  font-size:13px;
  color:var(--text);
  background-color:var(--card-bg);
  border:1px solid var(--border);
  border-radius:10px;
}

/* Banner rotator (optional 728x90) */
.footer-banner-wrap{
  display:flex;
  justify-content:center;
  margin-top:30px;
}
.banner-rotator{
  width:728px;
  height:90px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card-bg);
}
.banner-rotator a{ position:absolute; inset:0; }
.banner-rotator img{
  width:728px;
  height:90px;
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity 0.8s ease-in-out;
}
.banner-rotator img.active{ opacity:1; z-index:2; }

/* Hide native file input (use custom button instead) */
input[type="file"]{
  display: none;
}


.link-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.link-row input{
  flex:1;              /* input takes remaining width */
}

.copy-btn{
  flex-shrink:0;       /* prevent button from wrapping */
  white-space:nowrap; /* keep "Copy" on one line */
}


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

.stat-card{
  border:1px solid rgba(0,0,0,.2);
  border-radius:14px;
  padding:12px;
  background:rgba(0,0,0,.06);
}

html[data-theme="dark"] .stat-card{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}

.stat-label{
  font-size:13px;
  font-weight:700;
  color:#666;
  margin-bottom:6px;
}

html[data-theme="dark"] .stat-label{
  color:rgba(255,255,255,.75);
}

.stat-value{
  font-size:20px;
  font-weight:800;
}

.stat-wide{ grid-column: span 3; }
@media(max-width:900px){ .stat-wide{grid-column:span 2} }
@media(max-width:520px){ .stat-wide{grid-column:span 1} }