/**
 * Engtest69 theme — teal/navy palette (matches admin login).
 * Load after Bulma / mystyles.css.
 */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600;700&display=swap');

:root {
	--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-surface: #ffffff;
	--theme-text: #1e293b;
	--theme-muted: #64748b;
	--theme-border: #e2e8f0;
	--theme-info: #0891b2;
	--theme-info-light: #ecfeff;
	--theme-success: #0d9488;
	--theme-success-light: #ccfbf1;
	--theme-warning: #d97706;
	--theme-warning-light: #fffbeb;
	--theme-danger: #dc2626;
	--theme-danger-light: #fef2f2;
	--theme-link: #0f766e;
	--theme-shadow: 0 8px 24px rgba(15, 61, 92, 0.1);
	--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);
}

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%, #f1f5f9 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(15, 61, 92, 0.2);
}

.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-accent-dark) 0%, var(--theme-accent) 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, #0d6b63 0%, #0f9f8e 100%) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 0 0 0.125em rgba(20, 184, 166, 0.25) !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: #0f766e;
	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: #115e59;
	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);
	box-shadow: 0 0 0 0.125em rgba(20, 184, 166, 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(21, 94, 117, 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: #ecfeff;
}

.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%, #164e63 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: #99f6e4 !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);
}