/* =====================================
   Här finns CSS som påverkar panelen/dashboard. 
   ===================================== */

/* --- 1. Meny i headern --- */
/* Styling för aktiv länk */
.custom-centered-menu .et-menu-nav li.current-menu-item > a {
    border-bottom: 2px solid #B45309; 
    padding-bottom: 0px;
    display: inline-block;
    transform: translateY(-2px); 
    transition: all 0.3s ease;
}

/* Styling och positionering för logga ut-knapp */
@media (min-width: 981px) {
	.logout-button {
    position: absolute !important;
    right: 0 !important;
	top: 50% !important;
	margin-top: 0 !important;
    transform: translateY(-50%) !important;
}

.logout-button a {
    background-color: #B45309 !important;
    color: #ffffff !important;
    padding: 8px 20px !important;
    border-radius: 5px !important;
    transition: all 0.2s ease !important;
    }
    
.logout-button a:hover {
    background-color: #e66a00 !important;
    transform: translateY(-1px) !important;
    }
}

@media (max-width: 981px) {
	.logout-button {
		border-top: 1px solid #001e3d96;
		margin-top: 20px;
	}
}

/* --- 2. Formulär read only + knapp --- */
/* 1. Måltavla: Alla formulär med din klass ska låsas initialt */
.ff-editable-mode input, 
.ff-editable-mode textarea, 
.ff-editable-mode select {
    background-color: #f4f4f4 !important;
    pointer-events: none !important;
    border-color: #ddd !important;
    cursor: not-allowed;
}

/* 2. Dölj submit-knappen i dessa formulär */
.ff-editable-mode .ff_submit_btn_wrapper {
    display: none !important;
}

/* 3. Lås upp allt när JavaScript lägger till klassen 'is-editing' */
.ff-editable-mode.is-editing input, 
.ff-editable-mode.is-editing textarea, 
.ff-editable-mode.is-editing select {
    background-color: #fff !important;
    pointer-events: auto !important;
    border-color: #999 !important;
    cursor: auto;
}

/* 4. Visa submit-knappen vid redigering */
.ff-editable-mode.is-editing .ff_submit_btn_wrapper {
    display: block !important;
}

/* --- 3. Formulär: ta bort fältet för datum --- */
/* Döljer input-fältet så att endast den inlinade kalendern syns */
.ff-el-form-control.ff-el-datepicker.form-control.input {
    display: none !important;
}