/* =========================================================
   OS Support Tickets — shared frontend + admin styles
   ========================================================= */

/* --- Status badges (used on both frontend & admin list) --- */
.os-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
.os-status--open           { background: #d1fae5; color: #065f46; }
.os-status--in-progress    { background: #dbeafe; color: #1e40af; }
.os-status--awaiting-reply { background: #fef3c7; color: #92400e; }
.os-status--resolved       { background: #e5e7eb; color: #374151; }
.os-status--closed         { background: #f3f4f6; color: #6b7280; }

/* --- Admin: details table inside meta box --- */
.os-details-table {
	width: 100%;
	border-collapse: collapse;
}
.os-details-table th,
.os-details-table td {
	padding: 6px 4px;
	vertical-align: top;
	font-size: 13px;
}
.os-details-table th {
	width: 70px;
	color: #555;
	font-weight: 600;
}

/* --- Thread (admin + frontend) --- */
.os-thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}
.os-thread__msg {
	border-radius: 8px;
	padding: 14px 16px;
	max-width: 85%;
}
.os-thread__msg--customer {
	background: #f2e6d4;
	align-self: flex-start;
	margin-right: auto;
}
.os-thread__msg--admin {
	background: #1b2840;
	color: #fff;
	align-self: flex-end;
	margin-left: auto;
}
.os-thread__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.os-thread__meta strong {
	font-size: 13px;
}
.os-thread__time {
	font-size: 11px;
	opacity: .65;
}
.os-thread__body {
	font-size: 14px;
	line-height: 1.6;
	
}
.os-thread__msg--admin .os-thread__time {
	color: #fff;
}

/* --- Badges --- */
.os-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
}
.os-badge--customer { background: #d4a864; color: #1b2840; }
.os-badge--admin    { background: #fff;    color: #1b2840; }

/* =========================================================
   FRONTEND
   ========================================================= */

.os-tickets-wrap {
	max-width: 780px;
	margin: 0 auto;
	font-family: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
	color: #212529;
}

/* --- Notices --- */
.os-notice {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 500;
}
.os-notice--success { background: #d1fae5; color: #065f46; border-left: 4px solid #10b981; }
.os-notice--error   { background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444; }
.os-notice--info    { background: #dbeafe; color: #1e40af; border-left: 4px solid #3b82f6; }

/* --- Form --- */
.os-form {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 28px;
}
.os-form__row {
	margin-bottom: 18px;
}
.os-form__row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.os-form__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.os-form__field label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}
.os-form__field input[type="text"],
.os-form__field input[type="email"],
.os-form__field input[type="tel"],
.os-form__field select,
.os-form__field textarea {
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: 9px 12px;
	font-size: 14px;
	font-family: inherit;
	color: #212529;
	background: #fafafa;
	transition: border-color .15s;
	width: 100%;
	box-sizing: border-box;
}
.os-form__field input:focus,
.os-form__field select:focus,
.os-form__field textarea:focus {
	outline: none;
	border-color: #1b2840;
	background: #fff;
}
.os-required  { color: #ef4444; }
.os-field-hint { font-size: 11px; color: #6b7280; font-weight: 400; }

/* File input */
.os-file-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}
.os-file-wrap input[type="file"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.os-file-btn {
	display: inline-block;
	padding: 8px 14px;
	background: #e5e7eb;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.os-file-btn:hover { background: #d1d5db; }
.os-file-name {
	font-size: 13px;
	color: #6b7280;
}

/* --- Buttons --- */
.os-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.os-btn--primary {
	background: #1b2840;
	color: #fff;
}
.os-btn--primary:hover { background: #2d3a50; color: #fff; }

.os-btn--outline {
	background: transparent;
	color: #1b2840;
	border: 1.5px solid #1b2840;
	padding: 6px 14px;
}
.os-btn--outline:hover { background: #1b2840; color: #fff; }

.os-btn--sm { font-size: 12px; padding: 5px 12px; }

/* --- Lookup form --- */
.os-lookup {
	background: #f8f5ef;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 24px;
}
.os-lookup__title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: #1b2840;
}
.os-lookup__desc {
	margin: 0 0 16px;
	font-size: 13px;
	color: #6b7280;
}
.os-lookup__row {
	display: flex;
	gap: 10px;
}
.os-lookup__row input[type="email"] {
	flex: 1;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: 9px 12px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
}
.os-lookup__row input:focus {
	outline: none;
	border-color: #1b2840;
}

/* --- Ticket table --- */
.os-ticket-list__title {
	font-size: 15px;
	font-weight: 700;
	color: #1b2840;
	margin: 0 0 12px;
}
.os-count {
	display: inline-block;
	background: #1b2840;
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	padding: 1px 7px;
	vertical-align: middle;
	margin-left: 4px;
}
.os-ticket-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.os-ticket-table th {
	text-align: left;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #6b7280;
	border-bottom: 2px solid #e5e7eb;
}
.os-ticket-table td {
	padding: 12px 10px;
	border-bottom: 1px solid #f3f4f6;
	vertical-align: middle;
}
.os-ticket-table tr:hover td { background: #fafafa; }

/* --- Single ticket --- */
.os-ticket-header {
	margin-bottom: 24px;
}
.os-back-link {
	font-size: 13px;
	color: #6b7280;
	text-decoration: none;
	display: inline-block;
	margin-bottom: 10px;
}
.os-back-link:hover { color: #1b2840; }

.os-ticket-header__subject {
	font-size: 20px;
	font-weight: 700;
	color: #1b2840;
	margin: 0 0 10px;
}
.os-ticket-header__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.os-ticket-number {
	font-size: 13px;
	font-weight: 700;
	color: #1b2840;
	background: #f2e6d4;
	padding: 2px 10px;
	border-radius: 4px;
}
.os-ticket-cat,
.os-ticket-date {
	font-size: 13px;
	color: #6b7280;
}

/* --- Attachment --- */
.os-attachment {
	margin-top: 10px;
}
.os-attachment-link {
	font-size: 13px;
	color: #1b2840;
	text-decoration: none;
}
.os-attachment-link:hover { text-decoration: underline; }

/* --- Reply form --- */
.os-reply-form {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 24px;
	margin-top: 24px;
}
.os-reply-form__title {
	font-size: 15px;
	font-weight: 700;
	color: #1b2840;
	margin: 0 0 14px;
}
.os-reply-form .os-form__field textarea {
	border: 1px solid #d1d5db;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	margin-bottom: 12px;
}
.os-reply-form .os-form__field textarea:focus {
	outline: none;
	border-color: #1b2840;
}

/* --- Responsive --- */
@media ( max-width: 600px ) {
	.os-form__row--2col { grid-template-columns: 1fr; }
	.os-lookup__row     { flex-direction: column; }
	.os-ticket-table th:nth-child(3),
	.os-ticket-table td:nth-child(3) { display: none; }
	.os-thread__msg { max-width: 100%; }
}