/* ---------- Reset / base ---------- */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 1rem; /* Kendo and others expect the browser default, not a Bootstrap override */
}

input::placeholder {
	font-weight: normal;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #333333;
	background: var(--ctgContentBackground);
}

a { text-decoration: none; }

ul { margin: 0; padding: 0; }

/* ---------- Page shell (grid) ----------
   One unconditional grid, always the same shape - the sidebar column is
   just 0px wide when there's no sidebar, and the extra-banner row is just
   0px tall when that setting's off. No PHP branching needed for the grid
   itself, only for which optional elements exist. */

body {
	display: grid;
	min-height: 100vh;
	grid-template-columns: var(--ctgSidebarWidth) 1fr;
	grid-template-rows: var(--ctgExtraHeight) 75px 1fr auto;
	grid-template-areas:
		"extra    extra"
		"navbar   navbar"
		"sidebar  content"
		"footer   footer";
}

/* Above the off-canvas breakpoint, cap the grid to the viewport so the
   sidebar/content row can't grow past it - that's what lets #ctg_sidebar's
   and #ctg_main's own overflow-y:auto (below) actually scroll internally
   instead of the whole page scrolling together. */
@media (min-width: 1538px) {
	body {
		height: 100vh;
	}
}

/* ---------- Top bar (always full width, always brand-colored) ---------- */

#ctg_navbar_extra {
	grid-area: extra;
	height: var(--ctgExtraHeight);
	overflow: hidden;
	background: var(--ctgExtraNavbarBackground);
	color: var(--ctgExtraNavbarForeground);
	display: flex;
	align-items: center;
	padding: 0 16px;
	font-size: 12px;
}

#ctg_navbar_main {
	grid-area: navbar;
	height: 75px; /* fixed - not admin-config-driven, same for every site */
	background: var(--ctgNavbarBackground);
	color: var(--ctgNavbarForeground);
	border-bottom: 1px solid var(--ctgNavbarBottomBorder);
	display: flex;
	align-items: center;
	padding: 0 16px;
	gap: 16px;
}

#ctg_navbar_main a { color: var(--ctgNavbarForeground); }

.ctg_navbar_toggle {
	display: none;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	padding: 6px;
}

.ctg_brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	max-width: 300px;
}

.ctg_brand img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 70px; /* fixed 75px bar height minus a little breathing room */
}

.ctg_navbar_spacer { flex: 1 1 auto; }

.ctg_navbar_actions {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 0 auto;
}

/* Register/Log In links for anonymous visitors - same plain, no-chrome
   treatment as the icon-only links below (.ctg_icon_button), just with a
   text label kept alongside the icon instead of icon-only. */
.ctg_navbar_link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 6px;
	font-size: 13px;
	cursor: pointer;
}

.ctg_navbar_link i { font-size: 20px; }

.ctg_navbar_link:hover { text-decoration: none; }

/* Standalone icon links (Help, Log Out) + the "..." menu trigger - plain
   icons, no background shape or hover fill. */
.ctg_icon_button,
.ctg_dropdown_trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	font-size: 20px;
	cursor: pointer;
}

/* Profile avatar - round photo, sized to match the icon buttons' visual
   weight (they're 38px boxes but the glyph inside only renders at ~19px
   with padding around it). Fallback background color shows only if
   /user/image itself doesn't already return a default placeholder image. */
.ctg_avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: rgba(0,0,0,0.15);
	flex: 0 0 auto;
	cursor: pointer;
}

.ctg_icon_button:hover,
.ctg_dropdown_trigger:hover { text-decoration: none; }

/* "..." menu (user links + any module header buttons) */

.ctg_dropdown { position: relative; }

/* Some layoutPreFlight hooks (e.g. Module_Admin_Service_Hooks) add Log
   In/Out, My Profile, and Help as "mobile-only" header buttons - a
   fallback for the old layout's pattern of hiding its standalone action
   icons at narrow widths and relying on the dropdown instead. This shell
   never hides those icons, at any width, so the fallback is never needed -
   keep these entries out of the dropdown so they don't duplicate the
   standalone icons in .ctg_navbar_actions. */
.ctg_navbar_dropdown_mobile { display: none !important; }

/* This menu and the left sidebar are the same kind of thing (a list of
   clickable items with hover/selected states) - it takes the sidebar's
   colors (the left_navbar_* settings), not the top bar's, even though it
   hangs off the top bar visually. */
.ctg_dropdown_content {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	background: var(--ctgSidebarBackground);
	color: var(--ctgSidebarForeground);
	min-width: 200px;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
	list-style: none;
	overflow: hidden;
	z-index: 40;
}

/* Explicit, matching the rule above - #ctg_navbar_main's own "a" color rule
   would otherwise apply here too (these anchors are nested inside it in
   the DOM even though the popup renders elsewhere), and that one varies by
   bar context - decoupling this keeps the menu's look tied to the
   sidebar's colors regardless. */
#ctg_navbar_main .ctg_dropdown_content a { color: var(--ctgSidebarForeground); }

.ctg_dropdown_content.ctg_show { display: block; }

.ctg_dropdown_content li a,
.ctg_dropdown_content li div {
	display: block;
	padding: 10px 16px;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.ctg_dropdown_content li a:hover {
	background: var(--ctgSidebarHighlight);
	color: var(--ctgSidebarSelected);
	text-decoration: none;
}

.ctg_dropdown_content li div.ctg_navbar_dropdown_content_divider {
	height: 1px;
	padding: 0;
	margin: 4px 0;
	background: color-mix(in srgb, var(--ctgSidebarForeground) 25%, transparent);
}

@media (max-width: 1537px) {
	.ctg_navbar_toggle { display: inline-flex; align-items: center; }
}

/* ---------- Sidebar ----------
   Starts directly below the shared top bar - no separate "brand header"
   block of its own, since the logo lives in the top bar. */

#ctg_sidebar_overlay { display: none; } /* mobile-only backdrop, see media query below */

#ctg_sidebar {
	grid-area: sidebar;
	background: var(--ctgSidebarBackground);
	color: var(--ctgSidebarForeground);
	overflow-y: auto;
}

/* ctg_sidebar_* classes below come straight from the shared
   CTG_Layout::getLeftNavbarLinks() helper - every layout reuses these as
   emitted, so the class names themselves are not layout-specific. */

.ctg_sidebar_ul, .ctg_sidebar_submenu_ul { list-style: none; }

.ctg_sidebar_ul { padding: 8px; }

.ctg_sidebar_nav_link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	color: var(--ctgSidebarForeground);
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

/* Explicit :focus/:active overrides - some framework CSS loaded elsewhere
   on the page (e.g. Bootstrap) targets "a:focus" directly, which otherwise
   outranks the plain class rule above. */
.ctg_sidebar_nav_link:focus,
.ctg_sidebar_nav_link:active {
	outline: none;
	box-shadow: none;
}

/* Hover and selected are deliberately NOT the same treatment.

   Selected is the strong state: the highlight colour at full strength, the
   selected foreground, bold. Hover is a preview of it - the same highlight
   colour mixed down toward transparency, and the ordinary foreground, so it
   reads as "you could land here" rather than "you are here".

   The mix is against `transparent` rather than against the sidebar background
   on purpose: neither colour is known at author time (both are admin settings),
   so blending toward transparency lets whatever background is configured show
   through. Hover therefore always lands between "nothing" and "selected", for
   any combination of sidebar background and highlight.

   :not(.ctg_sidebar_selected) rather than source order, so that hovering the
   already-selected item keeps the full selected treatment instead of
   downgrading it - the two selectors otherwise have equal specificity. */
.ctg_sidebar_nav_link:hover:not(.ctg_sidebar_selected) {
	background: color-mix(in srgb, var(--ctgSidebarHighlight) 40%, transparent);
	color: var(--ctgSidebarForeground);
	border-radius: 6px;
	text-decoration: none;
}

.ctg_sidebar_nav_link.ctg_sidebar_selected {
	background: var(--ctgSidebarHighlight);
	color: var(--ctgSidebarSelected);
	font-weight: 600;
	border-radius: 6px;
	text-decoration: none;
}

.ctg_sidebar_submenu_header { position: relative; }

.ctg_sidebar_submenu_arrow { margin-left: auto; transition: transform .15s ease; }

.ctg_sidebar_submenu_header.ctg_sidebar_submenu_show .ctg_sidebar_submenu_arrow { transform: rotate(180deg); }

.ctg_sidebar_submenu_ul { max-height: 0; overflow: hidden; transition: max-height .15s ease; background: var(--ctgSidebarBackground); }

.ctg_sidebar_submenu_header.ctg_sidebar_submenu_show + .ctg_sidebar_submenu_ul { max-height: 600px; }

.ctg_sidebar_submenu_link {
	display: block;
	padding: 10px 18px 10px 42px;
	color: var(--ctgSidebarForeground);
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.ctg_sidebar_submenu_link:focus,
.ctg_sidebar_submenu_link:active {
	outline: none;
	box-shadow: none;
}

/* Same split as the top-level links above, for the same reasons. */
.ctg_sidebar_submenu_link:hover:not(.ctg_sidebar_selected) {
	background: color-mix(in srgb, var(--ctgSidebarHighlight) 40%, transparent);
	color: var(--ctgSidebarForeground);
	border-radius: 6px;
	text-decoration: none;
}

.ctg_sidebar_submenu_link.ctg_sidebar_selected {
	background: var(--ctgSidebarHighlight);
	color: var(--ctgSidebarSelected);
	border-radius: 6px;
	text-decoration: none;
}

/* ---------- Content (main + right column, side by side) ----------
   The right column's push-vs-flyout behavior only ever affects this row -
   it never touches the top bar or the sidebar. */

#ctg_content {
	grid-area: content;
	display: flex;
	overflow: hidden;
}

#ctg_main {
	flex: 1 1 auto;
	min-width: 0;
	overflow-y: auto;
	padding: 24px;
	background: var(--ctgContentBackground);
}

.ctg_main_container { max-width: 1550px; margin: 0 auto; }
.ctg_main_container_fluid { width: 100%; }

/* Rendered by the shared CTG_Layout::setPrimaryHeader()/getBodyPanes() and
   used directly by some module views (e.g. Module\Calendar\View\EventDetails) -
   not layout-specific, must keep this exact class name styled. */
.ctg_primary_header {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ctgNavbarBottomBorder);
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Echoes the currently-active sidebar item's icon (Layout_Default's
   getActivePrimaryHeaderIcon()) - only rendered when Layout_Default itself
   resolves one, so this is inert wherever .ctg_primary_header is used
   standalone (e.g. Module\Calendar\View\EventDetails.php). */
.ctg_primary_header_badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: var(--ctgPageTitleBadgeBackground);
	color: var(--ctgPageTitleBadgeForeground);
	font-size: 17px;
	line-height: 1;
	flex-shrink: 0;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.18);
}

/* Font Awesome glyphs carry their own line-height metrics that throw off
   flex centering otherwise - force it flat so the icon sits dead center. */
.ctg_primary_header_badge i {
	display: block;
	line-height: 1;
}

/* Title + optional sub-title (Layout_Default::setSecondaryHeader()),
   stacked next to the badge. .ctg_primary_header_title inherits its size
   from .ctg_primary_header itself - no separate rule needed there, which
   keeps EventDetails.php's plain-text (unwrapped) usage of the same class
   sized exactly as it always was. */
.ctg_primary_header_text {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ctg_primary_header_title {
	font-size: 1.5rem;
	line-height: 1.2;
}

.ctg_primary_header_subtitle {
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.25;
	color: #767676;
}

#ctg_right_column {
	flex: 0 0 auto;
	width: 0;
	overflow: hidden;
	background: #ffffff;
	border-left: 1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	transition: width .2s ease;
}

#ctg_right_column.ctg_show {
	width: min(420px, 45vw);
}

#ctg_right_column_header { padding: 10px 16px; text-align: right; font-size: 22px; border-bottom: 1px solid #eee; }
#ctg_right_column_body { padding: 16px; }

/* ---------- Footer ---------- */

#ctg_footer {
	grid-area: footer;
	padding: 10px 16px;
	font-size: 12px;
	color: #777777;
	background: #ffffff;
	border-top: 1px solid #e5e5e5;
}

/* ---------- Mobile: sidebar and right column both become fixed-position
   off-canvas overlays. The top bar needs no changes at all here - it was
   never viewport- or sidebar-dependent. ---------- */

@media (max-width: 1537px) {

	body {
		grid-template-columns: 1fr;
		grid-template-areas:
			"extra"
			"navbar"
			"content"
			"footer";
	}

	/* No-op if there's no sidebar in the DOM at all - safe to leave
	   unconditional here since the static stylesheet can't branch on
	   $hasSidebar the way the view template can. */
	#ctg_sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: min(var(--ctgSidebarWidth), 85vw);
		transform: translateX(-100%);
		transition: transform .2s ease;
		box-shadow: 4px 0 20px rgba(0,0,0,0.15);
		z-index: 30;
	}

	#ctg_sidebar.ctg_sidebar_show { transform: translateX(0); }

	#ctg_sidebar_overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity .2s ease;
		z-index: 25; /* above content, below the sidebar itself (30) */
	}

	#ctg_sidebar_overlay.ctg_show {
		opacity: 1;
		pointer-events: auto;
	}

	#ctg_main { padding: 16px; }

	/* No room to push content over at this width - right column becomes a
	   flyover instead, like the sidebar. */
	#ctg_right_column {
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		width: min(420px, 90vw);
		border-top: none;
		transform: translateX(100%);
		transition: transform .2s ease;
		box-shadow: -4px 0 20px rgba(0,0,0,0.15);
		z-index: 50;
	}

	#ctg_right_column.ctg_show {
		width: min(420px, 90vw);
		transform: translateX(0);
	}

}

/*******************************************************************
	Carried forward from the previous Default.css - generic/utility
	rules produced by shared framework code or used broadly by module
	page content, not tied to this shell's own DOM structure.
*******************************************************************/

.clear {
	clear: both;
}

.ctg_button {
	display: inline-block;
	padding: 6px 12px 6px 12px;
	border-width: 1px;
	border-style: solid;
	border-radius: .375rem;
	text-decoration: none;
	line-height: 1.5;
	text-align: center;
	font-size: 14px;
	vertical-align: middle;
	color: white;
}

.ctg_button a { color: white; }
.ctg_button:hover { color: white; }

.ctg_button_primary {
	background-color: #337ab7;
	border-color: #2e6da4;
}

.ctg_button_primary:hover {
	background-color: #286090;
	border-color: #204d74;
}

.ctg_button_success {
	background-color: #198754;
	border-color: #198754;
}

.ctg_button_success:hover {
	background-color: #157347;
	border-color: #146c43;
}

.ctg_avatar_container {
	margin: 1px 6px 0px 6px;
	width: 33px;
	height: 33px;
	border-radius: 100%;
	background: #eee no-repeat center;
	background-size: cover;
}

/* Legacy CTG_Layout::addNavButton() output - still used by some commands */

ul.topbar {
	list-style: none;
	margin: 0 0 0 0;
	padding: 0;
}

ul.topbar li.title {
	float: left;
	font-size: 20px;
	font-weight: bold;
	font-family: arial;
	color: #006;
	border: none;
	padding: 2px;
	margin: 0 0 6px 0;
}

ul.topbar li.button {
	float: left;
	margin: 0 5px 6px 0;
}

ul.topbar li.express_button {
	float: left;
	margin: 0 5px 6px 0;
}

ul.topbar li.express_button a {
	border-color: #aaa;
	border-style: solid;
	border-width: 1px;
	color: #aaa;
	display: block;
	font-size: x-small;
	font-weight: bold;
	padding: 1px 2px;
	text-decoration: none;
}

ul.topbar li.express_button a:hover {
	color: #555;
}

ul.topbar li.right {
	float: right;
	margin: 0 0 6px 5px;
}

ul.topbar li.button a {
	display: block;
	border: 1px solid;
	font-size: 11px;
	font-weight: normal;
	padding: 3px;
	padding-right: 5px;
	line-height: 16px;
	background-color: #eee;
	text-decoration: none;
	color: #000;
	margin-right: 6px;
}

ul.topbar li.button a:hover {
	border: 1px solid #c00;
}

ul.topbar li.button img {
	margin-bottom: -4px;
}

/* Layout_Component_DefaultNotices output - layout-agnostic */

.warning {
	color: #fff;
	background-color: #B90000;
	padding: .75rem 1.25rem;
	border: 1px solid transparent;
	border-radius: 2px;
	margin-bottom: 15px;
}

.notice {
	color: #fff;
	background-color: #356d35;
	padding: .75rem 1.25rem;
	border: 1px solid transparent;
	border-radius: 2px;
	margin-bottom: 15px;
}

.drop-shadow {
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.popover { position: fixed !important; }

a:hover { text-decoration: none; }

.btn {
	border-radius: 4px;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

.btn-sm { margin-bottom: 5px; }

.btn-danger {
	background-color: #B90000;
	border: 1px solid #B90000;
}

.btn-header {
	background-color: #E62D18;
	color: #fff;
}

.btn-login {
	background-color: #00CC6D;
	color: #fff;
}

.btn-register {
	background-color: #3A8FFB;
	color: #fff;
}

.btn-header:hover, .btn-header:focus, .btn-header:active {
	background-color: #e62d18;
	color: #fff;
	outline: none;
}

.form-control {
	border-radius: 2px;
}

@media (min-width: 768px) {
	.form-horizontal .control-label {
		padding-top: 11px;
	}
}

/* Component: Info Box (AdminLTE-style, used by some dashboard/report views) */

.info-box {
	display: block;
	min-height: 90px;
	background: #fff;
	width: 100%;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	margin-bottom: 15px;
}
.info-box small { font-size: 14px; }
.info-box .progress {
	background: rgba(0, 0, 0, 0.2);
	margin: 5px -10px 5px -10px;
	height: 2px;
}
.info-box .progress,
.info-box .progress .progress-bar { border-radius: 0; }
.info-box .progress .progress-bar { background: #fff; }
.info-box-icon {
	border-top-left-radius: 2px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 2px;
	display: block;
	float: left;
	height: 90px;
	width: 90px;
	text-align: center;
	font-size: 45px;
	line-height: 90px;
	background: rgba(0, 0, 0, 0.2);
}
.info-box-icon > img { max-width: 100%; }
.info-box-content {
	padding: 5px 10px;
	margin-left: 90px;
}
.info-box-number {
	display: block;
	font-weight: bold;
	font-size: 18px;
}
.progress-description,
.info-box-text {
	display: block;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.info-box-text { text-transform: uppercase; }
.info-box-more { display: block; }
.progress-description { margin: 0; }