/**
 * Pre-Gifted theme — unique palettes (not shared with scitest / engtest).
 * Load after Bulma / mystyles.css.
 */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600;700&display=swap');

:root {
	--theme-primary-dark: #0c2340;
	--theme-primary: #16365c;
	--theme-primary-mid: #1e4d7b;
	--theme-accent: #d4a017;
	--theme-accent-soft: #f0c14b;
	--theme-accent-dark: #b8860b;
	--theme-bg: #f7f3e8;
	--theme-bg-alt: #fbf8f1;
	--theme-surface: #ffffff;
	--theme-text: #0c2340;
	--theme-muted: #5c6b7a;
	--theme-border: #e6dcc3;
	--theme-info: #1e4d7b;
	--theme-info-light: #eef4fb;
	--theme-success: #3f6b3a;
	--theme-success-light: #eef6ec;
	--theme-warning: #c27800;
	--theme-warning-light: #fff6e5;
	--theme-danger: #b42318;
	--theme-danger-light: #fef3f2;
	--theme-link: #1e4d7b;
	--theme-shadow: 0 8px 24px rgba(12, 35, 64, 0.12);
	--theme-radius: 10px;
	--theme-hover-row: #f4ead0;
	--theme-focus-ring: rgba(212, 160, 23, 0.28);
	--theme-button-hover-start: #0c2340;
	--theme-button-hover-end: #1e4d7b;
	--theme-footer-end: #16365c;

	--primary: var(--theme-accent-dark);
	--link: var(--theme-link);
	--info: var(--theme-info);
	--success: var(--theme-success);
	--warning: var(--theme-warning);
	--danger: var(--theme-danger);
}

/* Theme: กรมท่า-ทอง (default — already in :root) */

body.theme-navy-gold {
	--theme-primary-dark: #0c2340;
	--theme-primary: #16365c;
	--theme-primary-mid: #1e4d7b;
	--theme-accent: #d4a017;
	--theme-accent-soft: #f0c14b;
	--theme-accent-dark: #b8860b;
	--theme-bg: #f7f3e8;
	--theme-bg-alt: #fbf8f1;
	--theme-text: #0c2340;
	--theme-border: #e6dcc3;
	--theme-info: #1e4d7b;
	--theme-info-light: #eef4fb;
	--theme-link: #1e4d7b;
	--theme-shadow: 0 8px 24px rgba(12, 35, 64, 0.12);
	--theme-hover-row: #f4ead0;
	--theme-focus-ring: rgba(212, 160, 23, 0.28);
	--theme-button-hover-start: #0c2340;
	--theme-button-hover-end: #1e4d7b;
	--theme-footer-end: #16365c;
}

body.theme-azure-copper {
	--theme-primary-dark: #0a3d62;
	--theme-primary: #155e8a;
	--theme-primary-mid: #1b6ca8;
	--theme-accent: #c46d3a;
	--theme-accent-soft: #e08b58;
	--theme-accent-dark: #a85728;
	--theme-bg: #eef6fb;
	--theme-bg-alt: #f7fbfe;
	--theme-text: #0a3d62;
	--theme-border: #cfe3f0;
	--theme-info: #1b6ca8;
	--theme-info-light: #e7f3fb;
	--theme-link: #155e8a;
	--theme-shadow: 0 8px 24px rgba(10, 61, 98, 0.12);
	--theme-hover-row: #e4f1f9;
	--theme-focus-ring: rgba(196, 109, 58, 0.28);
	--theme-button-hover-start: #0a3d62;
	--theme-button-hover-end: #1b6ca8;
	--theme-footer-end: #155e8a;
}

body.theme-olive-sky {
	--theme-primary-dark: #3d4a1f;
	--theme-primary: #556b2f;
	--theme-primary-mid: #6b8438;
	--theme-accent: #5ea4c8;
	--theme-accent-soft: #8ec4de;
	--theme-accent-dark: #3d86ab;
	--theme-bg: #f5f7ef;
	--theme-bg-alt: #fafbf6;
	--theme-text: #2f3818;
	--theme-border: #dce3c8;
	--theme-info: #3d86ab;
	--theme-info-light: #e8f4fa;
	--theme-link: #3d86ab;
	--theme-shadow: 0 8px 24px rgba(61, 74, 31, 0.12);
	--theme-hover-row: #eef3df;
	--theme-focus-ring: rgba(94, 164, 200, 0.3);
	--theme-button-hover-start: #3d4a1f;
	--theme-button-hover-end: #6b8438;
	--theme-footer-end: #556b2f;
}

body.theme-wine-sand {
	--theme-primary-dark: #4a1c2a;
	--theme-primary: #6b2d3c;
	--theme-primary-mid: #7d3849;
	--theme-accent: #c4a574;
	--theme-accent-soft: #d8c09a;
	--theme-accent-dark: #a88855;
	--theme-bg: #faf6f0;
	--theme-bg-alt: #fdfaf6;
	--theme-text: #3a1520;
	--theme-border: #ead9c8;
	--theme-info: #6b2d3c;
	--theme-info-light: #f7ecef;
	--theme-link: #6b2d3c;
	--theme-shadow: 0 8px 24px rgba(74, 28, 42, 0.12);
	--theme-hover-row: #f3e8dc;
	--theme-focus-ring: rgba(196, 165, 116, 0.32);
	--theme-button-hover-start: #4a1c2a;
	--theme-button-hover-end: #7d3849;
	--theme-footer-end: #6b2d3c;
}

body.theme-graphite-amber {
	--theme-primary-dark: #2c2416;
	--theme-primary: #4a3f2f;
	--theme-primary-mid: #5c4f3b;
	--theme-accent: #e09f3e;
	--theme-accent-soft: #f0bc6e;
	--theme-accent-dark: #c4841f;
	--theme-bg: #faf7f2;
	--theme-bg-alt: #fdfbf8;
	--theme-text: #2c2416;
	--theme-border: #e6dccb;
	--theme-info: #5c4f3b;
	--theme-info-light: #f4efe6;
	--theme-link: #4a3f2f;
	--theme-shadow: 0 8px 24px rgba(44, 36, 22, 0.12);
	--theme-hover-row: #f3ead8;
	--theme-focus-ring: rgba(224, 159, 62, 0.3);
	--theme-button-hover-start: #2c2416;
	--theme-button-hover-end: #5c4f3b;
	--theme-footer-end: #4a3f2f;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Sarabun', tahoma, sans-serif;
	color: var(--theme-text);
	background: linear-gradient(180deg, var(--theme-bg) 0%, var(--theme-bg-alt) 35%, #f8fafc 100%);
	min-height: 100vh;
}

a {
	color: var(--theme-link);
}

a:hover {
	color: var(--theme-primary-dark);
}

.has-text-link {
	color: var(--theme-link) !important;
}

.has-text-primary {
	color: var(--theme-accent-dark) !important;
}

.has-text-info {
	color: var(--theme-info) !important;
}

.has-text-success {
	color: var(--theme-success) !important;
}

.has-text-danger {
	color: var(--theme-danger) !important;
}

.navbar.is-primary,
.navbar.is-primary.is-light {
	background: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-primary-mid) 100%) !important;
	box-shadow: var(--theme-shadow);
}

.navbar.is-primary .navbar-item,
.navbar.is-primary .navbar-link,
.navbar.is-primary .navbar-burger,
.navbar.is-primary.is-light .navbar-item,
.navbar.is-primary.is-light .navbar-link,
.navbar.is-primary.is-light .navbar-burger {
	color: #fff !important;
}

.navbar.is-primary .navbar-item:hover,
.navbar.is-primary .navbar-item:focus,
.navbar.is-primary .navbar-item.is-active,
.navbar.is-primary .navbar-link:hover,
.navbar.is-primary .navbar-link:focus,
.navbar.is-primary .navbar-link.is-active,
.navbar.is-primary .navbar-start > a.navbar-item:hover,
.navbar.is-primary .navbar-start > a.navbar-item:focus,
.navbar.is-primary .navbar-start > a.navbar-item.is-active,
.navbar.is-primary .navbar-start .navbar-link:hover,
.navbar.is-primary .navbar-start .navbar-link:focus,
.navbar.is-primary .navbar-start .navbar-link.is-active,
.navbar.is-primary .navbar-end > a.navbar-item:hover,
.navbar.is-primary .navbar-end > a.navbar-item:focus,
.navbar.is-primary .navbar-end > a.navbar-item.is-active,
.navbar.is-primary .navbar-end .navbar-link:hover,
.navbar.is-primary .navbar-end .navbar-link:focus,
.navbar.is-primary .navbar-end .navbar-link.is-active,
.navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link,
.navbar.is-primary.is-light .navbar-item:hover,
.navbar.is-primary.is-light .navbar-item:focus,
.navbar.is-primary.is-light .navbar-item.is-active,
.navbar.is-primary.is-light .navbar-link:hover,
.navbar.is-primary.is-light .navbar-link:focus,
.navbar.is-primary.is-light .navbar-link.is-active,
.navbar.is-primary.is-light .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-primary.is-light .navbar-item.has-dropdown:focus .navbar-link,
.navbar.is-primary.is-light .navbar-item.has-dropdown.is-active .navbar-link {
	background-color: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
}

.navbar.is-primary .navbar-link::after,
.navbar.is-primary .navbar-start .navbar-link::after,
.navbar.is-primary .navbar-end .navbar-link::after,
.navbar.is-primary.is-light .navbar-link::after {
	border-color: #fff !important;
}

.navbar.is-primary .navbar-dropdown {
	border-top: 3px solid var(--theme-accent);
}

.navbar.is-primary .navbar-dropdown .navbar-item {
	color: var(--theme-text) !important;
}

.navbar.is-primary .navbar-dropdown .navbar-item:hover {
	background-color: var(--theme-bg) !important;
	color: var(--theme-accent-dark) !important;
}

.button.is-primary {
	background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent-dark) 100%) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.button.is-primary:hover,
.button.is-primary.is-hovered,
.button.is-primary:focus,
.button.is-primary.is-focused,
.button.is-primary:active,
.button.is-primary.is-active {
	background: linear-gradient(135deg, var(--theme-button-hover-start) 0%, var(--theme-button-hover-end) 100%) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 0 0 0.125em var(--theme-focus-ring) !important;
}

.button.is-primary[disabled],
fieldset[disabled] .button.is-primary {
	background: #94a3b8 !important;
}

.button.is-info {
	background-color: var(--theme-primary-mid) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.button.is-info:hover,
.button.is-info.is-hovered,
.button.is-info:active,
.button.is-info.is-active {
	background-color: var(--theme-primary-dark) !important;
	border-color: transparent !important;
	color: #fff !important;
}

.button.is-success {
	background-color: var(--theme-success);
	border-color: transparent;
}

.button.is-success:hover,
.button.is-success.is-hovered {
	background-color: #047857;
	border-color: transparent;
}

.button.is-link {
	background-color: transparent;
	border-color: transparent;
	color: var(--theme-link);
}

.button.is-link:hover {
	background-color: var(--theme-info-light);
	color: var(--theme-primary-dark);
}

.button.is-warning {
	background-color: var(--theme-warning);
	border-color: transparent;
	color: #fff;
}

.button.is-warning:hover {
	background-color: #b45309;
	color: #fff;
}

.button.is-danger {
	background-color: var(--theme-danger);
	border-color: transparent;
}

.button.is-danger:hover {
	background-color: #b91c1c;
}

.notification.is-info {
	background-color: var(--theme-info-light);
	color: var(--theme-primary-dark);
	border-left: 4px solid var(--theme-info);
}

.notification.is-info.is-light {
	background-color: var(--theme-info-light);
}

.notification.is-warning,
.notification.is-warning.is-light {
	background-color: var(--theme-warning-light);
	color: #92400e;
	border-left: 4px solid var(--theme-warning);
}

.notification.is-success,
.notification.is-success.is-light {
	background-color: var(--theme-success-light);
	color: #065f46;
	border-left: 4px solid var(--theme-success);
}

.notification.is-danger,
.notification.is-danger.is-light {
	background-color: var(--theme-danger-light);
	color: #991b1b;
	border-left: 4px solid var(--theme-danger);
}

.input,
.textarea,
.select select {
	border-radius: var(--theme-radius);
	border-color: var(--theme-border);
}

.input:focus,
.textarea:focus,
.select select:focus,
.input.is-active,
.textarea.is-active,
.select select.is-active,
.input.is-focused,
.textarea.is-focused,
.select select.is-focused {
	border-color: var(--theme-accent-dark);
	box-shadow: 0 0 0 0.125em var(--theme-focus-ring);
}

.input.is-info,
.textarea.is-info,
.select.is-info select {
	border-color: var(--theme-primary-mid);
}

.input.is-info:focus,
.textarea.is-info:focus,
.select.is-info select:focus {
	box-shadow: 0 0 0 0.125em var(--theme-focus-ring);
}

.tag.is-primary,
.tag.is-link {
	background-color: var(--theme-accent-dark);
	color: #fff;
}

.tag.is-info {
	background-color: var(--theme-primary-mid);
	color: #fff;
}

.tag.is-success {
	background-color: var(--theme-success);
	color: #fff;
}

.tag.is-warning {
	background-color: var(--theme-warning);
	color: #fff;
}

.tag.is-danger {
	background-color: var(--theme-danger);
	color: #fff;
}

.tag.is-light {
	background-color: var(--theme-bg);
	color: var(--theme-primary-dark);
}

.table {
	background: var(--theme-surface);
	border-radius: var(--theme-radius);
	overflow: hidden;
}

.table thead th {
	background: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-primary) 100%);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.15);
}

.table.is-bordered td,
.table.is-bordered th {
	border-color: var(--theme-border);
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
	background-color: var(--theme-hover-row);
}

.box {
	box-shadow: var(--theme-shadow);
	border: 1px solid var(--theme-border);
	border-radius: var(--theme-radius);
}

.footer {
	background: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-footer-end) 100%);
	color: rgba(255, 255, 255, 0.92);
	padding: 2.5rem 1.5rem;
	margin-top: 2rem;
}

.footer strong,
.footer li,
.footer p {
	color: rgba(255, 255, 255, 0.95);
}

.footer .has-text-link,
.footer a {
	color: var(--theme-accent-soft) !important;
}

.footer .button.is-danger {
	background-color: rgba(220, 38, 38, 0.9);
}

.pagination-link.is-current {
	background-color: var(--theme-accent-dark);
	border-color: var(--theme-accent-dark);
}

.pagination-link:hover {
	border-color: var(--theme-accent);
	color: var(--theme-accent-dark);
}

.is-checkradio[type='checkbox'].is-info:checked + label::before,
.is-checkradio[type='radio'].is-info:checked + label::before {
	background-color: var(--theme-accent-dark) !important;
	border-color: var(--theme-accent-dark) !important;
}

.is-checkradio[type='checkbox'].is-link:checked + label::before,
.is-checkradio[type='radio'].is-link:checked + label::before {
	background-color: var(--theme-primary-mid) !important;
	border-color: var(--theme-primary-mid) !important;
}

.file.is-info .file-cta {
	background-color: var(--theme-primary-mid);
	border-color: transparent;
	color: #fff;
}

.file.is-info:hover .file-cta {
	background-color: var(--theme-primary-dark);
}

.section .notification.is-info .subtitle,
.section .notification.is-info .title {
	color: var(--theme-primary-dark);
}

.subtitle.has-text-danger {
	color: var(--theme-danger) !important;
}

.swal2-styled.swal2-confirm {
	background-color: var(--theme-accent-dark) !important;
}

.hero.is-primary,
.hero.is-link,
.hero.is-info {
	background: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-primary-mid) 100%) !important;
}

.hero.is-primary .title,
.hero.is-link .title,
.hero.is-info .title,
.hero.is-primary .subtitle,
.hero.is-link .subtitle,
.hero.is-info .subtitle {
	color: #fff;
}

.has-background-primary {
	background-color: var(--theme-accent-dark) !important;
}

.has-background-info {
	background-color: var(--theme-info-light) !important;
}

.has-background-link {
	background-color: var(--theme-primary-mid) !important;
}

.tabs.is-boxed li.is-active a {
	border-color: var(--theme-border);
	border-bottom-color: var(--theme-surface) !important;
	color: var(--theme-accent-dark) !important;
}

.tabs.is-boxed a:hover {
	border-bottom-color: var(--theme-accent) !important;
	color: var(--theme-accent-dark) !important;
}

.progress::-webkit-progress-value,
.progress::-moz-progress-bar {
	background-color: var(--theme-accent) !important;
}

.progress.is-primary::-webkit-progress-value,
.progress.is-primary::-moz-progress-bar {
	background-color: var(--theme-accent-dark) !important;
}

.message.is-info .message-header {
	background-color: var(--theme-primary-mid);
}

.message.is-success .message-header {
	background-color: var(--theme-success);
}

.message.is-warning .message-header {
	background-color: var(--theme-warning);
}

.message.is-danger .message-header {
	background-color: var(--theme-danger);
}

.panel.is-primary .panel-heading {
	background-color: var(--theme-primary-dark);
	color: #fff;
}

.menu-list a.is-active {
	background-color: var(--theme-accent-dark);
}

.breadcrumb a {
	color: var(--theme-link);
}

.breadcrumb li.is-active a {
	color: var(--theme-muted);
}

/* List tables: size grade / exam / action columns to content + a little padding */
.table th.col-prefix,
.table td.col-prefix,
.table th.col-grade,
.table td.col-grade,
.table th.col-testin,
.table td.col-testin {
	white-space: nowrap;
	width: 1%;
	padding-left: 0.65em;
	padding-right: 0.65em;
}

.table th.col-actions,
.table td.col-actions {
	white-space: nowrap;
	width: 1%;
	padding: 0.25em 0.35em;
	text-align: center;
	vertical-align: middle;
}

.col-actions-btns {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.col-actions-btns form {
	display: inline-flex;
	margin: 0;
}
