/* Schrack Seconet – gemensamt tema för de inloggade sidorna.
   Samma formspråk som inloggningssidan: marinblått och signalrött från logotypen, typsnittet Jost,
   och knappfärger efter funktion som lamporna på en brandlarmscentral (marin = primärt, grönt = spara/drift,
   rött = ta bort/fel). Laddas efter Bootstrap men före sidornas egna style.css, som därför kan skriva över.
   Bootstrap 3 sätter html { font-size: 10px }, så måtten här anges i px. */

:root {
	--ss-navy:    #13285F;
	--ss-night:   #0F1F4A;
	--ss-red:     #E41E26;
	--ss-red-dk:  #B8141B;
	--ss-green:   #1E7F4F;
	--ss-green-dk:#17633D;
	--ss-amber:   #B7860B;
	--ss-steel:   #4A5470;
	--ss-line:    #D5DAE5;
	--ss-page:    #EEF1F6;
	--ss-white:   #FFFFFF;
	--ss-font:    "Jost", Futura, "Century Gothic", "Trebuchet MS", sans-serif;
}

body {
	font-family: var(--ss-font);
	color: var(--ss-navy);
	background: var(--ss-page);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--ss-font);
	font-weight: 500;
	color: var(--ss-navy);
	letter-spacing: -0.005em;
}

a { color: var(--ss-navy); }
a:hover, a:focus { color: var(--ss-red-dk); }

/* Kort: vita ytor med tunn linje, ingen skugga */
.card {
	border: 1px solid var(--ss-line);
	border-radius: 2px;
	box-shadow: none;
	background: var(--ss-white);
}
.card-header {
	background: var(--ss-white);
	border-bottom: 1px solid var(--ss-line);
	font-weight: 500;
}
.card-title { color: var(--ss-navy); font-weight: 500; }

/* Knappar – färg efter funktion */
.btn {
	font-family: var(--ss-font);
	font-weight: 500;
	border-radius: 2px;
}
.btn:focus, .btn:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--ss-red) 35%, transparent);
	outline-offset: 1px;
	box-shadow: none;
}
.btn-primary, .btn-primary:focus {
	background-color: var(--ss-navy);
	border-color: var(--ss-navy);
	color: var(--ss-white);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active {
	background-color: var(--ss-night) !important;
	border-color: var(--ss-night) !important;
	color: var(--ss-white);
}
.btn-success, .btn-success:focus {
	background-color: var(--ss-green);
	border-color: var(--ss-green);
	color: var(--ss-white);
}
.btn-success:hover, .btn-success:active {
	background-color: var(--ss-green-dk) !important;
	border-color: var(--ss-green-dk) !important;
	color: var(--ss-white);
}
.btn-danger, .btn-danger:focus {
	background-color: var(--ss-red);
	border-color: var(--ss-red);
	color: var(--ss-white);
}
.btn-danger:hover, .btn-danger:active {
	background-color: var(--ss-red-dk) !important;
	border-color: var(--ss-red-dk) !important;
	color: var(--ss-white);
}
/* Fyllda knappar har alltid vit text, i alla lägen. Behövs för knappar som också har .form-control
   (t.ex. "Spara", "Koppla"), där fältens marinblå textfärg annars vinner, och för <font>/<span> inne i knappen. */
.btn.btn-primary, .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active,
.btn.btn-success, .btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:active,
.btn.btn-danger,  .btn.btn-danger:hover,  .btn.btn-danger:focus,  .btn.btn-danger:active,
.btn.btn-primary *, .btn.btn-success *, .btn.btn-danger * {
	color: var(--ss-white) !important;
}
.btn-outline-secondary, .btn-default {
	border-color: var(--ss-line);
	color: var(--ss-navy);
	background: var(--ss-white);
}
.btn-outline-secondary:hover, .btn-default:hover {
	border-color: var(--ss-navy);
	background: var(--ss-white);
	color: var(--ss-navy);
}

/* Formulärfält – samma som inloggningen */
.form-control {
	border: 1px solid var(--ss-line);
	border-radius: 2px;
	color: var(--ss-navy);
	font-family: var(--ss-font);
	box-shadow: none;
}
.form-control:focus {
	border-color: var(--ss-navy);
	outline: 3px solid color-mix(in srgb, var(--ss-red) 30%, transparent);
	outline-offset: 0;
	box-shadow: none;
}
/* Rullistor: Bootstrap 3 ger fast höjd 34 px, vilket klipper nedstaplarna (g, p, y) med 16 px Jost.
   Höjden får följa texten i stället. */
select.form-control:not([multiple]):not([size]) {
	height: auto;
	min-height: 38px;
	padding-top: 6px;
	padding-bottom: 6px;
	line-height: 1.5;
}
/* Textfält lika höga som rullistorna, så att de linjerar bredvid varandra */
input.form-control:not([type="file"]):not([type="checkbox"]):not([type="radio"]) { height: 38px; }
label { color: var(--ss-steel); font-weight: 500; }

/* Små ikonknappar bredvid fält (sök, rensa, ny kundkorg): lika höga som fälten, diskreta tills man pekar */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	margin-left: 4px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 2px;
	color: var(--ss-steel);
	font-size: 16px;
	cursor: pointer;
}
.icon-btn:hover { background: #E6EBF4; color: var(--ss-navy); }
.icon-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ss-red) 35%, transparent); outline-offset: 0; }
.icon-btn-ok { color: var(--ss-green); }
.icon-btn-ok:hover { color: var(--ss-green-dk); }

/* Tabeller: marinblå rubrikrad, tunna radlinjer */
.table > thead > tr > th,
.table thead th {
	color: var(--ss-navy);
	font-weight: 600;
	border-top: 0;
	border-bottom: 2px solid var(--ss-navy);
	vertical-align: bottom;
}
.table > tbody > tr > td,
.table td {
	border-top: 1px solid var(--ss-line);
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #F6F8FB; }
.table-hover > tbody > tr:hover { background-color: #E9EDF5; }

/* Modaler: marinblått huvud, vit kropp */
.modal-content {
	border: 0;
	border-radius: 2px;
	box-shadow: 0 12px 40px rgba(15, 31, 74, 0.28);
}
.modal-header {
	background: var(--ss-navy);
	color: var(--ss-white);
	border-bottom: 0;
	border-radius: 2px 2px 0 0;
}
.modal-header .modal-title,
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4 {
	color: var(--ss-white);
	font-weight: 500;
}
/* Sidornas dialogmarkup har rubriken i <font style="color:black">; !important slår den inline-färgen,
   så rubriken syns på det marinblå huvudet även när JS fyller #genDlgHead. */
.modal-header .modal-title,
.modal-header .modal-title * {
	color: var(--ss-white) !important;
}
.modal-header .close {
	color: var(--ss-white);
	opacity: .85;
	text-shadow: none;
}
.modal-footer { border-top: 1px solid var(--ss-line); }

/* Etiketter/badges */
.badge { border-radius: 2px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* Håll ihop t.ex. belopp ("1 250,00 SEK") på en rad */
.nowrap { white-space: nowrap; }

/* Rullningslister: smala och diskreta på hela sajten (t.ex. kategoriträdet, dialoger, listor).
   Firefox och nyare Chrome/Edge använder scrollbar-width/-color; Safari och äldre Chrome ::-webkit-scrollbar. */
* {
	scrollbar-width: thin;
	scrollbar-color: #C3CADB transparent;
}
*:hover { scrollbar-color: #9AA3B8 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: #C3CADB;
	border: 2px solid transparent; /* luft runt tummen, så att den ser smalare ut */
	border-radius: 8px;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #9AA3B8; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }