/* 📄 poms.css */

@font-face {
  font-family: 'Comic Sans MS';
  src: url("/assets/COMIC.TTF");
}

@font-face {
  font-family: 'headers';
  src: url("/assets/COOLS___.TTF");
}

@font-face {
  font-family: 'buttons';
  src: url("/assets/ATLANTISTEXT-REGULAR.OTF");
}

/* Basic Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  font-size: 16px;
  line-height: 1.5;
}

body, p, form, input, textarea, select {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Comic Sans MS', sans-serif;
}

h2, h3, input, textarea, select {
  padding-top: 1rem;
}

h1, h2, h3 {
  font-family: 'headers';
  /*letter-spacing: .05rem;*/
  margin: 0;
}

h1 {
  font-size: 1.75rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
}

h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  border-bottom: 1px solid #bea8a1;
}

a {
  color:#2d695b;
}

ul {
  margin-left: 1rem;
}

a:hover {
  text-decoration: none;
}

a:visited {
  color:#678f85;
}

button {
  font-family: 'buttons';
  font-size: 16px;
  background-color: #123930;
  color: #fff;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.25);
  padding: 6px 20px;
  border-radius: 5px;
}

button:hover {
  transform: translate(1px, 1px);
}

body {
  background-image: url("/assets/egg-shell.png");
  background-color: #fdf7f3;
  color: #50332a;
  line-height: 1.5;
}

header {
  display: flex;
  justify-content: center;
  background-color: #421c10;
  text-align: center;
  padding: 1rem;
  background-image: url("/assets/petzbak.png");
}

header img {
  max-width: 100%;
  height: auto;
}

.layout {
  display: flex;
  flex-direction: column;
}

main {
  padding: 1rem;
  width: 100%;
}

footer {
  background-color: #bea8a1;
  background-image: url("/assets/egg-shell.png");
  text-align: center;
  padding: 1rem;
  font-size: 0.875rem;
}

p {
  margin-top: 1rem;
  margin-bottom: 3rem;
  font-size: 1rem;
}

textarea.wide {
  width: 100%;
  max-width: 800px;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background-color: #ece4dc;
  background-image: url("/assets/egg-shell.png");
}

.nav-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.nav-icon {
  width: 64px;
  height: 64px;
  display: block;
  text-indent: -9999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Icon placeholders — replace with actual images */
.nav-icon.home  { background-image: url('/assets/icons/home.png'); }
.nav-icon.search  { background-image: url('/assets/icons/search.png'); }
.nav-icon.bazaar  { background-image: url('/assets/icons/bazaar.png'); }
.nav-icon.petzu   { background-image: url('/assets/icons/petzu.png'); }
.nav-icon.archive { background-image: url('/assets/icons/dopp.png'); }
.nav-icon.profile { background-image: url('/assets/icons/profile.png'); }
.nav-icon.wishlists { background-image: url('/assets/icons/wishlists.png'); }
.nav-icon.users { background-image: url('/assets/icons/default-user-icon.png'); }
.nav-icon.imagehost { background-image: url('/assets/icons/imagehost.png'); }

form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 50%;
  max-width: 800px;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

input, textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

select {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

/* Responsive: Desktop */
@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }

  nav {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 20%;
  }

  main {
    flex: 1;
    padding: 1rem 1rem 3rem 2rem;
    max-width: 768px;
  }
}

/*------------------------------*/
/* User Profile Wrapper */
/*------------------------------*/

.user-profile {
  <?= $user['profile_css'] ?>
}

.user-bio {
  margin-top: 1rem;
  line-height: 1.5;
  max-width: 100%;
}

.user-bio h1,
.user-bio h2,
.user-bio h3 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.user-bio p {
  margin: 0.5rem 0;
}

.user-bio a {
  color: #8a4d3d;
  text-decoration: underline;
}

.user-bio strong {
  font-weight: bold;
}

.user-bio em {
  font-style: italic;
}

.centered-block {
  text-align: center;
  margin: 1rem auto;
}

.user-bio pre {
  background: #333;        /* optional: light gray background */
  padding: 0.75em;             /* optional: spacing */
  border-radius: 6px;          /* optional: rounded corners */
  overflow-x: auto;            /* allows horizontal scrolling */
  white-space: pre;            /* preserve line breaks and spacing */
  max-width: 100%;             /* prevents overflow */
}

.user-bio code {
  font-family: monospace;      /* better readability */
  font-size: 0.95em;
}

pre {
  background: #333;        /* optional: light gray background */
  padding: 0.75em;             /* optional: spacing */
  border-radius: 6px;          /* optional: rounded corners */
  overflow-x: auto;            /* allows horizontal scrolling */
  white-space: pre;            /* preserve line breaks and spacing */
  max-width: 100%;             /* prevents overflow */
}

code {
  font-family: monospace;      /* better readability */
  font-size: 0.95em;
}

/*------------------------------*/
/* Edit Profile Preview */
/*------------------------------*/

.profile-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.profile-form {
  background: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
}

.profile-preview {
  background: #f9f9f9;
  border-left: 1px solid #ccc;
  padding: 1rem;
  border-radius: 0.5rem;
}

.profile-preview h2 {
  margin-top: 0;
}

.offscreen {
  position: absolute;
  left: -100000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 📋 Wishlist Editor Table */
.wishlist-form table {
    width: 100%;
    border-collapse: collapse;
}
.wishlist-form th,
.wishlist-form td {
    border: 1px solid #bea8a1;
    padding: 6px;
}
.wishlist-form input[type="text"],
.wishlist-form textarea {
    width: 100%;
}
.wishlist-form .remove-row {
    color: red;
    cursor: pointer;
}

/* 📄 Wishlist View Table */
.wishlist-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
}
.wishlist-table th,
.wishlist-table td {
    border: 1px solid #bea8a1;
    padding: 6px;
}

.search-form {
    margin-bottom: 2em;
}

/* 🛠️ Wishlist editor: use full main width, not the global form 50% */
.wishlist-form {
  width: 100%;
  max-width: 900px; /* roomy but still matches your site’s feel */
}

/* Make the drag handle behave nicely without shrinking other inputs */
.wishlist-form .grab {
  cursor: grab;
  width: 2rem;
  text-align: center;
  white-space: nowrap;
}

/* Optional: nested list a hair smaller/indented */
.wishlist-matches { margin: .25em 0 1em 1.25em; font-size: 0.95rem; }

/* Profile CSS Tutorial Sidebar */
.help-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
}

.help-content {
  background-image: url("/assets/egg-shell.png");
  background-color: #fdf7f3;
  max-width: 600px;
  width: 90%;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  position: relative;
  overflow-y: auto;
  max-height: 90vh;
}

.help-content pre {
  background: #bebebe7e;
  padding: 0.75rem;
  border-radius: 6px;
  overflow-x: auto;
}

.help-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: none;
  cursor: pointer;

  font-family: 'buttons';
  font-size: 16px;
  background-color: #123930;
  color: #fff;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.25);
  padding: 6px 20px;
  border-radius: 5px;
}

.img-left {
  float: left;
  max-width: 40%;
  margin: 0 .75rem .5rem 0; /* right + bottom space */
}

.img-right {
  float: right;
  max-width: 40%;
  margin: 0 0 .5rem .75rem; /* left + bottom space */
}

/* Mobile: stop floating so it stacks nicely */
@media (max-width: 600px) {
  .img-left,
  .img-right {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }
}

/* ===========================
   POMS Images — layout + nav
   =========================== */

/* Give the images page's nav a subtle panel look without fighting your global nav */
.images-nav {
  background-color: #ece4dc;
  background-image: url("/assets/egg-shell.png");
  padding: 1rem;
  border-radius: 8px;
}

/* Prevent the New Folder form from overflowing the sidebar nav */
.images-nav > * { width: 100%; }                 /* make nav children fill the panel */
.images-create-folder {
  width: 100% !important;                        /* override global form width:50% */
  max-width: none;                               /* remove 800px cap inside sidebar */
  margin-left: 0;                                /* keep it aligned with nav content */
  margin-right: 0;
}

.images-create-folder input[type="text"] { width: 100%; padding-right: .75rem;}

.images-sidebar-title {
  margin-bottom: .5rem;
}

.images-folder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
  /* slightly wider for readability */
}

.images-folder-list a {
  display: block;
  padding: .35rem .5rem;
  border-radius: 6px;
  text-decoration: none;
}

.images-folder-list a:hover {
  background: #f2e9e3;
}

.images-folder-list a.is-active {
  font-weight: 700;
  text-decoration: none;
  background: #e9ddd6;
  border-left: 4px solid #8a6d63;
  padding-left: .5rem;
}

.images-sep {
  margin: 1rem 0;
  border: none;
  border-top: 1px solid #bea8a1;
}

.images-create-folder .label {
  display: block;
  margin-bottom: .25rem;
}

/* Main column spacing (we're inside .layout already) */
.images-main {
  width: 100%;
  padding: 1rem;
}

/* ===========================
   Uploader + previews
   =========================== */
.dropzone {
  border: 2px dashed #bea8a1;
  border-radius: 10px;
  text-align: center;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04) inset;
}

.dropzone.is-hover {
  background: #bfdad4;
  border-color: #123930;
}

.dropzone-help {
  margin-bottom: .5rem;
}

.images-upload-form {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.uploader-actions {
  display: inline-flex;
  gap: .6rem;
  align-items: center;
}

.uploader-note {
  font-size: .9rem;
  opacity: .8;
  margin-top: .5rem;
  color: #6f5a52;
}

.preview-wrap {
  display: none;
  margin-top: .75rem;
}

.preview-wrap.is-visible {
  display: block;
}

.preview-title {
  font-size: .9rem;
  margin-bottom: .4rem;
  opacity: .85;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .5rem;
}

.preview-card {
  background: #ece4dc;
  background-image: url("/assets/egg-shell.png");
  border-radius: 8px;
  padding: .35rem;
}

.preview-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background:
      linear-gradient(45deg, #eee 25%, transparent 25%) -8px 0/16px 16px,
      linear-gradient(45deg, transparent 75%, #eee 75%) -8px 0/16px 16px,
      linear-gradient(45deg, transparent 75%, #eee 75%) 0 0/16px 16px,
      linear-gradient(45deg, #eee 25%, transparent 25%) 0 0/16px 16px;
}

.preview-name {
  font-size: .75rem;
  margin-top: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===========================
   Images grid + thumb sizing
   =========================== */
.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .65rem;
  /* slightly tighter */
}

.image-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #ece4dc;
  background-image: url("/assets/egg-shell.png");
  border-radius: 8px;
  padding: .5rem;
  text-align: center;
  border: 1px solid #e0d4cd;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .05s ease, box-shadow .15s ease;
}

/* ✅ Natural-size by default; never upscale; downscale when >250px or container is narrower */
.image-thumb {
  display: block;
  width: auto;
  max-width: min(100%, 250px);
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  background:
      linear-gradient(45deg, #eee 25%, transparent 25%) -8px 0/16px 16px,
      linear-gradient(45deg, transparent 75%, #eee 75%) -8px 0/16px 16px,
      linear-gradient(45deg, transparent 75%, #eee 75%) 0 0/16px 16px,
      linear-gradient(45deg, #eee 25%, transparent 25%) 0 0/16px 16px;
}

.image-meta {
  font-size: .8rem;
  margin-top: .5rem;
  display: grid;
  gap: .25rem;
}

.image-name {
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-size {
  text-align: center;
  color: #6f5a52;
}

.image-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
}

.image-actions .copy-btn,
.delete-btn {
  width: 100%;
  padding: .4rem .6rem;
  border-radius: 6px;
  box-shadow: none;
}

.delete-btn {
  background: rgb(105, 12, 12);
}

.image-actions .copy-btn:hover,
.delete-btn:hover {
  filter: brightness(0.96);
}

.image-delete-form {
  margin-top: .35rem;
}

.image-move-form {
  width: 100%;
  margin-top: .35rem;
  display: grid;
  gap: .35rem;
}

.image-move-select {
  width: 100%;
}

.image-move-newfold input[type="text"] {
  width: 100%;
}

@media (min-width: 768px) {

  /* put Delete and Move buttons neatly if you like */
  .image-delete-form+.image-move-form .image-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* Optional: on wider screens, show copy buttons in two neat columns 
@media (min-width: 768px) {
  .image-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem;
  }
}*/

/* Optional: slightly wider min column to better house 250px thumbs + padding */
@media (min-width: 768px) {
  .images-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

.muted {
  opacity: .75;
}