/* Custom Color Scheme for Election System */
/* Google Sans Font will be loaded via link tag in HTML */

:root {
	--primary-amber: #FFC107;
	--accent-blue: #0056D2;
	--bg-light: #F5F7FA;
	--header-dark: #2C3E50;
	--text-body: #34495E;
	
	/* Override Bootstrap 5 Color Variables */
	--bs-primary: #FFC107;
	--bs-primary-rgb: 255, 193, 7;
	--bs-secondary: #34495E;
	--bs-secondary-rgb: 52, 73, 94;
	--bs-success: #28a745;
	--bs-success-rgb: 40, 167, 69;
	--bs-info: #17a2b8;
	--bs-info-rgb: 23, 162, 184;
	--bs-warning: #ffc107;
	--bs-warning-rgb: 255, 193, 7;
	--bs-danger: #dc3545;
	--bs-danger-rgb: 220, 53, 69;
	--bs-light: #F5F7FA;
	--bs-light-rgb: 245, 247, 250;
	--bs-dark: #2C3E50;
	--bs-dark-rgb: 44, 62, 80;
	--bs-body-color: #34495E;
	--bs-body-bg: #F5F7FA;
	--bs-body-font-family: 'Google Sans', 'Google Sans Variable', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Set Google Sans as primary font */
* {
	font-family: 'Google Sans', 'Google Sans Variable', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body, html {
	font-family: 'Google Sans', 'Google Sans Variable', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Override Bootstrap and other framework fonts */
h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, textarea, select, label,
.table, .card, .btn, .form-control, .nav-link, .sidebar,
.sb-topnav, .sb-sidenav, .breadcrumb {
	font-family: 'Google Sans', 'Google Sans Variable', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Body and Background */
body {
	background: var(--bg-light) !important;
	color: var(--text-body);
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
	color: var(--header-dark);
}

/* Top Navigation */
.sb-topnav {
	background-color: var(--primary-amber) !important;
}

.sb-topnav.navbar-dark {
	background-color: var(--primary-amber) !important;
}

.sb-topnav.bg-dark {
	background-color: var(--primary-amber) !important;
}

.sb-topnav.navbar-dark.bg-dark {
	background-color: var(--primary-amber) !important;
}

/* Override Bootstrap's navbar-dark text colors */
.sb-topnav .navbar-brand,
.sb-topnav.navbar-dark .navbar-brand,
.sb-topnav.bg-dark .navbar-brand,
.sb-topnav.navbar-dark.bg-dark .navbar-brand {
	color: var(--header-dark) !important;
	font-weight: 700;
}

.sb-topnav .nav-link,
.sb-topnav.navbar-dark .nav-link,
.sb-topnav.bg-dark .nav-link,
.sb-topnav.navbar-dark.bg-dark .nav-link {
	color: var(--header-dark) !important;
}

.sb-topnav .btn-link,
.sb-topnav.navbar-dark .btn-link,
.sb-topnav.bg-dark .btn-link,
.sb-topnav.navbar-dark.bg-dark .btn-link {
	color: var(--header-dark) !important;
}

.sb-topnav .dropdown-toggle,
.sb-topnav.navbar-dark .dropdown-toggle,
.sb-topnav.bg-dark .dropdown-toggle,
.sb-topnav.navbar-dark.bg-dark .dropdown-toggle {
	color: var(--header-dark) !important;
}

.sb-topnav .dropdown-toggle:hover,
.sb-topnav.navbar-dark .dropdown-toggle:hover,
.sb-topnav.bg-dark .dropdown-toggle:hover,
.sb-topnav.navbar-dark.bg-dark .dropdown-toggle:hover {
	color: var(--header-dark) !important;
	opacity: 0.8;
}

/* Ensure all icons and text in topnav are dark */
.sb-topnav i,
.sb-topnav.navbar-dark i,
.sb-topnav.bg-dark i,
.sb-topnav.navbar-dark.bg-dark i {
	color: var(--header-dark) !important;
}

/* Primary Buttons (Amber) - Moved to Bootstrap Overrides section */

/* Accent Buttons (Blue - for Vote buttons) */
.btn-vote,
.btn-vote-primary {
	background-color: var(--accent-blue) !important;
	border-color: var(--accent-blue) !important;
	color: #FFFFFF !important;
	font-weight: 600;
}

.btn-vote:hover,
.btn-vote-primary:hover {
	background-color: #0044A8 !important;
	border-color: #0044A8 !important;
	color: #FFFFFF !important;
}

/* Cards - Already handled above */

/* Breadcrumb */
.breadcrumb-item.active {
	color: var(--text-body) !important;
}

.breadcrumb-item a {
	color: var(--accent-blue) !important;
}

.breadcrumb-item a:hover {
	color: #0044A8 !important;
}

/* Text Colors */
.text-muted {
	color: var(--text-body) !important;
	opacity: 0.7;
}

/* Badge Primary */
.badge.bg-primary {
	background-color: var(--primary-amber) !important;
	color: var(--header-dark) !important;
}

/* Bootstrap Color Class Overrides */

/* Background Colors */
.bg-primary,
.card.bg-primary {
	background-color: var(--primary-amber) !important;
	color: var(--header-dark) !important;
}

.bg-secondary {
	background-color: var(--text-body) !important;
	color: #FFFFFF !important;
}

.bg-light {
	background-color: var(--bg-light) !important;
	color: var(--text-body) !important;
}

.bg-dark {
	background-color: var(--header-dark) !important;
	color: #FFFFFF !important;
}

.bg-white {
	background-color: #FFFFFF !important;
	color: var(--text-body) !important;
}

/* Card with bg classes - override text color for better contrast */
.card.bg-primary.text-white,
.card.bg-primary .text-white,
.card.bg-primary .card-footer,
.card.bg-primary .card-body,
.card.bg-primary .small,
.card.bg-primary a,
.card.bg-primary .stretched-link {
	color: var(--header-dark) !important;
}

.card.bg-warning.text-white,
.card.bg-warning .text-white,
.card.bg-warning .card-footer,
.card.bg-warning .card-body,
.card.bg-warning .small,
.card.bg-warning a,
.card.bg-warning .stretched-link {
	color: var(--header-dark) !important;
}

/* Text Colors */
.text-primary {
	color: var(--primary-amber) !important;
}

.text-secondary {
	color: var(--text-body) !important;
}

.text-dark {
	color: var(--header-dark) !important;
}

.text-body {
	color: var(--text-body) !important;
}

.text-muted {
	color: var(--text-body) !important;
	opacity: 0.7;
}

.text-white {
	color: #FFFFFF !important;
}

/* Button Colors */
.btn-primary {
	background-color: var(--primary-amber) !important;
	border-color: var(--primary-amber) !important;
	color: var(--header-dark) !important;
	font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: #FFB300 !important;
	border-color: #FFB300 !important;
	color: var(--header-dark) !important;
}

.btn-secondary {
	background-color: var(--text-body) !important;
	border-color: var(--text-body) !important;
	color: #FFFFFF !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
	background-color: #2C3E50 !important;
	border-color: #2C3E50 !important;
	color: #FFFFFF !important;
}

.btn-light {
	background-color: var(--bg-light) !important;
	border-color: var(--bg-light) !important;
	color: var(--text-body) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
	background-color: #E8ECF0 !important;
	border-color: #E8ECF0 !important;
	color: var(--text-body) !important;
}

.btn-dark {
	background-color: var(--header-dark) !important;
	border-color: var(--header-dark) !important;
	color: #FFFFFF !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
	background-color: #1A252F !important;
	border-color: #1A252F !important;
	color: #FFFFFF !important;
}

/* Border Colors */
.border-primary {
	border-color: var(--primary-amber) !important;
}

.border-secondary {
	border-color: var(--text-body) !important;
}

.border-dark {
	border-color: var(--header-dark) !important;
}

/* Alert Colors */
.alert-primary {
	background-color: rgba(255, 193, 7, 0.1) !important;
	border-color: var(--primary-amber) !important;
	color: var(--header-dark) !important;
}

.alert-secondary {
	background-color: rgba(52, 73, 94, 0.1) !important;
	border-color: var(--text-body) !important;
	color: var(--text-body) !important;
}

/* Card Header with Primary */
.card-header.bg-primary {
	background-color: var(--primary-amber) !important;
	color: var(--header-dark) !important;
}

/* Link Colors */
a {
	color: var(--accent-blue);
}

a:hover {
	color: #0044A8;
}

/* Navbar - General (but sb-topnav overrides above) */
.navbar-dark:not(.sb-topnav) {
	background-color: var(--header-dark) !important;
}

.navbar-light {
	background-color: var(--primary-amber) !important;
}

/* Dropdown */
.dropdown-menu {
	background-color: #FFFFFF !important;
	border-color: rgba(0, 0, 0, 0.15) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--bg-light) !important;
	color: var(--text-body) !important;
}

/* Form Controls */
.form-control:focus {
	border-color: var(--primary-amber) !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

.form-select:focus {
	border-color: var(--primary-amber) !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

.form-check-input:checked {
	background-color: var(--primary-amber) !important;
	border-color: var(--primary-amber) !important;
}

.form-check-input:focus {
	border-color: var(--primary-amber) !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

/* Table */
.table-primary {
	background-color: rgba(255, 193, 7, 0.1) !important;
	color: var(--header-dark) !important;
}

.table-primary > th,
.table-primary > td {
	background-color: rgba(255, 193, 7, 0.1) !important;
}

/* Pagination */
.page-link {
	color: var(--text-body) !important;
}

.page-link:hover {
	color: var(--header-dark) !important;
	background-color: var(--bg-light) !important;
	border-color: var(--primary-amber) !important;
}

.page-item.active .page-link {
	background-color: var(--primary-amber) !important;
	border-color: var(--primary-amber) !important;
	color: var(--header-dark) !important;
}

/* Progress Bar */
.progress-bar {
	background-color: var(--primary-amber) !important;
}

.progress-bar.bg-primary {
	background-color: var(--primary-amber) !important;
}

.progress-bar.bg-success {
	background-color: #28a745 !important;
}

.progress-bar.bg-warning {
	background-color: #ffc107 !important;
}

.progress-bar.bg-danger {
	background-color: #dc3545 !important;
}

.progress-bar.bg-secondary {
	background-color: var(--text-body) !important;
}

/* List Group */
.list-group-item.active {
	background-color: var(--primary-amber) !important;
	border-color: var(--primary-amber) !important;
	color: var(--header-dark) !important;
}

/* Breadcrumb */
.breadcrumb-item.active {
	color: var(--text-body) !important;
}

.breadcrumb-item a {
	color: var(--accent-blue) !important;
}

.breadcrumb-item a:hover {
	color: #0044A8 !important;
}