/* ============================================================
   Site Support Issues
   Front-end issue form, issue board, ticket details, comments,
   issue attachments, and issue-related admin field layouts.
   ============================================================ */

:root {
	--ss-issue-surface: color-mix(in oklab, var(--page-bg, #0f1a22), white 2%);
	--ss-issue-surface-soft: color-mix(in oklab, var(--page-bg, #0f1a22), white 4%);
	--ss-issue-line: color-mix(in oklab, var(--page-text, #e6eef3), transparent 85%);
	--ss-issue-line-strong: color-mix(in oklab, var(--page-text, #e6eef3), transparent 75%);
	--ss-issue-table-head: color-mix(in oklab, var(--header-bg, #0c141b), white 8%);
	--ss-issue-table-row-hover: color-mix(in oklab, var(--page-text, #e6eef3), transparent 96%);
	--ss-issue-input-bg: color-mix(in oklab, var(--page-bg, #0f1a22), white 4%);
	--ss-issue-input-text: var(--page-text, #e6eef3);
	--ss-issue-comment-input-bg: color-mix(in srgb, var(--page-text, #e6eef3) 72%, var(--header-bg, #0c141b) 28%);
	--ss-issue-comment-input-text: #000000;
	--ss-issue-attachment-bg: #ffffff;
	--ss-issue-attachment-border: #e2e8f0;
	--ss-status-new: var(--primary, #6aa0ff);
	--ss-status-confirmed: var(--accent, #ffce6a);
	--ss-status-in-progress: var(--secondary, #7bd389);
	--ss-status-fixed: #c263ff;
	--ss-status-closed: #8aa3b7;
	--ss-status-wont-fix: #ff6a6a;
}

/* ============================================================
   Shared issue boxes / form wrappers
   ============================================================ */

.ss-issue-box,
.ss-issue-form,
.ss-thankyou-box {
	background: var(--ss-issue-surface);
	border: 1px solid var(--ss-issue-line);
	border-radius: 12px;
	padding: clamp(1rem, 3vw, 1.5rem);
	margin: 1.5rem auto;
	color: var(--page-text);
}

.ss-thankyou-box {
	text-align: center;
}

.ss-issue-form .req,
.ss-label .req {
	color: var(--accent);
}

/* ============================================================
   Issue page headings
   Formerly: .mt-br-head / .mt-repbug-head
   ============================================================ */

.ss-br-head,
.ss-repbug-head {
	font-size: clamp(2rem, 5vw + 0.5rem, 3.3rem);
	padding: 50px 0 10px 0;
}

.ss-br-subhead,
.ss-repbug-subhead {
	margin-bottom: 70px !important;
	padding: 0;
	font-size: clamp(1em, 1vw + 0.5rem, 1.5rem);
}

/* ============================================================
   Issue form layout
   Formerly: .mt-grid / .mt-actions / .mt-label
   ============================================================ */

.ss-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

.ss-grid label {
	display: grid;
	gap: .35rem;
}

.ss-grid input[type="text"],
.ss-grid input[type="email"],
.ss-grid input[type="url"],
.ss-grid input[type="password"],
.ss-grid select,
.ss-grid textarea {
	background: var(--ss-issue-input-bg);
	color: var(--ss-issue-input-text);
	border: 1px solid var(--ss-issue-line);
	border-radius: 8px;
	padding: .65rem .75rem;
}

.ss-grid input[type="text"]:focus,
.ss-grid input[type="email"]:focus,
.ss-grid input[type="url"]:focus,
.ss-grid input[type="password"]:focus,
.ss-grid select:focus,
.ss-grid textarea:focus {
	color: var(--ss-issue-input-text);
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}

.ss-grid input::placeholder,
.ss-grid textarea::placeholder {
	opacity: .6;
}

.ss-label {
	display: inline-flex;
	gap: .25rem;
	align-items: baseline;
}

.ss-actions {
	display: flex;
	justify-content: center;
	margin-top: .75rem;
}

.ss-actions .ss-btn,
.ss-actions .btn {
	border-radius: 999px;
	padding: .8rem 1.2rem;
	text-decoration: none;
}

.ss-btn.ss-btn-secondary,
.ss-actions .btn.btn-secondary {
	background: var(--secondary);
	color: #ffffff;
	border: none;
}

.ss-btn.ss-btn-secondary:hover,
.ss-btn.ss-btn-secondary:focus,
.ss-actions .btn.btn-secondary:hover,
.ss-actions .btn.btn-secondary:focus {
	background: var(--secondary-hover);
	color: #ffffff;
	cursor: pointer;
}

/* ============================================================
   Issue board
   ============================================================ */

.ss-issue-board {
	--ss-pill-bg: color-mix(in oklab, var(--page-text, #e6eef3), transparent 94%);
	--ss-line: var(--ss-issue-line-strong);
	--ss-issue-border: var(--ss-issue-line-strong);
	max-width: 1200px;
}

.ss-issue-board .ss-head {
	margin: 0 0 5px 0;
	text-align: center;
}

.ss-issue-board .ss-head h2 {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: .2px;
}

.ss-issue-board .ss-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px 0;
}

.ss-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3px;
	background: transparent;
}

.ss-pill .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: .9;
}

.ss-pill:hover,
.ss-pill:focus {
	background-color: color-mix(in oklab, currentColor 12%, transparent);
}

.ss-chip {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	border: 1.4px solid currentColor;
	background: color-mix(in oklab, currentColor 12%, transparent);
	white-space: nowrap;
}

/* Status palette */

.ss-color-new {
	color: var(--ss-status-new);
}

.ss-color-confirmed {
	color: var(--ss-status-confirmed);
}

.ss-color-in-progress {
	color: var(--ss-status-in-progress);
}

.ss-color-fixed {
	color: var(--ss-status-fixed);
}

.ss-color-closed {
	color: var(--ss-status-closed);
}

.ss-color-wont-fix {
	color: var(--ss-status-wont-fix);
}

/* ============================================================
   Issue board table
   ============================================================ */

.ss-table-wrap {
	border-radius: 10px;
	overflow: hidden;
	background: var(--ss-pill-bg);
	border: 1px solid var(--ss-line);
}

.ss-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.ss-table thead {
	background: var(--ss-issue-table-head);
}

.ss-table thead th {
	font-weight: 700;
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--ss-line);
}

.ss-table tbody td {
	padding: 12px 14px;
	border-top: 1px solid color-mix(in oklab, var(--page-text, #e6eef3), transparent 96%);
}

.ss-table tbody tr.ss-details td {
	background: transparent;
}

.ss-row {
	cursor: pointer;
}

.ss-row:hover td {
	background-color: var(--ss-issue-table-row-hover);
}

.ss-row-title .ss-acc-btn {
	all: unset;
	cursor: pointer;
}

.ss-details td {
	background: color-mix(in oklab, black 15%, transparent);
}

.ss-details[hidden] {
	display: none;
}

/* Sortable table headers */

.ss-table th.sortable {
	cursor: pointer;
	user-select: none;
	position: relative;
}

.ss-table th.sortable::after {
	content: "⇅";
	font-size: 12px;
	opacity: .5;
	margin-left: .5rem;
}

.ss-table th.sortable[aria-sort="ascending"]::after {
	content: "↑";
	opacity: .9;
}

.ss-table th.sortable[aria-sort="descending"]::after {
	content: "↓";
	opacity: .9;
}

/* ============================================================
   Ticket details accordion
   ============================================================ */

.ss-details-inner {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 18px;
	padding: 16px;
	background: var(--ss-issue-surface);
}

.ss-details-col.full {
	grid-column: 1/-1;
}

.ss-details-col h4 {
	margin: .25rem 0 .5rem;
	font-size: 16px;
}

.ss-details-col h5 {
	margin: .75rem 0 .25rem;
	font-size: 14px;
	color: var(--page-text);
}

.ss-meta {
	list-style: none;
	padding: 0;
	margin: .5rem 0 0;
}

.ss-meta li {
	margin: .15rem 0;
}

.ss-muted {
	opacity: .75;
}

/* ============================================================
   Comments
   ============================================================ */

.ss-comments {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-comment {
	border: 1px solid var(--ss-issue-line);
	border-radius: 8px;
	padding: .5rem .75rem;
	margin: .5rem 0;
	background: color-mix(in oklab, var(--page-bg), white 1%);
}

.ss-comment-head {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: .15rem;
	font-size: 13px;
	opacity: .9;
}

.ss-comment-body p {
	margin: .35rem 0;
}

.ss-comment-form textarea {
	width: 100%;
	border: 1px solid var(--ss-issue-border);
	border-radius: 8px;
	background: var(--ss-issue-comment-input-bg);
	color: var(--ss-issue-comment-input-text);
	padding: .6rem;
}

/* ============================================================
   Pager
   ============================================================ */

.ss-pager {
	margin: 12px 0;
	display: flex;
	gap: 8px;
}

.ss-pager a {
	display: inline-block;
	padding: .35rem .6rem;
	border: 1px solid color-mix(in oklab, var(--page-text), transparent 80%);
	border-radius: 6px;
	text-decoration: none;
}

.ss-pager a.active {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

/* ============================================================
   Issue chips
   ============================================================ */

.ss-issue-chips {
	margin: 10px 0;
	text-align: center;
}

.ss-issue-chips:hover {
	cursor: pointer;
}

/* ============================================================
   Issue attachments / thumbnails
   Formerly: .mt-issue-thumb / .mt-issue-thumbs
   ============================================================ */

.ss-issue-thumb {
	border: 1px solid var(--ss-issue-attachment-border);
	border-radius: 8px;
	padding: 6px;
	background: var(--ss-issue-attachment-bg);
}

.ss-issue-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ss-issue-thumbs a {
	display: block;
	border: 1px solid var(--ss-issue-attachment-border);
	border-radius: 8px;
	background: var(--ss-issue-attachment-bg);
	padding: 6px;
}

.ss-issue-thumbs img {
	display: block;
	max-width: 140px;
	height: auto;
}

/* ============================================================
   Issue admin field grid
   Formerly: .mt-admin-grid
   ============================================================ */

.ss-admin-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ss-admin-grid .full {
	grid-column: 1 / -1;
}

.ss-admin-grid label {
	display: block;
	font-weight: 600;
	margin: .25rem 0;
}

.ss-admin-grid textarea {
	min-height: 120px;
	width: 100%;
}

.ss-admin-grid input[type="text"],
.ss-admin-grid select {
	width: 100%;
}

/* ============================================================
   Responsive
   ============================================================ */

@media screen and (max-width: 480px) {
	.ss-issue-box,
	.ss-issue-form,
	.ss-thankyou-box {
		max-width: 420px;
	}

	.ss-table-wrap {
		height: 720px;
		overflow: scroll;
	}
}

@media screen and (min-width: 768px) {
	.ss-issue-box,
	.ss-issue-form,
	.ss-thankyou-box {
		max-width: 600px;
	}

	.ss-grid {
		grid-template-columns: 1fr 1fr;
	}

	.ss-grid label:nth-child(6),
	.ss-grid label:nth-child(7),
	.ss-grid label:nth-child(8),
	.ss-grid label:nth-child(9) {
		grid-column: 1 / -1;
	}

	.ss-grid label[style*="grid-column:1/-1"] {
		grid-column: 1/-1 !important;
	}
}

@media screen and (min-width: 990px) {
	.ss-issue-box,
	.ss-issue-form,
	.ss-thankyou-box {
		max-width: 900px;
	}

	.ss-pill {
		margin-right: 10px;
	}
}

@media screen and (min-width: 1280px) {
	.ss-issue-board {
		margin: 40px auto;
	}
}