/* Hantera 2.0 — frontend-styling
 *
 * Kund-vänd UI för Företagsadmin (rollen `hantera_foretagsadmin`). Bygger
 * vidare på admin-designsystemets tokens men i en luftigare, mer "modern
 * SaaS"-look (mer whitespace, mindre WP-admin-känsla). Tema-sidans header/footer
 * är fortfarande aktiv runt om — vår markup ligger i en `.hantera-frontend-shell`-
 * container som är temaagnostisk och inte beroende av att temat har en specifik
 * content-wrapper.
 */

/* ===============================================================
   Designtokens (samma som admin.css men exponerade på document-roten
   så vi inte är beroende av att admin.css också laddas).
   =============================================================== */

/* Tokens läggs på `:root` så de är globala — det här samma CSS-fil enqueueas
   både på Hantera-routes (där `.hantera-frontend-shell` finns) OCH på WC-
   produktsidor (där den inte finns). Med `:root`-scope fungerar `var(--hantera-*)`
   överallt. */
:root {
	--hantera-accent:        #F24162;
	--hantera-accent-hover:  #E81542;
	--hantera-accent-soft:   rgba(242, 65, 98, 0.15);
	--hantera-accent-ring:   rgba(242, 65, 98, 0.25);

	--hantera-dark:          #25323A;
	--hantera-text:          #25323A;
	--hantera-muted:         #60696F;
	--hantera-placeholder:   #B3B3B3;

	--hantera-bg-page:       #F4F6F8;
	--hantera-card-bg:       #FFFFFF;
	--hantera-card-border:   #D5D9DD;
	--hantera-input-border:  #C7CCD1;
	--hantera-row-border:    #ECECEC;
	--hantera-soft-bg:       #F8F9FB;
	--hantera-empty-bg:      #FAFBFC;

	/* Status-paletter (samma värden som admin.css) */
	--hantera-status-active-bg:    #E1F0F1;
	--hantera-status-active-fg:    #023E47;
	--hantera-status-active-dot:   #1B8B8F;

	--hantera-status-warning-bg:   #FAEFD8;
	--hantera-status-warning-fg:   #9E6E20;
	--hantera-status-warning-dot:  #EEA630;

	--hantera-status-archived-bg:  #ECECEC;
	--hantera-status-archived-fg:  #60696F;
	--hantera-status-archived-dot: #B3B3B3;

	--hantera-status-returned-bg:  #E8F1F2;
	--hantera-status-returned-fg:  #023E47;
	--hantera-status-returned-dot: #59AAAD;

	--hantera-status-damaged-bg:   #FBE3E8;
	--hantera-status-damaged-fg:   #782031;
	--hantera-status-damaged-dot:  #E81542;

	--hantera-status-scrapped-bg:  #EDE2D0;
	--hantera-status-scrapped-fg:  #6B4F2E;
	--hantera-status-scrapped-dot: #8B6534;

	--hantera-radius-sm: 4px;
	--hantera-radius:    6px;
	--hantera-radius-lg: 8px;
}

/* Egen typografi/grundinställning bara inom Hantera-shellet. */
.hantera-frontend-shell {
	color: var(--hantera-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* Sidbakgrund — målar bara området vår shell upptar, så vi inte krockar
   med temats övergripande layout. Page-builder-body-class:en (Astra) gör
   att temats vanliga `.ast-container` tas bort så vår shell kan vara fullbredd. */
.hantera-frontend-shell {
	background: var(--hantera-bg-page);
	min-height: calc(100vh - 200px); /* lämnar plats för temats header/footer */
	padding: 0 0 48px 0;
}

/* Astra wrappar content-arean i `.site-content > .ast-container` med
   `max-width: 1240px` + 20px horisontellt padding, vilket annars klipper
   vår fullbredds-bg. Vi scopar resetet strikt till `.site-content`-trädet
   så Astras header (`.site-header`) och footer (`.site-footer`) — som
   också använder `.ast-container` internt för logga, meny, cart, copyright
   m.m. — lämnas helt orörda. */
body.hantera-frontend-body .site-content .ast-container,
body.hantera-frontend-body .site-content .ast-container-fluid,
body.hantera-frontend-body #content.site-content > .ast-container,
body.hantera-frontend-body #content.site-content > .ast-container-fluid {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* ===============================================================
   Sidhuvud + företagsväljare
   ---------------------------------------------------------------
   Bg + bottom-border går fullbredd (sätts på .hantera-shell-header
   utan horisontellt padding). Innehållet centreras inom 1240px via
   .hantera-shell-header-row.
   =============================================================== */

.hantera-shell-header {
	background: var(--hantera-card-bg);
	border-bottom: 1px solid var(--hantera-card-border);
	padding: 0;
	margin: 0 0 24px 0;
}

.hantera-shell-header-row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 14px 24px;
	flex-wrap: wrap;
	max-width: 1240px;
	margin: 0 auto;
}

.hantera-shell-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
}

.hantera-shell-brand-mark {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--hantera-dark);
	position: relative;
}

.hantera-shell-brand-mark::after {
	content: "";
	position: absolute;
	inset: 8px 8px;
	border-radius: 2px;
	background: var(--hantera-accent);
}

.hantera-shell-brand-text {
	font-weight: 600;
	font-size: 16px;
	color: var(--hantera-dark);
	letter-spacing: -0.01em;
}

/* Företagsväljare — interaktiv variant (>1 företag): liten box med
   border + bg så det syns att det är klickbart. Statisk variant
   (1 företag) renderas plant utan box, bara label + namn. */

.hantera-shell-foretagsvaljare {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--hantera-soft-bg);
	border: 1px solid var(--hantera-card-border);
	border-radius: var(--hantera-radius);
	padding: 6px 12px;
	margin: 0;
}

.hantera-shell-foretag-static {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.hantera-shell-foretagsvaljare-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hantera-muted);
	margin: 3px 0 0 0;
}

.hantera-shell-foretagsvaljare select {
	border: none;
	background: transparent;
	font-size: 14px;
	color: var(--hantera-dark);
	padding: 0 8px 0 0;
	cursor: pointer;
	max-width: 320px;
	line-height: 20px;
}

.hantera-shell-foretagsvaljare select:focus {
	outline: 2px solid var(--hantera-accent-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

.hantera-shell-foretag-static strong {
	color: var(--hantera-dark);
}

/* ===== Global sök (shell + admin) ============================== */

.hantera-search {
	position: relative;
	min-width: 260px;
	max-width: 420px;
	flex: 1 1 260px;
	/* Linjera vertikalt med FÖRETAG-pillen och brand-loggan i samma rad. */
	display: flex;
	align-items: center;
}

/* Admin-varianten ska inte sträckas i flex (den ligger inte i flex-rad) */
.hantera-admin-search {
	margin: 12px 0 24px;
	max-width: 520px;
	flex: none;
	display: block;
}

.hantera-search input[type="search"] {
	width: 100%;
	box-sizing: border-box;
	/* Matcha FÖRETAG-pillens höjd: padding 6+6 + line-height ≈ 36px. */
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--hantera-card-border);
	border-radius: var(--hantera-radius);
	background: var(--hantera-soft-bg);
	font-size: 14px;
	line-height: 1;
	color: var(--hantera-dark);
	margin: 0;
}

.hantera-search input[type="search"]::placeholder {
	color: var(--hantera-muted);
}

.hantera-search input[type="search"]:focus {
	outline: none;
	border-color: var(--hantera-dark);
	background: #FFFFFF;
}

.hantera-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #FFFFFF;
	border: 1px solid var(--hantera-card-border);
	border-radius: var(--hantera-radius);
	box-shadow: 0 12px 32px rgba(37, 50, 58, 0.14);
	z-index: 100;
	max-height: 480px;
	overflow-y: auto;
}

.hantera-search-results[hidden] { display: none; }

.hantera-search-empty,
.hantera-search-loading {
	padding: 16px 18px;
	color: var(--hantera-muted);
	font-size: 13px;
	text-align: center;
}

.hantera-search-group {
	padding: 6px 0;
	border-bottom: 1px solid var(--hantera-row-border, #ECEEF0);
}
.hantera-search-group:last-child { border-bottom: none; }

.hantera-search-group-label {
	padding: 8px 16px 4px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hantera-muted);
	font-weight: 600;
}

.hantera-search-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hantera-search-row a {
	display: flex;
	flex-direction: column;
	padding: 8px 16px;
	color: var(--hantera-dark);
	text-decoration: none;
	gap: 2px;
}

.hantera-search-row a:hover,
.hantera-search-row a:focus {
	background: #F4F6F8;
	color: var(--hantera-dark);
}

.hantera-search-row-title {
	font-size: 14px;
	font-weight: 500;
}

.hantera-search-row-sub {
	font-size: 12px;
	color: var(--hantera-muted);
}

/* ===============================================================
   Toppnav (under sidhuvud)
   =============================================================== */

.hantera-shell-nav {
	border-top: 1px solid var(--hantera-row-border);
}

.hantera-shell-nav-list {
	list-style: none;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	max-width: 1240px;
}

.hantera-shell-nav-item a {
	display: inline-block;
	padding: 12px 16px;
	color: var(--hantera-muted);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	border-bottom: 2px solid transparent;
	transition: color 120ms ease, border-color 120ms ease;
}

.hantera-shell-nav-item a:hover,
.hantera-shell-nav-item a:focus {
	color: var(--hantera-dark);
}

.hantera-shell-nav-item.is-current a {
	color: var(--hantera-dark);
	border-bottom-color: var(--hantera-accent);
}

/* ===============================================================
   Content-area
   =============================================================== */

.hantera-shell-main-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

.hantera-page-header {
	margin: 16px 0 24px 0;
}

/* Rubriker ärver font-weight + font-family från temat — vi sätter bara
   spacing och färg. */
.hantera-page-title {
	color: var(--hantera-dark);
	margin: 0 0 4px 0;
	line-height: 1.2;
}

.hantera-page-subtitle {
	margin: 0;
	color: var(--hantera-muted);
	font-size: 14px;
}

/* ===============================================================
   Purchase-fält på WC-produktsida (v1.4+)
   ---------------------------------------------------------------
   Renderas via Hantera_WC_Droplist på hooken
   `woocommerce_before_add_to_cart_button`. Sitter inne i `.cart`-formuläret
   som ofta är display:flex med quantity + button på en rad — vi tvingar
   egen rad med `width: 100%` + `flex-basis: 100%`.
   =============================================================== */

.hantera-purchase-field {
	display: block;
	width: 100%;
	flex-basis: 100%;
	clear: both;
	margin: 0 0 18px 0;
	max-width: 480px;
}

.hantera-purchase-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--hantera-dark);
	margin: 0 0 6px 0;
}

.hantera-purchase-required {
	color: var(--hantera-accent);
	margin-left: 2px;
}

.hantera-purchase-select:invalid {
	color: var(--hantera-muted);
}

.hantera-purchase-select,
.hantera-purchase-input {
	display: block !important;
	-webkit-appearance: auto !important;
	appearance: auto !important;
	width: 100% !important;
	max-width: 480px;
	min-height: 40px;
	box-sizing: border-box;
	border: 1px solid var(--hantera-input-border) !important;
	border-radius: var(--hantera-radius) !important;
	background: var(--hantera-card-bg) !important;
	padding: 8px 12px !important;
	font-size: 14px !important;
	font-family: inherit;
	color: var(--hantera-dark) !important;
	line-height: 1.4;
	margin: 0;
}

.hantera-purchase-select:focus,
.hantera-purchase-input:focus {
	outline: none !important;
	border-color: var(--hantera-accent) !important;
	box-shadow: 0 0 0 3px var(--hantera-accent-ring) !important;
}

.hantera-purchase-hint {
	margin: 6px 0 0 0;
	color: var(--hantera-muted);
	font-size: 12.5px;
}

/* Flex-row med dropdown + ikonknapp för "lägg till ny anställd" */
.hantera-purchase-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	max-width: 480px;
}

.hantera-purchase-row .hantera-purchase-select {
	flex: 1;
	min-width: 0;
}

/* ===== Egen anställd-picker på produktsidan ====================
   Ersätter selectWoo/Select2 helt (v1.5.16+). Native <select> döljs
   och vår egen UI tar över. Inga tredjepartsbibliotek, inga
   Elementor-konflikter. Popupen är position: fixed så sidan kan
   aldrig scrolla när dropdownen öppnas. */

.hantera-picker {
	display: flex;
	flex: 1;
	min-width: 0;
	max-width: 480px;
	position: relative;
}

.hantera-picker-hidden-native {
	display: none !important;
}

/* Astra/Elementor stylar <button>-element med dark bg som default
   (för deras "Add to Cart"-knapp). Vi måste tvinga vit bg + ljust
   tema genomgående för att trigger ska se ut som ett input-fält. */
.hantera-picker-trigger {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	width: 100% !important;
	height: 40px !important;
	padding: 0 12px !important;
	border: 1px solid var(--hantera-input-border) !important;
	border-radius: var(--hantera-radius) !important;
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	background-image: none !important;
	color: var(--hantera-dark) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	font-family: inherit !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	box-shadow: none !important;
	min-height: 40px !important;
}

.hantera-picker-trigger:hover {
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	color: var(--hantera-dark) !important;
	border-color: var(--hantera-input-border) !important;
}

.hantera-picker-trigger:focus,
.hantera-picker-trigger[aria-expanded="true"] {
	outline: none !important;
	border-color: var(--hantera-accent) !important;
	box-shadow: 0 0 0 3px var(--hantera-accent-ring) !important;
	background: #FFFFFF !important;
}

.hantera-picker-trigger-label {
	flex: 1 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	color: var(--hantera-dark) !important;
}

.hantera-picker-trigger-label:empty::before {
	content: "— Välj anställd —";
	color: var(--hantera-muted);
}

.hantera-picker-caret {
	color: var(--hantera-muted) !important;
	font-size: 12px !important;
	line-height: 1 !important;
}

.hantera-picker-popup {
	background: #FFFFFF;
	border: 1px solid var(--hantera-input-border);
	border-radius: var(--hantera-radius);
	box-shadow: 0 12px 32px rgba(37, 50, 58, 0.18);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hantera-picker-popup[hidden] { display: none; }

.hantera-picker-search {
	width: 100%;
	height: 40px;
	padding: 0 14px;
	border: none;
	border-bottom: 1px solid var(--hantera-row-border);
	background: var(--hantera-soft-bg);
	font-size: 14px;
	color: var(--hantera-dark);
	font-family: inherit;
	box-sizing: border-box;
}
.hantera-picker-search:focus {
	outline: none;
	background: #FFFFFF;
}

.hantera-picker-list {
	flex: 1;
	overflow-y: auto;
	padding: 4px 0;
}

.hantera-picker-group-label {
	padding: 8px 14px 4px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hantera-muted);
	font-weight: 600;
}

.hantera-picker-option {
	padding: 9px 14px 9px 17px;
	font-size: 14px;
	color: var(--hantera-dark);
	cursor: pointer;
	border-left: 3px solid transparent;
}

.hantera-picker-option:hover,
.hantera-picker-option:focus {
	outline: none;
	background: #F4F6F8;
	border-left-color: var(--hantera-accent);
}

.hantera-picker-option[hidden] { display: none; }
.hantera-picker-group[hidden] { display: none; }

/* selectWoo:s dropdown renderas via dropdownParent och positioneras
   absolut mot den. Säkerställ att container är relative-positioned
   så dropdownen inte hoppar långt ner på sidan. */
.hantera-purchase-field,
.hantera-modal,
dialog.hantera-modal {
	position: relative;
}

/* (Select2/selectWoo-overrides borttagna i v1.5.16 — vi använder
   `.hantera-picker` på produktsidan istället.) */

.hantera-purchase-add-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 40px;
	background: var(--hantera-card-bg) !important;
	border: 1px solid var(--hantera-input-border) !important;
	border-radius: var(--hantera-radius) !important;
	color: var(--hantera-accent) !important;
	cursor: pointer;
	padding: 0 !important;
	box-shadow: none;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.hantera-purchase-add-icon:hover,
.hantera-purchase-add-icon:focus {
	background: var(--hantera-soft-bg) !important;
	border-color: var(--hantera-accent) !important;
	outline: none;
}

.hantera-purchase-add-icon svg {
	display: block;
	flex-shrink: 0;
}

/* ===============================================================
   Modal ("Skapa ny anställd" från produktsidan)
   ---------------------------------------------------------------
   Använder native `<dialog>`-element. `dialog::backdrop` är browserns
   inbyggda overlay.
   =============================================================== */

.hantera-modal {
	border: 0 !important;
	border-radius: var(--hantera-radius-lg) !important;
	padding: 0 !important;
	max-width: 480px !important;
	width: calc(100% - 32px);
	background: var(--hantera-card-bg) !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.hantera-modal::backdrop {
	background: rgba(37, 50, 58, 0.55);
}

.hantera-modal-form {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
}

.hantera-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--hantera-row-border);
}

.hantera-modal-header h3 {
	margin: 0;
	font-size: 16px;
	color: var(--hantera-dark);
}

.hantera-modal-close {
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	color: var(--hantera-muted);
	cursor: pointer;
	padding: 4px 8px;
}

.hantera-modal-close:hover,
.hantera-modal-close:focus {
	color: var(--hantera-dark);
}

.hantera-modal-body {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hantera-modal-context {
	margin: 0;
	padding: 8px 12px;
	background: var(--hantera-soft-bg);
	border-left: 3px solid var(--hantera-accent);
	border-radius: var(--hantera-radius-sm);
	font-size: 13px;
	color: var(--hantera-text);
}

.hantera-modal-context strong {
	color: var(--hantera-dark);
}

.hantera-modal-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hantera-modal-row label {
	font-size: 12px;
	font-weight: 500;
	color: var(--hantera-dark);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hantera-modal-row input {
	display: block !important;
	-webkit-appearance: auto !important;
	appearance: auto !important;
	height: 38px;
	border: 1px solid var(--hantera-input-border) !important;
	border-radius: var(--hantera-radius) !important;
	background: var(--hantera-card-bg) !important;
	padding: 6px 10px !important;
	font-size: 14px !important;
	color: var(--hantera-dark) !important;
	font-family: inherit;
	box-sizing: border-box;
	width: 100%;
}

.hantera-modal-row input:focus {
	outline: none !important;
	border-color: var(--hantera-accent) !important;
	box-shadow: 0 0 0 3px var(--hantera-accent-ring) !important;
}

.hantera-modal-error {
	margin: 4px 0 0 0;
	padding: 8px 12px;
	border-left: 3px solid var(--hantera-status-damaged-dot);
	background: var(--hantera-status-damaged-bg);
	color: var(--hantera-status-damaged-fg);
	border-radius: var(--hantera-radius-sm);
	font-size: 13px;
}

.hantera-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--hantera-row-border);
}

/* ===============================================================
   Stapeldiagram (översikten — kostnader per kvartal)
   =============================================================== */

.hantera-chart-card {
	margin-bottom: 24px;
}

.hantera-chart-wrap {
	width: 100%;
	overflow-x: auto;
}

.hantera-chart-svg {
	width: 100%;
	height: auto;
	max-height: 320px;
	display: block;
}

.hantera-chart-empty {
	margin: 0;
	padding: 12px 0;
}

.hantera-chart-note {
	margin: 12px 0 0 0;
	color: var(--hantera-muted);
	font-size: 12.5px;
}

.hantera-chart-legend {
	list-style: none;
	margin: 14px 0 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	font-size: 13px;
	color: var(--hantera-dark);
}

.hantera-chart-legend li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hantera-chart-legend-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

/* ===============================================================
   Översiktens nedre grid (Avtal löper ut + Ej tilldelade)
   =============================================================== */

.hantera-overview-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 0 0 24px 0;
}

.hantera-card-heading-meta {
	color: var(--hantera-muted);
	font-size: 12px;
}

@media (max-width: 768px) {
	.hantera-overview-grid {
		grid-template-columns: 1fr;
	}
}

/* ===============================================================
   Mini-list (kompakta listor i sidopaneler)
   =============================================================== */

.hantera-mini-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hantera-mini-list-row {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 12px;
	row-gap: 4px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hantera-row-border);
	align-items: baseline;
}

.hantera-mini-list-row:first-child {
	padding-top: 4px;
}

.hantera-mini-list-row:last-child {
	border-bottom: 0;
	padding-bottom: 4px;
}

.hantera-mini-list-title {
	color: var(--hantera-dark);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
}

.hantera-mini-list-title:hover,
.hantera-mini-list-title:focus {
	color: var(--hantera-accent);
	text-decoration: underline;
}

.hantera-mini-list-meta {
	color: var(--hantera-text);
	font-size: 13px;
	white-space: nowrap;
	text-align: right;
}

.hantera-mini-list-sub {
	grid-column: 1 / -1;
	color: var(--hantera-muted);
	font-size: 12.5px;
}

/* ===============================================================
   KPI-rutor (översikten)
   =============================================================== */

.hantera-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0 0 32px 0;
}

.hantera-kpi {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--hantera-card-bg);
	border: 1px solid var(--hantera-card-border);
	border-radius: var(--hantera-radius-lg);
	padding: 20px 22px;
	min-height: 96px;
}

.hantera-kpi-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hantera-muted);
}

.hantera-kpi-value {
	font-size: 28px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--hantera-dark);
}

.hantera-kpi-note {
	font-size: 12px;
	color: var(--hantera-muted);
}

/* Varningsvariant: orange vänsterband + lätt orange bg */
.hantera-kpi.is-warning {
	box-shadow: inset 3px 0 0 var(--hantera-status-warning-dot);
}

@media (max-width: 900px) {
	.hantera-kpi-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.hantera-kpi-grid {
		grid-template-columns: 1fr;
	}
}

/* ===============================================================
   Brödsmulor + detail-header
   =============================================================== */

.hantera-breadcrumb {
	font-size: 13px;
	color: var(--hantera-muted);
	margin: 4px 0 12px 0;
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.hantera-breadcrumb a {
	color: var(--hantera-accent);
	text-decoration: none;
}

.hantera-breadcrumb a:hover,
.hantera-breadcrumb a:focus {
	text-decoration: underline;
}

.hantera-breadcrumb-sep {
	color: var(--hantera-placeholder);
}

.hantera-detail-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
}

.hantera-detail-header .hantera-detail-header-main {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.hantera-detail-header-actions {
	margin: 8px 0 0 0;
}

/* ===============================================================
   Danger zone — subtila, "lågmält allvarliga" actions längst ner på
   detail-vyer (t.ex. "Markera som avslutad").
   =============================================================== */

.hantera-danger-zone {
	margin: 32px 0 0 0;
	padding: 16px 0 0 0;
	border-top: 1px solid var(--hantera-row-border);
}

.hantera-danger-zone form {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
}

.hantera-button-danger-outline {
	display: inline-block;
	background: transparent !important;
	color: var(--hantera-status-damaged-fg) !important;
	border: 1px solid var(--hantera-status-damaged-dot) !important;
	padding: 7px 14px !important;
	border-radius: var(--hantera-radius) !important;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.4;
}

.hantera-button-danger-outline:hover,
.hantera-button-danger-outline:focus {
	background: var(--hantera-status-damaged-bg) !important;
	color: var(--hantera-status-damaged-fg) !important;
}

.hantera-danger-note {
	color: var(--hantera-muted);
	font-size: 12.5px;
}

/* Card-heading-row: rubrik + redigera-länk på samma rad */
.hantera-card-heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px 0;
}

.hantera-card-heading-row .hantera-card-heading {
	margin: 0;
}

.hantera-card-edit-link {
	color: var(--hantera-accent);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
}

.hantera-card-edit-link:hover,
.hantera-card-edit-link:focus {
	color: var(--hantera-accent-hover);
	text-decoration: underline;
}

/* ===============================================================
   Info-kort (personuppgifter på detail-vyer)
   =============================================================== */

.hantera-card {
	background: var(--hantera-card-bg);
	border: 1px solid var(--hantera-card-border);
	border-radius: var(--hantera-radius-lg);
	padding: 22px 24px;
	margin: 0 0 20px 0;
}

.hantera-card-heading {
	margin: 0 0 16px 0;
	font-size: 12px !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff !important;
	background: var(--hantera-dark);
	padding: 6px 12px;
	display: inline-block;
	border-radius: 4px;
	font-weight: 800;
	font-family: 'Manrope' !important;
}

.hantera-info-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 32px;
	margin: 0;
}

.hantera-info-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hantera-info-row dt {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hantera-muted);
	font-weight: 500;
}

.hantera-info-row dd {
	margin: 0;
	color: var(--hantera-dark);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.hantera-info-row dd a {
	color: var(--hantera-accent);
	text-decoration: none;
}

.hantera-info-row dd a:hover,
.hantera-info-row dd a:focus {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.hantera-info-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/* ===============================================================
   Detail subtitle (under H1 på inventarie-detail)
   =============================================================== */

.hantera-detail-subtitle {
	margin: 8px 0 0 0;
	font-size: 14px;
	color: var(--hantera-muted);
}

.hantera-detail-subtitle a {
	color: var(--hantera-accent);
	text-decoration: none;
}

.hantera-detail-subtitle a:hover,
.hantera-detail-subtitle a:focus {
	text-decoration: underline;
}

/* ===============================================================
   Progressbar (avtalstid)
   =============================================================== */

.hantera-progress-card .hantera-progress-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 10px 0;
	font-size: 14px;
}

.hantera-progress-bar {
	background: var(--hantera-row-border);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.hantera-progress-bar-fill {
	height: 100%;
	background: var(--hantera-status-active-dot);
	border-radius: 999px;
	transition: width 200ms ease;
}

.hantera-progress-bar.is-warning .hantera-progress-bar-fill {
	background: var(--hantera-status-warning-dot);
}

.hantera-progress-bar.is-done .hantera-progress-bar-fill {
	background: var(--hantera-status-damaged-dot);
}

/* ===============================================================
   Anteckningar
   =============================================================== */

.hantera-anteckningar {
	margin: 0;
	white-space: normal;
	color: var(--hantera-dark);
	line-height: 1.5;
}

/* ===============================================================
   Action-buttons (support, stöld m.fl.)
   =============================================================== */

.hantera-action-buttons {
	display: flex;
	gap: 12px;
	margin: 0 0 24px 0;
	flex-wrap: wrap;
}

/* ===============================================================
   Stöld-stegen (numrerade kort)
   =============================================================== */

.hantera-step-card {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	align-items: start;
}

.hantera-step-number {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--hantera-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 600;
	flex-shrink: 0;
}

.hantera-step-title {
	margin: 0 0 8px 0;
	color: var(--hantera-dark);
}

.hantera-step-content > p {
	margin: 0 0 12px 0;
	color: var(--hantera-text);
}

.hantera-step-content > p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.hantera-step-card {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ===============================================================
   Sektion (collapsible <details>) — Inventarier / Historik
   =============================================================== */

.hantera-section {
	background: var(--hantera-card-bg);
	border: 1px solid var(--hantera-card-border);
	border-radius: var(--hantera-radius-lg);
	margin: 0 0 16px 0;
}

.hantera-section-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	font-size: 14px;
}

.hantera-section-summary::-webkit-details-marker { display: none; }

.hantera-section-summary::before {
	content: "▶";
	font-size: 10px;
	color: var(--hantera-muted);
	transition: transform 120ms ease;
	display: inline-block;
}

.hantera-section[open] > .hantera-section-summary::before {
	transform: rotate(90deg);
}

.hantera-section-title {
	font-weight: 600;
	color: var(--hantera-dark);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
}

.hantera-section-count {
	background: var(--hantera-soft-bg);
	border: 1px solid var(--hantera-row-border);
	color: var(--hantera-muted);
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
}

.hantera-section-body {
	border-top: 1px solid var(--hantera-row-border);
	padding: 16px 20px;
}

.hantera-section-empty {
	margin: 0;
}

/* Tabellen inom en section: behåll wrappens ram, ge lite top-margin
   så den inte sitter direkt mot summary-borderns underkant. */
.hantera-section .hantera-table-wrap {
	margin: 4px 0 0 0;
}

/* ===============================================================
   Mono / serienummer
   =============================================================== */

.hantera-mono {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12.5px;
	background: var(--hantera-soft-bg);
	border: 1px solid var(--hantera-row-border);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--hantera-dark);
}

.hantera-mut-suffix {
	color: var(--hantera-muted);
	font-size: 12px;
	margin-left: 2px;
}

/* ===============================================================
   Historik-lista
   =============================================================== */

.hantera-historik-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hantera-historik-row {
	display: grid;
	grid-template-columns: minmax(150px, 180px) minmax(120px, 200px) 1fr;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--hantera-row-border);
	font-size: 13px;
}

.hantera-historik-row:last-child {
	border-bottom: 0;
}

.hantera-historik-datum {
	color: var(--hantera-muted);
	font-variant-numeric: tabular-nums;
}

.hantera-historik-typ {
	color: var(--hantera-dark);
	font-weight: 500;
}

.hantera-historik-av {
	color: var(--hantera-muted);
}

@media (max-width: 640px) {
	.hantera-historik-row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* ===============================================================
   Notice-boxar (success / warning / error)
   =============================================================== */

.hantera-notice {
	margin: 0 0 16px 0;
	padding: 12px 16px;
	border-radius: var(--hantera-radius);
	font-size: 14px;
	border-left: 3px solid var(--hantera-status-active-dot);
	background: var(--hantera-status-active-bg);
	color: var(--hantera-status-active-fg);
}

.hantera-notice-warning {
	border-left-color: var(--hantera-status-warning-dot);
	background: var(--hantera-status-warning-bg);
	color: var(--hantera-status-warning-fg);
}

.hantera-notice-error {
	border-left-color: var(--hantera-status-damaged-dot);
	background: var(--hantera-status-damaged-bg);
	color: var(--hantera-status-damaged-fg);
}

/* ===============================================================
   Settings-formulär (inställningar-vyn)
   =============================================================== */

.hantera-settings-form .hantera-form-intro {
	margin: 0 0 18px 0;
	color: var(--hantera-muted);
	font-size: 14px;
}

.hantera-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px 0;
}

.hantera-form-row label {
	font-size: 13px;
	font-weight: 500;
	color: var(--hantera-dark);
}

/* `!important` på de visuellt kritiska egenskaperna eftersom Astra/Elementor
   ofta sätter `appearance: none`, `border: 0`, `background: transparent`
   eller liknande på native form-element — utan ramar blir input/textarea
   osynliga (textarea visar bara sin text-content). */
.hantera-form-row input[type="number"],
.hantera-form-row input[type="text"],
.hantera-form-row input[type="email"],
.hantera-form-row textarea,
.hantera-form-row select {
	display: block !important;
	-webkit-appearance: auto !important;
	appearance: auto !important;
	border: 1px solid var(--hantera-input-border) !important;
	border-radius: var(--hantera-radius) !important;
	background: var(--hantera-card-bg) !important;
	padding: 8px 12px !important;
	font-size: 14px;
	color: var(--hantera-dark);
	font-family: inherit;
	width: 100%;
	max-width: 480px;
	box-sizing: border-box;
	line-height: 1.4;
}

.hantera-form-row select {
	-webkit-appearance: auto !important;
	appearance: auto !important;
	height: 38px;
}

.hantera-form-row textarea {
	resize: vertical;
	min-height: 90px !important;
	max-width: 600px;
}

.hantera-form-row input:focus,
.hantera-form-row textarea:focus {
	outline: none;
	border-color: var(--hantera-accent) !important;
	box-shadow: 0 0 0 3px var(--hantera-accent-ring) !important;
}

.hantera-form-row-checkbox label {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.hantera-form-row-checkbox input[type="checkbox"] {
	-webkit-appearance: auto !important;
	appearance: auto !important;
	display: inline-block !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: relative !important;
	accent-color: var(--hantera-accent);
}

.hantera-form-hint {
	margin: 0;
	color: var(--hantera-muted);
	font-size: 12.5px;
}

.hantera-form-actions {
	margin: 24px 0 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--hantera-row-border);
}

/* ===============================================================
   Filter-rad (ovanför tabeller)
   =============================================================== */

.hantera-filters {
	background: var(--hantera-card-bg);
	border: 1px solid var(--hantera-card-border);
	border-left: 3px solid var(--hantera-dark);
	border-radius: var(--hantera-radius-lg);
	padding: 14px 18px;
	margin: 0 0 20px 0;
}

.hantera-filters-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
}

.hantera-filter {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 140px;
}

.hantera-filter-search {
	flex: 1 1 200px;
}

.hantera-filter label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hantera-muted);
}

.hantera-filter select,
.hantera-filter input[type="search"] {
	height: 36px;
	border: 1px solid var(--hantera-input-border);
	border-radius: var(--hantera-radius);
	background: var(--hantera-card-bg);
	padding: 0 10px;
	font-size: 14px;
	color: var(--hantera-dark);
}

.hantera-filter select:focus,
.hantera-filter input[type="search"]:focus {
	outline: none;
	border-color: var(--hantera-accent);
	box-shadow: 0 0 0 3px var(--hantera-accent-ring);
}

.hantera-filter-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.hantera-filter-reset {
	color: var(--hantera-muted);
	font-size: 13px;
	text-decoration: none;
}

.hantera-filter-reset:hover,
.hantera-filter-reset:focus {
	color: var(--hantera-accent);
}

/* ===============================================================
   Tabell (anstallda, inventarier, ordrar)
   =============================================================== */

.hantera-table-wrap {
	background: var(--hantera-card-bg);
	border: 1px solid var(--hantera-card-border);
	border-radius: var(--hantera-radius-lg);
	overflow: hidden;
}

.hantera-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: 0;
	font-size: 14px;
}

/* Astra/Bricks och en del andra teman sätter `border-width: 1px 0 0 1px`
   och `margin-bottom: 1.5em` på alla `table`-element. Det skapar en oväntad
   topp-/vänsterborder utanpå wrap-divens egen border + ett gap under tabellen.
   Hard-reset på alla cells så våra borders kommer enbart från tbody-td-regeln. */
.hantera-table th,
.hantera-table td {
	border: 0;
}

.hantera-table thead th {
	background: var(--hantera-dark);
	color: #fff;
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 14px 20px;
}

.hantera-table tbody td {
	padding: 18px 20px;
	border-bottom: 1px solid var(--hantera-row-border);
	vertical-align: middle;
	line-height: 1.4;
}

.hantera-table tbody tr:last-child td {
	border-bottom: none;
}

.hantera-table tbody tr:hover {
	background: var(--hantera-soft-bg);
}

.hantera-col-num {
	text-align: right;
	white-space: nowrap;
}

.hantera-col-center {
	text-align: center;
	white-space: nowrap;
}

.hantera-sort-link {
	color: inherit !important;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.hantera-sort-link:hover {
	text-decoration: underline;
}
.hantera-sort-arrow {
	font-size: 11px;
	opacity: 0.8;
}

.hantera-col-status {
	width: 110px;
}

.hantera-table-link {
	color: var(--hantera-dark);
	text-decoration: none;
}

.hantera-table-link:hover,
.hantera-table-link:focus {
	color: var(--hantera-accent);
	text-decoration: underline;
}

.hantera-muted {
	color: var(--hantera-placeholder);
}

/* Gråmarkerad rad — t.ex. orderrader från annat purchase-företag än det
   aktivt valda. Innehållet är fortfarande klickbart men visuellt tonas ner. */
.hantera-table tbody tr.hantera-row-muted {
	background: var(--hantera-soft-bg);
	color: var(--hantera-muted);
}

.hantera-table tbody tr.hantera-row-muted td {
	color: var(--hantera-muted);
}

.hantera-table tbody tr.hantera-row-muted .hantera-table-link {
	color: var(--hantera-muted);
}

.hantera-table tbody tr.hantera-row-muted .hantera-table-link:hover,
.hantera-table tbody tr.hantera-row-muted .hantera-table-link:focus {
	color: var(--hantera-dark);
}

.hantera-row-foretag-tag {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--hantera-row-border);
	color: var(--hantera-muted);
	font-size: 11px;
	font-weight: 500;
	vertical-align: middle;
	white-space: nowrap;
}

.hantera-row-other-note {
	margin: 0 0 12px 0;
	padding: 10px 14px;
	background: var(--hantera-soft-bg);
	border-left: 3px solid var(--hantera-placeholder);
	border-radius: var(--hantera-radius-sm);
	color: var(--hantera-muted);
	font-size: 13px;
}

/* ===============================================================
   Status-badges (per anställd-/inventarie-status)
   =============================================================== */

.hantera-status {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 2px 8px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 500;
	white-space: nowrap;
	background: var(--hantera-status-archived-bg) !important;
	color: var(--hantera-status-archived-fg) !important;
	line-height: 1.4 !important;
}

.hantera-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hantera-status-archived-dot);
	display: inline-block;
}

.hantera-status-aktiv {
	background: var(--hantera-status-active-bg) !important;
	color: var(--hantera-status-active-fg) !important;
}
.hantera-status-aktiv::before {
	background: var(--hantera-status-active-dot);
}

.hantera-status-avslutad,
.hantera-status-arkiverad {
	background: var(--hantera-status-archived-bg) !important;
	color: var(--hantera-status-archived-fg) !important;
}

.hantera-status-ej_tilldelad {
	background: var(--hantera-status-warning-bg) !important;
	color: var(--hantera-status-warning-fg) !important;
}
.hantera-status-ej_tilldelad::before {
	background: var(--hantera-status-warning-dot);
}

.hantera-status-returnerad {
	background: var(--hantera-status-returned-bg) !important;
	color: var(--hantera-status-returned-fg) !important;
}
.hantera-status-returnerad::before {
	background: var(--hantera-status-returned-dot);
}

.hantera-status-skadad {
	background: var(--hantera-status-damaged-bg) !important;
	color: var(--hantera-status-damaged-fg) !important;
}
.hantera-status-skadad::before {
	background: var(--hantera-status-damaged-dot);
}

.hantera-status-kasserad {
	background: var(--hantera-status-scrapped-bg) !important;
	color: var(--hantera-status-scrapped-fg) !important;
}
.hantera-status-kasserad::before {
	background: var(--hantera-status-scrapped-dot);
}

/* ===============================================================
   Pagination
   =============================================================== */

.hantera-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 18px 4px;
	font-size: 13px;
	color: var(--hantera-muted);
	flex-wrap: wrap;
	gap: 12px;
}

.hantera-pagination-links {
	display: flex;
	gap: 12px;
}

.hantera-pagination-links a {
	color: var(--hantera-accent);
	text-decoration: none;
}

.hantera-pagination-links a:hover,
.hantera-pagination-links a:focus {
	color: var(--hantera-accent-hover);
	text-decoration: underline;
}

/* ===============================================================
   Empty state (placeholder-vyer + access-denied)
   =============================================================== */

.hantera-empty-state {
	background: var(--hantera-empty-bg);
	border: 1px dashed var(--hantera-card-border);
	border-radius: var(--hantera-radius-lg);
	padding: 48px 32px;
	text-align: center;
}

.hantera-frontend-logged-out {
	max-width: 720px;
	margin: 32px auto;
	padding: 0 16px;
}

.hantera-empty-state h2 {
	margin: 0 0 12px 0;
	color: var(--hantera-dark);
}

.hantera-empty-state p {
	margin: 0 auto 12px auto;
	max-width: 540px;
	color: var(--hantera-muted);
	font-size: 14px;
}

.hantera-empty-state p:last-child {
	margin-bottom: 0;
}

/* ===============================================================
   Knappar
   =============================================================== */

.hantera-button {
	display: inline-block;
	padding: 9px 18px;
	border-radius: var(--hantera-radius);
	background: var(--hantera-accent);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 500;
	font-size: 14px;
	border: none;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.hantera-button:hover,
.hantera-button:focus {
	background: var(--hantera-accent-hover);
}

.hantera-button-secondary {
	background: var(--hantera-card-bg) !important;
	color: var(--hantera-dark) !important;
	border: 1px solid var(--hantera-input-border) !important;
}

.hantera-button-secondary:hover,
.hantera-button-secondary:focus {
	background: var(--hantera-soft-bg) !important;
}

/* ===============================================================
   Mobil-anpassning (enkel breakpoint i 1.3.0)
   =============================================================== */

@media (max-width: 768px) {
	.hantera-shell-header-row {
		gap: 12px;
		padding-left: 16px;
		padding-right: 16px;
	}
	.hantera-shell-brand {
		margin-right: 0;
	}
	.hantera-shell-foretagsvaljare,
	.hantera-shell-foretag-static {
		order: 3;
		flex-basis: 100%;
	}
	.hantera-shell-foretagsvaljare select {
		max-width: none;
		flex: 1;
	}
	.hantera-shell-main-inner,
	.hantera-shell-nav-list {
		padding-left: 16px;
		padding-right: 16px;
	}
}