/* FiF Mina sidor – alla färger via --fif-* (Elementors globala färger), se fif.css. */

.fif-ms {
	--fif-ms-field: var(--fif-white);
	--fif-ms-border: color-mix(in srgb, var(--fif-text) 30%, transparent);
	--fif-ms-focus: var(--fif-primary);
	font-family: var(--fif-body-font);
	color: var(--fif-text);
	max-width: 880px;
	margin: 0 auto;
}
.fif-ms *, .fif-ms *::before, .fif-ms *::after { box-sizing: border-box; }
.fif-ms .fif-heading { font-size: clamp(28px, 4vw, 40px); text-transform: none; }

/* ---------- Navigering ---------- */
.fif-ms__nav { margin: 0 0 32px; border-bottom: 1px solid var(--fif-line); }
.fif-ms__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.fif-ms__nav a {
	display: inline-block;
	padding: 10px 0;
	color: var(--fif-text);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.fif-ms__nav a:hover { color: var(--fif-primary); }
.fif-ms__nav a.is-active { color: var(--fif-primary); border-bottom-color: var(--fif-primary); }
.fif-ms__nav-logout { margin-left: auto; }
.fif-ms__nav-logout a { font-weight: 400; color: var(--fif-muted); }

/* ---------- Meddelanden ---------- */
.fif-ms__notice {
	padding: 14px 18px;
	border-radius: var(--fif-radius);
	margin: 0 0 24px;
	border-left: 4px solid var(--fif-gold);
	background: color-mix(in srgb, var(--fif-gold-light) 35%, var(--fif-white));
}
.fif-ms__notice--error { border-left-color: var(--fif-primary); background: color-mix(in srgb, var(--fif-primary) 8%, var(--fif-white)); }
.fif-ms__notice--info { border-left-color: var(--fif-muted); background: color-mix(in srgb, var(--fif-sand) 60%, var(--fif-white)); }
.fif-ms__notice p, .fif-ms__notice ul { margin: 0; }
.fif-ms__notice ul { padding-left: 1.2em; margin-top: 6px; }
.fif-ms__notice a { color: var(--fif-primary); font-weight: 600; }

/* ---------- Översikt ---------- */
.fif-ms__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.fif-ms__head .fif-heading { margin: 0; }
.fif-ms__section { margin-bottom: 32px; }
/* .fif-ms-prefix: annars vinner Elementors h3-typografi över rubriken (samma stil på h3 och summary). */
.fif-ms .fif-ms__h {
	font-family: var(--fif-heading-font);
	font-size: 24px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--fif-text);
	margin: 0 0 12px;
	line-height: 1.1;
}
.fif-ms__past summary { cursor: pointer; }
.fif-ms__empty { color: var(--fif-muted); }

.fif-ms__events { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fif-line); }
.fif-ms__event {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--fif-line);
}
.fif-ms__event-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.fif-ms .fif-ms__event-title { font-weight: 700; font-size: 1.1em; color: var(--fif-text); text-decoration: none; }
.fif-ms .fif-ms__event-title:hover { color: var(--fif-primary); text-decoration: underline; }
.fif-ms__event-when { color: var(--fif-muted); font-size: 0.95em; }
.fif-ms__more { white-space: nowrap; }
.fif-ms__event-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fif-ms__event-actions { display: flex; gap: 8px; }
.fif-pill--draft { background: var(--fif-gold-light); color: var(--fif-text); }
.fif-pill--role { background: color-mix(in srgb, var(--fif-muted) 12%, var(--fif-white)); color: var(--fif-muted); }

/* ---------- Knappar och länkar ---------- */
.fif-ms .fif-ms__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fif-body-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	padding: 7px 18px;
	border-radius: 30px;
	border: 2px solid var(--fif-primary);
	background: var(--fif-white);
	color: var(--fif-primary);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.fif-ms .fif-ms__btn:hover,
.fif-ms .fif-ms__btn:focus-visible { background: var(--fif-primary); color: var(--fif-white); }
.fif-ms .fif-ms__btn--ghost { border-color: var(--fif-ms-border); color: var(--fif-text); }
.fif-ms .fif-ms__btn--ghost:hover,
.fif-ms .fif-ms__btn--ghost:focus-visible { background: var(--fif-sand); color: var(--fif-text); border-color: var(--fif-sand); }
.fif-ms .fif-ms__btn--danger { border-color: var(--fif-primary); color: var(--fif-primary); background: transparent; }
.fif-ms button.fif-button { border: 0; cursor: pointer; }
.fif-ms .fif-ms__link { color: var(--fif-primary); font-weight: 600; }

/* ---------- Formulär ---------- */
.fif-ms__form { margin: 0; }
.fif-ms__box {
	border: 1px solid var(--fif-line);
	border-radius: var(--fif-radius);
	padding: 20px 24px 8px;
	margin: 0 0 24px;
	background: var(--fif-white);
	min-width: 0;
}
.fif-ms__box legend {
	font-family: var(--fif-heading-font);
	font-size: 22px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--fif-primary);
	padding: 0 8px;
	margin-left: -8px;
	line-height: 1;
}
.fif-ms__field { margin: 0 0 18px; }
.fif-ms__field > label,
.fif-ms__label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}
.fif-ms__sub { display: block; font-size: 0.9em; color: var(--fif-muted); margin-bottom: 4px; }
.fif-ms__req { color: var(--fif-primary); }
.fif-ms__help { font-size: 0.9em; color: var(--fif-muted); margin: 6px 0 0; }
.fif-ms__box > .fif-ms__help { margin: 0 0 16px; }

.fif-ms input[type=text],
.fif-ms input[type=email],
.fif-ms input[type=url],
.fif-ms input[type=number],
.fif-ms input[type=password],
.fif-ms input[type=date],
.fif-ms input[type=time],
.fif-ms select,
.fif-ms textarea {
	width: 100%;
	font-family: var(--fif-body-font);
	font-size: 16px;
	line-height: 1.4;
	color: var(--fif-text);
	background: var(--fif-ms-field);
	border: 1px solid var(--fif-ms-border);
	border-radius: 6px;
	padding: 9px 12px;
	min-height: 44px;
	box-shadow: none;
}
.fif-ms textarea { min-height: 0; resize: vertical; }
.fif-ms select[multiple] { min-height: 120px; }
.fif-ms input:focus,
.fif-ms select:focus,
.fif-ms textarea:focus { outline: 2px solid var(--fif-ms-focus); outline-offset: 1px; border-color: var(--fif-ms-focus); }
.fif-ms input[type=file] { font-size: 15px; max-width: 100%; }
.fif-ms input[type=checkbox],
.fif-ms input[type=radio] { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px; accent-color: var(--fif-primary); }

.fif-ms__field--check label { font-weight: 400; display: inline-flex; align-items: center; cursor: pointer; }
.fif-ms__choices { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 16px; }
.fif-ms__choices label { display: inline-flex; align-items: center; cursor: pointer; font-weight: 400; }
.fif-ms__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.fif-ms__row2 > label { display: block; }

.fif-ms__actions,
.fif-ms__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 8px 0 24px; }
.fif-ms__delete { margin: 0 0 32px; padding-top: 16px; border-top: 1px solid var(--fif-line); }

/* Editor (TinyMCE). Temat/Elementor stylar alla <button> – nollställ i verktygsfältet.
   Ikonerna använder TinyMCE:s eget ikontypsnitt, så font-family får inte skrivas över. */
.fif-ms .wp-editor-wrap { border: 1px solid var(--fif-ms-border); border-radius: 6px; overflow: hidden; }
.fif-ms .mce-panel { background: var(--fif-white); }
.fif-ms .mce-toolbar-grp { background: color-mix(in srgb, var(--fif-sand) 45%, var(--fif-white)); border-bottom: 1px solid var(--fif-line); }
.fif-ms .mce-btn { background: transparent; border: 1px solid transparent; border-radius: 4px; box-shadow: none; }
.fif-ms .mce-btn:hover,
.fif-ms .mce-btn.mce-active { background: var(--fif-white); border-color: var(--fif-ms-border); }
.fif-ms .mce-btn button,
.fif-ms .mce-btn button:hover,
.fif-ms .mce-btn button:focus {
	background: transparent !important;
	border: 0 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	color: var(--fif-text) !important;
	padding: 4px 6px !important;
	margin: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	line-height: 20px !important;
	font-size: 14px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.fif-ms .mce-btn .mce-ico { color: var(--fif-text); }
.fif-ms .mce-btn.mce-disabled .mce-ico { opacity: 0.4; }
.fif-ms .mce-listbox button { font-family: var(--fif-body-font) !important; }
.fif-ms .mce-listbox .mce-txt { color: var(--fif-text); font-family: var(--fif-body-font); }
.fif-ms .mce-statusbar { display: none; }

/* Meddelanden vid filval */
.fif-ms__file-msg p { margin: 6px 0 0; font-size: 0.9em; }
.fif-ms__file-error { color: var(--fif-primary); font-weight: 600; }
.fif-ms__file-warn { color: var(--fif-muted); font-weight: 600; }
.fif-ms__file-ok { color: var(--fif-muted); }

/* Bilder */
.fif-ms__img-current { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 10px; }
.fif-ms__img-current img,
.fif-ms__img-preview img {
	display: block;
	max-width: 240px;
	max-height: 240px;
	width: auto;
	height: auto;
	border-radius: 6px;
	background: var(--fif-sand);
}
.fif-ms__img-current.is-poster img,
.fif-ms__img-preview.is-poster img { max-height: 300px; }
.fif-ms__img-preview { margin-top: 10px; }
.fif-ms__img-remove { font-weight: 400; display: inline-flex; align-items: center; cursor: pointer; }
.fif-ms__gallery { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.fif-ms__gallery li { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; }
.fif-ms__gallery img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; display: block; }
.fif-ms__gallery label { display: inline-flex; align-items: center; cursor: pointer; }

/* Datumrader */
.fif-ms__dates-head,
.fif-ms__date {
	display: grid;
	grid-template-columns: minmax(140px, 1.3fr) minmax(92px, 0.8fr) minmax(92px, 0.8fr) minmax(120px, 1fr) minmax(120px, 2fr) 40px;
	gap: 8px;
	align-items: center;
}
.fif-ms__dates-head { font-size: 0.85em; font-weight: 600; color: var(--fif-muted); margin-bottom: 6px; }
.fif-ms__date { margin-bottom: 8px; }
.fif-ms__date label { display: block; margin: 0; }
.fif-ms__date.is-past { opacity: 0.6; }
.fif-ms__dates.is-heldag .fif-ms__t { visibility: hidden; }
.fif-ms .fif-ms__remove {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--fif-ms-border);
	background: var(--fif-white);
	color: var(--fif-text);
	font-size: 22px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}
.fif-ms .fif-ms__remove:hover,
.fif-ms .fif-ms__remove:focus-visible { background: var(--fif-primary); color: var(--fif-white); border-color: var(--fif-primary); }
.fif-ms__dates-actions { margin: 4px 0 16px; }
.fif-ms__repeat { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--fif-radius); background: color-mix(in srgb, var(--fif-sand) 50%, var(--fif-white)); }
.fif-ms__repeat summary { cursor: pointer; font-weight: 600; }
.fif-ms__repeat-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0 16px; align-items: end; margin-top: 12px; }

/* Arrangörer */
.fif-ms__people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 0 0 18px; }
.fif-ms__people label { display: inline-flex; align-items: center; cursor: pointer; }
.fif-ms__people label.is-self { font-weight: 600; cursor: default; }

/* Skärmläsartext */
.fif-ms__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Inloggning */
.fif-ms__login { max-width: 440px; margin: 0 auto; }

.fif-ms [hidden] { display: none !important; }

@media (max-width: 700px) {
	.fif-ms__box { padding: 16px 16px 4px; }
	.fif-ms__row2,
	.fif-ms__repeat-fields { grid-template-columns: 1fr; }
	.fif-ms__dates-head { display: none; }
	.fif-ms__date {
		grid-template-columns: 1fr 1fr 40px;
		padding: 12px 0;
		border-bottom: 1px solid var(--fif-line);
	}
	.fif-ms__date > label:nth-child(1) { grid-column: 1 / 3; }
	.fif-ms__date > label:nth-child(4),
	.fif-ms__date > label:nth-child(5) { grid-column: 1 / -1; }
	.fif-ms__date > .fif-ms__remove { grid-column: 3; grid-row: 1; }
	.fif-ms__date .fif-ms__sr { position: static !important; width: auto; height: auto; margin: 0 0 2px; clip: auto; overflow: visible; font-size: 0.85em; color: var(--fif-muted); }
	.fif-ms__dates.is-heldag .fif-ms__t { display: none; }
	.fif-ms__nav-logout { margin-left: 0; }
}