/*
 * brand.css — KACON brand palette overrides
 * Loaded after bootstrap.css / style.css / dashboard.css so these rules win the cascade.
 * Palette: navy #1F3A68 (primary), amber #EFA83C (accent), light grey-blue #F0F1F5 (background).
 */

:root {
	--brand-navy: #1F3A68;
	--brand-navy-dark: #16294D;
	--brand-navy-tint: rgba(31, 58, 104, 0.14);
	--brand-amber: #EFA83C;
	--brand-amber-dark: #D9902A;
	--brand-bg: #F0F1F5;
}

/* ---- Links ---- */
a {
	color: var(--brand-navy);
}
a:hover {
	color: var(--brand-navy-dark);
}
.grade-change-link {
	color: var(--brand-navy);
}

/* ---- Buttons ---- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--brand-navy);
	border-color: var(--brand-navy);
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--brand-navy-dark);
	border-color: var(--brand-navy-dark);
	color: #fff;
}
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 0 0 0 0.2rem rgba(239, 168, 60, 0.5);
}
.btn-warning {
	background-color: var(--brand-amber);
	border-color: var(--brand-amber);
	color: var(--brand-navy);
	font-weight: 600;
}
.btn-warning:hover,
.btn-warning:focus {
	background-color: var(--brand-amber-dark);
	border-color: var(--brand-amber-dark);
	color: var(--brand-navy);
}
/* Amber call-to-action in the style of the course-card button */
.btn-brand {
	background-color: var(--brand-amber);
	border: 1px solid var(--brand-amber);
	color: var(--brand-navy);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.btn-brand:hover,
.btn-brand:focus {
	background-color: var(--brand-amber-dark);
	border-color: var(--brand-amber-dark);
	color: var(--brand-navy);
}

/* ---- Top navbar / sidebar ---- */
.nav-bg {
	border-bottom: 3px solid var(--brand-amber);
}
#sidebar .nav-item.active {
	background-color: var(--brand-navy-tint);
}
#sidebar .nav-link.active {
	color: var(--brand-navy);
}
.nav-tabs .nav-link.active {
	background-color: var(--brand-navy-tint) !important;
	color: var(--brand-navy) !important;
	border-bottom: 3px solid var(--brand-amber);
}

/* ---- Page chrome ---- */
#content {
	background-color: var(--brand-bg);
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
	background-color: var(--brand-navy-tint);
}
#sidebar,
#sidebar::-webkit-scrollbar {
	scrollbar-color: var(--brand-navy-tint);
}

/* ---- Tables, headers, counters ---- */
.bg-dark {
	background-color: var(--brand-navy) !important;
}
.table .thead-dark th {
	background-color: var(--brand-navy);
	border-color: var(--brand-navy);
}
.mailcount {
	background-color: var(--brand-navy);
}
.pendingcount {
	background-color: var(--brand-amber);
	color: var(--brand-navy);
	font-weight: 600;
}
.breadcrumb a,
.breadcrumb a:hover {
	color: var(--brand-navy);
}

/* ---- Login page ---- */
.headercenter {
	background-color: var(--brand-navy);
}
.trdd {
	background-color: var(--brand-navy);
}
form .login:hover,
form .login:focus {
	border: solid 2px var(--brand-amber);
}

/* =========================================================
 * Mobile responsiveness (<= 767.98px only — desktop untouched)
 * ========================================================= */
@media (max-width: 767.98px) {

	html, body {
		overflow-x: hidden;
	}

	/* ---- Top navbar ---- */
	.navbar-brand {
		min-width: 0;
		flex: 1 1 auto;
	}
	.navbar-brand > div {
		padding-left: 8px !important;
	}
	.navbar-brand > div > div {
		padding-left: 0 !important;
	}
	.navbar-brand span {
		padding-left: 10px !important;
		font-size: 13px !important;
		line-height: 15px !important;
	}
	.navbar-brand img {
		width: 40px !important;
		height: 40px !important;
	}
	#search-box {
		width: calc(100% - 20px) !important;
		margin: 6px 10px 10px 10px;
		padding: 10px 14px;
	}
	#suggesstion-box.suggesstion-box {
		left: 10px;
		right: 10px;
	}
	.suggesstion-box .active {
		width: auto;
	}

	/* Role / username strip */
	.sticky-top .navbar.navbar-dark {
		justify-content: flex-start !important;
		flex-wrap: wrap;
		font-size: 12px;
		padding: 4px 10px;
	}
	.sticky-top .navbar.navbar-dark > div {
		padding-right: 12px !important;
	}

	/* ---- Sidebar: stack full-width above the content when toggled ---- */
	#mainpage {
		flex-direction: column;
	}
	#sidebar {
		display: none;              /* hidden until the toggle button shows it */
		position: static;
		width: 100%;
		min-width: 100%;
		height: auto;
		max-height: 75vh;
		overflow-y: auto;
		top: auto;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
		border-bottom: 3px solid var(--brand-amber);
	}
	#sidebar .bg-light {
		height: auto;
		overflow: visible;
	}

	/* ---- Main content ---- */
	#content {
		width: 100%;
		padding: 12px;
		min-height: 60vh;
	}
	#content .table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.statistics {
		width: 50%;
	}

	/* ---- Student / staff profile page ---- */
	.student {
		padding-left: 0;
	}
	.profilepic {
		float: none;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 15px;
	}
	.profilepiccontainer img {
		max-width: 240px;
		display: block;
		margin: 0 auto;
	}
	.infocard,
	.infocard-left {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.segment {
		width: 100% !important;
		box-sizing: border-box;
		height: auto;
		margin-left: 0;
		padding-left: 15px;
		padding-right: 10px;
	}
	.warningpopup,
	.errorpopup,
	.successpopup {
		box-sizing: border-box;
		width: 100%;
		padding: 15px 12px;
		background-position: 10px 12px;
	}
	.warningpopup h1,
	.errorpopup h1,
	.successpopup h1 {
		font-size: 20px;
	}
	.infocard tr td:first-child {
		width: 115px !important;
		white-space: normal;
	}
	.studentname {
		height: auto;
		min-height: 50px;
		box-sizing: border-box;
		padding-left: 10px;
	}
	#calendar {
		width: 100%;
	}

	/* ---- Footer ---- */
	.footer .center,
	.homefooter .center {
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	.footer {
		text-align: center;
		padding: 10px 0 20px 0;
	}
	.footer .float,
	.footer .footerbox,
	.homefooter .float,
	.homefooter .footerbox {
		float: none;
		width: 100%;
		text-align: center;
		padding: 10px 0 0 0;
	}
	.footer img {
		margin: 0 auto;
	}
}