/* Help Desk's own styles. The club palette, type and top bar come from
   style.css, shared with the other club apps; everything here is the furniture
   this app needs on top - stat tiles, status badges, the ticket page. */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-head h1 { margin-bottom: 2px; }
.page-head .subtitle { margin: 0; }



/* The headline numbers. Four tiles read as one row on a laptop and wrap to two
   columns on a phone rather than shrinking to illegibility. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-attention { border-left-color: var(--gold); }
.stat-good { border-left-color: #2e7d4f; }

.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; }

.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  background: #eef1f6;
  color: var(--muted);
  text-transform: capitalize;
}

.row-actions a, .row-actions button.link { font-size: 0.85rem; margin-right: 8px; }
button.link {
  background: none; border: none; padding: 0; font: inherit; color: var(--primary);
  cursor: pointer; text-decoration: underline;
}
button.link.danger, .btn.danger { color: var(--danger); }
.btn.danger { background: transparent; border: 1px solid #f4c7c3; }
form.inline { display: inline; margin: 0; }

.filter-card { padding: 16px 20px; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 16px; }

label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 10px; }
label.check input { width: auto; margin: 0; }


.code-input { letter-spacing: 0.4em; font-size: 1.3rem; text-align: center; }

.back-link {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
}
.back-link:hover { color: var(--primary); text-decoration: underline; }

/* Switching between the flat list and the workbook-style calendar. */
.view-switch { display: flex; gap: 4px; align-items: center; margin-bottom: 16px; }
.view-switch a {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 6px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}
.view-switch a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.view-switch .muted { font-size: 0.85rem; margin-left: 6px; }

/* The top bar holds more links than the shared style.css expected. On a
   laptop-width screen they wrap onto a second line rather than pushing Log out
   off the page; below 640px the menu collapses as before. */
@media (min-width: 641px) {
  header.topbar { gap: 16px; }
  header.topbar .brand { flex: none; }
  header.topbar nav { flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; min-width: 0; }
}

/* A stat tile that opens what it counts. */
a.stat-link { color: inherit; text-decoration: none; }
a.stat-link:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
a.stat-link:hover .stat-label { text-decoration: underline; }

/* A row's actions in a "⋮" menu, as in Club Contacts and Team Sheets. The list is
   position:fixed (placed by _action-menu-script) so the scrolling table never
   clips it or widens for it. */
.row-menu-cell { width: 1%; text-align: right; }
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; cursor: pointer; padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 1.1rem; line-height: 1.4; color: var(--muted); user-select: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary:hover, .action-menu[open] > summary { border-color: var(--primary); color: var(--primary); }
.action-menu-list { position: fixed; visibility: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); min-width: 180px; z-index: 30; padding: 4px; text-align: left; }
.action-menu-item { display: block; padding: 8px 10px; border-radius: 6px; font-size: 0.88rem; color: var(--text); text-decoration: none; white-space: nowrap; }
.action-menu-item:hover { background: var(--bg); }
.action-menu-list form { margin: 0; }
button.action-menu-item { width: 100%; margin: 0; background: none; border: none; text-align: left; font: inherit; font-size: 0.88rem; color: var(--text); cursor: pointer; }
button.action-menu-item:hover { background: var(--bg); }
.action-menu-item.danger { color: var(--danger); }
tr.editing td { background: #fff8e6; }

/* The Users form, the width of the list below it: email, name, mobile and what
   they see on one line, the permissions under them. */
.user-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; align-items: end; }
.user-fields input, .user-fields select { margin-bottom: 12px; }
.user-checks { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.user-form.editing { border-color: var(--gold); }

/* style.css styles text, email and date inputs; these match them. */
input[type="tel"], input[type="search"], textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 16px;
  background: var(--card);
  color: var(--text);
}
textarea { resize: vertical; }

.small { font-size: 0.82rem; }
.break { overflow-wrap: anywhere; }
.plain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

/* Ticket statuses: new wants somebody, open has somebody, closed is done. */
.badge-new { background: #fff4d9; color: #8a5a00; }
.badge-open { background: #e8eefb; color: #274690; }
.badge-closed { background: #eaf7ee; color: #1f6b3e; }
.badge-app { background: #f0eef6; color: #4a4363; text-transform: none; }
.badge-lg { font-size: 0.85rem; vertical-align: 3px; margin-left: 6px; }

/* The list's filters on one line, the search taking what's left. */
.filter-bar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filter-bar > div { min-width: 180px; }
.filter-bar .grow { flex: 1; }
.filter-bar input, .filter-bar select, .filter-bar button { margin-bottom: 0; }

/* A whole row opens its ticket, not just the number. */
.tickets-table tbody tr { cursor: pointer; }
.tickets-table tbody tr:hover td { background: #faf6f5; }
.tickets-table tr.status-closed td { color: var(--muted); }
.tickets-table td.problem { min-width: 260px; }

.status-switch { display: flex; gap: 8px; margin: 0; }
.status-switch button { text-transform: capitalize; }
.status-switch button[disabled] { opacity: 1; cursor: default; }

/* The ticket: what's wrong and what's been said on the left, who and where
   on the right; one column on a phone. */
.ticket-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 800px) { .ticket-layout { grid-template-columns: 1fr; } }
.description { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; }
.facts { width: 100%; }
.facts th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.82rem; white-space: nowrap; padding-right: 12px; vertical-align: top; width: 1%; }
.facts td, .facts th { padding-top: 6px; padding-bottom: 6px; }
.comment { border-left: 3px solid var(--border); padding: 4px 0 4px 12px; margin-bottom: 14px; }
.comment-reply { border-left-color: #274690; }
/* The member's side of the conversation, set off from the club's. */
.comment-member { border-left-color: var(--gold); background: #fffaf2; border-radius: 0 6px 6px 0; }
.badge-reply { background: #e8eefb; color: #274690; }
.badge-member { background: #fff4d9; color: #8a5a00; text-transform: none; }
.comment-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }

/* Three tiles always sit in one row - on a phone they'd otherwise stack and
   push the list off the first screen. */
.stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.view-switch { flex-wrap: wrap; }
@media (max-width: 640px) {
  .stat { padding: 10px 12px; }
  .stat-value { font-size: 1.2rem; }
}