﻿/* =========================================================
   Transparency Ticket Tracker — Public Styles
   Dark aesthetic to match alt/adult site themes
   ========================================================= */

:root {
	--tkt-bg:       #0e0e0e;
	--tkt-bg2:      #141414;
	--tkt-bg3:      #1a1a1a;
	--tkt-border:   #2a2a2a;
	--tkt-text:     #ccc;
	--tkt-muted:    #777;
	--tkt-accent:   #c00;
	--tkt-open:     #5cb85c;
	--tkt-pending:  #e6a817;
	--tkt-resolved: #5bc0de;
	--tkt-naction:  #888;
	--tkt-referred: #d9534f;
}

/* ── Form wrapper ─────────────────────────────────────────── */

.tkt-form-wrap {
	max-width: 680px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--tkt-text);
}

.tkt-form-header {
	margin-bottom: 28px;
}
.tkt-form-header .tkt-form-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tkt-accent);
	margin-bottom: 8px;
}
.tkt-form-header h2 {
	margin: 0 0 10px;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
}
.tkt-form-header p {
	margin: 0;
	color: var(--tkt-muted);
	line-height: 1.6;
}

/* ── Notices ──────────────────────────────────────────────── */

.tkt-notice {
	padding: 14px 18px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.5;
}
.tkt-notice--error   { background: rgba(192,0,0,.15); border: 1px solid rgba(192,0,0,.4); color: #f99; }
.tkt-notice--success { background: rgba(92,184,92,.12); border: 1px solid rgba(92,184,92,.35); color: #9d9; }
.tkt-notice--info    { background: rgba(91,192,222,.1); border: 1px solid rgba(91,192,222,.3); color: #9cf; }
.tkt-notice--urgent  { background: rgba(192,0,0,.2); border: 1px solid rgba(192,0,0,.5); color: #fbb; font-weight: 600; }
.tkt-notice a        { color: inherit; text-decoration: underline; }

/* ── Form fields ──────────────────────────────────────────── */

.tkt-form { display: flex; flex-direction: column; gap: 20px; }

.tkt-field { display: flex; flex-direction: column; gap: 6px; }
.tkt-field label {
	font-size: 13px;
	font-weight: 600;
	color: #bbb;
	letter-spacing: .3px;
}
.tkt-required { color: var(--tkt-accent); }

.tkt-field input[type="text"],
.tkt-field input[type="email"],
.tkt-field input[type="url"],
.tkt-field select,
.tkt-field textarea {
	background: var(--tkt-bg2);
	border: 1px solid var(--tkt-border);
	border-radius: 4px;
	color: #e0e0e0;
	font-size: 14px;
	padding: 10px 14px;
	transition: border-color .15s;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}
.tkt-field input:focus,
.tkt-field select:focus,
.tkt-field textarea:focus {
	outline: none;
	border-color: #555;
}
.tkt-field select option { background: #1a1a1a; }
.tkt-field textarea { resize: vertical; }
.tkt-help { font-size: 12px; color: var(--tkt-muted); margin: 0; }

.tkt-radio-group { display: flex; flex-direction: column; gap: 10px; }
.tkt-radio-group label { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--tkt-text); font-weight: normal; cursor: pointer; }
.tkt-radio-group input[type="radio"] { margin-top: 2px; flex-shrink: 0; }

.tkt-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--tkt-text); cursor: pointer; line-height: 1.5; font-weight: normal; }
.tkt-checkbox input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }

.tkt-field-group {
	background: var(--tkt-bg2);
	border: 1px solid var(--tkt-border);
	border-radius: 6px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tkt-field-group h3 {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--tkt-muted);
}
.tkt-field-group .tkt-field label { font-size: 13px; }

/* ── Buttons ──────────────────────────────────────────────── */

.tkt-btn {
	display: inline-block;
	background: var(--tkt-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 12px 26px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s;
	align-self: flex-start;
}
.tkt-btn:hover { background: #a00; color: #fff; }

.tkt-btn-add {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px dashed var(--tkt-border);
	border-radius: 4px;
	color: var(--tkt-muted);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	cursor: pointer;
	margin-top: 8px;
	transition: border-color .15s, color .15s;
}
.tkt-btn-add:hover { border-color: #555; color: #ccc; }

.tkt-url-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.tkt-url-row input[type="url"] {
	flex: 1;
	background: var(--tkt-bg2);
	border: 1px solid var(--tkt-border);
	border-radius: 4px;
	color: #e0e0e0;
	font-size: 14px;
	padding: 10px 14px;
	font-family: monospace;
	box-sizing: border-box;
	transition: border-color .15s;
}
.tkt-url-row input[type="url"]:focus { outline: none; border-color: #555; }
.tkt-url-remove {
	background: transparent;
	border: 1px solid #333;
	border-radius: 4px;
	color: #666;
	font-size: 14px;
	line-height: 1;
	padding: 8px 10px;
	cursor: pointer;
	flex-shrink: 0;
	transition: border-color .15s, color .15s;
}
.tkt-url-remove:hover { border-color: #c00; color: #f99; }

.tkt-btn--outline {
	background: transparent;
	border: 1px solid var(--tkt-accent);
	color: var(--tkt-accent);
}
.tkt-btn--outline:hover { background: rgba(192,0,0,.1); }

/* ── Ticket display (confirmed state) ─────────────────────── */

.tkt-ticket-display {
	background: var(--tkt-bg2);
	border: 1px solid var(--tkt-border);
	border-radius: 6px;
	padding: 28px;
	text-align: center;
	margin: 24px 0;
}
.tkt-ticket-label {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tkt-muted);
	margin-bottom: 8px;
}
.tkt-ticket-id {
	font-size: 36px;
	font-weight: 900;
	font-family: monospace;
	color: #fff;
	letter-spacing: 4px;
}
.tkt-ticket-sub {
	font-size: 13px;
	color: var(--tkt-muted);
	margin-top: 8px;
}

.tkt-form-footer { margin-top: 24px; color: var(--tkt-muted); font-size: 13px; line-height: 1.6; }
.tkt-form-footer a { color: var(--tkt-accent); }

/* ── Transparency report ──────────────────────────────────── */

.tkt-transparency {
	max-width: 960px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--tkt-text);
}

.tkt-tr-header-msg {
	background: var(--tkt-bg2);
	border: 1px solid var(--tkt-border);
	border-radius: 6px;
	padding: 20px 24px;
	margin-bottom: 16px;
	line-height: 1.7;
	color: var(--tkt-text);
}
.tkt-tr-header-msg a    { color: var(--tkt-accent); }
.tkt-tr-header-msg p    { margin: 0 0 12px; }
.tkt-tr-header-msg p:last-child { margin-bottom: 0; }
.tkt-tr-header-msg h3,
.tkt-tr-header-msg h4   { color: #fff; margin: 0 0 8px; }

.tkt-tr-header {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
	background: var(--tkt-bg2);
	border: 1px solid var(--tkt-border);
	border-radius: 8px;
	padding: 32px;
	margin-bottom: 20px;
}
@media (max-width: 700px) { .tkt-tr-header { grid-template-columns: 1fr; } }

.tkt-tr-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tkt-accent);
	margin-bottom: 10px;
}
.tkt-tr-header h2 { margin: 0 0 10px; font-size: 28px; font-weight: 800; color: #fff; }
.tkt-tr-header p { margin: 0; color: var(--tkt-muted); line-height: 1.6; font-size: 14px; }

.tkt-tr-header-right { text-align: right; }
.tkt-tr-stat-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--tkt-muted); margin-bottom: 4px; }
.tkt-tr-stat-number { font-size: 52px; font-weight: 900; color: #fff; line-height: 1; }
.tkt-tr-stat-sub { font-size: 13px; color: var(--tkt-muted); margin-bottom: 24px; }

.tkt-tr-search-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--tkt-muted); margin-bottom: 8px; }
.tkt-tr-search-form { display: flex; gap: 8px; }
.tkt-tr-search-input {
	flex: 1;
	background: var(--tkt-bg3);
	border: 1px solid var(--tkt-border);
	border-radius: 4px;
	color: #e0e0e0;
	padding: 9px 12px;
	font-size: 13px;
	font-family: inherit;
}
.tkt-tr-search-input:focus { outline: none; border-color: #555; }
.tkt-tr-search-btn {
	background: #fff;
	color: #000;
	border: none;
	border-radius: 4px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.tkt-tr-search-btn:hover { background: #ddd; }

/* ── Audit records ────────────────────────────────────────── */

.tkt-tr-log-header { margin: 28px 0 12px; }
.tkt-tr-log-header h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #fff; }
.tkt-tr-pagination-info { margin: 0; font-size: 13px; color: var(--tkt-muted); }
.tkt-tr-empty { color: var(--tkt-muted); }

.tkt-audit-record {
	background: var(--tkt-bg2);
	border: 1px solid var(--tkt-border);
	border-radius: 6px;
	padding: 20px 24px;
	margin-bottom: 12px;
}

.tkt-audit-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.tkt-audit-id {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--tkt-accent);
	text-transform: uppercase;
}
.tkt-audit-type { font-size: 12px; color: var(--tkt-muted); }

.tkt-audit-title { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: #fff; }

.tkt-audit-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tkt-audit-chip {
	font-size: 12px;
	color: var(--tkt-text);
	background: var(--tkt-bg3);
	border: 1px solid var(--tkt-border);
	border-radius: 20px;
	padding: 3px 12px;
}
.tkt-audit-chip--resolution { background: rgba(91,192,222,.1); border-color: rgba(91,192,222,.3); color: #9cf; }

/* Status badges (public) */
.tkt-pub-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
}
.tkt-pub-badge--open      { background: rgba(92,184,92,.15);  border: 1px solid rgba(92,184,92,.4);   color: var(--tkt-open); }
.tkt-pub-badge--pending   { background: rgba(230,168,23,.12); border: 1px solid rgba(230,168,23,.35); color: var(--tkt-pending); }
.tkt-pub-badge--resolved  { background: rgba(91,192,222,.12); border: 1px solid rgba(91,192,222,.3);  color: var(--tkt-resolved); }
.tkt-pub-badge--no_action { background: rgba(136,136,136,.12); border: 1px solid rgba(136,136,136,.3); color: var(--tkt-naction); }
.tkt-pub-badge--referred  { background: rgba(217,83,79,.12);  border: 1px solid rgba(217,83,79,.3);   color: var(--tkt-referred); }

/* ── Lifecycle timeline ───────────────────────────────────── */

.tkt-lc-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--tkt-muted);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.tkt-lc-events { display: flex; flex-direction: column; gap: 6px; }

.tkt-lc-event {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--tkt-bg3);
	border-radius: 4px;
	padding: 10px 14px;
	flex-wrap: wrap;
}
.tkt-lc-status {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	min-width: 90px;
}
.tkt-lc-event--open      .tkt-lc-status { color: var(--tkt-open); }
.tkt-lc-event--pending   .tkt-lc-status { color: var(--tkt-pending); }
.tkt-lc-event--resolved  .tkt-lc-status { color: var(--tkt-resolved); }
.tkt-lc-event--no_action .tkt-lc-status { color: var(--tkt-naction); }
.tkt-lc-event--referred  .tkt-lc-status { color: var(--tkt-referred); }

.tkt-lc-transition { font-size: 12px; color: var(--tkt-muted); flex: 1; }
.tkt-lc-time { font-size: 12px; color: #555; margin-left: auto; white-space: nowrap; }

/* ── Pagination ───────────────────────────────────────────── */

.tkt-tr-pager { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 16px 0; }
.tkt-pager-btn {
	background: var(--tkt-bg2);
	border: 1px solid var(--tkt-border);
	color: var(--tkt-text);
	padding: 8px 18px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 14px;
}
.tkt-pager-btn:hover { border-color: #555; color: #fff; }
.tkt-pager-info { color: var(--tkt-muted); font-size: 14px; }

.tkt-tr-single { margin-bottom: 28px; }

/* ── Ticket lookup page ───────────────────────────────────── */

.tkt-lookup {
	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--tkt-text);
}

.tkt-lookup-search {
	background: var(--tkt-bg2);
	border: 1px solid var(--tkt-border);
	border-radius: 8px;
	padding: 28px 32px;
	margin-bottom: 24px;
}

.tkt-lookup-search-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tkt-accent);
	margin-bottom: 14px;
}

.tkt-lookup-form {
	display: flex;
	gap: 10px;
}

.tkt-lookup-input {
	flex: 1;
	background: var(--tkt-bg3);
	border: 1px solid var(--tkt-border);
	border-radius: 4px;
	color: #e0e0e0;
	font-size: 15px;
	padding: 11px 16px;
	font-family: monospace;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-sizing: border-box;
}
.tkt-lookup-input:focus { outline: none; border-color: #555; }

.tkt-lookup-btn {
	background: #fff;
	color: #000;
	border: none;
	border-radius: 4px;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
.tkt-lookup-btn:hover { background: #ddd; }

.tkt-lookup-hint {
	font-size: 12px;
	color: var(--tkt-muted);
	margin: 10px 0 0;
}

.tkt-lookup-result {
	background: var(--tkt-bg2);
	border: 1px solid var(--tkt-border);
	border-radius: 8px;
	padding: 28px 32px;
}

.tkt-lookup-result-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.tkt-lookup-result-id {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--tkt-accent);
	text-transform: uppercase;
}

.tkt-lookup-result-type {
	font-size: 12px;
	color: var(--tkt-muted);
}

.tkt-lookup-status-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.tkt-lookup-status-desc {
	font-size: 14px;
	color: var(--tkt-text);
	line-height: 1.4;
}

.tkt-lookup-dates {
	font-size: 13px;
	color: var(--tkt-muted);
	margin-bottom: 24px;
	display: flex;
	gap: 10px;
}

.tkt-lookup-lc { margin-bottom: 28px; }

.tkt-lookup-thread { margin: 24px 0; }

.tkt-lookup-reply { margin-top: 28px; }

.tkt-lookup-reply-input {
	width: 100%;
	background: var(--tkt-bg3);
	border: 1px solid var(--tkt-border);
	border-radius: 4px;
	color: #e0e0e0;
	font-size: 14px;
	padding: 12px 14px;
	font-family: inherit;
	resize: vertical;
	box-sizing: border-box;
}
.tkt-lookup-reply-input:focus { outline: none; border-color: #555; }

.tkt-lookup-reply-hint {
	font-size: 13px;
	color: var(--tkt-muted);
	margin-top: 20px;
	padding: 14px 18px;
	background: var(--tkt-bg3);
	border: 1px solid var(--tkt-border);
	border-radius: 4px;
}

/* ── Conversation thread (shared public + admin) ──────────── */

.tkt-thread { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }

.tkt-thread-msg {
	border-radius: 6px;
	padding: 14px 18px;
}

.tkt-thread-msg--outbound {
	background: rgba(192,0,0,.08);
	border: 1px solid rgba(192,0,0,.2);
	margin-left: 24px;
}

.tkt-thread-msg--inbound {
	background: var(--tkt-bg3);
	border: 1px solid var(--tkt-border);
	margin-right: 24px;
}

.tkt-thread-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.tkt-thread-dir {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--tkt-muted);
}

.tkt-thread-msg--outbound .tkt-thread-dir { color: #c66; }

.tkt-thread-time {
	font-size: 11px;
	color: #555;
}

.tkt-thread-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tkt-text);
}

/* ── Selfie identity verification block (Layer 2 form) ──────── */

.tkt-selfie-block {
	background: var(--tkt-bg2);
	border: 1px solid rgba(192,0,0,.35);
	border-radius: 6px;
	padding: 24px 28px;
	margin-bottom: 24px;
}

.tkt-selfie-header { margin-bottom: 20px; }

.tkt-selfie-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #c66;
	margin-bottom: 8px;
}

.tkt-selfie-header p {
	margin: 0;
	font-size: 14px;
	color: var(--tkt-muted);
	line-height: 1.6;
}

.tkt-selfie-code-wrap {
	background: var(--tkt-bg3);
	border: 1px solid var(--tkt-border);
	border-radius: 6px;
	padding: 20px 24px;
	text-align: center;
	margin-bottom: 20px;
}

.tkt-selfie-code-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tkt-muted);
	margin-bottom: 12px;
}

.tkt-selfie-code {
	font-family: monospace;
	font-size: 36px;
	font-weight: 800;
	letter-spacing: 10px;
	color: #fff;
	padding: 8px 0;
}

.tkt-selfie-code-wrap .tkt-help {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--tkt-muted);
}

/* ── Verification code in ticket lookup ─────────────────────── */

.tkt-lookup-vcode-block {
	background: var(--tkt-bg3);
	border: 1px solid var(--tkt-border);
	border-radius: 6px;
	padding: 20px 24px;
	margin-bottom: 24px;
	text-align: center;
}

.tkt-lookup-vcode {
	font-family: monospace;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: 8px;
	color: #fff;
	padding: 10px 0;
}
