/* ============================================================
   DUAL-CONTROL SIDEBAR: nav-link + nav-toggle button
   ============================================================ */

/* Each sidebar item is a flex row */
.nav li.has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* The navigation link takes most of the width */
.nav li.has-children > a.nav-link {
    flex: 1;
    min-width: 0;
    padding-right: 4px;
}

/* The toggle arrow button */
.nav li.has-children > .nav-toggle {
    background: none;
    border: none;
    color: #a7b1c2;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}

.nav li.has-children > .nav-toggle:hover {
    opacity: 1;
    color: #fff;
}

/* Active parent toggle is brighter */
.nav li.active.has-children > .nav-toggle {
    opacity: 0.8;
    color: #1ab394;
}

/* Submenu sits below the flex row, full width */
.nav li.has-children > ul {
    width: 100%;
}

/* ============================================================
   METISMENU → BOOTSTRAP 5 COLLAPSE COMPATIBILITY
   style.css contains MetisMenu rules that use .collapse.in (BS3)
   but Bootstrap 5 uses .collapse.show. Without these overrides
   .metismenu .collapse { display:none } hides shown menus.
   ============================================================ */

.metismenu .collapse.show {
    display: block;
}
.mini-navbar .metismenu .collapse.show {
    opacity: 1;
}
.mini-navbar .metismenu .collapse.show a {
    display: block;
}

/* Remove legacy MetisMenu height override that breaks BS5 animation */
.nav.nav-second-level.collapse[style] {
    height: unset !important;
}

/* ============================================================
   EXISTING STYLES (preserved)
   ============================================================ */

.custom-logo-background {
    /* Proinvoicer white artwork (2026-09 brand refresh) — the sidebar nav-header is
       dark (#2f4050 + pattern), so the white-text variant is the appropriate theme.
       The light-theme twin (grey artwork) is img/logo-proinvoicer-grey.png. */
    background-image: url('../img/logo-proinvoicer-white.png');
    background-size: contain; /* wide 1151x367 logo — cover would crop it */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center center; /* Centers the image */
    height: 170px;
}
.custom-logo-background-small {
    /* Collapsed (mini-navbar) logo: the diamond icon with the white bubble —
       the dark-background variant. Light-theme twin: img/logo-icon-grey.png. */
    background-image: url(../img/logo-icon-white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    height: 40px;
    margin: 0 13px;
}

/* General link styling - removes text decoration and sets the color */
.nav li a {
    text-decoration: none; /* No underline by default */
    color: #a7b1c2; /* This color should match the first level color */
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden; /* Hides text that overflows */
    width: 100%; /* Adjust as needed */
}

/* Styling for hover state - adds underline on hover */
.nav li a:hover,
.nav li a:focus {
    text-decoration: underline; /* Only underline on hover/focus */
    color: #a7b1c2; /* Maintain the same color on hover */
}

/* Styling to handle overflow with tooltips */
/* Apply ellipsis for all states except when .mini-navbar is present */
body:not(.mini-navbar) .nav li a {
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden; /* Hides text that overflows */
    text-overflow: ellipsis; /* Adds an ellipsis to text that overflows */
    display: block; /* Ensures the entire area is clickable and tooltip is shown */
}

/* Override: has-children links use flex, not block */
.nav li.has-children > a.nav-link {
    display: block;
}


/* Bootstrap tooltip */
.nav li a[data-toggle="tooltip"] {
    position: relative;
}

.nav-second-level li a {
    padding-left: 23px;
}

/* Base styling for nested lists */
.nav li ul {
    padding-left: 0;
    list-style: none;
}

/* Specific styling for the second level menu items */
.nav-second-level li {
    padding-left: 15px; /* Adjust as needed */
}

/* Specific styling for the third level menu items */
.nav-third-level li {
    padding-left: 30px; /* Adjust as needed */
}

/* Specific styling for the fourth level menu items */
.nav-fourth-level li {
    padding-left: 45px; /* Adjust as needed */
}

/* Optional: change the color for third and fourth level links to distinguish them */
.nav-third-level li a, .nav-fourth-level li a {
    color: #a9b7c6; /* Lighter color for sub-menu items */
}
.nav li.active > a {
    background-color: #1ab394; /* Change to your active color */
    color: #FFF; /* Change to your active text color */
}

.nav li.active > a:hover {
    background-color: #18a689; /* Change to your active hover color */
}

/* Reset background color for nested li elements (second level and beyond) */
.nav .nav-second-level li.active > a,
.nav .nav-third-level li.active > a,
.nav .nav-fourth-level li.active > a {
    background-color: transparent; /* No background color for nested li elements */
    color: #f3f3f4; /* Text color for active nested items, change as needed */
}

/* Ensure text is readable when the hamburger menu is toggled */
.navbar-collapse.collapsing,
.navbar-collapse.show,
.navbar-collapse.in {
    color: #FFF; /* Or any color that makes the text readable on your background */
}

/* Adjust the color for links within the collapsed menu */
.navbar-collapse.collapsing a,
.navbar-collapse.show a,
.navbar-collapse.in a {
    color: #FFF; /* Or any color that makes the text readable on your background */
}


/* Override the display property for the 2nd, 3rd, and 4th level menu text in the mini-navbar */
body.mini-navbar .nav-second-level .nav-label,
body.mini-navbar .nav-third-level .nav-label,
body.mini-navbar .nav-fourth-level .nav-label {
    display: inline !important; /* or 'block' if you want it to take up the full width */
}

/* Make sure the parent elements are also visible */
body.mini-navbar .nav-second-level,
body.mini-navbar .nav-third-level,
body.mini-navbar .nav-fourth-level {
    /*display: block !important;*/
}

/* Base positioning for all list items */
.nav li {
    position: relative; /* This establishes a new stacking context */
}

/* Ensure dropdowns are above their parent list item but below the next level's list items */
.nav .nav-second-level {
    z-index: 10;
}

.nav .nav-second-level .nav-third-level {
    z-index: 20;
}

.nav .nav-third-level .nav-fourth-level {
    z-index: 30;
}

/* Specific z-index for list items at each level to be above their dropdowns */
.nav > li {
    z-index: 40; /* Base level list items */
}

.nav .nav-second-level > li {
    z-index: 50; /* Second level list items */
}

.nav .nav-third-level > li {
    z-index: 60; /* Third level list items */
}

.nav .nav-fourth-level > li {
    z-index: 70; /* Fourth level list items */
}

.nav-second-level li:last-child {
    padding-bottom: 0px;
}

.m-l-xs {
	margin-left: 5px;
}

.golden-lock {
    color: #B8860B;
}

.explanation {
    color: darkorange;
    font-weight: bold;
}
.alert-icon {
    color: red; /* Red color for alert icon */
}
/* Debugging background colors for each level of UL */
/*.nav > li > ul.nav-second-level {
    background-color: #c648d7  !important; 
}

.nav .nav-second-level > li > ul.nav-third-level {
    background-color: #ccffcc !important; 
}

.nav .nav-third-level > li > ul.nav-fourth-level {
    background-color: #ccccff !important;
}*/

/* ── Docs locales 2026-10-05: language switcher + API docs search ────────── */
/* .api-lang is a BARE positioning wrapper (like .sd-lang in the manual): the
   visible pill is .api-lang-btn. The old select-era border/padding/background
   here painted a second pill behind the button ("button inside a button"). */
.api-lang{position:relative;display:inline-flex;align-items:center;margin:8px 10px 0 0}
.api-docs-search{position:relative;display:inline-block;vertical-align:middle;margin:8px 0 0 12px;min-width:230px}
.api-docs-search .form-control{border-radius:6px;height:34px;width:100%}
.api-search-results{position:absolute;top:100%;left:0;right:auto;min-width:320px;max-width:480px;max-height:60vh;overflow:auto;background:#fff;border:1px solid #e5e6e7;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:3000;padding:4px 0}
.api-search-results[hidden]{display:none}
.api-search-result{display:block;padding:8px 12px;text-decoration:none;border-bottom:1px solid #f3f3f4}
.api-search-result:last-child{border-bottom:0}
.api-search-result:hover,.api-search-result.api-hit{background:#f5f7f8}
.api-search-result small{display:block;color:#919499;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.api-search-result strong{display:block;color:#33383e;font-size:13px;font-weight:600}
.api-search-result .api-snippet{display:block;color:#6b7075;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.api-search-empty{padding:14px 12px;color:#8a8f94;font-size:12px}
[dir="rtl"] .api-docs-search{margin:8px 12px 0 0}

/* ── Dark theme (2026-10-05) — same mechanism + storage key as the mobile
   manual: html.ecms-dark + overrides, choice follows the user across the
   documentation sites via localStorage 'prolasku-manual-theme'. ──────────── */
.api-theme{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid #e5e6e7;border-radius:999px;background:#fff;color:#676a6c;font-size:14px;cursor:pointer;margin:8px 0 0 4px}
.api-theme:hover{color:#33383e;border-color:#c3c6c9}
html.ecms-dark{color-scheme:dark}
html.ecms-dark body{background:#14171b;color:#d5d9de}
html.ecms-dark #page-wrapper{background:#1b1f24}
html.ecms-dark .gray-bg{background:#1b1f24}
html.ecms-dark .white-bg{background:#1b1f24 !important}
html.ecms-dark .border-bottom{border-bottom:1px solid #2d333b !important}
html.ecms-dark h1,html.ecms-dark h2,html.ecms-dark h3,html.ecms-dark h4,html.ecms-dark h5{color:#e9ecef}
html.ecms-dark a{color:#6ea8f5}
html.ecms-dark #page-wrapper p,html.ecms-dark #page-wrapper li{color:#c3c9d1}
html.ecms-dark table{color:#d5d9de}
html.ecms-dark th,html.ecms-dark td{border-color:#2d333b}
html.ecms-dark th{background:#242b33}
html.ecms-dark blockquote{border-left-color:#2d333b}
html.ecms-dark blockquote p{color:#a2abb5}
html.ecms-dark .api-docs-search .form-control{background:#242b33;border-color:#2d333b;color:#e9ecef}
html.ecms-dark .api-theme{background:#242b33;border-color:#2d333b;color:#a2abb5}
html.ecms-dark .api-search-results{background:#1b1f24;border-color:#2d333b}
html.ecms-dark .api-search-result{border-bottom-color:#2d333b}
html.ecms-dark .api-search-result:hover,html.ecms-dark .api-search-result.api-hit{background:#242b33}
html.ecms-dark .api-search-result strong{color:#e9ecef}
html.ecms-dark .api-search-result small,html.ecms-dark .api-search-empty{color:#8a939c}
html.ecms-dark .footer{background:transparent}
html.ecms-dark .api-docs-search .form-control::placeholder{color:#77808a}

/* Flags in the language switchers (2026-10-05) — 48px system flags from
   admin/images/flags_iso copied self-hosted into img/flags/ (docs host must
   not hot-link easycms.fi). 24px display = "large" flag look. */
.api-lang .api-flag{width:24px;height:24px;object-fit:contain;display:block;flex:0 0 auto;border-radius:3px}
.hub-lang .hub-flag{width:22px;height:22px;object-fit:contain;display:block;flex:0 0 auto;border-radius:3px;margin-right:6px}
[dir="rtl"] .hub-lang .hub-flag{margin-right:0;margin-left:6px}

/* Flag dropdown switcher (2026-10-06) — custom menu, flags per option.
   Item rules are scoped .api-lang-menu > .api-lang-item (0-2-0) on purpose:
   inspinia's .navbar-top-links li{display:inline-block} (style.css, 0-1-1)
   out-ranked a bare .api-lang-item and flattened the menu into a horizontal
   row with the flags glued to the labels (2026-10-13). Vertical list, same
   control pattern as the manual's .sd-lang switcher. */
.api-lang-btn{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid #e5e6e7;border-radius:999px;background:#fff;color:#33383e;font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;cursor:pointer}
.api-lang-btn:hover{color:#1c1f22;border-color:#c3c6c9}
.api-lang-btn .fa{font-size:11px;opacity:.7;transition:transform .15s}
.api-lang-btn[aria-expanded="true"] .fa{transform:rotate(180deg)}
.api-lang .api-flag{width:24px;height:24px;object-fit:contain;display:block;flex:0 0 auto;border-radius:3px}
.api-lang-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:190px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #e5e6e7;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:3000}
.api-lang-menu[hidden]{display:none}
.api-lang-menu > .api-lang-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13px;color:#33383e;cursor:pointer;white-space:nowrap}
.api-lang-menu > .api-lang-item:hover{background:#f5f7f8}
.api-lang-menu > .api-lang-item img{width:24px;height:24px;object-fit:contain;flex:0 0 auto;border-radius:3px}
.api-lang-menu > .api-lang-item.api-lang-active{font-weight:700;color:#1c4db3}
html.ecms-dark .api-lang-btn{background:#242b33;border-color:#2d333b;color:#a2abb5}
html.ecms-dark .api-lang-menu{background:#1b1f24;border-color:#2d333b}
html.ecms-dark .api-lang-menu > .api-lang-item{color:#d5d9de}
html.ecms-dark .api-lang-menu > .api-lang-item:hover{background:#242b33}
html.ecms-dark .api-lang-menu > .api-lang-item.api-lang-active{color:#9ec1f7}