@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   Tema "corporate modern".

   Ridisegna le classi Bootstrap 3 già usate in tutta la intranet (panel, nav-tabs,
   form-control, btn, label, tabelle, alert...) senza cambiare il markup.
   Vale solo dove il <body> ha la classe theme-modern. Non va messa a mano: la pagina si dichiara
   "themable" con
       ViewBag.BodyClass = "themable";
   (Views\Shared\_Layout.cshtml) e include questo file e css\Themes\theme-alien.css. Il tema scelto
   (Vanilla / Modern / Alien) mette le classi sul body: ApplyTheme in Scripts\common.js.
       Vanilla: nessuna classe (stile classico della intranet)
       Modern:  theme-modern
       Alien:   theme-modern theme-alien (questo file + le variabili e gli effetti di theme-alien.css)
   Le regole sono limitate al contenuto della pagina e ai dialoghi Bootstrap, :is(.body-content, .modal):
   la top-bar e il menu laterale (Views\Shared\Menu.cshtml) non cambiano. I componenti aggiunti al body
   (datepicker, menu contestuale, notifiche...) e le tabelle LorenzoTable/LXTable sono in
   theme-modern-components.css.

   Tutti i colori passano dalle variabili qui sotto: un altro tema le ridefinisce e basta.

   Colori: blu e quasi-nero del logo Orbyta (img\LogoOrbytaNoPayoff.svg); il blu (#0066ff) un po' meno saturo, #1e63d6.
   Accenti per sezione: stessi hex della dashboard dei report (css\Report\ReportDashboard.css),
   scelti perché superano 3:1 sul chiaro. Una sezione prende il suo colore con una
   classe .accent-<nome> su un contenitore: tutto ciò che è dentro legge --accent / --accent-rgb.

   Componenti nuovi:
   - .field-outlined: input "Outlined Clean" con l'etichetta incastonata nel bordo.
     Markup: <div class="field-outlined"><label class="label label-dark">..</label><br /><input class="form-control" /></div>
   - .panel-collapsed: messa sul .panel da Scripts\common.js quando il pannello è chiuso (ruota il chevron).
   --------------------------------------------------------------------------- */

body.theme-modern {
    --brand: #1e63d6; /* Orbyta blue (#0066ff) a bit less vivid */
    --brand-rgb: 30, 99, 214;
    --brand-dark: #174fb0;
    --on-brand: #ffffff; /* text on the filled buttons / badges */
    --on-brand-rgb: 255, 255, 255;
    --ink: #16171b;
    --ink-hover: #33353c;
    --text: #2b2f36;
    --muted: #6b7280;
    --placeholder: #9aa3ae;
    --line: #dfe3e8;
    --line-strong: #c9ced6;
    --line-hover: #9aa3ae;
    --surface: #ffffff;
    --bg: #f4f6f9;
    --field-disabled: #f7f8fa;
    --success: #008300;
    --success-rgb: 0, 131, 0;
    --success-dark: #006b00;
    --danger: #d92d20;
    --danger-rgb: 217, 45, 32;
    --danger-dark: #b42318;
    --warning: #eb6834;
    --warning-rgb: 235, 104, 52;
    --warning-text: #b4441a;
    --sensible: #c2410c; /* caption of the sensitive data (IBAN...) */
    /* Page header (e.g. the My Profile hero) */
    --hero-bg: radial-gradient(ellipse at 90% -30%, rgba(30, 99, 214, .5) 0%, rgba(30, 99, 214, 0) 60%), linear-gradient(120deg, #16171b 0%, #101c3d 55%, #0b2a66 100%);
    --hero-text: #ffffff;
    --hero-muted: rgba(255, 255, 255, .78);
    --hero-chip-bg: rgba(255, 255, 255, .1);
    --hero-chip-border: rgba(255, 255, 255, .2);
    --radius: 10px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
    --shadow-lg: 0 4px 8px rgba(16, 24, 40, .08), 0 12px 24px rgba(16, 24, 40, .08);
    --font: 'Inter', 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
    --heading-font: var(--font);
    /* Tables density: ~27px rows, close to the classic intranet (22-26px) so the data-dense pages keep their rows per screen */
    --cell-py: 4px;
    --cell-px: 10px;
    --table-font-size: 13px;
    --row-hover: rgba(var(--brand-rgb), .06);     /* page tables with their own CSS (e.g. css\Assets\Assets_List.css) */
    --row-selected: rgba(var(--brand-rgb), .14);
    /* Controls and panels density (see body.theme-modern.dense below) */
    --control-h: 40px;
    --btn-h: 36px;
    --btn-h-sm: 30px;
    --panel-head-py: 12px;
    --panel-body-p: 16px;
    --panel-gap: 16px;
    /* Default accent */
    --accent: #1e63d6;
    --accent-rgb: 30, 99, 214;
    --chart-colors: #1e63d6, #eb6834, #008300, #d92d20, #4a3aa7, #0e9f9a, #b7791f, #6b7280, #db2777, #65a30d, #0b2a66, #f59e0b; /* Google charts without their own colors (ApplyThemeToGoogleChartOptions in Scripts\common.js) */
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font);
}

/* Dense pages (Timesheet, CoGe, Report...): ViewBag.BodyClass = "themable dense".
   Controls and panels as compact as the classic intranet; no effect in Vanilla */
body.theme-modern.dense {
    --control-h: 30px;
    --btn-h: 30px;
    --btn-h-sm: 26px;
    --panel-head-py: 7px;
    --panel-body-p: 10px;
    --panel-gap: 10px;
}

/* ---- Accents ---- */
body.theme-modern .accent-blue { --accent: #2a78d6; --accent-rgb: 42, 120, 214; }
body.theme-modern .accent-orange { --accent: #eb6834; --accent-rgb: 235, 104, 52; }
body.theme-modern .accent-green { --accent: #008300; --accent-rgb: 0, 131, 0; }
body.theme-modern .accent-violet { --accent: #4a3aa7; --accent-rgb: 74, 58, 167; }
body.theme-modern .accent-slate { --accent: #6b7280; --accent-rgb: 107, 114, 128; }

/* ---- Page ---- */
body.theme-modern .body-content {
    padding: 16px 20px; /* pages with a full width header (My Profile) set 0 in their CSS */
}

    body.theme-modern .body-content > hr {
        display: none;
    }

    body.theme-modern .body-content > footer {
        margin-top: 24px;
    }

body.theme-modern :is(.body-content, .modal) .panel a:not(.btn) {
    color: var(--brand);
}

    body.theme-modern :is(.body-content, .modal) .panel a:not(.btn):hover {
        color: var(--brand-dark);
    }

body.theme-modern :is(.body-content, .modal) a:focus-visible,
body.theme-modern :is(.body-content, .modal) .btn:focus-visible,
body.theme-modern :is(.body-content, .modal) .panel-heading:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

body.theme-modern :is(.body-content, .modal) .text-muted,
body.theme-modern :is(.body-content, .modal) .edit-by {
    color: var(--muted);
}

body.theme-modern :is(.body-content, .modal) .edit-by {
    font-family: var(--font);
    font-size: 12px;
    margin: 8px 0;
}

/* ---- Panels (cards) ---- */
body.theme-modern :is(.body-content, .modal) .panel {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: var(--panel-gap) !important; /* many views have an inline margin-bottom:0 (classic stacked panels) */
    /* No overflow:hidden here: it would cut the dropdowns opened inside the panel (e.g. payslips split buttons).
       The rounded corners are given to the heading instead. */
}

body.theme-modern :is(.body-content, .modal) .panel > .panel-heading,
body.theme-modern :is(.body-content, .modal) .panel-primary > .panel-heading,
body.theme-modern :is(.body-content, .modal) .panel-default > .panel-heading {
    position: relative;
    overflow: hidden; /* clips the accent bar on the rounded corners */
    padding: var(--panel-head-py) 16px var(--panel-head-py) 20px;
    background-color: rgba(var(--accent-rgb), .06);
    background-image: none;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    color: var(--ink);
    font-family: var(--heading-font);
    font-size: 15px;
    font-weight: 600;
    cursor: default;
}

    /* Accent bar */
    body.theme-modern :is(.body-content, .modal) .panel > .panel-heading:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: var(--accent);
    }

    /* Collapsible: chevron */
    body.theme-modern :is(.body-content, .modal) .panel > .panel-heading[onclick] {
        cursor: pointer;
        padding-right: 40px;
        -webkit-user-select: none;
        user-select: none;
    }

        body.theme-modern :is(.body-content, .modal) .panel > .panel-heading[onclick]:hover {
            background-color: rgba(var(--accent-rgb), .11);
        }

        body.theme-modern :is(.body-content, .modal) .panel > .panel-heading[onclick]:after {
            content: "\f107"; /* fa-angle-down */
            font-family: FontAwesome;
            font-size: 18px;
            font-weight: normal;
            line-height: 1;
            position: absolute;
            right: 16px;
            top: 50%;
            margin-top: -9px;
            color: var(--muted);
            transition: transform .2s ease;
        }

body.theme-modern :is(.body-content, .modal) .panel.panel-collapsed > .panel-heading[onclick]:after {
    transform: rotate(-90deg);
}

body.theme-modern :is(.body-content, .modal) .panel.panel-collapsed > .panel-heading {
    border-bottom-color: transparent;
    border-radius: calc(var(--radius) - 1px);
}

body.theme-modern :is(.body-content, .modal) .panel > .panel-body {
    padding: var(--panel-body-p);
}

/* ---- Tabs ---- */
body.theme-modern :is(.body-content, .modal) .nav-tabs {
    border-bottom: 1px solid var(--line);
    background-color: var(--surface);
}

    body.theme-modern :is(.body-content, .modal) .nav-tabs > li {
        margin-bottom: -1px;
    }

        body.theme-modern :is(.body-content, .modal) .nav-tabs > li > a {
            margin: 0;
            padding: 14px 16px 11px 16px;
            border: none;
            border-bottom: 3px solid transparent;
            border-radius: 0;
            color: var(--muted);
            font-weight: 500;
            background: none;
            transition: color .15s ease, background-color .15s ease, border-color .15s ease;
        }

            body.theme-modern :is(.body-content, .modal) .nav-tabs > li > a > .fa {
                color: var(--accent);
                margin: 0 3px;
            }

            body.theme-modern :is(.body-content, .modal) .nav-tabs > li > a:hover {
                color: var(--ink);
                background-color: rgba(var(--accent-rgb), .07);
                border-bottom-color: rgba(var(--accent-rgb), .35);
            }

        body.theme-modern :is(.body-content, .modal) .nav-tabs > li.active > a,
        body.theme-modern :is(.body-content, .modal) .nav-tabs > li.active > a:hover,
        body.theme-modern :is(.body-content, .modal) .nav-tabs > li.active > a:focus {
            color: var(--ink);
            font-weight: 600;
            background: none;
            border: none;
            border-bottom: 3px solid var(--accent);
        }

body.theme-modern :is(.body-content, .modal) .tab-content > .tab-pane {
    padding-top: 16px;
}

/* ---- Inputs: Outlined Clean ---- */
body.theme-modern :is(.body-content, .modal) .form-control {
    height: var(--control-h);
    padding: 0 12px; /* the height decides, the text stays vertically centered */
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    body.theme-modern :is(.body-content, .modal) .form-control:hover {
        border-color: var(--line-hover);
    }

    body.theme-modern :is(.body-content, .modal) .form-control:focus {
        border: 1px solid var(--brand);
        background-color: var(--surface);
        box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15);
        outline: none;
    }

    body.theme-modern :is(.body-content, .modal) .form-control[disabled],
    body.theme-modern :is(.body-content, .modal) .form-control[readonly] {
        background-color: var(--field-disabled);
        border-color: var(--line);
        color: var(--text);
        -webkit-text-fill-color: var(--text); /* Safari greys out disabled text */
        opacity: 1;
        cursor: default;
    }

body.theme-modern :is(.body-content, .modal) textarea.form-control {
    height: auto;
    padding: 8px 12px;
    min-height: 80px;
    line-height: 1.5;
    resize: vertical;
}

body.theme-modern :is(.body-content, .modal) .form-control::placeholder {
    color: var(--placeholder);
}

/* Plain fields without form-control (e.g. .ar_textArea_res of Views\Resources\ResourceDetails_AnnualReview_Data.cshtml):
   otherwise white with the browser colors. The transparent .ghost fields of the objective sheet are excluded */
body.theme-modern :is(.body-content, .modal) textarea:not(.form-control):not(.ghost),
body.theme-modern :is(.body-content, .modal) input:is([type="text"], [type="number"], :not([type])):not(.form-control):not(.ghost) {
    background-color: var(--surface);
    color: var(--text);
}

    body.theme-modern :is(.body-content, .modal) textarea:not(.form-control):not(.ghost):disabled,
    body.theme-modern :is(.body-content, .modal) input:is([type="text"], [type="number"], :not([type])):not(.form-control):not(.ghost):disabled {
        background-color: var(--field-disabled);
        color: var(--text);
    }

/* Multiple selects, con o senza form-control (i filtri di Views\Assets\Index.cshtml, le multi combo di
   Views\Report\WorkforceAllocation.cshtml, SmartWorking.cshtml, FirstAndLastDays.cshtml, HR.cshtml).
   height: auto e' obbligatorio: senza, quelle con form-control prendono l'altezza fissa di un campo
   singolo dalla regola piu' sopra e si schiacciano a una riga, nascondendo la lista. E' la stessa
   eccezione gia' fatta per textarea.form-control, e lo stesso che fa Bootstrap (select[multiple] in
   bootstrap.css), che pero' qui perde di specificita' contro .form-control. */
body.theme-modern :is(.body-content, .modal) select[multiple] {
    height: auto;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    font-family: var(--font);
}

    body.theme-modern :is(.body-content, .modal) select[multiple] option {
        padding: 2px 6px;
        border-radius: 4px;
    }

/* Error (SetError) */
body.theme-modern :is(.body-content, .modal) .form-control.input-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .12);
}

/* Label set into the border */
body.theme-modern :is(.body-content, .modal) .field-outlined {
    position: relative;
    margin: 10px 0 12px 0;
}

    body.theme-modern :is(.body-content, .modal) .field-outlined > br {
        display: none;
    }

    body.theme-modern :is(.body-content, .modal) .field-outlined > .label.label-dark,
    body.theme-modern :is(.body-content, .modal) .field-outlined > label.label {
        position: absolute;
        z-index: 1;
        top: -8px;
        left: 9px;
        max-width: calc(100% - 18px);
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 4px;
        border-radius: 0;
        /* Half surface, half field: the label cuts the border on enabled and disabled fields */
        background: linear-gradient(to bottom, var(--surface) 50%, var(--field-disabled) 50%);
        color: var(--muted);
        font-size: 11.5px;
        font-weight: 600;
        line-height: 16px;
        letter-spacing: .01em;
        text-transform: none;
        white-space: nowrap;
        transition: color .15s ease;
    }

    body.theme-modern :is(.body-content, .modal) .field-outlined:focus-within > .label.label-dark,
    body.theme-modern :is(.body-content, .modal) .field-outlined:focus-within > label.label {
        color: var(--brand);
        background: var(--surface);
    }

    body.theme-modern :is(.body-content, .modal) .field-outlined > .form-control {
        padding-top: 2px; /* room for the label on the border */
    }

/* Captions (label-dark not in a field) */
body.theme-modern :is(.body-content, .modal) .label.label-dark {
    display: inline-block;
    padding: 0;
    margin-bottom: 6px;
    background: none;
    border-radius: 0;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Sensitive data (IBAN...): orange caption, as in the rest of the intranet */
body.theme-modern :is(.body-content, .modal) .label.label-dark.sensible {
    background: linear-gradient(to bottom, var(--surface) 50%, var(--field-disabled) 50%) !important;
    color: var(--sensible);
}

/* ---- Radio buttons: segmented control ---- */
body.theme-modern :is(.body-content, .modal) .segmented {
    display: inline-flex;
    padding: 3px;
    margin: 8px 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: var(--field-disabled);
}

    body.theme-modern :is(.body-content, .modal) .segmented > .radio-inline {
        margin: 0;
        padding: 0;
    }

        body.theme-modern :is(.body-content, .modal) .segmented > .radio-inline > input {
            position: absolute;
            opacity: 0;
            margin: 0;
        }

        body.theme-modern :is(.body-content, .modal) .segmented > .radio-inline > span {
            display: block;
            min-width: 72px;
            padding: 6px 16px;
            border-radius: 6px;
            color: var(--muted);
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            transition: background-color .15s ease, color .15s ease;
        }

        body.theme-modern :is(.body-content, .modal) .segmented > .radio-inline > input:checked + span {
            background-color: var(--brand);
            color: var(--on-brand);
            box-shadow: 0 1px 2px rgba(16, 24, 40, .15);
        }

        body.theme-modern :is(.body-content, .modal) .segmented > .radio-inline > input:focus-visible + span {
            outline: 2px solid var(--brand);
            outline-offset: 2px;
        }

/* ---- Buttons ---- */
body.theme-modern :is(.body-content, .modal) .btn {
    height: var(--btn-h);
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    line-height: calc(var(--btn-h) - 2px);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    body.theme-modern :is(.body-content, .modal) .btn:active {
        box-shadow: none;
    }

body.theme-modern :is(.body-content, .modal) .btn-sm {
    height: var(--btn-h-sm);
    padding: 0 10px;
    font-size: 13px;
    line-height: calc(var(--btn-h-sm) - 2px);
}

body.theme-modern :is(.body-content, .modal) .btn-xs {
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 22px;
    border-radius: 6px;
}

body.theme-modern :is(.body-content, .modal) .btn-dark {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--on-brand);
}

    body.theme-modern :is(.body-content, .modal) .btn-dark:hover,
    body.theme-modern :is(.body-content, .modal) .btn-dark:focus {
        background-color: var(--ink-hover);
        border-color: var(--ink-hover);
        color: var(--on-brand);
    }

body.theme-modern :is(.body-content, .modal) .btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

    body.theme-modern :is(.body-content, .modal) .btn-primary:hover,
    body.theme-modern :is(.body-content, .modal) .btn-primary:focus {
        background-color: var(--brand-dark);
        border-color: var(--brand-dark);
        color: var(--on-brand);
    }

body.theme-modern :is(.body-content, .modal) .btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--on-brand);
}

    body.theme-modern :is(.body-content, .modal) .btn-success:hover,
    body.theme-modern :is(.body-content, .modal) .btn-success:focus {
        background-color: var(--success-dark);
        border-color: var(--success-dark);
        color: var(--on-brand);
    }

body.theme-modern :is(.body-content, .modal) .btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: var(--on-brand);
}

    body.theme-modern :is(.body-content, .modal) .btn-danger:hover,
    body.theme-modern :is(.body-content, .modal) .btn-danger:focus {
        background-color: var(--danger-dark);
        border-color: var(--danger-dark);
        color: var(--on-brand);
    }

body.theme-modern :is(.body-content, .modal) .btn-default {
    background-color: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
}

    body.theme-modern :is(.body-content, .modal) .btn-default:hover,
    body.theme-modern :is(.body-content, .modal) .btn-default:focus {
        background-color: var(--bg);
        border-color: var(--line-hover);
        color: var(--ink);
    }

/* Split buttons (payslips) */
body.theme-modern :is(.body-content, .modal) .payrolls-split-btn > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.theme-modern :is(.body-content, .modal) .payrolls-split-btn > .payrolls-dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid rgba(var(--on-brand-rgb), .35);
    padding: 0 10px;
}

/* Split buttons on the right edge of a table row (payslips year): open the menu towards the left */
body.theme-modern :is(.body-content, .modal) .file-table .payrolls-dropdown-menu {
    left: auto;
    right: 0;
}

body.theme-modern :is(.body-content, .modal) .payrolls-dropdown-menu {
    background: var(--surface); /* css\Resources\ResourceDetails.css has #fff */
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 6px;
}

    body.theme-modern :is(.body-content, .modal) .payrolls-dropdown-menu li a {
        border-radius: 6px;
        color: var(--text);
        font-size: 13px;
        padding: 8px 12px;
    }

        body.theme-modern :is(.body-content, .modal) .payrolls-dropdown-menu li a:hover {
            background-color: rgba(var(--brand-rgb), .07);
            color: var(--ink);
        }

/* Bootstrap toggle */
/* The plugin writes the height measured at init inline: forced here to the button height
   (the toggles are re-measured when the theme changes, SetTheme in Scripts\common.js) */
body.theme-modern :is(.body-content, .modal) .toggle.btn {
    height: var(--btn-h) !important;
    border-radius: var(--radius-sm);
}

    /* Center the text with flex, whatever the toggle height. The plugin sets an inline line-height from the
       measured height and css\site-bootstrap-overrides.css adds padding-top:5px !important (for the old 26px toggles):
       both are cancelled here. The handle side keeps the room for the handle. */
    body.theme-modern :is(.body-content, .modal) .toggle .toggle-on,
    body.theme-modern :is(.body-content, .modal) .toggle .toggle-off {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        line-height: normal !important;
    }

    body.theme-modern :is(.body-content, .modal) .toggle .toggle-on.btn {
        padding: 0 22px 0 0 !important;
    }

    body.theme-modern :is(.body-content, .modal) .toggle .toggle-off.btn {
        padding: 0 0 0 22px !important;
    }

body.theme-modern :is(.body-content, .modal) .toggle .toggle-on.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
}

body.theme-modern :is(.body-content, .modal) .toggle .toggle-off {
    background-color: var(--field-disabled);
    border-color: var(--line-strong);
    color: var(--ink);
}

body.theme-modern :is(.body-content, .modal) .toggle .toggle-handle {
    height: 100%;
    width: 22px;
    padding: 0;
    background-color: var(--surface);
    border-color: var(--line-strong);
}

/* Year picker (Views\Shared\YearPicker.cshtml) */
body.theme-modern :is(.body-content, .modal) [year-picker-name] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

    body.theme-modern :is(.body-content, .modal) [year-picker-name] select.form-control {
        width: auto;
        height: var(--btn-h);
        padding: 0 12px !important;
        border: 1px solid var(--line-strong) !important;
        font-weight: 600;
        -webkit-appearance: menulist !important;
    }

    body.theme-modern :is(.body-content, .modal) [year-picker-name] .btn[btn-name="prev"],
    body.theme-modern :is(.body-content, .modal) [year-picker-name] .btn[btn-name="next"] {
        width: var(--btn-h);
        padding: 0;
    }

    body.theme-modern :is(.body-content, .modal) [year-picker-name] .btn:disabled {
        opacity: .35;
    }

/* ---- Tables ---- */
body.theme-modern :is(.body-content, .modal) .table,
body.theme-modern :is(.body-content, .modal) .file-table,
body.theme-modern :is(.body-content, .modal) .academy-table,
body.theme-modern :is(.body-content, .modal) .objectives-table,
body.theme-modern :is(.body-content, .modal) .uniqversity-rewards-table,
body.theme-modern :is(.body-content, .modal) .rd-ai-tools-table {
    width: 100%;
    margin-bottom: 0;
    border: none;
    border-collapse: collapse;
    background-color: var(--surface);
    font-size: var(--table-font-size);
}

    body.theme-modern :is(.body-content, .modal) .table > thead > tr > th,
    body.theme-modern :is(.body-content, .modal) .file-table th,
    body.theme-modern :is(.body-content, .modal) .academy-table th,
    body.theme-modern :is(.body-content, .modal) .objectives-table th,
    body.theme-modern :is(.body-content, .modal) .uniqversity-rewards-table th,
    body.theme-modern :is(.body-content, .modal) .rd-ai-tools-table th {
        padding: var(--cell-py) var(--cell-px);
        border: none;
        border-bottom: 1px solid var(--line);
        background: var(--bg);
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
    }

    body.theme-modern :is(.body-content, .modal) .table.table-small > tbody > tr > td,
    body.theme-modern :is(.body-content, .modal) .file-table td,
    body.theme-modern :is(.body-content, .modal) .file-table td:first-child,
    body.theme-modern :is(.body-content, .modal) .file-table td:last-child,
    body.theme-modern :is(.body-content, .modal) .file-table td:nth-child(n),
    body.theme-modern :is(.body-content, .modal) .academy-table td,
    body.theme-modern :is(.body-content, .modal) .objectives-table td,
    body.theme-modern :is(.body-content, .modal) .uniqversity-rewards-table td,
    body.theme-modern :is(.body-content, .modal) .rd-ai-tools-table td {
        padding: var(--cell-py) var(--cell-px);
        border: none;
        border-bottom: 1px solid var(--line);
        background: none;
        color: var(--text);
        text-align: left;
        vertical-align: middle;
    }

    /* The other .table (report grids with their own CSS: css\Report\*, css\CoGe\*, css\Commissions\*...):
       the same padding and lines, while background and alignment have no specificity (:where),
       so the page wins when it colors a row or a cell (statuses, totals, legends) or aligns the numbers */
    body.theme-modern :is(.body-content, .modal) .table > tbody > tr > td {
        padding: var(--cell-py) var(--cell-px);
        border: none;
        border-bottom: 1px solid var(--line);
        vertical-align: middle;
    }

    :where(body.theme-modern :is(.body-content, .modal) .table > tbody > tr > td) {
        background: none;
        text-align: left;   /* the text color is inherited (also from a row colored by the page) */
    }

    /* Bootstrap stripes and contextual rows (light colors on the tr / td): theme tints */
    body.theme-modern :is(.body-content, .modal) .table-striped:not(.table-small) > tbody > tr:nth-of-type(odd) {
        background-color: rgba(var(--brand-rgb), .025);
    }

    body.theme-modern :is(.body-content, .modal) .table > tbody > tr > td.active,
    body.theme-modern :is(.body-content, .modal) .table > tbody > tr.active > td {
        background-color: var(--bg);
    }

    body.theme-modern :is(.body-content, .modal) .table > tbody > tr > td.success,
    body.theme-modern :is(.body-content, .modal) .table > tbody > tr.success > td {
        background-color: rgba(var(--success-rgb), .12);
    }

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

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

    body.theme-modern :is(.body-content, .modal) .table > tbody > tr > td.danger,
    body.theme-modern :is(.body-content, .modal) .table > tbody > tr.danger > td {
        background-color: rgba(var(--danger-rgb), .12);
    }

    body.theme-modern :is(.body-content, .modal) .table > tbody > tr:last-child > td,
    body.theme-modern :is(.body-content, .modal) .file-table tr:last-child td,
    body.theme-modern :is(.body-content, .modal) .academy-table tr:last-child td,
    body.theme-modern :is(.body-content, .modal) .objectives-table tr:last-child td,
    body.theme-modern :is(.body-content, .modal) .uniqversity-rewards-table tr:last-child td,
    body.theme-modern :is(.body-content, .modal) .rd-ai-tools-table tr:last-child td {
        border-bottom: none;
    }

    /* No row backgrounds of the classic styles (zebra of .file-table, light blue hover of .academy-table
       in css\Resources\ResourceDetails - Academy.css...): only the theme hover on the cells below */
    body.theme-modern :is(.body-content, .modal) .table.table-small tr,
    body.theme-modern :is(.body-content, .modal) .file-table tr,
    body.theme-modern :is(.body-content, .modal) .file-table tr:nth-of-type(2n+1),
    body.theme-modern :is(.body-content, .modal) .academy-table tr,
    body.theme-modern :is(.body-content, .modal) .objectives-table tr,
    body.theme-modern :is(.body-content, .modal) .uniqversity-rewards-table tr,
    body.theme-modern :is(.body-content, .modal) .rd-ai-tools-table tr {
        background: none;
    }

        /* Bootstrap .table-hover (css\bootstrap.css) paints an opaque #f5f5f5 on the tr: in the dark
           themes the row turns light under the light text (Scripts\Report\TimesheetAnalysis.js
           .tsma-history, Scripts\Resources\FaceWall.js KO dialog). The theme hover is the overlay on
           the td below; a page that wants an opaque row keeps setting it on the tr with !important
           (css\Report\SmartWorking.css, css\Report\TotalTimesheet.css) */
        body.theme-modern :is(.body-content, .modal) .table-hover > tbody > tr:hover {
            background-color: transparent;
        }

        body.theme-modern :is(.body-content, .modal) .table > tbody > tr:hover > td,
        body.theme-modern :is(.body-content, .modal) .file-table tr:hover td,
        body.theme-modern :is(.body-content, .modal) .academy-table tbody tr:hover td,
        body.theme-modern :is(.body-content, .modal) .objectives-table tbody tr:hover td,
        body.theme-modern :is(.body-content, .modal) .uniqversity-rewards-table tbody tr:hover td {
            background-image: linear-gradient(rgba(var(--brand-rgb), .04), rgba(var(--brand-rgb), .04));   /* an overlay: the cells colored by the page keep their color */
        }

    /* Alignments of the classic styles (css\Resources\ResourceDetails - Academy.css) that the left alignment above cancels:
       Uniqversity rewards: centered titles spanning the columns, points on the right; academy tables: amount on the right */
    body.theme-modern :is(.body-content, .modal) .uniqversity-rewards-table th {
        text-align: center;
    }

    body.theme-modern :is(.body-content, .modal) .uniqversity-rewards-table td:nth-child(2),
    body.theme-modern :is(.body-content, .modal) .uniqversity-rewards-table td:nth-child(4),
    body.theme-modern :is(.body-content, .modal) .uniqversity-rewards-table td:nth-child(6),
    body.theme-modern :is(.body-content, .modal) .academy-table td:last-child {
        text-align: right;
    }

    /* Number and icon columns as narrow as their content (the table is 100% wide:
       with only icon + name, as in the payslips, the icon column would take half the width) */
    body.theme-modern :is(.body-content, .modal) .file-table td:first-child:not([colspan]),
    body.theme-modern :is(.body-content, .modal) .file-table td:has(> img:only-child) {
        width: 1%;
        white-space: nowrap;
    }

    /* Icon column */
    body.theme-modern :is(.body-content, .modal) .file-table td > img {
        width: 16px;
        height: 16px;
    }

    /* Group rows (e.g. the payslips year) */
    body.theme-modern :is(.body-content, .modal) .file-table td[colspan],
    body.theme-modern :is(.body-content, .modal) .file-table tr:hover td[colspan] {
        padding: 4px var(--cell-px);
        background-color: rgba(var(--accent-rgb), .08);
        background-image: none;   /* no row hover overlay */
        color: var(--ink);
        font-size: 14px;
        font-weight: 700;
        line-height: 24px;
    }

        /* Small buttons in the group rows (payslips year split button) as tall as the text */
        body.theme-modern :is(.body-content, .modal) .file-table td[colspan] .btn-sm {
            height: 24px;
            padding: 0 8px;
            font-size: 12px;
            line-height: 22px;
        }

body.theme-modern :is(.body-content, .modal) .table-responsive {
    border: none;
    margin-bottom: 0;
}

/* Bootstrap 3 sets overflow-x:auto on .table-responsive at every width: it clips the dropdowns opened in
   the table (column filters of CreateFilterForColumn, Scripts\common.js). Scroll only on small screens. */
@media (min-width: 768px) {
    body.theme-modern :is(.body-content, .modal) .table-responsive {
        overflow: visible;
    }
}

/* Column filter menus: normal text (not the uppercase of the th) and the theme look */
body.theme-modern :is(.body-content, .modal) th .dropdown-menu {
    padding: 6px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
}

    body.theme-modern :is(.body-content, .modal) th .dropdown-menu > li > a {
        border-radius: 5px;
        cursor: pointer;
    }

/* Dropdown menus of the page (column filters, Bootstrap dropdowns): theme colors, not the Bootstrap white */
body.theme-modern :is(.body-content, .modal) .dropdown-menu {
    background-color: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
}

    body.theme-modern :is(.body-content, .modal) .dropdown-menu > li > a,
    body.theme-modern :is(.body-content, .modal) .dropdown-menu label {
        color: var(--text);
    }

        body.theme-modern :is(.body-content, .modal) .dropdown-menu > li > a:hover,
        body.theme-modern :is(.body-content, .modal) .dropdown-menu > li > a:focus {
            background: rgba(var(--brand-rgb), .07);
            background-image: none;
            color: var(--ink);
        }

    body.theme-modern :is(.body-content, .modal) .dropdown-menu .divider {
        background-color: var(--line);
    }

    body.theme-modern :is(.body-content, .modal) .dropdown-menu hr {
        border-top-color: var(--line);
    }

/* Native checkboxes and radios in the theme color */
body.theme-modern :is(.body-content, .modal) input[type="checkbox"],
body.theme-modern :is(.body-content, .modal) input[type="radio"] {
    accent-color: var(--brand);
}

/* Column filter menus of the last columns: open towards the left, inside the table */
body.theme-modern :is(.body-content, .modal) th:last-child .btn-group > .dropdown-menu,
body.theme-modern :is(.body-content, .modal) th:nth-last-child(2) .btn-group > .dropdown-menu {
    left: auto;
    right: 0;
}

/* ---- Alerts: empty states ---- */
body.theme-modern :is(.body-content, .modal) .alert-info {
    margin: 0;
    padding: 24px 16px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    background-image: none;
    box-shadow: none;
    color: var(--muted);
    text-align: center;
    text-shadow: none;
}

    body.theme-modern :is(.body-content, .modal) .alert-info:before {
        content: "\f05a"; /* fa-info-circle */
        font-family: FontAwesome;
        display: block;
        margin-bottom: 6px;
        font-size: 22px;
        color: var(--accent);
    }

/* ---- Badges, labels, chips ---- */
body.theme-modern :is(.body-content, .modal) .badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

body.theme-modern :is(.body-content, .modal) .badge-green {
    background-color: var(--success);
}

body.theme-modern :is(.body-content, .modal) .badge-blue {
    background-color: var(--brand);
}

body.theme-modern .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: rgba(var(--accent-rgb), .12);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

    body.theme-modern .chip.chip-success {
        background-color: rgba(var(--success-rgb), .12);
        color: var(--success);
    }

    body.theme-modern .chip.chip-warning {
        background-color: rgba(var(--warning-rgb), .14);
        color: var(--warning-text);
    }

/* ---- History timeline (Scripts\Profile\ProfileDetails.js / Resources\ResourceDetails.js: GetEventHtmlCard) ---- */
body.theme-modern :is(.body-content, .modal) #event-history {
    position: relative;
    padding-left: 28px;
}

    body.theme-modern :is(.body-content, .modal) #event-history:before {
        content: "";
        position: absolute;
        left: 9px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background-color: var(--line);
    }

body.theme-modern :is(.body-content, .modal) .event-card {
    position: relative;
    max-width: 760px;
    margin-bottom: 12px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

    /* Timeline dot */
    body.theme-modern :is(.body-content, .modal) .event-card:before {
        content: "";
        position: absolute;
        left: -25px;
        top: 18px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--accent);
        box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgba(var(--accent-rgb), .25);
    }

    body.theme-modern :is(.body-content, .modal) .event-card > table th:nth-child(2) {
        padding: 0 12px;
        color: var(--ink);
        font-size: 15px;
        font-weight: 600;
        text-align: left;
    }

    body.theme-modern :is(.body-content, .modal) .event-card #DayLabel {
        width: 96px;
        text-align: center;
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
    }

        body.theme-modern :is(.body-content, .modal) .event-card #DayLabel .label {
            display: inline-block;
            margin-bottom: 2px;
            padding: 3px 10px;
            border-radius: 999px;
            background-color: rgba(var(--accent-rgb), .12);
            color: var(--accent);
            font-size: 12px;
            font-weight: 700;
        }

    body.theme-modern :is(.body-content, .modal) .event-card thead img {
        width: 28px;
        height: 28px;
        opacity: .85;
    }

    body.theme-modern :is(.body-content, .modal) .event-card > table table td {
        padding-top: 8px;
    }

body.theme-modern :is(.body-content, .modal) .event-card-separator {
    display: none;
}

/* ---- Empty documents table (Views\Shared\XDocuments.cshtml): fluid instead of the classic 245px padding ---- */
body.theme-modern :is(.body-content, .modal) .xdocuments-empty {
    padding: 24px 16px;
    color: var(--muted);
    font-size: 15px;
    text-align: center;
}

/* ---- Bootstrap jumbotron, used as empty state (e.g. Views\Resources\Documents_SearchResults.cshtml) ---- */
body.theme-modern :is(.body-content, .modal) .jumbotron {
    padding: 24px 16px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: var(--bg);
    color: var(--muted);
    text-align: center;
}

    body.theme-modern :is(.body-content, .modal) .jumbotron :is(h1, h2, h3, h4) {
        margin: 0;
        color: var(--muted);
        font-size: 16px;
    }

/* ---- Bootstrap progress bars (e.g. Views\Resources\Index.cshtml) ---- */
body.theme-modern :is(.body-content, .modal) .progress {
    border-radius: 999px;
    background-color: var(--field-disabled);
    background-image: none;
    box-shadow: none;
}

    body.theme-modern :is(.body-content, .modal) .progress-bar {
        background-color: var(--accent);
        background-image: none;
        box-shadow: none;
        color: var(--on-brand);
    }

    body.theme-modern :is(.body-content, .modal) .progress-bar-success {
        background-color: var(--success);
    }

    body.theme-modern :is(.body-content, .modal) .progress-bar-warning {
        background-color: var(--warning);
    }

    body.theme-modern :is(.body-content, .modal) .progress-bar-danger {
        background-color: var(--danger);
    }

/* ---- Bootstrap default label (e.g. the "also in" badge of the Dashboard cards) ---- */
body.theme-modern :is(.body-content, .modal) .label-default {
    background-color: var(--muted);
    background-image: none;
    color: var(--surface);
}

/* ---- Dashboard (Views\Dashboard\Index.cshtml, css\Report\ReportDashboard.css) ----
   Colors and shadows of ReportDashboard.css already use the theme variables (with the classic fallback):
   here the section color becomes the theme accent (accent bar of the panel, washes) */
body.theme-modern .rd-section {
    --accent: var(--rd-accent);
    --accent-rgb: var(--rd-accent-rgb);
}

body.theme-modern .rd-title {
    color: var(--ink);
    font-family: var(--heading-font);
}

/* The cards are links in a panel: not the link color of the panels */
body.theme-modern :is(.body-content, .modal) .rd-section a.rd-card,
body.theme-modern :is(.body-content, .modal) .rd-section a.rd-card:hover,
body.theme-modern :is(.body-content, .modal) .rd-section a.rd-card:focus {
    color: var(--ink);
}

body.theme-modern .rd-card {
    border-radius: var(--radius-sm);
}

/* ---- Objective sheet (Views\Academy\Academy_ObjectiveSheet.cshtml, css\Academy\SchedaObiettivi.css) ----
   A 700px document made for the print: in the theme it stays a sheet of paper on the page.
   SchedaObiettivi.css reads the --so-* document variables (classic values as fallback); the print is classic
   anyway, the themes CSS are screen only (Views\Shared\_Layout.cshtml) */
body.theme-modern {
    --so-accent: var(--brand);
    --so-accent-rgb: var(--brand-rgb);
    --so-paper: #ffffff;
    --so-ink: var(--ink);
    --so-line: var(--line-strong);
    --so-muted: var(--muted);
    --so-input-bg: rgba(var(--brand-rgb), .08);
    --so-badge-bg: var(--ink);
    --so-badge-text: #ffffff;
}

body.theme-modern .scheda-obiettivi {
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: var(--so-paper);
    color: var(--so-ink);
    /* The paper margins with a shadow spread: the 700px of the document do not change */
    box-shadow: 0 0 0 32px var(--so-paper), 0 0 0 33px var(--line), 0 24px 60px rgba(16, 24, 40, .14);
}

    body.theme-modern .scheda-obiettivi input,
    body.theme-modern .scheda-obiettivi textarea {
        color: inherit;
    }

    body.theme-modern .scheda-obiettivi h1 {
        font-family: var(--heading-font);
    }

    /* Competence model 2024 (Views\Shared\ModelloCompetenze2024.cshtml, objective sheet and ResourceDetails dashboard): its colored cells are data, dark text on them */
    body.theme-modern .modello_competenze th:not(:first-child),
    body.theme-modern .modello_competenze td:not(:first-child) {
        color: #1a1a1a;
    }

body.theme-modern .menu-scheda-obiettivi .edit-by {
    color: var(--muted);
}

/* The fixed panels at the sides (menu, user quick info) over the sheet: the sheet has a background in the theme
   and, coming later in the page, would cover them (in Vanilla the sheet is transparent) */
body.theme-modern .user-quick-info,
body.theme-modern .view-only-menu {
    z-index: 25;
}

/* "Set default" button of the objectives: classic position 100px to the left of the table; in the theme
   the button is wider, its right edge goes outside the paper instead (32px of paper margin) */
body.theme-modern .scheda-obiettivi #btnSetDefaultObjectives {
    left: -44px !important;
    transform: translateX(-100%);
    white-space: nowrap;
}

/* Objectives tables: the textareas without a width take 20 columns of the font (wider fonts in the theme)
   and the table went out of the 700px of the sheet. Fixed layout, fields as wide as their cell */
body.theme-modern .scheda-obiettivi table.obiettivi {
    table-layout: fixed;
}

    body.theme-modern .scheda-obiettivi table.obiettivi textarea,
    body.theme-modern .scheda-obiettivi table.obiettivi input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

/* ---- Fieldset legend: Bootstrap #333 on #e5e5e5, invisible on the dark themes. Same specificity as Bootstrap
   (this file comes later): the page styles with a class (e.g. css\Admin\CompanyCareerPaths.css) still win ---- */
:where(body.theme-modern) legend {
    border-bottom-color: var(--line);
    color: var(--ink);
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
    /* Tabs: they wrap on more rows, a bit tighter */
    body.theme-modern :is(.body-content, .modal) .nav-tabs > li > a {
        white-space: nowrap;
        padding: 10px 10px 7px 10px;
    }

    body.theme-modern :is(.body-content, .modal) .panel > .panel-body {
        padding: min(var(--panel-body-p), 12px);
    }

    body.theme-modern :is(.body-content, .modal) #event-history {
        padding-left: 20px;
    }

        body.theme-modern :is(.body-content, .modal) #event-history:before {
            left: 5px;
        }

    body.theme-modern :is(.body-content, .modal) .event-card {
        max-width: 100%;
        padding: 8px 10px;
    }

        body.theme-modern :is(.body-content, .modal) .event-card:before {
            left: -20px;
        }
}