/* Custom variables */

:root {
	--header-size: 4rem;
	--menu-size: 250px;
	--content-offset: 0;
	--bg-emphasis: rgba(0, 0, 0, 0.075);
	--bg-header: rgba(0, 0, 0, 0.1);
	--bg-tooltip: var(--bs-black);
	--bs-font-sans-serif: sans-serif;
}

[data-bs-theme="dark"] {
	--bg-emphasis: rgba(255, 255, 255, 0.075);
	--bg-header: rgba(255, 255, 255, 0.1);
}

/* 5-columns */

@media (min-width: 992px) {
	.col-lg-2-4 {
		flex: 0 0 20%;
		max-width: 20%;
	}
}

/* Core CSS */

@media (hover: hover) {
	html {
		font-size: 14px;
	}
}

#core-header {
	border-bottom: solid 1px var(--bs-border-color);
	flex-wrap: nowrap;
	height: var(--header-size);
	padding: 0;
}

#core-header .navbar-brand {
	margin: 0;
}

#core-header .navbar-header, #core-header .navbar-nav {
	padding: 0 1rem;
	flex: 0 0 auto;
}

#core-header .navbar-nav {
	text-align: end;
}

#core-header .navbar-title {
	flex: 1 0 0;
	line-height: initial;
	text-align: center;
	white-space: normal;
}

#core-header .navbar-title span {
	display: inline-block;
}

#core-header .navbar-title span + span:not(:empty)::before {
	content: "\203a";
	margin: 0 .5rem;
}

@media (min-width: 992px) {
	:root {
		--content-offset: var(--menu-size);
	}
	#core-header .navbar-header {
		flex: 0 0 var(--menu-size);
	}
	#core-header .navbar-nav {
		flex: 0 0 auto;
	}
	#core-header .navbar-title {
		padding: 0 15px; /* This must match $container-padding-x in Bootstrap... */
		text-align: start;
		flex: 1 0 0;
	}
}

#core-sidebar {
	width: var(--menu-size);
	overflow: hidden;
	--bs-dropdown-divider-margin-y: 0;
	--bs-dropdown-divider-bg: var(--bs-border-color);
	border-color: var(--bs-border-color);
}

@media (min-width: 992px) {
	#core-sidebar {
		transform: none;
		transition: none;
		visibility: visible !important;
		z-index: initial;
		height: calc(100vh - var(--header-size));
		top: var(--header-size);
	}
}

#core-sidebar .navbar {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: transform ease .3s;
	transform: translateX(0%);
	padding: 0;
}

#core-sidebar .navbar.hide {
	transform: translateX(100%);
}

#core-sidebar #menu-main.hide {
	transform: translateX(-100%);
}

[dir="rtl"] #core-sidebar .navbar.hide {
	transform: translateX(-100%);
}

[dir="rtl"] #core-sidebar #menu-main.hide {
	transform: translateX(100%);
}

#core-sidebar .nav-link, #core-sidebar .navbar-text {
	padding: .6rem 1rem;
}

#core-sidebar .navbar-text {
	border-bottom: solid 1px var(--bs-border-color);
	font-weight: bold;
}

@media (min-width: 992px) {
	#core-sidebar .btn-close {
		display: none;
	}
}

#core-sidebar .nav-link:hover {
	background-color: var(--bg-emphasis);
}

#core-content {
	padding-top: var(--header-size);
	padding-bottom: 1rem;
}

#core-content.core-content-sidebar {
	padding-inline-start: var(--content-offset);
}

@media (min-width: 1400px) {
	:root {
		--menu-size: 350px;
	}
}

@media (max-width: 767px) {
	:root {
		--header-size: 3rem;
	}
	#core-header .navbar-toggler,
	#core-header .navbar-brand {
		font-size: initial;
	}
}

.anchor {
	display: block;
	position: relative;
	top: calc(-5rem - var(--header-size));
	visibility: hidden;
}

.hover:hover {
	background-color: var(--bg-emphasis);
}

#login-form {
	max-width: 500px;
}

.sticky-top {
	top: var(--header-size);
}

.state-red:before {
	color: var(--bs-danger);
	content: "\f06a";
}

.state-orange:before {
	color: var(--bs-warning);
	content: "\f071";
}

.state-green:before {
	color: var(--bs-success);
	content: "\f00c";
}

.state-blue:before {
	color: var(--bs-secondary);
	content: "\003f";
}

.text-break {
	word-break: break-word;
}

.text-prewrap {
	white-space: pre-wrap;
}

.opacity-100 {
	opacity: 1 !important;
}

.dropdown-menu {
	--bs-dropdown-link-hover-bg: var(--bg-emphasis);
}

.dropdown-menu button:focus {
	outline: 0;
}

.table {
	--bs-table-hover-bg: var(--bg-emphasis);
	--bs-table-active-bg: var(--bg-header);
}

.table-no-hover {
	--bs-table-hover-color: var(--bs-table-color-state);
	--bs-table-hover-bg: var(--bs-table-bg-state);
}

.table-actions-active {
	--bs-table-bg-state: rgb(var(--bs-primary-rgb), 0.15);
	--bs-table-hover-bg: var(--bs-table-bg-state);
}

.table-hover-header > thead > tr:hover > * {
	--bs-table-accent-bg: var(--bs-table-hover-bg);
	color: var(--bs-table-hover-color);
}

[data-bs-toggle="collapse"] > .fa-caret-down { display: none; }
.collapsed[data-bs-toggle="collapse"] > .fa-caret-down { display: initial; }
.collapsed[data-bs-toggle="collapse"] > .fa-caret-up { display: none; }
[data-bs-toggle="collapse"] { text-decoration: none; }
[data-bs-toggle="collapse"]:hover > span { text-decoration: underline; }

.form-control::placeholder {
	opacity: .25;
	font-style: italic;
	color: var(--bs-body-color);
}

.form-control-invalid,
.form-control-invalid > .form-control,
.form-control-invalid > .form-select,
.form-control-invalid > .money-input > .form-control,
.form-control-invalid > .form-selector-input > .form-control,
.form-control-invalid > .form-selector-input > .form-select {
	border-color: var(--bs-danger);
}

.form-group {
	margin-bottom: .5rem;
}

.form-group [data-toggle="help"] {
	cursor: pointer;
}

.form-group .form-help-text {
	display: none;
}

.form-group .form-help-text.show {
	display: block;
}

.form-group .form-errors {
	font-size: smaller;
	color: var(--bs-danger);
}

.disabled[data-name] > div:nth-child(2) {
	opacity: .4;
}

.disabled[data-name] a {
	pointer-events: none;
	color: var(--bs-btn-disabled-color);
}

.disabled[data-name] .form-control:disabled,
.disabled[data-name] .form-select:disabled {
	background-color: var(--bs-body-bg);
}

.form-control.form-static {
	background: var(--bs-tertiary-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-secondary-color); /* NOTE: tertiary color is too faded... */
}

input[type='file'].form-control,
.form-check-multiple.form-control,
.form-clearable-file-input.form-control,
.form-localeimage-input.form-control,
.form-multiplelocaleimage-input.form-control,
.form-localestring-input.form-control,
.form-list-input.form-control,
.form-libraryfile-input.form-control {
	height: auto;
}

.form-check-multiple {
	max-height: 230px;
	overflow: auto;
	padding-bottom: 0;
}

.form-check-multiple.form-check-multiple-expand {
	max-height: initial;
}

.form-check-multiple .form-check {
	padding-bottom: .25rem;
	padding-top: .25rem;
	padding-inline-start: 1.75rem;
	margin-inline-start: -.25rem;
}

.disabled[data-name] .form-check-multiple .form-check {
	pointer-events: none;
}

.form-check-multiple .form-check:hover {
	background-color: var(--bg-emphasis);
}

.form-check-multiple label {
	display: block;
	word-break: break-word;
}

.form-list-input {
	max-height: 250px;
	overflow: auto;
	padding-bottom: 0;
}

.form-list-input.form-list-input-expand {
	max-height: initial;
}

.form-list-input .actionbar,
.form-check-multiple .actionbar {
	background-color: var(--bs-body-bg);
	bottom: 0;
	position: sticky;
}

.form-duration-input {
	align-items: baseline;
	display: flex;
}

.form-duration-input > * {
	flex: 1 1 0;
}

.form-duration-input .input-group {
	display: none;
	margin-inline-start: .5rem;
}

.form-duration-input[data-duration-other] .input-group {
	display: flex;
}

.form-control-invalid > .form-duration-input input,
.form-control-invalid > .form-duration-input select {
	border-color: var(--bs-danger);
}

.form-selector-input {
	display: flex;
}

.form-selector-input input {
	margin-inline-start: .5rem;
}

.form-multiplelocaleimage-input {
	max-height: 300px;
	overflow-y: auto;
}

.form-multiplelocaleimage-input [role='files-actions'] {
	background-color: var(--bs-body-bg);
	bottom: 0;
	position: sticky;
}

.form-multiplelocaleimage-input .files-new {
	display: flex;
	align-items: center;
}

.form-multiplelocaleimage-input .files-new div {
	padding: 0 .75rem;
}

.form-multiplelocaleimage-input input[type='file'] {
	flex: 1 1 auto;
}

input[data-target='ar'], input[data-target='ckb'], input[data-target='fa'], input[data-target='he'], input[data-target='ur'],
textarea[data-target='ar'], textarea[data-target='ckb'], textarea[data-target='fa'], textarea[data-target='he'], textarea[data-target='ur'] {
	direction: rtl;
}

input[type='file'] {
	direction: initial;
}

.form-libraryfile-input .dropdown-toggle {
	--bs-btn-bg: var(--bs-tertiary-bg);
	--bs-btn-hover-bg: var(--bs-secondary-bg);
	--bs-btn-active-bg: var(--bs-btn-hover-bg);
	--bs-btn-disabled-bg: var(--bs-btn-bg);
	--bs-btn-disabled-opacity: 1;
}

.form-libraryfile-input .modal-body {
	/* Takes care of rounding errors */
	overflow-x: hidden;
}

.form-libraryfile-input .modal .alert {
	/* Library icons are typically white, and alert default alert background is too light
	 * to provide enough contrast. Use border color instead, which also provide a flat look.
	 */
	--bs-alert-bg: var(--bs-alert-border-color);
}

.form-libraryfile-input.disabled .form-control {
	background-color: var(--bs-secondary-bg);
}

.form-runningtime-input {
	display: flex;
	align-items: center;
}

.form-runningtime-input input {
	max-width: 6em;
}

.form-control-invalid > .form-runningtime-input > .form-control {
	border-color: var(--bs-danger);
}

.tooltip-image {
	width: 6rem;
	height: 6rem;
	object-fit: contain;
}

.tooltip-inner {
	text-align: initial;
}

.tooltip-inner ul {
	list-style-position: inside;
	padding: 0;
	margin: 0;
}

.tooltip:has(.tooltip-image) {
	--bs-tooltip-bg: var(--bg-tooltip);
}

.alert-popup {
	position: fixed;
	bottom: 1rem;
	left: 20%;
	width: 60%;
	z-index: 3;
}

@media (min-width: 992px) {
	.alert-popup {
		left: 30%;
		width: 40%;
	}
}

.actions {
	text-align: center;
	white-space: nowrap;
	min-width: min-content;
	width: 0;
}

.actionbar.actionbar-top {
	background-color: var(--bs-body-bg);
	position: sticky;
	top: var(--header-size);
	z-index: 1;
}

.actionbar select {
	width: auto;
	vertical-align: middle;
	overflow: hidden;
	text-overflow: ellipsis;
}

.detail-grid {
	display: grid;
	grid-gap: .5rem .8rem;
}

.detail-grid > :nth-child(odd) {
	font-weight: bold;
	text-decoration: underline;
}

.detail-grid > .separator + * {
	display: none;
}

.detail-grid img.qrcode {
	width: 100%;
	max-width: 400px;
}

@media (min-width: 576px) {
	.detail-grid {
		grid-template-columns: auto 1fr;
	}
	.detail-grid > :nth-child(odd) {
		text-decoration: none;
	}
	.detail-grid > .separator {
		grid-column: 1 / 3;
	}
}

.formset [role="formset-row"] {
	display: flex;
	align-items: baseline;
}

.disabled[data-name] .formset:not([data-formset-inline]) [role="formset-row"] {
	pointer-events: none;
}

.formset:not([data-formset-inline]) [role="formset-row"]:hover {
	background-color: var(--bg-emphasis);
}

.formset [role="formset-row"] > :first-child {
	flex: 1 1 0;
	min-width: 0;
	margin-inline-end: .5rem;
}

.formset[data-formset-inline] [role="formset-form"] {
	column-gap: .5rem;
}

.card-columns {
	columns: 1;
}

.card-columns .card {
	break-inside: avoid;
	margin-bottom: 1rem;
}

@media (min-width: 1200px) {
	.card-columns {
		columns: 2;
	}
}

.actions a.btn-link.disabled,
[role="formset-actions"] a.btn-link.disabled {
	color: var(--bs-btn-disabled-color);
	opacity: .65;
	pointer-events: none;
}

.drag-placeholder {
	background-color: rgb(var(--bs-primary-rgb), 0.15);
	opacity: .5;
}

.drag-no-select ::selection {
	background: none;
}

.text-header {
	background-color: var(--bg-header);
}

#contextmenu {
	/* Position/Transform context menu against window left side. */
	left: 0 !important;
	right: auto !important;
}