/*
 *  main.css
 *  Author: Andrea Bonassi
 *  Date: 15/06/2026
 *
 * Copyright (c) 2026 Andrea Bonassi. All rights reserved.
 *
 * PROPRIETARY AND CONFIDENTIAL
 *
 * This software and its documentation are the exclusive property of
 * Andrea Bonassi. Unauthorised copying, distribution,
 * modification, reverse engineering, or transmission of this file,
 * via any medium, is strictly prohibited.
 */

:root{
    /* ---- Accento brand ---- */
    --accent: #ffe14d;

    /* ---- Stato ---- */
    --green-ok: #79ff67;
    --green-soft: #bff3bf;
    --red-non-ok: #ff8b77;
    --grey: #535353;

    /* ====== TEMA SCURO — default, uso al chiuso ====== */
    /* Slate freddo più scuro delle card dei grafici: crea una gerarchia a
       tre livelli (pagina #14181f → card #1b212b → plot #232a35). */
    --page-bg: #14181f;
    --header-bg: #1b212b;
    --text: #f0f0f0;
    --muted: #c9c9c9;
    --border: #3a4451;
    --bg: #232a35;

    /* Grafici (lette anche dentro lo Shadow DOM di <progebo-chart>) */
    --chart-host-bg: #1b212b;   /* card slate, leggermente più scura del plot (profondità) */
    --chart-host-border: #3a4451;
    --chart-plot-bg: #232a35;   /* slate scuro moderno (al posto del grigio piatto) */
    --chart-axis: #ffffff;
    --chart-grid: rgba(255, 255, 255, 0.40);
    --chart-cursor: #ffffff;
    --chart-legend-text: #ffffff;
    --text-data: #9ed0ff;

    --btn-bg: rgba(0, 0, 0, 0.45);
    --btn-color: #ffffff;
    --btn-border: #999999;

    /* Note: pulsante (teal, distinto dall'accento) e pin selezionato (arancione) */
    --note-btn-bg: #1f9b8e;
    --note-btn-color: #ffffff;
    --note-pin-active: #ff7a45;

    /* Spettrogramma: pulsante viola (distinto da Nota/accento) */
    --spectro-btn-bg: #6d4bd1;
}

:root[data-theme="light"]{
    /* ====== TEMA CHIARO — uso in pieno sole ====== */
    --page-bg: #e7e7e3;
    --header-bg: #fffdf0;
    --text: #101010;
    --muted: #444444;
    --border: #b3b3b3;
    --bg: #fffdf0;

    --chart-host-bg: #ffffff;
    --chart-host-border: #c4c4c4;
    --chart-plot-bg: #ffffff;
    --chart-axis: #1a1a1a;
    --chart-grid: rgba(0, 0, 0, 0.18);
    --chart-cursor: #1a1a1a;
    --chart-legend-text: #111111;
    --text-data: #0d47a1;

    --btn-bg: rgba(255, 255, 255, 0.9);
    --btn-color: #111111;
    --btn-border: #9a9a9a;

    --note-btn-bg: #178a7e;
    --note-btn-color: #ffffff;
    --note-pin-active: #ee5a25;

    --spectro-btn-bg: #5b3cc4;
}

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--page-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  transition: background-color .2s ease, color .2s ease;
}

h1, h2, h3{
    font-weight: bold;
}

.page {
  background-color: #dadada;
  color: var(--text);
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

button {
    background: #cdcdcd; color: #000; border: none; border-radius: 8px;
    padding: .8rem; font-weight: 700; cursor: pointer; font-size: .95rem;
    box-shadow: 2px 2px 4px #808080;
}
button:active:not(:disabled) {
  transform: translate(2px, 2px);
}

input {
    border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); padding: .7rem 1rem; font-size: .9rem; width: 100%;
}

/* Pagina login (sempre su sfondo brand, indipendente dal tema) */
#div-login {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center; z-index: 100;
}
.auth-box {
    background: #fffd75; border: 1px solid #535353; border-radius: 12px;
    padding: 2rem; width: 360px; display: flex; flex-direction: column; gap: 1rem;
    color: #101010;
}
.auth-box h1 { font-size: 1.5rem; text-align: center; color: #2a2a2a; }
.auth-box input { color: #101010; border-color: #535353; }
.auth-heading {
  width: 128px;
  height: 128px;
  vertical-align: middle;
  margin-right: 0px;
}

/* Barra superiore — giallo professionale, identico in dark e light */
header {
    background: linear-gradient(180deg, #ffd84d 0%, #f3c41d 100%);
    border-bottom: 1px solid #d8a900;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 16px;
}
header h1 {
    font-size: 1.02rem; font-weight: 700; color: #3a2f00; margin: 0;
    display: flex; align-items: center; gap: 8px; letter-spacing: .2px;
}
.header-logo { width: 34px; height: 34px; vertical-align: middle; }
/* Versione server accanto ad "ApiLog": tono scuro fisso, l'header è sempre giallo
   (indipendente dal tema), quindi un grigio adattivo qui sparirebbe in dark mode. */
#app-version {
    font-size: .68rem; font-weight: 400; color: rgba(58, 47, 0, 0.6);
    letter-spacing: .2px; align-self: center;
}
header .user {
    font-size: .82rem; color: #4a3b00; display: flex; gap: .6rem; align-items: center;
}
header button {
    background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(58, 47, 0, 0.45);
    color: #3a2f00; border-radius: 6px; padding: .32rem .7rem; cursor: pointer;
    font-size: .8rem; font-weight: 600; box-shadow: none;
    transition: background-color .15s ease;
}
header button:hover { background: rgba(0, 0, 0, 0.13); }

/* Pulsante tema dark/light */
#btn-theme {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; font-size: .95rem; line-height: 1; padding: .3rem .5rem;
}

main {
    display: block; margin: 0 auto; width: 100%;
}




/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-moz-keyframes blinker
{
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker
{
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker
{
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}