﻿@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------------------
   Tema "Astro": dark spaziale e raffinato.

   Si appoggia a css\Themes\theme-modern.css come Alien: il body ha le classi theme-modern theme-dark theme-astro
   (ApplyTheme in Scripts\common.js). Le regole comuni ai temi scuri (controlli nativi scuri, testo scuro
   sulle celle-dato chiare, mappa scura...) sono in theme-modern-components.css (body.theme-dark);
   qui le variabili e lo stile:
   - fondo blu-notte (#090D16) invece del nero assoluto, con due nebulose sfumate e un cielo di stelle appena visibile;
   - card grigio-blu (#111827) con bordi sottili e un alone blu (#3B82F633);
   - testo bianco polare (#F1F5F9), secondario grigio acciaio (#94A3B8);
   - accenti: azzurro stella (#38BDF8, principale) e viola nebulosa (#8B5CF6 / #A78BFA);
   - Inter per il testo, JetBrains Mono per i dati tecnici (intestazioni di tabella, didascalie, badge);
   - titoli con il gradiente bianco -> acciaio, badge "in orbita" con il puntino luminoso,
     pulsante principale a gradiente azzurro con alone.
   --------------------------------------------------------------------------- */

body.theme-modern.theme-astro {
    --star: #38BDF8;
    --star-rgb: 56, 189, 248;
    --nebula: #8B5CF6;
    --nebula-light: #A78BFA;
    --nebula-rgb: 139, 92, 246;
    --brand: #38BDF8;
    --brand-rgb: 56, 189, 248;
    --brand-dark: #0284C7;
    --on-brand: #090D16;
    --on-brand-rgb: 9, 13, 22;
    --ink: #F1F5F9;
    --ink-hover: #1F2937;
    --text: #E2E8F0;
    --muted: #94A3B8;
    --placeholder: #64748B;
    --line: #1E293B;
    --line-strong: #334155;
    --line-hover: #475569;
    --surface: #111827;
    --bg: #090D16;
    --field-disabled: #0F172A;
    --success: #34D399;
    --success-rgb: 52, 211, 153;
    --success-dark: #10B981;
    --danger: #F87171;
    --danger-rgb: 248, 113, 113;
    --danger-dark: #EF4444;
    --warning: #FBBF24;
    --warning-rgb: 251, 191, 36;
    --warning-text: #FBBF24;
    --sensible: #FB923C;
    /* Page header (My Profile hero, dark dialog headers): deep space with the two nebulae */
    --hero-bg: radial-gradient(circle at 85% -10%, rgba(139, 92, 246, .35) 0%, rgba(139, 92, 246, 0) 50%), radial-gradient(circle at 10% 120%, rgba(56, 189, 248, .22) 0%, rgba(56, 189, 248, 0) 45%), linear-gradient(180deg, #0B1120 0%, #090D16 100%);
    --hero-text: #F1F5F9;
    --hero-muted: #94A3B8;
    --hero-chip-bg: rgba(139, 92, 246, .12);
    --hero-chip-border: rgba(139, 92, 246, .3);
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6), 0 0 0 1px rgba(59, 130, 246, .14);
    --shadow-lg: 0 20px 40px -15px rgba(0, 0, 0, .6), 0 0 0 1px rgba(59, 130, 246, .22);
    --font: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    --heading-font: var(--font);
    --mono-font: 'JetBrains Mono', Consolas, monospace;
    --row-hover: rgba(56, 189, 248, .14);
    --row-selected: rgba(139, 92, 246, .2);
    --accent: #38BDF8;
    --accent-rgb: 56, 189, 248;
    --chart-colors: #38BDF8, #A78BFA, #34D399, #F472B6, #FBBF24, #F87171, #8B5CF6, #22D3EE, #94A3B8, #60A5FA, #C084FC, #2DD4BF;
    --chart-slice-text: #090D16;
    /* Timesheet header (css\Timesheet\Timesheet.css) */
    --ts-head-bg: #1E293B;
    --ts-head-text: #F1F5F9;
    --ts-head-line: #334155;
    /* Objective sheet (css\Academy\SchedaObiettivi.css): dark sheet, star accent */
    --so-paper: #111827;
    --so-ink: #E2E8F0;
    --so-line: #334155;
    --so-input-bg: rgba(56, 189, 248, .08);
    --so-badge-bg: #38BDF8;
    --so-badge-text: #090D16;
    /* Deep space: two nebulae and a faint starfield (three layers of tiny stars), fixed under the content */
    background-color: #090D16;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(139, 92, 246, .08) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(56, 189, 248, .06) 0%, transparent 40%),
        radial-gradient(1px 1px at 23px 41px, rgba(241, 245, 249, .35) 50%, transparent 100%),
        radial-gradient(1px 1px at 137px 97px, rgba(241, 245, 249, .22) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 211px 173px, rgba(56, 189, 248, .4) 50%, transparent 100%),
        radial-gradient(1px 1px at 79px 223px, rgba(167, 139, 250, .35) 50%, transparent 100%);
    background-size: 100% 100%, 100% 100%, 260px 260px, 260px 260px, 260px 260px, 260px 260px;
    background-attachment: fixed;
    scrollbar-color: #334155 #090D16;
}

    body.theme-modern.theme-astro ::selection {
        background: rgba(139, 92, 246, .45);
        color: #F1F5F9;
    }

/* ---- Accents ---- */
body.theme-modern.theme-astro .accent-blue { --accent: #38BDF8; --accent-rgb: 56, 189, 248; }
body.theme-modern.theme-astro .accent-orange { --accent: #FB923C; --accent-rgb: 251, 146, 60; }
body.theme-modern.theme-astro .accent-green { --accent: #34D399; --accent-rgb: 52, 211, 153; }
body.theme-modern.theme-astro .accent-violet { --accent: #A78BFA; --accent-rgb: 167, 139, 250; }
body.theme-modern.theme-astro .accent-slate { --accent: #94A3B8; --accent-rgb: 148, 163, 184; }

/* Dashboard sections (css\Report\ReportDashboard.css) */
body.theme-modern.theme-astro .rd-accent-blue { --rd-accent: #38BDF8; --rd-accent-rgb: 56, 189, 248; }
body.theme-modern.theme-astro .rd-accent-orange { --rd-accent: #FB923C; --rd-accent-rgb: 251, 146, 60; }
body.theme-modern.theme-astro .rd-accent-green { --rd-accent: #34D399; --rd-accent-rgb: 52, 211, 153; }
body.theme-modern.theme-astro .rd-accent-violet { --rd-accent: #A78BFA; --rd-accent-rgb: 167, 139, 250; }
body.theme-modern.theme-astro .rd-accent-neutral { --rd-accent: #94A3B8; --rd-accent-rgb: 148, 163, 184; }

/* ---- Titles: white -> steel gradient ---- */
body.theme-modern.theme-astro :is(.rd-title, .profile-hero-name) {
    background: linear-gradient(135deg, #F1F5F9 30%, #94A3B8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.02em;
}

body.theme-modern.theme-astro .rd-card {
    border: 1px solid var(--line);
    box-shadow: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

    body.theme-modern.theme-astro .rd-card:hover,
    body.theme-modern.theme-astro .rd-card:focus {
        border-color: var(--rd-accent);
        transform: translateY(-2px);
        box-shadow: 0 10px 24px -12px rgba(var(--rd-accent-rgb), .45);
    }

/* ---- Panels: cards with a thin border and a blue halo ---- */
body.theme-modern.theme-astro :is(.body-content, .modal) .panel {
    border-color: var(--line);
}

body.theme-modern.theme-astro :is(.body-content, .modal) .panel > .panel-heading,
body.theme-modern.theme-astro :is(.body-content, .modal) .panel-primary > .panel-heading,
body.theme-modern.theme-astro :is(.body-content, .modal) .panel-default > .panel-heading {
    background-color: rgba(var(--accent-rgb), .05);
    color: var(--ink);
}

    /* Accent bar: from the accent to the nebula violet */
    body.theme-modern.theme-astro :is(.body-content, .modal) .panel > .panel-heading:before {
        width: 3px;
        background: linear-gradient(180deg, var(--accent) 0%, var(--nebula) 100%);
        box-shadow: 0 0 10px rgba(var(--accent-rgb), .5);
    }

/* ---- Tabs: steel grey (not the link color of the panels), the active one white with a star glow ---- */
body.theme-modern.theme-astro :is(.body-content, .modal) .nav-tabs > li > a {
    color: var(--muted);
}

    body.theme-modern.theme-astro :is(.body-content, .modal) .nav-tabs > li > a:hover {
        color: var(--ink);
    }

body.theme-modern.theme-astro :is(.body-content, .modal) .nav-tabs > li.active > a,
body.theme-modern.theme-astro :is(.body-content, .modal) .nav-tabs > li.active > a:hover,
body.theme-modern.theme-astro :is(.body-content, .modal) .nav-tabs > li.active > a:focus {
    color: var(--ink);
    box-shadow: 0 8px 14px -10px rgba(var(--accent-rgb), .8);
}

/* ---- Fields: deep blue wells, star border when focused ---- */
body.theme-modern.theme-astro :is(.body-content, .modal) .form-control {
    background-color: #0B1120;
    border-color: var(--line-strong);
}

    body.theme-modern.theme-astro :is(.body-content, .modal) .form-control:focus {
        background-color: #0B1120;
        border-color: var(--star);
        box-shadow: 0 0 0 3px rgba(56, 189, 248, .15);
    }

    body.theme-modern.theme-astro :is(.body-content, .modal) .form-control:is([disabled], [readonly]) {
        background-color: var(--field-disabled);
    }

/* Labels on the field borders: half card, half field */
body.theme-modern.theme-astro :is(.body-content, .modal) .field-outlined > .label.label-dark,
body.theme-modern.theme-astro :is(.body-content, .modal) .field-outlined > label.label {
    background: linear-gradient(to bottom, var(--surface) 50%, #0B1120 50%);
}

body.theme-modern.theme-astro :is(.body-content, .modal) .field-outlined:has(> .form-control:is([disabled], [readonly])) > :is(.label.label-dark, label.label) {
    background: linear-gradient(to bottom, var(--surface) 50%, var(--field-disabled) 50%);
}

/* Captions: monospaced technical data */
body.theme-modern.theme-astro :is(.body-content, .modal) .label.label-dark {
    font-family: var(--mono-font);
    font-weight: 500;
    letter-spacing: .04em;
}

/* ---- Buttons ---- */
body.theme-modern.theme-astro :is(.body-content, .modal) .btn-primary {
    background: linear-gradient(135deg, #38BDF8 0%, #0284C7 100%);
    border-color: transparent;
    color: var(--on-brand);
    box-shadow: 0 4px 14px rgba(56, 189, 248, .3);
    transition: box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}

    body.theme-modern.theme-astro :is(.body-content, .modal) .btn-primary:hover,
    body.theme-modern.theme-astro :is(.body-content, .modal) .btn-primary:focus {
        background: linear-gradient(135deg, #38BDF8 0%, #0284C7 100%);
        border-color: transparent;
        color: var(--on-brand);
        opacity: .95;
        box-shadow: 0 6px 20px rgba(56, 189, 248, .45);
        transform: translateY(-1px);
    }

body.theme-modern.theme-astro :is(.body-content, .modal) .btn-dark,
body.theme-modern.theme-astro :is(.body-content, .modal) .btn-default {
    background-color: transparent;
    border-color: var(--line-strong);
    color: var(--text);
}

    body.theme-modern.theme-astro :is(.body-content, .modal) .btn-dark:hover,
    body.theme-modern.theme-astro :is(.body-content, .modal) .btn-dark:focus,
    body.theme-modern.theme-astro :is(.body-content, .modal) .btn-default:hover,
    body.theme-modern.theme-astro :is(.body-content, .modal) .btn-default:focus {
        background-color: var(--ink-hover);
        border-color: var(--muted);
        color: var(--ink);
    }

/* ---- Tables: monospaced headings on the deep blue ---- */
body.theme-modern.theme-astro :is(.body-content, .modal) .table > thead > tr > th,
body.theme-modern.theme-astro :is(.body-content, .modal) :is(.file-table, .academy-table, .objectives-table, .uniqversity-rewards-table, .rd-ai-tools-table) th {
    background: #0B1120;
    color: var(--muted);
    font-family: var(--mono-font);
    font-weight: 500;
}

/* Row hover: the 4% wash of the modern theme disappears on the deep blue (#090D16),
   as in theme-alien.css. An overlay and never a color: a hovered row can hold both normal cells
   (light text on the dark surface) and light data cells with dark text
   (theme-modern-components.css, body.theme-dark) */
body.theme-modern.theme-astro :is(.body-content, .modal) .table > tbody > tr:hover > td,
body.theme-modern.theme-astro :is(.body-content, .modal) .file-table tr:hover td,
body.theme-modern.theme-astro :is(.body-content, .modal) .academy-table tbody tr:hover td,
body.theme-modern.theme-astro :is(.body-content, .modal) .objectives-table tbody tr:hover td,
body.theme-modern.theme-astro :is(.body-content, .modal) .uniqversity-rewards-table tbody tr:hover td {
    background-image: linear-gradient(rgba(56, 189, 248, .14), rgba(56, 189, 248, .14));
}

/* ---- Badges "in orbit": violet pill with a glowing dot ---- */
body.theme-modern.theme-astro :is(.body-content, .modal) .badge:not([style*="background"]),
body.theme-modern.theme-astro .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid rgba(139, 92, 246, .3);
    border-radius: 20px;
    background: rgba(139, 92, 246, .12);
    color: var(--nebula-light);
    font-family: var(--mono-font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .03em;
}

    body.theme-modern.theme-astro :is(.body-content, .modal) .badge:not([style*="background"]):before,
    body.theme-modern.theme-astro .chip:not(:has(> .fa)):before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: currentColor;
        box-shadow: 0 0 8px currentColor;
    }

body.theme-modern.theme-astro :is(.body-content, .modal) .badge-blue:not([style*="background"]) {
    border-color: rgba(56, 189, 248, .3);
    background: rgba(56, 189, 248, .1);
    color: var(--star);
}

body.theme-modern.theme-astro :is(.body-content, .modal) .badge-green:not([style*="background"]),
body.theme-modern.theme-astro .chip.chip-success {
    border-color: rgba(52, 211, 153, .3);
    background: rgba(52, 211, 153, .1);
    color: var(--success);
}

body.theme-modern.theme-astro :is(.body-content, .modal) .badge-orange:not([style*="background"]),
body.theme-modern.theme-astro .chip.chip-warning {
    border-color: rgba(251, 146, 60, .3);
    background: rgba(251, 146, 60, .1);
    color: #FB923C;
}

/* Code */
body.theme-modern.theme-astro :is(.body-content, .modal) code {
    padding: .2em .4em;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #0B1120;
    color: var(--star);
    font-family: var(--mono-font);
    font-size: .85em;
}

/* Icons with a white background (PNG): a bit dimmed on the dark page */
body.theme-modern.theme-astro :is(.body-content, .modal) .file-table td > img {
    filter: brightness(.85) contrast(1.05);
}

/* ---- My Profile header ---- */
body.theme-modern.theme-astro .profile-hero {
    border-bottom: 1px solid var(--line);
}

body.theme-modern.theme-astro .profile-hero-photo {
    border-color: rgba(56, 189, 248, .6);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .12), 0 0 30px rgba(139, 92, 246, .35);
}

body.theme-modern.theme-astro .profile-hero-chip {
    font-family: var(--mono-font);
    font-size: 11.5px;
}

body.theme-modern.theme-astro .profile-tabs-bar {
    box-shadow: 0 1px 0 var(--line), 0 8px 20px rgba(0, 0, 0, .45);
}

/* ---- Objective sheet: dark sheet ---- */
body.theme-modern.theme-astro .scheda-obiettivi {
    box-shadow: 0 0 0 32px var(--so-paper), 0 0 0 33px var(--line), 0 30px 60px -20px rgba(0, 0, 0, .7);
}

    /* Cover: the color logo is not readable on the dark sheet, the white one instead */
    body.theme-modern.theme-astro .scheda-obiettivi .cover > div > img {
        content: url("../../img/LogoOrbytaWhiteTransparent.png");
    }

    body.theme-modern.theme-astro .scheda-obiettivi .cover {
        background-color: rgba(56, 189, 248, .08) !important;
        box-shadow: inset 0 0 60px rgba(139, 92, 246, .18);
    }

    body.theme-modern.theme-astro .scheda-obiettivi .cover > div > div.reserved {
        color: #000 !important;
        font-weight: bold;
    }

/* ---- Shared components (theme-modern-components.css) ---- */
body.theme-modern.theme-astro .modal-content {
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(59, 130, 246, .2);
}

body.theme-modern.theme-astro .modal-header.modal-header-dark {
    border-bottom: 1px solid var(--line);
}

body.theme-modern.theme-astro .notify-popup-div {
    border-left-color: var(--star);
    background-color: var(--surface);
    color: var(--text);
}

body.theme-modern.theme-astro :is(.body-content, .modal) .table-small mark {
    background-color: rgba(56, 189, 248, .3);
    color: var(--ink);
}

body.theme-modern.theme-astro :is(.datepicker.datepicker-dropdown, .context-menu) {
    border-color: var(--line-strong);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .7), 0 0 0 1px rgba(59, 130, 246, .2);
}

/* Waiting dialog (dark: theme-modern-components.css): the astronaut negative, a bit bluer */
body.theme-modern.theme-astro #waiting-dialog .modal-body {
    background-color: #090D16;
}

    body.theme-modern.theme-astro #waiting-dialog .modal-body img {
        filter: invert(1) hue-rotate(180deg) brightness(.95);
        mix-blend-mode: screen;
    }

/* Leaflet map: the dark tiles with a night blue tone */
body.theme-modern.theme-astro .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.75) contrast(1.1) saturate(.6) sepia(.15) hue-rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    body.theme-modern.theme-astro :is(.rd-card, .btn-primary) {
        transition: none;
    }
}

/* ---- Top bar, side menu, footer (rules in theme-modern-components.css): deep space, star accent ---- */
body.theme-modern.theme-astro {
    --chrome-bg: #0B1120;
    --chrome-bar-bg: radial-gradient(ellipse at 80% -60%, rgba(139, 92, 246, .28) 0%, rgba(139, 92, 246, 0) 55%), #0B1120;
    --chrome-bg-2: #090D16;
    --chrome-border: #1E293B;
    --chrome-text: #94A3B8;
    --chrome-text-active: #F1F5F9;
    --chrome-hover-bg: rgba(56, 189, 248, .06);
    --chrome-active-bg: rgba(56, 189, 248, .1);
    --chrome-accent: #38BDF8;
    --chrome-header-font: var(--mono-font);
    --chrome-popup-bg: #111827;
    --chrome-popup-text: #E2E8F0;
    --chrome-popup-border: #1E293B;
}

/* The bottom line of the top bar: from the star blue to the nebula violet */
body.theme-modern.theme-astro .top-bar {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(56, 189, 248, .7) 0%, rgba(139, 92, 246, .7) 60%, rgba(139, 92, 246, 0) 100%) 1;
}

body.theme-modern.theme-astro .side-menu-list > li.active > a {
    box-shadow: inset 3px 0 12px -6px rgba(56, 189, 248, .8);
}
