/**
 * Alles Wurst Support Tickets – Frontend (dunkles Theme)
 */

.awst-wrap {
	--awst-bg: #1a1a1e;
	--awst-bg-card: #242429;
	--awst-bg-input: #2d2d33;
	--awst-border: #3a3a42;
	--awst-text: #e8e8ec;
	--awst-text-muted: #9a9aa5;
	--awst-primary: #e85d2c;
	--awst-primary-hover: #f07040;
	--awst-success: #3dba6a;
	--awst-error: #e74c5c;
	--awst-info: #4a9eff;
	max-width: 960px;
	margin: 0 auto;
	padding: 1.5rem;
	color: var(--awst-text);
	font-family: inherit;
}

.awst-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.awst-header h2 {
	margin: 0;
	font-size: 1.5rem;
	color: var(--awst-text);
}

/* Buttons */
.awst-btn {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}

.awst-btn-primary {
	background: var(--awst-primary);
	color: #fff;
}

.awst-btn-primary:hover {
	background: var(--awst-primary-hover);
	color: #fff;
}

.awst-btn-secondary {
	background: var(--awst-bg-input);
	color: var(--awst-text);
	border: 1px solid var(--awst-border);
}

.awst-btn-secondary:hover {
	background: var(--awst-border);
	color: var(--awst-text);
}

/* Notices */
.awst-notice {
	padding: 1rem 1.25rem;
	border-radius: 6px;
	margin-bottom: 1.5rem;
}

.awst-notice p {
	margin: 0;
}

.awst-notice-success {
	background: rgba(61, 186, 106, 0.15);
	border: 1px solid var(--awst-success);
	color: var(--awst-success);
}

.awst-notice-error {
	background: rgba(231, 76, 92, 0.15);
	border: 1px solid var(--awst-error);
	color: var(--awst-error);
}

.awst-notice-info {
	background: rgba(74, 158, 255, 0.15);
	border: 1px solid var(--awst-info);
	color: var(--awst-info);
}

/* Table */
.awst-table-responsive {
	overflow-x: auto;
	border-radius: 8px;
	border: 1px solid var(--awst-border);
}

.awst-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--awst-bg-card);
}

.awst-table th,
.awst-table td {
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--awst-border);
}

.awst-table th {
	background: var(--awst-bg);
	color: var(--awst-text-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.awst-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.03);
}

.awst-table a {
	color: var(--awst-primary);
	text-decoration: none;
}

.awst-table a:hover {
	text-decoration: underline;
}

/* Badges */
.awst-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.awst-status-neu { background: #3b82f6; color: #fff; }
.awst-status-gesehen { background: #6366f1; color: #fff; }
.awst-status-in-bearbeitung { background: #f59e0b; color: #1a1a1e; }
.awst-status-rueckfrage { background: #8b5cf6; color: #fff; }
.awst-status-warten { background: #64748b; color: #fff; }
.awst-status-geloest { background: var(--awst-success); color: #fff; }
.awst-status-geschlossen { background: #475569; color: #fff; }

.awst-priority-normal { background: var(--awst-bg-input); color: var(--awst-text-muted); }
.awst-priority-hoch { background: #f59e0b; color: #1a1a1e; }
.awst-priority-dringend { background: var(--awst-error); color: #fff; }

/* Forms */
.awst-form {
	background: var(--awst-bg-card);
	padding: 1.5rem;
	border-radius: 8px;
	border: 1px solid var(--awst-border);
}

.awst-form-group {
	margin-bottom: 1.25rem;
}

.awst-form-group label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	color: var(--awst-text);
}

.awst-form-group .required {
	color: var(--awst-error);
}

.awst-form-group input[type="text"],
.awst-form-group input[type="file"],
.awst-form-group select,
.awst-form-group textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	background: var(--awst-bg-input);
	border: 1px solid var(--awst-border);
	border-radius: 6px;
	color: var(--awst-text);
	font-size: 0.95rem;
	box-sizing: border-box;
}

.awst-form-group input:focus,
.awst-form-group select:focus,
.awst-form-group textarea:focus {
	outline: none;
	border-color: var(--awst-primary);
}

.awst-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.awst-form-actions {
	margin-top: 1.5rem;
}

/* Ticket meta */
.awst-ticket-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--awst-bg-card);
	border-radius: 8px;
	border: 1px solid var(--awst-border);
	margin-bottom: 1.5rem;
}

.awst-meta-label {
	display: block;
	font-size: 0.75rem;
	color: var(--awst-text-muted);
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}

/* Conversation */
.awst-conversation {
	margin-bottom: 1.5rem;
}

.awst-msg {
	padding: 1rem 1.25rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	border: 1px solid var(--awst-border);
}

.awst-msg-customer {
	background: var(--awst-bg-card);
	margin-right: 2rem;
}

.awst-msg-staff {
	background: rgba(232, 93, 44, 0.08);
	border-color: rgba(232, 93, 44, 0.3);
	margin-left: 2rem;
}

.awst-msg-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
}

.awst-msg-header time {
	margin-left: auto;
	color: var(--awst-text-muted);
}

.awst-staff-label {
	background: var(--awst-primary);
	color: #fff;
	padding: 0.1rem 0.5rem;
	border-radius: 3px;
	font-size: 0.7rem;
}

.awst-msg-body {
	line-height: 1.6;
}

.awst-msg-body p:last-child {
	margin-bottom: 0;
}

/* Attachments */
.awst-attachments {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.awst-attachment {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	background: var(--awst-bg-input);
	border-radius: 4px;
	font-size: 0.8rem;
	color: var(--awst-primary);
	text-decoration: none;
}

.awst-attachment:hover {
	background: var(--awst-border);
}

/* Reply box */
.awst-reply-box {
	background: var(--awst-bg-card);
	padding: 1.5rem;
	border-radius: 8px;
	border: 1px solid var(--awst-border);
}

.awst-reply-box h3 {
	margin-top: 0;
}

.awst-empty {
	text-align: center;
	padding: 3rem;
	color: var(--awst-text-muted);
}

.awst-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: normal;
	cursor: pointer;
}

.awst-terms-group {
	padding: 1rem;
	background: var(--awst-bg-input);
	border-radius: 6px;
	border: 1px solid var(--awst-border);
}

.awst-custom-fields-display {
	background: var(--awst-bg-card);
	border: 1px solid var(--awst-border);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.awst-custom-fields-display h3 {
	margin-top: 0;
	font-size: 1rem;
}

.awst-cf-list {
	margin: 0;
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 0.5rem 1rem;
}

.awst-cf-list dt {
	font-weight: 600;
	color: var(--awst-text-muted);
	margin: 0;
}

.awst-cf-list dd {
	margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
	.awst-form-row {
		grid-template-columns: 1fr;
	}

	.awst-msg-customer,
	.awst-msg-staff {
		margin-left: 0;
		margin-right: 0;
	}

	.awst-table thead {
		display: none;
	}

	.awst-table tr {
		display: block;
		margin-bottom: 1rem;
		border: 1px solid var(--awst-border);
		border-radius: 6px;
		padding: 0.5rem;
	}

	.awst-table td {
		display: flex;
		justify-content: space-between;
		border: none;
		padding: 0.4rem 0.5rem;
	}

	.awst-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--awst-text-muted);
		margin-right: 1rem;
	}
}