/*
 * Landlord-/Verwaltungs-Backend — Farbgebung, Schrift & Navigationsstil analog
 * https://elemente.id (Poppins, Markengrün #436d5e, helle Topbar mit dezentem Rand).
 * Liegt ÜBER der elementeid-backend.css und feintunt nur diese Aspekte.
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    /* Farbgebung (elemente.id) */
    --bs-primary: #436d5e;
    --bs-primary-rgb: 67, 109, 94;
    --bs-btn-hover-bg: #375a4e;
    --oc-primary-hover-bg: #375a4e;
    --oc-primary-active-bg: #375a4e;
    --bs-body-color: #1c2522;

    /* Navigationsstil (helle Topbar, dunkle Labels, dezente Icons) */
    --oc-mainnav-bg: #ffffff;
    --oc-mainnav-color: #1c2522;
    --oc-mainnav-icon-color: #5b6963;

    /* Schrift */
    --bs-body-font-family: 'Poppins', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Schrift im gesamten Backend erzwingen (October setzt sie sonst nicht auf Poppins) */
body,
.control-toolbar,
.mainmenu-items,
.mainmenu-item .nav-label,
.form-control,
.btn,
.breadcrumb,
.control-breadcrumb,
h1, h2, h3, h4, h5, h6,
.list-header,
table.table {
    font-family: 'Poppins', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Topbar wie auf elemente.id: Logo | Navigation | Benutzer, weiß mit dezentem Rand */
#header-with-icon {
    border-bottom: 1px solid #dce6e1;
    align-items: center;
    gap: 28px;
    font-weight: 500;
}
#header-with-icon .hwi-logo,
#header-with-icon .hwi-user { flex: 0 0 auto; }
#header-with-icon .hwi-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: visible;
}

/* Hauptnavigation im Header: textbasiert, OHNE Icons (elemente.id-Stil) */
#header-with-icon .hwi-mainmenu {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#header-with-icon .hwi-mainmenu .nav-icon,
#header-with-icon .hwi-mainmenu .counter { display: none !important; }
#header-with-icon .hwi-mainmenu > .mainmenu-item { position: relative; }
#header-with-icon .hwi-mainmenu > .mainmenu-item > a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    color: #1c2522;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
#header-with-icon .hwi-mainmenu > .mainmenu-item > a .nav-label { color: inherit; font-weight: 500; }
#header-with-icon .hwi-mainmenu > .mainmenu-item > a:hover { color: var(--bs-primary); background: #f1f5f3; }
#header-with-icon .hwi-mainmenu > .mainmenu-item.active > a,
#header-with-icon .hwi-mainmenu > .mainmenu-item.active > a .nav-label { color: var(--bs-primary); }

/* Submenu-Dropdowns (CSS-Hover, da October-Toolbar-JS hier nicht greift) */
#header-with-icon .hwi-mainmenu .submenu-items {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    margin-top: 4px;
    padding: 6px;
    background: #fff;
    border: 1px solid #dce6e1;
    border-radius: 10px;
    box-shadow: rgba(38, 62, 53, .12) 0 8px 24px;
    list-style: none;
    display: none;
    z-index: 1100;
}
#header-with-icon .hwi-mainmenu > .mainmenu-item:hover > .submenu-items { display: block; }
#header-with-icon .hwi-mainmenu .submenu-items .submenu-item > a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: #1c2522;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
#header-with-icon .hwi-mainmenu .submenu-items .submenu-item > a:hover,
#header-with-icon .hwi-mainmenu .submenu-items .submenu-item.active > a { background: #f1f5f3; color: var(--bs-primary); }

#layout-mainmenu .navbar,
.layout-mainmenu .main-menu-container {
    background-color: var(--oc-mainnav-bg);
    border-bottom: 1px solid #dce6e1;
}

/* Navigationslabels: dunkel, mittlere Stärke; aktiv/hover im Markengrün */
.mainmenu-item .nav-label {
    color: var(--oc-mainnav-color);
    font-weight: 500;
}
.mainmenu-item.active .nav-label,
.mainmenu-item.active .nav-icon,
.mainmenu-item.active-dropdown .nav-label,
.mainmenu-item.active-dropdown .nav-icon,
body:not(.drag) .mainmenu-item:hover .nav-label,
body:not(.drag) .mainmenu-item:hover .nav-icon {
    color: var(--bs-primary);
}

/* Primär-Buttons in Markenfarbe (elemente.id-Pill-Anmutung) */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #375a4e;
    --bs-btn-hover-border-color: #375a4e;
    --bs-btn-active-bg: #375a4e;
    --bs-btn-active-border-color: #375a4e;
    font-weight: 500;
}