/****************************************************************************/
/* FIXES - Highest Priority CSS File                                       */
/* This file contains all custom fixes and overrides                       */
/* It loads last to ensure highest priority among custom CSS files         */
/****************************************************************************/

/* NS: Force navbar links to be black */
.navbar-light .navbar-nav .nav-link,
.navbar-collapse .nav-link,
.navbar-collapse li > a,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-collapse li > a:hover,
.navbar-collapse li > a:focus {
    color: #000000 !important;
}

/* NS: Add 25px left margin only to "Bokade tider" navigation item */
.navbar-nav .nav-item:has(a[aria-label="Bokade tider"]),
.navbar-nav .nav-item:has(a[id*="Bokade"]),
.navbar-nav .nav-item:has(a[id*="bokade"]),
.navbar-nav .nav-item:has(a[id*="Bokade-tider"]),
.navbar-nav .nav-item:has(a[id*="bokade-tider"]) {
    margin-left: 25px !important;
}

/* NS: Add 20px left margin to "Startsida" navigation item */
.navbar-nav .nav-item:has(a[aria-label="Startsida"]),
.navbar-nav .nav-item:has(a[id*="Startsida"]),
.navbar-nav .nav-item:has(a[id*="startsida"]) {
    margin-left: 20px !important;
}

/*TEST*/
/* NS: Set page background to light beige and remove top spacing */
body {
    background-color: #F8F8F0 !important; /* Light beige/off-white page background */
    margin-top: 0 !important; /* Remove top margin */
    padding-top: 0 !important; /* Remove top padding */
}

/* NS: Ensure html element has no top spacing */
html {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-color: #F8F8F0 !important; /* Light beige/off-white page background */
}

/* NS: General container alignment and padding */
.container {
    margin-right: auto !important;
    margin-left: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important; /* Ensure padding is included in width calculation */
}

/* NS: Change header background color to beige for logo container */
/* Target the top header container with logo - align with navbar inner container */
/* Override Bootstrap py-2 class which adds vertical padding */
/* Use higher specificity to ensure beige background */
body .container.py-2.header-logo-container,
body div.container.py-2.header-logo-container,
body .container.py-2.px-5.header-logo-container,
body div.container.py-2.px-5.header-logo-container,
.header-logo-container,
.container.py-2.header-logo-container,
div.container.py-2.header-logo-container {
    background-color: #F8F8F0 !important; /* Light beige background for logo container */
    max-width: 1080px !important; /* Match navbar inner container width */
    margin-left: auto !important; /* Center to match navbar inner container */
    margin-top: 0 !important; /* Remove top margin */
    margin-right: auto !important; /* Center to match navbar inner container */
    margin-bottom: 0 !important; /* Remove bottom margin */
    width: 100% !important; /* NS Changed from auto to 100% for proper alignment */
    padding-left: 15px !important; /* Match navbar inner container left padding */
    padding-right: 15px !important; /* Match navbar inner container right padding */
    padding-top: 10px !important; /* Add some vertical padding for logo container */
    padding-bottom: 10px !important; /* Add some vertical padding for logo container */
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important; /* Vertically center content */
}

/* NS: Ensure header and navbar inner container have identical alignment */
.container.py-2,
.container.main-navbar {
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    width: 100% !important; /* NS Changed from auto to 100% for proper alignment */
    box-sizing: border-box !important;
    line-height: 1.4 !important; /* Consistent line height */
    height: auto !important; /* Allow height to adjust based on content */
}

/* NS: Ensure any wrapper around header has no spacing */
/* But exclude header logo container from beige background */
body > div:first-child,
body > form > div:first-child,
body > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* NS: Ensure header logo container and its parent wrappers have beige background */
/* This must come after the general rule to match page background */
.header-logo-container,
.container.py-2.header-logo-container,
div.container.py-2.header-logo-container,
body > div:first-child .header-logo-container,
body > form > div:first-child .header-logo-container {
    background-color: #F8F8F0 !important; /* Light beige background for header area */
}

/* NS: Ensure parent wrapper has beige background if it contains header logo container */
/* Use :has() selector for modern browsers, with fallback */
body > div:first-child:has(.header-logo-container),
body > form > div:first-child:has(.header-logo-container) {
    background-color: #F8F8F0 !important; /* Light beige background for header wrapper */
}

/* NS: Additional fallback - target any div containing header-logo-container */
div:has(.header-logo-container) {
    background-color: #F8F8F0 !important; /* Light beige background for any parent containing header */
}

/* NS: Full-width beige background wrapper for header area */
.header-wrapper-white {
    background-color: #F8F8F0 !important; /* Light beige background for entire header area */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* NS: Ensure navbar section has white background */
#navbar,
#navbar.navbar-collapse {
    background-color: #FFFFFF !important; /* White background for navbar */
    position: relative !important;
    z-index: 1050 !important; /* High z-index to appear above page content */
}

/* NS: Override Bootstrap py-2 utility class specifically for header container */
/* This ensures the header starts at the very top with no padding */
.container.py-2,
div.container.py-2 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Target the navbar container - make it white, full width background */
/*#navbar,
#navbar.navbar-collapse,
#navbar.navbar-collapse.sub-menu {
    background-color: #FFFFFF !important; /* White navbar background
    width: 100% !important; /* Full width for background
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1050 !important; /* High z-index to appear above page content
}*/

/* NS: Prevent scrollbar on large screens when dropdowns open *//*
@media (min-width: 992px) {
    #navbar,
    #navbar.navbar-collapse,
    #navbar.navbar-collapse.sub-menu {
        overflow: visible !important;
        max-height: none !important;
    }
    
    .navbar,
    .navbar.navbar-expand-lg {
        overflow: visible !important;
    }
    
    /* Ensure dropdown menus can extend beyond navbar without causing scrollbar
    .navbar-nav .dropdown-menu {
        position: absolute !important;
        z-index: 1060 !important; /* Higher z-index than navbar to appear on top    
    }
}*/

/* Target the nav element inside navbar - make it white and full width */
.navbar,
.navbar.navbar-expand-lg,
.navbar.navbar-light {
    background-color: #FFFFFF !important; /* White navbar background */
    width: 100% !important; /* Full width for background */
    max-width: 100% !important;
    position: relative !important;
    z-index: 1050 !important; /* High z-index to appear above page content */
}

/* NS: Align navbar inner container - ensure consistent padding and centering */
.container.main-navbar {
    padding-left: 15px !important; /* Match header left padding */
    padding-right: 15px !important; /* Match header right padding */
    max-width: 1080px !important; /* Match header and content width */
    margin-left: auto !important; /* Center the navbar */
    margin-right: auto !important; /* Center the navbar */
    width: 100% !important; /* NS Changed from auto to 100% for proper alignment */
    box-sizing: border-box !important;
    transform: translateX(-12px) !important; /* Move navbar 10px to the left */
    position: relative !important;
    z-index: 1050 !important; /* High z-index to appear above page content */
}

/* NS: For section-landing with page_section - remove margin-left and align inner container with navbar */
section.page_section.section-landing,
section.section-landing.page_section {
    margin-left: 0 !important; /* Remove inline margin-left: 60px */
}

/* NS: Align inner container in section-landing with navbar - match navbar left padding */
/* Override theme.css .section-landing .container padding: 0px 40px */
section.page_section.section-landing .container,
section.section-landing.page_section .container,
.section-landing.page_section .container,
section.page_section.section-landing > .container,
section.section-landing.page_section > .container {
    padding-left: 38px !important; /* Match navbar left padding - override theme.css */
    padding-right: 20px !important; /* Keep some right padding */
    max-width: 1080px !important; /* Match navbar max-width */
    margin-left: auto !important; /* Center the container */
    margin-right: auto !important; /* Center the container */
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
section.page_section.section-landing .container,
section.section-landing.page_section .container,
.section-landing.page_section .container,
section.page_section.section-landing > .container,
section.section-landing.page_section > .container {
    padding-left: 38px !important; /* Match navbar left padding - override theme.css */
    padding-right: 20px !important; /* Keep some right padding */
    max-width: 1080px !important; /* Match navbar max-width */
    margin-left: auto !important; /* Center the container */
    margin-right: auto !important; /* Center the container */
    box-sizing: border-box !important;
}
}
/* NS: Additional fix for section-landing alignment after Bootstrap upgrade */
section.page_section.section-landing,
section.section-landing.page_section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

section.page_section.section-landing .container,
section.section-landing.page_section .container,
section.page_section.section-landing > .container,
section.section-landing.page_section > .container {
    padding-left: 38px !important;
    padding-right: 20px !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    width: 100% !important; /* Ensure full width within max-width constraint */
}

/* NS: Remove left padding for Contact Form page (Mina användare - Uppdatera befintlig användare) */
section.page_section.section-landing:has(form#employeeForm) .container,
section.section-landing.page_section:has(form#employeeForm) .container,
section.page_section.section-landing:has(form#employeeForm) > .container,
section.section-landing.page_section:has(form#employeeForm) > .container {
    padding-left: 30px !important;
}

/* NS: Add padding-left to "Mina användare" heading only on Contact Form page */
section.page_section.section-landing:has(form#employeeForm) .page-header h1,
section.section-landing.page_section:has(form#employeeForm) .page-header h1 {
    padding-left: 15px !important;
}

/* NS: Left-align labels and inputs on Contact Form page (Mina användare) */
section.page_section.section-landing:has(form#employeeForm) .form-label,
section.section-landing.page_section:has(form#employeeForm) .form-label,
section.page_section.section-landing:has(form#employeeForm) .row > div > .form-label,
section.section-landing.page_section:has(form#employeeForm) .row > div > .form-label {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

/* NS: Ensure consistent spacing for labels inside divs (Land and Roller) - remove extra spacing */
section.page_section.section-landing:has(form#employeeForm) .row > div,
section.section-landing.page_section:has(form#employeeForm) .row > div {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* NS: Add spacing only for Roller form group to match spacing above Land label */
section.page_section.section-landing:has(form#employeeForm) .row:has(select[name="role"]),
section.section-landing.page_section:has(form#employeeForm) .row:has(select[name="role"]) {
    margin-top: 20px !important;
}

section.page_section.section-landing:has(form#employeeForm) .form-control,
section.section-landing.page_section:has(form#employeeForm) .form-control,
section.page_section.section-landing:has(form#employeeForm) select.form-select-lg,
section.section-landing.page_section:has(form#employeeForm) select.form-select-lg {
    text-align: left !important;
    padding-left: 9px !important;
    margin-left: -2px !important;
    color: #555 !important;
    width: 85% !important;
    max-width: 85% !important;
}

/* NS: Make Land and Roller selects smaller (30% width) with smaller text */
section.page_section.section-landing:has(form#employeeForm) select[name="country"],
section.section-landing.page_section:has(form#employeeForm) select[name="country"],
section.page_section.section-landing:has(form#employeeForm) select#countryid,
section.section-landing.page_section:has(form#employeeForm) select#countryid,
section.page_section.section-landing:has(form#employeeForm) select[name="role"],
section.section-landing.page_section:has(form#employeeForm) select[name="role"] {
    width: 30% !important;
    max-width: 30% !important;
    font-size: 15px !important;
}

/* NS: Increase width of "Information om roller" section */
section.page_section.section-landing:has(form#employeeForm) .row > .col-lg-4:last-child,
section.section-landing.page_section:has(form#employeeForm) .row > .col-lg-4:last-child {
    flex: 0 0 45% !important;
    max-width: 45% !important;
    width: 35% !important;
    margin-left: -15px !important;
    padding-left: 0 !important;
}

/* NS: Adjust form column width to accommodate larger information section */
section.page_section.section-landing:has(form#employeeForm) .row > .col-lg-8:first-child,
section.section-landing.page_section:has(form#employeeForm) .row > .col-lg-8:first-child {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    width: 55% !important;
}

/* NS: Responsive design for Contact Form page (Mina användare) */
/* Tablet and below (max-width: 991px) */
@media (max-width: 991.98px) {
    /* Stack columns vertically on tablets and mobile */
    section.page_section.section-landing:has(form#employeeForm) .row > .col-lg-8:first-child,
    section.section-landing.page_section:has(form#employeeForm) .row > .col-lg-8:first-child,
    section.page_section.section-landing:has(form#employeeForm) .row > .col-lg-4:last-child,
    section.section-landing.page_section:has(form#employeeForm) .row > .col-lg-4:last-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Make inputs full width on smaller screens */
    section.page_section.section-landing:has(form#employeeForm) .form-control,
    section.section-landing.page_section:has(form#employeeForm) .form-control,
    section.page_section.section-landing:has(form#employeeForm) select.form-select-lg,
    section.section-landing.page_section:has(form#employeeForm) select.form-select-lg {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Make Land and Roller selects wider on tablets */
    section.page_section.section-landing:has(form#employeeForm) select[name="country"],
    section.section-landing.page_section:has(form#employeeForm) select[name="country"],
    section.page_section.section-landing:has(form#employeeForm) select#countryid,
    section.section-landing.page_section:has(form#employeeForm) select#countryid,
    section.page_section.section-landing:has(form#employeeForm) select[name="role"],
    section.section-landing.page_section:has(form#employeeForm) select[name="role"] {
        width: 50% !important;
        max-width: 50% !important;
    }
    
    /* Add spacing between form and information sections */
    section.page_section.section-landing:has(form#employeeForm) .row > .col-lg-4:last-child,
    section.section-landing.page_section:has(form#employeeForm) .row > .col-lg-4:last-child {
        margin-top: 30px !important;
    }
}

/* Mobile devices (max-width: 767px) */
@media (max-width: 767.98px) {
    /* Make Land and Roller selects full width on mobile */
    section.page_section.section-landing:has(form#employeeForm) select[name="country"],
    section.section-landing.page_section:has(form#employeeForm) select[name="country"],
    section.page_section.section-landing:has(form#employeeForm) select#countryid,
    section.section-landing.page_section:has(form#employeeForm) select#countryid,
    section.page_section.section-landing:has(form#employeeForm) select[name="role"],
    section.section-landing.page_section:has(form#employeeForm) select[name="role"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Adjust container padding on mobile */
    section.page_section.section-landing:has(form#employeeForm) .container,
    section.section-landing.page_section:has(form#employeeForm) .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Adjust heading padding on mobile */
    section.page_section.section-landing:has(form#employeeForm) .page-header h1,
    section.section-landing.page_section:has(form#employeeForm) .page-header h1 {
        padding-left: 0 !important;
    }
}

/* Large screens (min-width: 992px) - keep desktop layout */
@media (min-width: 992px) {
    /* Ensure proper spacing on large screens */
    section.page_section.section-landing:has(form#employeeForm) .row > .col-lg-4:last-child,
    section.section-landing.page_section:has(form#employeeForm) .row > .col-lg-4:last-child {
        padding-left: 20px !important;
    }
}

/* NS: Login page content - left-align with navbar padding */
/* Target SignIn/ExternalLogin page specifically to align with navbar */
/* Use attribute selector to target pages with SignIn/ExternalLogin in URL */
body:has([action*="SignIn"]) > .container:not(.main-navbar):not(.py-2),
body:has([action*="signin"]) > .container:not(.main-navbar):not(.py-2),
body:has([action*="ExternalLogin"]) > .container:not(.main-navbar):not(.py-2),
body:has([action*="externallogin"]) > .container:not(.main-navbar):not(.py-2),
body:has(form[action*="SignIn"]) > .container:not(.main-navbar):not(.py-2),
body:has(form[action*="signin"]) > .container:not(.main-navbar):not(.py-2),
body:has(form[action*="ExternalLogin"]) > .container:not(.main-navbar):not(.py-2),
body:has(form[action*="externallogin"]) > .container:not(.main-navbar):not(.py-2),
form[action*="SignIn"] ~ .container:not(.main-navbar),
form[action*="signin"] ~ .container:not(.main-navbar),
form[action*="ExternalLogin"] ~ .container:not(.main-navbar),
form[action*="externallogin"] ~ .container:not(.main-navbar),
body > form[action*="SignIn"] > .container:not(.main-navbar),
body > form[action*="signin"] > .container:not(.main-navbar),
body > form[action*="ExternalLogin"] > .container:not(.main-navbar),
body > form[action*="externallogin"] > .container:not(.main-navbar),
body > form[action*="SignIn"] ~ .container:not(.main-navbar):not(.py-2),
body > form[action*="signin"] ~ .container:not(.main-navbar):not(.py-2),
body > form[action*="ExternalLogin"] ~ .container:not(.main-navbar):not(.py-2),
body > form[action*="externallogin"] ~ .container:not(.main-navbar):not(.py-2) {
    padding-left: 15px !important; /* Match navbar left padding */
    padding-right: 15px !important; /* Match navbar right padding */
    padding-top: 20px !important; /* Keep top padding */
    padding-bottom: 20px !important; /* Keep bottom padding */
    margin-left: auto !important; /* Match navbar alignment */
    margin-right: auto !important; /* Match navbar alignment */
    max-width: 1080px !important; /* Match navbar max-width */
}

/* Alternative: Target by page structure - if SignIn/ExternalLogin form exists, align containers */
body:has(form[action*="SignIn"]) .container:not(.main-navbar):not(.py-2):not(.header-logo-container),
body:has(form[action*="signin"]) .container:not(.main-navbar):not(.py-2):not(.header-logo-container),
body:has(form[action*="ExternalLogin"]) .container:not(.main-navbar):not(.py-2):not(.header-logo-container),
body:has(form[action*="externallogin"]) .container:not(.main-navbar):not(.py-2):not(.header-logo-container) {
    padding-left: 15px !important; /* Match navbar left padding */
    padding-right: 15px !important; /* Match navbar right padding */
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1080px !important;
}

/* Direct targeting for login page containers - more specific */
form[action*="ExternalLogin"] ~ .container:not(.main-navbar):not(.py-2),
form[action*="externallogin"] ~ .container:not(.main-navbar):not(.py-2),
body > form[action*="ExternalLogin"] ~ .container:not(.main-navbar):not(.py-2),
body > form[action*="externallogin"] ~ .container:not(.main-navbar):not(.py-2) {
    padding-left: 15px !important; /* Match navbar left padding */
    padding-right: 15px !important; /* Match navbar right padding */
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1080px !important;
}

/* NS: Ensure page_section respects container constraints */
.page_section .container,
body > .container > .page_section .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important; /* Don't exceed parent container */
    box-sizing: border-box !important;
}

/* NS: Override container background for knowledge articles - white background */
body > .container:not(.main-navbar):not(.py-2),
body > form > .container:not(.main-navbar) {
    background-color: #FFFFFF !important; /* Pure white background for content */
}

/* NS: Ensure page_section stays within container bounds */
.container > .page_section,
body > .container > .page_section,
body > form > .container > .page_section {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important; /* Stay within container */
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* NS: Ensure row elements inside page_section respect container padding */
.container > .page_section > .row,
body > .container > .page_section > .row,
body > form > .container > .page_section > .row {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    section.container[data-converted-from="page_section"] {
        padding-left: 0px !important;
    }
}
/* NS: Ensure page_section containers have proper padding */
.page_section .container {
    padding-left: 15px !important;
    padding-right: 15px !important; /* Match left padding */
    /*padding-bottom: 80px !important;*/
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* NS: Override Knowledge Article CSS - Must be at end of file for cascade */
/* ONLY apply to containers converted from page_section - don't affect existing div.container pages */
/* EXCLUDE section-landing - these pages have their own layout */
section.container[data-converted-from="page_section"]:not(.section-landing),
body > section.container[data-converted-from="page_section"]:not(.main-navbar):not(.py-2):not(.section-landing),
body > form > section.container[data-converted-from="page_section"]:not(.main-navbar):not(.section-landing) {
    width: 100% !important; /* Changed from auto to 100% for proper alignment */
    max-width: 1080px !important;
    margin-left: auto !important; /* Center the content */
    margin-right: auto !important; /* Center the content */
    padding-top: 20px !important; /* Top padding */
    padding-right: 20px !important; /* Right padding */
    padding-bottom: 20px !important; /* Bottom padding */
    /* padding-left: 15px !important; Left padding - match navbar alignment */
    box-sizing: border-box !important; /* Include padding in width calculation */
}

/* NS: Override container width for direct body containers - align with navbar */
body > .container:not(.main-navbar):not(.py-2),
body > form > .container:not(.main-navbar),
body .page-heading > .container {
    width: 100% !important; /* Changed from auto to 100% for proper alignment */
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-right: 10px !important;
    padding-top: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
    /* padding-left: 15px !important; */
    box-sizing: border-box !important;
    background-color: transparent !important;
}

/* NS: Ensure all content inside containers respects max-width */
body > .container:not(.main-navbar):not(.py-2) > *,
body > form > .container:not(.main-navbar) > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure consistent container background - white for content */
body > .container:not(.main-navbar):not(.py-2) {
    background-color: #FFFFFF !important; /* Pure white background for content */
}

/* NS: Header logo and branding text styling */
.header-logo-link {
    display: flex !important;
    align-items: center !important; /* Vertically center logo and text */
    text-decoration: none !important;
    gap: 15px !important; /* Space between logo and text */
    margin-left: 15px !important; /* Move logo 5px to the right */

}

.header-branding-text {
    display: flex !important;
    flex-direction: column !important; /* Stack text vertically */
    justify-content: center !important; /* Vertically center text */
    line-height: 1.2 !important;
}

.header-org-name {
    color: #424242 !important; /* Darker grey for "Hushållningssällskapet" */
    font-size: 16px !important;
    font-weight: 500 !important;
    display: block !important;
}

.header-portal-name {
    color: #666666 !important; /* Lighter grey for "Portalen" */
    font-size: 18px !important;
    font-weight: 400 !important;
    display: block !important;
}

/* NS: Hide any text that might be in the logo SVG to prevent duplicates */
#logoImage {
    display: block !important;
}

/* NS: Ensure logo container doesn't show duplicate text from SVG */
.header-logo-container img {
    flex-shrink: 0 !important;
}

/* NS: Fix homepage layout - target homepage welcome container specifically */
/* Override container flex display to allow Bootstrap grid to work properly */
/* Use higher specificity to override .section-landing .container from theme.css */
.section-landing .container.homepage-welcome-container,
.section-landing .homepage-welcome-container.container {
    display: block !important; /* Override flex to allow Bootstrap grid */
    flex-wrap: nowrap !important; /* Prevent wrapping */
    flex-direction: row !important; /* Ensure row direction */
    padding: 0px 40px !important; /* Keep original padding from theme.css */
}

/* NS: Ensure row works correctly with Bootstrap grid */
.section-landing .homepage-welcome-container > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* NS: Ensure Bootstrap columns work correctly - reset any flex properties */
.section-landing .homepage-welcome-container > .row > .col-lg-8,
.section-landing .homepage-welcome-container > .row > .col-lg-4 {
    position: relative !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* NS: Bootstrap column widths for medium screens and up - homepage only */
@media (min-width: 768px) {
    .section-landing .homepage-welcome-container > .row > .col-lg-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
        width: 66.666667% !important;
    }
    
    .section-landing .homepage-welcome-container > .row > .col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* NS: Ensure image-banner and its content stay within col-md-4 on homepage */
.section-landing .homepage-welcome-container .col-lg-4 {
    overflow: visible !important;
}

.section-landing .homepage-welcome-container .col-lg-4 .image-banner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.section-landing .homepage-welcome-container .col-lg-4 .image-banner .image-banner-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}


 /* NS: Login buttons - green color only */
/* Keep only the color styling */
button[name="provider"],
input[type="submit"][name="provider"],
button[type="submit"][name="provider"],
button[name="provider"].btn,
button[name="provider"].btn-primary,
button[name="provider"].btn-line,
button[name="provider"].btn.btn-primary,
button[name="provider"].btn.btn-primary.btn-line {
    background-color: #5A853C !important; /* Green color #5A853C */
    color: #ffffff !important; /* White text */
}

/* Hover state */
button[name="provider"]:hover,
button[name="provider"]:focus,
input[type="submit"][name="provider"]:hover,
input[type="submit"][name="provider"]:focus {
    background-color: #4a5e30 !important; /* Slightly darker green on hover */
    color: #ffffff !important;
}

button[name="provider"]:active,
input[type="submit"][name="provider"]:active {
    background-color: #3a4e20 !important; /* Even darker on active */
    color: #ffffff !important;
}

/* NS: Ensure heading "Logga in med konto" is always on its own line */
/* Target the heading content snippet output - both inside and outside forms */
form[action*="ExternalLogin"] h4,
form[action*="externallogin"] h4,
form[action*="SignIn"] h4,
form[action*="signin"] h4,
form[action*="ExternalLogin"] .h4,
form[action*="externallogin"] .h4,
form[action*="SignIn"] .h4,
form[action*="signin"] .h4,
/* Also target heading that appears before the form */
form[action*="ExternalLogin"] ~ h4,
form[action*="externallogin"] ~ h4,
form[action*="SignIn"] ~ h4,
form[action*="signin"] ~ h4,
form[action*="ExternalLogin"] ~ .h4,
form[action*="externallogin"] ~ .h4,
form[action*="SignIn"] ~ .h4,
form[action*="signin"] ~ .h4,
/* Target heading in containers that have the form */
.container:has(form[action*="ExternalLogin"]) h4,
.container:has(form[action*="externallogin"]) h4,
.container:has(form[action*="SignIn"]) h4,
.container:has(form[action*="signin"]) h4,
.container:has(form[action*="ExternalLogin"]) .h4,
.container:has(form[action*="externallogin"]) .h4,
.container:has(form[action*="SignIn"]) .h4,
.container:has(form[action*="signin"]) .h4 {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    clear: both !important;
    float: none !important;
}

/* NS: Ensure form with buttons appears on new line after heading */
form[action*="ExternalLogin"],
form[action*="externallogin"],
form[action*="SignIn"],
form[action*="signin"] {
    clear: both !important;
    display: block !important;
    width: 100% !important;
}

/* NS: Ensure heading "Logga in med konto" is always on its own line */
/* Target the heading content snippet output */
form[action*="ExternalLogin"] h4,
form[action*="externallogin"] h4,
form[action*="SignIn"] h4,
form[action*="signin"] h4,
form[action*="ExternalLogin"] .h4,
form[action*="externallogin"] .h4,
form[action*="SignIn"] .h4,
form[action*="signin"] .h4 {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin-top: 0 !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    clear: both !important;
    float: none !important;
}

/* NS: Ensure heading "Logga in med konto" is always on its own line */
/* Target the heading content snippet output */
form[action*="ExternalLogin"] h4,
form[action*="externallogin"] h4,
form[action*="SignIn"] h4,
form[action*="signin"] h4,
form[action*="ExternalLogin"] .h4,
form[action*="externallogin"] .h4,
form[action*="SignIn"] .h4,
form[action*="signin"] .h4 {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin-top: 0 !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    clear: both !important;
    float: none !important;
}

/* NS: Responsive button layout - stack on small screens */
@media (max-width: 767.98px) {
    form[action*="ExternalLogin"] > div:has(button[name="provider"]),
    form[action*="externallogin"] > div:has(button[name="provider"]),
    form[action*="SignIn"] > div:has(button[name="provider"]),
    form[action*="signin"] > div:has(button[name="provider"]) {
        flex-direction: column !important;
    }
    
    form[action*="ExternalLogin"] button[name="provider"],
    form[action*="externallogin"] button[name="provider"],
    form[action*="SignIn"] button[name="provider"],
    form[action*="signin"] button[name="provider"] {
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* NS: Left-align green buttons (btn-homepage) - document upload and comment buttons */
/* Override float-end to float-start (float: left) - must be very specific */
.float-end,
div.float-end,
span.float-end,
button.float-end,
a.float-end,
.float-end.btn,
.float-end.btn-homepage,
[class*="float-end"] {
    /* float: left !important; */
    clear: both !important;
    /* width: 100% !important; */
    margin-top: 0 !important;
}

div:has(.btn-homepage),
section:has(.btn-homepage),
.container:has(.btn-homepage),
.page_section:has(.btn-homepage),
.entity-timeline .timelineheader .buttoncontainer,
.entity-timeline .buttoncontainer {
    justify-content: flex-start !important;
}

/* NS: Responsive button layout - stack on small screens */
@media (max-width: 767.98px) {
    form[action*="ExternalLogin"] > div:has(button[name="provider"]),
    form[action*="externallogin"] > div:has(button[name="provider"]),
    form[action*="SignIn"] > div:has(button[name="provider"]),
    form[action*="signin"] > div:has(button[name="provider"]) {
        flex-direction: column !important;
    }
    
    form[action*="ExternalLogin"] button[name="provider"],
    form[action*="externallogin"] button[name="provider"],
    form[action*="SignIn"] button[name="provider"],
    form[action*="signin"] button[name="provider"] {
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }
}

.addnote,
.addnote.btn,
.addnote.btn-primary,
.buttoncontainer .addnote,
.buttoncontainer .btn,
.buttoncontainer .btn-primary {
    margin-left: 0 !important;
    margin-right: auto !important;
    float: left !important;
}

/* NS: Page-specific styling for "Skapa Ärende" (Create Case) page only */
/* Target pages with "create" or "create-case" in the URL */
body.page-create-case > .container:not(.main-navbar):not(.py-2),
body.page-create-case > form > .container:not(.main-navbar),
body.page-create-case .page-heading > .container {
    background-color: transparent !important; /* Transparent to show beige body background */
}

body.page-create-case > .container:not(.main-navbar):not(.py-2),
body.page-create-case > form > .container:not(.main-navbar) {
    background-color: transparent !important; /* Transparent to show beige body background */
}

/* NS: Add space between page body content and footer to prevent overlap */
/* The footer has a decorative border that extends upward, so we need extra space */
body > .container:not(.main-navbar):not(.py-2),
body > form > .container:not(.main-navbar),
section.container[data-converted-from="page_section"]:not(.section-landing),
body > section.container[data-converted-from="page_section"]:not(.main-navbar):not(.py-2):not(.section-landing),
body > form > section.container[data-converted-from="page_section"]:not(.main-navbar):not(.section-landing) {
    margin-bottom: 80px !important; /* Add space before footer to prevent overlap */
    padding-bottom: 20px !important; /* Keep existing bottom padding */
}

/* NS: Ensure main content sections also have space before footer */
/* .page_section .container {
    margin-bottom: 120px !important;
} */

/* NS: Add space for body content that comes before footer */
body > *:not(footer):not(script):not(style):last-of-type,
body > form > *:not(footer):not(script):not(style):last-of-type {
    margin-bottom: 1px !important;
}

/* NS: Ensure consistent button sizes on Företagsuppgifter and Mina Användare pages */
/* Target buttons in table rows with button-tile class - ensure "Visa" and "Redigera" are same size */
.button-tile a.btn.btn-homepage.btn-sm,
td.button-actions .button-tile a.btn.btn-homepage.btn-sm,
.table-fluid td.button-actions .button-tile a.btn.btn-homepage.btn-sm,
table td.button-actions .button-tile a.btn.btn-homepage.btn-sm,
.view-grid td.button-actions .button-tile a.btn.btn-homepage.btn-sm,
.dataTable_wrapper td.button-actions .button-tile a.btn.btn-homepage.btn-sm,
.section td.button-actions .button-tile a.btn.btn-homepage.btn-sm {
    /* Fixed dimensions - same size for both "Visa" and "Redigera" buttons */
    width: 120px !important; /* Fixed width so both buttons are exactly the same size */
    min-width: 120px !important; /* Ensure minimum width matches fixed width */
    height: 36px !important; /* Fixed height for consistent button size */
    padding: 8px 16px !important; /* Consistent padding for all buttons */
    margin: 5px 0 !important; /* Consistent vertical spacing between buttons */
    margin-top: 5px !important; /* Override any margin-top from base styles */
    margin-bottom: 5px !important; /* Override any margin-bottom from base styles */
    margin-left: 0 !important; /* Remove left margin - override button-tile a margin */
    margin-right: 0 !important; /* Remove right margin - override button-tile a margin */
    
    /* Typography */
    font-size: 0.875em !important; /* Consistent font size */
    font-weight: 600 !important; /* Consistent font weight */
    font-family: Tahoma, sans-serif !important; /* Consistent font family */
    line-height: 1.4 !important; /* Consistent line height */
    
    /* Display and alignment */
    display: inline-block !important;
    text-align: center !important;
    box-sizing: border-box !important;
    
    /* Colors and styling - ensure consistent green button style */
    background-color: #5A853C !important;
    color: #ffffff !important;
    border: 0 none !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: all .25s ease-in-out !important;
}

/* Hover, focus, and active states for consistent interaction */
.button-tile a.btn.btn-homepage.btn-sm:hover,
.button-tile a.btn.btn-homepage.btn-sm:focus,
.button-tile a.btn.btn-homepage.btn-sm:active,
td.button-actions .button-tile a.btn.btn-homepage.btn-sm:hover,
td.button-actions .button-tile a.btn.btn-homepage.btn-sm:focus,
td.button-actions .button-tile a.btn.btn-homepage.btn-sm:active,
.table-fluid td.button-actions .button-tile a.btn.btn-homepage.btn-sm:hover,
.table-fluid td.button-actions .button-tile a.btn.btn-homepage.btn-sm:focus,
.table-fluid td.button-actions .button-tile a.btn.btn-homepage.btn-sm:active,
table td.button-actions .button-tile a.btn.btn-homepage.btn-sm:hover,
table td.button-actions .button-tile a.btn.btn-homepage.btn-sm:focus,
table td.button-actions .button-tile a.btn.btn-homepage.btn-sm:active,
.view-grid td.button-actions .button-tile a.btn.btn-homepage.btn-sm:hover,
.view-grid td.button-actions .button-tile a.btn.btn-homepage.btn-sm:focus,
.view-grid td.button-actions .button-tile a.btn.btn-homepage.btn-sm:active,
.dataTable_wrapper td.button-actions .button-tile a.btn.btn-homepage.btn-sm:hover,
.dataTable_wrapper td.button-actions .button-tile a.btn.btn-homepage.btn-sm:focus,
.dataTable_wrapper td.button-actions .button-tile a.btn.btn-homepage.btn-sm:active,
.section td.button-actions .button-tile a.btn.btn-homepage.btn-sm:hover,
.section td.button-actions .button-tile a.btn.btn-homepage.btn-sm:focus,
.section td.button-actions .button-tile a.btn.btn-homepage.btn-sm:active {
    background-color: #4a5e30 !important; /* Consistent darker green on hover */
    color: #ffffff !important;
    text-decoration: none !important;
    width: 120px !important; /* Maintain fixed width on hover */
    height: 36px !important; /* Maintain fixed height on hover */
        align-content: center;
}

/* NS: Företagsdokument page - wider buttons only on this page */
/* Target buttons specifically in section-landing with view-grid (Företagsdokument page structure) */
.section-landing .view-grid td.button-actions .button-tile a.btn.btn-homepage.btn-sm,
.section-landing .dataTable_wrapper td.button-actions .button-tile a.btn.btn-homepage.btn-sm {
    width: 180px !important; /* Wider buttons for Företagsdokument page only */
    min-width: 180px !important;
    margin-left: 30px !important; /* Move button to the right */
}

/* Hover state for Företagsdokument page buttons */
.section-landing .view-grid td.button-actions .button-tile a.btn.btn-homepage.btn-sm:hover,
.section-landing .view-grid td.button-actions .button-tile a.btn.btn-homepage.btn-sm:focus,
.section-landing .view-grid td.button-actions .button-tile a.btn.btn-homepage.btn-sm:active,
.section-landing .dataTable_wrapper td.button-actions .button-tile a.btn.btn-homepage.btn-sm:hover,
.section-landing .dataTable_wrapper td.button-actions .button-tile a.btn.btn-homepage.btn-sm:focus,
.section-landing .dataTable_wrapper td.button-actions .button-tile a.btn.btn-homepage.btn-sm:active {
    width: 180px !important; /* Maintain wider width on hover for Företagsdokument page */
}

/* NS: Standardized pagination styling for Dataverse views/lists */
/* Target only pagination controls under tables (not other buttons) */
#table_pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 20px 0;
    margin-top: 0;
    padding: 0;
}

#table_pagination .pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Page number styling - base styles for all page numbers */
#table_pagination .page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    text-decoration: none;
    min-width: 32px;
    height: 32px;
    line-height: 1;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* Current page - green filled circle with white text */
#table_pagination .page-number.page-current {
    background-color: #5A853C;
    color: #ffffff;
    border-radius: 50%;
    font-weight: 500;
    cursor: default;
    pointer-events: none;
}

/* Non-current page numbers - plain text with hover */
#table_pagination .page-number:not(.page-current) {
    color: #333333;
    background: transparent;
}

#table_pagination .page-number:not(.page-current):hover {
    color: #5A853C;
    text-decoration: underline;
}

#table_pagination .page-number:not(.page-current):focus {
    color: #5A853C;
    outline: 2px solid #5A853C;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #table_pagination .pagination-container {
        gap: 10px;
    }
    
    #table_pagination .page-number {
        font-size: 14px;
        min-width: 28px;
        height: 28px;
    }
    
    #table_pagination .page-number.page-current {
        min-width: 28px;
        height: 28px;
    }
}

/* NS: Bootstrap Pagination - Clean styling with white boxes, proper alignment, equal spacing */
/* Right-align all pagination containers */
ul.pagination,
.pagination,
.dataTables_paginate,
.dataTables_wrapper .dataTables_paginate,
.dataTable_wrapper .dataTables_paginate {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Ensure pagination is close to table - remove any spacing and right-align */
.dataTables_wrapper .dataTables_paginate,
.dataTable_wrapper .dataTables_paginate,
.dataTables_wrapper ul.pagination,
.dataTable_wrapper ul.pagination {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

ul.pagination .page-item {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

ul.pagination .page-item .page-link,
ul.pagination .page-item a,
ul.pagination .page-item span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: transparent !important;
    background: transparent !important;
    color: #6c757d !important;
}

/* Active/Current page - green circle - override any blue colors */
ul.pagination .page-item.active .page-link,
ul.pagination .page-item.active a,
ul.pagination .page-item.active span,
.pagination .page-item.active .page-link,
.pagination .page-item.active a,
.pagination .page-item.active span,
.page-item.active .page-link,
.page-item.active a,
.page-item.active span {
    background-color: #5A853C !important;
    background: #5A853C !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
}

/* Force override any blue colors that might be applied */
/* Non-active page items - no background */
ul.pagination .page-item:not(.active),
.pagination .page-item:not(.active),
.page-item:not(.active) {
    background-color: transparent !important;
    background: transparent !important;
}

ul.pagination .page-item.active,
.pagination .page-item.active,
.page-item.active {
    background-color: transparent !important;
    background: transparent !important;
}

ul.pagination .page-item.active *,
.pagination .page-item.active *,
.page-item.active * {
    background-color: #5A853C !important;
    background: #5A853C !important;
}

/* Disabled items - no background */
ul.pagination .page-item.disabled .page-link,
ul.pagination .page-item.disabled a,
ul.pagination .page-item.disabled span {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

/* Hover states for inactive items - no background */
ul.pagination .page-item:not(.active):not(.disabled) .page-link:hover,
ul.pagination .page-item:not(.active):not(.disabled) a:hover,
ul.pagination .page-item:not(.active):not(.disabled) span:hover {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: #5A853C !important;
}

/* Force remove any blue colors from pagination - catch all possible selectors */
ul.pagination .page-item.active [style*="blue"],
ul.pagination .page-item.active [style*="#007bff"],
ul.pagination .page-item.active [style*="#0056b3"],
ul.pagination .page-item.active [style*="#2f5fef"],
ul.pagination .page-item.active [style*="#0b80d0"],
.pagination .page-item.active [style*="blue"],
.pagination .page-item.active [style*="#007bff"],
.pagination .page-item.active [style*="#0056b3"],
.pagination .page-item.active [style*="#2f5fef"],
.pagination .page-item.active [style*="#0b80d0"] {
    background-color: #5A853C !important;
    background: #5A853C !important;
    color: #ffffff !important;
}

/* Pagination font styling - smaller and bold */
/* Ensure all non-active pagination items have no background - comprehensive override */
ul.pagination .page-item:not(.active) .page-link,
ul.pagination .page-item:not(.active) a,
ul.pagination .page-item:not(.active) span,
ul.pagination .page-item:not(.active) .page-link:hover,
ul.pagination .page-item:not(.active) a:hover,
ul.pagination .page-item:not(.active) span:hover,
ul.pagination .page-item:not(.active) .page-link:focus,
ul.pagination .page-item:not(.active) a:focus,
ul.pagination .page-item:not(.active) span:focus,
.pagination .page-item:not(.active) .page-link,
.pagination .page-item:not(.active) a,
.pagination .page-item:not(.active) span,
.pagination .page-item:not(.active) .page-link:hover,
.pagination .page-item:not(.active) a:hover,
.pagination .page-item:not(.active) span:hover,
.pagination .page-item:not(.active) .page-link:focus,
.pagination .page-item:not(.active) a:focus,
.pagination .page-item:not(.active) span:focus,
.page-item:not(.active) .page-link,
.page-item:not(.active) a,
.page-item:not(.active) span {
    background-color: transparent !important;
    background: transparent !important;
}

ul.pagination .page-item .page-link,
ul.pagination .page-item a,
ul.pagination .page-item span,
ul.pagination .page-item .page-link:hover,
ul.pagination .page-item a:hover,
ul.pagination .page-item.active .page-link,
ul.pagination .page-item.active a,
ul.pagination .page-item.active span,
ul.pagination .page-item.disabled .page-link,
ul.pagination .page-item.disabled a,
ul.pagination .page-item.disabled span,
.pagination .page-item .page-link,
.pagination .page-item a,
.pagination .page-item span,
.pagination .page-item.active .page-link,
.pagination .page-item.active a,
.pagination .page-item.active span,
.pagination .page-item.disabled .page-link,
.pagination .page-item.disabled a,
.pagination .page-item.disabled span {
    font-size: 0.875rem !important;
    font-weight: bold !important;
}

/* NS: Hide aside element with data-nosnippet and keyboard-events from footer */
aside[data-nosnippet][keyboard-events],
aside[data-nosnippet="1"][keyboard-events],
footer aside[data-nosnippet][keyboard-events],
footer aside[data-nosnippet="1"][keyboard-events] {
    display: none !important;
    visibility: hidden !important;
}

/* NS: Contact page (Kontakta oss) - change padding from 50px to 20px */
/* Target the page-heading container specifically on the contact page */
/* Override the page-specific CSS that sets padding: 0 50px 15px */
/* Match the exact structure: form#content_form div.page-heading div.container */
body > .container .page-heading > .container,
body > form > .container .page-heading > .container,
body form#content_form .page-heading > .container,
body form .page-heading > .container,
body .section-landing .page-heading > .container {
    padding-left: 30px !important;
    padding-right: 20px !important;
    padding-top: 50px !important;
    padding-bottom: 15px !important;
}

/* NS: Contact page (Kontakta oss) - change padding-left from 15px to 30px */
/* Target the main container on the contact page (form#content_form div.container) */
body form#content_form > .container:not(.main-navbar):not(.py-2),
body > form#content_form > .container:not(.main-navbar) {
    padding-left: 30px !important;
}

/* ============================================
   NS: Redigera mina användare page - Skapa button right alignment
   Only affects "lista-redigera-mina-användare" page (URL contains /edit)
   ============================================ */

/* Target only the Redigera mina användare page - override fixes.css float-left rule for .float-end */
/* Using .entitylist as the page identifier since this page uses entity lists */
/* Use body selector for maximum specificity to override general [class*="float-end"] rule */
body .entitylist .view-toolbar .float-end,
body .entitylist .grid-actions .float-end,
body .entitylist .view-toolbar .toolbar-actions.float-end,
body .entitylist .grid-actions .toolbar-actions.float-end,
body .entitylist div.float-end.toolbar-actions,
body .entitylist .view-toolbar.grid-actions div.float-end.toolbar-actions,
body .entitylist .grid-actions.clearfix div.float-end.toolbar-actions,
body .entitylist .view-toolbar.grid-actions.clearfix div.float-end.toolbar-actions,
/* More specific selectors to override fixes.css [class*="float-end"] rule */
body .entitylist .view-toolbar [class*="float-end"],
body .entitylist .grid-actions [class*="float-end"],
body .entitylist .view-toolbar .toolbar-actions[class*="float-end"],
body .entitylist .grid-actions .toolbar-actions[class*="float-end"],
/* Even more specific - target pull-right class which is commonly used */
body .entitylist .view-toolbar .float-end,
body .entitylist .grid-actions .float-end,
body .entitylist .view-toolbar .toolbar-actions.float-end,
body .entitylist .grid-actions .toolbar-actions.float-end {
    float: right !important;
    clear: none !important;
    width: auto !important;
    margin-top: 0 !important;
}

/* Override .float-start inside toolbar-actions on this page */
body .entitylist .view-toolbar .toolbar-actions .float-start,
body .entitylist .grid-actions .toolbar-actions .float-start,
body .entitylist .view-toolbar .float-end .float-start,
body .entitylist .grid-actions .float-end .float-start,
body .entitylist .view-toolbar .toolbar-actions.float-end .float-start,
body .entitylist .grid-actions .toolbar-actions.float-end .float-start {
    float: right !important;
    clear: none !important;
    width: auto !important;
}

/* Override input-group.float-start on this page */
body .entitylist .view-toolbar .toolbar-actions .input-group.float-start,
body .entitylist .grid-actions .toolbar-actions .input-group.float-start,
body .entitylist .view-toolbar .float-end .input-group.float-start,
body .entitylist .grid-actions .float-end .input-group.float-start {
    float: right !important;
    clear: none !important;
    display: inline-block !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Ensure grid-actions container aligns content to the right on this page */
body .entitylist .view-toolbar.grid-actions,
body .entitylist .grid-actions,
body .entitylist .view-toolbar.grid-actions.clearfix,
body .entitylist .grid-actions.clearfix {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
    width: 100% !important;
    flex-direction: row !important;
}

/* ============================================
   NS: Redigera mina användare page - Move heading and container 27px to the right
   Only affects "lista-redigera-mina-användare" page (URL contains /edit)
   ============================================ */
.redigera-mina-anvandare-page {
    margin-left: 27px !important;
}

/* NS: Homepage font size adjustments to match second screenshot */
/* Reduce greeting font size */
/*.username-greeting {
    font-size: 24px !important;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .username-greeting {
        font-size: 20px;
        font-weight: normal;
        margin-bottom: 0;
     
    }
}*/

/* Remove spacing between greeting container and content below */
/* Target container that contains username-greeting - override inline margin-bottom: 60px */
.section-landing > .container:has(.username-greeting),
.section-landing > .container:has(.section:has(.username-greeting)),
.section-landing > .container:first-child,
div.container:has(.username-greeting),
/* More specific selector to override inline styles */
.section-landing .container[style*="margin-bottom"]:has(.username-greeting),
.section-landing .container[style*="margin-bottom"]:has(.section:has(.username-greeting)) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove top margin from the container that follows the greeting */
.section-landing > .container:has(.username-greeting) + .container,
.section-landing > .container:first-child + .container,
div.container:has(.username-greeting) + div.container,
.section-landing .container:has(.username-greeting) ~ .container {
    margin-top: 25px !important;
    padding-top: 0 !important;
}

/* Also remove margin from the section div inside the container */
.section:has(.username-greeting) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Reduce list item font size in sections */
.section li,
.section li a {
    font-size: 16px !important;
}

/* Style list items in home page sections to look like table rows with alternating backgrounds */
.section ul li:not(.homepage) {

    display: block !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    margin-bottom: 2px !important;
    background-color: #FFFFFF !important;
    border: none !important;
    list-style: none !important;
}


/* Style links inside list items */
.section ul li a {
    display: block !important;
    text-decoration: none !important;
    color: #000000 !important;
    width: 100% !important;
}

.section ul li a:hover {
    text-decoration: underline !important;
}

/* Remove background from empty list items (placeholders) */
.section ul li:empty {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* Remove td styling inside list items (fix for incorrect HTML structure) */
.section ul li td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Reduce button font size */
.section .btn-homepage {
    font-size: 18px !important;
    padding: 8px 16px !important;
}

/* Reduce space between table sections and image sections on home page */
/* Target the container that holds the image sections (Nyheter and Kalender) - reduce top margin */
.section-landing .container[style*="margin-bottom: 50px"],
.section-landing .container[style*="padding: 0px 45px"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0px !important; /* Reduce space between images and footer */
}

/* Remove margin-top from section-row elements (override theme.css margin-top: 20px) */
/*.section-landing .section-row {
    margin-top: 0 !important;
}*/

/* Reduce bottom margin on the top container (table sections) */
.section-landing .container[style*="padding: 0 0 0 45px"] {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
}

/* Target sibling containers - reduce gap between table container and image container */
.section-landing .container + .container {
    margin-top: 0 !important;
}

/* NS: Fix nested modal z-index issue - when "Lägg till filer" opens inside "Redigera" modal */
/* CRITICAL: Ensure ALL modals are interactive by default */
body.modal-open .modal.show,
body.modal-open .modal.show .modal-dialog,
body.modal-open .modal.show .modal-content {
    pointer-events: auto !important;
}

/* CRITICAL: Ensure parent modal (first modal) remains enabled when nested modals exist */
/* Use maximum specificity to override any Bootstrap or inline styles */
body.modal-open.has-nested-modal .modal.show:first-of-type,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type),
body.modal-open.has-nested-modal .modal.show:first-of-type[style*="pointer-events"],
body.modal-open.has-nested-modal .modal.show:not(:last-of-type)[style*="pointer-events"] {
    pointer-events: auto !important;
    z-index: 1050 !important;
    display: block !important;
}

body.modal-open.has-nested-modal .modal.show:first-of-type .modal-dialog,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) .modal-dialog,
body.modal-open.has-nested-modal .modal.show:first-of-type .modal-dialog[style*="pointer-events"],
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) .modal-dialog[style*="pointer-events"] {
    pointer-events: auto !important;
    z-index: 1050 !important;
}

body.modal-open.has-nested-modal .modal.show:first-of-type .modal-content,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) .modal-content,
body.modal-open.has-nested-modal .modal.show:first-of-type .modal-content[style*="pointer-events"],
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) .modal-content[style*="pointer-events"] {
    pointer-events: auto !important;
}

/* CRITICAL: Enable all interactive elements in parent modal - MAXIMUM SPECIFICITY */
body.modal-open.has-nested-modal .modal.show:first-of-type button,
body.modal-open.has-nested-modal .modal.show:first-of-type input,
body.modal-open.has-nested-modal .modal.show:first-of-type a,
body.modal-open.has-nested-modal .modal.show:first-of-type label,
body.modal-open.has-nested-modal .modal.show:first-of-type select,
body.modal-open.has-nested-modal .modal.show:first-of-type textarea,
body.modal-open.has-nested-modal .modal.show:first-of-type .form-control,
body.modal-open.has-nested-modal .modal.show:first-of-type .btn,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) button,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) input,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) a,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) label,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) select,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) textarea,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) .form-control,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) .btn,
/* Also target elements with inline styles that might disable them */
body.modal-open.has-nested-modal .modal.show:first-of-type button[style*="pointer-events"],
body.modal-open.has-nested-modal .modal.show:first-of-type input[style*="pointer-events"],
body.modal-open.has-nested-modal .modal.show:first-of-type a[style*="pointer-events"],
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) button[style*="pointer-events"],
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) input[style*="pointer-events"],
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) a[style*="pointer-events"] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* CRITICAL: Override elements inside parent modal that might have pointer-events: none */
/* But exclude any nested modals inside */
body.modal-open.has-nested-modal .modal.show:first-of-type .modal-content > *,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) .modal-content > *,
body.modal-open.has-nested-modal .modal.show:first-of-type .modal-body *,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) .modal-body *,
body.modal-open.has-nested-modal .modal.show:first-of-type .modal-header *,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) .modal-header *,
body.modal-open.has-nested-modal .modal.show:first-of-type .modal-footer *,
body.modal-open.has-nested-modal .modal.show:not(:last-of-type) .modal-footer * {
    pointer-events: auto !important;
}

/* ULTRA AGGRESSIVE: Override ANY inline style that sets pointer-events: none on parent modal */
/* This uses attribute selector to catch inline styles */
body.modal-open .modal.show:not(:last-of-type)[style*="pointer-events"],
body.modal-open .modal.show:first-of-type[style*="pointer-events"] {
    pointer-events: auto !important;
}

/* Force enable parent modal even if Bootstrap sets inline styles - but only when we have nested modals */
body.modal-open:has(.modal.show:last-of-type) .modal.show:not(:last-of-type),
body.modal-open:has(.modal.show:last-of-type) .modal.show:first-of-type {
    pointer-events: auto !important;
}

body.modal-open:has(.modal.show:last-of-type) .modal.show:not(:last-of-type) *,
body.modal-open:has(.modal.show:last-of-type) .modal.show:first-of-type * {
    pointer-events: auto !important;
}

/* Fallback for browsers that don't support :has() */
body.modal-open .modal.show:not(:last-of-type):not(:only-of-type),
body.modal-open .modal.show:first-of-type:not(:only-of-type) {
    pointer-events: auto !important;
}

body.modal-open .modal.show:not(:last-of-type):not(:only-of-type) *,
body.modal-open .modal.show:first-of-type:not(:only-of-type) * {
    pointer-events: auto !important;
}

/* When nested modals exist (JavaScript adds class) - use VERY high z-index for child modal */
body.modal-open.has-nested-modal .modal.show:last-of-type {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

body.modal-open.has-nested-modal .modal.show:last-of-type .modal-dialog {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

body.modal-open.has-nested-modal .modal.show:last-of-type .modal-content {
    pointer-events: auto !important;
}

body.modal-open.has-nested-modal .modal.show:last-of-type button,
body.modal-open.has-nested-modal .modal.show:last-of-type input,
body.modal-open.has-nested-modal .modal.show:last-of-type a,
body.modal-open.has-nested-modal .modal.show:last-of-type label,
body.modal-open.has-nested-modal .modal.show:last-of-type select,
body.modal-open.has-nested-modal .modal.show:last-of-type textarea,
body.modal-open.has-nested-modal .modal.show:last-of-type .form-control,
body.modal-open.has-nested-modal .modal.show:last-of-type .btn {
    pointer-events: auto !important;
}

/* Disable first backdrop when nested modals exist */
body.modal-open.has-nested-modal .modal-backdrop.show:not(:last-of-type) {
    pointer-events: none !important;
    z-index: 1040 !important;
}

/* Ensure nested modal backdrop is on top */
body.modal-open.has-nested-modal .modal-backdrop.show:last-of-type {
    z-index: 9998 !important;
    pointer-events: auto !important;
}

/* ============================================
   MOBILE NAVBAR TOGGLE MENU FIX
   Ensure hamburger menu works on mobile/small screens
   WITHOUT changing button style
   ============================================ */

/* Override old Bootstrap 3 CSS rules that interfere with Bootstrap 5 */
@media (max-width: 767px) {
    /* Override old Bootstrap 3 rule that hides ul inside collapse */
    .collapse.navbar-collapse > ul,
    #navbarContent.collapse > ul,
    #navbarContent.navbar-collapse.collapse > ul {
        display: block !important;
    }
    
    /* Override old Bootstrap 3 .collapse.in rule */
    .collapse.in > ul,
    #navbarContent.collapse.in > ul {
        display: block !important;
    }
}

/* Show navbar toggler on mobile and small screens (keep existing style) */
@media (max-width: 991.98px) {
    .navbar-togglerr,
    .navbar .navbar-togglerr,
    .navbar.navbar-expand-lg .navbar-togglerr {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Hide navbar content by default on mobile (when collapsed) */
    #navbarContent.navbar-collapse.collapse:not(.show) {
        display: none !important;
    }
    
    /* Show navbar content when expanded (Bootstrap adds .show class) */
    #navbarContent.navbar-collapse.collapse.show {
        display: block !important;
    }
    
    /* Ensure main navigation ul inside navbarContent is visible when shown */
    /* BUT keep dropdown menus hidden by default - they should only show on click */
    #navbarContent.navbar-collapse.collapse.show > ul.navbar-nav,
    #navbarContent.navbar-collapse.collapse.show ul.navbar-nav {
        display: block !important;
    }
    
    /* Bootstrap 5 dropdown behavior - let Bootstrap handle show/hide naturally */
    /* Don't interfere with Bootstrap's default dropdown behavior */
    /* Bootstrap adds .show class to dropdown element and manages visibility */
    /* Only ensure dropdowns are visible when Bootstrap adds .show class */
    .navbar-nav .dropdown.show .dropdown-menu,
    .navbar-nav .nav-item.dropdown.show .dropdown-menu {
        display: block !important;
    }
    
    /* NS: Remove left margin from "Bokade tider" on mobile to align with other items */
    #navbarContent .navbar-nav .nav-item:has(a[aria-label="Bokade tider"]),
    #navbarContent .navbar-nav .nav-item:has(a[id*="Bokade"]),
    #navbarContent .navbar-nav .nav-item:has(a[id*="bokade"]),
    #navbarContent .navbar-nav .nav-item:has(a[id*="Bokade-tider"]),
    #navbarContent .navbar-nav .nav-item:has(a[id*="bokade-tider"]) {
        margin-left: 0 !important;
    }
    
    /* NS: Remove left margin from "Startsida" on mobile to align with other items */
    #navbarContent .navbar-nav .nav-item:has(a[aria-label="Startsida"]),
    #navbarContent .navbar-nav .nav-item:has(a[id*="Startsida"]),
    #navbarContent .navbar-nav .nav-item:has(a[id*="startsida"]) {
        margin-left: 0 !important;
    }
    
    /* Ensure navbar container allows proper layout */
    .container.main-navbar {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    /* Ensure nav element allows proper layout */
    .navbar.navbar-expand-lg {
        flex-wrap: wrap !important;
    }
}



/* Appointments table - prevent first column (Date & Time) from wrapping */
#appointment table tbody.advice-content tr td:first-child,
#appointment table tbody.advice-content tr td.date,
#appointment table.table-striped tbody.advice-content tr td:first-child,
#appointment table.table-striped tbody.advice-content tr td.date,
.dataTable_wrapper #appointment table tbody.advice-content tr td:first-child,
.dataTable_wrapper #appointment table tbody.advice-content tr td.date {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

#appointment table tbody.advice-content tr td:first-child a,
#appointment table tbody.advice-content tr td.date a {
    white-space: nowrap !important;
    display: inline-block !important;
}

/* Ensure "Skriv ut" button is aligned to the right in knowledge article pages */
.sectionBlockLayout .float-end,
.sectionBlockLayout > .float-end {
    float: right !important;
    clear: none !important;
    width: auto !important;
}



    



#prenumerationer-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

/* NS: Update table row separators to match right-side table appearance - cleaner, sharper dividers */
#prenumerationer-table tbody tr.prenumerationer-tr {
    border-bottom: 1.0px solid #ddd !important; /* Thicker, darker border for sharper appearance */
    border-top: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#prenumerationer-table tbody tr.prenumerationer-tr td {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    padding: 2px 3px 2px 0;
    vertical-align: top;
       color: #666 !important;
}



/* NS: Override Knowledge Article CSS - Must be at end of file for cascade    */
  /****************************************************************************/

  /* Override knowledge article container width and alignment */
  body > .container:not(.main-navbar):not(.py-2),
  body > form > .container:not(.main-navbar),
  body .page-heading > .container {
      width: 100% !important;
      max-width: 1080px !important;
      margin-left: auto !important;
      margin-right: auto !important;
     /* padding-left: 35px !important;  Ensure left padding matches header */
  }

  /* Ensure consistent container background across all pages */
  /*body > .container:not(.main-navbar):not(.py-2) {
      background-color: transparent !important; /* Let body background show through 
  }*/

  /* Ensure navbar background is white on all pages */
  .navbar-light.bg-white,
  .navbar-collapse.bg-white,
  #navbar {
      background-color: #ffffff !important;
  }



/* NS: Update table row separators to match right-side table appearance - cleaner, sharper dividers */
#prenumerationer-table tbody tr.prenumerationer-tr {
    border-bottom: 1.0px solid #ddd !important; /* Thicker, darker border for sharper appearance */
    border-top: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* NS: Additional fix - target the author/date column with float: right specifically */
#prenumerationer-table .prenumerationer-inner-table td[style*="float: right"],
#prenumerationer-table .prenumerationer-inner-table td[style*="float:right"],
#prenumerationer-table tbody tr.prenumerationer-tr td .prenumerationer-inner-table td[style*="float: right"],
#prenumerationer-table tbody tr.prenumerationer-tr td .prenumerationer-inner-table td[style*="float:right"] {
    padding: 0 !important;
    /* padding-right: 10px !important; */
     margin-bottom: -10px;
}

.table-striped > tbody > tr > *{
    --bs-table-accent-bg: transparent !important;
    background-color: transparent !important;
}

@media (max-width: 767px) {
    section.container {
        padding-left: 0px !important;
    }
}

html[dir=ltr] .crmEntityFormView .cell input[type=text] {
    border: 1px solid #ccc !important;
    /*width: 100%;
    padding: 8px;*/
    font-family: Arial, sans-serif
}

.crmEntityFormView .form-control.readonly, .crmEntityFormView .form-control[readonly][disabled], .form-readonly .form-control {
    background-color: #f1f1f1 !important;
    border: 1px solid #ccc !important;
    width: 100%;
    padding: 8px;
}

/* Override lookup button styling in Power Pages */
.btn.btn-default.clearlookupfield,
.btn.btn-default.launchentitylookup {
    line-height: 1.9 !important;
}