/* AQUA theme, after aqua.net: navy text, AQUA blue accents, pale blue surfaces, Inter and Exo 2. */
@font-face { font-family: Inter; font-weight: 400 700; font-display: swap; src: url(/fonts/inter.woff2) format('woff2'); }
@font-face { font-family: 'Exo 2'; font-weight: 600 800; font-display: swap; src: url(/fonts/exo2.woff2) format('woff2'); }

:root {
  --navy: #022173;          /* palatinate-blue-750: text */
  --navy-deep: #02144f;
  --blue: #009ad6;          /* aqua-blue-500: buttons, links */
  --blue-dark: #0082b5;
  --blue-bright: #00c7f9;   /* aqua-blue-300: brand accent */
  --blue-pale: #f7fdff;     /* aqua-blue-50: page */
  --blue-tint: #e8f8fe;
  --grey-50: #f2f5f9; --grey-100: #dde3ec; --grey-200: #c0cad9; --grey-500: #5a6980;
  --green: #00a398; --red: #e92424; --amber: #e0a800;
  --radius: 1.5rem;
  --shadow: 0 0 16px #00000014;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--blue-pale); color: var(--navy); font: 15px/1.5 Inter, system-ui, sans-serif; }
h1, h2, h3 { font-family: 'Exo 2', Inter, sans-serif; font-weight: 700; line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.1rem; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.muted { color: var(--grey-500); }

/* Test environments are impossible to miss. */
#environment { margin: 0; padding: 0.5em 1em; background: var(--amber); color: var(--navy-deep); font-weight: 700; text-align: center; }

/* Header bar */
.topbar { display: flex; align-items: center; gap: 1em; padding: 0.9em 1.5em; background: var(--navy); color: #fff; }
.brand { font-family: 'Exo 2', sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em; color: #fff; }
.brand span { color: var(--blue-bright); }
.topbar .spacer { flex: 1; }
.topbar a { color: #fff; }
#account { display: flex; align-items: center; gap: 0.75em; margin: 0; font-size: 0.9rem; }
#account button.secondary { color: #fff; border-color: #ffffff55; padding: 0.4em 1.1em; }
#account button.secondary:hover { background: #ffffff14; }

main { max-width: 1200px; margin: 0 auto; padding: 1.5em; }
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5em; margin-bottom: 1.25em; }

/* Controls */
label { display: block; font-weight: 600; font-size: 0.9rem; margin: 1em 0 0.35em; }
input:where(:not([type=file]):not([type=hidden])), select, textarea {
  font: inherit; color: inherit; background: #fff; border: 1px solid var(--grey-200); border-radius: 0.75rem;
  padding: 0.6em 0.8em; width: 100%; max-width: 40em;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px #009ad629; }
input[type=file] { font: inherit; font-size: 0.9rem; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; cursor: pointer; margin-right: 0.75em;
  border: 1px solid var(--blue); border-radius: 999px; background: transparent; color: var(--blue); padding: 0.4em 1.1em; }
input[type=file]::file-selector-button:hover { background: var(--blue-tint); }
button, .button {
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--blue); border-radius: 999px;
  background: var(--blue); color: #fff; padding: 0.55em 1.3em; display: inline-block; line-height: 1.3;
}
button:hover, .button:hover { background: var(--blue-dark); border-color: var(--blue-dark); text-decoration: none; }
button:disabled { opacity: 0.5; cursor: default; }
button.secondary, .button.secondary { background: transparent; color: var(--blue); }
button.secondary:hover, .button.secondary:hover { background: var(--blue-tint); }
button.danger { background: transparent; color: var(--red); border-color: var(--red); }
button.danger:hover { background: #ff2e2e0a; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
.row > input { width: auto; flex: 1 1 14em; max-width: 24em; }
.row > select { width: auto; flex: 0 0 auto; }

/* Customer form */
.form-page { max-width: 44em; }
.form-page .card { padding: 2em; }
#message-hint { margin: 0 0 0.5em; max-width: 40em; font-size: 0.9rem; color: var(--grey-500); }
#ticket-form button[type=submit] { margin-top: 1.5em; }
#form-status { color: var(--red); }
#receipt { font-size: 1.1rem; font-weight: 600; }

/* Ticket list */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75em; margin-bottom: 1em; }
.toolbar h1 { margin: 0 auto 0 0; }
#search { display: flex; flex-wrap: wrap; gap: 0.5em; flex: 1 1 32em; }
#search input { flex: 1 1 20em; max-width: none; }
#search select { width: auto; }
#staff-status { color: var(--grey-500); margin: 0.25em 0 0.75em; }
#mail-status { display: inline-block; margin: 0 0 1em; padding: 0.25em 0.8em; border-radius: 999px; background: var(--grey-50); color: var(--grey-500); font-size: 0.85rem; }
#mail-status.live { background: #00a39829; color: #006b64; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey-500); font-weight: 600; padding: 0.6em 0.75em; border-bottom: 1px solid var(--grey-100); }
td { padding: 0.75em; border-bottom: 1px solid var(--grey-50); vertical-align: middle; }
#ticket-list tr:hover td { background: var(--blue-pale); }
#ticket-list td:first-child { color: var(--grey-500); font-variant-numeric: tabular-nums; }
#ticket-list td.subject a { font-weight: 600; color: var(--navy); }
.table-wrap { overflow-x: auto; }
#pagination { display: flex; align-items: center; gap: 0.75em; justify-content: center; margin-top: 1em; }

/* Status badges */
.badge { display: inline-block; padding: 0.15em 0.7em; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.badge.new { background: #009ad629; color: var(--blue-dark); }
.badge.open { background: #f7b90029; color: #8a6800; }
.badge.pending { background: var(--grey-50); color: var(--grey-500); }
.badge.solved { background: #00a39829; color: #006b64; }
.badge.closed { background: var(--grey-100); color: var(--grey-500); }
.badge.suspended { background: #ff2e2e29; color: var(--red); }

/* Ticket view */
.back { display: inline-block; margin-bottom: 0.75em; }
.ticket-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75em; }
.ticket-head h2 { margin: 0; }
.ticket-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20em; gap: 1.25em; align-items: start; }
@media (max-width: 900px) { .ticket-grid { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4em 1em; margin: 0; font-size: 0.9rem; }
.facts dt { color: var(--grey-500); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.side .row { margin-bottom: 0.75em; }
.side label { margin-top: 0; }
.suspended-box { background: #ff2e2e0a; border: 1px solid #ff2e2e29; border-radius: 1rem; padding: 1em; margin: 1em 0 0; }

/* Conversation */
.thread { display: flex; flex-direction: column; gap: 1em; }
.message { max-width: min(80%, 70ch); background: #fff; border: 1px solid var(--grey-100); border-radius: 1.25rem; padding: 0.9em 1.1em; }
.message.outgoing { margin-left: auto; background: var(--blue-tint); border-color: #009ad629; }
.message.internal { margin-left: auto; background: #f7b9000a; border: 1px dashed var(--amber); }
.message-meta { font-size: 0.8rem; color: var(--grey-500); margin-bottom: 0.4em; }
.message-meta strong { color: var(--navy); }
.message-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.attachment { margin-top: 0.75em; }
.attachment img, .attachment video { display: block; max-width: 100%; max-height: 360px; border-radius: 0.75rem; margin-bottom: 0.3em; }
.attachment a { font-size: 0.85rem; }

/* Raw data stays available, out of the way */
details.raw { margin-top: 0.5em; font-size: 0.8rem; }
details.raw summary { cursor: pointer; color: var(--grey-500); list-style: none; display: inline; }
details.raw summary::-webkit-details-marker { display: none; }
details.raw summary:hover { color: var(--blue); }
details.raw pre { background: var(--grey-50); border-radius: 0.75rem; padding: 0.75em; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; }

/* Status timeline */
.timeline { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.timeline li { position: relative; padding: 0 0 0.75em 1.25em; }
.timeline li::before { content: ''; position: absolute; left: 0.2em; top: 0.45em; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--blue-bright); }
.timeline li:not(:last-child)::after { content: ''; position: absolute; left: 0.42em; top: 1.1em; bottom: 0; width: 1px; background: var(--grey-100); }

/* Reply box */
.reply textarea { max-width: none; }
.reply label:first-child { margin-top: 0; }
.reply .row { margin-top: 0.75em; }
.reply .feedback { color: var(--red); margin: 0.5em 0 0; }

/* Sign-in */
.signin { max-width: 26em; margin: 12vh auto; text-align: center; }
.signin p { color: var(--grey-500); }