#rit-catalog-app {
	max-width: 640px;
	margin: 0 auto;
	padding: 10px 0;
}

#rit-catalog-app .rit-catalog-intro {
	margin: 0 0 16px;
	color: #3c434a;
}

.rit-danger {
	background: #d63638;
	border-color: #d63638;
	color: #fff;
}

.rit-props-hint {
	margin: 0;
	color: #646970;
}

.rit-drawing-item-name {
	font-weight: 600;
	color: #1d2327;
	font-size: 13px;
}

.rit-drawing-item-meta {
	font-size: 11px;
	color: #646970;
}

.rit-my-camera-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	margin-bottom: 16px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	font-size: 13px;
}

.rit-my-camera-form label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.rit-my-camera-form input,
.rit-my-camera-form select {
	width: 140px;
	padding: 5px 8px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
}

.rit-my-camera-form-actions {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

.rit-my-camera-save-btn {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	background: #2271b1;
	color: #fff;
	font-size: 13px;
}

.rit-my-camera-save-btn:hover {
	background: #135e96;
}

.rit-my-camera-cancel-btn {
	padding: 8px 16px;
	border: 1px solid #c3c4c7;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}

.rit-my-camera-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	margin-bottom: 6px;
	font-size: 13px;
}

.rit-my-camera-actions {
	display: flex;
	gap: 12px;
	margin-top: 4px;
}

.rit-my-camera-actions button {
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	color: #2271b1;
}

.rit-my-camera-actions button.rit-danger {
	color: #d63638;
	background: none;
}

.rit-mc-res-custom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: -6px 0 2px;
	padding-left: 4px;
}

/* display: flex ovan vinner annars över webbläsarens inbyggda
 * [hidden] { display: none } – samma fälla som tidigare setts på flera
 * andra ställen i den här kodbasen (t.ex. .rit-floating-panel). Måste
 * vara explicit och komma EFTER basregeln. */
.rit-mc-res-custom[hidden] {
	display: none;
}

.rit-mc-res-custom-label {
	font-size: 12px;
	color: #646970;
}

.rit-mc-res-custom-fields {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.rit-mc-res-custom input {
	width: 66px !important;
	text-align: center;
}

.rit-mc-poe-preview {
	font-size: 12px;
}

.rit-mc-product-link {
	display: block;
	color: #2271b1;
	margin-top: 2px;
}

.rit-datasheet-upload {
	margin-bottom: 16px;
}

.rit-datasheet-upload-btn {
	display: inline-block;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid #2271b1;
	color: #2271b1;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
}

.rit-datasheet-upload-btn:hover {
	background: #f0f6fc;
}

.rit-datasheet-upload .rit-props-hint {
	margin-top: 6px;
	font-size: 12px;
}

.rit-datasheet-upload-btn.is-loading {
	opacity: 0.7;
	cursor: default;
	pointer-events: none;
}

.rit-datasheet-status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	padding: 8px 10px;
	border-radius: 4px;
	font-size: 12px;
}

.rit-datasheet-status[hidden] {
	display: none;
}

.rit-datasheet-status-loading {
	background: #f0f0f1;
	color: #3c434a;
}

.rit-datasheet-status-success {
	background: #edfaef;
	color: #00632a;
}

.rit-datasheet-status-error {
	background: #fcf0f1;
	color: #d63638;
}

.rit-datasheet-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid rgba(60, 67, 74, 0.25);
	border-top-color: #3c434a;
	border-radius: 50%;
	animation: rit-datasheet-spin 0.7s linear infinite;
	flex-shrink: 0;
}

@keyframes rit-datasheet-spin {
	to {
		transform: rotate(360deg);
	}
}

.rit-datasheet-suggestion {
	padding: 14px;
	margin-bottom: 16px;
	background: #fef8ee;
	border: 1px solid #e8c789;
	border-radius: 6px;
}

/* display:block (standard för div) vinner annars över [hidden] – samma
 * fälla som setts på flera andra ställen i den här kodbasen (t.ex.
 * .rit-floating-panel). Måste vara explicit och komma EFTER basreglerna. */
.rit-datasheet-suggestion[hidden] {
	display: none;
}

.rit-datasheet-suggestion h3 {
	margin: 0 0 6px;
	font-size: 14px;
}

.rit-datasheet-suggestion-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0;
}

.rit-datasheet-field-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 6px 10px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	text-align: left;
}

.rit-datasheet-field-btn:hover {
	border-color: #2271b1;
	background: #f0f6fc;
}

.rit-datasheet-field-btn-label {
	color: #646970;
	font-size: 11px;
}

.rit-datasheet-field-btn-value {
	font-weight: 600;
	color: #1d2327;
}

.rit-datasheet-field-btn.is-applied {
	border-color: #00a32a;
	background: #edfaef;
}

.rit-datasheet-field-btn.is-applied .rit-datasheet-field-btn-value::after {
	content: " ✔";
	color: #00a32a;
}

/* Bulk-tabellen i Kamerakatalog (wp-admin) – se camera-catalog-admin.js
 * och render_page() i class-rit-camera-catalog-admin.php. Bygger vidare
 * på WordPress egna .wp-list-table-stilar (redan laddade i wp-admin,
 * ingen egen tabellram/bakgrund behöver definieras här) – bara
 * finslipning av inputs/select INUTI cellerna, som annars ärver
 * WordPress standardstorlekar och blir onödigt breda/högar i en tät
 * tabellrad.
 */
#rit-bulk-table-wrap {
	margin-top: 16px;
}

#rit-bulk-table input[type="text"],
#rit-bulk-table input[type="number"],
#rit-bulk-table select {
	padding: 3px 6px;
	font-size: 13px;
	box-sizing: border-box;
}

/* Upplösnings-cellen (två inputs, bredd × höjd) behöver mer plats än
 * .wp-list-table.fixed:s automatiska, jämnt fördelade kolumnbredder
 * annars ger – siffrorna klipptes annars av (t.ex. "2688" visades som
 * "2!"). min-width tvingar tabellen att ge den kolumnen tillräckligt
 * utrymme innan resten fördelas jämnt.
 */
#rit-bulk-table td:has( input[type="number"] + input[type="number"] ) {
	min-width: 140px;
}

#rit-bulk-table td {
	vertical-align: middle;
}

#rit-bulk-save-status {
	margin-left: 10px;
	font-weight: 600;
}

/* Dubblettmarkering i bulk-tabellen – en systemkamera med samma
 * modellnamn finns redan (se find_duplicate_model() i
 * class-rit-camera-catalog-admin.php). Raden får en dämpad gul ton
 * istället för röd: det är en varning att granska, inte ett fel som
 * hindrar sparning. */
.rit-bulk-row-duplicate {
	background: #fcf9e8 !important;
}

.rit-bulk-duplicate {
	color: #8a6d00;
	font-weight: 600;
	font-size: 12px;
	cursor: help;
}

.rit-bulk-new {
	color: #646970;
	font-size: 12px;
}

/* Tillverkarväljaren i admin (Visa på webbplatsen) – flerkolumn så en
 * lång lista inte blir en meterlång stapel. */
.rit-manufacturer-picker {
	columns: 3 220px;
	margin: 12px 0;
}
.rit-manufacturer-picker li {
	break-inside: avoid;
	margin: 0 0 6px;
}
.rit-manufacturer-picker .description {
	color: #646970;
	margin-left: 4px;
}

.rit-logo-field {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0 24px;
}
.rit-logo-preview {
	max-height: 28px;
	width: auto;
	border: 1px solid #dcdcde;
	background: #fff;
}

.rit-logo-show {
	margin: 2px 0 10px 24px;
	font-size: 12px;
	color: #50575e;
}

.rit-logo-url {
	margin: 0 0 12px 24px;
	font-size: 12px;
	color: #50575e;
}
.rit-logo-url input[type="url"] {
	display: block;
	max-width: 260px;
	font-size: 12px;
}

.rit-atex-badge {
	display: inline-block;
	padding: 1px 5px;
	border-radius: 3px;
	background: #fdf0e6;
	border: 1px solid #d4622c;
	color: #a34a1f;
	font-size: 10px;
	font-weight: 700;
}

/* -- Grupperad katalogvy (märke -> typ) ----------------------------- */

.rit-catalog-brand {
	border: 1px solid rgba(18, 24, 31, 0.12);
	border-radius: 4px;
	margin-bottom: 8px;
	overflow: hidden;
}

.rit-catalog-brand-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 14px;
	background: #f6f7f7;
	border: none;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.rit-catalog-brand-header::before {
	content: "\25B6";
	font-size: 10px;
	margin-right: 8px;
	color: #646970;
}

.rit-catalog-brand-header.is-open::before {
	content: "\25BC";
}

.rit-catalog-brand-body {
	padding: 4px 10px 10px;
}

/* Typen är en egen hopfällbar nivå under märket. Ett märke kan ha
 * trettiotalet modeller fördelade på flera typer – utan den nivån
 * blev en utfälld märkesgrupp fortfarande oöverskådlig. */
.rit-catalog-type-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 6px 10px;
	margin-top: 4px;
	background: none;
	border: none;
	border-bottom: 1px solid rgba(18, 24, 31, 0.08);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #646970;
	text-align: left;
	cursor: pointer;
}

.rit-catalog-type-header::before {
	content: "\25B6";
	font-size: 9px;
	margin-right: 6px;
}

.rit-catalog-type-header.is-open::before {
	content: "\25BC";
}

.rit-catalog-type-header:hover {
	background: #f6f7f7;
}

.rit-catalog-type-body {
	padding: 4px 0 6px;
}

/* Favoritstjärnan. Fanns tidigare BARA i frontend.css (Ritverktygets
 * stilmall), som inte laddas på katalogsidan – stjärnan var därför
 * osynlig här trots att markupen fanns. Definieras nu även lokalt. */
.rit-picker-star {
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	color: #b0b6bd;
	padding: 2px 3px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.rit-picker-star:hover {
	background: #e8eaed;
	color: #6b7076;
}

.rit-picker-star.is-favourite {
	color: #e6a700;
}

.rit-picker-star.is-favourite:hover {
	color: #c48f00;
}

/* Raden är en RAD, inte en stapel. .rit-my-camera-item har
 * flex-direction: column (från den äldre listvyn där varje kamera var
 * ett kort) - utan att uttryckligen sätta row här hamnade namn, data
 * och pris under varandra och listan blev flera skärmar lång.
 * Vänsterjusterad text: centrerat innehåll gör en lång lista svår att
 * skanna med blicken. */
.rit-catalog-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	text-align: left;
	padding: 6px 10px;
	margin-bottom: 3px;
}

.rit-catalog-row .rit-drawing-item-name {
	min-width: 160px;
}

.rit-catalog-row .rit-drawing-item-meta {
	color: #646970;
	font-size: 12px;
	/* Krymper hellre än radbryter: prisfältet ska få plats på samma
	 * rad. Vid riktigt smala skärmar bryter raden ändå (flex-wrap),
	 * men då är det datatexten som flyttar ned, inte priset. */
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Databladslänken tar ingen egen rad. */
.rit-catalog-row a.rit-drawing-item-meta {
	flex: 0 0 auto;
	white-space: nowrap;
}

.rit-catalog-price {
	margin-left: auto;
	white-space: nowrap;
	font-size: 12px;
	color: #646970;
}

.rit-catalog-price-input {
	width: 76px;
	padding: 2px 6px;
	font-size: 12px;
	text-align: right;
}

/* Kort kvittens på att priset sparats - fältet är litet och en egen
 * statusrad per rad hade blivit rörig i en lång lista. */
.rit-catalog-price-input.is-saved {
	border-color: #1a7f37;
	background: #f2fbf4;
}

.rit-catalog-price-input.is-error {
	border-color: #b3261e;
	background: #fdf2f1;
}

/* Filterraden ovanför systemkameralistan i wp-admin. */
.rit-admin-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 12px 0;
}

.rit-admin-filter .description {
	margin-left: auto;
}

/* Favoritgruppen överst i katalogen. Guldkant så den skiljer sig från
 * märkesgrupperna – den är en genväg, inte ännu ett märke. */
.rit-catalog-favourites {
	border-color: #e6a700;
	margin-bottom: 12px;
}

.rit-catalog-favourites .rit-catalog-brand-header {
	background: #fdf8e8;
	color: #8a6d00;
}

/* Datablad från webbadress – för tillverkare som aldrig publicerar
 * någon PDF. */
.rit-datasheet-url {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #dcdcde;
}

.rit-datasheet-url-row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 6px 0 4px;
	flex-wrap: wrap;
}

.rit-datasheet-url-row input[type="url"] {
	flex: 1 1 340px;
	min-width: 0;
}

/* Vad tolkningen inte fick fram. Ett tomt fält ser likadant ut oavsett
 * om uppgiften saknades i bladet eller förkastades som orimlig – de
 * kräver olika åtgärd. */
.rit-parse-note {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.4;
	color: #5B6B7A;
}

.rit-parse-note--bad {
	color: #8a5a00;
	font-weight: 600;
}

/* Sökrutan ovanför katalogen. */
.rit-catalog-search-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.rit-catalog-search { flex: 1 1 320px; max-width: 420px; }

/* wp-admins .button sätter display:inline-block, som tar över
   webbläsarens [hidden]. Utan den här raden syntes den dolda knappen
   "Uppdatera markerade" som en tom blå ruta (3.020). */
.rit-maint [hidden] {
	display: none !important;
}

/* 3.074: IP-klassen i katalogen – blå för utomhus, grå för inomhus. */
.rit-ip-badge {
	display: inline-block;
	padding: 1px 5px;
	border-radius: 3px;
	background: #e8f1fb;
	border: 1px solid #2c6fb7;
	color: #1d4f86;
	font-size: 10px;
	font-weight: 700;
	vertical-align: middle;
}
.rit-ip-badge.is-inne {
	background: #f0f0f1;
	border-color: #8c8f94;
	color: #50575e;
}

/* 3.093: synligt fel under fältet i stället för en alert-ruta. */
.rit-my-camera-form .rit-mc-fel { color: #c0392b; font-size: 0.9em; margin: 4px 0 0; width: 100%; }
.rit-my-camera-form .rit-mc-fel:empty { display: none; }
.rit-my-camera-form .rit-input-fel { outline: 2px solid #c0392b; outline-offset: 1px; }
.rit-my-camera-form .rit-obligatorisk { color: #c0392b; }

/* 3.097: Mina inspelare och servrar. */
.rit-nvr-egna { margin-top: 32px; padding-top: 16px; border-top: 2px solid #dde3ea; }
.rit-nvr-egna .rit-catalog-model-own { background: #fff8f1; }
.rit-nvr-egna details.rit-catalog-brand > summary { cursor: pointer; padding: 6px 0; }