/*
 * Brand theme — inherits the look, font and colours from https://smsklub.dk/
 * Loaded LAST so it overrides Bootstrap/Flatly defaults.
 *
 * Palette (sampled from the marketing site):
 *   Ink   #302654  deep indigo  — text, headings, primary buttons
 *   Teal  #06B6C2  accent       — links, active states, highlights
 *   Muted #6D6688  muted text
 *   Font  "Plus Jakarta Sans"
 */

/* Bootstrap 5 sets display:flex on .row and many card/header containers, which
   causes float to be completely ignored. Augment .float-end with margin-left:auto
   so it works correctly in BOTH block and flex contexts project-wide. */
.float-end {
	margin-left: auto !important;
}

:root {
	--brand-ink: #302654;
	--brand-ink-rgb: 48, 38, 84;
	--brand-ink-dark: #241c40;
	--brand-teal: #06b6c2;
	--brand-teal-rgb: 6, 182, 194;
	--brand-teal-dark: #059aa4;
	--brand-muted: #6d6688;
	--brand-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Bootstrap variable overrides */
	--bs-body-font-family: var(--brand-font);
	--bs-body-color: var(--brand-ink);
	--bs-body-color-rgb: var(--brand-ink-rgb);
	--bs-emphasis-color: var(--brand-ink);
	--bs-heading-color: var(--brand-ink);

	--bs-primary: var(--brand-ink);
	--bs-primary-rgb: var(--brand-ink-rgb);

	--bs-link-color: var(--brand-teal);
	--bs-link-color-rgb: var(--brand-teal-rgb);
	--bs-link-hover-color: var(--brand-teal-dark);
	--bs-link-hover-color-rgb: 5, 154, 164;
}

/* ---- Typography ---------------------------------------------------------- */
body,
input,
button,
select,
textarea,
.form-control,
.form-select,
.btn,
.card,
.table,
.dropdown-menu {
	font-family: var(--brand-font);
}

body {
	color: var(--brand-ink);
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title,
.profile-usertitle-name {
	font-family: var(--brand-font);
	color: var(--brand-ink);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Card titles read cleaner a touch lighter than page headings */
.card-title {
	font-weight: 600;
	font-size: 1.05rem;
}

/* Secondary text inside headings/card titles (e.g. "Seneste uge") */
.card-title small,
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
	font-weight: 300;
	color: #aab0bd;
}
/* SMS campaign recipient count label */
.recipients-heading small {
	font-size: 0.5em;
}

/* ---- Campaign picker dropdown ------------------------------------------- */
.campaign-picker-btn {
	border-radius: 8px !important;
	padding: 0.55rem 0.9rem;
	font-size: 0.875rem;
	color: var(--brand-muted) !important;
	border-color: #d3d8e0 !important;
	background: #fff !important;
}
.campaign-picker-btn.campaign-picker-active {
	color: var(--brand-ink) !important;
	border-color: var(--brand-teal) !important;
	box-shadow: 0 0 0 1px var(--brand-teal);
}
.campaign-picker-btn::after {
	margin-left: auto;
}
.campaign-picker-btn .campaign-picker-placeholder {
	color: #aab0bd;
}
.campaign-picker-date {
	font-weight: 600;
	color: var(--brand-ink);
}
.campaign-picker-menu {
	border-radius: 8px;
	border-color: #e3e6ec;
	box-shadow: 0 8px 24px rgba(0,0,0,0.10);
	max-height: 340px;
	overflow-y: auto;
}
.campaign-picker-menu .dropdown-item {
	font-size: 0.85rem;
	padding: 0.55rem 1rem;
	border-bottom: 1px solid #f2f4f7;
	white-space: normal;
	color: var(--brand-ink);
}
.campaign-picker-menu .dropdown-item:last-child {
	border-bottom: 0;
}
.campaign-picker-menu .dropdown-item:hover,
.campaign-picker-menu .dropdown-item:focus {
	background: #f0f8f9;
	color: var(--brand-ink);
}

/* Form section headers (e.g. SMS Besked, Afsender, Tidspunkt) */
.form-section-label {
	display: block;
	margin-bottom: 0.5rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid #eef0f4;
	font-family: var(--brand-font);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--brand-ink);
	letter-spacing: -0.01em;
}

/* Integration action buttons on form settings page */
.btn-integration-action {
	border-radius: 10px !important;
	font-weight: 500;
	line-height: 1.3;
}
.btn-integration-action .fa {
	opacity: 0.95;
}

a {
	color: var(--brand-teal);
	text-decoration: none;
}
a:hover {
	color: var(--brand-teal-dark);
}

/* ---- Buttons (pill shaped, like the marketing CTAs) --------------------- */
/* Default to the compact "btn-sm" size/font used by the sidebar LOG UD button */
.btn {
	--bs-btn-padding-y: 0.25rem;
	--bs-btn-padding-x: 0.5rem;
	--bs-btn-font-size: 0.875rem;
	border-radius: 30px;
	font-weight: 500;
}
/* Keep large CTA buttons (e.g. login) at their bigger size */
.btn-lg {
	--bs-btn-padding-y: 0.5rem;
	--bs-btn-padding-x: 1rem;
	--bs-btn-font-size: 1.05rem;
}

.btn-primary {
	--bs-btn-bg: var(--brand-ink);
	--bs-btn-border-color: var(--brand-ink);
	--bs-btn-hover-bg: var(--brand-ink-dark);
	--bs-btn-hover-border-color: var(--brand-ink-dark);
	--bs-btn-active-bg: var(--brand-ink-dark);
	--bs-btn-active-border-color: var(--brand-ink-dark);
	--bs-btn-disabled-bg: var(--brand-ink);
	--bs-btn-disabled-border-color: var(--brand-ink);
}

.btn-success {
	--bs-btn-bg: var(--brand-teal);
	--bs-btn-border-color: var(--brand-teal);
	--bs-btn-hover-bg: var(--brand-teal-dark);
	--bs-btn-hover-border-color: var(--brand-teal-dark);
	--bs-btn-active-bg: var(--brand-teal-dark);
	--bs-btn-active-border-color: var(--brand-teal-dark);
	--bs-btn-disabled-bg: var(--brand-teal);
	--bs-btn-disabled-border-color: var(--brand-teal);
}

.btn-outline-primary {
	--bs-btn-color: var(--brand-ink);
	--bs-btn-border-color: var(--brand-ink);
	--bs-btn-hover-bg: var(--brand-ink);
	--bs-btn-hover-border-color: var(--brand-ink);
	--bs-btn-active-bg: var(--brand-ink);
	--bs-btn-active-border-color: var(--brand-ink);
}

.btn-link {
	--bs-btn-color: var(--brand-teal);
	--bs-btn-hover-color: var(--brand-teal-dark);
}

/* ---- Badges ------------------------------------------------------------- */
.badge.bg-primary {
	background-color: var(--brand-ink) !important;
}
.badge.bg-success {
	background-color: var(--brand-teal) !important;
}
.badge.bg-info {
	background-color: var(--brand-teal) !important;
}

/* ---- Accents: links, focus, progress, etc. ------------------------------ */
.text-primary {
	color: var(--brand-ink) !important;
}
.bg-primary {
	background-color: var(--brand-ink) !important;
}
.form-control:focus,
.form-select:focus {
	border-color: var(--brand-teal);
	box-shadow: 0 0 0 0.2rem rgba(var(--brand-teal-rgb), 0.2);
}
.nav-tabs .nav-link.active {
	color: var(--brand-ink);
}

/* ---- Language tabs (settings pages) ------------------------------------- */
.language-tabs .nav-tabs {
	border-bottom: 1px solid #e3e6ec;
	gap: 2px;
	flex-wrap: wrap;
}
.language-tabs .nav-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.55rem 1rem;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	color: var(--brand-muted);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.language-tabs .nav-link:hover {
	color: var(--brand-ink);
	background-color: #f5f6f8;
	border-color: #e3e6ec #e3e6ec transparent;
}
.language-tabs .nav-link.active {
	color: var(--brand-ink);
	font-weight: 600;
	background-color: #fff;
	border-color: #e3e6ec #e3e6ec #fff;
}
.language-tabs__flag {
	font-size: 1.1em;
	line-height: 1;
}
.page-item.active .page-link {
	background-color: var(--brand-ink);
	border-color: var(--brand-ink);
}
.pagination {
	margin-bottom: 0;
	gap: 4px;
}
.pagination .page-link {
	cursor: pointer;
	color: var(--brand-ink) !important;
	background-color: #fff !important;
	border: 1px solid #e3e6ec !important;
	border-radius: 8px !important;
	padding: 5px 11px !important;
	font-size: 0.875rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.pagination .page-link:hover {
	color: var(--brand-ink-dark) !important;
	background-color: #f3f4f7 !important;
	border-color: #d3d8e0 !important;
}
.page-item.active .page-link {
	color: #fff !important;
	background-color: var(--brand-ink) !important;
	border-color: var(--brand-ink) !important;
}

/* ---- Sidebar / profile menu --------------------------------------------- */
.profile-userbuttons .btn,
.profile-usermenu {
	font-family: var(--brand-font);
}
.profile-usermenu ul li a {
	color: var(--brand-muted);
}
.profile-usermenu ul li a:hover {
	color: var(--brand-teal);
}
.profile-usermenu ul li.active a {
	color: var(--brand-ink);
	border-left-color: var(--brand-teal);
}

/* ---- Cards -------------------------------------------------------------- */
.card-header .card-title {
	color: var(--brand-ink);
}
.card-header .card-title .fa {
	color: var(--brand-teal);
	margin-right: 6px;
}

/* ---- Bonus balance amount (customer page) ------------------------------- */
.bonus-balance {
	font-size: 2rem;
	margin-bottom: 0.25rem;
}

/* ---- KPI / stat list (e.g. Medlemsomsætning) ---------------------------- */
.stat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.stat-row {
	padding: 14px 2px;
	border-bottom: 1px solid #eef0f4;
}
.stat-row:last-child {
	border-bottom: 0;
	padding-bottom: 2px;
}
.stat-main {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.stat-value {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--brand-ink);
	letter-spacing: -0.01em;
}
.stat-change {
	flex: 0 0 auto;
	font-size: 0.72rem;
	font-weight: 600;
	border-radius: 30px;
	padding: 0.3em 0.6em;
}
.stat-change.bg-light-muted {
	background-color: #eef0f4;
	color: var(--brand-muted);
}
.stat-label {
	margin-top: 3px;
	font-size: 0.8rem;
	font-weight: 400;
	color: #aab0bd;
}

/* ---- Toggle selectors (stores, groups, segments, etc.) ------------------ */
/* Explicit, premium variant used by the multi-select selector lists */
.store-toggle {
	border-radius: 8px !important;
	font-weight: 500;
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}
.store-toggle.btn-outline-secondary {
	--bs-btn-color: var(--brand-ink);
	--bs-btn-border-color: #d3d8e0;
	--bs-btn-hover-bg: #f5f6f8;
	--bs-btn-hover-border-color: #c2c8d2;
	--bs-btn-hover-color: var(--brand-ink);
}
.store-toggle .fa-check {
	font-size: 0.85em;
}

/* General crisp treatment for any similar full-width toggle button
   (catches segment/gender/tag toggles that aren't explicitly converted) */
.btn.btn-sm.w-100 {
	border-radius: 8px !important;
	margin-bottom: 0.35rem;
	font-weight: 500;
}
.btn-secondary.btn-sm.w-100 {
	--bs-btn-bg: #ffffff;
	--bs-btn-border-color: #d3d8e0;
	--bs-btn-color: var(--brand-ink);
	--bs-btn-hover-bg: #f5f6f8;
	--bs-btn-hover-border-color: #c2c8d2;
	--bs-btn-hover-color: var(--brand-ink);
}

/* ---- Step guide (Opsætnings guide) -------------------------------------- */
.stepguide-nav {
	border-right: 1px solid #eef0f4;
}
.brand-pills .brand-nav {
	margin-bottom: 2px;
}
.brand-pills .brand-nav > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--brand-muted) !important;
	background-color: transparent !important;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.brand-pills .brand-nav > a:hover,
.brand-pills .brand-nav.done > a:hover,
.brand-pills .brand-nav.done > a:focus {
	background-color: #f5f6f8 !important;
	color: var(--brand-ink) !important;
}
.brand-pills .brand-nav.done > a {
	color: #9aa0ad !important;
	background-color: transparent !important;
}
.brand-pills .brand-nav.active > a {
	background-color: rgba(var(--brand-ink-rgb), 0.06) !important;
	color: var(--brand-ink) !important;
	font-weight: 600;
}
.brand-pills .stepguide.fa-stack {
	width: 1.9em;
	height: 1.9em;
	line-height: 1.9em;
	flex: 0 0 auto;
	color: #ced3db;
}
.brand-pills .brand-nav.active .stepguide.fa-stack {
	color: var(--brand-ink);
}
.brand-pills .brand-nav.done .stepguide.fa-stack {
	color: var(--brand-teal);
}
.stepguide-content {
	padding: 4px 4px 4px 24px;
}
.stepguide-content h3 {
	margin-bottom: 14px;
}
.stepguide-content p {
	color: #5a6473;
	line-height: 1.65;
}
@media (max-width: 575.98px) {
	.stepguide-nav {
		border-right: 0;
		border-bottom: 1px solid #eef0f4;
		margin-bottom: 1rem;
		padding-bottom: 0.5rem;
	}
	.stepguide-content {
		padding-left: 4px;
	}
}

/* ---- Version changelog accents (match brand teal) ----------------------- */
.version-item::before {
	background: var(--brand-teal);
}
.versionModal-title .fa {
	color: var(--brand-teal);
}
.versionModal-title {
	color: var(--brand-ink);
}

/* ---- Message / notice boxes (.msg) -------------------------------------- */
/* Crisp, flat, brand-aligned. Class names kept so every .msg box across the
   system inherits the new look without markup changes. */
.msg {
	background: #f7f9fb;
	color: var(--brand-ink);
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.5;
	padding: 12px 16px;
	border: 1px solid #e6eaf0;
	border-left: 4px solid #ccd2db;
	border-radius: 8px;
	margin: 12px 0;
	box-shadow: none;
}
.msg small {
	font-weight: 400;
}
.msg-clear {
	background: #ffffff;
	border-color: #e6eaf0;
	border-left-color: #ccd2db;
}
.msg-info {
	background: #eaf7f8;
	border-color: #d2ecef;
	border-left-color: var(--brand-teal);
	color: #0c6a72;
}
.msg-success {
	background: #ecf7f0;
	border-color: #d4ecdd;
	border-left-color: #22a06b;
	color: #1c7a51;
}
.msg-warning {
	background: #fdf6e9;
	border-color: #f1e3c5;
	border-left-color: #e0a33a;
	color: #97681a;
}
.msg-danger {
	background: #fbebeb;
	border-color: #f3d2d2;
	border-left-color: #df5757;
	color: #a23232;
}
.msg-primary {
	background: #eeedf6;
	border-color: #dad7ed;
	border-left-color: var(--brand-ink);
	color: var(--brand-ink);
}
.msg-magick {
	background: #f6edfa;
	border-color: #ead4f1;
	border-left-color: #b04fd0;
	color: #8a2ca8;
}
/* Inline text colour helpers — align with the box accents */
.msg-info-text {
	color: var(--brand-teal);
}
.msg-success-text {
	color: #22a06b;
}
.msg-warning-text {
	color: #d0922f;
}
.msg-danger-text {
	color: #df5757;
}
.msg-primary-text {
	color: var(--brand-ink);
}
.msg-magick-text {
	color: #b04fd0;
}