/* ============================================================================
 * Visual Overhaul — theme layer
 * Target style: https://gaimssoftware.de/  (indigo #2D2B6B + lime #7AB800 on white)
 *
 * Loaded AFTER gaims.css so it wins. Every rule is scoped under `body.theme-overhaul`
 * so the restyle can be rolled out page-by-page (a page opts in via that body class).
 * Purely visual — no layout/behaviour changes.
 * ========================================================================== */

body.theme-overhaul {
    /* ---- design tokens ---- */
    --ov-primary: #2D2B6B;
    --ov-primary-dark: #232155;
    --ov-accent: #7AB800;
    --ov-accent-dark: #5A8800;
    --ov-bg: #FFFFFF;
    --ov-bg-soft: #F7F7FA;
    --ov-text: #1A1A3A;
    --ov-text-muted: #6B6B8A;
    --ov-border: #E6E6EE;
    --ov-radius: 7px;
    --ov-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* ---- map Bootstrap 5 variables onto the brand ---- */
    --bs-primary: var(--ov-primary);
    --bs-primary-rgb: 45, 43, 107;
    --bs-link-color: var(--ov-primary);
    --bs-link-hover-color: var(--ov-accent-dark);
    --bs-body-color: var(--ov-text);
    --bs-body-bg: var(--ov-bg);
    --bs-border-color: var(--ov-border);
    --bs-border-radius: var(--ov-radius);
    --bs-font-sans-serif: var(--ov-font);

    background: var(--ov-bg-soft) !important;
    color: var(--ov-text);
    font-family: var(--ov-font);
}

/* ---- typography: clean, bold, tight headings in indigo ---- */
body.theme-overhaul,
body.theme-overhaul .page-content,
body.theme-overhaul p,
body.theme-overhaul label,
body.theme-overhaul td,
body.theme-overhaul span {
    font-family: var(--ov-font);
}
/* …but icon fonts must keep their own family. The blanket `span` selector above is
   (0,1,2), which out-specifies main.css's `.glyphicon { font-family:'Glyphicons
   Halflings' }` and solid.min.css's `.fa,.fas { font-family:"Font Awesome 5 Free";
   font-weight:900 }` — both (0,1,0). Every glyphicon/FA icon written as a <span>
   (the user menu in Parts/header.html.twig, the table_config sort icon, the newUser
   phone icon) therefore painted its private-use codepoint (glyphicon-user is U+E008)
   in the UI font, which has no glyph there — so the icon rendered blank.
   Icons written as <i> were never affected: the blanket rule only lists p/label/td/
   span. startui `font-icon-*` icons were never affected either — their rule already
   carries !important. */
body.theme-overhaul span.glyphicon,
body.theme-overhaul span.glyphicon::before {
    font-family: 'Glyphicons Halflings' !important;
}
body.theme-overhaul span.fa,
body.theme-overhaul span.fas,
body.theme-overhaul span.fa::before,
body.theme-overhaul span.fas::before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
}
body.theme-overhaul h1,
body.theme-overhaul h2,
body.theme-overhaul h3,
body.theme-overhaul h4,
body.theme-overhaul .page-title,
body.theme-overhaul .box-typical-header {
    color: var(--ov-primary);
    font-weight: 800;
    letter-spacing: -0.02em;
}
body.theme-overhaul a { color: var(--ov-primary); }
body.theme-overhaul a:hover { color: var(--ov-accent-dark); }
body.theme-overhaul .text-muted,
body.theme-overhaul .color-blue-grey { color: var(--ov-text-muted) !important; }

/* ---- sidebar: uniform indigo, high-contrast white text, green icons/active ----
   The admin template hard-codes the menu labels (.lbl) to #153c65 (dark blue on dark
   blue = unreadable) and gives open sub-menus a light box. We force the whole sidebar
   dark indigo with light text via broad !important rules so nothing is left low-contrast. */
body.theme-overhaul.with-side-menu .side-menu,
body.theme-overhaul .side-menu,
body.theme-overhaul .side-menu .side-menu-list,
body.theme-overhaul .side-menu .side-menu-list .side-menu-list,
body.theme-overhaul .side-menu .side-menu-list li.active > .side-menu-list {
    background: var(--ov-primary) !important;
    border: 0 !important;
}
/* all menu text (labels live in span.lbl) → readable light */
body.theme-overhaul .side-menu .side-menu-list a,
body.theme-overhaul .side-menu .side-menu-list span,
body.theme-overhaul .side-menu .side-menu-list .lbl,
body.theme-overhaul .side-menu .side-menu-list li > a,
body.theme-overhaul .side-menu .side-menu-list li > span {
    color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
/* …and at normal weight. main.css ships `.side-menu-list .lbl { font-weight: 600 }`, which
   is the only font-weight in play on the menu entries: the top-level items wrap their text
   in `span.lbl` (templates/Parts/side-menu.html.twig) while the nested sub-menu links are
   plain <a> with no .lbl and already render at normal weight — so dropping the semibold is
   what makes the list typographically consistent rather than top-heavy.
   No !important needed: (0,3,1) here beats main.css's (0,2,0).
   The active entry keeps its emphasis from the rules below (white text + the inset accent
   bar), which is a stronger signal than a 100-unit weight step anyway. NOT touched:
   `.side-menu .side-menu-title` (the INFRASTRUKTUR/MASSNAHMEN section captions) is also 600,
   but those are headings, not menu items. */
body.theme-overhaul .side-menu .side-menu-list .lbl {
    font-weight: 400;
}
/* section headings (INFRASTRUKTUR, MASSNAHMEN …) — dimmer but legible */
body.theme-overhaul .side-menu .side-menu-list > li.nav-label,
body.theme-overhaul .side-menu .nav-label,
body.theme-overhaul .side-menu .navigation-title,
body.theme-overhaul .side-menu li.heading {
    color: rgba(255, 255, 255, 0.55) !important;
}
/* icons → green accent */
body.theme-overhaul .side-menu .side-menu-list i,
body.theme-overhaul .side-menu .side-menu-list .fa,
body.theme-overhaul .side-menu .side-menu-list [class*="font-icon"] {
    color: var(--ov-accent) !important;
}
/* hover + active */
body.theme-overhaul .side-menu .side-menu-list li > a:hover,
body.theme-overhaul .side-menu .side-menu-list li > span:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}
body.theme-overhaul .side-menu .side-menu-list > li.active > a,
body.theme-overhaul .side-menu .side-menu-list > li.active > span {
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow: inset 3px 0 0 var(--ov-accent);
}
body.theme-overhaul .side-menu .side-menu-list li.active > a .lbl,
body.theme-overhaul .side-menu .side-menu-list li.active .lbl { color: #fff !important; }
/* nested/expanded sub-menus are <ul class="*SubMenu"> (the template renders them as a
   light box with faint text). Force them a slightly darker indigo with white text. */
body.theme-overhaul .side-menu .side-menu-list ul,
body.theme-overhaul .side-menu li.with-sub > ul,
body.theme-overhaul .side-menu [class*="SubMenu"],
body.theme-overhaul .side-menu [class*="submenu"],
body.theme-overhaul .side-menu [class*="sub-menu"] {
    background: var(--ov-primary-dark) !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.theme-overhaul .side-menu .side-menu-list ul a,
body.theme-overhaul .side-menu .side-menu-list ul span,
body.theme-overhaul .side-menu .side-menu-list ul .lbl,
body.theme-overhaul .side-menu [class*="SubMenu"] a,
body.theme-overhaul .side-menu [class*="SubMenu"] span,
body.theme-overhaul .side-menu [class*="SubMenu"] .lbl {
    color: rgba(255, 255, 255, 0.88) !important;
}
body.theme-overhaul .side-menu .side-menu-list ul li.active > a,
body.theme-overhaul .side-menu .side-menu-list ul a:hover,
body.theme-overhaul .side-menu [class*="SubMenu"] li.active > a,
body.theme-overhaul .side-menu [class*="SubMenu"] a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.09) !important;
}
body.theme-overhaul .side-menu .side-menu-list ul li.active > a .lbl,
body.theme-overhaul .side-menu [class*="SubMenu"] li.active > a .lbl { color: #fff !important; }
/* the OPENED/active parent li gets a near-white box from the template (.opened),
   which makes our white label invisible. Force it back to indigo + green accent. */
body.theme-overhaul .side-menu li.opened,
body.theme-overhaul .side-menu li.with-sub.opened,
body.theme-overhaul .side-menu .side-menu-list > li.active,
body.theme-overhaul .side-menu li.active {
    background: var(--ov-primary) !important;
}
body.theme-overhaul .side-menu li.opened > a,
body.theme-overhaul .side-menu li.opened > span,
body.theme-overhaul .side-menu li.with-sub.opened > a,
body.theme-overhaul .side-menu li.with-sub.opened > span,
body.theme-overhaul .side-menu .side-menu-list > li.active > a,
body.theme-overhaul .side-menu .side-menu-list > li.active > span {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--ov-accent);
}
body.theme-overhaul .side-menu li.opened > a .lbl,
body.theme-overhaul .side-menu li.opened > span .lbl,
body.theme-overhaul .side-menu li.with-sub.opened > span .lbl { color: #fff !important; }
/* hovering an OPENED entry (or anything inside it) must stay in the indigo palette.
   main.css ships `.theme-picton-blue .side-menu .side-menu-list > li.opened.with-sub a:hover,
   ... > span:hover { background-color: #d1e5f8 !important }` — a light blue that reads as a
   foreign theme here. Both of those are (0,6,1) with !important, which out-specifies the
   generic `li > span:hover` rule above; the `body` prefix here makes ours (0,6,2) so it wins.
   0.12 sits just above the opened entry's idle 0.10 background, so hover still lifts. */
body.theme-overhaul .side-menu .side-menu-list > li.opened.with-sub > span:hover,
body.theme-overhaul .side-menu .side-menu-list > li.opened.with-sub a:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}
/* the green left accent marks the selected TOP-LEVEL entry only. Nested submenu
   entries must never draw it, no matter which rule above this one tries to add it —
   this block is last in the side-menu cascade so it always wins. */
body.theme-overhaul .side-menu .side-menu-list ul a,
body.theme-overhaul .side-menu .side-menu-list ul span,
body.theme-overhaul .side-menu .side-menu-list ul li.active > a,
body.theme-overhaul .side-menu .side-menu-list ul li.active > span,
body.theme-overhaul .side-menu .side-menu-list ul li.opened > a,
body.theme-overhaul .side-menu .side-menu-list ul li.opened > span,
body.theme-overhaul .side-menu [class*="SubMenu"] a,
body.theme-overhaul .side-menu [class*="SubMenu"] span,
body.theme-overhaul .side-menu [class*="SubMenu"] li.active > a,
body.theme-overhaul .side-menu [class*="SubMenu"] li.active > span,
body.theme-overhaul .side-menu [class*="submenu"] a,
body.theme-overhaul .side-menu [class*="submenu"] span,
body.theme-overhaul .side-menu [class*="sub-menu"] a,
body.theme-overhaul .side-menu [class*="sub-menu"] span {
    box-shadow: none !important;
}

/* ---- top header: indigo bar like the website nav (logo whitened via filter) ---- */
body.theme-overhaul .site-header {
    background: var(--ov-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: none;
}
body.theme-overhaul .site-header,
body.theme-overhaul .site-header a,
body.theme-overhaul .site-header .lbl,
body.theme-overhaul .site-header span,
body.theme-overhaul .site-header i { color: #fff !important; }
/* the only logo asset is the dark one; turn it white for the indigo bar */
body.theme-overhaul .site-header .site-logo img { filter: brightness(0) invert(1); }
body.theme-overhaul .site-header .gaims-version,
body.theme-overhaul .site-header .beta { color: rgba(255, 255, 255, 0.6) !important; }
/* the dropdown caret next to the avatar is dark-on-indigo by default → whiten it */
body.theme-overhaul .site-header .dropdown-toggle::after {
    color: #fff !important;
    border-top-color: #fff !important;
}
/* The white-text rule above is meant for the indigo bar itself. The header's
   dropdown MENUS (language + user) float on a WHITE surface, so the inherited
   white text made them invisible (white-on-white). Force their content dark. */
body.theme-overhaul .site-header .dropdown-menu,
body.theme-overhaul .site-header .dropdown-menu a,
body.theme-overhaul .site-header .dropdown-menu .dropdown-item,
body.theme-overhaul .site-header .dropdown-menu span,
body.theme-overhaul .site-header .dropdown-menu .lbl {
    color: var(--ov-text) !important;
}
body.theme-overhaul .site-header .dropdown-menu .dropdown-item:hover,
body.theme-overhaul .site-header .dropdown-menu .dropdown-item:focus,
body.theme-overhaul .site-header .dropdown-menu .dropdown-item.current {
    background: var(--ov-bg-soft) !important;
    color: var(--ov-primary) !important;
}
body.theme-overhaul .site-header .dropdown-menu .font-icon,
body.theme-overhaul .site-header .dropdown-menu i { color: var(--ov-text-muted) !important; }
/* hamburger / toggle lines visible on indigo */
body.theme-overhaul .show-hide-sidebar:before,
body.theme-overhaul .show-hide-sidebar:after,
body.theme-overhaul #show-hide-sidebar-toggle span { background: #fff !important; color: #fff !important; }

/* ---- content + panels: white cards, hairline border, soft radius, flat ---- */
body.theme-overhaul .page-content { background: var(--ov-bg-soft); }
body.theme-overhaul .box-typical,
body.theme-overhaul .panel,
body.theme-overhaul .card,
body.theme-overhaul .tbl-typical,
body.theme-overhaul .dashboard-widget {
    background: var(--ov-bg);
    border: 1px solid var(--ov-border);
    border-radius: var(--ov-radius);
    box-shadow: 0 1px 2px rgba(26, 26, 58, 0.04);
}

/* ---- panel / widget headers: light purple bar, indigo title, hairline ----
   This pairing is deliberately background-LIGHT + text-DARK. The heading text is
   var(--ov-primary) (#2D2B6B), set both by this rule and again below, so the
   background has to stay light for the text to survive. A previous medium purple
   (#444188) measured 1.41:1 against that text live in Chrome — WCAG AA wants 4.5:1
   for normal text — which left the headings ("Basis"/"Standard"/"Hoch" on
   /assets/overview) effectively unreadable. #E8E3F7 measures ~10:1 (AAA) and still
   reads as light purple. If you change either colour, re-check the other. */
body.theme-overhaul .box-typical-header,
body.theme-overhaul .panel-heading {
    background: #E8E3F7 !important;
    color: var(--ov-primary) !important;
    border-bottom: 1px solid var(--ov-border);
    font-weight: 800;
    letter-spacing: -0.01em;
}
body.theme-overhaul .box-typical-header,
body.theme-overhaul .box-typical-header a,
body.theme-overhaul .box-typical-header span,
body.theme-overhaul .panel-heading,
body.theme-overhaul .panel-heading a { color: var(--ov-primary) !important; }
/* Counterpart of the light-purple background above. The dashboard widget's title bar
   IS a .panel-heading, and dashboard.css:238-243 paints its .panel-title white — which
   worked against the old medium purple (~8.9:1) but would be invisible on a light bar
   (~1.2:1). Pull that title back to the same indigo the other headings use. Specificity
   (0,3,1) + !important beats dashboard.css's (0,2,0) `color: white`; the override lives
   here, in the theme layer, rather than editing the page CSS. */
body.theme-overhaul .gaims-widget .panel-title { color: var(--ov-primary) !important; }
body.theme-overhaul .box-typical-header .tbl-typical-controls .fa,
body.theme-overhaul .box-typical-header [class^="font-icon"] { color: var(--ov-text-muted); }

/* ---- buttons: flat, 7px radius; PRIMARY = green CTA (like the website) ---- */
body.theme-overhaul .btn {
    border-radius: var(--ov-radius);
    font-weight: 700;
    box-shadow: none;
    background-image: none;
}
body.theme-overhaul .btn-primary {
    background: var(--ov-accent) !important;
    border-color: var(--ov-accent) !important;
    color: var(--ov-primary) !important;
}
body.theme-overhaul .btn-primary:hover,
body.theme-overhaul .btn-primary:focus {
    background: var(--ov-accent-dark) !important;
    border-color: var(--ov-accent-dark) !important;
    color: #fff !important;
}
body.theme-overhaul .btn-success,
body.theme-overhaul .btn-accent {
    background: var(--ov-accent);
    border-color: var(--ov-accent);
    color: var(--ov-primary);
}
body.theme-overhaul .btn-success:hover,
body.theme-overhaul .btn-accent:hover {
    background: var(--ov-accent-dark);
    border-color: var(--ov-accent-dark);
    color: #fff;
}
body.theme-overhaul .btn-default,
body.theme-overhaul .btn-secondary {
    background: #fff;
    border: 1px solid var(--ov-border);
    color: var(--ov-text);
}

/* ---- form controls: clean, indigo focus ring ---- */
body.theme-overhaul .form-control,
body.theme-overhaul .form-select {
    border: 1px solid var(--ov-border);
    border-radius: var(--ov-radius);
    color: var(--ov-text);
}
body.theme-overhaul .form-control:focus,
body.theme-overhaul .form-select:focus {
    border-color: var(--ov-primary);
    box-shadow: 0 0 0 0.2rem rgba(45, 43, 107, 0.15);
}

/* ---- tables: light, clean ---- */
body.theme-overhaul .table thead th,
body.theme-overhaul table.table thead th {
    color: var(--ov-primary);
    border-bottom: 2px solid var(--ov-border);
    background: var(--ov-bg);
}
body.theme-overhaul .table td,
body.theme-overhaul .table th { border-color: var(--ov-border); }

/* ---- sweetalert2 modals/toasts: brand buttons + soft radius ---- */
body.theme-overhaul .swal2-popup { border-radius: var(--ov-radius); font-family: var(--ov-font); }
body.theme-overhaul .swal2-title { color: var(--ov-primary); font-weight: 800; }
body.theme-overhaul .swal2-styled { border-radius: var(--ov-radius); font-weight: 700; box-shadow: none; }
body.theme-overhaul .swal2-styled.swal2-confirm { background: var(--ov-primary) !important; color: #fff !important; }
body.theme-overhaul .swal2-styled.swal2-confirm:hover { background: var(--ov-primary-dark) !important; }
body.theme-overhaul .swal2-styled.swal2-cancel { background: #fff !important; border: 1px solid var(--ov-border) !important; color: var(--ov-text) !important; }
body.theme-overhaul .swal2-icon.swal2-success [class^="swal2-success-line"],
body.theme-overhaul .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--ov-accent); color: var(--ov-accent); }

/* ---- misc brand accents ---- */
body.theme-overhaul .badge.badge-primary,
body.theme-overhaul .label-primary { background: var(--ov-primary); }
body.theme-overhaul .nav-tabs .nav-link.active { color: var(--ov-primary); border-bottom-color: var(--ov-accent); }
body.theme-overhaul .progress-bar { background-color: var(--ov-accent); }

/* ============================================================================
 * Website-alignment pass: bolder titles + green eyebrow, more whitespace, softer cards
 * ========================================================================== */

/* page titles: bigger, bolder, tight — with a short green accent bar underneath
   (the "eyebrow" gesture from the website headlines) */
body.theme-overhaul .page-content h1,
body.theme-overhaul .page-content > h1,
body.theme-overhaul h1.page-title {
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15;
    margin-bottom: 20px;
}
body.theme-overhaul .page-content h1::after,
body.theme-overhaul h1.page-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 10px;
    background: var(--ov-accent);
    border-radius: 2px;
}

/* more breathing room in the content area — only horizontal/bottom, NEVER override
   padding-top (the template uses it to clear the fixed 120px topbar; clobbering it
   tucks the page title/toolbar under the header). */
body.theme-overhaul .page-content {
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}

/* softer, slightly larger cards */
body.theme-overhaul .box-typical,
body.theme-overhaul .panel,
body.theme-overhaul .card,
body.theme-overhaul .tbl-typical {
    border-radius: 10px;
}
/* More bottom breathing room than the admin template's default: main.css ships
   `.box-typical { margin: 0 0 20px }`, which is only (0,1,0), so these (0,2,1)
   selectors win on specificity alone — no !important needed. */
body.theme-overhaul .box-typical,
body.theme-overhaul .panel,
body.theme-overhaul .card,
body.theme-overhaul .tbl-typical {
    margin-bottom: 40px;
}
body.theme-overhaul .box-typical-header,
body.theme-overhaul .panel-heading { padding: 16px 20px !important; }
/* the dashboard widget's compact dark title bar wants a tighter inset than the generic
   16/20 above. This replaces a `margin: -5px` on .gaims-widget .panel-title, which did
   nothing but cancel 5px of that padding on each side — so the inset silently drifted
   whenever this padding was retuned. Restate the value per breakpoint: the ≤576px block
   at the end of this file drops .panel-heading to 12px 14px. */
body.theme-overhaul .gaims-widget .panel-heading { padding: 11px 15px !important; }

/* calmer tables: more row height, softer lines, subtle row hover */
body.theme-overhaul .table td,
body.theme-overhaul table.table td {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    border-color: #EEEEF3 !important;
    vertical-align: middle;
}
body.theme-overhaul .table thead th,
body.theme-overhaul table.table thead th { padding-top: 12px !important; padding-bottom: 12px !important; }
body.theme-overhaul .table tbody tr:hover,
body.theme-overhaul table.table tbody tr:hover { background: var(--ov-bg-soft); }

/* toolbar buttons a touch more separated */
body.theme-overhaul .btn { padding-left: 15px; padding-right: 15px; }

/* ---- dashboard grid: never push a horizontal scrollbar onto the whole page ----
   Gridster is a fixed-pixel grid. A layout saved wider than the current content
   column (e.g. the "Test Dashboard") otherwise makes the ENTIRE document scroll
   sideways, which shifts the topbar/sidebar and looks like the sidebar "stealing"
   width. Confine any horizontal overflow to the grid's own box so the page chrome
   stays put. Pages without a wide grid never overflow, so this is a no-op there.

   The containment lives on `.gaims-dashboard` (gridster's direct parent), NOT on
   `.gridster` itself, and must stay there. `.gaims-dashboard` has no pinned height —
   it tracks its content (measured 620 = its own scrollHeight) — whereas gridster's
   JS pins an inline height on `.gridster` equal to only the rows its real widgets
   occupy, while empty placeholder cells tile on past that height. Per spec, a
   non-visible overflow on one axis coerces a `visible` value on the OTHER axis to
   `auto`. Adding `overflow-x: auto` to `.gridster` therefore silently coerced its
   untouched `overflow-y` to `auto` too, turning it into a VERTICAL scroll container
   that clipped the placeholder rows below the pinned height out of pointer reach —
   the empty squares stopped responding to hover and click. Adding an explicit
   `overflow-y: visible` alongside does NOT rescue this: that is precisely the value
   that gets coerced. Do not move this containment back onto `.gridster`.

   This supersedes commit f037f6c7 ("hide Chrome's gridster scrollbars so the canvas
   measures like Firefox"), whose scrollbar-suppression pseudo-element rule is
   deleted below: with `.gridster` back to `overflow: visible` on both axes it is
   not a scroll container at all, so it emits no scrollbars — f037f6c7's goal is
   now met at the root instead of cosmetically.

   Residual risk: `.gaims-dashboard` is `height: 100%` (dashboard.css:4), which
   resolves to content height in the current layout, so the `overflow-y` coerced
   onto it here is harmless today. If a future layout ever gave it a definite,
   SHORTER height, it would clip the same way — that is the first thing to check
   if the empty squares go dead again. */
body.theme-overhaul .page-content .gridster {
    max-width: 100%;
}
body.theme-overhaul .page-content .gaims-dashboard {
    max-width: 100%;
    overflow-x: auto;
}

/* ---- dashboard widget options toggle (···) ----
   Each widget's control cluster (.widgetBtnList) is absolutely positioned at top:-10px,
   so the "⋯" options toggle floats ~10px ABOVE the widget edge — a stray dark-blue dot
   cluster hovering in the gap between rows. Pull it inside the widget's top-right corner
   and turn it into a muted, hoverable control instead of a hard dark-blue glyph. */
body.theme-overhaul .gaims-widget .button-list.widgetBtnList,
body.theme-overhaul .dashboard-widget .button-list.widgetBtnList {
    top: 6px !important;
    right: 10px !important;
}
body.theme-overhaul .gaims-widget .glyphicon-option-horizontal,
body.theme-overhaul .dashboard-widget .glyphicon-option-horizontal {
    color: var(--ov-text-muted) !important;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
body.theme-overhaul .gaims-widget .glyphicon-option-horizontal:hover,
body.theme-overhaul .dashboard-widget .glyphicon-option-horizontal:hover {
    background: var(--ov-bg-soft) !important;
    color: var(--ov-primary) !important;
}

/* ============================================================================
 * Responsive pass — the admin template uses a fixed 240px sidebar that keeps
 * eating content width as the window shrinks (and never collapses on phones).
 * Below we (1) let wide tables scroll inside their card instead of being cut
 * off, and (2) turn the sidebar into an off-canvas overlay on narrow viewports.
 * The hamburger (#show-hide-sidebar-toggle) toggles body.sidebar-hidden; on the
 * desktop that hides the sidebar, so on narrow screens we repurpose the same
 * class to SHOW the overlay (default = hidden) — shrinking the window no longer
 * crushes the content.
 * ========================================================================== */

/* hard guarantee: no page ever scrolls sideways. Stray absolutely-positioned panels
   (e.g. the Task Manager's tab row) otherwise push the whole document wider than the
   viewport. overflow-x:clip (not hidden) clips the horizontal spill WITHOUT turning
   page-content into a scroll container, so downward dropdowns/menus still overflow
   freely and the in-card table scrollers keep working. */
body.theme-overhaul .page-content { position: relative; overflow-x: clip; }

/* select2 keeps the ORIGINAL <select> in the DOM as .select2-hidden-accessible and
   relies on an sr-only clip to hide it. On some pages (e.g. Task Manager) that clip
   is missing, so a full-width hidden <select> pushes a horizontal scrollbar onto the
   whole page. Re-assert the standard visually-hidden clip. */
body.theme-overhaul select.select2-hidden-accessible,
body.theme-overhaul .select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* wide tables (DataTables / Bootstrap) scroll horizontally INSIDE their card
   rather than being clipped at the page edge */
body.theme-overhaul .dataTables_wrapper,
body.theme-overhaul .table-responsive,
body.theme-overhaul .box-typical-body > .table,
body.theme-overhaul .tbl-typical { overflow-x: auto; }
body.theme-overhaul .dataTables_wrapper > .table,
body.theme-overhaul .table-responsive > .table { min-width: 640px; }

/* toolbar: let action buttons wrap cleanly with even spacing instead of
   colliding / overflowing when the panel narrows */
body.theme-overhaul .box-typical-header .btn-toolbar,
body.theme-overhaul .panel-heading .btn-toolbar,
body.theme-overhaul .tbl-typical-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.theme-overhaul .box-typical-header .btn-toolbar .btn,
body.theme-overhaul .tbl-typical-controls .btn { margin: 0 !important; }

/* ---- ≤1200px: trim the sidebar + content padding so mid-size windows breathe ---- */
@media (max-width: 1200px) {
    body.theme-overhaul .page-content { padding-left: 20px; padding-right: 20px; }
}

/* ---- ≤1024px (iPad portrait + phones): sidebar becomes an off-canvas drawer ----
   >1024px (laptop/MacBook) keeps the normal fixed sidebar. */
@media (max-width: 1024px) {
    body.theme-overhaul .side-menu {
        position: fixed !important;
        top: 0;
        left: 0 !important; /* template sets left:-240px on mobile; pin to 0 so transform math is correct */
        width: 280px !important;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1050 !important;
        box-shadow: 2px 0 18px rgba(20, 20, 40, 0.28);
    }
    /* the template hides the hamburger (display:none!important) on narrow screens,
       leaving no way to open the menu — force it visible so the drawer is reachable */
    body.theme-overhaul .show-hide-sidebar,
    body.theme-overhaul #show-hide-sidebar-toggle {
        display: block !important;
    }
    /* keep the header (and thus the hamburger) ABOVE the open drawer so a second
       tap on the burger closes it; push the drawer's items below the 120px header */
    body.theme-overhaul .site-header { z-index: 1060 !important; }
    body.theme-overhaul .side-menu { padding-top: 72px !important; }
    /* hamburger pressed → slide the drawer in (override the template's display:none) */
    body.theme-overhaul.sidebar-hidden .side-menu {
        transform: translateX(0) !important;
        display: block !important;
    }
    /* tap-outside-to-close backdrop (real element added by overhaul.js so it is
       clickable; a CSS ::after cannot receive clicks). Shown only while the drawer
       is open. z below the drawer (1050) so the drawer stays interactive. */
    body.theme-overhaul .ov-sidebar-backdrop { display: none; }
    body.theme-overhaul.sidebar-hidden .ov-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(20, 20, 40, 0.40);
        z-index: 1040;
    }
    /* content always uses the full width on narrow screens */
    body.theme-overhaul .page-content,
    body.theme-overhaul.with-side-menu .page-content,
    body.theme-overhaul.sidebar-hidden .page-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
    }

    /* ---- mobile header layout ----
       The base admin theme, at ≤1056px, hides the logo (img.hidden-md-down →
       display:none, with no fallback image), hides the LEFT hamburger, and shows a
       second RIGHT "burger-right" that in this app opens an empty collapsed panel —
       leaving the language/print/user dropdowns floating with no arrangement. Result:
       missing logo + mis-placed burger + crammed profile. We give the header an explicit
       flex row: [hamburger] [logo] ……… [lang · print · user], drop the dead decoy burger,
       and restore the (already inverted-to-white) logo. */
    /* the base theme makes the fixed header 120px tall on mobile — far too thick for a
       bar that only holds a burger, logo and three icons. Slim it to 64px and pull the
       content / drawer top-offsets in to match. */
    body.theme-overhaul .site-header {
        height: 64px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    body.theme-overhaul .page-content,
    body.theme-overhaul.with-side-menu .page-content,
    body.theme-overhaul.sidebar-hidden .page-content {
        padding-top: 82px !important;
    }
    body.theme-overhaul .site-header .container-fluid {
        display: flex !important;
        align-items: center;
        height: 64px;
        gap: 10px;
        padding-left: 14px;
        padding-right: 14px;
    }
    /* left hamburger first, de-floated */
    body.theme-overhaul .site-header .show-hide-sidebar,
    body.theme-overhaul .site-header #show-hide-sidebar-toggle {
        order: 1;
        float: none;
        top: 0;
        flex: 0 0 auto;
        margin: 0;
    }
    /* logo second — force it visible (base hides it on mobile) and size it sanely */
    body.theme-overhaul .site-header .site-logo {
        order: 2;
        float: none;
        height: auto;
        line-height: 1;
        flex: 0 0 auto;
    }
    body.theme-overhaul .site-header .site-logo img {
        display: inline-block !important;
        float: none;
        height: 32px;
        width: auto;
        top: 0;
    }
    /* right cluster (lang · print · user) pushed to the far right, cleanly spaced */
    body.theme-overhaul .site-header .site-header-content {
        order: 3;
        float: none !important;
        width: auto !important;
        margin: 0 0 0 auto !important;
        flex: 0 1 auto;
        min-width: 0;
    }
    body.theme-overhaul .site-header .site-header-content-in { margin-left: 0 !important; }
    body.theme-overhaul .site-header .site-header-shown {
        float: none;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    /* the decoy right-hand hamburger opens an empty panel in this app → remove it so
       there is exactly one (working) hamburger, on the left */
    body.theme-overhaul .site-header .burger-right { display: none !important; }
    /* the version/beta tags clutter the tight mobile bar → hide them */
    body.theme-overhaul .site-header .gaims-version,
    body.theme-overhaul .site-header .beta { display: none; }
}

/* ---- dashboard: replace gridster's fixed-pixel absolute layout with a clean,
   always-fitting CSS grid ----
   Gridster positions every widget with inline absolute px (left/top/width/height),
   so the "Test Dashboard" never reflows, overflows its column, and looks cramped at
   any width. Override the inline geometry (CSS !important beats inline styles) so the
   widgets become a tidy responsive grid: 2 columns on desktop, 1 column ≤1024px.
   (This is visual only; the drag-to-arrange editor still writes its own data.) */
/* NOTE: no mobile reflow of the gridster canvas. Gridster is a fixed-pixel absolute grid
   whose widgets render their tables/charts sized to concrete px dimensions set at load. Any
   attempt to linearise it on mobile (position:static / height:auto) either collapses the
   inner .content to 0 (empty frames) or leaves huge gaps from the widgets' original heights.
   Instead we keep the native, working canvas and let it scroll inside .page-content
   (overflow-x:auto above) — content always renders exactly as on desktop. */

/* ---- ≤576px: phones — tighten further ---- */
@media (max-width: 576px) {
    body.theme-overhaul .page-content { padding-left: 12px !important; padding-right: 12px !important; }
    body.theme-overhaul .page-content h1,
    body.theme-overhaul h1.page-title { font-size: 23px !important; margin-bottom: 14px; }
    body.theme-overhaul .box-typical-header,
    body.theme-overhaul .panel-heading { padding: 12px 14px !important; }
    /* never let the page itself scroll sideways on a phone */
    body.theme-overhaul { overflow-x: hidden; }

    /* toolbar buttons (Delete / New / Export / Filter …) are `float-left`/`float-right`
       inside plain Bootstrap columns — NOT a flex container — so `gap` never applies and
       they collide edge-to-edge when they wrap on a phone. De-float them and space them
       with margins instead. Keep their native (btn-sm) size so they don't turn chunky. */
    body.theme-overhaul .page-content .btn.float-left,
    body.theme-overhaul .page-content .btn.float-right,
    body.theme-overhaul .page-content [class*="btn_toolbar"] {
        float: none !important;
        display: inline-flex !important;
        align-items: center;
        margin: 0 8px 8px 0 !important;
        vertical-align: top;
    }
}

/* ============================================================================
 * Iteration 2 — visual polish closer to the new interface:
 *   (A) sidebar hover contrast   (B) search field shape
 *   (C) icon palette             (D) button palette
 * ========================================================================== */

/* (A) SIDEBAR HOVER — never unreadable.
   The base admin theme applies a light hover background and turns the label grey
   (.lbl:hover{color:grey}) on some menu variants, so the white text vanishes. Force
   every hover/focus state to a dark tint with white text. Icons keep their palette. */
body.theme-overhaul .side-menu a:hover,
body.theme-overhaul .side-menu a:focus,
body.theme-overhaul .side-menu li:hover > a,
body.theme-overhaul .side-menu li:hover > span,
body.theme-overhaul .side-menu .side-menu-list a:hover,
body.theme-overhaul .side-menu [class*="SubMenu"] a:hover,
body.theme-overhaul .side-menu ul a:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}
body.theme-overhaul .side-menu a:hover,
body.theme-overhaul .side-menu a:hover .lbl,
body.theme-overhaul .side-menu a:hover span,
body.theme-overhaul .side-menu li:hover > a .lbl,
body.theme-overhaul .side-menu li:hover > span .lbl,
body.theme-overhaul .side-menu .lbl:hover,
body.theme-overhaul .side-menu span:hover .lbl {
    color: #ffffff !important;
}

/* (B) SEARCH FIELD — compact pill, on the same row as the action buttons.
   The global `.form-control` 7px radius had flattened it into a clunky rectangle; it was
   also oversized (50px tall / 220px wide) and sat on its own row BELOW the toolbar buttons.
   Below we (1) make it a compact pill, then (2) merge it onto the button row. */
body.theme-overhaul .fixed-table-toolbar .search input,
body.theme-overhaul .fixed-table-toolbar input.search-input,
body.theme-overhaul .search > input.form-control,
body.theme-overhaul .search input.form-control {
    box-sizing: border-box !important;   /* base uses content-box → padding inflated it to 50px */
    border-radius: 400px !important;
    height: 36px !important;
    padding: 6px 16px !important;
    width: 200px !important;
    font-size: 13px !important;
}
body.theme-overhaul .form-control-rounded { border-radius: 400px !important; }
body.theme-overhaul .fixed-table-toolbar {
    min-height: 0 !important;
    padding-top: 0 !important;
}

/* Merge the action buttons and the search onto ONE row.
   DOM reality on overview pages: the toolbar buttons (Delete/New/Export…) live in a
   `col-xl-12` that COLLAPSES to height 0 (its children float), sitting directly above the
   bootstrap-table's own `.fixed-table-toolbar` (which renders the search + column dropdown).
   They are two separate, vertically-stacked blocks.

   Earlier attempts moved the SEARCH up with a negative margin — but the search sits inside
   `.table-responsive`, whose `overflow` then CLIPPED it (search vanished) or the table
   block's stacking made it unclickable. So instead we move the *button column* DOWN onto
   the table toolbar's empty left side:
     • `translateY` on the button column has NO layout impact and the buttons live OUTSIDE
       the table's overflow box, so nothing is clipped and the search stays fully clickable;
     • pulling the whole content block up by the same amount closes the band the buttons
       vacated, so the title→toolbar gap stays tight.
   Scoped with `:has()` so ONLY overview pages that actually have both a toolbar-button
   column and a bootstrap-table search are affected — every other page is untouched.

   THE TWO RULES BELOW ARE A MATCHED PAIR and must fire together or not at all: the pull
   only looks right because the push puts the buttons back. That invariant was broken once,
   and this is how: the pull was keyed loosely on `:has([class*="btn_toolbar"])` while the
   push is keyed on `.col-xl-12`. Most overviews wrap their toolbar in a `col-xl-12`, but
   seven templates do not — asset_overview_table (col-md-8 p-l-lg), data-breaches_overview
   (col-md-8 p-l-lg), vt-processes_overview (col-md-8 p-l-lg), requirements (col-md-8 mt-3),
   threats (col-md-5 mt-3), elemental_threats (col-md-5 m-t-1), suppliers_overview
   (col-md-12 pr-0) — so those pages got the pull with no push and their buttons rendered
   34px too high, on the page background ABOVE the white card. Measured on /assets/overview:
   first button y=184.5 against a card starting at y=201.5; after this fix y=218.5, which is
   exactly where /tasks/overview (a working col-xl-12 page) puts it. The pull therefore now
   requires a col-xl-12 button column too, matching the push's own condition.

   REJECTED ALTERNATIVE — do not retry: generalising the push from `.col-xl-12` to
   `[class*="col-"]` does move the buttons back inside the card, but since `translateY` has
   no layout impact it then drops them straight on top of the "Default / Filter anwenden"
   filter row that these seven pages have and the col-xl-12 pages lack (verified visually).
   Withholding the pull avoids the collision entirely and costs only the closed-up gap. */
body.theme-overhaul .table-section-body:has(.fixed-table-toolbar):has(.col-xl-12 > [class*="btn_toolbar"]) {
    margin-top: -34px !important;
}
body.theme-overhaul .table-section-body:has(.fixed-table-toolbar) .col-xl-12:has(> [class*="btn_toolbar"]) {
    transform: translateY(34px);
    position: relative;
    z-index: 5;
    margin-bottom: 0 !important;
}
body.theme-overhaul .fixed-table-toolbar .search.btn-group,
body.theme-overhaul .fixed-table-toolbar .search,
body.theme-overhaul .fixed-table-toolbar .columns.columns-right { margin-bottom: 0 !important; }

/* Put the table's search box on the same line as the "Suchoptionen" control.
   NOT a padding problem on the search, though it looks like one: bootstrap-table does give
   `.fixed-table-toolbar .search` a `padding-bottom: 20px` (main.css), but zeroing that only
   shrinks the wrapper 56px -> 36px and leaves the input at the SAME y — measured, so it is
   ruled out as the cause. Do not "fix" it there.
   The real cause is that "Suchoptionen" lives in a separate, absolutely-positioned filter
   row (`div.left.row.col-md-10.mt-3.position-absolute`) whose `mt-3` adds margin-top:16px —
   exactly the offset seen (/vtprocesses/overview: search input top 307.5 vs Suchoptionen
   323.5). That stray `mt-3` survived because gaims.css's toolbar-row normalisation
   deliberately skips `.filterContainer` and `position-absolute` rows (see its comment).
   Zeroing it aligns the two: measured delta -16 -> 0, no collision with the buttons above.
   Scope checked — exactly 4 templates carry this row: Blocks/asset_overview_table,
   Blocks/tasks_overview_table, Public/data-breaches_overview, Public/vt-processes_overview.
   On /tasks/overview the row is EMPTY and has no Suchoptionen button; zeroing its margin
   there just moves it 317.5 -> 301.5 with no overlap, so this is safe on all four. */
body.theme-overhaul .box-typical-body .tab-pane > .row.position-absolute.mt-3 {
    margin-top: 0 !important;
}
/* ...and give that gap back on the OTHER side. Zeroing the `mt-3` above removed the only
   separation between the toolbar buttons row and the filter row, leaving them flush
   (measured on /assets/overview: buttons row bottom 249.5, filter row top 249.5, gap 0).
   Putting the space on the buttons row instead keeps the alignment intact: the filter row
   is `position: absolute` with `top: auto`, so it sits at its STATIC position, and the
   bootstrap-table search sits in the following in-flow `.fixed-table-toolbar` — a bottom
   margin here therefore pushes BOTH down by the same amount rather than re-introducing the
   16px offset the rule above exists to remove. Measured: gap 0 -> 16px, filter row and
   search input both 249.5 -> 265.5, alignment delta still 0, table top 305.5 -> 321.5.
   16px matches the rhythm already in use here (the row's original mt-3 and
   .table-section-body's 1rem padding are both 16px).

   The `:not(:has(.col-xl-12 > [class*="btn_toolbar"]))` guard is load-bearing: on
   col-xl-12 pages the button column is deliberately translated 34px DOWN onto the search
   row (the matched pull/push pair earlier in this file), so there is no separate buttons
   row to separate there and a bottom margin would shift their search row instead. Same
   condition as the pull rule, so all three rules agree on which pages are which. */
body.theme-overhaul .table-section-body .tab-pane > .row:has([class*="col-"] > [class*="btn_toolbar"]):not(:has(.col-xl-12 > [class*="btn_toolbar"])) {
    margin-bottom: 16px;
}
/* ...and the same gap where the row that touches the absolute filter row is NOT the buttons
   row. This keys on whatever row immediately PRECEDES that filter row, because which row
   that is differs per page: on /assets/overview it is the buttons row, but on
   /tasks/overview the order is buttons -> `.filterContainer.mt-5` -> absolute filter row,
   so the buttons row already has a 48px gap below it (and the rule above changed nothing
   there, its 16px collapsing against that larger `mt-5`) while `.filterContainer` sat flush
   against the filter row — bottom 301.5 vs top 301.5, gap 0.
   Where this does land on the buttons row it sets the SAME 16px as the rule above, so the
   two selectors agree rather than compounding (margin is not additive).
   Alignment survives for the same reason as above: the filter row sits at its static
   position and the bootstrap-table search follows in flow, so both shift down together.
   Measured on /tasks/overview: gap 0 -> 16px, filter row and search input both 301.5 ->
   317.5, search-vs-row delta still 0, table top 357.5 -> 373.5, no overlap.
   No col-xl-12 guard is needed here: only 4 templates contain the absolute `.mt-3` row at
   all, so the genuinely merged col-xl-12 pages cannot match this selector. */
body.theme-overhaul .table-section-body .tab-pane > .row:has(+ .row.position-absolute.mt-3) {
    margin-bottom: 16px;
}

/* Keep the bootstrap-table toolbar clear of the "Filter" button on the MERGED pages.
   Reported on /isms/overview/209 as the search box overlapping the filter button, and it is
   a direct consequence of the pull/push pair above: on col-xl-12 pages the button column is
   translated 34px DOWN onto the search line, and `translateY` has no layout impact, so its
   right-floated "Filter" button keeps the horizontal position it had on its own row — hard
   against the card's right edge, i.e. on top of what the toolbar puts there.
   Measured on /isms/overview/209: Filter spans 1695.03-1780, the search input ends at 1705
   (overlap 9.97px) and the bootstrap-table columns dropdown sits at 1735-1765, i.e. entirely
   underneath the button, which also carries `z-index: 5` from the push rule — so the columns
   dropdown was not merely ugly but unclickable. Reserving the space on the toolbar (rather
   than nudging just the search) fixes both at once: `.columns-right` and `.search` are both
   right floats in this container, so they shift left together and keep their own 30px gap.
   95px = the toolbar's original 15px padding + 80px of reserve, where 80 = the button's
   84.97px width + a 10px gap - the 15px the rightmost float already sits inside the padding
   box. Measured after: columns dropdown 10.03px clear of Filter, search 70.03px clear, table
   and buttons unmoved. The reserve is a constant because the button is a constant: all 10
   affected templates render the same single `btn.filter` outline button (isms/orp/ops/con/
   der/dsms overview blocks + assignments, dsgvo_dataProcessor, dsgvo_responsible,
   security_rules); a wider right-floated button would need this value revisited.
   `:not(.hidden)` is load-bearing: 13 further col-xl-12 templates ship the same button with
   `hidden` (display:none) and only reveal it at runtime, and pages where it stays hidden have
   nothing to clear — verified on /services/overview that it keeps padding-right 15px and its
   search does not move. `:has(.fixed-table-toolbar):has(.col-xl-12 > [class*="btn_toolbar"])`
   repeats the pull rule's own condition so all these rules agree on which pages are merged;
   the seven non-col-xl-12 overviews (assets, data breaches, VT processes, ...) keep their
   buttons on a separate row and are untouched. */
body.theme-overhaul .table-section-body:has(.fixed-table-toolbar):has(.col-xl-12 > [class*="btn_toolbar"].float-right:not(.hidden)) .fixed-table-toolbar {
    padding-right: 95px;
}

/* Focused search box: a 1px dark-purple border instead of the soft indigo halo.
   The halo is this file's own `.form-control:focus { box-shadow: 0 0 0 0.2rem rgba(45,43,107,
   .15) }` (3.2px, so it reads as a thick border on a 30px-tall pill), and the border it sits
   on was NOT indigo: main.css ships `.form-control:focus { border-color: #c5d6de !important }`
   whose `!important` beat this file's `border-color: var(--ov-primary)` — measured
   rgb(197,214,222) on focus. Hence `!important` here; specificity alone is not enough.
   Scoped to the bootstrap-table search input, which is every overview page's search box, and
   deliberately NOT to `.form-control` at large — the halo stays the focus affordance on
   ordinary form fields. Measured on /isms/overview/209: border 1px solid rgb(45,43,107),
   box-shadow none. */
body.theme-overhaul .bootstrap-table .fixed-table-toolbar .search .form-control:focus,
body.theme-overhaul .bootstrap-table .fixed-table-toolbar .search .form-control.search-input:focus {
    border: 1px solid var(--ov-primary) !important;
    box-shadow: none;
}

/* (C) SIDEBAR ICON PALETTE — replace the flat monochrome green with a small, cohesive
   brand palette cycled across top-level items, so sections read as distinct but on-brand.
   (Sub-menu icons stay a calm neutral so nested lists don't get noisy.) */
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+1) > a > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+1) > span > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+1) > a > [class*="font-icon"],
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+1) > span > [class*="font-icon"] { color: #7AB800 !important; } /* green */
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+2) > a > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+2) > span > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+2) > a > [class*="font-icon"],
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+2) > span > [class*="font-icon"] { color: #3D8BE0 !important; } /* blue */
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+3) > a > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+3) > span > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+3) > a > [class*="font-icon"],
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+3) > span > [class*="font-icon"] { color: #1FB6B6 !important; } /* teal */
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+4) > a > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+4) > span > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+4) > a > [class*="font-icon"],
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+4) > span > [class*="font-icon"] { color: #F2A93B !important; } /* amber */
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+5) > a > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+5) > span > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+5) > a > [class*="font-icon"],
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n+5) > span > [class*="font-icon"] { color: #E0637E !important; } /* rose */
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n) > a > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n) > span > i,
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n) > a > [class*="font-icon"],
body.theme-overhaul .side-menu .side-menu-list > li:nth-of-type(6n) > span > [class*="font-icon"] { color: #9B8BF0 !important; } /* violet */
/* nested sub-menu icons: calm, low-key */
body.theme-overhaul .side-menu [class*="SubMenu"] i,
body.theme-overhaul .side-menu .side-menu-list ul i { color: rgba(255, 255, 255, 0.5) !important; }

/* (D) BUTTON PALETTE — crisp, distinct, on-brand (fixes muddy dark-text-on-green).
   Primary/success = green CTA with WHITE text; info = blue; danger = red;
   default/secondary = white + indigo text + hairline. */
body.theme-overhaul .btn-primary,
body.theme-overhaul .btn-success,
body.theme-overhaul .btn-accent {
    background: var(--ov-accent) !important;
    border-color: var(--ov-accent) !important;
    color: #ffffff !important;
}
body.theme-overhaul .btn-primary:hover,
body.theme-overhaul .btn-primary:focus,
body.theme-overhaul .btn-success:hover,
body.theme-overhaul .btn-accent:hover {
    background: var(--ov-accent-dark) !important;
    border-color: var(--ov-accent-dark) !important;
    color: #ffffff !important;
}
body.theme-overhaul .btn-info {
    background: #2E75B6 !important;
    border-color: #2E75B6 !important;
    color: #ffffff !important;
}
body.theme-overhaul .btn-info:hover,
body.theme-overhaul .btn-info:focus { background: #245E94 !important; border-color: #245E94 !important; }
body.theme-overhaul .btn-danger {
    background: #D94040 !important;
    border-color: #D94040 !important;
    color: #ffffff !important;
}
body.theme-overhaul .btn-danger:hover,
body.theme-overhaul .btn-danger:focus { background: #BF3535 !important; border-color: #BF3535 !important; }
body.theme-overhaul .btn-default,
body.theme-overhaul .btn-secondary {
    background: #ffffff !important;
    border: 1px solid var(--ov-border) !important;
    color: var(--ov-primary) !important;
}
body.theme-overhaul .btn-default:hover,
body.theme-overhaul .btn-default:focus,
body.theme-overhaul .btn-secondary:hover,
body.theme-overhaul .btn-secondary:focus {
    background: var(--ov-bg-soft) !important;
    color: var(--ov-primary) !important;
    border-color: var(--ov-border) !important;
}

/* (E) PAGE-TITLE EYEBROW — remove the little green underline bar under h1 titles
   (the "eyebrow" accent read as a stray green stripe under page names). */
body.theme-overhaul .page-content h1::after,
body.theme-overhaul .page-content > h1::after,
body.theme-overhaul h1.page-title::after {
    display: none !important;
    content: none !important;
}

/* (F) ROW ACTION ICONS — the per-row action glyphs (edit / view / history / manager in
   the Action column, `.actions i` a.k.a. .btn_assetsOverview) were dark navy; make them
   on-brand green with a darker hover for affordance. */
body.theme-overhaul .actions i,
body.theme-overhaul td .actions i,
body.theme-overhaul .actions .btn_assetsOverview,
body.theme-overhaul i.btn_assetsOverview,
body.theme-overhaul .tbl-typical td .actions i {
    color: #5A8800 !important;   /* readable green on white */
    transition: color .12s;
}
body.theme-overhaul .actions i:hover,
body.theme-overhaul .actions .btn_assetsOverview:hover,
body.theme-overhaul i.btn_assetsOverview:hover {
    color: var(--ov-primary) !important;
}