/* Zanzion Simple Forum - frontend styling with thread/reply boxes */
.zsf-wrap { max-width: 900px; margin: 0 auto; color: #eee; }

/* Table */
.zsf-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.zsf-table th, .zsf-table td { border-bottom: 1px solid rgba(255,255,255,0.15); padding: 12px; }
.zsf-table th { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; background: #000; color:#fff; }

.zsf-table a { color: #fff; text-decoration: none; }
.zsf-center { text-align: center; }

/* Thread view */
.zsf-thread-title { 
  background:#000; 
  color:#fff; 
  padding: 12px; 
  text-transform: uppercase; 
  letter-spacing:.08em; 
  font-weight: 700; 
  margin: 0 0 6px 0; 
}
/* removed old thread-meta style */
.zsf-thread-content { white-space: pre-wrap; margin-bottom: 20px; }

/* Replies - each in own box */
.zsf-replies h3 { 
  background:#000; 
  color:#fff; 
  padding: 10px; 
  text-transform: uppercase; 
  font-weight:700; 
  margin:0 0 12px 0;
}
.zsf-reply { 
  background: rgba(255,255,255,0.06); 
  padding: 12px; 
  border-radius: 6px; 
  margin: 12px 0; 
}
/* removed old reply-head style */
.zsf-reply-author { font-weight:600; }

/* Form - only a "box" around OPRET INDLÆG */
.zsf-form-wrap { margin: 20px 0; }
.zsf-form-title { 
  text-align: center; 
  margin: 0 0 14px 0; 
  background:#000; 
  color:#fff; 
  padding: 12px; 
  text-transform: uppercase; 
  letter-spacing:.08em; 
  font-weight: 700;
}

/* White inputs */
#zsf-new-thread input[type=text],
#zsf-new-reply input[type=text],
#zsf-new-thread textarea,
#zsf-new-reply textarea { 
  width: 100%; 
  padding: 16px; 
  margin: 12px 0; 
  background: #fff; 
  border: 0; 
  color: #333; 
  border-radius: 0; 
  box-shadow: none;
}

.zsf-btn { 
  display:block; width: 200px; margin: 10px auto 0; 
  padding: 12px 16px; border: 0; border-radius: 0; 
  background:#000; color:#fff; text-transform: uppercase; 
  letter-spacing:.04em; cursor: pointer; 
}

.zsf-msg { text-align: center; margin-top: 8px; }

/* Smileys list */
.zsf-smileys { margin: 24px 0; }
.zsf-smileys-grid { display:grid; gap:10px; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); }
.zsf-smiley-item { background: rgba(255,255,255,0.06); border-radius: 8px; padding: 10px; text-align:center; }
.zsf-smiley-item img { height: 40px; width:auto; display:block; margin: 0 auto 6px; }
.zsf-code { font-family: monospace; font-size: 13px; }

.zsf-back { color:#ccc; display:inline-block; margin-bottom:12px; }
.zsf-smiley { height: 24px; vertical-align: middle; }

/* Force placeholder text to be visible even if theme overrides */
.zsf-wrap input::placeholder,
.zsf-wrap textarea::placeholder { color: #9aa0a6; opacity: 1; }

.zsf-wrap input::-webkit-input-placeholder,
.zsf-wrap textarea::-webkit-input-placeholder { color: #9aa0a6; opacity: 1; }

.zsf-wrap input:-ms-input-placeholder,
.zsf-wrap textarea:-ms-input-placeholder { color: #9aa0a6; opacity: 1; }

.zsf-wrap input::-ms-input-placeholder,
.zsf-wrap textarea::-ms-input-placeholder { color: #9aa0a6; opacity: 1; }


/* Center all text inside thread view and forms */
.zsf-thread, .zsf-replies, .zsf-form-wrap { text-align: center; }

/* Heading style for sections */
.zsf-replies > h3, .zsf-form-title {
  background: #000;
  color: #fff;
  padding: 14px 18px;
  font-size: 28px;
  margin: 24px 0 16px 0;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 4px;
}

/* Reply items styled like legacy look */
.zsf-replies .zsf-reply {
  padding: 18px 10px;
  margin: 0 0 6px 0;
  border-bottom: 2px dashed #ffffff; /* white instead of purple */
}

.zsf-replies .zsf-reply:last-child {
  border-bottom: none;
}

.zsf-replies /* removed old reply-head style */

.zsf-replies .zsf-reply-author,
.zsf-replies .zsf-reply-date {
  display: inline-block;
  margin: 0 6px;
  opacity: 0.9;
}


/* Replies without box background */
.zsf-replies .zsf-reply {
  background: none !important;
  padding: 10px 0;
  margin: 0 0 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.5); /* thinner, semi-transparent white */
  border-radius: 0;
}

.zsf-replies .zsf-reply:last-child {
  border-bottom: none;
}

.zsf-replies /* removed old reply-head style */


/* Center align replies fully */
.zsf-replies /* removed old reply-head style */
.zsf-replies .zsf-reply-content { white-space: pre-wrap;  text-align: center !important; }



/* Force reply head (name - time - date) to center properly */
.zsf-replies /* removed old reply-head style */
.zsf-replies .zsf-reply-head * {
  display: inline-block !important;
  text-align: center !important;
  float: none !important;
}


/* Style for 'Navn · kl. HH:MM – dd/mm/YYYY' line */
.zsf-replies /* removed old reply-head style */


/* v6.7.4 force smaller text in thread and replies */
.zsf-thread-content,
.zsf-reply-content {
    font-size: 10px !important;
}


/* Center text inside form inputs/textarea (placeholders and user text) */
#zsf-new-thread input[type="text"],
#zsf-new-thread textarea,
#zsf-new-reply input[type="text"],
#zsf-new-reply textarea {
    text-align: center;
}


/* Ensure thread meta and reply head look identical */
.zsf-thread-meta, /* removed old reply-head style */


/* Unified meta line style for thread and replies */
.zsf-meta {
  display:block;
  text-align:center;
  opacity:.8;
  margin-bottom:12px;
}


/* === Unified meta line === */
.zsf-meta {
  display:block !important;
  text-align:center !important;
  opacity:.8;
  margin-bottom:12px;
}
/* Back-compat: ensure old classes inherit the same look if still present anywhere */
.zsf-thread-meta, .zsf-reply-head {
  display:block !important;
  text-align:center !important;
  margin-bottom:12px;
}


/* Responsive table for threads */
@media (max-width: 768px) {
  .zsf-thread-table th:nth-child(2),
  .zsf-thread-table th:nth-child(3),
  .zsf-thread-table td:nth-child(2),
  .zsf-thread-table td:nth-child(3) {
    display: none;
  }
  .zsf-thread-table td {
    display: block;
    text-align: left;
    padding: 6px 8px;
  }
  .zsf-thread-table td:first-child::after {
    content: attr(data-author) " | " attr(data-date);
    display: block;
    font-size: 13px;
    opacity: 0.8;
  }
  .zsf-thread-table tr {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 10px;
    display: block;
  }
}


/* === Responsive: two-row table on mobile for threads overview === */
@media (max-width: 768px) {
  
  .zsf-thread-table tr { 
    display: grid; 
    grid-template-columns: 1fr auto; 
    align-items: start; 
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .zsf-thread-table td { 
    border: none; 
    padding: 8px;
  }
  /* First cell shows Emne + details */
  .zsf-thread-table td:first-child::after {
    content: "Skrevet af: " attr(data-author) "\A" "Dato: " attr(data-date);
    display: block;
    font-size: 13px;
    opacity: .8;
    white-space: pre-line;
    margin-top: 4px;
  }
  /* Hide separate author/date cells on mobile */
  .zsf-thread-table td:nth-child(2),
  .zsf-thread-table td:nth-child(3) {
    display: none;
  }
  /* Replies count stays in its own (right) column */
  .zsf-thread-table td:last-child {
    text-align: right;
    font-weight: 600;
  }
}


/* === Mobile two-row table with header row === */
@media (max-width: 768px) {
  
  .zsf-thread-table thead tr {
    display: grid;
    grid-template-columns: 1fr auto;
    font-weight: 700;
    text-transform: uppercase;
    background: #000;
    color: #fff;
  }
  .zsf-thread-table thead tr td {
    padding: 10px 8px;
    border: none;
  }
  .zsf-thread-table tr { 
    display: grid; 
    grid-template-columns: 1fr auto; 
    align-items: start; 
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .zsf-thread-table td { 
    border: none; 
    padding: 8px;
  }
  /* First cell shows Emne + details */
  .zsf-thread-table td:first-child::after {
    content: "Skrevet af: " attr(data-author) "\A" "Dato: " attr(data-date);
    display: block;
    font-size: 13px;
    opacity: .8;
    white-space: pre-line;
    margin-top: 4px;
  }
  /* Only two visible cells on mobile: subject+details and reply count */
  .zsf-thread-table td:nth-child(n+3) { display: none; }
  .zsf-thread-table td.zsf-center:last-child,
  .zsf-thread-table td:last-child { text-align: right; font-weight: 600; }
}


/* === Responsive mobile two-column thread list (keep desktop intact) === */
@media (max-width: 768px) {
  /* Hide middle columns */
  .zsf-thread-table thead th:nth-child(2),
  .zsf-thread-table thead th:nth-child(3),
  .zsf-thread-table tbody td:nth-child(2),
  .zsf-thread-table tbody td:nth-child(3) {
    display: none;
  }

  /* Make header and rows two-column grid: [subject] [replies] */
  .zsf-thread-table thead tr {
    display: grid;
    grid-template-columns: 1fr auto;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
  }
  .zsf-thread-table thead th { border: none; padding: 10px 8px; }

  .zsf-thread-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .zsf-thread-table tbody td { border: none; padding: 8px; }

  /* Subject cell shows extra details */
  .zsf-thread-table tbody td:first-child::after {
    content: "Skrevet af: " attr(data-author) "\A" "Dato: " attr(data-date);
    display: block;
    font-size: 13px;
    opacity: .8;
    white-space: pre-line;
    margin-top: 4px;
  }
  .zsf-thread-table tbody td:last-child {
    text-align: right;
    font-weight: 600;
  }
}


/* Ensure reply count column is visible on mobile */
@media (max-width: 768px) {
  .zsf-thread-table td:last-child {
    display: block !important;
    text-align: right;
    font-weight: 700;
  }
}


/* === Mobile column widths: Emne 70% / Antal svar 20% === */
@media (max-width: 768px) {
  /* Header row on mobile */
  .zsf-thread-table .zsf-mobile-head {
    display: grid;
    grid-template-columns: 70% 20%;
  }
  .zsf-thread-table .zsf-mobile-head td:first-child { text-align: left; }
  .zsf-thread-table .zsf-mobile-head td:last-child  { text-align: right; }

  /* Data rows on mobile (we already use grid for rows) */
  .zsf-thread-table tr {
    grid-template-columns: 70% 20% !important;
  }
  .zsf-thread-table td:first-child { text-align: left; }
  .zsf-thread-table td:last-child  { text-align: right; font-weight: 700; }
}


/* Mobile: bump subject font size (+2px) */
@media (max-width: 768px) {
  .zsf-thread-table td:first-child > a {
    font-size: 1.2em !important; /* approx +2px over base */
    line-height: 1.3;
  }
}


/* === Header + reply alignment fixes === */
@media (max-width: 768px) {
  .zsf-thread-table th:first-child {
    text-align: left !important;
    padding-left: 8px;
  }
  .zsf-thread-table th:last-child {
    text-align: right !important;
    padding-right: 8px;
  }
  .zsf-thread-table td:last-child {
    text-align: right !important;
  }
}

/* Desktop: ensure reply count centered */
@media (min-width: 769px) {
  .zsf-thread-table td:last-child,
  .zsf-thread-table th:last-child {
    text-align: center;
  }
}


/* Mobile tweaks: left-align EMNE header, center reply count numbers */
@media (max-width: 768px) {
  .zsf-thread-table .zsf-mobile-head td:first-child { 
    text-align: left !important; 
  }
  .zsf-thread-table .zsf-mobile-head td:last-child { 
    text-align: center !important; 
    justify-self: center; 
  }
  .zsf-thread-table td:last-child { 
    text-align: center !important; 
    justify-self: center; 
    font-weight: 700; 
  }
}


/* Mobile tweak: center "ANTAL SVAR" header text */
@media (max-width: 768px) {
  .zsf-thread-table .zsf-mobile-head td:last-child {
    text-align: center !important;
    justify-self: center;
  }
}


/* v10: Center the mobile header 'ANTAL SVAR' cell explicitly */
@media (max-width: 768px) {
  .zsf-thread-table .zsf-mobile-head {
    grid-template-columns: 70% 20% !important;
  }
  .zsf-thread-table .zsf-mobile-head td:last-child {
    text-align: center !important;
    justify-self: center !important;
  }
}


/* v11: Force-center 'ANTAL SVAR' in mobile header more aggressively */
@media (max-width: 768px) {
  .zsf-thread-table .zsf-mobile-head { 
    display: grid;
    grid-template-columns: 70% 30% !important; /* give header count a bit more room so it can center */
  }
  .zsf-thread-table .zsf-mobile-head td:last-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
  }
}


/* v12: Make sure the text itself is centered in the mobile header count cell */
@media (max-width: 768px) {
  .zsf-thread-table .zsf-mobile-head td:last-child {
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    padding-right: 0 !important;
  }
  /* In case any nested spans inherit right alignment from theme */
  .zsf-thread-table .zsf-mobile-head td:last-child * {
    text-align: center !important;
  }
}


/* v13: ensure mobile header 'ANTAL SVAR' centered and not overridden */
@media (max-width: 768px) {
  .zsf-thread-table .zsf-mobile-head { grid-template-columns: 70% 20% !important; }
  .zsf-thread-table .zsf-mobile-head td:last-child {
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    padding: 10px 0 !important;
  }
}


/* v14: Bulletproof centering for mobile header 'ANTAL SVAR' */
@media (max-width: 768px) {
  .zsf-thread-table .zsf-mobile-head {
    display: grid !important;
    grid-template-columns: 70% 30% !important;
  }
  .zsf-thread-table .zsf-mobile-head-left {
    text-align: left !important;
    padding-left: 8px !important;
  }
  .zsf-thread-table .zsf-mobile-head-count {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 10px 0 !important;
    margin: 0 !important;
  }
  .zsf-thread-table .zsf-mobile-head-count > span {
    display: inline-block !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100%;
  }

  /* Ensure data rows use same 70/30 grid and center the numbers */
  .zsf-thread-table tr { 
    display: grid !important; 
    grid-template-columns: 70% 30% !important; 
  }
  .zsf-thread-table td:first-child { text-align: left !important; }
  .zsf-thread-table td:last-child  { 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important; 
    font-weight: 700; 
  }
}