/* Permalok Training System - front-end styles
   Palette: black #242533, red accent #e10200 */

:root {
	--pts-black: #242533;
	--pts-red: #e10200;
	--pts-red-dark: #b50100;
	--pts-grey: #6c6e7e;
	--pts-light: #f5f6f8;
	--pts-border: #e1e3ea;
	--pts-radius: 8px;
	--pts-shadow: 0 2px 14px rgba(36, 37, 51, 0.08);
}

* { box-sizing: border-box; }

body.pts-portal {
	margin: 0;
	background: var(--pts-light);
	color: var(--pts-black);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
}

.pts-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Header / branding */
.pts-site-header {
	background: var(--pts-black);
	padding: 18px 0;
	border-bottom: 4px solid var(--pts-red);
}
.pts-site-header .pts-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pts-logo img { display: block; height: 56px; width: auto; }
.pts-header-nav a { color: #fff; text-decoration: none; font-weight: 600; margin-left: 18px; font-size: 14px; }
.pts-header-nav a:hover { color: var(--pts-red); }

/* Layout blocks */
.pts-main { padding: 36px 0 60px; }
.pts-card {
	background: #fff;
	border: 1px solid var(--pts-border);
	border-radius: var(--pts-radius);
	box-shadow: var(--pts-shadow);
	padding: 28px;
	margin-bottom: 24px;
}
.pts-card h1, .pts-card h2 { margin-top: 0; }

h1, h2, h3 { color: var(--pts-black); font-weight: 700; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }

.pts-page-title {
	border-left: 5px solid var(--pts-red);
	padding-left: 14px;
	margin: 0 0 24px;
}

.pts-muted { color: var(--pts-grey); }
.pts-small { font-size: 13px; }

/* Buttons */
.pts-btn {
	display: inline-block;
	background: var(--pts-red);
	color: #fff;
	border: none;
	border-radius: var(--pts-radius);
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}
.pts-btn:hover { background: var(--pts-red-dark); color: #fff; }
.pts-btn--ghost { background: transparent; color: var(--pts-black); border: 1px solid var(--pts-border); }
.pts-btn--ghost:hover { background: var(--pts-light); color: var(--pts-black); }
.pts-btn--block { display: block; width: 100%; text-align: center; }
.pts-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Forms */
.pts-field { margin-bottom: 18px; }
.pts-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.pts-field input[type="text"],
.pts-field input[type="email"],
.pts-field input[type="password"],
.pts-field input[type="date"],
.pts-field input[type="number"],
.pts-field select,
.pts-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pts-border);
	border-radius: var(--pts-radius);
	font-size: 15px;
	font-family: inherit;
}
.pts-field input:focus, .pts-field select:focus, .pts-field textarea:focus {
	outline: none;
	border-color: var(--pts-red);
	box-shadow: 0 0 0 3px rgba(225, 2, 0, 0.12);
}

/* Tables */
.pts-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pts-table th, .pts-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--pts-border); }
.pts-table th { background: var(--pts-black); color: #fff; font-weight: 600; }
.pts-table tr:last-child td { border-bottom: none; }
.pts-table tbody tr:hover { background: var(--pts-light); }

/* Status pills */
.pts-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pts-pill--grey { background: #eceef3; color: var(--pts-grey); }
.pts-pill--green { background: #e4f6ec; color: #1c7a43; }
.pts-pill--red { background: #fde6e6; color: var(--pts-red-dark); }
.pts-pill--amber { background: #fdf2e0; color: #9a6400; }
.pts-pill--blue { background: #e6eefc; color: #234c9a; }

/* Stat tiles */
.pts-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 26px; }
.pts-stat { background: #fff; border: 1px solid var(--pts-border); border-radius: var(--pts-radius); padding: 18px; box-shadow: var(--pts-shadow); }
.pts-stat .pts-stat-num { font-size: 30px; font-weight: 700; color: var(--pts-red); }
.pts-stat .pts-stat-label { font-size: 13px; color: var(--pts-grey); }

/* Seat meter */
.pts-seats { background: #eceef3; border-radius: 999px; height: 10px; overflow: hidden; margin: 8px 0; }
.pts-seats span { display: block; height: 100%; background: var(--pts-red); }

/* Messages */
.pts-message { border-radius: var(--pts-radius); padding: 16px 18px; margin-bottom: 22px; border-left: 5px solid var(--pts-grey); background: #fff; }
.pts-message--info { border-color: var(--pts-blue, #234c9a); }
.pts-message--success { border-color: #1c7a43; background: #f3fbf6; }
.pts-message--error { border-color: var(--pts-red); background: #fdf4f4; }
.pts-message--warning { border-color: #9a6400; background: #fffaf0; }

/* Video + course */
.pts-video { width: 100%; border-radius: var(--pts-radius); background: #000; margin-bottom: 20px; }
.pts-course-content { font-size: 16px; }
.pts-course-content img { max-width: 100%; height: auto; }

/* Quiz */
.pts-quiz-progress { font-weight: 600; color: var(--pts-grey); margin-bottom: 8px; }
.pts-quiz-question { font-size: 19px; font-weight: 700; margin-bottom: 18px; }
.pts-answer { display: block; border: 1px solid var(--pts-border); border-radius: var(--pts-radius); padding: 13px 16px; margin-bottom: 10px; cursor: pointer; }
.pts-answer:hover { border-color: var(--pts-red); }
.pts-answer input { margin-right: 10px; }
.pts-answer.is-correct { border-color: #1c7a43; background: #f3fbf6; }
.pts-answer.is-wrong { border-color: var(--pts-red); background: #fdf4f4; }

/* Footer */
.pts-site-footer { background: var(--pts-black); color: #aeb0bd; padding: 26px 0; font-size: 13px; text-align: center; }
.pts-site-footer a { color: #fff; }

/* Login centred */
.pts-auth { max-width: 420px; margin: 60px auto; }

/* Homepage delegate-access box (directly under the header) */
.pts-home-access { max-width: 560px; margin: 0 auto 10px; }
.pts-home-access .pts-access-box { border-top: 4px solid var(--pts-red); }

@media (max-width: 640px) {
	.pts-card { padding: 20px; }
	.pts-site-header .pts-wrap { flex-direction: column; align-items: flex-start; }
}