/* PNFOA generated-document forms (Game Card, Coach's Card) */

.pnfoa-game-card-form,
.pnfoa-coaches-card-form,
.pnfoa-evaluate-form,
.pnfoa-join-form {
  background-color: var(--pn-black);
  color: var(--pn-white);
  border-radius: var(--pn-radius-lg);
  box-shadow: var(--pn-shadow-soft);
  padding: var(--pn-spacing-lg);
  max-width: 700px;
  margin: 0 auto;
}

.pnfoa-game-card-form h2,
.pnfoa-coaches-card-form h2,
.pnfoa-evaluate-form h2,
.pnfoa-join-form h2 {
  text-align: center;
  margin-top: 0;
  color: var(--pn-white);
}

.pnfoa-evaluate-form h3 {
  color: var(--pn-white);
  margin-bottom: 0.25rem;
}

.pnfoa-evaluate-form textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--pn-radius-sm);
  border: none;
  background-color: var(--pn-grey-light);
  color: var(--pn-grey-dark);
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
}

.pnfoa-evaluate-form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pn-gold);
}

.section-title-wrap {
  margin-top: var(--pn-spacing-md);
}

.pnfoa-eval-game-summary {
  margin-bottom: var(--pn-spacing-md);
}

.pnfoa-eval-matchup {
  font-family: var(--pn-font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--pn-gold);
}

.pnfoa-eval-game-meta {
  font-size: 0.9rem;
  color: var(--pn-gold);
  margin-top: 0.2rem;
}

.pnfoa-eval-official {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--pn-radius-md);
  padding: var(--pn-spacing-sm) var(--pn-spacing-md);
  margin-bottom: var(--pn-spacing-sm);
}

.pnfoa-eval-official-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.pnfoa-eval-official-name {
  font-size: 0.9rem;
  color: var(--pn-gold);
}

.pnfoa-eval-official-role {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pn-white);
}

.pnfoa-rating-scale {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.pnfoa-rating-scale-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
}

.pnfoa-rating-group {
  display: flex;
  gap: 0.4rem;
}

.pnfoa-rating-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--pn-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background-color: transparent;
  color: var(--pn-white);
  font-family: var(--pn-font-heading);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pnfoa-rating-btn:hover {
  border-color: var(--pn-gold);
}

.pnfoa-rating-btn.is-selected {
  background-color: var(--pn-gold);
  border-color: var(--pn-gold);
  color: var(--pn-black);
}

.pnfoa-eval-official-notes {
  margin-bottom: 0;
}

.pnfoa-form-instructions {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.pnfoa-form-row {
  display: flex;
  gap: var(--pn-spacing-md);
  margin-bottom: var(--pn-spacing-md);
}

.pnfoa-form-field {
  flex: 1;
}

.pnfoa-form-field-full {
  margin-bottom: var(--pn-spacing-md);
}

.pnfoa-form-field label,
.pnfoa-form-field-full label {
  display: block;
  font-family: var(--pn-font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  color: var(--pn-gold);
}

.pnfoa-form-field input,
.pnfoa-form-field select,
.pnfoa-form-field-full input,
.pnfoa-form-field-full select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--pn-radius-sm);
  border: none;
  background-color: var(--pn-grey-light);
  color: var(--pn-grey-dark);
  font-size: 0.95rem;
}

.pnfoa-form-field input:focus,
.pnfoa-form-field select:focus,
.pnfoa-form-field-full input:focus,
.pnfoa-form-field-full select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pn-gold);
}

.pnfoa-form-submit {
  width: 100%;
  background-color: var(--pn-red);
  color: var(--pn-white);
  border: none;
  padding: 0.9rem 1.5rem;
  border-radius: var(--pn-radius-md);
  font-family: var(--pn-font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.pnfoa-form-submit:hover {
  background-color: #b71c1c;
  transform: translateY(-1px);
}

/* Without an explicit :active state, browsers apply their own default
   click/active tint (often blue) to buttons. Override with gold so the
   button visibly responds to the click without breaking the red/gold
   palette. */
.pnfoa-form-submit:active,
.pnfoa-form-submit:focus {
  background-color: var(--pn-gold);
  color: var(--pn-black);
  outline: none;
}

.pnfoa-required {
  color: var(--pn-gold);
}

.pnfoa-checkbox-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem var(--pn-spacing-md);
}

.pnfoa-checkbox-option {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--pn-white) !important;
  margin-bottom: 0 !important;
  cursor: pointer;
}

.pnfoa-checkbox-option input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.pnfoa-char-count {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.35rem;
  text-align: right;
}

@media (max-width: 600px) {
  .pnfoa-form-row {
    flex-direction: column;
    gap: var(--pn-spacing-sm);
  }

  .pnfoa-checkbox-group {
    grid-template-columns: 1fr;
  }
}

/* =========================
   MEETING MANAGEMENT (board admin)
   ========================= */

.pnfoa-meeting-admin,
.pnfoa-feedback-admin,
.pnfoa-member-admin,
.pnfoa-document-admin {
  max-width: 900px;
  margin: 0 auto;
}

/* Black, like every other "card" on the site now (.pn-card, .pn-account-box
   — see pnfoa.css): a deliberately different visual language than the
   tables/document lists below, which stay white/light "islands" inside it
   for scannability. Was briefly flipped to white for consistency with the
   grey page column; landed back on black because dense, repeatedly-scanned
   admin surfaces like these are exactly where a stark black/gold card still
   reads well (matches the generator forms further up this file), and gold
   accents (labels, headings) only really pop against black. */
.pnfoa-admin-section {
  background-color: var(--pn-black);
  color: var(--pn-white);
  border-radius: var(--pn-radius-lg);
  box-shadow: var(--pn-shadow-soft);
  padding: var(--pn-spacing-lg);
  margin-bottom: var(--pn-spacing-lg);
}

.pnfoa-admin-section h3 {
  margin-top: 0;
  color: var(--pn-white);
}

.pnfoa-meeting-state-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: var(--pn-spacing-md);
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--pn-radius-md);
}

.pnfoa-meeting-state-bar strong {
  color: var(--pn-gold);
}

/* Deliberately white — data tables stay light/scannable islands even
   inside a black card, same as the document list further down. Plenty of
   contrast against .pnfoa-admin-section's black on its own, no border
   needed. */
.pnfoa-meeting-admin .pn-table,
.pnfoa-feedback-admin .pn-table,
.pnfoa-member-admin .pn-table,
.pnfoa-document-admin .pn-table {
  color: var(--pn-grey-dark);
  background-color: var(--pn-white);
  border-radius: var(--pn-radius-md);
  overflow: hidden;
}

.pnfoa-meeting-admin .pn-table th,
.pnfoa-feedback-admin .pn-table th,
.pnfoa-member-admin .pn-table th,
.pnfoa-document-admin .pn-table th {
  background-color: var(--pn-grey-light);
}

#pnfoa-meeting-detail h3 {
  margin-top: var(--pn-spacing-lg);
}

#meeting-selector {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--pn-radius-sm);
  border: none;
  background-color: var(--pn-grey-light);
  color: var(--pn-grey-dark);
  font-size: 0.95rem;
}

/* =========================
   COACH FEEDBACK (board admin)
   ========================= */

.pnfoa-feedback-admin .pn-table td,
.pnfoa-feedback-admin .pn-table th {
  vertical-align: top;
}

.pnfoa-feedback-game-summary {
  margin-bottom: var(--pn-spacing-md);
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--pn-radius-md);
}

.pnfoa-feedback-game-summary .pnfoa-eval-matchup {
  font-size: 1.2rem;
}

.pnfoa-feedback-submission {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--pn-radius-md);
  padding: var(--pn-spacing-sm) var(--pn-spacing-md);
  margin-bottom: var(--pn-spacing-sm);
}

.pnfoa-feedback-submission-meta {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}

.pnfoa-feedback-submission-notes {
  margin-bottom: 0.5rem;
}

.pnfoa-feedback-submission h4 {
  margin: 0 0 0.5rem 0;
  color: var(--pn-white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================
   DOCUMENT LIBRARY (browsable by all members, managed by board)
   ========================= */

.pnfoa-doc-breadcrumb {
  margin-bottom: var(--pn-spacing-md);
  font-size: 0.9rem;
}

.pnfoa-doc-breadcrumb a {
  color: var(--pn-gold);
  text-decoration: none;
}

.pnfoa-doc-breadcrumb a:hover {
  text-decoration: underline;
}

.pnfoa-doc-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0.4rem;
}

/* Create-folder / upload controls — board only, sits above the browse UI.
   A recessed panel on the black section, same as .pnfoa-eval-official /
   .pnfoa-meeting-state-bar elsewhere — not the document list itself (that's
   .pnfoa-doc-folder-card-wrap below), so it stays dark rather than white. */
.pnfoa-doc-toolbar {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--pn-radius-md);
  padding: var(--pn-spacing-md);
  margin-bottom: var(--pn-spacing-md);
}

.pnfoa-doc-toolbar:last-of-type {
  margin-bottom: var(--pn-spacing-lg);
}

.pnfoa-doc-toolbar .pnfoa-form-submit {
  width: auto;
  padding: 0.6rem 1.25rem;
}

.pnfoa-doc-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--pn-spacing-sm);
  margin-bottom: var(--pn-spacing-lg);
}

/* Grid item — plain block so the edit row (appended by JS when "Manage"
   is toggled) stacks below the header instead of squeezing into its flex
   row. .is-editing spans the full grid width while open, since the
   rename/move form needs more room than one grid column gives it.
   Deliberately solid white (not just a light tint) — this is the document
   list itself, same white/scannable treatment as .pn-table, popping
   against the black .pnfoa-admin-section it sits in. */
.pnfoa-doc-folder-card-wrap {
  background-color: var(--pn-white);
  border-radius: var(--pn-radius-md);
  overflow: hidden;
}

.pnfoa-doc-folder-card-wrap.is-editing {
  grid-column: 1 / -1;
}

.pnfoa-doc-folder-card {
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Dark text — .pnfoa-doc-folder-card-wrap above is solid white (the
   document list), unlike the black .pnfoa-admin-section it sits in. */
.pnfoa-doc-folder-open {
  background: none;
  border: none;
  color: var(--pn-black);
  font-family: var(--pn-font-heading);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  padding: 0;
  flex: 1;
}

.pnfoa-doc-folder-open:hover {
  color: var(--pn-gold);
}

.pnfoa-doc-manage-btn {
  flex: 0 0 auto;
  font-size: 0.75rem;
  padding: 0.4rem 0.8rem;
}

/* Inline rename/move/delete controls — shown beneath a folder card
   ("Manage" toggles it) or as an extra table row beneath a file
   (.pnfoa-doc-file-edit-row), same expand-in-place pattern as
   member-management-template.php's edit rows. Light border, not the
   rgba(255,255,255,...) used elsewhere in this file — this divider sits
   inside the white .pnfoa-doc-folder-card-wrap above, not directly on
   black. */
.pnfoa-doc-edit-row {
  padding: var(--pn-spacing-md);
  border-top: 1px solid var(--pn-grey-border);
}

.pnfoa-doc-file-actions {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}

.pnfoa-doc-file-edit-row td {
  background-color: var(--pn-grey-light);
}