/* === VARIABILI + FIX SAFARI 100vh (unico :root) === */
    :root {
      --pk-red: #CC0000;
      --pk-yellow: #FFCB05;
      --pk-blue: #003A70;
      --pk-blue-dark: #021729;
      --vh: 1vh;
    }

    /* === FONT === */
    body {
      font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      line-height: 1.6;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    main {
      flex: 1 0 auto;
    }

    /* === SFONDO BODY === */
    html[data-bs-theme="light"] {
      --bs-body-bg: #f0f2f5;
    }

    html[data-bs-theme="dark"] {
      --bs-body-bg: #020814;
    }

    html[data-bs-theme="dark"] body {
      background:
        radial-gradient(circle at top left, rgba(0, 58, 112, 0.35), transparent 45%),
        radial-gradient(circle at bottom right, rgba(204, 0, 0, 0.20), transparent 50%),
        #020814;
      background-attachment: fixed;
    }

    /* === LOGO CARTE === */
    .cards-logo {
      width: 26px;
      height: 36px;
      position: relative;
      flex-shrink: 0;
    }

    .cards-logo::before,
    .cards-logo::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 8px;
      border: 2px solid rgba(255, 255, 255, 0.85);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
      background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.15), transparent 50%),
        linear-gradient(135deg, #021729, #003A70);
    }

    .cards-logo::before {
      transform: rotate(-10deg) translateX(-4px);
      opacity: 0.85;
    }

    .cards-logo::after {
      transform: rotate(10deg) translateX(4px);
    }

    /* === HERO === */
    .hero-100vh {
      min-height: calc(var(--vh) * 70);
      position: relative;
      z-index: 0;
    }

    /* === NAVBAR === */
    .navbar {
      border-bottom: 3px solid var(--pk-red);
      background: linear-gradient(to right, rgba(2, 23, 41, 0.96), rgba(0, 58, 112, 0.96)) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    }

    .navbar .navbar-brand span {
      color: var(--pk-yellow);
    }

    .navbar .nav-link {
      color: #f5f5f5 !important;
    }

    .navbar .nav-link.active {
      color: var(--pk-yellow) !important;
      font-weight: 600;
    }

    .navbar .navbar-toggler {
      border-color: rgba(255, 255, 255, 0.4);
    }

    .navbar .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* === BADGE === */
    .badge-pk {
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 500;
      padding: .35rem .85rem;
      border: none;
      background-color: rgba(0, 58, 112, 0.75);
      color: #e8f0ff;
    }

    html[data-bs-theme="light"] .badge-pk {
      background-color: var(--pk-blue);
      color: #fff;
    }

    a.badge-pk:hover {
      background-color: var(--pk-red);
      color: #fff;
      text-decoration: none;
    }

    /* === CARD TAPPE === */
    .tappa-card {
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 55%),
        radial-gradient(circle at bottom right, rgba(204, 0, 0, 0.25), transparent 60%),
        linear-gradient(135deg, var(--pk-blue-dark), #03294c);
      color: #f2f4ff;
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-left: 4px solid var(--pk-blue);
      border-radius: 1rem !important;
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

    .tappa-card .card-body {
      padding: 1.1rem 1.1rem 1rem;
    }

    .tappa-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 .7rem 1.5rem rgba(0, 0, 0, .4);
      border-left-color: var(--pk-red);
    }

    .tappa-card .text-secondary {
      color: #c1d4ff !important;
    }

    .tappa-card .text-muted {
      color: #b8ccf0 !important;
    }

    html[data-bs-theme="light"] .tappa-card {
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.10), transparent 55%),
        radial-gradient(circle at bottom right, rgba(204, 0, 0, 0.15), transparent 60%),
        linear-gradient(135deg, #052850, #083d75);
    }

    /* === BADGE FORMATO === */
    .formato-badge {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: .72rem;
      font-weight: 600;
      border-radius: 999px;
      padding: .2rem .75rem;
      background: rgba(255, 203, 5, 0.15);
      border: 1px solid rgba(255, 203, 5, 0.4);
      color: #ffe87a;
      letter-spacing: .01em;
    }

    html[data-bs-theme="light"] .formato-badge {
      background: rgba(255, 203, 5, 0.2);
      border-color: rgba(180, 140, 0, 0.5);
    }

    /* === STATO TAPPA === */
    .tappa-stato {
      display: inline-block;
      font-size: .75rem;
      border-radius: 999px;
      padding: .2rem .75rem;
      font-weight: 600;
      border: 1px solid transparent;
    }

    .stato-completata {
      background-color: rgba(0, 180, 100, 0.25);
      border-color: rgba(0, 180, 100, 0.6);
      color: #5fffb8;
    }

    .stato-programmata {
      background-color: rgba(0, 129, 255, 0.2);
      border-color: rgba(0, 129, 255, 0.7);
      color: #c3deff;
    }

    .stato-annullata {
      background-color: rgba(120, 120, 120, 0.22);
      border-color: rgba(160, 160, 160, 0.55);
      color: #d0d0d0;
    }

    /* === BOTTONI AZIONE TAPPA === */
    .tappa-action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border-radius: .5rem;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.07);
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
      text-decoration: none;
      transition: background .15s ease, border-color .15s ease, transform .1s ease;
      flex-shrink: 0;
    }

    .tappa-action-btn:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-1px);
      color: #fff;
      text-decoration: none;
    }

    .tappa-action-btn:active {
      transform: translateY(0);
    }

    /* === TABELLA CLASSIFICA === */
    .classifica-table thead th {
      background-color: var(--pk-blue) !important;
      color: #fff !important;
    }

    .classifica-table tbody tr:nth-child(even) td {
      background-color: rgba(0, 0, 0, 0.03);
    }

    html[data-bs-theme="dark"] .classifica-table tbody tr:nth-child(even) td {
      background-color: rgba(255, 255, 255, 0.03);
    }

    .punti-badge {
      border-radius: 999px;
      padding: .1rem .7rem;
      font-weight: 700;
      font-size: .9rem;
      background-color: var(--pk-red) !important;
      color: #fff !important;
    }

    .rank-1 td:first-child {
      color: #FFD700;
      font-weight: 700;
    }

    .rank-2 td:first-child {
      color: #C0C0C0;
      font-weight: 700;
    }

    .rank-3 td:first-child {
      color: #CD7F32;
      font-weight: 700;
    }

    .rank-4 td:first-child {
      color: #2563eb;
      font-weight: 700;
    }

    .classifica-table tbody tr.top-8 td {
      background-color: rgba(34, 197, 94, 0.12) !important;
    }

    html[data-bs-theme="dark"] .classifica-table tbody tr.top-8 td {
      background-color: rgba(74, 222, 128, 0.14) !important;
    }

    .classifica-legend {
      margin-top: .85rem;
      display: flex;
      justify-content: flex-end;
    }

    .legend-chip {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .4rem .8rem;
      border-radius: 999px;
      font-size: .9rem;
      font-weight: 600;
      background-color: rgba(34, 197, 94, 0.14);
      color: #166534;
      border: 1px solid rgba(34, 197, 94, 0.25);
    }

    html[data-bs-theme="dark"] .legend-chip {
      background-color: rgba(74, 222, 128, 0.16);
      color: #bbf7d0;
      border-color: rgba(74, 222, 128, 0.28);
    }

    /* === TITOLI SEZIONI === */
    html[data-bs-theme="light"] section h2 {
      color: #021729;
    }

    html[data-bs-theme="dark"] section h2 {
      color: #e8f0ff;
    }

    /* === CARD REGOLAMENTI === */
    .regola-card {
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 55%),
        linear-gradient(135deg, #02101f, #05294a);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 1rem !important;
      color: #e6edff;
    }

    .regola-card h3 {
      font-size: 1rem;
      letter-spacing: .01em;
    }

    .regola-card li {
      color: #d0dcff;
      font-size: .95rem;
      line-height: 1.7;
    }

    html[data-bs-theme="light"] .regola-card {
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 55%),
        linear-gradient(135deg, #052850, #083d75);
    }

    /* === SEARCH === */
    .search-input-wrapper {
      position: relative;
      max-width: 300px;
    }

    .search-input-wrapper .form-control {
      background-color: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #fff;
      padding-right: 2.5rem;
    }

    .search-input-wrapper .form-control::placeholder {
      color: rgba(255, 255, 255, 0.55);
    }

    .search-input-wrapper .form-control:focus {
      background-color: rgba(255, 255, 255, 0.18);
      border-color: var(--pk-yellow);
      color: #fff;
      box-shadow: 0 0 0 .2rem rgba(255, 203, 5, 0.25);
    }

    .search-input-wrapper .search-icon {
      position: absolute;
      right: .75rem;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255, 255, 255, 0.6);
      pointer-events: none;
    }

    .search-results {
      max-height: 70vh;
      overflow-y: auto;
    }

    .search-result-item {
      border-left: 3px solid var(--pk-blue);
      transition: all .2s ease;
    }

    .search-result-item:hover {
      border-left-color: var(--pk-red);
      transform: translate(4px, -2px);
    }

    /* === LOADER === */
    #page-loader {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bs-body-bg, #020814);
      z-index: 9999;
      transition: opacity .3s ease, visibility .3s ease;
    }

    #page-loader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .spinner-border {
      width: 3rem;
      height: 3rem;
      border-width: .3rem;
    }

    /* === FOOTER === */
    footer {
      flex-shrink: 0;
      background: linear-gradient(to right, var(--pk-blue-dark), var(--pk-blue));
      border-top: 3px solid var(--pk-red);
      color: #f5f5f5;
    }

    /* === SELECT FILTRO TAPPA === */
    #filtro-tappa {
      border-color: var(--pk-blue);
      min-width: 220px;
    }

    #filtro-tappa:focus {
      border-color: var(--pk-yellow);
      box-shadow: 0 0 0 .2rem rgba(255, 203, 5, 0.25);
    }

    html[data-bs-theme="dark"] #filtro-tappa {
      background-color: #03294c;
      color: #f2f4ff;
      border-color: var(--pk-blue);
    }

    /* CALENDARIO VISIVO */
    .cal-week-header {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
    }

    .cal-grid-months {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
    }

    #calendario-grid-wrapper {
      width: 100%;
      overflow-x: hidden;
    }

    .cal-cell {
      height: 115px;
      /* ← altezza FISSA invece di min-height */
      overflow: hidden;
      /* ← taglia il contenuto in eccesso */
      border-radius: .6rem;
      padding: .4rem .45rem;
      position: relative;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      transition: background .15s;
      display: flex;
      /* ← flex per allineare numero + pill */
      flex-direction: column;
    }

    [data-bs-theme="light"] .cal-cell {
      background: rgba(0, 58, 112, 0.04);
      border-color: rgba(0, 58, 112, 0.1);
    }

    .cal-cell.cal-fuori-mese {
      opacity: .3;
    }

    .cal-cell.cal-oggi {
      border-color: var(--pk-yellow);
      background: rgba(255, 203, 5, 0.07);
    }

    .cal-cell.cal-oggi .cal-day-num {
      background: var(--pk-yellow);
      color: #000;
      border-radius: 999px;
      width: 1.5rem;
      height: 1.5rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
    }

    .cal-day-num {
      font-size: .8rem;
      font-weight: 700;
      opacity: .75;
      line-height: 1.5rem;
      display: inline-block;
      width: 1.5rem;
      text-align: center;
      flex-shrink: 0;
      /* ← non si comprime */
    }

    .cal-event-pill {
      display: block;
      margin-top: 3px;
      border-radius: 6px;
      /* ← meno arrotondato per il testo multi-riga */
      padding: .15rem .5rem;
      font-size: .72rem;
      font-weight: 700;
      white-space: normal;
      /* ← ABILITA il testo a capo */
      overflow: hidden;
      text-overflow: unset;
      /* ← non serve più con wrap */
      cursor: pointer;
      border: none;
      text-align: left;
      width: 100%;
      transition: filter .15s, transform .1s;
      line-height: 1.5;
      word-break: break-word;
      /* ← spezza parole lunghe se necessario */
    }

    .cal-event-pill:hover {
      filter: brightness(1.2);
      transform: translateY(-1px);
    }

    .cal-event-lega {
      background: rgba(255, 203, 5, 0.22);
      color: #ffe566;
    }

    .cal-event-esterno {
      background: rgba(167, 139, 250, 0.22);
      color: #d8c8ff;
    }

    .cal-event-annullata {
      background: rgba(120, 120, 120, 0.25);
      color: #c8c8c8;
      text-decoration: line-through;
    }

    .tappa-card.tappa-annullata {
      opacity: 0.82;
    }

    /* Mobile */
    @media (max-width: 575px) {

      /* Nascondi la griglia */
      #cal-header,
      #cal-grid {
        display: none !important;
      }

      /* Mostra la lista mobile */
      #cal-lista-mobile {
        display: block !important;
      }

      .cal-lista-item {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .6rem .75rem;
        border-radius: .6rem;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.07);
        margin-bottom: .4rem;
        cursor: pointer;
        transition: background .15s;
      }

      .cal-lista-item:hover {
        background: rgba(255, 255, 255, 0.09);
      }

      .cal-lista-data {
        min-width: 2.8rem;
        text-align: center;
        font-weight: 700;
        font-size: .85rem;
        line-height: 1.2;
        opacity: .8;
      }

      .cal-lista-data span {
        display: block;
        font-size: .65rem;
        font-weight: 400;
        text-transform: uppercase;
        opacity: .7;
      }

      .cal-lista-nome {
        font-size: .85rem;
        font-weight: 600;
        line-height: 1.3;
      }

      .cal-lista-luogo {
        font-size: .72rem;
        opacity: .6;
        margin-top: .1rem;
      }

      .cal-lista-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-left: auto;
      }
    }

    #cal-lista-mobile {
      display: none;
    }

    /* Modal calendario */
    #modal-cal-evento .tappa-card {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
    }

    #modal-cal-evento .tappa-card .card-body {
      padding: 0 !important;
    }

    input:placeholder-shown {
      text-overflow: ellipsis;
    }

    /* === PULSANTI STAMPA === */
    .btn-stampa {
      background: linear-gradient(135deg, var(--pk-blue), #1a5fa8);
      border: none;
      color: #fff;
      border-radius: 999px;
      padding: .4rem 1.1rem;
      font-size: .85rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      cursor: pointer;
      transition: all .2s ease;
      box-shadow: 0 2px 8px rgba(0, 58, 112, 0.35);
    }

    .btn-stampa:hover {
      background: linear-gradient(135deg, var(--pk-red), #a80000);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(204, 0, 0, 0.4);
      color: #fff;
    }

    /* === STAMPA === */
    @media print {
      @page {
        size: A4;
        margin: 1.5cm 1.5cm 1.5cm 1.5cm;
        background: white;
      }

      /* Forza sfondo bianco PRIMA di tutto */
      html {
        background: white !important;
        background-color: white !important;
        background-image: none !important;
        color-scheme: light !important;
      }

      body {
        background: white !important;
        background-color: white !important;
        background-image: none !important;
        background-attachment: scroll !important;
        min-height: unset !important;
        display: block !important;
        width: 100% !important;
        color: #111 !important;
        color-scheme: light !important;
      }

      /* Font leggibile per stampa */
      * {
        font-family: 'Georgia', 'Times New Roman', serif !important;
        transition: none !important;
        box-shadow: none !important;
        /* economy = il browser non stampa gli sfondi scuri nei margini */
        -webkit-print-color-adjust: economy;
        print-color-adjust: economy;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .print-header-title,
      .print-header-badge,
      .btn,
      th {
        font-family: 'Helvetica Neue', Arial, sans-serif !important;
      }

      /* Forza tema chiaro su tutto in stampa — sovrascrive dark mode */
      html[data-bs-theme="dark"] body,
      html[data-bs-theme="dark"] .print-area,
      html[data-bs-theme="dark"] .print-area * {
        background: white !important;
        background-color: white !important;
        background-image: none !important;
        color: #111 !important;
      }

      html[data-bs-theme="dark"] section h2 {
        color: #021729 !important;
      }

      html[data-bs-theme="dark"] .regola-card {
        background: white !important;
        color: #111 !important;
      }

      html[data-bs-theme="dark"] .regola-card h3 {
        color: #003A70 !important;
      }

      html[data-bs-theme="dark"] .regola-card li {
        color: #222 !important;
      }

      html[data-bs-theme="dark"] .tappa-card {
        background: white !important;
        color: #111 !important;
      }

      html[data-bs-theme="dark"] .tappa-card .text-secondary {
        color: #444 !important;
      }

      html[data-bs-theme="dark"] #reg-aggiornamento {
        color: #555 !important;
      }

      html[data-bs-theme="dark"] .text-muted {
        color: #555 !important;
      }

      /* Nascondi tutto tranne la sezione attiva */
      body * {
        visibility: hidden !important;
      }

      .print-area,
      .print-area * {
        visibility: visible !important;
      }

      .print-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: white !important;
        overflow: visible !important;
      }

      /* Nascondi elementi UI */
      .btn-stampa,
      nav,
      footer,
      #page-loader,
      #filtro-tappa,
      select {
        display: none !important;
      }

      /* Intestazione stampa */
      .print-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        border-bottom: 3px solid #CC0000;
        padding-bottom: .6rem;
        margin-bottom: 1.2rem;
      }

      .print-header-title {
        font-size: 1.4rem;
        font-weight: 700;
        color: #003A70;
        font-family: 'Helvetica Neue', Arial, sans-serif !important;
      }

      .print-header-sub {
        font-size: .85rem;
        color: #555;
      }

      .print-header-badge {
        background: #CC0000 !important;
        color: white !important;
        border-radius: 999px;
        font-size: .75rem;
        padding: .25rem .9rem;
        font-weight: 700;
      }

      /* Tabelle */
      table {
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: auto;
        font-size: .9rem;
      }

      tr {
        page-break-inside: avoid;
        page-break-after: auto;
      }

      th,
      td {
        border: 1px solid #bbb !important;
        padding: .45rem .65rem !important;
        color: #111 !important;
        background: white !important;
      }

      thead th {
        background: #003A70 !important;
        color: white !important;
        font-weight: 700;
        font-family: 'Helvetica Neue', Arial, sans-serif !important;
      }

      thead {
        display: table-header-group;
      }

      /* Cards regolamenti — evita spezzatura interna */
      .row.g-3 {
        display: block !important;
      }

      .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
      }

      .regola-card {
        background: white !important;
        color: #111 !important;
        border: 1.5px solid #ccc !important;
        border-radius: 6px !important;
        margin-bottom: 1rem !important;
        break-inside: avoid;
        page-break-inside: avoid;
      }

      .regola-card h3 {
        color: #003A70 !important;
        font-size: 1rem !important;
        font-weight: 700;
        margin-bottom: .5rem !important;
        font-family: 'Helvetica Neue', Arial, sans-serif !important;
      }

      .regola-card li {
        color: #222 !important;
        font-size: .88rem !important;
        line-height: 1.65 !important;
        margin-bottom: .15rem;
      }

      .regola-card .card-body {
        padding: .85rem 1rem !important;
      }

      /* Punti badge in tabella */
      .punti-badge {
        background: #CC0000 !important;
        color: #fff !important;
        padding: .1rem .5rem;
        border-radius: 999px;
        font-weight: 700;
      }

      /* Griglia tappe in stampa */
      .tappa-card {
        background: white !important;
        color: #111 !important;
        border: 1.5px solid #ccc !important;
        border-left: 4px solid #003A70 !important;
        border-radius: 6px !important;
        margin-bottom: .75rem !important;
        break-inside: avoid;
        page-break-inside: avoid;
      }

      .tappa-card .text-secondary {
        color: #444 !important;
      }

      .tappa-stato {
        border: 1px solid #999 !important;
        color: #333 !important;
        background: #f5f5f5 !important;
      }
    }