/* =========================
   Theme Variables
   ========================= */

:root[data-theme="dark"]{
  --bg:#0f0f10;
  --panel:#161618;
  --border:#242424;
  --text:#ccc;
  --input-bg:#000;

  /* Link + interaction states */
  --accent:#C1F2EE;
  --accent-visited:#d7c7ff;
  --accent-hover:#ffffff;
  --accent-active:#9fe6df;
  --accent-focus:#C1F2EE;

  /* UI accents */
  --tile-hover-border: var(--accent-hover);
  --thumb-bg:#000;
  --shadow: rgba(0,0,0,0.35);
}

:root[data-theme="light"]{
  --bg:#f5f5f7;
  --panel:#ffffff;
  --border:#dcdcdc;
  --text:#1d1d1f;
  --input-bg:#fff;

  /* Link + interaction states */
  --accent:#336699;
  --accent-visited:#6a2dbd;
  --accent-hover:#084a98;
  --accent-active:#043563;
  --accent-focus:#0b63ce;

  /* UI accents */
  --tile-hover-border: var(--accent-hover);
  --thumb-bg:#000;
  --shadow: rgba(0,0,0,0.12);
}

/* Backward-compat alias */
:root{ --link: var(--accent); }

/* =========================
   Base Layout
   ========================= */

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui, sans-serif;
  transition:background .3s,color .3s;
}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

#main{ flex:1; }

/* Headings / breadcrumbs */
.heading a{ color:inherit; text-decoration:none; }
.heading .sep{ opacity:.6; margin:0 .3rem; }
.back{ color:inherit; text-decoration:none; opacity:.85; }

/* =========================
   Links (theme-driven; tiles excluded)
   ========================= */

a:not(.tile):link{ color:var(--accent); }
a:not(.tile):visited{ color:var(--accent-visited); }
a:not(.tile):hover{ color:var(--accent-hover); }
a:not(.tile):active{ color:var(--accent-active); }

a:not(.tile):focus-visible{
  outline:2px solid var(--accent-focus);
  outline-offset:2px;
  border-radius:6px;
}

/* =========================
   Top Navigation
   ========================= */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.top-controls{
  display:flex;
  gap:10px;
  align-items:center;
}

#theme-toggle{
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  padding:5px 10px;
  font-size:1.2rem;
}

/* =========================
   Search Bar
   ========================= */

.search-wrap{ margin-bottom:20px; }

#gallery-search{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  font-size:1rem;
  box-sizing:border-box;
}

/* =========================
   Grid & Tiles
   ========================= */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:15px;
}

.tile{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform .2s,border-color .2s;
  box-shadow:0 4px 14px var(--shadow);
}

/* Prevent visited coloring from affecting album tiles */
.tile:link,
.tile:visited,
.tile:hover,
.tile:active{
  color:inherit;
  text-decoration:none;
}

.tile:hover{
  transform:translateY(-3px);
  border-color:var(--tile-hover-border);
}

.tile:active{
  transform:translateY(-1px);
  border-color:var(--accent-active);
}

.thumb{
  display:flex;
  aspect-ratio:1/1;
  align-items:center;
  justify-content:center;
  background:var(--thumb-bg);
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.emoji-icon{ font-size:5rem; opacity:.9; }

/* Emoji tiles only */
.thumb:has(.emoji-icon){ background:var(--panel); }

.meta{
  padding:10px;
  font-size:.9rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   Album details / info boxes
   ========================= */

.album-details{
  background:var(--panel);
  border:1px solid var(--border);
  padding:15px;
  border-radius:12px;
  margin-bottom:20px;
  line-height:1.5;
}

/* =========================
   Footer
   ========================= */

.footer{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.85rem;
  opacity:.8;
}

.footer .right{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* =========================
   Login
   ========================= */

.page-login{
  display:grid;
  place-items:center;
  height:100vh;
}

.login-card{
  background:var(--panel);
  padding:30px;
  border-radius:16px;
  width:300px;
  border:1px solid var(--border);
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
}

.login-card input{
  width:100%;
  padding:10px;
  margin:10px 0;
  background:var(--input-bg);
  border:1px solid var(--border);
  color:var(--text);
  box-sizing:border-box;
  border-radius:6px;
}

.login-card button{
  width:100%;
  padding:10px;
  background:#333;
  color:#fff;
  border:none;
  cursor:pointer;
  font-weight:bold;
  border-radius:6px;
}

.err{
  color:#ff4444;
  margin-top:10px;
  font-size:.9rem;
}