/* ---------------------------------------------------------------------------
   Tema "corporate modern": i componenti condivisi della intranet.

   Completa theme-modern.css per i componenti che stanno fuori da .body-content (aggiunti al <body>
   dal JS: dialoghi, datepicker, menu contestuale, notifiche) o che hanno un CSS proprio
   (LorenzoTable, LXTable, popover di validazione).
   Tutto sotto body.theme-modern e tutto a variabili: Alien (theme-alien.css) li eredita.
   In Vanilla (nessuna classe del tema) valgono i CSS classici: css\LorenzoTable.css, css\LXTable.css,
   css\LorenzoContextMenu.css, css\NotifyPopup.css, Components\Datepicker\css\bootstrap-datepicker3.min.css.
   --------------------------------------------------------------------------- */

/* =========================================================================
   Dialogs: Scripts\common.js (ShowOkCancelDialog, ShowMessage, ShowWaitingDialog, ShowSendEmailDialog),
   Scripts\Resources\NotificationPlayer.js and the Bootstrap modals written in the views
   ========================================================================= */
body.theme-modern .modal-backdrop.in {
    background-color: #0b0d12;
    opacity: .6;
}

body.theme-modern .modal-content {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-family: var(--font);
    overflow: hidden; /* rounded corners on the header */
}

body.theme-modern .modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}

    body.theme-modern .modal-header .modal-title {
        color: var(--ink);
        font-family: var(--heading-font);
        font-size: 17px;
        font-weight: 600;
    }

    body.theme-modern .modal-header .close {
        margin-top: 0;
        color: var(--muted);
        opacity: .8;
        text-shadow: none;
    }

        body.theme-modern .modal-header .close:hover {
            opacity: 1;
        }

/* The dark header of the intranet dialogs (css\site.css): the page header colors of the theme */
body.theme-modern .modal-header.modal-header-dark {
    background: var(--hero-bg);
    border-bottom: none;
}

    body.theme-modern .modal-header.modal-header-dark .modal-title,
    body.theme-modern .modal-header.modal-header-dark .close,
    body.theme-modern .modal-header.modal-header-dark .close > span {
        color: var(--hero-text);
    }

body.theme-modern .modal-body {
    padding: 18px 20px;
    color: var(--text);
}

body.theme-modern .modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background-color: var(--bg);
}

/* Waiting dialog (the astronaut gif) */
body.theme-modern #waiting-dialog .modal-body {
    background-color: var(--surface);
}

/* =========================================================================
   Notifications: Scripts\NotifierManager.js, css\NotifyPopup.css
   ========================================================================= */
body.theme-modern .notify-popup-div {
    height: auto;
    min-height: 50px;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius-sm);
    background-color: var(--ink);
    box-shadow: var(--shadow-lg);
    color: var(--surface);
    font-family: var(--font);
    font-size: 13px;
    opacity: .95;
}

    body.theme-modern .notify-popup-div.ok {
        border-left-color: var(--success);
        background-color: var(--ink);
    }

    body.theme-modern .notify-popup-div.ko {
        border-left-color: var(--danger);
        background-color: var(--ink);
    }

/* =========================================================================
   Datepicker: Components\Datepicker (bootstrap-datepicker 1.4), the dropdown is appended to the body
   ========================================================================= */
body.theme-modern .datepicker.datepicker-dropdown {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-family: var(--font);
}

    /* Arrow towards the input */
    body.theme-modern .datepicker-dropdown.datepicker-orient-top:before,
    body.theme-modern .datepicker-dropdown.datepicker-orient-bottom:before {
        border-top-color: var(--line);
        border-bottom-color: var(--line);
    }

    body.theme-modern .datepicker-dropdown.datepicker-orient-top:after {
        border-top-color: var(--surface);
    }

    body.theme-modern .datepicker-dropdown.datepicker-orient-bottom:after {
        border-bottom-color: var(--surface);
    }

body.theme-modern .datepicker table tr td,
body.theme-modern .datepicker table tr th {
    border-radius: 6px;
}

/* Header: month / year and the arrows */
body.theme-modern .datepicker .datepicker-switch,
body.theme-modern .datepicker .prev,
body.theme-modern .datepicker .next {
    color: var(--ink);
    font-weight: 600;
}

body.theme-modern .datepicker .dow {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

body.theme-modern .datepicker table tr td.day,
body.theme-modern .datepicker table tr td span {
    color: var(--text);
}

    body.theme-modern .datepicker table tr td.old,
    body.theme-modern .datepicker table tr td.new,
    body.theme-modern .datepicker table tr td span.old,
    body.theme-modern .datepicker table tr td span.new {
        color: var(--muted);
    }

    body.theme-modern .datepicker table tr td.disabled,
    body.theme-modern .datepicker table tr td.disabled:hover,
    body.theme-modern .datepicker table tr td span.disabled,
    body.theme-modern .datepicker table tr td span.disabled:hover {
        background: none;
        color: var(--placeholder);
    }

/* Hover */
body.theme-modern .datepicker table tr td.day:hover,
body.theme-modern .datepicker table tr td.day.focused,
body.theme-modern .datepicker table tr td span:hover,
body.theme-modern .datepicker .datepicker-switch:hover,
body.theme-modern .datepicker .prev:hover,
body.theme-modern .datepicker .next:hover,
body.theme-modern .datepicker tfoot tr th:hover {
    background: rgba(var(--brand-rgb), .08);
    color: var(--ink);
}

/* Today */
body.theme-modern .datepicker table tr td.today,
body.theme-modern .datepicker table tr td.today:hover {
    background: none;
    box-shadow: inset 0 0 0 1px var(--warning);
    color: var(--ink);
    font-weight: 600;
}

/* Range and selected (multiple dates) */
body.theme-modern .datepicker table tr td.range,
body.theme-modern .datepicker table tr td.range:hover,
body.theme-modern .datepicker table tr td.range.today {
    background: rgba(var(--brand-rgb), .12);
    background-image: none;
    color: var(--ink);
}

/* Active: the chosen date / month / year */
body.theme-modern .datepicker table tr td.active,
body.theme-modern .datepicker table tr td.active:hover,
body.theme-modern .datepicker table tr td.active.today,
body.theme-modern .datepicker table tr td.selected,
body.theme-modern .datepicker table tr td.selected:hover,
body.theme-modern .datepicker table tr td span.active,
body.theme-modern .datepicker table tr td span.active:hover {
    background: var(--brand);
    background-image: none;
    border-color: var(--brand);
    box-shadow: none;
    color: var(--on-brand);
    text-shadow: none;
}

/* =========================================================================
   LorenzoTable: Scripts\LorenzoTable\LorenzoTable.js, css\LorenzoTable.css (table.table.table-small).
   The .table rules of theme-modern.css already apply (header, lines, row hover): here only what is
   specific to the data grids, more compact than the other tables (classic: 8pt)
   ========================================================================= */
body.theme-modern :is(.body-content, .modal) .table.table-small {
    font-size: 12px;
}

    body.theme-modern :is(.body-content, .modal) .table.table-small > thead > tr > th {
        padding: 4px 6px;
        font-size: 10.5px;
        vertical-align: middle;
    }

    body.theme-modern :is(.body-content, .modal) .table.table-small > tbody > tr > td {
        padding: 2px 6px;
        white-space: nowrap;
    }

        body.theme-modern :is(.body-content, .modal) .table.table-small > tbody > tr > td.row-header {
            background-color: var(--bg);
            color: var(--ink);
            font-weight: 600;
            text-align: right;
        }

        body.theme-modern :is(.body-content, .modal) .table.table-small > tbody > tr.selected > td {
            background-color: rgba(var(--brand-rgb), .14);
            color: var(--ink);
        }

    /* Search highlight */
    body.theme-modern :is(.body-content, .modal) .table-small mark {
        padding: 0 1px;
        border-radius: 2px;
        background-color: var(--warning);
        color: var(--on-brand);
    }

/* Column filter button: some values filtered */
body.theme-modern :is(.body-content, .modal) button.filter-active {
    border-color: var(--danger);
    color: var(--danger) !important; /* css\site.css has !important */
}

body.theme-modern :is(.body-content, .modal) button.filter-inactive {
    color: var(--ink) !important;
}

/* Filter / column selector menus */
body.theme-modern :is(.body-content, .modal) .filter-selector {
    color: var(--text);
}

body.theme-modern :is(.body-content, .modal) .column-selector-group {
    color: var(--ink);
}

/* =========================================================================
   LXTable: css\LXTable.css (table.LXTable, plain markup in some reports)
   ========================================================================= */
body.theme-modern :is(.body-content, .modal) .LXTable {
    border: none;
    border-collapse: collapse;
    background-color: var(--surface);
    color: var(--text);
}

    body.theme-modern :is(.body-content, .modal) .LXTable thead th {
        padding: 4px 6px;
        border: none;
        border-bottom: 1px solid var(--line);
        background: var(--bg);
        color: var(--muted);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    body.theme-modern :is(.body-content, .modal) .LXTable tbody td {
        padding: 2px 6px;
        border: none;
        border-bottom: 1px solid var(--line);
    }

    body.theme-modern :is(.body-content, .modal) .LXTable tbody tr,
    body.theme-modern :is(.body-content, .modal) .LXTable tbody tr:nth-of-type(even) {
        background: none;
    }

        body.theme-modern :is(.body-content, .modal) .LXTable tbody tr:hover > td {
            background-color: rgba(var(--brand-rgb), .06);
        }

        body.theme-modern :is(.body-content, .modal) .LXTable tbody tr.selected > td {
            background-color: rgba(var(--brand-rgb), .14);
            color: var(--ink);
        }

/* =========================================================================
   Context menu: Scripts\LorenzoTable\LorenzoContextMenu.js, css\LorenzoContextMenu.css (appended to the body)
   ========================================================================= */
body.theme-modern .context-menu {
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
    font-family: var(--font);
    font-size: 13px;
}

    body.theme-modern .context-menu li {
        padding: 6px 28px 6px 10px;
        border-radius: 5px;
        background-color: transparent;
        color: var(--text);
    }

        body.theme-modern .context-menu li:hover {
            background-color: rgba(var(--brand-rgb), .08);
            color: var(--ink);
        }

        body.theme-modern .context-menu li.submenu:after {
            top: 6px;
            right: 8px;
            color: var(--muted);
        }

        body.theme-modern .context-menu li.separator,
        body.theme-modern .context-menu li.separator:hover {
            margin: 4px 0;
            padding: 0;
            border-bottom: 1px solid var(--line);
            border-radius: 0;
            background-color: transparent;
        }

/* =========================================================================
   Validation popover: SetError in Scripts\common.js (Bootstrap popover next to the field)
   ========================================================================= */
body.theme-modern :is(.body-content, .modal) .popover {
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    font-family: var(--font);
}

    body.theme-modern :is(.body-content, .modal) .popover.right > .arrow {
        border-right-color: var(--danger);
    }

        body.theme-modern :is(.body-content, .modal) .popover.right > .arrow:after {
            border-right-color: var(--surface);
        }

    body.theme-modern :is(.body-content, .modal) .popover.left > .arrow {
        border-left-color: var(--danger);
    }

        body.theme-modern :is(.body-content, .modal) .popover.left > .arrow:after {
            border-left-color: var(--surface);
        }

    body.theme-modern :is(.body-content, .modal) .popover.top > .arrow {
        border-top-color: var(--danger);
    }

        body.theme-modern :is(.body-content, .modal) .popover.top > .arrow:after {
            border-top-color: var(--surface);
        }

    body.theme-modern :is(.body-content, .modal) .popover.bottom > .arrow {
        border-bottom-color: var(--danger);
    }

        body.theme-modern :is(.body-content, .modal) .popover.bottom > .arrow:after {
            border-bottom-color: var(--surface);
        }

/* =========================================================================
   Checkboxes of awesome-bootstrap-checkbox (css\awesomeBootstrapCheckbox.css, .checkbox-dark in
   css\site-bootstrap-extensions.css): the box and the colored variants
   ========================================================================= */
body.theme-modern :is(.body-content, .modal) .checkbox label::before,
body.theme-modern :is(.body-content, .modal) .radio label::before {
    border-color: var(--line-strong);
    background-color: var(--surface);
}

body.theme-modern :is(.body-content, .modal) .checkbox input[type="checkbox"]:checked + label::after {
    color: var(--ink);
}

body.theme-modern :is(.body-content, .modal) .checkbox-primary input[type="checkbox"]:checked + label::before,
body.theme-modern :is(.body-content, .modal) .checkbox-primary input[type="radio"]:checked + label::before {
    border-color: var(--brand);
    background-color: var(--brand);
}

body.theme-modern :is(.body-content, .modal) .checkbox-success input[type="checkbox"]:checked + label::before,
body.theme-modern :is(.body-content, .modal) .checkbox-success input[type="radio"]:checked + label::before {
    border-color: var(--success);
    background-color: var(--success);
}

body.theme-modern :is(.body-content, .modal) .checkbox-danger input[type="checkbox"]:checked + label::before,
body.theme-modern :is(.body-content, .modal) .checkbox-danger input[type="radio"]:checked + label::before {
    border-color: var(--danger);
    background-color: var(--danger);
}

body.theme-modern :is(.body-content, .modal) .checkbox-info input[type="checkbox"]:checked + label::before,
body.theme-modern :is(.body-content, .modal) .checkbox-info input[type="radio"]:checked + label::before {
    border-color: var(--brand);
    background-color: var(--brand);
}

body.theme-modern :is(.body-content, .modal) .checkbox-warning input[type="checkbox"]:checked + label::before,
body.theme-modern :is(.body-content, .modal) .checkbox-warning input[type="radio"]:checked + label::before {
    border-color: var(--warning);
    background-color: var(--warning);
}

body.theme-modern :is(.body-content, .modal) .checkbox-dark input[type="checkbox"]:checked + label::before,
body.theme-modern :is(.body-content, .modal) .checkbox-dark input[type="radio"]:checked + label::before {
    border-color: var(--ink);
    background-color: var(--ink);
}

/* White check on the colored boxes. input:is([type]) gives the specificity of the generic rule above (dark check), this one comes later */
body.theme-modern :is(.body-content, .modal) :is(.checkbox-primary, .checkbox-success, .checkbox-danger, .checkbox-info, .checkbox-warning) input:is([type="checkbox"], [type="radio"]):checked + label::after {
    color: var(--on-brand);
}

body.theme-modern :is(.body-content, .modal) .checkbox-dark input:is([type="checkbox"], [type="radio"]):checked + label::after {
    color: var(--surface);
}

/* =========================================================================
   Leaflet maps (Views\Resources\FaceWall.cshtml, Scripts\Externals\Leaflet): popups and controls.
   The map tiles (OpenStreetMap images) stay as they are; Alien darkens them (theme-alien.css)
   ========================================================================= */
body.theme-modern .leaflet-container {
    background-color: var(--bg);
    font-family: var(--font);
}

body.theme-modern .leaflet-popup-content-wrapper,
body.theme-modern .leaflet-popup-tip {
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

body.theme-modern .leaflet-popup-content-wrapper {
    border-radius: var(--radius-sm);
}

body.theme-modern .leaflet-container a.leaflet-popup-close-button {
    color: var(--muted);
}

body.theme-modern .leaflet-bar {
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

    body.theme-modern .leaflet-bar a,
    body.theme-modern .leaflet-bar a:hover {
        border-bottom-color: var(--line);
        background-color: var(--surface);
        color: var(--ink);
    }

        body.theme-modern .leaflet-bar a:hover {
            background-color: var(--bg);
        }

body.theme-modern .leaflet-control-attribution {
    background-color: var(--surface) !important;
    color: var(--muted);
    opacity: .85;
}

/* =========================================================================
   Dark themes (Alien, Astro): body.theme-modern.theme-dark (ApplyTheme in Scripts\common.js).
   What any dark background needs, whatever the colors of the theme: native controls, light data
   backgrounds with dark text, dark map... The look of each theme stays in its own file
   ========================================================================= */
body.theme-modern.theme-dark {
    color-scheme: dark; /* native controls (checkboxes, scrollbars, selects) dark */
}

body.theme-modern.theme-dark :is(.body-content, .modal) select.form-control option {
    background: var(--surface);
    color: var(--text);
}

body.theme-modern.theme-dark :is(.body-content, .modal) .toggle .toggle-off {
    color: var(--text);
}

body.theme-modern.theme-dark :is(.body-content, .modal) .badge-disabled {
    background-color: var(--field-disabled);
    color: var(--muted);
}

/* Checked .checkbox-dark (e.g. "Log" in the timesheet): --ink is almost white here, a brand box instead */
body.theme-modern.theme-dark :is(.body-content, .modal) .checkbox-dark input:is([type="checkbox"], [type="radio"]):checked + label::before {
    border-color: var(--brand);
    background-color: var(--brand);
}

body.theme-modern.theme-dark :is(.body-content, .modal) .checkbox-dark input:is([type="checkbox"], [type="radio"]):checked + label::after {
    color: var(--on-brand);
}

/* Waiting dialog: dark, the astronaut gif (img\AstronautaSulRazzo.gif, opaque white background) as a negative */
body.theme-modern.theme-dark #waiting-dialog .modal-body {
    background-color: #000;
}

    body.theme-modern.theme-dark #waiting-dialog .modal-body img {
        filter: invert(1) hue-rotate(180deg);
    }

body.theme-modern.theme-dark .modal-backdrop.in {
    background-color: #000;
    opacity: .75;
}

/* Leaflet map (Views\Resources\FaceWall.cshtml): the OpenStreetMap tiles turned dark */
body.theme-modern.theme-dark .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.8) contrast(1.1);
}

body.theme-modern.theme-dark .leaflet-container {
    background-color: var(--bg);
}

/* Light backgrounds that are data (statuses, legends, locked cells...): they keep their color,
   their text goes dark (the light text of the dark themes would be unreadable on them) */
body.theme-modern.theme-dark :is(.body-content, .modal) :is(
    .t-missing, .t-in-progress, .t-confirmed, .t-approved, .t-hr-approved,
    table.planning div.lblPrevYear, table.planning div.lblCurrentYear, table.planning div.lblNextYear,
    .resource-detailed-cost-table td.rdc-past, .resource-detailed-cost-table tfoot td.rdc-foot-past,
    .table-coge-revenues > tbody > tr[warning], .table-coge-revenues > tbody > tr > td[notActive], .table-coge-revenues > tbody > tr > td[locked=locked],
    .table-coge-hr > tbody > tr > td[notActive], .table-coge-hr > tbody > tr > td[locked=locked],
    td.mr-economics-locked, td.rf-col-amount[style*="background"]) {
    color: #1a1a1a;
}

body.theme-modern.theme-dark :is(.body-content, .modal) .timesheet-status-legend span {
    border-color: var(--line-strong); /* black in Views\Shared\Legend_TimesheetStatus.cshtml */
}

/* Light tints that are only decoration: dark tints */
body.theme-modern.theme-dark :is(.body-content, .modal) .cp-row-error td {
    background-color: rgba(var(--danger-rgb), .14);
}

body.theme-modern.theme-dark #hr-economics-table tr.men td {
    background-color: rgba(56, 189, 248, .08);
}

body.theme-modern.theme-dark #hr-economics-table tr.women td {
    background-color: rgba(199, 125, 255, .09);
}

/* =========================================================================
   Top bar, side menu (Views\Shared\Menu.cshtml, classic colors in css\Menu.css) and footer
   (Views\Shared\_Layout.cshtml, css\site.css). They stay dark in every theme: the logo of the company
   in session (top bar) and the Orbyta logo of the footer are white, made for a dark background.
   Each theme sets the --chrome-* variables (Modern here, the others in their files)
   ========================================================================= */
body.theme-modern {
    --chrome-bg: #16171b;
    --chrome-bar-bg: linear-gradient(110deg, #16171b 0%, #101c3d 70%, #0b2a66 100%); /* as the My Profile hero */
    --chrome-bg-2: #0f1013;
    --chrome-border: #2a2d34;
    --chrome-text: #a3a9b5;
    --chrome-text-active: #ffffff;
    --chrome-hover-bg: rgba(255, 255, 255, .06);
    --chrome-active-bg: rgba(77, 140, 240, .16);
    --chrome-accent: #4d8cf0; /* the brand blue, lighter on the dark bar */
    --chrome-font: var(--font);
    --chrome-header-font: var(--chrome-font);
    --chrome-popup-bg: var(--surface);
    --chrome-popup-text: var(--text);
    --chrome-popup-border: var(--line);
}

/* Top bar */
body.theme-modern .top-bar {
    background: var(--chrome-bar-bg, var(--chrome-bg));
    border-bottom: 1px solid var(--chrome-border);
    font-family: var(--chrome-font);
}

body.theme-modern .side-menu-toggle {
    border-color: var(--chrome-border);
    border-radius: var(--radius-sm);
}

    body.theme-modern .side-menu-toggle:hover {
        background-color: var(--chrome-hover-bg);
    }

    body.theme-modern .side-menu-toggle .icon-bar {
        background-color: var(--chrome-text-active);
    }

/* Selectors of the top bar (company, theme, language): same colors as the menu items */
body.theme-modern :is(.top-bar-company, .top-bar-theme) select.form-control,
body.theme-modern .top-bar-language > .dropdown-toggle {
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-sm);
    background-color: var(--chrome-bg);
    color: var(--chrome-text);
    font-family: var(--chrome-font);
}

    body.theme-modern :is(.top-bar-company, .top-bar-theme) select.form-control:is(:hover, :focus),
    body.theme-modern .top-bar-language > .dropdown-toggle:is(:hover, :focus),
    body.theme-modern .top-bar-language.open > .dropdown-toggle {
        border-color: var(--chrome-accent);
        background-color: var(--chrome-bg);
        color: var(--chrome-text-active);
    }

    body.theme-modern :is(.top-bar-company, .top-bar-theme) select.form-control option {
        background-color: var(--chrome-bg);
        color: var(--chrome-text-active);
    }

body.theme-modern .top-bar-language .dropdown-menu {
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-sm);
    background-color: var(--chrome-bg);
    font-family: var(--chrome-font);
}

    body.theme-modern .top-bar-language .dropdown-menu > li > a {
        color: var(--chrome-text);
    }

        body.theme-modern .top-bar-language .dropdown-menu > li > a:is(:hover, :focus) {
            background-color: var(--chrome-hover-bg);
            color: var(--chrome-text-active);
        }

    body.theme-modern .top-bar-language .dropdown-menu > li.active > a {
        background-color: var(--chrome-active-bg);
        color: var(--chrome-text-active);
    }

body.theme-modern .language-flag {
    border-color: var(--chrome-border);
}

/* User menu (white popup in the classic style) */
body.theme-modern .userMenu {
    border: 1px solid var(--chrome-popup-border);
    border-radius: var(--radius-sm);
    background: var(--chrome-popup-bg);
    box-shadow: var(--shadow-lg);
    font-family: var(--font);
}

    body.theme-modern .userMenu a {
        border-radius: var(--radius-sm);
        color: var(--chrome-popup-text);
    }

        body.theme-modern .userMenu a:hover {
            background: var(--row-hover);
        }

/* Side menu */
body.theme-modern .side-menu {
    background-color: var(--chrome-bg);
    border-right: 1px solid var(--chrome-border);
    font-family: var(--chrome-font);
}

    body.theme-modern .side-menu-list a {
        color: var(--chrome-text);
    }

        body.theme-modern .side-menu-list a:is(:hover, :focus) {
            background-color: var(--chrome-hover-bg);
            color: var(--chrome-text-active);
        }

    body.theme-modern .side-menu-list > li.active > a {
        background-color: var(--chrome-active-bg);
        border-left-color: var(--chrome-accent);
        color: var(--chrome-text-active);
    }

    /* Top bar selectors moved to the bottom of the side menu */
    body.theme-modern .side-menu-tools {
        border-top-color: var(--chrome-border);
    }

@media (max-width: 767px) {
    body.theme-modern .side-menu {
        box-shadow: 2px 0 16px rgba(0, 0, 0, .5);
    }
}

/* Footer: the two classic bands (#222 and black) in the chrome colors */
body.theme-modern .body-content > footer > div:first-child {
    background-color: var(--chrome-bg);
    color: var(--chrome-text);
    border-radius: var(--radius) var(--radius) 0 0;
}

body.theme-modern .body-content > footer > div:last-child {
    background-color: var(--chrome-bg-2);
    color: var(--chrome-text);
    border-radius: 0 0 var(--radius) var(--radius);
    font-family: var(--chrome-header-font);
}

body.theme-modern .body-content > footer a:is(:link, :visited) {
    color: var(--chrome-text);
}

    body.theme-modern .body-content > footer a:is(:hover, :focus) {
        color: var(--chrome-text-active);
    }

/* =========================================================================
   Pickers (Views\Shared\UserPickerX, UserPicker, CommissionPicker): the wider theme fonts would wrap
   the "show inactive" checkbox next to the picker
   ========================================================================= */
body.theme-modern .up-checkbox,
body.theme-modern .checkbox > input[id$="show-inactive"] + label {
    white-space: nowrap;
}

/* Blocks of the user picker with a fixed width (style="width:700px", e.g. Views\Timesheet\Index.cshtml,
   Views\ExpenseReport\Index.cshtml): as wide as the picker + checkbox in the theme fonts */
body.theme-modern .user-picker-block {
    width: auto !important;
    min-width: 700px;
    margin-right: 12px;
}

/* =========================================================================
   Floating panels with a dark title bar, draggable (classic: #333 bar, white text):
   Views\Timesheet\Index.cshtml (log, quick info, stats), Views\ExpenseReport\Index.cshtml (totals),
   Views\Report\AbsencesToApprove.cshtml (timesheet preview). The bar colors are inline
   var(--ts-head-bg, #333333) / var(--ts-head-text, white), also used by the timesheet grid header
   ========================================================================= */
body.theme-modern {
    --ts-head-bg: #2b2f36;
    --ts-head-text: #ffffff;
    --ts-head-line: #16171b;
}

body.theme-modern .ts-floating-panel {
    border-radius: var(--radius-sm);
    overflow: hidden; /* the inner table inside the rounded corners */
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
}

body.theme-modern .ts-floating-panel-title {
    padding: 3px 8px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* =========================================================================
   Narrow fields of the commission grids (Views\Commissions\CommissionDetails_Economics_Revenues.cshtml,
   CommissionDetails_Planning_Details.cshtml): css\Commissions\CommissionDetails.css already gives them
   a compact padding because they are only 45-120px wide, but the theme .form-control wins on
   specificity and its 12px padding leaves no room for the value (the smart working % #perc-smart,
   style="width:45px", looked empty; in the planning the days were cut off). Each table keeps the
   padding its own CSS asks for
   ========================================================================= */
body.theme-modern :is(.body-content, .modal) .commission-economic-details-table input.form-control {
    padding: 0;
}

body.theme-modern :is(.body-content, .modal) table.planning input.form-control {
    padding: 0 4px;
}

/* Stesso caso nella distribuzione mensile costi/ricavi del popup baseline
   (Views\Commissions\Baseline_Edit.cshtml): 12 colonne di mesi piu' i totali in una finestra da
   1000px, quindi i campi sono strettissimi e con il padding del tema il numero non si legge.
   La griglia prende anche l'altezza densa, come la tabella del planning */
body.theme-modern :is(.body-content, .modal) .baseline-reselling-monthly-table {
    --control-h: 30px;
}

body.theme-modern :is(.body-content, .modal) .baseline-reselling-monthly-table input.form-control {
    padding: 0 2px;
    /* La larghezza minima la impone la view, qui serve solo riallineare quello che il tema
       vince per specificita': padding e corpo del carattere. Insieme fanno stare un importo
       a sei cifre con i decimali */
    font-size: 12px;
}

/* The actual next to the planned days (Views\Commissions\CommissionDetails_Planning_Details.cshtml) is a
   <div tag-type="Actual"> carrying the timesheet status color, not a field, so it kept the square corners
   of the classic style while the planned days, being a .form-control, took the theme radius
   (theme-modern.css): a rounded box next to a square label. The variable keeps the two in sync in every
   theme, Paper included (--radius-sm: 0, square as in Vanilla).
   The grid has 12 month columns plus the actuals, so it takes the dense control height (the same 30px as
   body.theme-modern.dense in theme-modern.css) instead of the 40px of a normal page: redefining the
   variable on the table resizes the fields through .form-control, and the actual follows it so the two
   boxes are exactly as tall */
body.theme-modern :is(.body-content, .modal) table.planning {
    --control-h: 30px;
}

body.theme-modern :is(.body-content, .modal) table.planning div[tag-type="Actual"] {
    border-radius: var(--radius-sm);
    height: var(--control-h);
    line-height: calc(var(--control-h) - 6px);   /* the 3px top and bottom padding of .t-* (Views\Shared\Legend_TimesheetStatus.cshtml) */
}