/* ==========================================================================
   Fekara UI — the new look.

   Loaded last, after Bootstrap 3 and Metronic, so it wins on equal
   specificity. Every colour, radius and spacing value comes from a CSS custom
   property that Appearance::css_vars() prints on :root, so an admin changing a
   setting in Settings > Appearance restyles the whole app. Nothing here
   hard-codes a brand colour.

   Contents
     1  Reset and shell
     2  Rail + panel navigation   (layout: rail)
     3  Grouped sidebar           (layout: grouped)
     4  Classic sidebar polish    (layout: classic)
     5  Topbar
     6  Page header, tabs, stat tiles
     7  Cards / portlets
     8  Tables and DataTables
     9  Buttons
    10  Badges, pills, labels
    11  Forms
    12  Alerts and notes
    13  Modals, dropdowns, misc
    14  Responsive
    15  RTL
   ========================================================================== */

/* ---------- 1. Reset and shell ------------------------------------------ */

.fk,
.fk body {
	background: var(--fk-app-bg);
}

.fk {
	font-family: var(--fk-font);
	color: var(--fk-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 13.5px;
	line-height: 1.5;
}

.fk h1, .fk h2, .fk h3, .fk h4, .fk h5, .fk h6,
.fk .h1, .fk .h2, .fk .h3, .fk .h4 {
	font-family: var(--fk-font);
	color: var(--fk-text);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Scope the brand link colour to page content. A blanket ".fk a" outranks a
   single component class, which repainted the whole sidebar and topbar. */
.fk .page-content a,
.fk .modal a,
.fk .fk-page-head a {
	color: var(--fk-primary);
	text-decoration: none;
}

.fk .page-content a:hover,
.fk .page-content a:focus,
.fk .modal a:hover,
.fk .fk-page-head a:hover {
	color: var(--fk-primary-dark);
	text-decoration: none;
}

.fk a {
	text-decoration: none;
}

.fk ::selection {
	background: var(--fk-primary-soft-2);
	color: var(--fk-text);
}

.fk :focus-visible {
	outline: 2px solid var(--fk-primary);
	outline-offset: 2px;
	border-radius: var(--fk-radius-sm);
}

/* Thin, quiet scrollbars everywhere inside the app. */
.fk * {
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--fk-text-rgb), .22) transparent;
}

.fk *::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.fk *::-webkit-scrollbar-thumb {
	background: rgba(var(--fk-text-rgb), .18);
	border-radius: 8px;
}

.fk *::-webkit-scrollbar-thumb:hover {
	background: rgba(var(--fk-text-rgb), .3);
}

.fk *::-webkit-scrollbar-track {
	background: transparent;
}

/* The page shell. Pages emit .page-container > (sidebar) + .page-content-wrapper,
   so we keep that structure and simply drive it from our own variables. */
.fk .page-container {
	margin: 0;
	padding-top: var(--fk-topbar-h);
	padding-left: var(--fk-nav-w, 0px);
	min-height: 100vh;
	background: var(--fk-app-bg);
	transition: padding-left .16s ease;
}

.fk-layout-rail {
	--fk-nav-w: calc(var(--fk-rail-w) + var(--fk-panel-w));
}

.fk-layout-grouped {
	--fk-nav-w: var(--fk-side-w);
}

.fk-layout-classic {
	--fk-nav-w: 235px;
}

.fk .page-content-wrapper {
	margin: 0;
	float: none;
}

.fk .page-content {
	margin: 0 !important;
	padding: var(--fk-pad) calc(var(--fk-pad) + 4px) 48px;
	background: var(--fk-app-bg);
	min-height: calc(100vh - var(--fk-topbar-h));
}

.fk .page-content > .row:first-child > .dashboard-bar {
	padding: 0;
}

/* The original theme's fixed footer bar gets out of the way. */
.fk .footer {
	background: transparent;
	color: var(--fk-muted);
	font-size: 12px;
	padding: 10px var(--fk-pad);
}

.fk .footer .footer-inner,
.fk .footer .footer-tools {
	color: var(--fk-muted);
}

/* ---------- 2. Rail + panel navigation ---------------------------------- */

.fk-nav {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1030;
	display: flex;
	align-items: stretch;
}

.fk-rail {
	width: var(--fk-rail-w);
	background: var(--fk-rail-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 0 10px;
	flex: 0 0 auto;
}

.fk-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--fk-primary);
	color: var(--fk-primary-fg);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.02em;
	margin-bottom: 18px;
	flex: 0 0 auto;
	overflow: hidden;
}

.fk-brand,
.fk-brand:hover,
.fk-brand:focus,
.fk-brand:active {
	color: var(--fk-primary-fg);
}

.fk-brand:hover {
	filter: brightness(1.07);
}

.fk-brand img {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.fk-rail-scroll {
	flex: 1 1 auto;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.fk-rail-item {
	width: calc(var(--fk-rail-w) - 16px);
	padding: 9px 2px 7px;
	border-radius: var(--fk-radius);
	color: var(--fk-rail-fg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	transition: background .12s ease, color .12s ease;
	cursor: pointer;
	flex: 0 0 auto;
}

.fk-rail-item i {
	font-size: 17px;
	line-height: 1;
	display: block;
}

.fk-rail-item .fk-rail-label {
	font-size: 10px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .01em;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}

.fk-rail-bare .fk-rail-item .fk-rail-label {
	display: none;
}

.fk-rail-bare .fk-rail-item {
	padding: 11px 2px;
}

.fk-rail-item:hover,
.fk-rail-item:focus {
	background: var(--fk-rail-hover);
	color: #fff;
}

.fk-rail-item.is-active {
	background: var(--fk-primary);
	color: var(--fk-primary-fg);
}

.fk-rail-item.is-active:hover {
	color: var(--fk-primary-fg);
}

.fk-rail-foot {
	margin-top: 10px;
	flex: 0 0 auto;
}

.fk-rail-avatar {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--fk-rail-hover);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	overflow: hidden;
}

.fk-rail-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The panel that opens beside the rail. */
.fk-panel {
	width: var(--fk-panel-w);
	background: var(--fk-panel-bg);
	border-right: 1px solid var(--fk-border);
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
}

.fk-panel-pane {
	display: none;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.fk-panel-pane:not([hidden]) {
	display: flex;
}

.fk-panel-head {
	padding: 18px var(--fk-gap) 10px;
	flex: 0 0 auto;
}

.fk-panel-title {
	font-size: 16px;
	font-weight: 650;
	color: var(--fk-text);
	margin: 0;
	letter-spacing: -0.01em;
}

.fk-panel-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 10px 10px;
}

.fk-group {
	margin-bottom: 16px;
}

.fk-group-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--fk-muted);
	padding: 6px 8px 6px;
	margin: 0;
}

.fk-nav-row {
	display: flex;
	align-items: stretch;
	gap: 2px;
	border-radius: var(--fk-radius-sm);
}

.fk-nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	border-radius: var(--fk-radius-sm);
	color: var(--fk-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	transition: background .14s ease, color .14s ease;
	position: relative;
	cursor: pointer;
}

.fk-nav-link > i {
	font-size: 14px;
	width: 18px;
	text-align: center;
	color: var(--fk-muted);
	flex: 0 0 auto;
	transition: color .14s ease;
}

.fk-nav-link .fk-nav-text {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fk-nav-link:hover,
.fk-nav-link:focus-visible {
	background: rgba(var(--fk-text-rgb), .05);
	color: var(--fk-text);
}

.fk-nav-link:hover > i {
	color: var(--fk-text);
}

.fk-nav-link.is-active {
	background: var(--fk-primary-soft);
	color: var(--fk-primary-dark);
	font-weight: 600;
}

.fk-nav-link.is-active > i {
	color: var(--fk-primary);
}

/* The disclosure chevron, either inside the toggle row or as its own button. */
.fk-nav-caret {
	font-size: 9px;
	color: var(--fk-muted);
	flex: 0 0 auto;
	transition: transform .18s ease, color .14s ease;
}

.fk-nav-toggle.is-open .fk-nav-caret,
.fk-nav-caret-btn.is-open .fk-nav-caret {
	transform: rotate(180deg);
	color: var(--fk-primary);
}

.fk-nav-caret-btn {
	flex: 0 0 auto;
	width: 28px;
	border: 0;
	background: transparent;
	border-radius: var(--fk-radius-sm);
	color: var(--fk-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .14s ease;
}

.fk-nav-caret-btn:hover {
	background: rgba(var(--fk-text-rgb), .07);
}

/* A branch that contains the current page keeps a quiet marker so you can see
   where you are even when the parent itself is not the active row. */
.fk-nav-row.in-branch > .fk-nav-toggle > .fk-nav-text,
.fk-nav-row.in-branch > .fk-nav-link > .fk-nav-text {
	color: var(--fk-text);
	font-weight: 600;
}

.fk-nav-link .badge,
.fk-nav-link .fk-count {
	background: rgba(var(--fk-text-rgb), .08);
	color: var(--fk-muted);
	border-radius: var(--fk-radius-pill);
	font-size: 10.5px;
	font-weight: 600;
	padding: 1px 7px;
	min-width: 0;
	line-height: 1.6;
	flex: 0 0 auto;
	text-shadow: none;
}

.fk-nav-link.is-active .badge,
.fk-nav-link.is-active .fk-count {
	background: var(--fk-primary);
	color: var(--fk-primary-fg);
}

/* Children of an expanded branch. */
.fk-nav-sub {
	list-style: none;
	margin: 2px 0 6px 19px;
	padding: 0 0 0 11px;
	border-left: 1px solid var(--fk-border);
}

.fk-nav-sub[hidden] {
	display: none;
}

.fk-nav-sub .fk-nav-link {
	font-size: 12.5px;
	font-weight: 450;
	color: var(--fk-muted);
	padding: 6px 9px;
	gap: 8px;
}

.fk-nav-sub .fk-nav-link > i {
	font-size: 11.5px;
	width: 15px;
}

.fk-nav-sub .fk-nav-link:hover {
	color: var(--fk-text);
}

.fk-nav-sub .fk-nav-link.is-active {
	color: var(--fk-primary-dark);
	font-weight: 600;
	background: var(--fk-primary-soft);
}

/* The quiet card at the bottom of the panel. */
.fk-panel-foot {
	flex: 0 0 auto;
	padding: 10px var(--fk-gap) var(--fk-gap);
}

.fk-orgcard {
	background: rgba(var(--fk-text-rgb), .04);
	border-radius: var(--fk-radius);
	padding: 10px 12px;
}

.fk-orgcard-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fk-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fk-orgcard-meta {
	font-size: 11.5px;
	color: var(--fk-muted);
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fk-orgcard-meta.is-warn {
	color: var(--fk-warning);
	font-weight: 500;
}

/* ---------- 3. Grouped sidebar ------------------------------------------ */

.fk-side {
	width: var(--fk-side-w);
	background: var(--fk-panel-bg);
	border-right: 1px solid var(--fk-border);
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
}

.fk-side-head {
	padding: 16px var(--fk-gap) 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.fk-side-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	font-weight: 700;
	color: var(--fk-text);
	letter-spacing: -0.02em;
	flex: 1 1 auto;
	overflow: hidden;
}

.fk-side-brand:hover,
.fk-side-brand:focus {
	color: var(--fk-text);
}

.fk-side-brand .fk-brand {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	font-size: 12px;
	margin: 0;
}

.fk-side-brand img {
	max-height: 26px;
	width: auto;
}

.fk-side-search {
	padding: 0 var(--fk-gap) 12px;
	flex: 0 0 auto;
}

.fk-sidesearch {
	position: relative;
}

.fk-sidesearch i {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: var(--fk-muted);
	pointer-events: none;
}

.fk-sidesearch input {
	width: 100%;
	height: 34px;
	border: 1px solid var(--fk-border);
	background: var(--fk-app-bg);
	border-radius: var(--fk-radius-sm);
	padding: 0 10px 0 29px;
	font-size: 12.5px;
	color: var(--fk-text);
	transition: border-color .12s ease, background .12s ease;
}

.fk-sidesearch input:focus {
	outline: none;
	border-color: var(--fk-primary);
	background: var(--fk-surface);
}

.fk-side-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 10px 10px;
}

.fk-side-foot {
	flex: 0 0 auto;
	border-top: 1px solid var(--fk-border);
	padding: 10px var(--fk-gap);
}

.fk-usercard {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fk-usercard-avatar {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--fk-primary-soft);
	color: var(--fk-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11.5px;
	font-weight: 700;
	flex: 0 0 auto;
	overflow: hidden;
}

.fk-usercard-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fk-usercard-body {
	flex: 1 1 auto;
	min-width: 0;
}

.fk-usercard-name {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fk-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fk-usercard-role {
	font-size: 11px;
	color: var(--fk-muted);
}

/* ---------- 4. Classic layout -------------------------------------------

   The original Fekara menu, kept as the escape hatch: it is what the app falls
   back to when an admin turns the new interface off. Metronic positions
   .page-sidebar-wrapper with position:fixed but offsets the content with a
   margin, whereas the new shell uses padding on .page-container. Left alone
   the fixed sidebar inherits that padding and lands 235px in, sitting on top
   of the page. These rules pin it to the edge where it belongs.
   ------------------------------------------------------------------------ */

.fk-layout-classic .page-sidebar-wrapper,
.fk-layout-classic .page-sidebar {
	position: fixed;
	left: 0;
	right: auto;
	top: var(--fk-topbar-h);
	bottom: 0;
	width: var(--fk-nav-w);
	margin: 0;
	background: var(--fk-rail-bg);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1030;
}

.fk-layout-classic .page-container > .main {
	position: static;
	height: auto;
}

.fk-layout-classic .side-menu-logo,
.fk-layout-classic .sidebar-toggler-wrapper {
	padding: 12px var(--fk-gap);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.fk-layout-classic .side-menu-logo img {
	max-height: 30px;
	width: auto;
}

.fk-layout-classic .sidebar-search-wrapper {
	padding: 12px var(--fk-gap) 4px;
}

.fk-layout-classic .sidebar-search .input-box input {
	width: 100%;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .06);
	border-radius: var(--fk-radius-sm);
	padding: 0 10px;
	font-size: 12.5px;
	color: #fff;
}

.fk-layout-classic .sidebar-search .input-box input::placeholder {
	color: var(--fk-rail-fg);
}

.fk-layout-classic .page-sidebar-menu {
	padding: 8px 10px 20px;
	margin: 0;
	list-style: none;
}

.fk-layout-classic .page-sidebar-menu > li > a,
.fk-layout-classic .page-sidebar-menu .sub-menu > li > a {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--fk-rail-fg);
	font-size: 13px;
	font-weight: 500;
	padding: 9px 11px;
	border-radius: var(--fk-radius-sm);
	border: 0;
	background: transparent;
}

.fk-layout-classic .page-sidebar-menu > li > a:hover,
.fk-layout-classic .page-sidebar-menu .sub-menu > li > a:hover {
	background: var(--fk-rail-hover);
	color: #fff;
}

.fk-layout-classic .page-sidebar-menu > li.active > a,
.fk-layout-classic .page-sidebar-menu .sub-menu > li.active > a {
	background: var(--fk-primary);
	color: var(--fk-primary-fg);
}

.fk-layout-classic .page-sidebar-menu .sub-menu {
	list-style: none;
	padding: 0 0 0 12px;
	margin: 2px 0 4px 16px;
	border-left: 1px solid rgba(255, 255, 255, .09);
}

.fk-layout-classic .page-sidebar-menu .sub-menu > li > a {
	font-size: 12.5px;
	padding: 7px 10px;
}

.fk-layout-classic .page-sidebar-menu img.menu-icon {
	width: 15px;
	height: 15px;
	object-fit: contain;
	flex: 0 0 auto;
}

.fk-layout-classic .page-sidebar-menu i {
	width: 16px;
	text-align: center;
	font-size: 13px;
	flex: 0 0 auto;
}

.fk-layout-classic .page-sidebar-menu .title {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fk-layout-classic .page-sidebar-menu .arrow:before {
	content: "105";
	font-family: FontAwesome;
	opacity: .5;
	font-size: 11px;
}

.fk-layout-classic .page-sidebar-menu .arrow.open:before {
	content: "107";
}

.fk-layout-classic .page-sidebar-menu .selected {
	display: none;
}

[dir="rtl"].fk-layout-classic .page-sidebar-wrapper,
[dir="rtl"] .fk-layout-classic .page-sidebar-wrapper {
	left: auto;
	right: 0;
}

/* ---------- 5. Topbar --------------------------------------------------- */

.fk .fk-topbar {
	position: fixed;
	top: 0;
	right: 0;
	left: var(--fk-nav-w, 0px);
	height: var(--fk-topbar-h);
	z-index: 1020;
	background: var(--fk-surface);
	border-bottom: 1px solid var(--fk-border);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 var(--fk-pad);
	margin: 0;
	min-height: 0;
	transition: left .16s ease;
}

.fk-topbar-search {
	flex: 0 1 340px;
	position: relative;
}

.fk-topbar-search i {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12.5px;
	color: var(--fk-muted);
	pointer-events: none;
}

.fk-topbar-search input {
	width: 100%;
	height: 36px;
	border: 1px solid transparent;
	background: var(--fk-app-bg);
	border-radius: var(--fk-radius-sm);
	padding: 0 12px 0 32px;
	font-size: 12.5px;
	color: var(--fk-text);
	transition: border-color .12s ease, background .12s ease;
}

.fk-topbar-search input::placeholder {
	color: var(--fk-muted);
}

.fk-topbar-search input:focus {
	outline: none;
	border-color: var(--fk-primary);
	background: var(--fk-surface);
}

.fk-topbar-spacer {
	flex: 1 1 auto;
}

.fk-topbar-actions {
	display: flex;
	align-items: center;
	gap: 3px;
	flex: 0 0 auto;
}

.fk-topbar-actions > li {
	list-style: none;
	position: relative;
}

.fk-iconbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--fk-radius-sm);
	color: var(--fk-muted);
	font-size: 14px;
	position: relative;
	transition: background .12s ease, color .12s ease;
}

.fk-iconbtn:hover,
.fk-iconbtn:focus {
	background: var(--fk-app-bg);
	color: var(--fk-text);
}

.fk-iconbtn > .badge {
	position: absolute;
	top: 2px;
	right: 1px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--fk-primary);
	color: var(--fk-primary-fg);
	font-size: 9.5px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	text-shadow: none;
	border: 2px solid var(--fk-surface);
	box-sizing: content-box;
}

.fk-iconbtn > .badge:empty {
	display: none;
}

.fk-langbtn {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 10px;
	border-radius: var(--fk-radius-sm);
	color: var(--fk-muted);
	font-size: 12.5px;
	font-weight: 500;
	transition: background .12s ease, color .12s ease;
}

.fk-langbtn:hover,
.fk-langbtn:focus {
	background: var(--fk-app-bg);
	color: var(--fk-text);
}

.fk-langbtn img {
	width: 17px;
	height: auto;
	border-radius: 2px;
}

.fk-userbtn {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 9px 0 5px;
	border-radius: var(--fk-radius-sm);
	color: var(--fk-text);
	font-size: 12.5px;
	font-weight: 600;
	transition: background .12s ease;
}

.fk-userbtn:hover,
.fk-userbtn:focus {
	background: var(--fk-app-bg);
	color: var(--fk-text);
}

.fk-userbtn img,
.fk-userbtn .fk-usercard-avatar {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	object-fit: cover;
	font-size: 11px;
}

.fk-userbtn .caret {
	border-top-color: var(--fk-muted);
	margin-left: 1px;
}

.fk-navtoggle {
	display: none;
	width: 34px;
	height: 34px;
	border-radius: var(--fk-radius-sm);
	align-items: center;
	justify-content: center;
	color: var(--fk-text);
	font-size: 16px;
	background: transparent;
	border: 0;
	flex: 0 0 auto;
}

/* ---------- 6. Page header, tabs, stat tiles ---------------------------- */

.fk-page-head {
	margin-bottom: var(--fk-gap);
}

.fk-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 11.5px;
	color: var(--fk-muted);
	margin-bottom: 7px;
	padding: 0;
	list-style: none;
}

.fk-crumbs a {
	color: var(--fk-muted);
}

.fk-crumbs a:hover {
	color: var(--fk-primary);
}

.fk-crumbs .fk-crumb-sep {
	opacity: .5;
	font-size: 10px;
}

.fk-crumbs > li:last-child,
.fk-crumbs .is-current {
	color: var(--fk-text);
	font-weight: 500;
}

.fk-head-row {
	display: flex;
	align-items: flex-start;
	gap: var(--fk-gap);
	flex-wrap: wrap;
}

.fk-head-main {
	flex: 1 1 320px;
	min-width: 0;
}

.fk-title {
	font-size: 22px;
	font-weight: 680;
	line-height: 1.2;
	margin: 0;
	color: var(--fk-text);
	letter-spacing: -0.02em;
}

.fk-sub {
	font-size: 12.5px;
	color: var(--fk-muted);
	margin: 4px 0 0;
}

.fk-head-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 2px;
}

/* Tab strip */
.fk-tabs {
	display: flex;
	align-items: center;
	gap: 2px;
	border-bottom: 1px solid var(--fk-border);
	margin: var(--fk-gap) 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}

.fk-tabs > li > a,
.fk-tabs > a {
	display: block;
	padding: 9px 13px;
	font-size: 12.5px;
	font-weight: 550;
	color: var(--fk-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: color .12s ease, border-color .12s ease;
}

.fk-tabs > li > a:hover,
.fk-tabs > a:hover {
	color: var(--fk-text);
}

.fk-tabs > li.is-active > a,
.fk-tabs > a.is-active {
	color: var(--fk-primary);
	border-bottom-color: var(--fk-primary);
}

/* Stat tiles */
.fk-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--fk-gap);
	margin-bottom: var(--fk-gap);
}

.fk-stat {
	background: var(--fk-surface);
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius);
	padding: 14px var(--fk-gap);
	box-shadow: var(--fk-shadow);
	min-width: 0;
}

.fk-stat-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fk-muted);
	margin-bottom: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fk-stat-value {
	font-size: 20px;
	font-weight: 680;
	color: var(--fk-text);
	line-height: 1.2;
	letter-spacing: -0.02em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fk-stat-value.is-sm {
	font-size: 15px;
}

.fk-stat-meta {
	font-size: 11.5px;
	color: var(--fk-muted);
	margin-top: 3px;
}

/* ---------- 7. Cards / portlets ----------------------------------------- */

.fk .portlet,
.fk .portlet.box,
.fk .fk-card {
	background: var(--fk-surface);
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius);
	box-shadow: var(--fk-shadow);
	margin-bottom: var(--fk-gap);
	overflow: hidden;
}

.fk .portlet > .portlet-title,
.fk .portlet.box > .portlet-title {
	background: transparent;
	border-bottom: 1px solid var(--fk-border);
	border-radius: 0;
	min-height: 0;
	padding: 13px var(--fk-pad);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.fk .portlet > .portlet-title > .caption,
.fk .portlet.box > .portlet-title > .caption {
	float: none;
	flex: 1 1 auto;
	padding: 0;
	font-size: 14px;
	font-weight: 620;
	color: var(--fk-text);
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.fk .portlet > .portlet-title > .caption > i {
	font-size: 13px;
	color: var(--fk-muted);
}

.fk .portlet > .portlet-title > .tools,
.fk .portlet > .portlet-title > .actions {
	float: none;
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.fk .portlet > .portlet-title > .tools > a {
	opacity: .5;
	transition: opacity .12s ease;
}

.fk .portlet > .portlet-title > .tools > a:hover {
	opacity: 1;
}

.fk .portlet > .portlet-body,
.fk .portlet.box > .portlet-body,
.fk .fk-card-body {
	background: var(--fk-surface);
	padding: var(--fk-pad);
	border-radius: 0;
}

/* Metronic colour-coded boxes lose their heavy header bars. */
.fk .portlet.box.blue,
.fk .portlet.box.green,
.fk .portlet.box.red,
.fk .portlet.box.yellow,
.fk .portlet.box.purple,
.fk .portlet.box.grey,
.fk .portlet.box.light-grey {
	border-color: var(--fk-border);
}

.fk .portlet.box.blue > .portlet-title,
.fk .portlet.box.green > .portlet-title,
.fk .portlet.box.red > .portlet-title,
.fk .portlet.box.yellow > .portlet-title,
.fk .portlet.box.purple > .portlet-title,
.fk .portlet.box.grey > .portlet-title,
.fk .portlet.box.light-grey > .portlet-title {
	background: transparent;
	color: var(--fk-text);
}

.fk .portlet.box.blue > .portlet-title > .caption,
.fk .portlet.box.green > .portlet-title > .caption,
.fk .portlet.box.red > .portlet-title > .caption,
.fk .portlet.box.yellow > .portlet-title > .caption,
.fk .portlet.box.purple > .portlet-title > .caption {
	color: var(--fk-text);
}

.fk .portlet.box > .portlet-body {
	border: 0;
}

/* A toolbar sitting above a table. */
.fk .table-toolbar {
	margin-bottom: var(--fk-gap);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.fk .table-toolbar .btn-group.pull-right,
.fk .table-toolbar .pull-right {
	float: none !important;
	margin-left: auto;
}

/* ---------- 8. Tables and DataTables ------------------------------------ */

.fk .table {
	margin-bottom: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13px;
	color: var(--fk-text);
	width: 100%;
}

.fk .table > thead > tr > th {
	background: var(--fk-app-bg);
	border-top: 1px solid var(--fk-border);
	border-bottom: 1px solid var(--fk-border);
	border-left: 0;
	border-right: 0;
	font-size: 10.5px;
	font-weight: 650;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--fk-muted);
	padding: 10px 12px;
	vertical-align: middle;
	white-space: nowrap;
}

.fk .table > tbody > tr > td {
	border-top: 0;
	border-bottom: 1px solid var(--fk-border-soft);
	border-left: 0;
	border-right: 0;
	padding: var(--fk-row-y) 12px;
	vertical-align: middle;
}

.fk .table > tbody > tr:last-child > td {
	border-bottom: 0;
}

.fk .table.table-bordered,
.fk .table.table-bordered > thead > tr > th,
.fk .table.table-bordered > tbody > tr > td {
	border-left: 0;
	border-right: 0;
}

.fk .table.table-striped > tbody > tr:nth-of-type(odd),
.fk .table.table-striped > tbody > tr:nth-of-type(odd) > td {
	background: transparent;
}

.fk .table.table-hover > tbody > tr:hover,
.fk .table.table-hover > tbody > tr:hover > td {
	background: rgba(var(--fk-text-rgb), .025);
}

.fk .table > tbody > tr > td a {
	font-weight: 550;
}

/* Wide tables scroll inside their own wrapper (added by fekara-ui.js), never
   by making the card itself a scroll container — that would clip dropdown
   menus opened from a card toolbar. */
.fk .fk-tablewrap {
	overflow-x: auto;
	max-width: 100%;
}

/* DataTables chrome */
.fk .dataTables_wrapper .dataTables_length,
.fk .dataTables_wrapper .dataTables_filter,
.fk .dataTables_wrapper .dataTables_info,
.fk .dataTables_wrapper .dataTables_paginate {
	font-size: 12px;
	color: var(--fk-muted);
	padding: 10px 0;
}

.fk .dataTables_wrapper .dataTables_filter label,
.fk .dataTables_wrapper .dataTables_length label {
	font-weight: 500;
	color: var(--fk-muted);
	display: flex;
	align-items: center;
	gap: 7px;
}

.fk .dataTables_wrapper .dataTables_filter input {
	margin: 0;
}

.fk .dataTables_wrapper .dataTables_paginate .paginate_button {
	border: 1px solid var(--fk-border);
	background: var(--fk-surface);
	border-radius: var(--fk-radius-sm);
	padding: 5px 11px;
	margin: 0 2px;
	color: var(--fk-text) !important;
	font-size: 12px;
	font-weight: 500;
}

.fk .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: var(--fk-app-bg);
	border-color: var(--fk-border);
	color: var(--fk-text) !important;
}

.fk .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.fk .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: var(--fk-primary);
	border-color: var(--fk-primary);
	color: var(--fk-primary-fg) !important;
}

.fk .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.fk .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	opacity: .45;
	background: var(--fk-surface);
	color: var(--fk-muted) !important;
}

.fk table.dataTable thead .sorting,
.fk table.dataTable thead .sorting_asc,
.fk table.dataTable thead .sorting_desc {
	background-image: none;
	position: relative;
	cursor: pointer;
}

.fk table.dataTable thead .sorting:after,
.fk table.dataTable thead .sorting_asc:after,
.fk table.dataTable thead .sorting_desc:after {
	font-family: FontAwesome;
	font-size: 9px;
	margin-left: 6px;
	opacity: .55;
}

.fk table.dataTable thead .sorting:after {
	content: "\f0dc";
	opacity: .3;
}

.fk table.dataTable thead .sorting_asc:after {
	content: "\f0de";
	color: var(--fk-primary);
	opacity: 1;
}

.fk table.dataTable thead .sorting_desc:after {
	content: "\f0dd";
	color: var(--fk-primary);
	opacity: 1;
}

/* Bootstrap pagination used elsewhere in the app. */
.fk .pagination > li > a,
.fk .pagination > li > span {
	border-color: var(--fk-border);
	color: var(--fk-text);
	font-size: 12.5px;
}

.fk .pagination > .active > a,
.fk .pagination > .active > span,
.fk .pagination > .active > a:hover {
	background: var(--fk-primary);
	border-color: var(--fk-primary);
	color: var(--fk-primary-fg);
}

/* ---------- 9. Buttons -------------------------------------------------- */

.fk .btn {
	border-radius: var(--fk-radius-sm);
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 14px;
	border: 1px solid transparent;
	box-shadow: none;
	text-shadow: none;
	line-height: 1.4;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	vertical-align: middle;
}

.fk .btn:focus,
.fk .btn:active:focus {
	outline-offset: 2px;
}

.fk .btn.btn-sm,
.fk .btn.btn-xs {
	padding: 5px 10px;
	font-size: 11.5px;
	gap: 5px;
}

.fk .btn.btn-lg {
	padding: 11px 18px;
	font-size: 14px;
}

/* Default / secondary */
.fk .btn.default,
.fk .btn-default,
.fk .btn.grey,
.fk .btn.light {
	background: var(--fk-surface);
	border-color: var(--fk-border);
	color: var(--fk-text);
}

.fk .btn.default:hover,
.fk .btn-default:hover,
.fk .btn.grey:hover,
.fk .btn.light:hover,
.fk .btn.default:focus,
.fk .btn-default:focus {
	background: var(--fk-app-bg);
	border-color: var(--fk-border);
	color: var(--fk-text);
}

/* Primary — every "call to action" colour in the old theme maps here so the
   brand colour actually takes effect across the app. */
.fk .btn-primary,
.fk .btn.blue,
.fk .btn.green,
.fk .btn.purple,
.fk .btn.btn-success,
.fk .btn.btn-info {
	background: var(--fk-primary);
	border-color: var(--fk-primary);
	color: var(--fk-primary-fg);
}

.fk .btn-primary:hover,
.fk .btn.blue:hover,
.fk .btn.green:hover,
.fk .btn.purple:hover,
.fk .btn.btn-success:hover,
.fk .btn.btn-info:hover,
.fk .btn-primary:focus,
.fk .btn-primary:active,
.fk .btn-primary.active,
.fk .btn.blue:focus,
.fk .btn.green:focus {
	background: var(--fk-primary-dark);
	border-color: var(--fk-primary-dark);
	color: var(--fk-primary-fg);
}

/* Destructive stays destructive. */
.fk .btn.red,
.fk .btn-danger,
.fk .btn.btn-danger {
	background: var(--fk-danger);
	border-color: var(--fk-danger);
	color: #fff;
}

.fk .btn.red:hover,
.fk .btn-danger:hover,
.fk .btn.btn-danger:hover {
	background: var(--fk-danger);
	border-color: var(--fk-danger);
	filter: brightness(.92);
	color: #fff;
}

.fk .btn.yellow,
.fk .btn-warning,
.fk .btn.btn-warning {
	background: var(--fk-warning);
	border-color: var(--fk-warning);
	color: #fff;
}

.fk .btn.yellow:hover,
.fk .btn-warning:hover {
	filter: brightness(.94);
	color: #fff;
}

/* A dark, high-contrast button for the primary action inside a notice. */
.fk .btn.fk-btn-dark {
	background: var(--fk-text);
	border-color: var(--fk-text);
	color: #fff;
}

.fk .btn.fk-btn-dark:hover {
	filter: brightness(1.35);
	color: #fff;
}

.fk .btn-group > .btn {
	border-radius: 0;
}

.fk .btn-group > .btn:first-child {
	border-top-left-radius: var(--fk-radius-sm);
	border-bottom-left-radius: var(--fk-radius-sm);
}

.fk .btn-group > .btn:last-child,
.fk .btn-group > .dropdown-toggle:last-child {
	border-top-right-radius: var(--fk-radius-sm);
	border-bottom-right-radius: var(--fk-radius-sm);
}

.fk .btn-group > .btn:only-child {
	border-radius: var(--fk-radius-sm);
}

/* ---------- 10. Badges, pills, labels ----------------------------------- */

.fk .badge,
.fk .label {
	border-radius: var(--fk-radius-pill);
	font-size: 10.5px;
	font-weight: 650;
	padding: 3px 9px;
	text-shadow: none;
	box-shadow: none;
	line-height: 1.5;
	letter-spacing: .01em;
	display: inline-block;
}

.fk-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: var(--fk-radius-pill);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	line-height: 1.5;
	background: rgba(var(--fk-text-rgb), .06);
	color: var(--fk-muted);
	white-space: nowrap;
}

.fk-pill:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.fk-pill.is-bare:before {
	display: none;
}

.fk-pill.is-success,
.fk .badge-success,
.fk .label-success {
	background: var(--fk-success-soft);
	color: var(--fk-success);
}

.fk-pill.is-warning,
.fk .badge-warning,
.fk .label-warning {
	background: var(--fk-warning-soft);
	color: var(--fk-warning);
}

.fk-pill.is-danger,
.fk .badge-danger,
.fk .badge-important,
.fk .badge-error,
.fk .label-danger {
	background: var(--fk-danger-soft);
	color: var(--fk-danger);
}

.fk-pill.is-info,
.fk .badge-info,
.fk .label-info {
	background: var(--fk-info-soft);
	color: var(--fk-info);
}

.fk-pill.is-primary {
	background: var(--fk-primary-soft);
	color: var(--fk-primary-dark);
}

/* ---------- 11. Forms --------------------------------------------------- */

.fk .form-control,
.fk input[type="text"].form-control,
.fk input[type="password"].form-control,
.fk input[type="email"].form-control,
.fk input[type="number"].form-control,
.fk textarea.form-control,
.fk select.form-control {
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius-sm);
	box-shadow: none;
	font-size: 13px;
	color: var(--fk-text);
	background: var(--fk-surface);
	height: auto;
	padding: 8px 11px;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.fk .form-control:focus {
	border-color: var(--fk-primary);
	box-shadow: 0 0 0 3px rgba(var(--fk-primary-rgb), .13);
	outline: none;
}

.fk .form-control::placeholder {
	color: var(--fk-muted);
}

.fk .form-control[disabled],
.fk .form-control[readonly] {
	background: var(--fk-app-bg);
	color: var(--fk-muted);
}

.fk .input-sm,
.fk .input-small,
.fk .input-xsmall {
	padding: 5px 9px;
	font-size: 12px;
}

.fk .control-label,
.fk label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fk-text);
}

.fk .form-group {
	margin-bottom: 14px;
}

.fk .help-block {
	font-size: 11.5px;
	color: var(--fk-muted);
}

.fk .has-error .form-control {
	border-color: var(--fk-danger);
}

.fk .has-error .help-block,
.fk .has-error .control-label,
.fk label.error {
	color: var(--fk-danger);
	font-weight: 500;
	font-size: 11.5px;
}

.fk .input-group-addon {
	border-color: var(--fk-border);
	background: var(--fk-app-bg);
	color: var(--fk-muted);
	border-radius: var(--fk-radius-sm);
	font-size: 12.5px;
}

/* select2 */
.fk .select2-container .select2-choice,
.fk .select2-container-multi .select2-choices {
	border-color: var(--fk-border);
	border-radius: var(--fk-radius-sm);
	background: var(--fk-surface);
	box-shadow: none;
	color: var(--fk-text);
	height: auto;
	padding: 6px 10px;
	font-size: 13px;
	line-height: 1.4;
}

.fk .select2-drop {
	border-color: var(--fk-border);
	border-radius: var(--fk-radius-sm);
	box-shadow: var(--fk-shadow-md);
}

.fk .select2-results .select2-highlighted {
	background: var(--fk-primary);
	color: var(--fk-primary-fg);
}

/* ---------- 12. Alerts and notes ---------------------------------------- */

.fk .alert,
.fk .note {
	border: 1px solid var(--fk-border);
	border-left-width: 1px;
	border-radius: var(--fk-radius);
	padding: 14px var(--fk-pad);
	font-size: 13px;
	margin-bottom: var(--fk-gap);
	color: var(--fk-text);
	box-shadow: none;
}

.fk .alert h4,
.fk .alert .alert-heading,
.fk .note h4 {
	font-size: 13.5px;
	font-weight: 650;
	margin: 0 0 3px;
	color: inherit;
}

.fk .alert p:last-child,
.fk .note p:last-child {
	margin-bottom: 0;
}

.fk .alert p,
.fk .note p {
	color: var(--fk-muted);
	font-size: 12.5px;
}

.fk .alert-warning,
.fk .note-warning {
	background: var(--fk-warning-soft);
	border-color: var(--fk-warning-soft);
	color: var(--fk-warning);
}

.fk .alert-danger,
.fk .alert-error,
.fk .note-danger,
.fk .note-error {
	background: var(--fk-danger-soft);
	border-color: var(--fk-danger-soft);
	color: var(--fk-danger);
}

.fk .alert-success,
.fk .note-success {
	background: var(--fk-success-soft);
	border-color: var(--fk-success-soft);
	color: var(--fk-success);
}

.fk .alert-info,
.fk .note-info {
	background: var(--fk-info-soft);
	border-color: var(--fk-info-soft);
	color: var(--fk-info);
}

/* The big "you must do this first" notice, as in the mockup. */
.fk-notice {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: var(--fk-primary-soft);
	border: 1px solid var(--fk-primary-soft-2);
	border-radius: var(--fk-radius);
	padding: 15px var(--fk-pad);
	margin-bottom: var(--fk-gap);
}

.fk-notice-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fk-primary);
	color: var(--fk-primary-fg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	margin-top: 1px;
}

.fk-notice-body {
	flex: 1 1 auto;
	min-width: 0;
}

.fk-notice-title {
	font-size: 13.5px;
	font-weight: 650;
	color: var(--fk-text);
	margin: 0 0 2px;
}

.fk-notice-text {
	font-size: 12.5px;
	color: var(--fk-muted);
	margin: 0;
}

.fk-notice-action {
	flex: 0 0 auto;
	align-self: center;
}

/* Metronic's alert close button is a background image we no longer ship. */
.fk .alert .close,
.fk .alert button.close {
	background: none;
	opacity: .4;
	font-size: 18px;
	line-height: 1;
	text-shadow: none;
	color: inherit;
	width: auto;
	height: auto;
}

.fk .alert .close:before {
	content: "\00d7";
}

.fk .alert .close:hover {
	opacity: .8;
}

/* ---------- 13. Modals, dropdowns, misc --------------------------------- */

.fk .modal-content {
	border: 0;
	border-radius: var(--fk-radius-lg);
	box-shadow: var(--fk-shadow-lg);
	overflow: hidden;
}

.fk .modal-header {
	border-bottom: 1px solid var(--fk-border);
	padding: 15px var(--fk-pad);
	min-height: 0;
}

.fk .modal-title {
	font-size: 15px;
	font-weight: 650;
}

.fk .modal-body {
	padding: var(--fk-pad);
}

.fk .modal-footer {
	border-top: 1px solid var(--fk-border);
	padding: 13px var(--fk-pad);
	background: var(--fk-app-bg);
}

.fk .modal-header .close {
	background: none;
	opacity: .4;
	font-size: 22px;
	line-height: 1;
	text-shadow: none;
	color: var(--fk-text);
	width: auto;
	height: auto;
	margin-top: -2px;
}

.fk .modal-header .close:before {
	content: "\00d7";
}

.fk .modal-backdrop.in {
	opacity: .35;
	background: #0b0f1c;
}

.fk .dropdown-menu {
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius);
	box-shadow: var(--fk-shadow-md);
	padding: 5px;
	font-size: 13px;
	min-width: 190px;
}

.fk .dropdown-menu > li > a {
	border-radius: var(--fk-radius-sm);
	padding: 7px 11px;
	color: var(--fk-text);
	font-size: 12.5px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.fk .dropdown-menu > li > a:hover,
.fk .dropdown-menu > li > a:focus {
	background: var(--fk-app-bg);
	color: var(--fk-text);
}

.fk .dropdown-menu > li > a > i {
	color: var(--fk-muted);
	width: 15px;
	text-align: center;
}

.fk .dropdown-menu .divider {
	background: var(--fk-border);
	margin: 4px 0;
}

/* Dropdowns in the topbar hang from the right edge of their button. */
.fk-topbar .dropdown-menu {
	right: 0;
	left: auto;
	margin-top: 6px;
}

.fk-topbar .dropdown-menu:before,
.fk-topbar .dropdown-menu:after {
	display: none;
}

.fk-topbar .dropdown-menu.extended {
	width: 300px;
	max-width: 84vw;
	padding: 0;
}

.fk-topbar .dropdown-menu.extended > li > p,
.fk-topbar .dropdown-menu.extended > li:first-child > p {
	background: var(--fk-app-bg);
	border: 0;
	border-radius: var(--fk-radius) var(--fk-radius) 0 0;
	padding: 11px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--fk-text);
	margin: 0;
}

.fk-topbar .dropdown-menu.extended .dropdown-menu-list > li > a {
	border-bottom: 1px solid var(--fk-border-soft);
	padding: 10px 14px;
	border-radius: 0;
	display: block;
}

.fk-topbar .dropdown-menu.extended li.external a {
	border-top: 1px solid var(--fk-border);
	background: var(--fk-app-bg);
	font-size: 12px;
	font-weight: 600;
	padding: 10px 14px;
	justify-content: space-between;
}

/* Tooltips and toasts */
.fk .tooltip-inner {
	background: var(--fk-text);
	border-radius: var(--fk-radius-sm);
	font-size: 11.5px;
	padding: 6px 9px;
}

.fk #toast-container > div {
	border-radius: var(--fk-radius);
	box-shadow: var(--fk-shadow-md);
	opacity: 1;
	font-size: 13px;
}

/* Metronic tabs used inside pages */
.fk .nav-tabs {
	border-bottom: 1px solid var(--fk-border);
}

.fk .nav-tabs > li > a {
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--fk-muted);
	font-size: 12.5px;
	font-weight: 550;
	padding: 9px 13px;
	margin-right: 0;
}

.fk .nav-tabs > li > a:hover {
	background: transparent;
	color: var(--fk-text);
	border-color: transparent;
}

.fk .nav-tabs > li.active > a,
.fk .nav-tabs > li.active > a:hover,
.fk .nav-tabs > li.active > a:focus {
	border: 0;
	border-bottom: 2px solid var(--fk-primary);
	background: transparent;
	color: var(--fk-primary);
	font-weight: 600;
}

/* The original breadcrumb bar, for pages we have not converted yet. */
.fk .page-breadcrumb {
	background: transparent;
	padding: 0;
	margin: 0 0 var(--fk-gap);
	border: 0;
	font-size: 11.5px;
	color: var(--fk-muted);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.fk .page-breadcrumb > li,
.fk .page-breadcrumb .page-breadcrumb-left,
.fk .page-breadcrumb .page-breadcrumb-right {
	display: flex;
	align-items: center;
	gap: 8px;
	float: none;
}

.fk .page-breadcrumb .page-breadcrumb-right {
	margin-left: auto;
}

.fk .page-breadcrumb a,
.fk .page-breadcrumb .breadcrumbs-link {
	color: var(--fk-muted);
	font-size: 11.5px;
}

.fk .page-breadcrumb a:hover {
	color: var(--fk-primary);
}

.fk .page-breadcrumb .breadcrumbs-separator:before {
	content: "\203a";
	opacity: .5;
}

.fk .page-breadcrumb .breadcrumbs-separator {
	background: none;
	width: auto;
	height: auto;
}

/* Loading overlay */
.fk .blockUI.blockMsg {
	border-radius: var(--fk-radius) !important;
}

/* ---------- 14. Responsive ---------------------------------------------- */

@media (max-width: 991px) {
	/* style-responsive.min.css sets "padding: 0 !important" on .page-container
	   below 991px, which drops the page header behind the fixed top bar. */
	.fk .page-container {
		padding-top: var(--fk-topbar-h) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 0 !important;
	}

	.fk .fk-topbar {
		left: 0;
	}

	.fk-navtoggle {
		display: flex;
	}

	.fk-nav {
		transform: translateX(-102%);
		transition: transform .18s ease;
		box-shadow: var(--fk-shadow-lg);
	}

	.fk-nav-open .fk-nav {
		transform: none;
	}

	.fk-nav-scrim {
		position: fixed;
		inset: 0;
		background: rgba(11, 15, 28, .4);
		z-index: 1029;
		display: none;
	}

	.fk-nav-open .fk-nav-scrim {
		display: block;
	}

	.fk-topbar-search {
		flex: 1 1 auto;
	}
}

@media (max-width: 767px) {
	.fk .page-content {
		padding: 14px 12px 40px;
	}

	.fk-title {
		font-size: 19px;
	}

	.fk .portlet > .portlet-title,
	.fk .portlet > .portlet-body {
		padding-left: 14px;
		padding-right: 14px;
	}

	.fk-topbar-search {
		display: none;
	}

	.fk-userbtn .fk-userbtn-name {
		display: none;
	}

	.fk-stats {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	}
}

/* ---------- 15. RTL ------------------------------------------------------

   header.php puts dir="rtl" on <body>, which is the same element that carries
   the .fk class. A selector written as [dir="rtl"] .fk … therefore never
   matches, because .fk is not a descendant of itself. Each rule below lists
   both forms: dir on the .fk element, and dir on an ancestor of it.
   ------------------------------------------------------------------------ */

.fk[dir="rtl"] .page-container,
[dir="rtl"] .fk .page-container {
	padding-left: 0;
	padding-right: var(--fk-nav-w, 0px);
}

.fk[dir="rtl"] .fk-nav,
[dir="rtl"] .fk .fk-nav,
[dir="rtl"] .fk-nav {
	left: auto;
	right: 0;
}

.fk[dir="rtl"] .fk-topbar,
[dir="rtl"] .fk .fk-topbar {
	left: 0;
	right: var(--fk-nav-w, 0px);
}

.fk[dir="rtl"] .fk-panel,
.fk[dir="rtl"] .fk-side,
[dir="rtl"] .fk-panel,
[dir="rtl"] .fk-side {
	border-right: 0;
	border-left: 1px solid var(--fk-border);
}

.fk[dir="rtl"] .fk-nav-sub,
[dir="rtl"] .fk-nav-sub {
	border-left: 0;
	border-right: 1px solid var(--fk-border);
	margin-left: 0;
	margin-right: 18px;
	padding: 0 10px 0 0;
}

.fk[dir="rtl"] .fk-topbar-search i,
.fk[dir="rtl"] .fk-sidesearch i,
[dir="rtl"] .fk-topbar-search i,
[dir="rtl"] .fk-sidesearch i {
	left: auto;
	right: 11px;
}

.fk[dir="rtl"] .fk-topbar-search input,
[dir="rtl"] .fk-topbar-search input {
	padding: 0 32px 0 12px;
}

.fk[dir="rtl"] .fk-sidesearch input,
[dir="rtl"] .fk-sidesearch input {
	padding: 0 29px 0 10px;
}

.fk[dir="rtl"] .table-toolbar .pull-right,
.fk[dir="rtl"] .table-toolbar .btn-group.pull-right,
[dir="rtl"] .fk .table-toolbar .pull-right {
	margin-left: 0;
	margin-right: auto;
}

.fk[dir="rtl"] .fk-topbar .dropdown-menu,
[dir="rtl"] .fk-topbar .dropdown-menu {
	right: auto;
	left: 0;
}

.fk[dir="rtl"] .fk-head-actions,
[dir="rtl"] .fk-head-actions {
	margin-left: 0;
	margin-right: auto;
}

@media (max-width: 991px) {
	.fk[dir="rtl"] .page-container,
	[dir="rtl"] .fk .page-container {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.fk[dir="rtl"] .fk-topbar,
	[dir="rtl"] .fk .fk-topbar {
		right: 0;
	}

	.fk[dir="rtl"] .fk-nav,
	[dir="rtl"] .fk-nav {
		transform: translateX(102%);
	}

	.fk[dir="rtl"].fk-nav-open .fk-nav,
	[dir="rtl"] .fk-nav-open .fk-nav,
	.fk-nav-open[dir="rtl"] .fk-nav {
		transform: none;
	}
}

/* ---------- Print -------------------------------------------------------- */

@media print {
	.fk-nav,
	.fk-topbar,
	.fk .footer,
	.fk-head-actions,
	.fk .table-toolbar {
		display: none !important;
	}

	.fk .page-container {
		padding: 0 !important;
	}

	.fk .portlet {
		border: 0;
		box-shadow: none;
	}
}

/* ==========================================================================
   16. Overrides for the legacy stylesheets

   style.min.css and style-metronic.css paint buttons with !important — most
   awkwardly ".btn-group > .btn:first-child", which forces green onto whatever
   happens to be first in a group. !important cannot be out-ordered, only
   out-specified, so the rules below are arranged in two tiers:

     tier 1  a neutral base, matched at the same specificity as the legacy rule
     tier 2  the colour classes, one class more specific, so they always win

   Each tier lists both the plain and the inside-a-btn-group form so the two
   stay level with each other. This is the only place !important is used.
   ========================================================================== */

/* Third-party widgets ship their own button skins (the rich-text toolbar, the
   date and time pickers, bootbox dialogs). Repainting those breaks the widget,
   so every rule below excludes them. */

/* --- tier 1: neutral base ------------------------------------------------ */
/* No !important here — fekara-ui.css already loads last, so ordinary
   specificity is enough for a plain .btn. */
.fk .btn:not(.note-btn):not(.fc-button) {
	background: var(--fk-surface);
	border-color: var(--fk-border);
	color: var(--fk-text);
}

.fk .btn:not(.note-btn):not(.fc-button):hover {
	background: var(--fk-app-bg);
	border-color: var(--fk-border);
}

/* !important only where it is actually needed: style.min.css paints
   ".btn-group > .btn:first-child" green with !important, and nothing but
   !important can beat that. */
.fk .btn-group:not(.note-btn-group) > .btn:not(.note-btn),
.fk .btn-group:not(.note-btn-group) > .dropdown-toggle:not(.note-btn) {
	background: var(--fk-surface) !important;
	border-color: var(--fk-border) !important;
	color: var(--fk-text) !important;
}

.fk .btn-group:not(.note-btn-group) > .btn:not(.note-btn):hover {
	background: var(--fk-app-bg) !important;
	border-color: var(--fk-border) !important;
}

/* Widget internals keep whatever they shipped with. */
.fk .note-editor .btn,
.fk .note-popover .btn,
.fk .datepicker .btn,
.fk .bootstrap-timepicker-widget .btn,
.fk .bootbox .btn,
.fk .fc-button {
	background: revert;
	border-color: revert;
	color: revert;
}

/* --- tier 2: brand ------------------------------------------------------- */
.fk .btn.btn-primary,
.fk .btn.blue,
.fk .btn.green,
.fk .btn.purple,
.fk .btn.btn-success,
.fk .btn.btn-info,
.fk .btn-group:not(.note-btn-group) > .btn.btn-primary,
.fk .btn-group:not(.note-btn-group) > .btn.blue,
.fk .btn-group:not(.note-btn-group) > .btn.green,
.fk .btn-group:not(.note-btn-group) > .btn.purple,
.fk .btn-group:not(.note-btn-group) > .btn.btn-success,
.fk .btn-group:not(.note-btn-group) > .btn.btn-info {
	background: var(--fk-primary) !important;
	border-color: var(--fk-primary) !important;
	color: var(--fk-primary-fg) !important;
}

.fk .btn.btn-primary:hover,
.fk .btn.blue:hover,
.fk .btn.green:hover,
.fk .btn.purple:hover,
.fk .btn.btn-success:hover,
.fk .btn.btn-info:hover,
.fk .btn-group > .btn.btn-primary:hover,
.fk .btn-group > .btn.blue:hover,
.fk .btn-group > .btn.green:hover,
.fk .btn-group > .btn.purple:hover {
	background: var(--fk-primary-dark) !important;
	border-color: var(--fk-primary-dark) !important;
	color: var(--fk-primary-fg) !important;
}

/* --- tier 2: destructive ------------------------------------------------- */
.fk .btn.red,
.fk .btn.btn-danger,
.fk .btn-group:not(.note-btn-group) > .btn.red,
.fk .btn-group:not(.note-btn-group) > .btn.btn-danger {
	background: var(--fk-danger) !important;
	border-color: var(--fk-danger) !important;
	color: #fff !important;
}

.fk .btn.red:hover,
.fk .btn.btn-danger:hover,
.fk .btn-group > .btn.red:hover,
.fk .btn-group > .btn.btn-danger:hover {
	background: var(--fk-danger) !important;
	border-color: var(--fk-danger) !important;
	color: #fff !important;
	filter: brightness(.92);
}

/* --- tier 2: caution ----------------------------------------------------- */
.fk .btn.yellow,
.fk .btn.btn-warning,
.fk .btn-group:not(.note-btn-group) > .btn.yellow,
.fk .btn-group:not(.note-btn-group) > .btn.btn-warning {
	background: var(--fk-warning) !important;
	border-color: var(--fk-warning) !important;
	color: #fff !important;
}

.fk .btn.yellow:hover,
.fk .btn.btn-warning:hover,
.fk .btn-group > .btn.yellow:hover {
	filter: brightness(.94);
	color: #fff !important;
}

/* --- tier 2: a deliberately dark button, for a notice's main action ------ */
.fk .btn.fk-btn-dark,
.fk .btn-group:not(.note-btn-group) > .btn.fk-btn-dark {
	background: var(--fk-text) !important;
	border-color: var(--fk-text) !important;
	color: #fff !important;
}

.fk .btn.fk-btn-dark:hover {
	filter: brightness(1.35);
	color: #fff !important;
}

/* The old theme positions and paints the header bar itself. */
.fk .fk-topbar,
.fk header.fk-topbar {
	background: var(--fk-surface) !important;
	border-bottom: 1px solid var(--fk-border) !important;
	box-shadow: none !important;
	filter: none !important;
}

/* Metronic's fixed-header body padding fights our own shell padding. */
.fk.page-header-fixed .page-container {
	margin-top: 0 !important;
}

.fk.page-header-fixed .page-content-wrapper .page-content {
	margin-top: 0 !important;
	min-height: calc(100vh - var(--fk-topbar-h)) !important;
}

/* The original sidebar rules must not reach the new nav. */
.fk-layout-rail .page-sidebar-wrapper,
.fk-layout-grouped .page-sidebar-wrapper,
.fk-layout-rail .page-sidebar,
.fk-layout-grouped .page-sidebar {
	display: none !important;
}

/* Portlet colour bars from Metronic are painted with !important in places. */
.fk .portlet.box > .portlet-title {
	background-color: transparent !important;
}

.fk .portlet.box.blue,
.fk .portlet.box.green,
.fk .portlet.box.red,
.fk .portlet.box.yellow,
.fk .portlet.box.purple {
	border-color: var(--fk-border) !important;
}

/* Chrome components keep their own colours regardless of link styling. */
.fk .fk-nav-link,
.fk a.fk-nav-link,
.fk a.fk-nav-link:hover,
.fk a.fk-nav-link:focus {
	color: var(--fk-text);
}

.fk a.fk-nav-link.is-active,
.fk a.fk-nav-link.is-active:hover {
	color: var(--fk-primary-dark);
}

.fk .fk-nav-sub a.fk-nav-link {
	color: var(--fk-muted);
}

.fk .fk-nav-sub a.fk-nav-link:hover {
	color: var(--fk-text);
}

.fk .fk-nav-sub a.fk-nav-link.is-active {
	color: var(--fk-primary-dark);
}

.fk a.fk-rail-item,
.fk a.fk-rail-item:focus {
	color: var(--fk-rail-fg);
}

.fk a.fk-rail-item:hover {
	color: #fff;
}

.fk a.fk-rail-item.is-active,
.fk a.fk-rail-item.is-active:hover,
.fk a.fk-rail-item.is-active:focus {
	color: var(--fk-primary-fg);
}

.fk a.fk-userbtn,
.fk a.fk-userbtn:hover,
.fk a.fk-userbtn:focus,
.fk a.fk-side-brand,
.fk a.fk-side-brand:hover {
	color: var(--fk-text);
}

.fk a.fk-iconbtn,
.fk a.fk-langbtn {
	color: var(--fk-muted);
}

.fk a.fk-iconbtn:hover,
.fk a.fk-langbtn:hover {
	color: var(--fk-text);
}

/* Breadcrumbs on pages we have not converted yet. */
.fk .page-breadcrumb a,
.fk .page-breadcrumb .breadcrumbs-link,
.fk .page-breadcrumb > li,
.fk .page-breadcrumb > li > a {
	color: var(--fk-muted) !important;
	font-size: 11.5px;
}

.fk .page-breadcrumb a:hover,
.fk .page-breadcrumb .breadcrumbs-link:hover {
	color: var(--fk-primary) !important;
}

/* The topbar user avatar falls back to a placeholder image; keep it round and
   stop it rendering as a black square when the file is missing. */
.fk .fk-userbtn img {
	background: var(--fk-app-bg);
	object-fit: cover;
}

/* Legacy spacers that existed only to clear the old fixed header. The new
   shell already reserves that space, so they now show as a large empty gap
   between the page heading and the first card. */
.fk .dashbord-padding,
.fk .dashbord-padding1,
.fk .dashbord-padding2,
.fk .dashbord-top {
	padding-top: 0;
}

.fk .marg-top {
	margin-top: 0;
}

/* Topbar labels must not wrap onto a second line. */
.fk-langbtn,
.fk-langbtn .username,
.fk-userbtn,
.fk-userbtn .fk-userbtn-name {
	white-space: nowrap;
}

.fk-userbtn .fk-userbtn-name {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* An empty .row left behind by the header conversion should not add height. */
.fk .page-content > .row:empty {
	display: none;
}

/* Bootstrap's ".nav > li > a { display:block }" outranks a single component
   class, which stacked the flag above its label in the language button. These
   rules restate the intent at a specificity the legacy sheets cannot beat. */
.fk .fk-topbar-actions > li > a.fk-iconbtn,
.fk .fk-topbar-actions > li > a.fk-langbtn,
.fk .fk-topbar-actions > li > a.fk-userbtn {
	display: flex;
	align-items: center;
	float: none;
	position: relative;
}

.fk .fk-topbar-actions > li > a.fk-iconbtn {
	justify-content: center;
	padding: 0;
}

/* DataTables adds .odd/.even rather than relying on :nth-child, so the old
   zebra striping survived the table restyle. */
.fk table.dataTable > tbody > tr.odd,
.fk table.dataTable > tbody > tr.even,
.fk table.dataTable > tbody > tr.odd > td,
.fk table.dataTable > tbody > tr.even > td,
.fk .table > tbody > tr.odd,
.fk .table > tbody > tr.even,
.fk .table > tbody > tr.odd > td,
.fk .table > tbody > tr.even > td,
.fk table.dataTable.stripe tbody tr.odd,
.fk table.dataTable.display tbody tr.odd {
	background: transparent;
}

.fk table.dataTable > tbody > tr:hover > td,
.fk table.dataTable > tbody > tr.odd:hover > td,
.fk table.dataTable > tbody > tr.even:hover > td {
	background: rgba(var(--fk-text-rgb), .025);
}

/* A counter badge showing "0" is noise; fekara-ui.js empties it and this
   hides the empty element. */
.fk .fk-iconbtn > .badge:empty,
.fk .fk-iconbtn > .badge.is-zero {
	display: none;
}

/* tablesaw.css turns any link in a table's last cell into a hard-coded blue
   pill (it is the old theme's row-action convention). Keep the affordance but
   paint it from the palette, as a quiet secondary button. */
.fk .table > tbody > tr > td:last-of-type a {
	background: var(--fk-surface);
	border: 1px solid var(--fk-border);
	color: var(--fk-text);
	padding: 5px 11px;
	border-radius: var(--fk-radius-sm);
	font-size: 11.5px;
	font-weight: 600;
	display: inline-block;
	line-height: 1.5;
	transition: background .12s ease, border-color .12s ease;
}

.fk .table > tbody > tr > td:last-of-type a:hover {
	background: var(--fk-app-bg);
	border-color: var(--fk-primary);
	color: var(--fk-primary-dark);
}

/* …but a link that is already a button, or a plain icon action, keeps its own
   styling rather than being boxed twice. */
.fk .table > tbody > tr > td:last-of-type a.btn,
.fk .table > tbody > tr > td:last-of-type a.fk-pill {
	padding: 5px 10px;
	border-radius: var(--fk-radius-sm);
}

.fk .table > tbody > tr > td:last-of-type a.btn.btn-xs {
	font-size: 11.5px;
}

/* ==========================================================================
   17. Sign-in screen

   login.php has its own <head> and never went through header.php, so it gets
   the tokens and this block instead of the app shell.
   ========================================================================== */

.fk.login {
	background: var(--fk-app-bg);
	font-family: var(--fk-font);
	color: var(--fk-text);
}

.fk.login .login-page-content {
	background: var(--fk-app-bg);
}

.fk.login .content {
	background: var(--fk-surface);
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius-lg);
	box-shadow: var(--fk-shadow-md);
	padding: 28px;
	width: 100%;
	max-width: 380px;
}

.fk.login .logo {
	margin-bottom: 20px;
	text-align: center;
}

.fk.login .logo img {
	max-height: 44px;
	width: auto;
}

.fk.login h3,
.fk.login .form-title {
	font-size: 17px;
	font-weight: 650;
	color: var(--fk-text);
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}

.fk.login .hint,
.fk.login .form-subtitle {
	font-size: 12.5px;
	color: var(--fk-muted);
	margin-bottom: 18px;
}

.fk.login .form-control {
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius-sm);
	background: var(--fk-surface);
	box-shadow: none;
	font-size: 13.5px;
	padding: 10px 12px;
	height: auto;
	color: var(--fk-text);
}

.fk.login .form-control:focus {
	border-color: var(--fk-primary);
	box-shadow: 0 0 0 3px rgba(var(--fk-primary-rgb), .13);
	outline: none;
}

.fk.login .btn,
.fk.login .btn.blue,
.fk.login .btn-primary,
.fk.login .btn.green {
	background: var(--fk-primary) !important;
	border-color: var(--fk-primary) !important;
	color: var(--fk-primary-fg) !important;
	border-radius: var(--fk-radius-sm);
	font-weight: 600;
	font-size: 13px;
	padding: 10px 16px;
	box-shadow: none;
	text-shadow: none;
}

.fk.login .btn:hover {
	background: var(--fk-primary-dark) !important;
	border-color: var(--fk-primary-dark) !important;
}

.fk.login .btn.default,
.fk.login .btn[data-dismiss] {
	background: var(--fk-surface) !important;
	border-color: var(--fk-border) !important;
	color: var(--fk-text) !important;
}

.fk.login .forget-password,
.fk.login a {
	color: var(--fk-primary);
	font-size: 12.5px;
}

.fk.login a:hover {
	color: var(--fk-primary-dark);
}

.fk.login .copyright,
.fk.login .login-footer {
	color: var(--fk-muted);
	font-size: 11.5px;
}

/* "Other logins" — the teacher / student / parent entry points. */
.fk.login .login-options a,
.fk.login .other-logins a {
	display: flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius-sm);
	padding: 9px 11px;
	color: var(--fk-text);
	font-size: 12.5px;
	font-weight: 550;
	background: var(--fk-surface);
	transition: border-color .12s ease, background .12s ease;
}

.fk.login .login-options a:hover,
.fk.login .other-logins a:hover {
	border-color: var(--fk-primary);
	background: var(--fk-app-bg);
	color: var(--fk-primary-dark);
}

/* The "Other logins" tiles are a .btn-group of plain links, so they inherit
   btn-group's square joins and the icons sit flush against the labels. */
.fk.login .login-form .btn-group,
.fk.login form .btn-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	width: 100%;
	margin-top: 8px;
}

.fk.login .login-form .btn-group > a,
.fk.login form .btn-group > a {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--fk-border) !important;
	border-radius: var(--fk-radius-sm) !important;
	background: var(--fk-surface) !important;
	color: var(--fk-text) !important;
	padding: 9px 11px;
	font-size: 12.5px;
	font-weight: 550;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: border-color .12s ease, background .12s ease;
}

.fk.login .login-form .btn-group > a > i,
.fk.login form .btn-group > a > i {
	flex: 0 0 auto;
	width: 15px;
	text-align: center;
	color: var(--fk-muted);
	font-size: 13px;
}

.fk.login .login-form .btn-group > a:hover,
.fk.login form .btn-group > a:hover {
	border-color: var(--fk-primary) !important;
	background: var(--fk-app-bg) !important;
	color: var(--fk-primary-dark) !important;
}

.fk.login .login-form .btn-group > a:hover > i {
	color: var(--fk-primary);
}

/* ==========================================================================
   18. The app's own pill buttons

   Several toolbars use bespoke classes (.pink-btn, .blue-btn, .green-btn,
   .gold-btn, .red-btn and friends) defined in style.min.css with !important
   and hard-coded hex values, scoped under .all-student-btns .btn-group.
   Left alone they ignore the palette entirely, so a toolbar stays rainbow
   coloured no matter what brand colour the admin picks.

   The intent is preserved rather than flattened: the primary action stays
   accented, the destructive one stays red, and everything else becomes a
   quiet secondary button.
   ========================================================================== */

.fk .all-student-btns .btn-group > a,
.fk .all-student-btns .btn-group > button,
.fk a.pink-btn,
.fk a.blue-btn,
.fk a.green-btn,
.fk a.gold-btn,
.fk a.red-btn,
.fk a.info-btn,
.fk a.back-btn,
.fk a.reply-btn,
.fk a.forward-btn,
.fk a.compose-btn,
.fk a.submit-btn,
.fk a.register-btn,
.fk a.settings-btn,
.fk a.salaries-btn,
.fk a.config-btn {
	border-radius: var(--fk-radius-sm) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	padding: 8px 14px !important;
	line-height: 1.4 !important;
	border: 1px solid var(--fk-border) !important;
	background-color: var(--fk-surface) !important;
	color: var(--fk-text) !important;
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	transition: background-color .12s ease, border-color .12s ease;
}

.fk .all-student-btns .btn-group > a:hover,
.fk a.blue-btn:hover,
.fk a.green-btn:hover,
.fk a.gold-btn:hover,
.fk a.info-btn:hover,
.fk a.back-btn:hover {
	background-color: var(--fk-app-bg) !important;
	border-color: var(--fk-border) !important;
	color: var(--fk-text) !important;
}

/* The one accented action in each toolbar. */
.fk .all-student-btns .btn-group > a.pink-btn,
.fk a.pink-btn,
.fk a.submit-btn,
.fk a.register-btn,
.fk a.compose-btn {
	background-color: var(--fk-primary) !important;
	border-color: var(--fk-primary) !important;
	color: var(--fk-primary-fg) !important;
}

.fk .all-student-btns .btn-group > a.pink-btn:hover,
.fk a.pink-btn:hover,
.fk a.submit-btn:hover,
.fk a.register-btn:hover,
.fk a.compose-btn:hover {
	background-color: var(--fk-primary-dark) !important;
	border-color: var(--fk-primary-dark) !important;
	color: var(--fk-primary-fg) !important;
}

/* Destructive stays unmistakably destructive. */
.fk .all-student-btns .btn-group > a.red-btn,
.fk a.red-btn {
	background-color: var(--fk-danger) !important;
	border-color: var(--fk-danger) !important;
	color: #fff !important;
}

.fk .all-student-btns .btn-group > a.red-btn:hover,
.fk a.red-btn:hover {
	background-color: var(--fk-danger) !important;
	border-color: var(--fk-danger) !important;
	color: #fff !important;
	filter: brightness(.92);
}

.fk .all-student-btns .btn-group > a > i,
.fk a.pink-btn > i,
.fk a.blue-btn > i,
.fk a.green-btn > i,
.fk a.gold-btn > i,
.fk a.red-btn > i {
	color: inherit !important;
	font-size: 12px !important;
	margin: 0 !important;
}

.fk .all-student-btns .btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fk .all-student-btns .btn-group > a {
	border-radius: var(--fk-radius-sm) !important;
}

/* Long selects and inputs must not push the page sideways on a phone.
   Note: we constrain the children rather than setting overflow on
   .page-content. Any overflow value there makes overflow-y compute to auto,
   which turns the page body into its own scroll box — that clipped the
   dashboard tiles and trapped dropdown menus inside their card. */
.fk .page-content select,
.fk .page-content input,
.fk .page-content textarea,
.fk .page-content .form-control,
.fk .page-content .select2-container,
.fk .page-content img {
	max-width: 100%;
}

/* Only the wrappers that exist for the purpose actually scroll. */
.fk .fk-tablewrap,
.fk .dataTables_wrapper {
	overflow-x: auto;
}

/* ==========================================================================
   19. Legacy components the first pass missed

   Found by walking the real pages rather than by reading the CSS: the settings
   screens, the profile page, the inbox and the form-heavy screens all use
   Metronic classes that no earlier section covered, so they still looked like
   the old theme sitting inside the new one.
   ========================================================================== */

/* Section header rows inside settings tables (<th class="invertblack">).
   These were solid royal blue bars. */
.fk .invertblack,
.fk th.invertblack,
.fk .table > tbody > tr > th.invertblack,
.fk .table > thead > tr > th.invertblack {
	background: var(--fk-app-bg) !important;
	color: var(--fk-text) !important;
	font-size: 11px !important;
	font-weight: 650 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	border: 0 !important;
	border-top: 1px solid var(--fk-border) !important;
	border-bottom: 1px solid var(--fk-border) !important;
	padding: 11px 12px !important;
	text-shadow: none !important;
}

.fk .invertblack i {
	color: var(--fk-muted) !important;
	margin-right: 6px;
}

/* The old page title, on any page still using it (a couple keep it because
   their heading is generated at runtime). */
.fk h3.page-title,
.fk .page-title {
	font-size: 22px;
	font-weight: 680;
	color: var(--fk-text);
	letter-spacing: -0.02em;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 1.2;
}

.fk h3.page-title > small,
.fk .page-title > small {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--fk-muted);
	margin-top: 4px;
	letter-spacing: 0;
}

/* A breadcrumb row we deliberately kept because it holds a real action. It now
   reads as an action bar rather than a second navigation trail. */
.fk .page-breadcrumb.breadcrumb {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0 0 var(--fk-gap);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	font-size: 11.5px;
}

.fk .page-breadcrumb.breadcrumb > li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--fk-muted);
}

.fk .page-breadcrumb.breadcrumb > li.btn-group {
	margin-left: auto;
}

.fk .page-breadcrumb.breadcrumb > li > i.fa-angle-right,
.fk .page-breadcrumb.breadcrumb > li > i.fa-home {
	opacity: .45;
	font-size: 10px;
}

/* --- forms ---------------------------------------------------------------- */

.fk .form-body {
	padding: 0;
}

.fk .form-bordered .form-group {
	border-bottom: 1px solid var(--fk-border-soft);
	margin: 0;
	padding: 12px 0;
}

.fk .form-bordered .form-group:last-child {
	border-bottom: 0;
}

.fk .form-horizontal.form-bordered.form-row-stripped .form-group:nth-child(even) {
	background-color: transparent;
}

.fk .form-actions {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--fk-border);
	padding: 14px 0 0;
	margin-top: var(--fk-gap);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.fk .form-actions.fluid > .row > div {
	padding-left: 0;
}

.fk .input-xlarge,
.fk .input-large {
	max-width: 100%;
}

/* Inline-editable fields (bootstrap-editable) read as editable, not as links. */
.fk .editable-click,
.fk a.editable-click,
.fk .page-content a.editable {
	border-bottom: 1px dashed var(--fk-border);
	color: var(--fk-text);
	font-weight: 500;
}

.fk .editable-click:hover,
.fk a.editable-click:hover {
	border-bottom-color: var(--fk-primary);
	color: var(--fk-primary-dark);
}

.fk .editable-empty,
.fk .editable-empty:hover {
	color: var(--fk-muted);
	font-style: normal;
}

/* --- profile / two-column detail layout ---------------------------------- */

.fk .cont-col1,
.fk .cont-col2 {
	background: transparent;
}

.fk .col1,
.fk .col2 {
	color: var(--fk-text);
}

/* --- inbox ---------------------------------------------------------------- */

.fk .inbox-small-cells,
.fk .view-message {
	color: var(--fk-text);
}

/* The mail folder list. Note the markup: <ul class="inbox-nav"> with
   <li class="inbox active"> — the "inbox" class is on the list item, not on a
   wrapper, and each link is itself a .btn that the legacy sheet paints blue. */
.fk .inbox-nav {
	padding: 0;
	margin: 0 0 var(--fk-gap);
	list-style: none;
}

.fk .inbox-nav > li {
	display: block;
	margin-bottom: 2px;
	background: transparent !important;
}

.fk .inbox-nav > li > a,
.fk .inbox-nav > li > a.btn {
	display: block;
	width: 100%;
	text-align: left;
	border-radius: var(--fk-radius-sm) !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--fk-text) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 8px 11px !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.fk .inbox-nav > li > a:hover,
.fk .inbox-nav > li > a.btn:hover {
	background: rgba(var(--fk-text-rgb), .045) !important;
	color: var(--fk-text) !important;
}

.fk .inbox-nav > li.active > a,
.fk .inbox-nav > li.active > a.btn {
	background: var(--fk-primary-soft) !important;
	color: var(--fk-primary-dark) !important;
	font-weight: 600 !important;
}

/* The little pointer Metronic puts on the active folder. */
.fk .inbox-nav > li > b {
	display: none;
}

/* Compose is the one real action in that column. */
.fk .inbox-nav > li.compose-btn {
	margin-bottom: 10px;
}

.fk .inbox-nav > li.compose-btn > a,
.fk .inbox-nav > li.compose-btn > a.btn,
.fk .inbox-nav > li.compose-btn > a.btn.green {
	background: var(--fk-primary) !important;
	color: var(--fk-primary-fg) !important;
	font-weight: 600 !important;
	text-align: center;
}

.fk .inbox-nav > li.compose-btn > a:hover {
	background: var(--fk-primary-dark) !important;
	color: var(--fk-primary-fg) !important;
}

.fk .view-message .date,
.fk .inbox .date {
	color: var(--fk-muted);
	font-size: 11.5px;
}

/* --- small text utilities the theme uses --------------------------------- */

.fk .text-muted,
.fk .desc {
	color: var(--fk-muted);
}

.fk .label-sm {
	font-size: 10.5px;
	padding: 2px 8px;
}

/* --- dashboard tiles ------------------------------------------------------ */

.fk .dashbord-top {
	margin-bottom: var(--fk-gap);
}

.fk .dashbord-top .col-md-3,
.fk .dashbord-top .col-md-4,
.fk .dashbord-top .col-md-6 {
	margin-bottom: var(--fk-gap);
}

/* ==========================================================================
   20. Dashboard stat tiles

   .dashboard-stat is Metronic's KPI tile: a coloured slab with a big faded
   icon clipped by overflow:hidden. It was the one thing on the landing page
   that still looked like the old theme. Rebuilt here to match .fk-stat, using
   the tile's existing markup (.visual > i, .details .desc, .details .number,
   a.more) so no page needs editing.
   ========================================================================== */

.fk .dashboard-stat {
	background: var(--fk-surface);
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius);
	box-shadow: var(--fk-shadow);
	height: auto;
	min-height: 0;
	overflow: visible;
	padding: 16px var(--fk-gap);
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	position: relative;
}

.fk .dashboard-stat:before,
.fk .dashboard-stat:after {
	display: none;
}

/* The icon becomes a tinted rounded badge instead of a clipped watermark. */
.fk .dashboard-stat > .visual {
	float: none;
	width: 46px;
	height: 46px;
	min-width: 46px;
	padding: 0;
	margin: 0;
	border-radius: var(--fk-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	background: var(--fk-primary-soft);
	color: var(--fk-primary);
	flex: 0 0 auto;
}

.fk .dashboard-stat > .visual > i {
	font-size: 19px !important;
	line-height: 1 !important;
	margin: 0 !important;
	color: inherit !important;
	opacity: 1;
	float: none;
	width: auto;
	height: auto;
}

.fk .dashboard-stat > .details {
	float: none;
	padding: 0;
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.fk .dashboard-stat > .details > .desc {
	color: var(--fk-muted);
	font-size: 10.5px;
	font-weight: 650;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fk .dashboard-stat > .details > .number {
	color: var(--fk-text);
	font-size: 22px;
	font-weight: 680;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "View more" becomes a quiet arrow in the corner rather than a footer bar. */
.fk .dashboard-stat > .more {
	position: absolute;
	right: 12px;
	bottom: 10px;
	background: transparent !important;
	color: var(--fk-muted) !important;
	font-size: 12px;
	padding: 4px;
	clear: none;
	display: block;
	text-align: right;
	border-radius: var(--fk-radius-sm);
	transition: color .12s ease, background .12s ease;
}

.fk .dashboard-stat > .more:hover {
	color: var(--fk-primary) !important;
	background: var(--fk-primary-soft) !important;
}

.fk .dashboard-stat > .more > i {
	margin: 0;
}

/* Metronic's colour classes drive the badge tint, mapped to the palette so a
   brand-colour change carries through here too. */
.fk .dashboard-stat.blue > .visual,
.fk .dashboard-stat.blue-madison > .visual,
.fk .dashboard-stat.purple > .visual {
	background: var(--fk-primary-soft);
	color: var(--fk-primary);
}

.fk .dashboard-stat.green > .visual,
.fk .dashboard-stat.green-haze > .visual {
	background: var(--fk-success-soft);
	color: var(--fk-success);
}

.fk .dashboard-stat.red > .visual,
.fk .dashboard-stat.red-intense > .visual {
	background: var(--fk-danger-soft);
	color: var(--fk-danger);
}

.fk .dashboard-stat.yellow > .visual,
.fk .dashboard-stat.yellow-crusta > .visual {
	background: var(--fk-warning-soft);
	color: var(--fk-warning);
}

.fk .dashboard-stat.grey > .visual,
.fk .dashboard-stat.light-grey > .visual {
	background: var(--fk-info-soft);
	color: var(--fk-info);
}

/* A "SEPTEMBER 2026" style period chip some tiles carry. */
.fk .dashboard-stat .label,
.fk .dashboard-stat .badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--fk-app-bg);
	color: var(--fk-muted);
	font-size: 9.5px;
	letter-spacing: .06em;
}

/* Charts and other widgets on the dashboard sit in normal cards. */
.fk .dashbord-top + .clearfix + .row .portlet,
.fk .page-content .portlet.light {
	background: var(--fk-surface);
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius);
	box-shadow: var(--fk-shadow);
}

/* ==========================================================================
   21. Stray Bootstrap columns

   Several pages (the dashboard among them) put a bare <div class="col-md-12">
   straight inside .page-content with no .row around it. Bootstrap 3 floats
   columns, and a float with nothing to clear it lets the next row slide
   underneath — on the dashboard that made the KPI tiles overlap the page
   heading. Neutralise the float for a column that has no row to belong to.
   ========================================================================== */

.fk .page-content > [class*="col-md-"],
.fk .page-content > [class*="col-lg-"],
.fk .page-content > [class*="col-sm-"],
.fk .page-content > [class*="col-xs-"] {
	float: none;
	width: auto;
	padding-left: 0;
	padding-right: 0;
}

/* Rows and our own page header always start on a clean line. */
.fk .page-content > .row,
.fk .fk-page-head,
.fk .fk-stats {
	clear: both;
}

/* .row uses negative margins to cancel column padding; at the top level of
   .page-content there is no padding to cancel, so it just pushes content out. */
.fk .page-content > .row {
	margin-left: 0;
	margin-right: 0;
}

.fk .page-content > .row > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
}

/* Multi-column rows keep their gutters — but only while the columns are
   actually side by side. Below Bootstrap's md breakpoint they stack, and a
   left gutter on every column except the first just knocks them out of line. */
@media (min-width: 992px) {
	.fk .page-content > .row > [class*="col-"] + [class*="col-"] {
		padding-left: var(--fk-gap);
	}
}

/* style.min.css pins .dashboard-bar with position:fixed, top:63px, width:80.6%
   — it was a sticky breadcrumb strip sized for the old fixed header and open
   sidebar. Left in place it sits outside the flow, so on the dashboard the
   page heading floated on top of the KPI tiles. The new shell handles its own
   offsets, so put this element back in normal flow. */
.fk .page-content .dashboard-bar,
.fk.page-header-fixed .page-content .dashboard-bar,
.fk.page-header-fixed.page-sidebar-closed .page-content .dashboard-bar {
	position: static !important;
	top: auto !important;
	width: auto !important;
	z-index: auto !important;
	background-color: transparent !important;
	margin-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* A few pages keep their old breadcrumb row because it holds a real control
   (batch_classes.php hides "Add Class" in there). On the rest the markup is
   commented-out Metronic boilerplate, which a text scan cannot reliably tell
   apart — but the browser can, because a comment is not an element. So hide
   the row only when it provably contains no control. Guarded by @supports, so
   a browser without :has() simply shows it as before. */
@supports selector(:has(*)) {
	.fk .page-breadcrumb.breadcrumb:not(:has(.btn)):not(:has(button)):not(:has(input)) {
		display: none;
	}
}

/* Detail tables (profile, settings) should fill their card, not sit in a
   half-width column, and the zebra striping is heavier than the new tables. */
.fk .page-content > .row > [class*="col-"] > .table,
.fk .page-content .portlet-body > .table,
.fk .page-content > .table {
	width: 100%;
}

.fk .table > tbody > tr > td,
.fk .table > tbody > tr > th {
	background-color: transparent;
}

.fk .table.table-striped > tbody > tr:nth-of-type(odd) > td,
.fk .table.table-striped > tbody > tr:nth-of-type(odd) > th {
	background-color: transparent;
}

.fk .table.table-hover > tbody > tr:hover > td,
.fk .table.table-hover > tbody > tr:hover > th {
	background-color: rgba(var(--fk-text-rgb), .025);
}

/* A two-column "label / value / hint" detail table reads better with the
   label muted and the value prominent. */
.fk .table > tbody > tr > td:first-child {
	color: var(--fk-muted);
	font-weight: 550;
	white-space: nowrap;
}

.fk .table.datatable > tbody > tr > td:first-child,
.fk table.dataTable > tbody > tr > td:first-child {
	color: inherit;
	font-weight: inherit;
	white-space: normal;
}

/* ==========================================================================
   22. Legacy structural selectors

   style.min.css paints some elements through their position rather than a
   class — ".all-student-btns .btn-group .pull-right li:first-child a" is a
   green button with no class on it at all. Those slipped through the earlier
   passes because there was no class to search for; they were found by auditing
   computed backgrounds against the palette on real pages.
   ========================================================================== */

/* Pagination, including DataTables' disabled prev/next. */
.fk .pagination > li > a,
.fk .pagination > li > span {
	background: var(--fk-surface);
	border-color: var(--fk-border);
	color: var(--fk-text);
	font-size: 12.5px;
}

.fk .pagination > li > a:hover,
.fk .pagination > li > span:hover {
	background: var(--fk-app-bg);
	border-color: var(--fk-border);
	color: var(--fk-text);
}

.fk .pagination > .disabled > a,
.fk .pagination > .disabled > a:hover,
.fk .pagination > .disabled > a:focus,
.fk .pagination > .disabled > a:focus:hover,
.fk .pagination > .disabled > span,
.fk .pagination > .disabled > span:hover {
	background: var(--fk-surface);
	border-color: var(--fk-border);
	color: var(--fk-muted);
	opacity: .6;
	cursor: default;
}

.fk .pagination > .active > a,
.fk .pagination > .active > a:hover,
.fk .pagination > .active > a:focus,
.fk .pagination > .active > span {
	background: var(--fk-primary);
	border-color: var(--fk-primary);
	color: var(--fk-primary-fg);
}

/* Toolbar links that are styled purely by position. The first one is the page's
   primary action; the rest are secondary. */
.fk .all-student-btns .btn-group .pull-right li > a,
.fk .all-student-btns .btn-group .pull-right li:first-child a,
.fk .all-student-btns .btn-group ul li > a {
	background: var(--fk-surface) !important;
	border: 1px solid var(--fk-border) !important;
	color: var(--fk-text) !important;
	border-radius: var(--fk-radius-sm) !important;
	padding: 8px 14px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	line-height: 1.4 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.fk .all-student-btns .btn-group .pull-right li:first-child a {
	background: var(--fk-primary) !important;
	border-color: var(--fk-primary) !important;
	color: var(--fk-primary-fg) !important;
}

.fk .all-student-btns .btn-group .pull-right li:first-child a:hover {
	background: var(--fk-primary-dark) !important;
	border-color: var(--fk-primary-dark) !important;
}

.fk .all-student-btns .btn-group .pull-right li > a:hover {
	background: var(--fk-app-bg) !important;
}

.fk .all-student-btns .btn-group .pull-right,
.fk .all-student-btns .btn-group ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	float: none !important;
}

/* Result-count strips ("Showing Page 1 of 1") read as quiet captions. */
.fk .page-content .dataTables_info,
.fk .page-content .pagination-panel,
.fk .page-content .table-footer {
	background: transparent;
	color: var(--fk-muted);
	font-size: 12px;
	padding: 8px 0;
	border: 0;
}

/* ==========================================================================
   23. Modern pass

   Everything below came from looking at rendered pages at full size rather
   than reading markup: tables that sat bare on the background with no card,
   zebra striping that custom.css forces with !important, native selects the
   browser drew itself, and controls with no focus state.
   ========================================================================== */

/* --- tables ---------------------------------------------------------------
   custom.css sets ".table-striped > tbody > tr:nth-child(2n+1) > td" with
   !important, so the stripes survived every earlier attempt. */
.fk .table-striped > tbody > tr:nth-child(2n+1) > td,
.fk .table-striped > tbody > tr:nth-child(2n+1) > th,
.fk .table > tbody > tr.odd > td,
.fk .table > tbody > tr.even > td {
	background-color: transparent !important;
}

.fk .table > tbody > tr:hover > td {
	background-color: rgba(var(--fk-text-rgb), .028) !important;
}

/* A table that is not already inside a card becomes one, so it reads as a
   contained object instead of floating on the page background. */
.fk .page-content table.table:not(.portlet table) {
	background: var(--fk-surface);
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius);
	overflow: hidden;
	box-shadow: var(--fk-shadow);
}

.fk .portlet table.table {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.fk .table > thead > tr > th:first-child,
.fk .table > tbody > tr > td:first-child {
	padding-left: var(--fk-pad);
}

.fk .table > thead > tr > th:last-child,
.fk .table > tbody > tr > td:last-child {
	padding-right: var(--fk-pad);
}

.fk .portlet .table > thead > tr > th:first-child,
.fk .portlet .table > tbody > tr > td:first-child {
	padding-left: 12px;
}

/* An empty table should say so quietly, not shout in italics. */
.fk .table > tbody > tr > td.dataTables_empty,
.fk .table > tbody > tr > td[colspan] em,
.fk .dataTables_empty {
	color: var(--fk-muted);
	font-style: normal;
	text-align: center;
	padding: 28px 12px;
	font-size: 13px;
}

/* --- native selects -------------------------------------------------------
   Left alone these are drawn by the OS and look nothing like the other
   controls. */
.fk .page-content select,
.fk .page-content select.form-control,
.fk .modal select,
.fk select.form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: var(--fk-surface);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236c7489' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	border: 1px solid var(--fk-border);
	border-radius: var(--fk-radius-sm);
	padding: 8px 32px 8px 11px;
	font-size: 13px;
	color: var(--fk-text);
	height: auto;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color .14s ease, box-shadow .14s ease;
}

.fk .page-content select:focus,
.fk select.form-control:focus {
	border-color: var(--fk-primary);
	box-shadow: 0 0 0 3px rgba(var(--fk-primary-rgb), .13);
	outline: none;
}

.fk select[multiple] {
	background-image: none;
	padding-right: 11px;
}

/* --- focus, for people using a keyboard ---------------------------------- */
.fk a:focus-visible,
.fk button:focus-visible,
.fk .btn:focus-visible,
.fk input:focus-visible,
.fk select:focus-visible,
.fk textarea:focus-visible,
.fk [tabindex]:focus-visible {
	outline: 2px solid var(--fk-primary);
	outline-offset: 2px;
	border-radius: var(--fk-radius-sm);
}

/* --- checkboxes and radios ----------------------------------------------- */
.fk input[type="checkbox"],
.fk input[type="radio"] {
	accent-color: var(--fk-primary);
	width: 15px;
	height: 15px;
	cursor: pointer;
}

/* uniform.js replaces them with sprite images on some screens; keep those
   from showing as broken boxes. */
.fk .checker span,
.fk .radio span {
	border-radius: 4px;
}

/* --- toolbars ------------------------------------------------------------- */
.fk .page-content .table-toolbar,
.fk .all-student-btns {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: var(--fk-gap);
}

.fk .all-student-btns + .row,
.fk .all-student-btns + div {
	margin-top: 0;
}

/* A count line above a table. */
.fk .page-content > .row b,
.fk .page-content .total-records {
	font-weight: 650;
}

/* --- cards ---------------------------------------------------------------- */
.fk .portlet {
	transition: box-shadow .16s ease;
}

.fk .portlet > .portlet-title > .caption > i {
	color: var(--fk-primary);
	opacity: .85;
}

/* --- links inside content ------------------------------------------------- */
.fk .page-content table a {
	font-weight: 550;
}

.fk .page-content table a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- headings ------------------------------------------------------------- */
.fk .page-content h1,
.fk .page-content h2,
.fk .page-content h3,
.fk .page-content h4 {
	letter-spacing: -0.015em;
}

/* --- the old theme's italic "no data" text -------------------------------- */
.fk .page-content i:only-child,
.fk .page-content em:only-child {
	font-style: normal;
}

/* --- scroll behaviour ----------------------------------------------------- */
.fk {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	.fk,
	.fk * {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* Some controls carry an inline style="padding:5px" from the original theme.
   An inline declaration outranks every selector, so this is one of the few
   places !important is the only tool that works. Scoped tightly to the
   properties the inline styles actually set. */
.fk .page-content select,
.fk .page-content select.form-control,
.fk .modal select {
	padding: 8px 32px 8px 11px !important;
	border-radius: var(--fk-radius-sm) !important;
	min-height: 36px;
}

.fk .page-content input[type="text"][style],
.fk .page-content input[type="number"][style],
.fk .page-content input[type="email"][style],
.fk .page-content textarea[style] {
	padding: 8px 11px !important;
	border-radius: var(--fk-radius-sm) !important;
}

/* style-metronic.css zeroes the radius on every element in one blanket rule;
   restate it for the controls that should be rounded. */
.fk .page-content input,
.fk .page-content textarea,
.fk .page-content .form-control,
.fk .modal .form-control {
	border-radius: var(--fk-radius-sm);
}

/* A select that sits in a toolbar next to buttons should match their height. */
.fk .page-content .btn-group > select,
.fk .page-content .table-toolbar select,
.fk .all-student-btns select {
	align-self: center;
	max-width: 100%;
}

/* Not every child page has a meaningful icon — a wrong icon is worse than
   none — so those rows indent to line their label up with the ones that do. */
@supports selector(:has(*)) {
	.fk .fk-nav-sub .fk-nav-link:not(:has(> i)) {
		padding-left: 32px;
	}
}

/* The classic layout's search box was clipping its own placeholder. */
.fk-layout-classic .sidebar-search .input-box {
	width: 100%;
}

.fk-layout-classic .sidebar-search .input-box input {
	width: 100%;
	box-sizing: border-box;
}

.fk-layout-classic .sidebar-search .input-box .submit,
.fk-layout-classic .sidebar-search .input-box .remove {
	display: none;
}