/**
 * Motorica Backoffice – Design Tokens & global overrides
 * Reference: /informations/theming, motorica-toolbar-buttons.css
 */

:root {
	--motorica-primary: #ff6600;
	--motorica-primary-hover: #e65800;
	--motorica-primary-rgb: 255, 102, 0;
	--motorica-secondary: #0d234b;
	--motorica-success: #73DF4E;
	--motorica-danger: #c62828;
	--motorica-warning: #f9aa8e;
	--motorica-info: #8eddf9;
	--motorica-dark: #4a1f00;
	--motorica-white: #fff;
	--motorica-gray: #e2e8f0;
	--motorica-content-bg: rgba(122, 122, 122, 0.5);
	--motorica-text: #0f172a;
	--motorica-text-muted: #475569;
	--motorica-touch-min: 44px;

	/* Aliases for existing var(--primary) usage */
	--primary: var(--motorica-primary);
	--secondary: var(--motorica-secondary);
	--success: var(--motorica-success);
	--danger: var(--motorica-danger);
	--warning: var(--motorica-warning);
	--info: var(--motorica-info);
	--dark: var(--motorica-dark);
	--white: var(--motorica-white);
	--gray: var(--motorica-gray);
}

body {
	font-family: 'Source Sans 3', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var(--motorica-text);
	/* Android WebView / iOS: Safe Area oben (Statusleiste) und unten (Gestenleiste) */
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Mobile: rem-Basis 16→18px (+2px Body/UI); Inputs bleiben bei 16px (iOS-Zoom) */
@media (max-width: 767.98px) {
	html {
		font-size: 18px;
	}
}

/* Fixierte Tab-/Nav-Leiste unten (Android-App) */
.bottom-nav-bar {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.text-muted,
.small.text-muted,
.topbar .dropdown-header.text-muted {
	color: var(--motorica-text-muted) !important;
}

/* Primary/Secondary badges – Motorica, siehe /informations/theming */
.badge-primary {
	color: #fff;
	background-color: var(--motorica-primary);
}

a.badge-primary:hover,
a.badge-primary:focus {
	color: #fff;
	background-color: var(--motorica-primary-hover);
}

.badge-secondary {
	color: #fff;
	background-color: var(--motorica-secondary);
}

a.badge-secondary:hover,
a.badge-secondary:focus {
	color: #fff;
	background-color: #091a38;
}

.bg-primary {
	background-color: var(--motorica-primary) !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
	background-color: var(--motorica-primary-hover) !important;
}

/* SB Admin Bootstrap blue → Motorica primary */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
	background-color: var(--motorica-primary);
	border-color: var(--motorica-primary);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--motorica-primary-hover);
	border-color: var(--motorica-primary-hover);
	color: #fff;
}

.btn-primary:focus,
.btn-primary.focus {
	box-shadow: 0 0 0 0.2rem rgba(var(--motorica-primary-rgb), 0.35);
}

.bg-gradient-primary {
	background: var(--motorica-primary) !important;
	background-image: linear-gradient(180deg, var(--motorica-primary) 10%, var(--motorica-primary-hover) 100%) !important;
}

.dt-button.btn {
	background-color: var(--motorica-primary) !important;
	border-color: var(--motorica-primary) !important;
	color: #fff !important;
}

.dt-button.btn:hover {
	background-color: var(--motorica-primary-hover) !important;
	border-color: var(--motorica-primary-hover) !important;
}

/* Focus & interaction */
a[href]:not(.btn),
button:not(:disabled),
[role="button"],
label.clickable,
.invoice-status-chip,
.motorica-history-trigger,
.sticky-tab-btn {
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	a[href]:not(.btn),
	button,
	.sticky-tab-btn,
	.invoice-status-chip {
		transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	}
}

:focus-visible {
	outline: 2px solid var(--motorica-primary);
	outline-offset: 2px;
}

/* RTL (Arabisch): Flex-Layout + dir=rtl – kein extra Sidebar-Margin */
html[dir="rtl"] body {
	font-family: 'Noto Sans Arabic', 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
}

html[dir="rtl"] #content-wrapper {
	margin-right: 0 !important;
	margin-left: 0 !important;
	width: 100%;
}

/*
 * Content nav-tabs / nav-pills – lesbar auf Matrix-Hintergrund
 * Scope: nur #content-wrapper (Sidebar/Topbar unberührt)
 * Farben nur :not(.active), damit seiten-spezifische Active-Styles (SEO, Tax, …) greifen
 */
#content-wrapper .nav-tabs > .nav-item > .nav-link,
#content-wrapper .nav-pills > .nav-item > .nav-link {
	border-radius: 0.35rem;
	font-weight: 600;
	margin-right: 0.35rem;
	margin-bottom: 0.25rem;
}

#content-wrapper .nav-tabs > .nav-item > .nav-link:not(.active):not(.disabled),
#content-wrapper .nav-pills > .nav-item > .nav-link:not(.active):not(.disabled) {
	background-color: var(--motorica-gray);
	color: var(--motorica-text);
	border-color: transparent;
}

#content-wrapper .nav-tabs > .nav-item > .nav-link:not(.active):not(.disabled):hover,
#content-wrapper .nav-tabs > .nav-item > .nav-link:not(.active):not(.disabled):focus,
#content-wrapper .nav-pills > .nav-item > .nav-link:not(.active):not(.disabled):hover,
#content-wrapper .nav-pills > .nav-item > .nav-link:not(.active):not(.disabled):focus {
	background-color: #cbd5e1;
	color: var(--motorica-text);
	border-color: transparent;
}

#content-wrapper .nav-tabs {
	border-bottom-color: transparent;
}