/* assets/admin.css - FireBon Portal (Option B, cleaned, no inline) */

/* ---------------------------
	Theme Tokens
---------------------------- */
:root{
	/* geometry */
	--r: 16px;
	--shadow: 0 10px 30px rgba(17,24,39,.10);

	/* light */
	--bg: #f6f7fb;
	--panel: #ffffff;
	--panel2:#fbfcfe;

	--border:#e5e7eb;
	--text:#0f172a;
	--muted:#64748b;

	--brand:#ff9600;
	--brandSoft: rgba(255,150,0,.12);

	--hover: rgba(15,23,42,.05);
	--focus: rgba(59,130,246,.35);

	/* layout */
	--sidebar-w: 260px;
	--sidebar-w-collapsed: 78px;
	--header-h: 64px;
	
	--text-scale: 1;
}

/* dark theme */
:root[data-theme="dark"]{
	--bg: #0b1220;
	--panel: #0f172a;
	--panel2:#0b1427;

	--border: rgba(148,163,184,.18);
	--text: #e5e7eb;
	--muted: #94a3b8;

	--brand:#d88922;
	--brandSoft: rgba(216,137,34,.16);

	--hover: rgba(226,232,240,.06);
	--shadow: 0 14px 40px rgba(0,0,0,.35);

	--focus: rgba(96,165,250,.35);
	
	--text-scale: 1;
}

/* make native inputs match theme */
html{ color-scheme: light; }
:root[data-theme="dark"]{ color-scheme: dark; }

/* ---------------------------
	Base
---------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
	margin:0;
	font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
	background: var(--bg);
	color: var(--text);
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; }
.muted{ color: var(--muted); }
.mutedLarge{ color: var(--muted); font-size: 34px; }
.mutedSmall{ color: var(--muted); font-size: 12px; }
.mono{
	font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

/* Focus */
:focus{ outline:none; }
:focus-visible{
	box-shadow: 0 0 0 3px var(--focus);
	border-radius: 12px;
}

/* ---------------------------
	Layout Shell
---------------------------- */
.appShell{ min-height:100vh; }

.overlayShade{
	position: fixed;
	inset:0;
	background: rgba(0,0,0,.35);
	opacity:0;
	pointer-events:none;
	transition: opacity .2s ease;
	z-index: 20;
}

.sidebar{
	position: fixed;
	top:0;
	left:0;
	height:100vh;
	width: var(--sidebar-w);

	background: var(--panel);
	border-right: 1px solid var(--border);
	padding: 10px 10px 14px;
	overflow: auto;

	transition: width .18s ease;
	z-index: 30;
}

.main{
	margin-left: var(--sidebar-w);
	min-height:100vh;
	transition: margin-left .18s ease;

	/* IMPORTANT: dropdown overlays must not be clipped */
	overflow: visible;
}

body.sidebar-collapsed .sidebar{ width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .main{ margin-left: var(--sidebar-w-collapsed); }

/* mobile overlay sidebar */
@media (max-width: 900px){
	.sidebar{
		transform: translateX(-105%);
		width: var(--sidebar-w);
		box-shadow: var(--shadow);
		transition: transform .2s ease;
	}
	body.sidebar-open .sidebar{ transform: translateX(0); }
	.main{ margin-left: 0; }
	body.sidebar-open .overlayShade{
		opacity:1;
		pointer-events:auto;
	}
}

/* ---------------------------
	Sidebar Brand (Logo)
---------------------------- */
.sidebarLogoLink{
	display:block;
	padding: 6px;
}
.sidebarLogoImg{
	width: 100%;
	max-height: 70px;
	object-fit: contain;
}

/* logo white in dark mode */
:root[data-theme="dark"] .sb-logo{
	filter: brightness(0) invert(1);
}

body.sidebar-collapsed .sidebarLogoLink{ padding: 6px 4px; }
body.sidebar-collapsed .sidebarLogoImg{ max-height: 46px; }

/* ---------------------------
	Sidebar Navigation
---------------------------- */
.nav{
	margin-top: 8px;
	display:flex;
	flex-direction: column;
	gap: 6px;
}

.navItem{
	display:flex;
	align-items:center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 14px;
	transition: background .15s ease;
	cursor:pointer;
}

.navItem i{
	width: 22px;
	text-align:center;
	color: var(--muted);
}

.navItem:hover{ background: var(--hover); }
.navItem.active{ background: var(--brandSoft); }
.navItem.active i{ color: var(--brand); }

.navText{
	font-size: 14px;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
}

.navItemDisabled{
	opacity: .55;
	pointer-events:none;
	cursor:not-allowed;
}

body.sidebar-collapsed .navText{ display:none; }
body.sidebar-collapsed .navItem{ justify-content:center; }

/* ---------------------------
	Topbar (Header)
	- supports both .header and .topbar
---------------------------- */
.header,
.topbar{
	height: var(--header-h);
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 12px;

	padding: 10px 18px;
	background: var(--panel);
	border-bottom: 1px solid var(--border);

	position: sticky;
	top:0;
	z-index: 25;

	/* IMPORTANT: allow dropdown overlay */
	overflow: visible;
}

.headerLeft,
.topbarLeft{
	display:flex;
	align-items:center;
	gap: 10px;
	min-width: 0;
}

.headerRight,
.topbarRight{
	display:flex;
	align-items:center;
	gap: 10px;
	flex: 0 0 auto;
}

/* icon buttons */
.iconBtn{
	border:1px solid var(--border);
	background: var(--panel2);
	color: var(--text);

	border-radius: 12px;
	height:40px;
	width:40px;

	display:flex;
	align-items:center;
	justify-content:center;

	cursor:pointer;
	transition: background .15s ease, transform .05s ease;
}
.iconBtn:hover{ background: var(--hover); }
.iconBtn:active{ transform: translateY(1px); }

/* prevent burger shrink */
#btnSidebarToggle,
#btnSidebar{
	flex: 0 0 40px;
}

.pageTitle{
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* optional search (if used) */
.searchWrap{
	flex: 1;
	display:flex;
	align-items:center;
	gap:8px;

	background: var(--panel2);
	border:1px solid var(--border);
	border-radius: 14px;

	padding: 8px 12px;
	min-width: 240px;
}
.searchWrap i{ color: var(--muted); }
.searchWrap input{
	width:100%;
	border:0;
	background:transparent;
	color: var(--text);
	outline:none;
	font-size: 14px;
}

/* ---------------------------
	User Dropdown
---------------------------- */
.userDrop{
	position: relative;
	display:inline-flex;
	align-items:center;
}

/* trigger button */
.userChip,
.chip{
	display:inline-flex;
	align-items:center;
	gap: 10px;

	height:40px;
	padding: 0 12px;

	border-radius: 12px;
	border:1px solid var(--border);
	background: var(--panel2);

	cursor:pointer;
}

.userEmail{
	max-width: 260px;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 800;
}

/* dropdown menu overlay */
.userMenu{
	position:absolute;
	right:0;
	top: calc(100% + 10px);

	width: 280px;
	padding: 10px;

	background: var(--panel);
	border:1px solid var(--border);
	border-radius: 14px;
	box-shadow: var(--shadow);

	display:none;
	z-index: 9999;
}
.userMenu.open{ display:block; }

.userMenuHead{ padding: 6px 6px 10px; }
.userMenuEmail{ font-weight: 900; }
.userMenuRole{ color: var(--muted); font-size: 12px; margin-top: 2px; }

.userMenuSep{ height:1px; background: var(--border); margin: 6px 0; }

.sideSep{ height:1px; background: var(--border); margin: 6px 0; padding: 0 10px; }

.userMenuItem{
	display:flex;
	align-items:center;
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
}
.userMenuItem:hover{ background: var(--hover); }

/* ---------------------------
	Page / Content
---------------------------- */
.page,
.content{
	padding: 18px;
	width: 100%;
}

/* optional centered content width (use only if you want it) */
.contentNarrow{
	max-width: 1100px;
	margin: 0 auto;
}

.card{
	background: var(--panel);
	border:1px solid var(--border);
	border-radius: var(--r);
	box-shadow: var(--shadow);
	padding: 16px;
}
/*.card + .card{ margin-top: 14px; }*/

.cardHeader{
	display:flex;
	align-items:flex-start;
	justify-content: space-between;
	gap:12px;
	margin-bottom: 12px;
}

.h1{ font-size: 20px; font-weight: 900; margin:0; }
.h2{ font-size: 16px; font-weight: 900; margin:0; }

/* grids */
.grid2{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-content: first;
}
@media (max-width: 700px){
	.grid2{ grid-template-columns: 1fr; }
}

.grid2simHigh{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: stretch; /* wichtig */
}
@media (max-width: 700px){
	.grid2simHigh	{ grid-template-columns: 1fr; }
}

.grid3{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	align-content: first;
}
@media (max-width: 700px){
	.grid3{ grid-template-columns: 1fr; }
}

.grid4{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 12px;
	align-content: first;
}
@media (max-width: 700px){
	.grid4{ grid-template-columns: 1fr 1fr; }
}

.grid5{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 12px;
	align-content: first;
}
@media (max-width: 700px){
	.grid5{ grid-template-columns: 1fr 1fr 1fr; }
}

.field{
	display:flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}
.field > span{
	font-size: 12px;
	font-weight: 800;
	color: var(--muted);
}

/* inputs */
.input{
	width:100%;
	height:44px;
	padding: 10px 12px;

	border-radius: 14px;
	border:1px solid var(--border);
	background: var(--panel2);
	color: var(--text);
}
textarea.input{ height:auto; min-height:110px; }

select.input{
	padding-right: 38px;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;

	background-image:
		linear-gradient(45deg, transparent 50%, var(--muted) 50%),
		linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 50%,
		calc(100% - 12px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat:no-repeat;
}
select.input::-ms-expand{ display:none; }

/* buttons */
.btn{
	border:1px solid var(--border);
	background: var(--panel2);
	color: var(--text);

	height:44px;
	padding: 0 14px;
	border-radius: 14px;

	cursor:pointer;
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-weight: 500;
}
.btn:hover{ background: var(--hover); }
.btn:active{ transform: translateY(1px); }

.btnPrimary{
	border-color: transparent;
	background: var(--brand);
	color: #fff;
}
.btnPrimary:hover{ filter: brightness(.98); color: #000;}

:root[data-theme="dark"] .btnPrimary{
	color: #fff;
}

/* tables */
.tableWrap{
	overflow:auto;
	border-radius: 14px;
	border:1px solid var(--border);
	background: var(--panel);
}
.table{
	width:100%;
	border-collapse: collapse;
}
.table th, .table td{
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	text-align:left;
	font-size: 13px;
}
.table th{
	background: var(--panel2);
	color: var(--muted);
	font-weight: 600;
}
.table tr:last-child td{ border-bottom:0; }

/* Flash */
.flash{
	margin: 12px 18px 0 18px;
	padding: 10px 12px;

	border-radius: 14px;
	border:1px solid var(--border);
	background: var(--panel);
	font-size: 13px;
}
.flash.ok{
	border-color: rgba(34,197,94,.35);
	background: rgba(34,197,94,.10);
}
.flash.bad{
	border-color: rgba(248,113,113,.35);
	background: rgba(248,113,113,.10);
}

/* helpers */
.mt0{ margin-top:0; }
.mt12{ margin-top:12px; }
.mt14{ margin-top:14px; }
.spanAll{ grid-column: 1 / -1; }
.alignEnd{ align-items:end; }
.navSpacer{ height:10px; }

/* ---------------------------
	Auth (Login)
---------------------------- */
.authWrap{
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 22px;
}
.authCard{
	width: min(520px, 92vw);
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--r);
	box-shadow: var(--shadow);
	padding: 18px;
}
.authLogo{
	display:block;
	width: 220px;
	max-width: 70%;
	height:auto;
	object-fit: contain;
}

/* logo white in dark mode */
:root[data-theme="dark"] .authLogo{
	filter: brightness(0) invert(1);
}

.authSubtitle{ margin-top: 10px; }
.authBtn{ margin-top: 10px; width: 100%; }

/* Sidebar collapsed = nur Icons */
body.sidebar-collapsed .navText{
	display: none !important;
}

body.sidebar-collapsed .navItem{
	justify-content: center;
}

body.sidebar-collapsed .navItem i{
	margin: 0;
}

body.sidebar-collapsed .sidebarLogoImg{
	max-height: 46px;
}

/* Sidebar collapsed: nur Icons (robust für body ODER .appShell) */
body.sidebar-collapsed .sidebar .navText,
.appShell.sidebarCollapsed .sidebar .navText{
	display: none !important;
}

body.sidebar-collapsed .sidebar .navItem,
.appShell.sidebarCollapsed .sidebar .navItem{
	justify-content: center;
}

/* Fallback falls irgendwo kein .navText genutzt wird */
body.sidebar-collapsed .sidebar .navItem span,
.appShell.sidebarCollapsed .sidebar .navItem span{
	display: none !important;
}

/* ===== FORCE: Sidebar collapsed -> nur Icons ===== */
body.sidebar-collapsed .sidebar .navText,
body.sidebar-collapsed .sidebar nav .navText{
	display: none !important;
}

/* Fallback: auch alle spans in Sidebar-Links ausblenden */
body.sidebar-collapsed .sidebar nav a span{
	display: none !important;
}

/* Zentrierung der Icons */
body.sidebar-collapsed .sidebar .navItem,
body.sidebar-collapsed .sidebar nav a.navItem{
	justify-content: center !important;
	gap: 0 !important;
}

/* Optional: Icon leicht größer/zentrierter */
body.sidebar-collapsed .sidebar .navItem i{
	margin: 0 !important;
}

/* FORCE: User dropdown meta kleiner + muted (place at END of file) */
#userMenu .menuHead .menuEmail{
	font-weight: 600;
	font-size: 18px;
	line-height: 1.15;
}

#userMenu .menuHead .menuRole,
#userMenu .menuHead .menuMail{
	font-size: 12px;
	color: var(--muted);
	font-weight: 700;
	line-height: 1.25;
}

#userMenu .menuHead .menuMail{
	font-weight: 600;
}

/* =========================================================
	 MODAL (Overlay) – für Kunden anlegen/anzeigen/bearbeiten
========================================================= */
.modalOverlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.35);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 18px;
	z-index: 9999;
}
.modalOverlay.open{ display:flex; }

.modalDialog{
	width: min(980px, 100%);
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--r);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.modalHead{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
}

.modalTitle{
	font-size: 16px;
	font-weight: 400;
	margin: 0;
}

.modalClose{
	border:1px solid var(--border);
	background: var(--panel2);
	color: var(--text);
	border-radius: 12px;
	height:40px;
	width:40px;
	display:grid;
	place-items:center;
	cursor:pointer;
}
.modalClose:hover{ background: var(--hover); }

.modalBody{
	padding: 14px 16px;
}

.modalFoot{
	display:flex;
	align-items:center;
	justify-content: flex-end;
	gap: 10px;
	padding: 12px 16px;
	border-top: 1px solid var(--border);
}

/* Modal scroll only inside */
.modalDialog{
	max-height: calc(100vh - 48px);
	display:flex;
	flex-direction: column;
}
.modalBody{
	overflow:auto;
	-webkit-overflow-scrolling: touch;
}

/* Kleine Helfer */
.rowBetween{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom: 10px;}
.gap10{ gap:10px; }
.w140{ width:140px; max-width: 30vw; }
.w180{ width:180px; max-width: 30vw; }
.w240{ width:240px; max-width: 30vw; }
.w360{ width:360px; max-width: 30vw; }


.inlineRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.pill{
	display:inline-flex;
	align-items:center;
	padding:6px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:900;
	border:1px solid var(--border);
	background: var(--panel2);
}
.pill.ok{
	border-color: rgba(34,197,94,.35);
	background: rgba(34,197,94,.12);
}
.pill.ok-active{
	border-color: rgba(0, 15, 255, 0.35);
	background: rgba(0, 15, 255,.12);
}

.pill.off{
	border-color: rgba(148,163,184,.35);
	background: rgba(148,163,184,.12);
}

.pill.asked{
	border-color: rgba(255, 0, 246, 0.35);
	background: rgba(255, 0, 246, 0.12);
}

.pill.reopen{
	border-color: rgba(255, 0, 0, 0.35);
	background: rgba(255, 0, 0,.12);
}
.pill.repart{
	border-color: rgba(255, 228, 0, 0.35);
	background: rgba(255, 228, 0,.12);
}
.pill.repaid{
	border-color: rgba(0, 255, 41, 0.35);
	background: rgba(0, 255, 41,.12);
}

.pill.draft{
	border-color: rgba(245,158,11,.35);
	background: rgba(245,158,11,.14);
}
.pill.warning{
	border-color: rgba(245,158,11,.35);
	background: rgba(245,158,11,.14);
}
.pill.closed{
	border-color: rgba(59,130,246,.35);
	background: rgba(59,130,246,.14);
}

.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.35); z-index:100; }
.modal.open{ display:flex; }
.modalDialog{ width:min(980px,100%); background:var(--panel); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; max-height: calc(100vh - 80px); }
.modalHead,.modalFoot{ flex:0 0 auto; padding:14px 16px; border-bottom:1px solid var(--border); }
.modalFoot{ border-bottom:0; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }
.modalBody{ flex:1 1 auto; overflow:auto; padding:14px 16px; min-height:0; }
.modalSection{ margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.btnSmall{ height:38px; width:38px; padding:0; justify-content:center; border-radius:12px; }

.listTools{
	display:flex;
	gap:12px;
	align-items:stretch; /* wichtig */
	margin-top: 14px;
	margin-bottom: 14px;
}

.listTools .input{
	height:44px; /* erzwingt gleiche Höhe */
}

.listTools input.input{
	flex: 1 1 auto;
	min-width: 220px;
}

.listTools select.input{
	flex: 0 0 220px; /* gleiche Breite wie tenants filter, wenn du willst */
}

@media (max-width: 700px){
	.listTools{ flex-direction: column; }
	.listTools select.input{ flex: 1 1 auto; }
}

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

.inputSm{
	height:40px;
	border-radius:12px;
	padding: 8px 12px;
	min-width: 320px;
}

@media (max-width: 900px){
	.inputSm{ min-width: 200px; }
}

/* =========================
	 Impersonation Bar (Topbar)
========================= */

.impersonateBar{
	display:flex;
	align-items:center;
	gap:10px;
	min-width: 150px;      /* genug Platz, sonst bricht es */
	max-width: 420px;
}

.impersonateBar .impRow{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
	width:100%;
}

/* Select in Topbar: NICHT 100% block, sondern flexibel */
.impersonateBar .impSelect{
	height:40px;
	min-width:0;
	flex: 1 1 auto;
	width:auto;           /* überschreibt ggf. width:100% */
}

/* Clear Button */
.impersonateBar .impBtn{
	height:40px;
	width:40px;
	flex: 0 0 40px;
	padding:0;
	justify-content:center;
}

/* falls dein .btn height:44px setzt -> in Topbar angleichen */
.header .impersonateBar .btn,
.topbar .impersonateBar .btn{
	height:40px;
	border-radius:12px;
}

/* Mobile: Bar schmaler, darf umbrechen oder ausblenden */
@media (max-width: 900px){
	.impersonateBar{
		min-width: 0;
		max-width: 260px;
	}
	.impersonateBar .impSelect{
		max-width: 220px;
	}
}

.topbar{
	flex-wrap: nowrap;
}
.topbarRight{
	flex-wrap: nowrap;
}

/* ===== Topbar layout stability ===== */
.topbar{
	align-items:center;
}

.topbarRight{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;              /* wichtig: damit Flex nicht bricht */
	flex-wrap:nowrap;         /* NICHT umbrechen */
}

/* ===== ImpersonateBar (Super) ===== */
.impersonateBar{
	display:flex;
	align-items:center;
	min-width:0;
}

.impBox{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
}

/* Select kompakt wie Buttons */
.impBox .input{
	height:40px;
	padding: 0 12px;
	border-radius:12px;
	max-width: 320px;         /* verhindert “sprengen” */
	min-width: 180px;         /* angenehm lesbar */
}

/* Clear-Button gleiche Höhe */
.impBox .btn.btnSmall{
	height:40px;
	width:40px;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:12px;
}

/* Wenn wenig Platz: Select darf schrumpfen */
@media (max-width: 1100px){
	.impBox .input{
		min-width: 120px;
		max-width: 180px;
	}
}


/* --- Event Setup: Cards align --- */
.cardHeader {
	min-height: 56px; /* sorgt für gleiche Start-Höhe */
}

/* kleine Meta-Zeile unter Titel (z.B. Zeitraum) */
.cardMeta {
	margin-top: 4px;
}

/* Checkbox-Zeilen sauber */
.checkRow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0;
}
.checkRow input { transform: translateY(1px); }

.productBtn{
	border: var(--border);
	background: var(--btn-bg, var(--surface));
	color: var(--btn-fg, var(--text));
	border-radius: 14px;
	padding: 10px;

	height: 58px;
	width: 100%;
	display: grid;
	grid-template-rows: auto auto;
	align-content: center;

	text-align: left;
	user-select: none;
	cursor: pointer;
	touch-action: manipulation;
	position: relative;
	overflow: hidden;

	transition: transform 80ms ease, filter 140ms ease;
}
.productBtn:active{ transform: translateY(1px); }
.productBtn:hover{ filter: brightness(1.02); }

/* ✅ Text in ProductBtn skaliert jetzt */
.productBtn .title{
	font-weight: 800;
	font-size: calc(13px * var(--text-scale));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: inherit;
}
.productBtn .meta{
	font-size: calc(12px * var(--text-scale));
	display: flex;
	justify-content: space-between;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: inherit;
	opacity: 0.85;
}

.productBtnWrap{
	display: block !important;
	width: 100%;
}

/* Tabellen-Text mit Ellipsis */
.td-ellipsis {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* =========================================================
	 Responsive patch (mobile-friendly)
	 HINWEIS: ans ENDE von admin.css hängen
========================================================= */

/* 1) Viewport-Fix (für iOS safe-area & Zoom-Fonts) */
html{
	-webkit-text-size-adjust: 100%;
}

/* 2) Mobile spacing: weniger Padding, Cards enger */
@media (max-width: 700px){
	.page, .content{
		padding: 12px;
	}
	.card{
		padding: 12px;
		border-radius: 14px;
	}
	.cardHeader{
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.pageTitle{
		font-size: 16px;
	}
}

/* 3) Topbar: darf umbrechen (sonst sprengt’s) */
@media (max-width: 900px){
	.topbar, .header{
		padding: 10px 12px;
		flex-wrap: wrap;              /* <— wichtig */
		height: auto;                 /* statt fix */
		min-height: var(--header-h);
		gap: 10px;
	}

	.topbarLeft, .headerLeft,
	.topbarRight, .headerRight{
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 10px;
	}

	/* UserChip und Impersonate dürfen nicht überlaufen */
	.userEmail{
		max-width: 100%;
	}

	.searchWrap{
		min-width: 0;
		width: 100%;
		flex: 1 1 100%;
	}
}

/* 4) Fixed widths auf Mobile auf 100% ziehen */
@media (max-width: 700px){
	.w180, .w240, .w360{
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Buttons/Inputs in Reihen: Stapeln */
	.rowBetween{
		flex-wrap: wrap;
		align-items: stretch;
	}

	.inlineRow{
		gap: 8px;
	}

	.btn{
		height: 44px; /* bleibt */
	}
}

/* 5) Tabellen: kompakter + horizontal scroll okay, aber besser lesbar */
@media (max-width: 700px){
	.table th, .table td{
		padding: 8px 10px;
		font-size: 12px;
	}
	.tableWrap{
		border-radius: 12px;
	}
}

/* 6) Modal: auf Mobile fast fullscreen, mehr nutzbarer Platz */
@media (max-width: 700px){
	.modal{
		padding: 10px;
		align-items: flex-end; /* fühlt sich mobile-typischer an */
	}

	.modalDialog{
		width: 100%;
		max-height: calc(100vh - 20px);
		border-radius: 16px;
	}

	.modalHead, .modalFoot{
		padding: 12px;
	}
	.modalBody{
		padding: 12px;
	}

	/* Modalfuß: Buttons untereinander wenn eng */
	.modalFoot{
		flex-wrap: wrap;
		justify-content: stretch;
	}
	.modalFoot .btn{
		width: 100%;
		justify-content: center;
	}
}

/* 7) Grid: auf sehr kleinen Screens noch enger */
@media (max-width: 420px){
	.grid4{ grid-template-columns: 1fr; }
	.btnSmall{
		height: 40px;
		width: 40px;
	}
	.iconBtn{
		height: 40px;
		width: 40px;
	}
}

/* 8) Touch: größere Trefferflächen für kleine Icon-Buttons */
@media (max-width: 700px){
	.btnSmall, .iconBtn{
		touch-action: manipulation;
	}
}

/* 9) Sidebar: mehr Platz im Overlay-Modus */
@media (max-width: 900px){
	.sidebar{
		padding-bottom: 18px;
	}
}

/* =========================================================
	 Mobile Table -> Rows as Cards
	 Nutzung: <table class="table tableCards">
========================================================= */

@media (max-width: 700px){
	.tableCards thead{
		display:none;
	}

	.tableCards,
	.tableCards tbody,
	.tableCards tr,
	.tableCards td{
		display:block;
		width:100%;
	}

	.tableCards tr{
		background: var(--panel);
		border: 1px solid var(--border);
		border-radius: 14px;
		box-shadow: var(--shadow);
		margin-bottom: 12px;
		overflow: hidden;
	}

	.tableCards td{
		border-bottom: 1px solid var(--border);
		padding: 10px 12px;
	}
	.tableCards td:last-child{
		border-bottom: 0;
	}

	/* "Label : Value" Layout */
	.tableCards td{
		display:flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 12px;
	}

	.tableCards td::before{
		content: attr(data-label);
		color: var(--muted);
		font-weight: 800;
		font-size: 12px;
		flex: 0 0 42%;
		max-width: 42%;
	}

	.tableCards td > *{
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Zahlen rechts ausrichten, aber in Card-Layout “Value” sauber halten */
	.tableCards td[style*="text-align:right"]{
		justify-content: space-between;
	}

	/* Aktionen-Zelle: Buttons rechts, Label links */
	.tableCards td.actionsCell{
		display:flex;
		align-items:center;
	}
	.tableCards td.actionsCell::before{
		content: "Aktionen";
	}
	.tableCards td.actionsCell{
		justify-content: space-between;
	}
}

/* ===== Rentals Calendar (Month Grid + spanning bars) ===== */

.rentCal{ width:100%; }

.rentCalDow{
	display:grid;
	grid-template-columns:repeat(7,1fr);
	gap:6px;
	margin-bottom:6px;
}
.rentCalDow > div{
	font-size:12px;
	color:var(--muted);
	font-weight:800;
	padding:0 6px;
}

/* IMPORTANT:
	 Wir machen die Monatszellen bewusst FIX hoch, damit die Overlay-Top-Berechnung stimmt. */
.rentCalGrid{
	--gap: 6px;
	--cell-h: 130px;      /* muss zu grid-auto-rows passen */
	--pad: 8px;
	--dayHead-h: 22px;
	--marker-h: 44px;     /* 2 Zeilen -- 44*/

	position:relative;
	display:grid;
	grid-template-columns:repeat(7,1fr);
	grid-auto-rows: var(--cell-h);
	gap: var(--gap);
}

/* Day cell */
.rcDay{
	border:1px solid var(--border);
	border-radius:14px;
	background:var(--panel2);
	padding: var(--pad);
	overflow:hidden;

	display:flex;
	flex-direction:column;
}
.rcDay.isOther{ opacity:.55; }

.rcDayHead{
	height: var(--dayHead-h);
	line-height: var(--dayHead-h);
	font-weight:900;
	font-size:12px;
	color:var(--muted);
	position:relative;
	z-index: 4;           /* über Bars */
}

.rcBookSpace{
	flex: 0 0 var(--book-h, 0px);
	height: var(--book-h, 0px);
}

/* Marker: IMMER unten */
.rcMarkers{
	margin-top: 6px; /* auto */
	height: var(--marker-h);
	overflow:hidden;

	display:flex;
	flex-direction:column;
	gap:4px;

	position:relative;
	z-index: 4;           /* über Bars */
}
.rcMark{
	font-size:11px;
	padding:4px 8px;
	border-radius:999px;
	border:1px solid var(--border);
	background: rgba(148,163,184,.18);
	color: var(--text);

	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* ===== overlay per week =====
	 Overlay liegt absolut über dem Grid und wird per nth-of-type auf Zeilen gesetzt.
	 TOP muss exakt (cell-h + gap) * row sein. */
.rcOverlay{
	position:absolute;
	left:0; right:0;
	z-index: 3;
	pointer-events:none;
	
	display:grid;
	grid-template-columns:repeat(7,1fr);
	grid-auto-rows:22px;
	gap: var(--gap);
	
	padding-top: calc(var(--pad) + var(--dayHead-h));
	box-sizing:border-box;
}



/* Week row positioning (6 Wochen) */
/*.rentCalGrid .rcOverlay:nth-of-type(1){ top: 0; }
.rentCalGrid .rcOverlay:nth-of-type(2){ top: calc((var(--cell-h) + var(--gap)) * 1); }
.rentCalGrid .rcOverlay:nth-of-type(3){ top: calc((var(--cell-h) + var(--gap)) * 2); }
.rentCalGrid .rcOverlay:nth-of-type(4){ top: calc((var(--cell-h) + var(--gap)) * 3); }
.rentCalGrid .rcOverlay:nth-of-type(5){ top: calc((var(--cell-h) + var(--gap)) * 4); }
.rentCalGrid .rcOverlay:nth-of-type(6){ top: calc((var(--cell-h) + var(--gap)) * 5); }*/

/* Bars */
.rcBar{
	pointer-events:auto;       /* klickbar */
	cursor:pointer;

	align-self:start;
	height:22px;
	border-radius:999px;
	padding:3px 8px;
	font-size:11px;
	font-weight:600;
	margin: 0 5px 0 5px;

	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;

	border:1px solid var(--border);
	background: var(--panel);
}

/* Status Farben */
.rcBar.ok{
	border-color: rgba(34,197,94,.35);
	background: rgba(34,197,94,.14);
}
.rcBar.ok-active{
	border-color: rgba(0, 15, 255, 0.35);
	background: rgba(0, 15, 255,.14);
}
.rcBar.warning{
	border-color: rgba(245,158,11,.35);
	background: rgba(245,158,11,.14);
}
.rcBar.asked{
	border-color: rgba(255,0,246,.35);
	background: rgba(255,0,246,.14);
}
.rcBar.reopen{
	border-color: rgba(255,0,0,.35);
	background: rgba(255,0,0,.14);
}
.rcBar.warning{
	border-color: rgba(245,158,11,.35);
	background: rgba(245,158,11,.14);
}
.rcBar.off{
	border-color: rgba(148,163,184,.35);
	background: rgba(148,163,184,.14);
}

.rcBar.detail{
	border-color: none;
	background: none;
	border: none;
}

/* Mobile: niedrigere Zellen */
@media (max-width: 900px){
	.rentCalGrid{
		--cell-h: 110px;
	}
}

.receiptWrap {
	background: #fff;
	border: 1px dashed rgba(0,0,0,.25);
	border-radius: 12px;
	padding: 12px;
}

.fbReceipt {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 12px;
	line-height: 1.25;
	color: #111;
}

.fbReceipt__brand {
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 6px;
}

.fbReceipt__meta {
	font-size: 12px;
	color: #222;
}

.fbReceipt__hr {
	border-top: 1px dashed rgba(0,0,0,.35);
	margin: 10px 0;
}

.fbReceipt__item { margin-bottom: 8px; }
.fbReceipt__note { color: #444; margin: 2px 0 0; }
.fbReceipt__dim { color: #555; }

.fbReceipt__row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.fbReceipt__sum { font-size: 13px; }

.fbReceipt__muted { color: #666; }

.fbReceipt__mono { white-space: pre-wrap; }

.segTabs{
	display:flex;
	gap:6px;
	background: rgba(0,0,0,.04);
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 12px;
	padding: 6px;
}

.segTab{
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	padding: 8px 12px;
	border-radius: 10px;
	font-weight: 600;
	cursor: pointer;
	color: rgba(0,0,0,.65);
}

.segTab.active{
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.10);
	color: rgba(0,0,0,.9);
}

.segTab:disabled{ opacity:.5; cursor:not-allowed; }

.chipWarn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:3px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:800;
	background: rgba(255,159,67,0.18);
	color: rgba(190,110,20,1);
	border: 1px solid rgba(255,159,67,0.35);
	margin-right: 5px;
}

/* Stat-Grid responsive (4 -> 2 -> 1) */
.statGrid{
	display:grid;
	gap:10px;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	margin-bottom: 10px;
}

/* Tablet / kleinere Laptops: 2 Spalten (=> 4 Boxen = 2 Zeilen) */
@media (max-width: 980px){
	.statGrid{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
}

/* Phone: 1 Spalte */
@media (max-width: 520px){
	.statGrid{
		grid-template-columns:1fr;
	}
}