body
{
	height: 100%;
	background-color: var(--mud-palette-background);
	color: var(--mud-palette-text-primary);
}

.mud-form
{
	display: inline;
}

.mud-layout
{
	padding-top: var(--mud-appbar-height);
}

.mud-appbar
{
	top: 0;
	position: fixed;
	width: 100%;
}

.mud-overlay
{
	cursor: default !important;
	z-index: 1200;
}

.gotBoundary
{
	color: red;
}

.gotModellDiv
{
	color: orange;
}

.gotHandled
{
	color: green;
}

.gotDayahead
{
	color: red;
}

.navmenu-flex
{
	display: flex;
	flex-direction: column;
	height: 100%; /* fyller MudDrawer/MudNavMenu */
}

.navmenu-content
{
	flex: 0 1 auto; /* innehållet tar bara den plats det behöver */
	overflow-y: auto; /* scroll om innehållet är för långt */
}

.navmenu-footer
{
	margin-top: auto; /* trycker footern ner */
	padding: 0.5rem;
	text-align: center;
	flex-shrink: 0; /* footern krymper inte */
}

.my-navlink-noactive > div.active
{
	background-color: transparent !important;
	color: inherit !important;
}

.my-navlink-noactive > div
{
	background-color: transparent !important;
	--mud-palette-action-default: transparent;
	--mud-palette-action-hover: transparent;
	--mud-palette-action-selected: transparent;
	--mud-palette-text-primary: inherit;
	--mud-palette-text-secondary: inherit;
}

/* Toppnivå-ikoner i navmenyn - endast direkta ikoner, inte subnivåer */
/* Light Mode - blå färg alltid */
body[theme="fluent"] .top-level-navgroup > button > .mud-button-root > .mud-icon-root,
body[theme="fluent"] .top-level-navgroup > button > .mud-icon-root,
body[theme="fluent"] .top-level-navgroup > .mud-nav-link > .mud-icon-root
{
	color: #7FA6C9 !important;
	fill: #7FA6C9 !important;
}

/* Dark Mode - default state har accentfärg (blå) */
body[theme="fluent-dark"] .top-level-navgroup > button > .mud-button-root > .mud-icon-root,
body[theme="fluent-dark"] .top-level-navgroup > button > .mud-icon-root,
body[theme="fluent-dark"] .top-level-navgroup > .mud-nav-link > .mud-icon-root
{
	color: #7FA6C9 !important;
	fill: #7FA6C9 !important;
}

/* Dark Mode - ENDAST hover och focus har ljus färg (när grå bakgrund syns) */
/* Tar INTE med expanded state, eftersom flera kan vara expanderade samtidigt */
body[theme="fluent-dark"] .top-level-navgroup > button:hover > .mud-button-root > .mud-icon-root,
body[theme="fluent-dark"] .top-level-navgroup > button:hover > .mud-icon-root,
body[theme="fluent-dark"] .top-level-navgroup > button:focus > .mud-button-root > .mud-icon-root,
body[theme="fluent-dark"] .top-level-navgroup > button:focus > .mud-icon-root,
body[theme="fluent-dark"] .top-level-navgroup > button:focus-within > .mud-button-root > .mud-icon-root,
body[theme="fluent-dark"] .top-level-navgroup > button:focus-within > .mud-icon-root
{
	color: rgba(255, 255, 255, 0.87) !important;
	fill: rgba(255, 255, 255, 0.87) !important;
}

.gotMAE
{
	color: orangered;
}

.mud-snackbar-container
{
	height: 100%;
}

.mud-picker-inline-paper .mud-picker-view
{
	margin-top: 0 !important;
}

.mud-main-content 
{
	height: calc(100vh - var(--mud-appbar-height));
	overflow-y: auto;
	padding-top: 0 !important;
}

.mud-container
{
	margin-top: 0px !important;
}

.dual-button-bar,
.dual-button-bar .mud-tooltip-root
{
	width: 100%;
}

.mud-tooltip-root
{
	width: auto;
}

.mud-select::before
{
	background: transparent !important;
}

.mud-select-parent
{
	min-width: 200px;
	padding: 0 !important;
}

.mud-select-parent .mud-overlay
{
	display: none !important;
}

.mud-select-parent .mud-select
{
	display: block;
	position: relative;
	top: -6px;
}

.mud-popover .mud-list-padding
{
	padding-top: 0;
	padding-bottom: 0;
}

.mud-popover-fixed
{
	position: fixed !important;
}

.mud-list-item-clickable
{
	padding-top: 2px;
	padding-bottom: 2px;
}

[theme="fluent-dark"]
{
	--mud-palette-action-default-hover: rgba(255,255,255,0.45); /* ny hoverfärg */
}

.e-control-container > select,
.e-control-container option
{
	background: transparent;
	width: 100%;
}

.e-emptyrow
{
	color: var(--mud-palette-primary-text) !important;
}

.e-rowcell
{
	color: var(--mud-palette-primary-text) !important;
	background-color: var(--mud-palette-secondary) !important;
}

.e-label
{
	color: var(--mud-palette-primary-text) !important;
}

.e-card-header-title
{
	color: var(--mud-palette-primary-text) !important;
}

.mud-nav-link-text
{
	color: var(--mud-palette-primary-text) !important;
}

.NavLink
{
	color: var(--mud-palette-primary-text) !important;
}

.NavLink:has(> a.active)
{
	background-color: #aaa !important;
}

.mudcard
{
	background-color: var(--mud-palette-secondary) !important;
}

.mud-table
{
	background-color: transparent
}

.mud-table-empty-row
{
	background-color: transparent
}

.mud-table-root
{
	margin-top: 20px;
}

.mud-table-pagination-toolbar
{
	background-color: var(--mud-palette-primary) !important;
}

.selected
{
	background-color: #1E88E5 !important;
}

input[type=checkbox]
{
	accent-color: #1E88E5;
}

.selected > td
{
	color: white !important;
}

.selected > td .mud-input
{
	color: white !important;
}

.selectedbutton
{
	background-color: var(--mud-palette-tertiary) !important;
}

tr.mud-table-row
{
	background-color: transparent !important;
}

.mud-main-content > .mud-container,
[page=ipc] .mud-container
{
	height: 100%;
	margin-top: 0px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

[page=forecasting] .mud-main-content .mud-toolbar
{
	flex-direction: column;
	align-items: start;
}

body[page=forecasting],
body[page=ipc],
[page=ipc] .mud-main-content
{
	padding: 0 !important;
}
#logo
{
	width: 150px;
	height: 46px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#company-logo img
{
	max-height: 46px;
}

#company-logo img
{
	max-height: 46px;
}

body[theme=fluent]:not([page=index]) #logo
{
	background: url("Images/Vitec_Energy.png") no-repeat;
}

body[page=index] #logo,
body[theme=fluent-dark] #logo
{
	background: url("Images/Vitec_Energy_White.png") no-repeat;
}

@keyframes fadeIn
{
	from
	{
		opacity: 0;
	}

	to
	{
		opacity: 1;
	}
}

#logo,
#company-logo
{
	animation: fadeIn 1s;
}

#secondaryLogo
{
	width: 150px;
	height: 46px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

body[theme=fluent]:not([page=index]) #secondaryLogo
{
	background-image: url("Images/AiolosWeb_LightMode2.png");
}

body[page=index] #secondaryLogo,
body[theme=fluent-dark] #secondaryLogo
{
	background-image: url("Images/AiolosWeb_DarkMode2.png");
}

.bg
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -5000;
}

#single-template-box
{
	display: table;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 144px;
	margin: -72px 0 0 -320px;
	z-index: 2;
}

.center
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

#myVideo
{
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -500;
}

.logontemplate
{
	background-color: inherit;
	border-radius: inherit;
	transition: none;
	box-shadow: none;
}

#single-template-message
{
	position: absolute;
	top: 50%;
	left: 26%;
	margin: 87px 40px 0 140px;
	clear: both;
	width: 370px;
	z-index: 2;
}

#single-template-logo
{
	display: table-cell;
	vertical-align: middle;
}

#single-template #single-template-logo > div
{
	width: 401px;
	height: 140px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background: url(/Images/AiolosWeb_LightMode2.png) no-repeat;
	z-index: 2;
}

#single-template-divider
{
	display: table-cell;
	vertical-align: middle;
	border-bottom-color: rgb(255, 255, 255);
}

#single-template #single-template-divider > div
{
	height: 144px;
	width: 1px;
	margin: 0 40px 0 40px;
	background-color: white;
	background: rgba(255,255,255,0.5);
	z-index: 2;
}

#single-template-content
{
	display: table-cell;
	width: 220px;
	height: 100%;
	vertical-align: middle;
}

#single-template #single-template-header
{
	height: 20px;
	line-height: 20px;
	margin: -2px 0 20px 0;
	font-size: 24px;
	font-weight: 300;
	font-family: "Open Sans",sans-serif;
	white-space: nowrap;
	color: white;
}

#single-template .single-template-input-container
{
	position: relative;
	width: 220px;
}

#single-template label
{
	background: inherit;
}

#single-template input[type=text],
#single-template input[type=password]
{
	height: 32px;
	line-height: 18px;
	padding: 7px 10px;
	border: 0;
	font-size: 14px;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-ms-border-radius: 0 !important;
	-o-border-radius: 0 !important;
	border-radius: 17px !important;
	width: 220px;
	color: white;
	text-decoration: none;
}

#single-template-footer
{
	position: absolute;
	left: 50%;
	bottom: 35px;
	width: 600px;
	margin-left: -300px;
	text-align: center;
	z-index: 2;
}

#single-template #single-template-footer p:first-child
{
	font-size: 12px;
}

#single-template #single-template-footer p
{
	margin: 0;
	padding: 0;
	line-height: 20px;
	font-size: 10px;
	color: white;
}

.spacer
{
	height: 10px;
	width: 100%;
}

.twentypercentWidth
{
	width: 20%;
	margin: 0 2rem;
	padding: 0;
}

.e-tab
{
	height: 100% !important;
}

[page=forecasting] .e-content.e-lib
{
	height: 97%;
}

.mycontent-left
{
	padding-top: 5px;
	border-right: 1px dashed var(--mud-palette-secondary);
	overflow: hidden;
}

.mud-Toolbar-padding
{
	padding-bottom: 5px;
}

.mud-popover .mud-menu
{
	display: inline-block;
}

.mud-menu
{
	min-width: 64px;
}

.mud-toolbar #secondary-logo-parent
{
	position: relative;
	margin-top: 9px;
}

.mud-toolbar #progress-parent
{
	position: absolute;
	left: 152px;
	top: 9px;
}

[page=ipc] .e-upload
{
	max-width: 49.5%;
	border-width: 2px;
	border-color: black;
	margin-bottom: 20px;
}

.quick-menu
{
	margin-right: 20px;
}

.mud-dialog .mud-dialog-actions
{
	padding: 24px;
}

[theme=fluent-dark] .e-upload,
[theme=fluent-dark] .mud-dialog-actions button
{
	border: 1px solid white;
}

[theme=fluent] .quick-menu button
{
	border: 1px solid #a0a0a0;
}

[page=forecasting] input[type=checkbox]
{
	background-color: transparent;
}

[page=forecasting] .mycontent-left ul,
[page=ipc] .mycontent-left ul
{
	margin-bottom: 0;
	padding-left: 21px;
}

[page=forecasting] .mycontent-left ul,
[page=forecasting] .mycontent-left div,
[page=ipc] .mycontent-left ul,
[page=ipc] .mycontent-left div
{
	white-space: nowrap;
}

[page=forecasting] .mycontent-left i,
[page=ipc] .mycontent-left i
{
	margin-left: -4px !important;
	margin-right: 4px !important;
}

[page=forecasting] .mycontent-left label i,
[page=ipc] .mycontent-left label i
{
	margin-left: 2px !important;
}

.fill-height
{
	height: 100%;
}

[page=forecasting] .e-control-container
{
	margin-bottom: 10px !important;
}

[page=ipc] .mud-button,
[page=forecasting] .mud-button
{
	padding: 6px 8px;
	white-space: nowrap;
}

.mud-button.narrow
{
	padding: 0.2em;
	min-width: auto;
}

.mud-button .mud-progress-circular
{
	position: absolute;
}

.forecast-run-button .mud-progress-circular {
    position: relative;
}

.treenode
{
	white-space: nowrap;
}

.treenode ul
{
	margin-bottom: 0.25rem;
}

.series-volume .mud-progress-circular,
.treenode .mud-progress-circular
{
	width: 14px;
	height: 14px;
	color: #fff;
	margin-left: 0.5em;
}

tr.series-volume:not(.selected) td
{
	opacity: 0.5;
}

.treenode .mud-progress-circular
{
	position: relative;
	top: 3px;
}

.series-volume .mud-table-cell
{
	position: relative;
}

.series-volume .mud-progress-circular
{
	position: absolute;
	margin-left: 10px;
	top: -15px;
}

body[theme=fluent] .treenode .selected .mud-progress-circular svg
{
	color: #fff !important;
}

.treenode .mud-progress-circular svg
{
	background-color: transparent !important;
}

[page=forecasting] .container-fluid .mud-toolbar,
[page=ipc] .container-fluid .mud-toolbar
{
	padding-left: 0;
}

[page=forecasting] .mud-toolbar > div,
[page=ipc] .mud-toolbar > div
{
	padding-right: 10px;
}

.play-button
{
	min-width: auto;
	width: 40px;
	height: 40px;
	border: 3px solid var(--mud-palette-text-primary);
	border-radius: 20px;
	margin-top: 10px;
	margin-left: 5px;
	background: transparent;
}

.play-button:disabled
{
	border-color: var(--mud-palette-action-disabled);
}

.mud-paper button.scheduler-button svg,
.mud-paper button.play-button svg
{
	background-color: transparent;
}

.highcharts-light,
.highcharts-dark
{
	--highcharts-background-color: transparent !important;
}

.highcharts-loading
{
	background-color: var(--mud-palette-background) !important;
	opacity: 0.6 !important;
}

.highcharts-tooltip-box
{
	background-color: var(--mud-palette-secondary);
	fill: var(--mud-palette-secondary);
}

.forecast-highchart-wrapper
{
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.forecast-chart-container
{
	flex: 1 1 0;
	min-height: 0;
	height: 0;
	overflow: hidden;
}

[theme=fluent] .mud-table,
[theme=fluent] .mud-table-empty-row
{
	background-color: transparent;
}

[theme=fluent] .mud-paper,
[theme=fluent] .mud-paper svg:not(.mud-progress-circular svg):not(.mud-icon-button svg)
{
	background-color: #fff;
	color: #000;
}

[theme=fluent-dark] .mud-paper,
[theme=fluent-dark] .mud-paper svg:not(.mud-progress-circular svg):not(.mud-icon-button svg)
{
	background-color: #333;
	color: #fff;
}

[theme=fluent-dark] .mud-drawer svg path
{
	color: #fff !important;
}

.mud-drawer-header
{
	color: var(--mud-palette-text-primary);
}

.mud-drawer-header a,
.mud-paper .mud-nav-link-text,
.mud-input,
h6,
a:hover
{
	color: inherit !important;
}

[theme=fluent] .mud-button-filled
{
	box-shadow: 0 0 1px 1px rgba(0,0,0,.4) !important;
}

[theme=fluent-dark] .mud-button-filled
{
	box-shadow: 0 0 1px 1px rgba(255,255,255,.4) !important;
}

[page=ipc] div.mud-alert
{
	display: inline-block;
	border: 1px solid rgb(214, 129, 0);
	margin-right: 0.5em;
	margin-bottom: 0.5em;
}

.mud-alert.mud-dense
{
	padding: 0 4px;
}

.mud-alert-icon.mud-alert-icon-left
{
	margin-right: 4px;
}

.mud-alert-icon
{
	padding-top: 4px;
	padding-bottom: 4px;
}

.mud-alert-message
{
	padding: 4px;
	padding-bottom: 4px;
}

body:not([page=index])[theme=fluent] .mud-button-filled
{
	background: #fff;
	color: rgb(33, 33, 33);
}

body:not([page=index])[theme=fluent] .mud-button-filled.bbq
{
	box-shadow: none !important;
}

[page=ipc] .mud-container
{
	height: 100%;
	margin-top: 0px !important;
}

div.selected
{
	color: #fff;
}

.percentage-staple
{
	width: 17px;
	height: 8px;
	position: relative;
	top: -3px;
	margin-left: -4px;
	margin-right: 8px;
}

.percentage-staple > .inner
{
	height: 7px;
	position: absolute;
}

[theme=fluent] .percentage-staple
{
	border: 1px solid #000;
}

[theme=fluent] .percentage-staple > .inner
{
	background-color: #000;
}

[theme=fluent-dark] .percentage-staple
{
	border: 1px solid #fff;
}

[theme=fluent-dark] .percentage-staple > .inner
{
	background-color: #fff;
}


body[theme=fluent]
{
	background-image: url("Images/rotate_tulip_gray.svg");
}

body[theme=fluent-dark]
{
	background-image: url("Images/rotate_tulip_white.svg");
}

body
{
	background-position: -50%, center;
	background-repeat: no-repeat;
	background-size: 180%, cover;
}

.treenode:hover
{
	cursor: pointer;
}

.treenode div
{
	display: inline-block;
}

.treenode input[type=checkbox]
{
	margin-right: 5px;
}

h1
{
	font-size: 20px;
	font-family: "Unica One", sans-serif;
	font-weight: bold;
	letter-spacing: 0.17136px;
	margin-top: 8px;
	margin-bottom: 8px;
}

.mud-checkbox p
{
	margin-left: 4px;
	font-size: 12px;
	position: relative;
	top: 1px;
}

.mud-navmenu a
{
	text-decoration: none;
}

.warning-in-tree
{
	width: 16px;
	height: 16px;
	display: inline-block;
	background: url("Images/warning.png");
	left: 3px;
	position: relative;
	top: 3px;
}

.error-in-tree
{
	width: 16px;
	height: 16px;
	display: inline-block;
	left: 4px;
	position: relative;
	top: 3px;
}

.correction-in-tree
{
	width: 16px;
	height: 16px;
	display: inline-block;
	left: 3px;
	position: relative;
	top: 3px;
}

[theme="fluent"] .correction-in-tree
{
	background: url("Images/correction_light.png");
}

[theme="fluent-dark"] .correction-in-tree
{
	background: url("Images/correction_dark.png");
}

.correction-in-grid
{
	padding-left: 30px !important;
}

[theme="fluent"] .correction-in-grid
{
	background: url("Images/correction_light.png") no-repeat top 10px left 10px;
}

[theme="fluent-dark"] .correction-in-grid
{
	background: url("Images/correction_dark.png") no-repeat top 10px left 10px;
}

.error-in-tree
{
	background: url("Images/stop.png");
}

.avatar-selection .scroll-panel
{
	overflow-x: hidden;
	overflow-y: auto;
	height: 400px;
	width: 100%;
	padding-right: 20px;
}

.avatar-selection p
{
	font-size: 14px;
}

.avatar-selection .mud-card-content
{
	margin-top: 2px;
	margin-left: 2px;
}

.avatar-selection .mud-card-content.selected
{
	background-color: transparent !important;
	border: 1px solid #fff;
	border-radius: 4px;
}

.avatar-selection .mud-card-content.deselected
{
	opacity: 0.3;
}

.e-input-group
{
	background: transparent !important;
}

.avatar-selection .mud-card-content:hover
{
	opacity: 1;
}

.avatar-selection .mud-grid-item
{
	padding: 10px;
}

.avatar-selection .mud-card-content
{
	padding: 5px;
}

.mud-menu button
{
	width: 30px;
	height: 30px;
}

.icon-button
{
	padding: 0 !important;
	min-width: 0 !important;
	line-height: normal !important;
}

[page=forecasting] button.fetch-history
{
	align-self: end;
	margin-bottom: 3px;
	margin-left: -6px;
	margin-right: 10px;
}

[page=forecasting] button.schedule
{
	position: relative;
	left: 5px;
	top: 3px;
}

h3
{
	font-size: calc(0.8rem + .6vw);
	margin-top: 0;
	margin-bottom: 0;
}

span.baseline
{
	vertical-align: baseline;
}

.bottom-toast
{
	position: fixed;
	bottom: -100px; /* Startar utanför skärmen */
	left: 58%;
	transform: translateX(-50%);
	background-color: #333;
	color: white;
	padding: 15px 20px;
	border-radius: 10px;
	box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
	transition: bottom 0.3s ease-in-out;
	opacity: 0;
	z-index: 21;
	width: 80%;
}

.bottom-toast.show
{
	bottom: 20px; /* Flyttar upp på skärmen */
	opacity: 1;
}

.bottom-toast.hide
{
	bottom: -100px;
	opacity: 0;
}

.Stop-Day
{
	color: red !important;
}

.Down-Day
{
	color: orange !important;
}

.Schedulerheader
{
	white-space: nowrap;
}

.e-upload .e-upload-files .e-file-status.e-upload-success,
.e-upload .e-upload-files .e-icons
{
	display: none !important;
}

.e-upload .e-upload-files .e-upload-file-list .e-file-container > *
{
	padding-top: 0 !important;
}

.e-upload .e-upload-files .e-upload-file-list
{
	min-height: auto;
	padding-bottom: 12px;
}

table#templates button
{
	padding: 0;
	min-width: auto;
}

.mud-dialog button.close
{
	text-transform: none;
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 16px;
}

.mud-dialog .mud-dialog-actions
{
	justify-content: start;
}

.mud-dialog-actions button
{
	border-radius: 20px;
	text-transform: none;
	font-weight: normal;
}

.mud-dialog .mud-dialog-actions .mud-button.delete
{
	background-color: #f99;
	border-color: #f99;
}

.mud-dialog-actions div.create button.delete,
.mud-dialog-actions div.create button.new
{
	display: none;
}

.mud-dialog .mud-dialog-actions button.delete:not(:first-child)
{
	margin-left: 26px;
}

.mud-dialog .mud-dialog-actions button:not(:first-child)
{
	margin-left: 6px;
}

body[theme=fluent-dark] .mud-dialog-actions .mud-svg-icon
{
	fill: #000;
}

[theme=fluent] .mud-overlay
{
	background: #fff;
	opacity: 0.8;
}

[theme=fluent-dark] .mud-overlay
{
	background: #000;
	opacity: 0.4;
}

.mud-overlay
{
	cursor: wait;
}

[page=index] .page-hero-text
{
	background: initial;
	color: #fff;
}

[theme=fluent] .page-hero-text button
{
	background-color: #024059;
	color: #fff;
}

[theme=fluent-dark] .page-hero-text button
{
	background-color: #582e30;
	color: #fff;
}


[theme=fluent-dark] .mud-toolbar
{
	fill: #fff;
}

.mud-icon-root,
.mud-icon-root svg {
	background: transparent !important;
}

@keyframes slideInFromRight
{
	0%
	{
		transform: translateX(100%);
		opacity: 0;
	}

	100%
	{
		transform: translateX(0);
		opacity: 1;
	}
}

.forecasting #buttonbar
{
	transition: left;
	animation-name: slideInFromRight;
	animation-fill-mode: forwards;
	animation-duration: 0.3s;
	animation-timing-function: ease;
	position: fixed;
	right: 20px;
	top: 70px;
}

.forecasting #buttonbar.closed
{
	display: none;
}

#buttonbar .mud-icon-button
{
	height: 24px;
}

#buttonbar .mud-icon-button svg
{
	background: transparent;
}

.mud-input > input.mud-input-root:disabled
{
	opacity: 0.5;
}

.constant-value
{
	opacity: 0.5;
}

.constant-value .label
{
	font-size: 12px;
	padding-top: 5px;
	margin-left: 0px;
}

.constant-value .value
{
	padding-top: 3px;
	font-size: 18px;
}

.mud-icon-button
{
	padding: 0;
}

body[page=educandi] .overview .mud-card-media
{
	border-radius: 0.6vw 0.6vw 0 0;
	cursor: pointer;
}

body[page=educandi] .overview .mud-paper
{
	border-radius: 0.6vw;
}

body[page=educandi][theme=fluent-dark] .overview .mud-paper
{
	background-color: #555;
}

body[page=educandi][theme=fluent] .overview .mud-paper
{
	background-color: #ccc;
}

[theme=fluent] .mud-paper .educandi-article
{
	box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.14);
}

[theme=fluent-dark] .mud-paper .educandi-article
{
	box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 0.05);
}

.mud-paper .educandi-article .mud-card-actions button svg
{
	background-color: transparent;
}

.mud-paper .educandi-article button
{
}

.educandi-article button.play
{
	opacity: 0.8;
}

.educandi-article button.play svg
{
	width: 2em;
	height: 2em;
}

.left-panel-divider
{
	width: 3px;
	min-width: 3px;
	cursor: col-resize;
	background-image: repeating-linear-gradient(to bottom, #888, #888 1px, transparent 2px, transparent 6px);
	height: 100vh;
}

.mud-drawer-content
{
	padding-right: 6px;
}

/* Main content margin based on drawer state - controlled by Blazor class */
.drawer-mini .mud-main-content
{
	margin-left: 64px !important;
	transition: margin-left 0.2s ease;
}

.drawer-expanded .mud-main-content
{
	margin-left: 240px !important;
	transition: margin-left 0.2s ease;
}

/* Auto-width drawer - scales based on navlink content */
.drawer-auto-width
{
	width: auto !important;
	min-width: 64px;
	max-width: 320px;
}

.drawer-auto-width .mud-drawer-content
{
	width: auto;
	min-width: fit-content;
}

.drawer-auto-width .mud-nav-link,
.drawer-auto-width .mud-navmenu
{
	white-space: nowrap;
}

.resolution
{
	position: absolute;
	z-index: 1;
	top: -12px;
	right: 65px;
	width: 200px;
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border
{
	border-color: var(--mud-palette-text-primary) !important;
}

.mud-input.mud-input-underline:after
{
	border-bottom: inherit !important;
}

.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol
{
	color: var(--mud-palette-text-primary) !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform
{
	fill: var(--mud-palette-text-primary) !important;
}

.mud-popover .mud-toolbar
{
	background-color: var(--mud-palette-secondary) !important;
}

.mud-picker-calendar-content button.mud-selected
{
	background-color: var(--mud-palette-secondary) !important;
}

.mud-picker-calendar .mud-day.mud-current
{
	font-weight: bold !important;
}

.mud-button-outlined.mud-button-outlined-primary
{
	border: none !important;
}

.mud-button-outlined p
{
	text-decoration: underline !important;
	color: var(--mud-palette-text-primary) !important;
}

.mud-picker-datepicker-toolbar
{
	align-items: center;
}

.mud-button
{
	text-transform: none;
}

.quick-menu
{
	padding: 20px;
}

.quick-menu .mud-input-control-boolean-input
{
	margin-left: 12px !important;
}

.quick-menu .mud-input-control-boolean-input .mud-input-control-input-container
{
	display: block;
}

.quick-menu .mud-nav-link
{
	padding: 0;
}

.quick-menu .mud-nav-link-text
{
	margin-left: 0;
}

.quick-menu button
{
	margin: 0;
	padding: 0;
}

.quick-menu p
{
	padding-top: 0 !important;
}

.quick-menu div:not(:last-child),
.quick-menu hr
{
	margin-bottom: 10px;
}

.mud-switch-track
{
	border-width: 1px;
}

.mud-typography-subtitle1,
.mud-typography-subtitle2,
.mud-button
{
	font-size: inherit !important;
	font-weight: normal !important;
}

.mud-button-label .mud-button-icon-start
{
	margin-inline-start: 0;
	margin-inline-end: 0;
	margin-right: 4px;
}

.mud-primary-text
{
	color: var(--mud-palette-text-primary) !important;
}

.series-container table
{
	border-collapse: collapse;
}

.series-container th, .series-container td
{
	padding-right: 2em;
}

/* Keyword badges */
.series-keywords
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.keyword
{
	border-radius: 0.5rem;
	padding: 0.25rem 0.6rem;
	font-size: 0.85rem;
	background-color: var(--keyword-bg);
	color: var(--keyword-text);
	border: 1px solid var(--keyword-border);
	transition: background-color 0.15s ease;
}

.keyword.type
{
	background-color: transparent;
	padding: 0;
	margin-right: 1em;
}

.keyword.datatype
{
	background-color: transparent;
	padding: 0;
}

/* Prompt container */
.prompt-builder
{
	background-color: var(--prompt-bg);
	border: 1px solid var(--card-border);
	border-radius: 0.75rem;
	padding: 1rem 0 1rem 0;
}

/* ================================
   Fluent Light Mode
   ================================ */
body.fluent
{
	--card-bg: #ffffff;
	--card-hover-bg: #f6f6f7;
	--card-border: #d4d4d8;
	--text-color: #202020;
	--accent-color: #0078d4;
	--accent-bg: #e7f3ff;
	--accent-glow: rgba(0, 120, 212, 0.3);
	--card-shadow: 0 1px 3px rgba(0,0,0,0.05);
	--keyword-bg: #f3f2f1;
	--keyword-border: #e1e1e3;
	--keyword-text: #323130;
	--keyword-type-bg: #fff4ce;
	--keyword-datatype-bg: #dff6dd;
	--prompt-bg: #ffffff;
}

/* ================================
   Fluent Dark Mode
   ================================ */
body.fluent-dark
{
	--card-bg: #2b2b2b;
	--card-hover-bg: #333333;
	--card-border: #3d3d3d;
	--text-color: #f3f2f1;
	--accent-color: #58a6ff;
	--accent-bg: #1f3c5a;
	--accent-glow: rgba(88,166,255,0.3);
	--card-shadow: 0 1px 4px rgba(0,0,0,0.3);
	--keyword-bg: #383838;
	--keyword-border: #4d4d4d;
	--keyword-text: #f3f2f1;
	--keyword-type-bg: #5a4e2b;
	--keyword-datatype-bg: #2b5030;
	--prompt-bg: #1f1f1f;
}

.debug-panel
{
	background-color: var(--layer-fill-color-default, rgba(30, 30, 30, 0.9));
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 1rem;
	color: var(--text-primary-color, #e5e5e5);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	transition: background-color 0.3s, color 0.3s;
}

html[data-theme="fluent"] .debug-panel
{
	background-color: #f9f9f9;
	color: #222;
	border-color: #ccc;
}

.debug-section
{
	margin-bottom: 1.5rem;
}

.debug-section h6
{
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--accent-color, #0078d4);
}

.scrollable-block
{
	background: rgba(20, 20, 20, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 0.75rem;
	max-height: 300px;
	overflow: auto;
	position: relative;
}

/* Gradient hint for scrollability */
.scrollable-block::after
{
	content: "";
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0,0,0,0.6));
}

/* Light mode gradient tweak */
html[data-theme="fluent"] .scrollable-block
{
	background: #fff;
	border-color: #ddd;
}

html[data-theme="fluent"] .scrollable-block::after
{
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9));
}

.scrollable-block pre
{
	margin: 0;
	font-size: 0.85rem;
	font-family: "Cascadia Code", "Consolas", monospace;
	color: inherit;
	white-space: pre-wrap;
}

.selectedbutton
{
	background-color: var(--mud-palette-primary);
	color: var(--mud-palette-primary-text);
}

.notselectedbutton
{
	background-color: var(--mud-palette-surface);
}

.sidebar
{
	width:300px;
	padding-left: 4px !important;
	padding-right: 4px !important;
	height: 100%;
	margin: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0;
	z-index: 1;
}

/* Override when drawer is mini */
.drawer-mini .sidebar
{
	left: 64px;
}

.sidebar.mud-paper
{
	background: transparent !important;
}

.sidebar .mud-expand-panel-header
{
	padding: 6px;
}

.sidebar .mud-collapse-container
{
	padding-left: 10px;
	padding-right: 10px;
}

.sidebar .mud-collapse-container.mud-collapse-entered
{
	padding-top: 6px;
	padding-bottom: 26px;
}


.sidebar .mud-button.mud-button-filled-size-small
{
	font-size: inherit !important;
}

.sidebar .mud-expand-panel.mud-panel-expanded
{
	margin-top: 0;
}

.sidebar .mud-expand-panel-header
{
	min-height: auto;
	flex-direction: row-reverse;
}

.sidebar .mud-expand-panel
{
	padding-left: 6px;
	padding-right: 6px;
	margin-bottom: 4px !important;
	border-bottom: none !important;
}

.sidebar .mud-expand-panel-content.mud-expand-panel-gutters
{
	padding: 0;
}

.sidebar .mud-expand-panel .mud-expand-panel-header
{
	font-size: inherit;
	line-height: inherit;
}

.sidebar .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-icon
{
	transform: rotate(-90deg);
	background: transparent;
}

.sidebar .mud-expand-panel.mud-panel-expanded .mud-expand-panel-header .mud-expand-panel-icon
{
	transform: rotate(0deg);
}

.toolbox
{
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.toolbox > .mud-expansion-panels
{
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.toolbox .mud-expand-panel
{
	flex: 0 0 auto;
}

.toolbox .mud-expand-panel.scrollable-panel
{
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.toolbox .mud-expand-panel.scrollable-panel.mud-panel-expanded
{
	flex: 1 1 auto;
	min-height: 400px;
}

.toolbox .scrollable-panel .mud-collapse-container
{
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.toolbox .scrollable-panel .mud-collapse-wrapper
{
	height: 100%;
}

.toolbox .scrollable-panel .mud-collapse-wrapper-inner
{
	height: 100%;
}

.toolbox .scrollable-panel .mud-expand-panel-content
{
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.toolbox .mud-icon-button-edge-end
{
	margin-right: -3px;
}

.toolbox .mud-input-control .mud-input-adornment svg
{
	position: relative;
}

.toolbox .mud-select-input svg
{
	left: 2px;
}

.sidebar svg,
.toolbox svg
{
	background-color: transparent !important;
}

/* ================================
   Markdown Content Styling
   ================================ */
.markdown-content {
	line-height: 1.6;
	color: var(--mud-palette-text-primary);
}

.markdown-content h1 {
	font-size: 2em;
	font-weight: 600;
	margin-top: 1em;
	margin-bottom: 0.5em;
	border-bottom: 1px solid var(--mud-palette-divider);
	padding-bottom: 0.3em;
}

.markdown-content h2 {
	font-size: 1.5em;
	font-weight: 600;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

.markdown-content h3 {
	font-size: 1.25em;
	font-weight: 600;
	margin-top: 0.8em;
	margin-bottom: 0.4em;
}

.markdown-content h4 {
	font-size: 1.1em;
	font-weight: 600;
	margin-top: 0.6em;
	margin-bottom: 0.3em;
}

.markdown-content p {
	margin-bottom: 1em;
}

.markdown-content ul, .markdown-content ol {
	margin-bottom: 1em;
	padding-left: 2em;
}

.markdown-content li {
	margin-bottom: 0.5em;
}

.markdown-content code {
	background-color: rgba(0, 0, 0, 0.05);
	padding: 0.2em 0.4em;
	border-radius: 3px;
	font-family: "Consolas", "Monaco", monospace;
	font-size: 0.9em;
}

[theme="fluent-dark"] .markdown-content code {
	background-color: rgba(255, 255, 255, 0.1);
}

.markdown-content pre {
	background-color: rgba(0, 0, 0, 0.05);
	padding: 1em;
	border-radius: 6px;
	overflow-x: auto;
	margin-bottom: 1em;
}

[theme="fluent-dark"] .markdown-content pre {
	background-color: rgba(255, 255, 255, 0.05);
}

.markdown-content pre code {
	background-color: transparent;
	padding: 0;
}

.markdown-content blockquote {
	border-left: 4px solid var(--mud-palette-primary);
	padding-left: 1em;
	margin-left: 0;
	margin-bottom: 1em;
	font-style: italic;
	color: var(--mud-palette-text-secondary);
}

.markdown-content a {
	color: var(--mud-palette-primary);
	text-decoration: none;
}

.markdown-content a:hover {
	text-decoration: underline;
}

.markdown-content hr {
	border: none;
	border-top: 1px solid var(--mud-palette-divider);
	margin: 2em 0;
}

.markdown-content strong {
	font-weight: 600;
}

.markdown-content em {
	font-style: italic;
}

.select-fit-content
{
	width: max-content;
	max-width: max-content !important;
	white-space: nowrap;
}

.mud-selected-item .mud-typography-body1
{
	font-weight: bold;
}

.section-container .mud-expand-panel
{
	margin-top: 8px;
	margin-bottom: 8px;
}

.section-container .mud-expand-panel
{
	margin-top: 8px;
	margin-bottom: 8px;
}

.section-container .mud-expand-panel:first-child
{
	margin-top: 0;
}

.section-container .mud-expand-panel:last-child
{
	margin-bottom: 0;
}