/* =====================================================================
   DashboardTempo — Black Modern Theme (Blazor)
   A dark override layer applied on top of site.css + the scoped
   component styles (MainLayout.razor.css / NavMenu.razor.css).
   Chrome rules use !important because scoped CSS has higher specificity.
   ===================================================================== */

:root {
    --bg-0: #0a0a0c;      /* app background            */
    --bg-1: #121317;      /* panels / cards            */
    --bg-2: #1a1c22;      /* raised surfaces           */
    --bg-3: #22252d;      /* table heads / inputs      */
    --line: #2a2e37;      /* borders                   */
    --line-2: #363b45;    /* stronger borders          */
    --txt-0: #f2f3f5;     /* primary text              */
    --txt-1: #b9bec9;     /* secondary text            */
    --txt-2: #7d838f;     /* muted text                */
    --accent: #6d8bff;    /* primary accent (indigo)   */
    --accent-2: #22d3ee;  /* cyan accent               */
    --accent-ink: #0a0a0c;
    --danger: #ff5c6c;
    --success: #34d399;
    --warning: #fbbf24;
    --radius: 12px;
    --shadow: 0 8px 30px rgba(0,0,0,.45);
    --glow: 0 0 0 1px rgba(109,139,255,.25), 0 8px 30px rgba(109,139,255,.08);
}

html, body {
    background-color: var(--bg-0);
    color: var(--txt-0);
    font-family: "Google Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---- App shell (Blazor MainLayout) ------------------------------------ */
main {
    background-color: var(--bg-0) !important;
    color: var(--txt-0);
}

.sidebar {
    background: linear-gradient(180deg, #0e0f13 0%, #0a0a0c 100%) !important;
    border-right: 1px solid var(--line);
}

/* main content top bar (auth / login display) AND the navbar bar inside the
   sidebar both use .top-row — site.css sets it red, so force dark here. */
.top-row {
    background: rgba(10,10,12,.75) !important;
    border-bottom: 1px solid var(--line) !important;
    backdrop-filter: saturate(150%) blur(10px);
}
.sidebar .top-row {
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
}
.top-row a, .top-row .btn-link, .top-row button {
    color: var(--txt-0) !important;
    text-decoration: none;
}
.top-row a:hover, .top-row .btn-link:hover { color: var(--accent-2) !important; }

article.content, .content { color: var(--txt-0); }

/* ---- Sidebar navbar + nav links (Blazor NavMenu) ---------------------- */
.navbar-dark, .navbar { background: transparent !important; }
.navbar-brand {
    color: var(--txt-0) !important;
    font-weight: 800;
    letter-spacing: .3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.navbar-toggler {
    background-color: rgba(255,255,255,.06) !important;
    border-color: var(--line-2) !important;
}

.nav-item { font-size: .92rem; }
.nav-item .nav-link,
.nav-item ::deep a {
    color: var(--txt-1) !important;
    border-radius: 10px !important;
    height: 2.6rem !important;
    line-height: 2.6rem !important;
    padding: 0 12px !important;
    display: flex;
    align-items: center;
    transition: background .15s ease, color .15s ease;
}
.nav-item .nav-link:hover,
.nav-item ::deep a:hover {
    background: var(--bg-2) !important;
    color: var(--txt-0) !important;
}
.nav-item .nav-link.active,
.nav-item ::deep a.active {
    background: linear-gradient(90deg, rgba(109,139,255,.20), rgba(34,211,238,.08)) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(109,139,255,.35);
}
.nav-item .oi { color: var(--txt-2); }
.nav-item .nav-link.active .oi { color: var(--accent); }
.hrsep { background-color: var(--line) !important; }

/* ---- Cards / panels --------------------------------------------------- */
.scheda, .schedaMono {
    background-color: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    color: var(--txt-0);
}
.schedaHead {
    background-color: transparent !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    padding: 11px 16px 10px 16px !important;
}
.schedaHead h2, .schedaHead h3, .schedaHead h4, .schedaHead h5, .schedaHead h6 { color: var(--txt-0); }
.schedaHead.hov:hover { background-color: var(--bg-2) !important; }
.schedaBody { color: var(--txt-1); }
.schedaBody span, .schedaBody i { color: var(--txt-1); }
.schedaBody b { color: var(--txt-0); }
.schedaInfo { color: var(--txt-0); }
.projTitle { color: var(--txt-0); }
.schedaHead h6 { color: var(--txt-0) !important; }

h1, h2, h3, h4, h5, h6 { color: var(--txt-0); }
.fw-bold { color: var(--txt-0); }

/* ---- Links ------------------------------------------------------------ */
a { color: var(--accent); }
a:hover { color: var(--accent-2); }
.projectUrl .projLink { color: var(--accent-2); }
.projectUrl .projLink:hover { color: #7ff0ff; }

/* ---- Breadcrumb (recolor) --------------------------------------------- */
#breadcrumb li a { background: var(--bg-2); color: var(--txt-1); }
#breadcrumb li:nth-child(even) a { background-color: var(--bg-2); }
#breadcrumb li:nth-child(even) a:before { border-color: var(--bg-2); border-left-color: transparent; }
#breadcrumb li:nth-child(even) a:after { border-left-color: var(--bg-2); }
#breadcrumb li a:before, #breadcrumb li a:after { border-color: var(--bg-2); }
#breadcrumb li a:before { border-left-color: transparent; }
#breadcrumb li a:after { border-color: transparent; border-left-color: var(--bg-2); }
#breadcrumb li a:hover { background: var(--accent); color: var(--accent-ink); }
#breadcrumb li a:hover:before { border-color: var(--accent); border-left-color: transparent; }
#breadcrumb li a:hover:after { border-left-color: var(--accent); }

/* ---- Tables ----------------------------------------------------------- */
.table { color: var(--txt-1); margin-bottom: 0; }
.table > :not(caption) > * > * { background-color: transparent; color: var(--txt-1); border-bottom-color: var(--line); }
.table-light, .table thead.table-light th, .table thead th {
    background-color: var(--bg-3) !important;
    color: var(--txt-0) !important;
    border-color: var(--line-2) !important;
}
.table-responsive { border: 1px solid var(--line); border-radius: 10px; }
.userclick:hover, .table .userclick:hover td { background-color: var(--bg-2) !important; color: var(--txt-0); }
.params {
    color: var(--txt-1);
}
.view p, .view .p { background-color: var(--bg-1) !important; color: var(--txt-0); }
.paramvalue p { color: var(--txt-0); }

/* ---- Forms ------------------------------------------------------------ */
.form-control, .form-select, .form-text, input, select, textarea {
    background-color: var(--bg-3) !important;
    border: 1px solid var(--line-2) !important;
    color: var(--txt-0) !important;
}
.form-text { color: var(--txt-0) !important; }
.form-control::placeholder, .form-text::placeholder, input::placeholder { color: var(--txt-2) !important; }
.form-control:focus, .form-select:focus, .form-text:focus, input:focus, select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 .2rem rgba(109,139,255,.25) !important;
    outline: none;
}
select option { background-color: var(--bg-2); color: var(--txt-0); }
.projectUrl input { background-color: var(--bg-3) !important; color: var(--txt-0) !important; }
.readonly, input:read-only { background-color: #16171b !important; color: var(--txt-2) !important; }

/* ---- Buttons ---------------------------------------------------------- */
.btn { border-radius: 9px; font-weight: 600; }
.btn-primary {
    background: linear-gradient(180deg, var(--accent), #566ee0) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(109,139,255,.35);
}
.btn-primary:hover { filter: brightness(1.08); color: #fff !important; }
.btn-success {
    background: linear-gradient(180deg, #34d399, #10b981) !important;
    border: none !important; color: #04231a !important;
}
.btn-success:hover { filter: brightness(1.06); color: #04231a !important; }
.btn-danger {
    background: linear-gradient(180deg, #ff6b7a, #e23b4d) !important;
    border: none !important; color: #fff !important;
}
.btn-warning {
    background: linear-gradient(180deg, #fbbf24, #f59e0b) !important;
    border: none !important; color: #241a02 !important;
}
.btn-secondary {
    background: var(--bg-3) !important;
    border: 1px solid var(--line-2) !important;
    color: var(--txt-0) !important;
}
.btn-secondary:hover { background: var(--bg-2) !important; color: var(--txt-0) !important; }
.btn-outline-light { border-color: var(--line-2); color: var(--txt-0); }
.btn-outline-light:hover { background: var(--bg-2); color: #fff; }
.btn-primary:disabled, .btn.disabled { opacity: .5; }

/* ---- Misc ------------------------------------------------------------- */
.red, .validation-message, .text-danger { color: var(--danger) !important; }
.alert-info { background: rgba(109,139,255,.12); border: 1px solid rgba(109,139,255,.35); color: var(--txt-0); }
.star { color: var(--danger); }
hr, .hrsep { border-color: var(--line); background-color: var(--line); }
.ico { filter: invert(85%) sepia(10%) saturate(200%) hue-rotate(190deg); }
.tooltipbtn .tooltiptext { background-color: #000; color: #fff; }
.msg-gb { background-color: rgba(0,0,0,.65); }
.msg-over .alert { min-width: 320px; }
.logotempo { filter: brightness(0) invert(1); opacity: .7; }
a.text-reset, a.text-reset:hover { color: inherit; text-decoration: none; }
.spidframe, .localframe { background: var(--bg-1); border-color: var(--line); }

/* ---- MVC layout (Identity / Home / SSO pages) ------------------------- */
.navbar.bg-white, .bg-white { background-color: var(--bg-1) !important; }
.navbar.bg-white .navbar-brand { color: var(--txt-0) !important; }
.border-bottom { border-color: var(--line) !important; }
.border-top { border-color: var(--line) !important; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0,0,0,.4) !important; }
.footer { background: var(--bg-0); color: var(--txt-2) !important; border-top: 1px solid var(--line) !important; }
.text-muted { color: var(--txt-2) !important; }
.navbar-light .navbar-nav .nav-link { color: var(--txt-1) !important; }
.navbar-light .navbar-nav .nav-link:hover { color: var(--txt-0) !important; }
body > .container { color: var(--txt-0); }

/* ---- Blazor error UI (dark) ------------------------------------------- */
#blazor-error-ui {
    background: #2a1416 !important;
    color: var(--txt-0) !important;
    box-shadow: 0 -1px 12px rgba(0,0,0,.6);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--txt-1) !important;
    padding: 10px 12px !important;
    border-radius: 10px;
    line-height: 1.2 !important;
    font-size: .92rem;
    transition: background .15s ease, color .15s ease, transform .05s ease;
}
 .nav-link .oi { width: 20px; text-align: center; color: var(--txt-2); padding-right: 0 !important; }
.nav-link .nav-text { flex: 1; }
 .nav-link .badge-count {
    background: var(--bg-3);
    color: var(--txt-1);
    border-radius: 999px;
    font-size: .72rem;
    padding: 1px 9px;
    min-width: 24px;
    text-align: center;
}