/* N8N-Inventory — Stylesheet (v0.0.41)
   Gestaltet fuer ein IT-Betriebswerkzeug: ruhige, technische Flaeche,
   klare Statusfarben, Equipment-IDs in Monospace als funktionales
   (nicht dekoratives) Element. Kein externes Web-Font-Laden, damit das
   Plugin auf jedem Shared-Hosting ohne zusaetzliche Abhaengigkeit laeuft.

   v0.0.2: App bricht per CSS aus der (meist schmalen) Theme-Inhaltsspalte
   aus und nutzt die volle Bildschirmbreite ("Full-Bleed"), Hoehe richtet
   sich am Viewport statt an einer festen Pixelzahl aus, Rahmen/Ecken der
   Huelle entfernt (wirkt sonst wie ein Fenster im Fenster). */

.n8n-inv-app {
	--n8n-bg: #F4F6F9;
	--n8n-surface: #FFFFFF;
	--n8n-border: #DCE3EA;
	--n8n-text: #1B2430;
	--n8n-text-muted: #5C6773;
	--n8n-primary: #2C5F9B;
	--n8n-primary-dark: #1F4573;
	--n8n-primary-bg: #EAF1FA;
	--n8n-success: #2F8F5B;
	--n8n-success-bg: #E7F5EE;
	--n8n-warning: #C67A22;
	--n8n-warning-bg: #FBF0E1;
	--n8n-danger: #B0392E;
	--n8n-danger-bg: #FBEAE8;
	--n8n-grey: #6B7280;
	--n8n-grey-bg: #EEF0F2;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--n8n-text);
	background: var(--n8n-bg);
	line-height: 1.5;
	font-size: 15px;

	width: 100%;
	max-width: none !important;
	position: relative;
	left: auto;
	right: auto;
	margin: 0 !important;
	box-sizing: border-box;
}

.n8n-inv-app * { box-sizing: border-box; }

.n8n-inv-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.01em;
}

.n8n-inv-shell {
	display: flex;
	/* Richtet sich am sichtbaren Fensterbereich aus statt an einer festen
	   Pixelzahl. 64px ist ein Sicherheitsabstand fuer typische
	   Theme-Header/Admin-Bar; die App waechst bei Bedarf trotzdem weiter
	   nach unten (min-height, kein height), Inhalt wird nie abgeschnitten. */
	min-height: 100vh;
	background: var(--n8n-surface);
}

/* Sidebar */
.n8n-inv-sidebar {
	width: 220px;
	flex-shrink: 0;
	background: #17202B;
	color: #DCE3EA;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
}

.n8n-inv-brand {
	font-weight: 700;
	font-size: 16px;
	color: #FFFFFF;
	padding: 0 20px 18px 20px;
	border-bottom: 1px solid #2A3644;
	margin-bottom: 12px;
}

.n8n-inv-brand span { color: #6FA0D6; }

/* Aufklapp-Menue per Checkbox-Technik — kein JavaScript noetig. Auf dem
   Desktop unsichtbar/immer offen, auf schmalen Bildschirmen per Klick
   auf- und zuklappbar statt eines seitwaerts scrollbaren Streifens. */
.n8n-inv-nav-toggle-label { display: none; }

.n8n-inv-nav { list-style: none; margin: 0; padding: 0; flex: 1; }

.n8n-inv-nav li { margin: 0; }

.n8n-inv-nav a {
	display: block;
	padding: 10px 20px;
	color: #B7C2CE;
	text-decoration: none;
	font-size: 14px;
	border-left: 3px solid transparent;
}

.n8n-inv-nav a:hover { background: #1F2A38; color: #FFFFFF; }

.n8n-inv-nav a.active {
	background: #1F2A38;
	color: #FFFFFF;
	border-left-color: var(--n8n-primary);
	font-weight: 600;
}

.n8n-inv-nav .n8n-inv-nav-section {
	padding: 14px 20px 6px 20px;
	font-size: 11px;
	color: #6B7A8A;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Main area */
.n8n-inv-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.n8n-inv-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 28px;
	border-bottom: 1px solid var(--n8n-border);
}

.n8n-inv-topbar-user { font-size: 14px; color: var(--n8n-text-muted); }
.n8n-inv-topbar-user strong { color: var(--n8n-text); }

.n8n-inv-topbar-actions { display: flex; gap: 10px; align-items: center; }

.n8n-inv-content { padding: 28px; flex: 1; overflow-x: auto; }

.n8n-inv-h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px 0; }
.n8n-inv-sub { color: var(--n8n-text-muted); font-size: 14px; margin: 0 0 20px 0; }

/* Buttons */
.n8n-inv-btn {
	display: inline-block;
	padding: 9px 16px;
	background: var(--n8n-primary);
	color: #FFFFFF;
	border: none;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
}
.n8n-inv-btn:hover { background: var(--n8n-primary-dark); color: #FFFFFF; }
.n8n-inv-btn-secondary { background: var(--n8n-grey-bg); color: var(--n8n-text); }
.n8n-inv-btn-secondary:hover { background: #E2E5E9; color: var(--n8n-text); }
.n8n-inv-btn-danger { background: var(--n8n-danger); }
.n8n-inv-btn-danger:hover { background: #8E2D24; }
.n8n-inv-btn-large { padding: 22px 18px; font-size: 16px; width: 100%; text-align: center; border-radius: 8px; }

/* Forms */
.n8n-inv-field { margin-bottom: 14px; }
.n8n-inv-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--n8n-text); }
.n8n-inv-field .n8n-inv-hint { font-size: 12px; color: var(--n8n-text-muted); margin-top: 4px; }
.n8n-inv-field input[type="search"],
.n8n-inv-field input[type="text"],
.n8n-inv-field input[type="password"],
.n8n-inv-field input[type="number"],
.n8n-inv-field input[type="date"],
.n8n-inv-field input[type="file"],
.n8n-inv-field select,
.n8n-inv-field textarea {
	width: 100%;
	max-width: 420px;
	padding: 9px 11px;
	border: 1px solid var(--n8n-border);
	border-radius: 5px;
	font-size: 14px;
	font-family: inherit;
	background: #FFFFFF;
	color: var(--n8n-text);
}
.n8n-inv-field textarea { max-width: 560px; min-height: 80px; }
.n8n-inv-field input:focus, .n8n-inv-field select:focus, .n8n-inv-field textarea:focus {
	outline: 2px solid var(--n8n-primary);
	outline-offset: 1px;
}
.n8n-inv-required { color: var(--n8n-danger); }
.n8n-inv-form-actions { margin-top: 20px; }

/* Notices */
.n8n-inv-notice { padding: 12px 16px; border-radius: 5px; margin-bottom: 18px; font-size: 14px; }
.n8n-inv-notice-success { background: var(--n8n-success-bg); color: var(--n8n-success); }
.n8n-inv-notice-error { background: var(--n8n-danger-bg); color: var(--n8n-danger); }

/* Dashboard tiles */
.n8n-inv-run-reminder { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; border-left: 4px solid #6FA0D6; }
.n8n-inv-run-reminder .n8n-inv-h2 { margin: 0 0 5px; }
.n8n-inv-run-reminder p { margin: 0; color: var(--n8n-text-muted); }
.n8n-inv-run-reminder-soon { border-left-color: #D89A30; }
.n8n-inv-run-reminder-due { border-left-color: var(--n8n-danger); }
.n8n-inv-dashboard-customize { margin-bottom: 18px; }
.n8n-inv-dashboard-customize summary, .n8n-inv-dashboard-more summary { cursor: pointer; font-weight: 600; }
.n8n-inv-dashboard-customize form { margin-top: 14px; }
.n8n-inv-dashboard-order { list-style: none; padding: 0; margin: 12px 0 18px; max-width: 540px; }
.n8n-inv-dashboard-order li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--n8n-border); border-radius: 5px; margin-bottom: 5px; cursor: grab; }
.n8n-inv-dashboard-order label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.n8n-inv-dashboard-order-actions { display: flex; gap: 5px; }
.n8n-inv-dashboard-order-actions button { min-width: 34px; min-height: 34px; background: var(--n8n-grey-bg); border: 1px solid var(--n8n-border); border-radius: 4px; cursor: pointer; }
.n8n-inv-dashboard-models { margin-top: 22px; padding: 24px; }
.n8n-inv-dashboard-models-heading { margin-bottom: 18px; }
.n8n-inv-dashboard-models-heading h2 { margin: 0 0 3px; }
.n8n-inv-dashboard-models-heading p { margin: 0; color: var(--n8n-text-muted); font-size: 13px; }
.n8n-inv-dashboard-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 900px; }
.n8n-inv-model-card { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 16px; padding: 15px 18px; border: 1px solid var(--n8n-border); border-left: 3px solid #4FA3A0; border-radius: 8px; background: #fff; color: var(--n8n-text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.n8n-inv-model-card:hover, .n8n-inv-model-card:focus-visible { color: var(--n8n-text); border-color: var(--n8n-primary); box-shadow: 0 3px 12px rgba(27,36,48,.08); }
.n8n-inv-model-card-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; line-height: 1.35; }
.n8n-inv-model-card-count { display: grid; place-items: center; flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 9px; background: var(--n8n-primary-bg); color: var(--n8n-primary-dark); font-size: 21px; line-height: 1; font-weight: 700; }
.n8n-inv-dashboard-more { margin-top: 16px; }
.n8n-inv-dashboard-more summary { color: var(--n8n-primary); }
.n8n-inv-dashboard-more .n8n-inv-dashboard-model-grid { margin-top: 14px; }
@media (max-width: 700px) { .n8n-inv-dashboard-model-grid { grid-template-columns: 1fr; } .n8n-inv-dashboard-models { padding: 18px; } }
.n8n-inv-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
	margin-bottom: 28px;
}
.n8n-inv-tile {
	display: block;
	background: var(--n8n-surface);
	border: 1px solid var(--n8n-border);
	border-left: 4px solid var(--n8n-grey);
	border-radius: 6px;
	padding: 16px 18px;
	text-decoration: none;
	color: inherit;
}
.n8n-inv-tile:hover { border-color: var(--n8n-primary); }
.n8n-inv-tile .n8n-inv-tile-count { font-size: 28px; font-weight: 700; line-height: 1; }
.n8n-inv-tile .n8n-inv-tile-label { font-size: 13px; color: var(--n8n-text-muted); margin-top: 6px; }
.n8n-inv-tile-lager_neu { border-left-color: #3D6FB4; }
.n8n-inv-tile-ausgegeben { border-left-color: var(--n8n-success); }
.n8n-inv-tile-reparatur { border-left-color: var(--n8n-warning); }
.n8n-inv-tile-reparatur_ueberfaellig { border-left-color: var(--n8n-danger); }
.n8n-inv-tile-eol { border-left-color: var(--n8n-grey); }
.n8n-inv-tile-ewaste { border-left-color: var(--n8n-danger); }
.n8n-inv-tile-inventur_ueberfaellig { border-left-color: var(--n8n-danger); }
.n8n-inv-tile-lagernd { border-left-color: #4FA3A0; }
.n8n-inv-tile-gesperrt { border-left-color: #8A6BC1; }
.n8n-inv-tile-totalschaden { border-left-color: #8B4A9C; }
.n8n-inv-tile-vermisst { border-left-color: #D98A3D; }
.n8n-inv-tile-verloren_gestohlen { border-left-color: #7A1F1F; }

/* Status pill */
.n8n-inv-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.n8n-inv-pill-lager_neu { background: #E4EDF8; color: #2C5F9B; }
.n8n-inv-pill-ausgegeben { background: var(--n8n-success-bg); color: var(--n8n-success); }
.n8n-inv-pill-reparatur { background: var(--n8n-warning-bg); color: var(--n8n-warning); }
.n8n-inv-pill-eol { background: var(--n8n-grey-bg); color: var(--n8n-grey); }
.n8n-inv-pill-ewaste { background: var(--n8n-danger-bg); color: var(--n8n-danger); }
.n8n-inv-pill-lagernd { background: #E4F3F2; color: #357B78; }
.n8n-inv-pill-gesperrt { background: #EFE9F8; color: #6B4FA0; }
.n8n-inv-pill-totalschaden { background: #F5E7F7; color: #8B4A9C; }
.n8n-inv-pill-vermisst { background: #FBEFE1; color: #B5661C; }
.n8n-inv-pill-verloren_gestohlen { background: #F5E2E2; color: #7A1F1F; }

/* Tables */
.n8n-inv-table { width: 100%; border-collapse: collapse; background: var(--n8n-surface); font-size: 14px; }
.n8n-inv-table th, .n8n-inv-table td { padding: 10px 12px; border-bottom: 1px solid var(--n8n-border); text-align: left; }
.n8n-inv-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--n8n-text-muted); }
.n8n-inv-table tr:hover td { background: var(--n8n-bg); }
.n8n-inv-table a { color: var(--n8n-primary); text-decoration: none; }
.n8n-inv-table a:hover { text-decoration: underline; }

.n8n-inv-card { background: var(--n8n-surface); border: 1px solid var(--n8n-border); border-radius: 6px; padding: 20px; margin-bottom: 20px; }

.n8n-inv-filter-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }

.n8n-inv-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 24px; margin-bottom: 20px; }
.n8n-inv-detail-grid dt { font-size: 12px; color: var(--n8n-text-muted); margin-bottom: 2px; }
.n8n-inv-detail-grid dd { font-size: 14px; margin: 0; font-weight: 600; }

/* Login */
.n8n-inv-login-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: var(--n8n-bg);
}
.n8n-inv-login-box { width: 100%; max-width: 340px; background: var(--n8n-surface); border: 1px solid var(--n8n-border); border-radius: 8px; padding: 32px; }
.n8n-inv-login-box h1 { font-size: 18px; margin: 0 0 4px 0; }
.n8n-inv-login-box .n8n-inv-sub { margin-bottom: 22px; }
.n8n-inv-login-box .n8n-inv-btn { width: 100%; text-align: center; }

/* Mobile-Ansicht (grosse Touch-Buttons) */
.n8n-inv-mobile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.n8n-inv-mobile-grid .n8n-inv-btn-large { font-weight: 700; }

/* Scanner-Overlay */
.n8n-inv-scanner-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.n8n-inv-scanner-box {
	background: #17202B;
	border-radius: 10px;
	padding: 16px;
	width: 100%;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
}
.n8n-inv-scanner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.n8n-inv-scanner-photo-preview[hidden], .n8n-inv-scanner-selection[hidden] { display: none; }
.n8n-inv-scanner-photo-frame { position: relative; width: fit-content; max-width: 100%; line-height: 0; touch-action: none; }
.n8n-inv-scanner-photo-frame canvas { display: block; max-width: 100%; max-height: 45vh; width: auto; height: auto; }
.n8n-inv-scanner-selection { position: absolute; border: 2px solid #fff; background: rgba(74, 140, 220, .22); pointer-events: none; }
.n8n-inv-scanner-matches { color: #fff; font-size: 13px; }
.n8n-inv-scanner-matches button { width: 100%; text-align: left; margin: 4px 0; }
.n8n-inv-scanner-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #FFFFFF;
	font-weight: 600;
}
.n8n-inv-scanner-video {
	width: 100%;
	border-radius: 6px;
	background: #000;
	max-height: 60vh;
	display: block;
}
.n8n-inv-scanner-video-wrap {
	position: relative;
	line-height: 0; /* verhindert Pixelversatz zwischen video und ueberlagertem Rahmen */
}
.n8n-inv-scanner-guide {
	position: absolute;
	left: 10%;
	top: 30%;
	width: 80%;
	height: 40%;
	border: 3px dashed #6FA0D6;
	border-radius: 8px;
	pointer-events: none;
	box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.35);
}
.n8n-inv-scanner-hint { color: #DCE3EA; font-size: 12px; margin: -6px 0 0 0; text-align: center; }
.n8n-inv-scanner-status { color: #DCE3EA; font-size: 13px; min-height: 18px; margin: 0; }
.n8n-inv-scanner-ocr-result { display: flex; flex-direction: column; gap: 8px; }
.n8n-inv-scanner-ocr-result label { color: #DCE3EA; font-size: 13px; }
.n8n-inv-scanner-ocr-result input {
	padding: 9px 11px;
	border-radius: 5px;
	border: 1px solid var(--n8n-border);
	font-size: 14px;
}

/* Scan-Button neben Equipment-ID-Feldern */
.n8n-inv-field-with-scan { display: flex; gap: 8px; align-items: center; }
.n8n-inv-field-with-scan input { flex: 1; }

/* Responsive */
@media (max-width: 720px) {
	.n8n-inv-shell { flex-direction: column; min-height: 0; }

	/* Sidebar wird zur schmalen Kopfleiste mit Aufklapp-Menue statt
	   eines seitwaerts scrollbaren Streifens. */
	.n8n-inv-sidebar { width: 100%; flex-direction: column; padding: 0; }
	.n8n-inv-brand { padding: 14px 16px; margin-bottom: 0; border-bottom: none; }

	.n8n-inv-nav-toggle-label {
		display: block;
		padding: 12px 16px;
		background: #1F2A38;
		color: #FFFFFF;
		font-weight: 600;
		cursor: pointer;
		border-top: 1px solid #2A3644;
		border-bottom: 1px solid #2A3644;
	}
	.n8n-inv-nav {
		display: none;
		flex-direction: column;
		max-height: 70vh;
		overflow-y: auto;
	}
	.n8n-inv-nav.is-open { display: flex; }
	.n8n-inv-nav a { padding: 12px 20px; }

	.n8n-inv-content { padding: 16px; }

	/* Kopfzeile: Elemente stapeln, wenn kein Platz nebeneinander ist. */
	.n8n-inv-topbar {
		padding: 12px 16px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.n8n-inv-topbar-actions { width: 100%; }
	.n8n-inv-topbar-actions form { flex: 1; }
	.n8n-inv-topbar-actions .n8n-inv-btn { width: 100%; }

	.n8n-inv-detail-grid { grid-template-columns: 1fr 1fr; }

	/* Formulare mit mehreren Feldern nebeneinander (z.B. Geraete-Filter)
	   stapeln sich stattdessen sauber untereinander. */
	.n8n-inv-filter-row {
		flex-direction: column;
		align-items: stretch !important;
	}
	.n8n-inv-field input, .n8n-inv-field select, .n8n-inv-field textarea {
		max-width: 100%;
	}

	/* Tabellen werden zu gestapelten Karten statt einer breiten Tabelle,
	   die man in beide Richtungen scrollen muesste. Jede Zeile wird zur
	   Karte, jede Zelle zur Beschriftung:Wert-Zeile (Beschriftung aus
	   data-label). */
	.n8n-inv-table thead { display: none; }
	.n8n-inv-table, .n8n-inv-table tbody, .n8n-inv-table tr, .n8n-inv-table td {
		display: block;
		width: 100%;
	}
	.n8n-inv-table tr {
		margin-bottom: 12px;
		border: 1px solid var(--n8n-border);
		border-radius: 6px;
		padding: 4px 12px;
		background: var(--n8n-surface);
	}
	.n8n-inv-table td {
		border: none;
		border-bottom: 1px solid var(--n8n-bg);
		padding: 8px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		text-align: right;
	}
	.n8n-inv-table td:last-child { border-bottom: none; }
	.n8n-inv-table td[data-label]::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--n8n-text-muted);
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		text-align: left;
		flex-shrink: 0;
	}
	/* Zellen ohne data-label (z.B. reine Aktions-Spalten) bleiben
	   rechtsbuendig ohne Phantom-Beschriftung. */
	.n8n-inv-table td:not([data-label]) { justify-content: flex-end; }
}

/* Statushilfe: per Klick/Touch und Tastatur oeffnen, bei Maus-Hover anzeigen. */
.n8n-inv-status-help { display: inline-block; position: relative; vertical-align: middle; margin-left: 3px; }
.n8n-inv-status-help summary { cursor: pointer; list-style: none; color: var(--n8n-primary); font-weight: 700; border-radius: 50%; padding: 2px 5px; }
.n8n-inv-status-help summary::-webkit-details-marker { display: none; }
.n8n-inv-status-help summary:focus-visible { outline: 2px solid var(--n8n-primary); }
.n8n-inv-status-help span { display: none; position: absolute; z-index: 20; left: 0; top: 100%; width: min(260px, 75vw); padding: 9px 12px; background: #17202B; color: #fff; border-radius: 6px; box-shadow: 0 3px 10px #0003; font-size: 13px; line-height: 1.4; white-space: normal; }
.n8n-inv-status-help[open] span, .n8n-inv-status-help:hover span, .n8n-inv-status-help:focus-within span { display: block; }

/* Compact movement summary and period report. */
.n8n-inv-dashboard-movements { margin: 20px 0; }
.n8n-inv-dashboard-movements .n8n-inv-dashboard-models-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.n8n-inv-stats-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.n8n-inv-stats-summary > div { padding: 12px; border-radius: 8px; background: var(--n8n-bg); display: flex; flex-direction: column; }
.n8n-inv-stats-summary strong { font-size: 22px; line-height: 1.2; }
.n8n-inv-stats-summary span { font-size: 13px; color: var(--n8n-text-muted); }
.n8n-inv-stats-filter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin: 18px 0 24px; }
.n8n-inv-stats-filter .n8n-inv-field { margin: 0; }
.n8n-inv-stats-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 20px 0; }
.n8n-inv-stats-tile { cursor: default; }
@media (max-width: 850px) { .n8n-inv-stats-sections { grid-template-columns: 1fr; } }
@media (max-width: 550px) { .n8n-inv-stats-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* App document and type scale remain stable when a theme loads global styles. */
body.n8n-inv-page { margin: 0; padding: 0; background: #F4F6F9; }
body.n8n-inv-page .n8n-inv-app { margin: 0 !important; max-width: none !important; }
.n8n-inv-app h1, .n8n-inv-app h2, .n8n-inv-app h3, .n8n-inv-app h4 { font-family: inherit; font-style: normal; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-wrap: wrap; }
.n8n-inv-app h1 { font-size: 22px; }
.n8n-inv-app h2 { font-size: 18px; }
.n8n-inv-app h3 { font-size: 16px; }
.n8n-inv-app p { line-height: 1.5; }
.n8n-inv-app [hidden] { display: none !important; }
.n8n-inv-app a, .n8n-inv-app button, .n8n-inv-app input, .n8n-inv-app select, .n8n-inv-app textarea { -webkit-tap-highlight-color: transparent; }
.n8n-inv-app :focus-visible { outline: 3px solid #2C5F9B; outline-offset: 3px; }
.n8n-inv-app button, .n8n-inv-app input, .n8n-inv-app select, .n8n-inv-app textarea { font-family: inherit; }
.n8n-inv-app .n8n-inv-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.n8n-inv-nav-toggle-label { width: 100%; text-align: left; border: 0; font-size: 15px; font-family: inherit; }
.n8n-inv-app input[aria-invalid="true"], .n8n-inv-app select[aria-invalid="true"] { border: 2px solid var(--n8n-danger); }
.n8n-inv-login-wrap { padding: 24px; }
.n8n-inv-login-box { max-width: 440px; }
.n8n-inv-content, .n8n-inv-card, .n8n-inv-topbar-user, .n8n-inv-table td { overflow-wrap: anywhere; min-width: 0; }
.n8n-inv-field-with-scan input { min-width: 0; }
.n8n-inv-workbench { border-bottom: 1px solid var(--n8n-border); padding-bottom: 22px; margin-bottom: 24px; }
.n8n-inv-workbench form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.n8n-inv-workbench .n8n-inv-field { flex: 1 1 240px; margin: 0; }
.n8n-inv-workbench input { max-width: none; }
.n8n-inv-action-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.n8n-inv-confirm { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; }
.n8n-inv-confirm input { flex-shrink: 0; width: 20px; height: 20px; }
.n8n-inv-nav .n8n-inv-nav-section { text-transform: none; font-size: 12px; letter-spacing: 0; }
.n8n-inv-table th { text-transform: none; letter-spacing: 0; }
@media (max-width: 720px) {
 .n8n-inv-app .n8n-inv-field input, .n8n-inv-app .n8n-inv-field select, .n8n-inv-app .n8n-inv-field textarea { font-size: 16px; }
 .n8n-inv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .n8n-inv-detail-grid { grid-template-columns: 1fr; }
 .n8n-inv-table td[data-label]::before { flex: 0 1 42%; text-transform: none; letter-spacing: 0; }
 .n8n-inv-workbench .n8n-inv-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .n8n-inv-app * { transition: none !important; scroll-behavior: auto !important; } }

.n8n-inv-workbench form { max-width: 760px; }
.n8n-inv-workbench .n8n-inv-field input[type="search"] { max-width: none; }
.n8n-inv-dashboard-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n8n-inv-field input[type="email"] { width: 100%; max-width: 420px; padding: 9px 11px; border: 1px solid var(--n8n-border); border-radius: 5px; font-size: 14px; background: #fff; color: var(--n8n-text); }
@media (max-width: 1100px) { .n8n-inv-dashboard-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .n8n-inv-field input[type="email"] { max-width: 100%; font-size: 16px; } }

/* Task-oriented work surfaces, 0.0.58: retain the established inventory palette. */
.n8n-inv-nav-group > summary { padding: 12px 20px; min-height: 44px; color: #DCE3EA; cursor: pointer; font-size: 14px; font-weight: 600; }
.n8n-inv-nav-group[open] > summary { color: #fff; background: #1F2A38; }
.n8n-inv-nav-group ul { list-style: none; padding: 0; margin: 0 0 8px; }
.n8n-inv-nav-group ul a { padding: 9px 20px 9px 34px; }
.n8n-inv-task-links { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 10px; max-width: 900px; margin: 14px 0 24px; }
.n8n-inv-task-link { display: block; border: 1px solid var(--n8n-border); border-radius: 5px; padding: 18px; min-height: 64px; color: var(--n8n-primary-dark); background: #fff; font-weight: 600; text-decoration: none; }
.n8n-inv-task-link:hover { border-color: var(--n8n-primary); background: var(--n8n-primary-bg); }
.n8n-inv-booking-panel { max-width: 620px; }
.n8n-inv-booking-panel h2 { margin-top: 0; }
.n8n-inv-booking-panel .n8n-inv-field input, .n8n-inv-booking-panel .n8n-inv-field textarea { max-width: none; }
.n8n-inv-selected-device { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 16px 0; margin: 8px 0 20px; border-top: 1px solid var(--n8n-border); border-bottom: 1px solid var(--n8n-border); max-width: 900px; }
.n8n-inv-selected-device p { margin: 4px 0 8px; color: var(--n8n-text-muted); }
.n8n-inv-selected-device a { color: var(--n8n-primary); }
.n8n-inv-selected-device .n8n-inv-pill { margin-right: 8px; }
.n8n-inv-booking-result { padding: 10px 12px; border-left: 3px solid var(--n8n-primary); background: var(--n8n-primary-bg); }
.n8n-inv-record-actions { margin: 12px 0 20px; }
.n8n-inv-record-actions summary, .n8n-inv-series-setup summary { cursor: pointer; font-weight: 600; }
.n8n-inv-record-actions .n8n-inv-action-links a { padding: 8px 0; margin-right: 12px; }
.n8n-inv-series-setup { max-width: 620px; }
.n8n-inv-series-setup p { max-width: 70ch; }
.n8n-inv-series-active { padding: 12px; border-left: 4px solid var(--n8n-warning); background: var(--n8n-warning-bg); }
.n8n-inv-series-stop { margin-top: 14px; }
.n8n-inv-finder { padding: 18px 0; border-top: 1px solid var(--n8n-border); border-bottom: 1px solid var(--n8n-border); margin: 12px 0 20px; }
.n8n-inv-finder > .n8n-inv-field { max-width: 760px; }
.n8n-inv-finder .n8n-inv-field-with-scan input { max-width: none; }
.n8n-inv-finder .n8n-inv-filter-row { gap: 12px; }
.n8n-inv-finder .n8n-inv-filter-row > .n8n-inv-field { flex: 1 1 180px; max-width: 300px; }
.n8n-inv-finder-footer { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.n8n-inv-finder-footer > label { font-size: 14px; display: flex; gap: 6px; align-items: center; }
.n8n-inv-filter-summary { padding: 10px 12px; background: var(--n8n-primary-bg); font-size: 14px; }
.n8n-inv-device-list td { vertical-align: top; }
.n8n-inv-device-list small { display: block; color: var(--n8n-text-muted); font-size: 12px; margin-top: 4px; }
.n8n-inv-pagination { display: flex; justify-content: space-between; gap: 16px; margin: 18px 0; }
.n8n-inv-field input:not([type]) { width: 100%; max-width: 420px; padding: 9px 11px; border: 1px solid var(--n8n-border); border-radius: 5px; font-size: 14px; background: #fff; color: var(--n8n-text); }
.n8n-inv-booking-panel .n8n-inv-field input:not([type]) { max-width: none; }
.n8n-inv-workbench { padding-bottom: 16px; margin-bottom: 20px; }
.n8n-inv-workbench h2 { margin: 0; font-size: 17px; }
.n8n-inv-next-tasks { margin: 0 0 24px; }
.n8n-inv-next-tasks > h2 { margin: 0 0 8px; }
.n8n-inv-next-task { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 14px 0; border-bottom: 1px solid var(--n8n-border); }
.n8n-inv-next-task > div { flex: 1 1 280px; }
.n8n-inv-next-task h3 { margin: 0 0 4px; }
.n8n-inv-next-task p { margin: 0; font-size: 14px; color: var(--n8n-text-muted); }
.n8n-inv-next-task progress { width: 100%; max-width: 460px; height: 8px; accent-color: var(--n8n-primary); margin-top: 8px; }
@media (max-width: 720px) {
    .n8n-inv-task-links { grid-template-columns: 1fr; }
    .n8n-inv-finder .n8n-inv-filter-row > .n8n-inv-field { flex-basis: auto; max-width: none; }
    .n8n-inv-finder-footer, .n8n-inv-selected-device { align-items: stretch; flex-direction: column; }
    .n8n-inv-finder-footer .n8n-inv-action-links, .n8n-inv-next-task > .n8n-inv-btn { width: 100%; }
    .n8n-inv-finder-footer .n8n-inv-btn { flex: 1; }
    .n8n-inv-field input:not([type]) { font-size: 16px; max-width: none; }
    .n8n-inv-device-list td > div { min-width: 0; }
}

.n8n-inv-filter-options { margin: 12px 0; }
.n8n-inv-filter-options > summary { cursor: pointer; color: var(--n8n-primary); font-weight: 600; font-size: 14px; padding: 8px 0; }
.n8n-inv-filter-options[open] > summary { margin-bottom: 12px; }
.n8n-inv-archive-option { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 8px 0; }
.n8n-inv-finder-footer { justify-content: flex-start; }

/* Daily work is the visual anchor; stock and administration remain quiet. */
.n8n-inv-main { background: #F1F4F8; }
.n8n-inv-content { max-width: 1500px; width: 100%; }
.n8n-inv-home-finder { padding: 16px 20px; background: #fff; border: 1px solid var(--n8n-border); border-radius: 6px; margin: 20px 0 26px; }
.n8n-inv-home-finder form { display: flex; align-items: end; gap: 12px; }
.n8n-inv-home-finder .n8n-inv-field { flex: 1; margin: 0; }
.n8n-inv-home-finder input[type="search"] { max-width: none; }
.n8n-inv-home-columns { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr); gap: 28px; align-items: stretch; margin-bottom: 30px; }
.n8n-inv-home-columns > .n8n-inv-workbench { padding: 0; border: 0; margin: 0; }
.n8n-inv-home-columns h2 { margin: 0 0 6px; font-size: 19px; }
.n8n-inv-home-columns .n8n-inv-workbench > p { margin: 0 0 16px; }
.n8n-inv-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.n8n-inv-quick-tile { padding: 20px; min-height: 158px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; border: 2px solid transparent; border-radius: 7px; color: #fff; text-decoration: none; }
.n8n-inv-quick-issue { background: #2C5F9B; }
.n8n-inv-quick-return { background: #176B70; }
.n8n-inv-quick-repair { background: #956212; }
.n8n-inv-quick-count { background: #65518C; }
.n8n-inv-quick-title { font-size: 18px; font-weight: 650; line-height: 1.3; }
.n8n-inv-quick-hint { font-size: 13px; line-height: 1.45; }
.n8n-inv-quick-tile:hover { color: #fff; border-color: #fff; box-shadow: 0 0 0 2px #17202B; }
.n8n-inv-quick-tile:focus-visible { outline: 3px solid #17202B; outline-offset: 3px; }
.n8n-inv-home-columns > .n8n-inv-next-tasks { margin: 0; padding: 20px; background: #fff; border: 1px solid var(--n8n-border); border-radius: 6px; }
.n8n-inv-home-columns .n8n-inv-next-task { padding: 18px 0; }
.n8n-inv-home-columns .n8n-inv-next-task:last-child { border-bottom: 0; padding-bottom: 0; }
.n8n-inv-home-columns .n8n-inv-next-task h3 { color: #33475B; }
.n8n-inv-home-columns .n8n-inv-next-task progress { accent-color: #65518C; }
.n8n-inv-dashboard-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.n8n-inv-dashboard-tiles .n8n-inv-tile { background: #fff; padding: 14px 16px; border-top: 0; border-left: 3px solid #A7B6C5; box-shadow: none; }
.n8n-inv-dashboard-tiles .n8n-inv-tile-count { font-size: 25px; color: #283C50; }
.n8n-inv-dashboard-tiles .n8n-inv-tile-label { font-size: 13px; }
.n8n-inv-dashboard-tiles .n8n-inv-tile small { display: block; margin-top: 6px; font-size: 12px; color: var(--n8n-text-muted); line-height: 1.4; }
.n8n-inv-notice-success { color: #18533F; background: #E2F2EA; border-left: 4px solid #2F8F5B; }
.n8n-inv-notice-info { background: #EAF1FA; color: #1F4573; border-left: 3px solid #2C5F9B; }
@media (max-width: 1150px) {
 .n8n-inv-home-columns { grid-template-columns: 1fr; gap: 22px; }
 .n8n-inv-dashboard-tiles { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px) {
 .n8n-inv-home-finder { padding: 14px; }
 .n8n-inv-home-finder form { flex-direction: column; align-items: stretch; }
 .n8n-inv-home-finder .n8n-inv-field { flex: auto; }
 .n8n-inv-quick-tile { min-height: 165px; padding: 16px; }
 .n8n-inv-quick-title { font-size: 17px; }
 .n8n-inv-dashboard-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 420px) {
 .n8n-inv-quick-grid { grid-template-columns: 1fr; }
 .n8n-inv-quick-tile { min-height: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); column-gap: 14px; row-gap: 5px; }
 .n8n-inv-quick-tile svg { grid-row: span 2; }
 .n8n-inv-quick-hint { grid-column: 2; }
}
