/*
 * CricketWindies new-thread surfaces
 *
 * This file is intentionally scoped. It must not be loaded as a global
 * replacement for global.css or theme.css.
 *
 * Integration hooks:
 *   - add cw-newthread-page to the newthread.php body
 *   - add cw-newthread-form to the outer new-thread form/table wrapper
 *
 * Every rule below is scoped to that page/form. The masthead, navigation,
 * footer, PM pages, reply pages, and unscoped MyBB tables are not targeted.
 */

body.cw-newthread-page .cw-newthread-form {
  --newthread-maroon: var(--maroon, #54102b);
  --newthread-maroon-dark: var(--maroon-dark, #390a1d);
  --newthread-gold: var(--gold, #edc268);
  --newthread-ivory: var(--ivory, #fff9f0);
  --newthread-surface: var(--surface, #ffffff);
  --newthread-surface-alt: var(--surface-alt, #f7f5f2);
  --newthread-surface-hover: var(--surface-hover, #f4f1ed);
  --newthread-ink: var(--ink, #152033);
  --newthread-muted: var(--muted, #5f6877);
  --newthread-border: var(--border, #e4ddd7);
  --newthread-border-strong: var(--border-strong, #d5cdc7);
  --newthread-link: var(--blue-link, #07588c);
}

/* Main form shell and MyBB table rows. */
body.cw-newthread-page .cw-newthread-form {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--newthread-border);
  border-radius: 5px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--newthread-surface);
  color: var(--newthread-ink);
  box-shadow: 0 1px 2px rgba(21, 32, 51, 0.05);
}

body.cw-newthread-page .cw-newthread-form > tbody > tr > td,
body.cw-newthread-page .cw-newthread-form > tr > td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--newthread-border);
  vertical-align: top;
}

body.cw-newthread-page .cw-newthread-form > tbody > tr:last-child > td,
body.cw-newthread-page .cw-newthread-form > tr:last-child > td {
  border-bottom: 0;
}

body.cw-newthread-page .cw-newthread-form .thead {
  padding: 13px 16px;
  background: var(--newthread-maroon);
  color: var(--newthread-ivory);
  font-size: 16px;
  line-height: 1.25;
}

body.cw-newthread-page .cw-newthread-form .thead a:link,
body.cw-newthread-page .cw-newthread-form .thead a:visited {
  color: var(--newthread-ivory);
}

body.cw-newthread-page .cw-newthread-form .tcat {
  background: var(--newthread-surface-alt);
  color: var(--newthread-ink);
  font-weight: 700;
}

body.cw-newthread-page .cw-newthread-form .trow1,
body.cw-newthread-page .cw-newthread-form .trow2 {
  background: var(--newthread-surface);
  color: var(--newthread-ink);
}

body.cw-newthread-page .cw-newthread-form .trow2 {
  background: var(--newthread-surface-alt);
}

body.cw-newthread-page .cw-newthread-form > tbody > tr > td:first-child,
body.cw-newthread-page .cw-newthread-form > tr > td:first-child {
  width: 190px;
  background: var(--newthread-surface-alt);
  color: var(--newthread-ink);
  font-weight: 700;
}

body.cw-newthread-page .cw-newthread-form label,
body.cw-newthread-page .cw-newthread-form .field-label {
  color: var(--newthread-ink);
  font-weight: 700;
}

/* Subject, editor, selects, and other inputs. */
body.cw-newthread-page .cw-newthread-form input.textbox,
body.cw-newthread-page .cw-newthread-form input[type="text"],
body.cw-newthread-page .cw-newthread-form input[type="url"],
body.cw-newthread-page .cw-newthread-form input[type="number"],
body.cw-newthread-page .cw-newthread-form select,
body.cw-newthread-page .cw-newthread-form textarea {
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--newthread-border-strong);
  border-radius: 4px;
  background: var(--newthread-surface);
  color: var(--newthread-ink);
  font: inherit;
}

body.cw-newthread-page .cw-newthread-form input.textbox,
body.cw-newthread-page .cw-newthread-form input[type="text"],
body.cw-newthread-page .cw-newthread-form input[type="url"],
body.cw-newthread-page .cw-newthread-form input[type="number"],
body.cw-newthread-page .cw-newthread-form select {
  min-height: 38px;
  padding: 8px 10px;
}

body.cw-newthread-page .cw-newthread-form textarea {
  min-height: 142px;
  padding: 11px 12px;
  line-height: 1.45;
  resize: vertical;
}

body.cw-newthread-page .cw-newthread-form input::placeholder,
body.cw-newthread-page .cw-newthread-form textarea::placeholder {
  color: var(--newthread-muted);
}

/* SCEditor, scoped to this form only. */
body.cw-newthread-page .cw-newthread-form .sceditor-container {
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--newthread-border-strong);
  border-radius: 4px;
  background: var(--newthread-surface);
}

body.cw-newthread-page .cw-newthread-form .sceditor-toolbar {
  padding: 6px;
  border-bottom: 1px solid var(--newthread-border);
  background: var(--newthread-surface-alt);
}

body.cw-newthread-page .cw-newthread-form .sceditor-group {
  border: 1px solid var(--newthread-border);
  border-radius: 3px;
  background: var(--newthread-surface);
}

body.cw-newthread-page .cw-newthread-form .sceditor-button {
  width: 28px;
  height: 28px;
  border-radius: 2px;
  /* Added on integration — same fix as reply.css: SCEditor's own stylesheet
     pads this element for its *original* size; forcing 28px here without
     touching that padding left the 16px icon off-center. Flex-centering it
     sidesteps having to match paddings across two stylesheets. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

body.cw-newthread-page .cw-newthread-form .sceditor-button:hover,
body.cw-newthread-page .cw-newthread-form .sceditor-button.active {
  background: var(--newthread-gold);
}

body.cw-newthread-page .cw-newthread-form .sceditor-container iframe,
body.cw-newthread-page .cw-newthread-form .sceditor-container textarea {
  min-height: 142px;
  box-sizing: border-box;
  background: var(--newthread-surface);
  color: var(--newthread-ink);
  font: inherit;
  line-height: 1.45;
}

/* Post icons and standard option rows. */
body.cw-newthread-page .cw-newthread-form #posticons,
body.cw-newthread-page .cw-newthread-form .posticons,
body.cw-newthread-page .cw-newthread-form .post-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body.cw-newthread-page .cw-newthread-form #posticons label,
body.cw-newthread-page .cw-newthread-form .posticons label,
body.cw-newthread-page .cw-newthread-form .post-icons label {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--newthread-border);
  border-radius: 4px;
  background: var(--newthread-surface);
  color: var(--newthread-ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
}

body.cw-newthread-page .cw-newthread-form #posticons label:hover,
body.cw-newthread-page .cw-newthread-form .posticons label:hover,
body.cw-newthread-page .cw-newthread-form .post-icons label:hover {
  background: var(--newthread-surface-hover);
}

body.cw-newthread-page .cw-newthread-form #posticons input:checked + label,
body.cw-newthread-page .cw-newthread-form .posticons input:checked + label,
body.cw-newthread-page .cw-newthread-form .post-icons input:checked + label {
  border-color: var(--newthread-maroon);
  background: var(--newthread-maroon);
  color: var(--newthread-ivory);
}

/* Poll builder and attachment controls stay visually subordinate. */
body.cw-newthread-page .cw-newthread-form #poll_options,
body.cw-newthread-page .cw-newthread-form .poll_options,
body.cw-newthread-page .cw-newthread-form .newthread-poll,
body.cw-newthread-page .cw-newthread-form #attachments,
body.cw-newthread-page .cw-newthread-form .attachments,
body.cw-newthread-page .cw-newthread-form .attachment_fields {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--newthread-border);
  border-radius: 4px;
  background: var(--newthread-surface-alt);
}

body.cw-newthread-page .cw-newthread-form .poll_option,
body.cw-newthread-page .cw-newthread-form .poll-option,
body.cw-newthread-page .cw-newthread-form .attachment,
body.cw-newthread-page .cw-newthread-form .attachment_field,
body.cw-newthread-page .cw-newthread-form .attachment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

body.cw-newthread-page .cw-newthread-form .poll_option:first-child,
body.cw-newthread-page .cw-newthread-form .poll-option:first-child,
body.cw-newthread-page .cw-newthread-form .attachment:first-child,
body.cw-newthread-page .cw-newthread-form .attachment_field:first-child,
body.cw-newthread-page .cw-newthread-form .attachment-row:first-child {
  margin-top: 0;
}

body.cw-newthread-page .cw-newthread-form .poll_option input,
body.cw-newthread-page .cw-newthread-form .poll-option input,
body.cw-newthread-page .cw-newthread-form .attachment input {
  min-width: 0;
  flex: 1 1 220px;
}

/* Preview and notices generated by the form. Scoped to body.cw-newthread-page
   rather than .cw-newthread-form: the stock newthread template renders
   {$preview}/{$thread_errors}/{$attacherror}/{$moderation_notice} BEFORE
   <form> even opens, as siblings of the .cw-newthread-form table, not
   descendants of it — a .cw-newthread-form ancestor requirement here would
   never match, leaving these boxes entirely stock-styled (found live: the
   "subject is missing" validation list rendered near-white text on an
   unstyled pale-yellow stock background in dark mode — unreadable). Same
   fix applied on reply.css. */
body.cw-newthread-page .preview,
body.cw-newthread-page .cw-newthread-preview {
  margin-bottom: 14px;
  padding: 13px 16px;
  border: 1px solid var(--newthread-border);
  border-left: 4px solid var(--newthread-gold);
  border-radius: 4px;
  background: #fffaf0;
  color: var(--newthread-ink);
}

body.cw-newthread-page .notice,
body.cw-newthread-page .error,
body.cw-newthread-page .red_alert,
body.cw-newthread-page .invalid_field {
  margin: 10px 0;
  padding: 11px 13px;
  border: 1px solid var(--newthread-border);
  border-left: 4px solid var(--newthread-gold);
  border-radius: 4px;
  background: #fffaf0;
  color: var(--newthread-ink);
}

body.cw-newthread-page .error,
body.cw-newthread-page .red_alert,
body.cw-newthread-page .invalid_field {
  border-left-color: #8b2731;
  background: #fff4f4;
}

body.cw-newthread-page .error li,
body.cw-newthread-page .red_alert li,
body.cw-newthread-page .invalid_field li,
body.cw-newthread-page .notice li {
  color: var(--newthread-ink);
}

/* Actions remain local to the form. */
body.cw-newthread-page .cw-newthread-form .post_options,
body.cw-newthread-page .cw-newthread-form .thread-options,
body.cw-newthread-page .cw-newthread-form .cw-newthread-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body.cw-newthread-page .cw-newthread-form input.button,
body.cw-newthread-page .cw-newthread-form button.button,
body.cw-newthread-page .cw-newthread-form a.button,
body.cw-newthread-page .cw-newthread-form .button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 15px;
  border: 1px solid var(--newthread-maroon);
  border-radius: 4px;
  background: var(--newthread-maroon);
  color: var(--newthread-ivory) !important;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
}

body.cw-newthread-page .cw-newthread-form input.button:hover,
body.cw-newthread-page .cw-newthread-form button.button:hover,
body.cw-newthread-page .cw-newthread-form a.button:hover,
body.cw-newthread-page .cw-newthread-form .button:hover {
  border-color: var(--newthread-maroon-dark);
  background: var(--newthread-maroon-dark);
}

body.cw-newthread-page .cw-newthread-form input.button[type="button"],
body.cw-newthread-page .cw-newthread-form input.button[name="previewpost"],
body.cw-newthread-page .cw-newthread-form input.button[name="saveasdraft"],
body.cw-newthread-page .cw-newthread-form button.button.secondary,
body.cw-newthread-page .cw-newthread-form a.button.secondary,
body.cw-newthread-page .cw-newthread-form .button.secondary {
  border-color: var(--newthread-border-strong);
  background: var(--newthread-surface);
  color: var(--newthread-ink) !important;
}

body.cw-newthread-page .cw-newthread-form .smalltext {
  color: var(--newthread-muted);
  font-size: 12px;
}

/* Added on integration — same fix as reply.css: .thead's own ivory color
   only reaches links (.thead a:link/a:visited); the smilie inserter's
   "Smilies" title reuses .smalltext (muted gray) inside that maroon bar,
   which was otherwise nearly unreadable there. */
body.cw-newthread-page .cw-newthread-form .thead .smalltext {
  color: var(--newthread-ivory);
}

body.cw-newthread-page .cw-newthread-form a:focus-visible,
body.cw-newthread-page .cw-newthread-form button:focus-visible,
body.cw-newthread-page .cw-newthread-form input:focus-visible,
body.cw-newthread-page .cw-newthread-form select:focus-visible,
body.cw-newthread-page .cw-newthread-form textarea:focus-visible {
  outline: 3px solid var(--newthread-gold);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  body.cw-newthread-page .cw-newthread-form,
  body.cw-newthread-page .cw-newthread-form > tbody,
  body.cw-newthread-page .cw-newthread-form > tbody > tr,
  body.cw-newthread-page .cw-newthread-form > tr {
    display: block;
  }

  body.cw-newthread-page .cw-newthread-form > tbody > tr > td,
  body.cw-newthread-page .cw-newthread-form > tr > td {
    display: block;
    width: auto !important;
    padding: 12px;
  }

  body.cw-newthread-page .cw-newthread-form > tbody > tr > td:first-child,
  body.cw-newthread-page .cw-newthread-form > tr > td:first-child {
    padding-bottom: 7px;
    border-bottom: 0;
  }

  body.cw-newthread-page .cw-newthread-form .post_options,
  body.cw-newthread-page .cw-newthread-form .thread-options,
  body.cw-newthread-page .cw-newthread-form .cw-newthread-actions {
    align-items: stretch;
  }
}

@media (max-width: 450px) {
  body.cw-newthread-page .cw-newthread-form input.textbox,
  body.cw-newthread-page .cw-newthread-form input[type="text"],
  body.cw-newthread-page .cw-newthread-form input[type="url"],
  body.cw-newthread-page .cw-newthread-form input[type="number"],
  body.cw-newthread-page .cw-newthread-form select,
  body.cw-newthread-page .cw-newthread-form textarea {
    width: 100%;
  }

  body.cw-newthread-page .cw-newthread-form input.button,
  body.cw-newthread-page .cw-newthread-form button.button,
  body.cw-newthread-page .cw-newthread-form a.button,
  body.cw-newthread-page .cw-newthread-form .button {
    width: 100%;
    min-height: 40px;
  }

  body.cw-newthread-page .cw-newthread-form .sceditor-toolbar {
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Added on integration, not in the original handoff file: .preview/.notice
   use a hardcoded light cream (#fffaf0) and .error/.red_alert/.invalid_field
   a hardcoded light red (#fff4f4), neither with a dark-mode counterpart —
   same gap already found and fixed on the PM banner, profile empty-state,
   and reply.css's own identical preview notice. Scoped to body.cw-newthread-page
   (not .cw-newthread-form — see the base rule above for why). */
[data-theme="dark"] body.cw-newthread-page .preview,
[data-theme="dark"] body.cw-newthread-page .cw-newthread-preview,
[data-theme="dark"] body.cw-newthread-page .notice {
  background: rgba(237, 194, 104, .12);
  border-color: rgba(237, 194, 104, .35);
}

[data-theme="dark"] body.cw-newthread-page .error,
[data-theme="dark"] body.cw-newthread-page .red_alert,
[data-theme="dark"] body.cw-newthread-page .invalid_field {
  background: rgba(139, 39, 49, .18);
  border-color: rgba(139, 39, 49, .4);
}