@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,400&family=Libre+Franklin:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ---------------------------------------------------------------------------
   Tema "Paper & Ink": carta stampata di qualità, rivista indipendente, taccuino.

   Si appoggia a css\Themes\theme-modern.css come Alien: il body ha le classi theme-modern theme-paper
   (ApplyTheme in Scripts\common.js), qui si ridefiniscono le variabili e lo stile "stampato":
   - fondo avorio (#F9F6F0, mai bianco puro) con una grana di carta e pieghe appena visibili (solo CSS);
   - inchiostro caldo #1A1918 al posto del nero, per testi, linee e ombre;
   - colore solo da rosso vermiglio (#C83B2B, timbri e dettagli) e blu oltremare (#1F3A93, evidenziatore, link);
   - bordi squadrati, linee nette e spesse, ombre piene (4px 4px 0) invece delle sfumature;
   - serif editoriale per i titoli (Playfair Display), sans pulito per il corpo (Libre Franklin),
     monospaziato per i dettagli (IBM Plex Mono);
   - capilettera: titolo della dashboard, nome nella testata di My Profile, messaggi vuoti (jumbotron)
     e qualunque elemento con la classe .drop-cap;
   - badge come timbri di gomma, ruotati di pochi gradi.
   --------------------------------------------------------------------------- */

body.theme-modern.theme-paper {
    --vermilion: #C83B2B;
    --vermilion-rgb: 200, 59, 43;
    --ultramarine: #1F3A93;
    --ultramarine-rgb: 31, 58, 147;
    --brand: #C83B2B;
    --brand-rgb: 200, 59, 43;
    --brand-dark: #A32E21;
    --on-brand: #F9F6F0;
    --on-brand-rgb: 249, 246, 240;
    --ink: #1A1918;
    --ink-hover: #3A3735;
    --text: #1A1918;
    --muted: #6B645C;
    --placeholder: #A39A8F;
    --line: #D8D0C3;
    --line-strong: #1A1918;
    --line-hover: #1A1918;
    --surface: #FDFBF7;
    --bg: #F9F6F0;
    --field-disabled: #F1ECE2;
    --success: #2F6B3A;
    --success-rgb: 47, 107, 58;
    --success-dark: #24532D;
    --danger: #C83B2B;
    --danger-rgb: 200, 59, 43;
    --danger-dark: #A32E21;
    --warning: #B7791F;
    --warning-rgb: 183, 121, 31;
    --warning-text: #8A5A12;
    --sensible: #C83B2B;
    /* Page header (My Profile hero, dark dialog headers): printed on the paper */
    --hero-bg: var(--surface);
    --hero-text: #1A1918;
    --hero-muted: #6B645C;
    --hero-chip-bg: transparent;
    --hero-chip-border: #1A1918;
    --radius: 0;
    --radius-sm: 0;
    --shadow: 4px 4px 0 #1A1918;
    --shadow-lg: 6px 6px 0 #1A1918;
    --font: 'Libre Franklin', 'Inter', 'Segoe UI', sans-serif;
    --heading-font: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --mono-font: 'IBM Plex Mono', Consolas, monospace;
    --row-hover: rgba(26, 25, 24, .045);
    --row-selected: rgba(31, 58, 147, .12); /* blue highlighter */
    --accent: #1F3A93;
    --accent-rgb: 31, 58, 147;
    --chart-colors: #1A1918, #C83B2B, #1F3A93, #8C8279, #E3826F, #6F86C9, #4A4542, #7A1F15, #0F1F52, #B8AC9C, #A35A4F, #3D5BB8;
    --chart-slice-text: #F9F6F0;
    /* Timesheet header (css\Timesheet\Timesheet.css) */
    --ts-head-bg: #1A1918;
    --ts-head-text: #F9F6F0;
    --ts-head-line: #1A1918;
    /* Objective sheet (css\Academy\SchedaObiettivi.css) */
    --so-paper: #FDFBF7;
    --so-ink: #1A1918;
    --so-line: #1A1918;
    --so-input-bg: rgba(31, 58, 147, .07);
    --so-badge-bg: #1A1918;
    --so-badge-text: #F9F6F0;
    /* Paper: fine grain (SVG noise) + two soft creases and a light fold, fixed under the content */
    background-color: #F9F6F0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .08 .08 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(112deg, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, .55) 49.6%, rgba(120, 100, 70, .06) 50.2%, rgba(255, 255, 255, 0) 54%),
        radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 45%),
        radial-gradient(ellipse at 85% 85%, rgba(120, 100, 70, .07) 0%, rgba(120, 100, 70, 0) 50%);
    background-attachment: fixed;
    color: #1A1918;
    color-scheme: light;
    scrollbar-color: #1A1918 #F1ECE2;
}

    body.theme-modern.theme-paper ::selection {
        background: rgba(31, 58, 147, .22); /* blue highlighter */
        color: #1A1918;
    }

/* ---- Accents: only vermilion, ultramarine and ink ---- */
body.theme-modern.theme-paper .accent-blue { --accent: #1F3A93; --accent-rgb: 31, 58, 147; }
body.theme-modern.theme-paper .accent-orange { --accent: #C83B2B; --accent-rgb: 200, 59, 43; }
body.theme-modern.theme-paper .accent-green { --accent: #1A1918; --accent-rgb: 26, 25, 24; }
body.theme-modern.theme-paper .accent-violet { --accent: #1F3A93; --accent-rgb: 31, 58, 147; }
body.theme-modern.theme-paper .accent-slate { --accent: #6B645C; --accent-rgb: 107, 100, 92; }

/* Dashboard sections (css\Report\ReportDashboard.css) */
body.theme-modern.theme-paper .rd-accent-blue { --rd-accent: #1F3A93; --rd-accent-rgb: 31, 58, 147; }
body.theme-modern.theme-paper .rd-accent-orange { --rd-accent: #C83B2B; --rd-accent-rgb: 200, 59, 43; }
body.theme-modern.theme-paper .rd-accent-green { --rd-accent: #1A1918; --rd-accent-rgb: 26, 25, 24; }
body.theme-modern.theme-paper .rd-accent-violet { --rd-accent: #1F3A93; --rd-accent-rgb: 31, 58, 147; }
body.theme-modern.theme-paper .rd-accent-neutral { --rd-accent: #6B645C; --rd-accent-rgb: 107, 100, 92; }

/* ---- Typography: editorial serif titles ---- */
body.theme-modern.theme-paper :is(.body-content, .modal) :is(h1, h2, h3, h4) {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
}

/* Drop caps: the first letter, big, in vermilion, as a magazine article or a book chapter.
   Paragraphs: the letter sinks into the first lines (the block contains it, flow-root) */
body.theme-modern.theme-paper :is(.drop-cap, .jumbotron p:first-of-type) {
    display: flow-root;
}

body.theme-modern.theme-paper .drop-cap::first-letter,
body.theme-modern.theme-paper :is(.body-content, .modal) .jumbotron p:first-of-type::first-letter {
    float: left;
    margin: 2px 8px 0 0;
    color: var(--vermilion);
    font-family: var(--heading-font);
    font-size: 3.1em;
    font-weight: 900;
    line-height: .78;
}

/* One line titles (dashboard title, My Profile name): a big vermilion initial in the line, not sunk */
body.theme-modern.theme-paper :is(.rd-title, .profile-hero-name)::first-letter {
    color: var(--vermilion);
    font-family: var(--heading-font);
    font-size: 1.5em;
    font-weight: 900;
    line-height: 1;
}

body.theme-modern.theme-paper .rd-title {
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ---- Panels: squared, thick ink border, hard shadow ---- */
body.theme-modern.theme-paper :is(.body-content, .modal) .panel {
    border: 2px solid var(--ink);
    box-shadow: var(--shadow);
}

body.theme-modern.theme-paper :is(.body-content, .modal) .panel > .panel-heading,
body.theme-modern.theme-paper :is(.body-content, .modal) .panel-primary > .panel-heading,
body.theme-modern.theme-paper :is(.body-content, .modal) .panel-default > .panel-heading {
    padding-left: 16px;
    background-color: transparent;
    border-bottom: 2px solid var(--ink);
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.005em;
}

    /* No accent bar: the title has a small vermilion square, as a printed section mark */
    body.theme-modern.theme-paper :is(.body-content, .modal) .panel > .panel-heading:before {
        position: static;
        display: inline-block;
        width: 8px;
        height: 8px;
        margin: 0 10px 2px 0;
        vertical-align: middle;
        background-color: var(--vermilion);
    }

    body.theme-modern.theme-paper :is(.body-content, .modal) .panel > .panel-heading[onclick]:hover {
        background-color: rgba(26, 25, 24, .04);
    }

    body.theme-modern.theme-paper :is(.body-content, .modal) .panel > .panel-heading[onclick]:after {
        color: var(--ink);
    }

/* ---- Tabs: small caps on a thick rule, the active one underlined in vermilion ---- */
body.theme-modern.theme-paper :is(.body-content, .modal) .nav-tabs {
    border-bottom: 2px solid var(--ink);
    background-color: transparent;
}

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

        body.theme-modern.theme-paper :is(.body-content, .modal) .nav-tabs > li > a {
            border-bottom-width: 4px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

            body.theme-modern.theme-paper :is(.body-content, .modal) .nav-tabs > li > a:hover {
                background-color: rgba(26, 25, 24, .04);
                border-bottom-color: var(--ink);
                color: var(--ink);
            }

        body.theme-modern.theme-paper :is(.body-content, .modal) .nav-tabs > li.active > a,
        body.theme-modern.theme-paper :is(.body-content, .modal) .nav-tabs > li.active > a:hover,
        body.theme-modern.theme-paper :is(.body-content, .modal) .nav-tabs > li.active > a:focus {
            border-bottom: 4px solid var(--vermilion);
            color: var(--ink);
            font-weight: 700;
        }

/* ---- Fields: ink rule, blue when focused ---- */
body.theme-modern.theme-paper :is(.body-content, .modal) .form-control:focus {
    border-color: var(--ultramarine);
    box-shadow: 3px 3px 0 rgba(31, 58, 147, .35);
}

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

/* Captions and the labels on the field borders: monospaced details */
body.theme-modern.theme-paper :is(.body-content, .modal) .label.label-dark,
body.theme-modern.theme-paper :is(.body-content, .modal) .field-outlined > .label.label-dark,
body.theme-modern.theme-paper :is(.body-content, .modal) .field-outlined > label.label {
    font-family: var(--mono-font);
    font-weight: 600;
    letter-spacing: .04em;
}

body.theme-modern.theme-paper :is(.body-content, .modal) .field-outlined > .label.label-dark,
body.theme-modern.theme-paper :is(.body-content, .modal) .field-outlined > label.label {
    color: var(--ink);
    font-size: 10.5px;
    text-transform: uppercase;
}

body.theme-modern.theme-paper :is(.body-content, .modal) .segmented > .radio-inline > span {
    border-radius: 0;
}

/* ---- Buttons: squared, ink border, hard shadow that "presses" when clicked ---- */
body.theme-modern.theme-paper :is(.body-content, .modal) .btn {
    border-width: 2px;
    line-height: calc(var(--btn-h) - 4px);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}

body.theme-modern.theme-paper :is(.body-content, .modal) .btn-sm {
    line-height: calc(var(--btn-h-sm) - 4px);
    font-size: 11.5px;
}

body.theme-modern.theme-paper :is(.body-content, .modal) .btn-xs {
    border-radius: 0;
    line-height: 20px;
}

/* Hard shadow on the stand-alone buttons (not in the table headers / grids, not the toggle halves) */
body.theme-modern.theme-paper :is(.body-content, .modal) .btn:not(table .btn):not(.toggle .btn):not(.toggle) {
    box-shadow: 3px 3px 0 var(--ink);
}

    body.theme-modern.theme-paper :is(.body-content, .modal) .btn:not(table .btn):not(.toggle .btn):not(.toggle):hover {
        transform: translate(-1px, -1px);
        box-shadow: 4px 4px 0 var(--ink);
    }

    body.theme-modern.theme-paper :is(.body-content, .modal) .btn:not(table .btn):not(.toggle .btn):not(.toggle):active {
        transform: translate(2px, 2px);
        box-shadow: 1px 1px 0 var(--ink);
    }

body.theme-modern.theme-paper :is(.body-content, .modal) :is(.btn-primary, .btn-success, .btn-danger, .btn-dark),
body.theme-modern.theme-paper :is(.body-content, .modal) :is(.btn-primary, .btn-success, .btn-danger, .btn-dark):is(:hover, :focus) {
    border-color: var(--ink);
}

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

/* Toggles: one squared block with the hard shadow */
body.theme-modern.theme-paper :is(.body-content, .modal) .toggle.btn {
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}

body.theme-modern.theme-paper :is(.body-content, .modal) .toggle .toggle-handle {
    border-radius: 0;
}

/* Dropdowns */
body.theme-modern.theme-paper :is(.body-content, .modal) :is(.dropdown-menu, .payrolls-dropdown-menu) {
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: var(--shadow);
}

body.theme-modern.theme-paper :is(.body-content, .modal) .payrolls-dropdown-menu li a {
    border-radius: 0;
}

/* ---- Tables: thick rule on top and under the header, monospaced headings ---- */
body.theme-modern.theme-paper :is(.body-content, .modal) :is(.table, .file-table, .academy-table, .objectives-table, .uniqversity-rewards-table, .rd-ai-tools-table) {
    background-color: transparent;
    border-top: 2px solid var(--ink);
}

body.theme-modern.theme-paper :is(.body-content, .modal) .table > thead > tr > th,
body.theme-modern.theme-paper :is(.body-content, .modal) :is(.file-table, .academy-table, .objectives-table, .uniqversity-rewards-table, .rd-ai-tools-table) th {
    background: transparent;
    border-bottom: 2px solid var(--ink);
    color: var(--ink);
    font-family: var(--mono-font);
    font-size: 10.5px;
    font-weight: 600;
}

/* ---- Badges: rubber stamps, a few degrees off ---- */
body.theme-modern.theme-paper :is(.body-content, .modal) .badge:not([style*="background"]),
body.theme-modern.theme-paper .chip {
    display: inline-block;
    padding: 2px 8px;
    border: 2px solid currentColor;
    border-radius: 2px;
    background-color: transparent;
    color: var(--vermilion);
    font-family: var(--mono-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: rotate(-3deg);
    opacity: .92;
}

body.theme-modern.theme-paper :is(.body-content, .modal) .badge-blue:not([style*="background"]),
body.theme-modern.theme-paper .chip.chip-success {
    color: var(--ultramarine);
    transform: rotate(2deg);
}

body.theme-modern.theme-paper :is(.body-content, .modal) .badge-green:not([style*="background"]) {
    color: var(--ink);
    transform: rotate(-2deg);
}

body.theme-modern.theme-paper :is(.body-content, .modal) .badge-orange:not([style*="background"]),
body.theme-modern.theme-paper .chip.chip-warning {
    color: var(--vermilion);
}

body.theme-modern.theme-paper :is(.body-content, .modal) .label {
    border-radius: 0;
}

/* ---- Alerts, empty states, progress ---- */
body.theme-modern.theme-paper :is(.body-content, .modal) :is(.alert, .jumbotron) {
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: var(--shadow);
}

body.theme-modern.theme-paper :is(.body-content, .modal) :is(.progress, .progress-bar) {
    border-radius: 0;
}

body.theme-modern.theme-paper :is(.body-content, .modal) :is(.checkbox, .radio) label::before {
    border: 2px solid var(--ink);
    border-radius: 0;
}

/* Icons with a white background (PNG): printed on the paper */
body.theme-modern.theme-paper :is(.body-content, .modal) :is(.file-table td > img, .up-image-button, .event-card img, td > img, .btn img),
body.theme-modern.theme-paper #waiting-dialog .modal-body img {
    mix-blend-mode: multiply;
}

/* ---- My Profile header: printed title page ---- */
body.theme-modern.theme-paper .profile-hero {
    border-bottom: 4px double var(--ink);
}

body.theme-modern.theme-paper .profile-hero-name {
    font-family: var(--heading-font);
    font-weight: 700;
    letter-spacing: -.01em;
}

body.theme-modern.theme-paper .profile-hero-photo {
    border: 2px solid var(--ink);
    box-shadow: var(--shadow);
}

body.theme-modern.theme-paper .profile-hero-chip {
    border-width: 1.5px;
    border-radius: 0;
    font-family: var(--mono-font);
    font-size: 11.5px;
}

body.theme-modern.theme-paper .profile-tabs-bar {
    border-bottom: 2px solid var(--ink);
    box-shadow: none;
}

/* ---- Dashboard cards ---- */
body.theme-modern.theme-paper .rd-card {
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: var(--shadow);
    transition: transform .08s ease, box-shadow .08s ease;
}

    body.theme-modern.theme-paper .rd-card:hover,
    body.theme-modern.theme-paper .rd-card:focus {
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0 var(--ink);
    }

body.theme-modern.theme-paper .rd-card-icon {
    border-radius: 0;
}

body.theme-modern.theme-paper .rd-card-title {
    font-family: var(--heading-font);
    font-weight: 700;
}

/* ---- Objective sheet: a printed sheet with a hard shadow ---- */
body.theme-modern.theme-paper .scheda-obiettivi {
    box-shadow: 0 0 0 32px var(--so-paper), 0 0 0 34px var(--ink), 10px 10px 0 34px var(--ink);
}

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

/* ---- Shared components (theme-modern-components.css) ---- */
body.theme-modern.theme-paper .modal-content {
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: 8px 8px 0 var(--ink);
}

body.theme-modern.theme-paper .modal-header.modal-header-dark {
    border-bottom: 2px solid var(--ink);
}

    body.theme-modern.theme-paper .modal-header.modal-header-dark .modal-title {
        font-family: var(--heading-font);
        font-weight: 700;
    }

body.theme-modern.theme-paper .modal-backdrop.in {
    background-color: #3A3226;
    opacity: .45;
}

body.theme-modern.theme-paper .notify-popup-div {
    border: 2px solid var(--ink);
    border-left: 6px solid var(--vermilion);
    border-radius: 0;
    box-shadow: var(--shadow);
}

body.theme-modern.theme-paper :is(.datepicker.datepicker-dropdown, .context-menu, .popover) {
    border: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: var(--shadow);
}

/* Selected rows of the data grids (LorenzoTable): blue highlighter, not the vermilion of --brand */
body.theme-modern.theme-paper :is(.body-content, .modal) .table.table-small > tbody > tr.selected > td {
    background-color: var(--row-selected);
}

body.theme-modern.theme-paper :is(.body-content, .modal) .table-small mark {
    background-color: rgba(31, 58, 147, .22); /* blue highlighter */
    color: var(--ink);
}

/* Leaflet map (Views\Resources\FaceWall.cshtml): an old printed map */
body.theme-modern.theme-paper .leaflet-tile-pane {
    filter: grayscale(1) sepia(.35) contrast(1.05) brightness(1.02);
}

body.theme-modern.theme-paper .leaflet-container {
    background-color: #F1ECE2;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-modern.theme-paper :is(.body-content, .modal) .btn,
    body.theme-modern.theme-paper .rd-card {
        transition: none;
    }
}

/* ---- Top bar, side menu, footer (rules in theme-modern-components.css): an ink masthead ---- */
body.theme-modern.theme-paper {
    --chrome-bg: #1A1918;
    --chrome-bar-bg: #1A1918;
    --chrome-bg-2: #121110;
    --chrome-border: #3A3735;
    --chrome-text: #CFC8BC;
    --chrome-text-active: #F9F6F0;
    --chrome-hover-bg: rgba(249, 246, 240, .06);
    --chrome-active-bg: rgba(200, 59, 43, .18);
    --chrome-accent: #C83B2B;
    --chrome-header-font: var(--mono-font);
    --chrome-popup-bg: #FDFBF7;
    --chrome-popup-text: #1A1918;
    --chrome-popup-border: #1A1918;
}

/* Double rule under the masthead: a paper line, then an ink line */
body.theme-modern.theme-paper .top-bar {
    box-shadow: 0 2px 0 #F9F6F0, 0 4px 0 #1A1918;
}

/* User menu: a paper card with the hard shadow */
body.theme-modern.theme-paper .userMenu {
    border-width: 2px;
    box-shadow: 4px 4px 0 #1A1918;
}

body.theme-modern.theme-paper .body-content > footer > div:last-child {
    font-size: 11px;
    letter-spacing: .04em;
}