/**
 * Scitest theme — purple-blue (ม่วงฟ้า) palette.
 * Load after Bulma / mystyles.css.
 */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600;700&display=swap');

:root {
	--theme-primary-dark: #312e81;
	--theme-primary: #4338ca;
	--theme-primary-mid: #4f46e5;
	--theme-accent: #818cf8;
	--theme-accent-soft: #a5b4fc;
	--theme-accent-dark: #6366f1;
	--theme-bg: #eef2ff;
	--theme-bg-alt: #f5f3ff;
	--theme-surface: #ffffff;
	--theme-text: #1e1b4b;
	--theme-muted: #64748b;
	--theme-border: #e0e7ff;
	--theme-info: #6366f1;
	--theme-info-light: #eef2ff;
	--theme-success: #059669;
	--theme-success-light: #ecfdf5;
	--theme-warning: #d97706;
	--theme-warning-light: #fffbeb;
	--theme-danger: #dc2626;
	--theme-danger-light: #fef2f2;
	--theme-link: #4f46e5;
	--theme-shadow: 0 8px 24px rgba(49, 46, 129, 0.12);
	--theme-radius: 10px;

	--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-teal {
	--theme-primary-dark: #0f3d5c;
	--theme-primary: #155e75;
	--theme-primary-mid: #1a6b8a;
	--theme-accent: #14b8a6;
	--theme-accent-soft: #2ec4b6;
	--theme-accent-dark: #0f766e;
	--theme-bg: #f0f9ff;
	--theme-bg-alt: #f8fafc;
	--theme-text: #1e293b;
	--theme-border: #e2e8f0;
	--theme-info: #0891b2;
	--theme-info-light: #ecfeff;
	--theme-success: #0d9488;
	--theme-success-light: #ccfbf1;
	--theme-link: #0f766e;
	--theme-shadow: 0 8px 24px rgba(15, 61, 92, 0.1);
}

body.theme-emerald {
	--theme-primary-dark: #064e3b;
	--theme-primary: #047857;
	--theme-primary-mid: #059669;
	--theme-accent: #34d399;
	--theme-accent-soft: #6ee7b7;
	--theme-accent-dark: #10b981;
	--theme-bg: #ecfdf5;
	--theme-bg-alt: #f0fdf4;
	--theme-text: #064e3b;
	--theme-border: #d1fae5;
	--theme-info: #059669;
	--theme-info-light: #ecfdf5;
	--theme-success: #059669;
	--theme-success-light: #d1fae5;
	--theme-link: #047857;
	--theme-shadow: 0 8px 24px rgba(6, 78, 59, 0.12);
}

body.theme-rose {
	--theme-primary-dark: #9f1239;
	--theme-primary: #be123c;
	--theme-primary-mid: #e11d48;
	--theme-accent: #fb7185;
	--theme-accent-soft: #fda4af;
	--theme-accent-dark: #f43f5e;
	--theme-bg: #fff1f2;
	--theme-bg-alt: #fdf2f8;
	--theme-text: #4c0519;
	--theme-border: #fecdd3;
	--theme-info: #e11d48;
	--theme-info-light: #fff1f2;
	--theme-success: #059669;
	--theme-success-light: #ecfdf5;
	--theme-link: #be123c;
	--theme-shadow: 0 8px 24px rgba(159, 18, 57, 0.12);
}

body.theme-slate {
	--theme-primary-dark: #0f172a;
	--theme-primary: #1e293b;
	--theme-primary-mid: #334155;
	--theme-accent: #94a3b8;
	--theme-accent-soft: #cbd5e1;
	--theme-accent-dark: #64748b;
	--theme-bg: #f8fafc;
	--theme-bg-alt: #f1f5f9;
	--theme-text: #0f172a;
	--theme-border: #e2e8f0;
	--theme-info: #475569;
	--theme-info-light: #f1f5f9;
	--theme-success: #059669;
	--theme-success-light: #ecfdf5;
	--theme-link: #334155;
	--theme-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

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: 0 4px 16px rgba(49, 46, 129, 0.25);
}

.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-link:hover,
.navbar.is-primary.is-light .navbar-item:hover,
.navbar.is-primary.is-light .navbar-link:hover {
	background-color: rgba(255, 255, 255, 0.12) !important;
	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, #3730a3 0%, #4f46e5 100%) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 0 0 0.125em rgba(99, 102, 241, 0.3) !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 rgba(99, 102, 241, 0.25);
}

.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 rgba(79, 70, 229, 0.25);
}

.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: #eef2ff;
}

.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%, #3730a3 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: #c7d2fe !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);
}
