:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent1:linear-gradient(135deg,#7c3aed,#06b6d4);
  --accent2:linear-gradient(135deg,#06b6d4,#7c3aed);
  --glass: rgba(255,255,255,0.05);
  --glass-2: rgba(255,255,255,0.02);
  --shadow:0 10px 30px rgba(0,0,0,0.3);
  --success:#10b981;
  --danger:#ef4444;
}

    *{box-sizing:border-box;}
    html, body{margin:0;padding:0;height:100%;font-family:Inter, sans-serif;color:#e6eef8;background:var(--bg);}

    main{padding:24px 32px;}
    h2{margin-bottom:16px;}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04));border-radius:14px;padding:18px;box-shadow:0 6px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03);margin-bottom: 18px;}
    input, select, button, textarea{border-radius:8px;padding:8px 12px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit;font-size:14px;}
    button.primary{background:var(--accent1);border:none;color:#fff;font-weight:600;cursor:pointer;transition:0.2s;width:100%;}
    button.primary:hover{opacity:0.9;}
    button.ghost{border:1px solid var(--danger);background:transparent;color:var(--danger);cursor:pointer;padding:4px 8px;border-radius:6px;transition:0.2s;}
    button.ghost:hover{background:var(--danger);color:#fff;}
    button.ghost2{border:1px solid var(--danger);background:transparent;color:var(--danger);cursor:pointer;padding:4px 8px;border-radius:6px;transition:0.2s;}
    button.ghost2:hover{background:var(--danger);color:#fff;}
    label{font-size:13px;color:var(--muted);display:block;margin-top:12px;}
    table{width:100%;border-collapse:collapse;margin-top:12px;}
    th,td{padding:8px;border-bottom:1px solid rgba(255,255,255,0.08);text-align:left;font-size:14px;}
    th{color:var(--muted);}
    td input, td select{width:100%;}
    .tiny{font-size:12px;color:var(--muted);}
    .slots-container{max-height:300px;overflow-y:auto;}
    .card2{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:14px;padding:40px 60px;box-shadow:0 6px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03);text-align:center;max-width:500px;}
    p{font-size:16px;color:var(--muted);margin-bottom:20px;}
    button.primary{margin-top:20px;background:var(--accent1);border:none;padding:10px 18px;border-radius:10px;color:white;font-weight:600;cursor:pointer;font-size:14px;transition:all 0.3s;}
    button.primary:hover{background:var(--accent2);transform:translateY(-2px);}

/* NOME E COGNOME NAVBAR */

.account-animated {
    display: inline-block;
    padding: 8px 18px;
    background-color: white;       /* sfondo bianco */
    color: #007BFF;               /* colore testo moderno */
    border-radius: 25px;          /* pill shape */
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #007BFF;   /* bordo colorato */
    transition: all 0.3s ease;   /* animazione */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* leggero ombreggiato */
    text-align: center;
}


/* SELECT PAGINA PRENOTA */
.nice-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  font-size: 15px;
  outline: none;
  cursor: pointer;
}

.nice-select:hover {
  background: rgba(255,255,255,0.12);
}

.nice-select option {
  background: #1a1a1a;
  color: white;
}


/* Caricamento Pagin */

.loader {
  border: 4px solid rgba(255,255,255,0.2);
  border-top: 4px solid #06b6d4;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: spin 0.8s linear infinite;
  margin: 10px auto;
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #94a3b8;
  display: none;
}
/* COLORE ICONE INPUT */
/* Per Chrome, Edge, Opera */
input::-webkit-calendar-picker-indicator {
    filter: invert(1); /* rende bianco l'icona */
    cursor: pointer;
}
/* Per Firefox */
input::-moz-calendar-picker-indicator {
    color: white;
}


/* FOOTER */
footer{padding:18px 32px;color:var(--muted);font-size:13px}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:Inter,sans-serif;color:#e6eef8;background:var(--bg);line-height:1.5;}



/* NAVBAR */
header .logo{display:flex;align-items:center;gap:12px;}
header .logo svg{width:32px;height:32px;}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 32px;
  background:var(--card);
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  position:relative;
}
nav{
  display:flex;
  gap:24px;
  align-items: center;
}
nav a{
  color:white;
  text-decoration:none;
  font-weight:500;
}
nav a:hover{opacity:.8;}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.hamburger span{
  width:24px;
  height:3px;
  background:white;
  border-radius:3px;
  transition:0.3s;
}

  @media(max-width:600px){

    table, thead, tbody, th, td, tr {display:block;}
    thead tr {display:none;}
    td {position:relative;padding-left:50%;margin-bottom:12px;border:none;}
    td:before {position:absolute;top:8px;left:12px;width:45%;white-space:nowrap;font-weight:600;color:var(--muted);}
    td:nth-of-type(1):before { content: "Docente"; }
    td:nth-of-type(2):before { content: "Giorno"; }
    td:nth-of-type(3):before { content: "Inizio"; }
    td:nth-of-type(4):before { content: "Fine"; }
    td:nth-of-type(5):before { content: "Slot"; }
    td:nth-of-type(6):before { content: "Elimina"; }
    tbody tr{border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:8px;margin-bottom:8px;}
  }
@media(max-width:900px){
  nav{
    display:none; /* menu nascosto di default */
    flex-direction:column;
    background-color:#2b3a5855;
    position:absolute;
    top:64px;
    right:16px;   /* menu allineato a destra */
    width:200px;  /* larghezza fissa */
    padding:16px;
    border-radius:12px;
    box-shadow:0 0 20px rgba(0,0,0,0.4);
    z-index: 99;
  }
  nav.show{
    display:flex; /* menu visibile quando .show è attivo */
  }
  .hamburger{
    display:flex;
  }
  .grid{grid-template-columns:1fr;}
}


/* GRID HERO */
.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:80px 32px;
}
.hero-left{display:flex;justify-content:center;align-items:center;position:relative;}
.hero-left::before{
  content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed55,#06b6d455);z-index:0;
}
.hero-right{display:flex;flex-direction:column;gap:24px;z-index:1;}

/* Titolo e testo */
.hero-right h1{font-size:36px;margin:0;background:linear-gradient(to right,#7c3aed,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-right p{color:var(--muted);line-height:1.8;font-size:16px;max-width:500px;}

/* Bottone OAuth */
.oauth-btn{
  padding:18px 40px;font-size:16px;font-weight:600;
  border:none;border-radius:14px;
  background:var(--accent1);
  color:white;cursor:pointer;
  box-shadow:var(--shadow);
  transition:all 0.3s;
}
.oauth-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(0,0,0,0.35);
  background:var(--accent2);
}

/* Cerchio lavagna scolastica */
.circle{
  width:260px;height:260px;border-radius:50%;
  background:var(--glass);border:3px solid rgba(255,255,255,0.15);
  display:flex;justify-content:center;align-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:1;
  overflow:hidden;
}
.circle svg{width:180px;height:180px;}

/* Section info */
#info{padding:60px 32px;text-align:center;background:linear-gradient(to bottom,#0f1724,#0b1220);}
#info h2{font-size:28px;margin-bottom:16px;color:white;}
#info p{max-width:650px;margin:0 auto;color:var(--muted);line-height:1.7;font-size:16px;}

/* Responsive */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px;text-align:center;}
  .hero-left,.hero-right{text-align:center;justify-content:center;align-items:center;}
}
@media(max-width:600px){
  nav .menu{display:none;flex-direction:column;gap:16px;background:rgba(15,23,36,0.95);position:absolute;top:64px;right:32px;padding:16px;border-radius:12px;}
  nav .menu.show{display:flex;}
  nav .menu-toggle{display:block;}
  
}