@font-face {
    font-family: "Gibson";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/Gibson-Book.woff2") format("woff2");
}

@font-face {
    font-family: "Gibson";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Gibson-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Gibson";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Gibson-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "Gibson";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/Gibson-Medium.woff2") format("woff2");
}

:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --text: #2e261f;
    --muted: #6b7268;
    --border: #e6e2d8;
    --primary: #36824b;
    --primary-dark: #285f37;
    --slate: #40718f;
    --slate-dark: #385b75;
    --slate-hover: #33536b;
    --accent: #d98e4a;
}

* {
    box-sizing: border-box;
}

/* I controlli di form non ereditano il font del body per default nei
   browser (usano il font di sistema a meno di non specificarlo). */
select, button, input, textarea {
    font-family: inherit;
}

body {
    margin: 0;
    font-family: "Gibson", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--primary-dark);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.brand-logo {
    height: 1.05rem;
    width: auto;
    /* La riga di testo non ha lettere con discendenti (g, p, ...), quindi
       il suo "centro" visivo e' piu' in alto del centro geometrico della
       riga; il logo va spostato un po' in su per allinearsi otticamente. */
    transform: translateY(-2px);
}

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    margin-right: 0.35rem;
    flex-shrink: 0;
}

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.region-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--slate-dark);
    margin: 0;
}

.region-header {
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.flash {
    background: #fdf1e6;
    border: 1px solid #f0c896;
    color: #8a5a1e;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

/* Upload page */
.upload-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 560px;
    margin: 3rem auto;
    text-align: center;
    box-shadow: 0 4px 16px rgba(30, 40, 30, 0.04);
}

.upload-card h1 {
    margin-top: 0;
    font-size: 1.5rem;
}

.muted {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.file-drop {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    color: var(--muted);
    transition: border-color 0.15s ease;
}

.file-drop:hover {
    border-color: var(--primary);
}

.file-drop input {
    display: none;
}

.upload-mode {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.upload-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
}

.upload-mode-option input {
    margin-top: 0.2rem;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 0.7rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-danger {
    background: #c0392b;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 0.7rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-danger:hover {
    background: #a5301f;
}

.btn-ghost {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}

.btn-ghost:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.logout-form {
    margin: 0;
}

/* Bottone del form di logout, con l'aspetto di un link */
.logout-link {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}

.logout-link:hover {
    color: var(--primary-dark);
}

/* Login / setup */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    text-align: left;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--text);
}

.auth-form input {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Dashboard */
.overview-grid {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.year-grid {
    margin-bottom: 1.5rem;
}

.stat-card {
    flex: 1 1 140px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
    /* Numero ed etichetta prendono entrambi questo colore (vedi
       .stat-value/.stat-label piu' sotto): cambiarlo qui basta per
       ricolorare l'intera card. */
    color: var(--primary-dark);
    transition: color 0.15s ease;
    /* Divisore verticale (anche sul primo dato): stesso colore del testo
       (currentColor), cosi' segue anche il cambio colore in hover. */
    border-left: 1px solid currentColor;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: inherit;
}

.stat-label {
    font-size: 0.85rem;
    color: inherit;
}

/* Stat "specie", "checklist" e "hotspot": colore blu ardesia invece del
   verde standard, con una tonalita' piu' scura in hover. */
.stat-card--species,
.stat-card--checklist,
.stat-card--hotspot,
.stat-card--anni,
.stat-card--osservazioni,
.stat-card--individui {
    color: var(--slate);
}

.stat-card--species:hover,
.stat-card--checklist:hover,
.stat-card--hotspot:hover,
.stat-card--anni:hover,
.stat-card--osservazioni:hover,
.stat-card--individui:hover {
    color: var(--slate-hover);
}

.stat-context {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

.rare-species-card {
    cursor: pointer;
}

.chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.chart-card h2 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--text);
}

.chart-card canvas {
    max-height: 260px;
}

.ranking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: ranking;
}

.ranking-list li {
    counter-increment: ranking;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.ranking-list li:last-child {
    border-bottom: none;
}

.ranking-list li::before {
    content: counter(ranking) ".";
    color: var(--muted);
    font-weight: 600;
    width: 1.75rem;
    flex-shrink: 0;
}

.ranking-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    overflow: hidden;
}

.ranking-name {
    color: #40718f;
}

.ranking-value {
    font-weight: 700;
    color: var(--primary-dark);
}

.world-map {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

#worldMap {
    height: 570px;
}

#locationMap {
    height: 480px;
}

.year-section {
    margin-bottom: 2rem;
}

.year-section h2 {
    font-size: 1.15rem;
}

.year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.year-select-form select {
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.95rem;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.table-header h2 {
    margin: 0;
}

.search-input {
    width: 100%;
    max-width: 260px;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.9rem;
    color: var(--text);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.table-scroll {
    max-height: 480px;
    overflow: hidden auto;
    /* Spazio riservato per la scrollbar anche quando non serve (es. dopo
       una ricerca che lascia poche righe): altrimenti la sua comparsa e
       scomparsa cambia lo spazio disponibile e le colonne (in percentuale)
       si spostano. */
    scrollbar-gutter: stable;
}

.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.species-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.9rem;
}

/* table-layout: fixed cosi' le colonne non si spostano quando la ricerca
   nasconde delle righe (senza, la larghezza si adatta al testo visibile
   rimasto). Le larghezze sono definite qui perche' cambiano in base al
   numero di colonne delle due "forme" di tabella specie. */
.species-table--totals th:nth-child(1),
.species-table--totals td:nth-child(1) {
    width: 40%;
}

.species-table--totals th:nth-child(2),
.species-table--totals td:nth-child(2) {
    width: 35%;
}

.species-table--totals th:nth-child(3),
.species-table--totals td:nth-child(3) {
    width: 25%;
}

.species-table--detail th:nth-child(1),
.species-table--detail td:nth-child(1) {
    width: 26%;
}

.species-table--detail th:nth-child(2),
.species-table--detail td:nth-child(2) {
    width: 28%;
}

.species-table--detail th:nth-child(3),
.species-table--detail td:nth-child(3) {
    width: 16%;
}

.species-table--detail th:nth-child(4),
.species-table--detail td:nth-child(4) {
    width: 16%;
}

.species-table--detail th:nth-child(5),
.species-table--detail td:nth-child(5) {
    width: 14%;
}

.species-table th, .species-table td {
    text-align: left;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
}

.species-table th {
    background: #f0f5f4;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.species-table td:first-child {
    color: #40718f;
}

.count-value {
    color: var(--primary-dark);
    font-weight: 600;
}

.species-table tr:last-child td {
    border-bottom: none;
}

.scientific {
    font-style: italic;
    color: #6f6e67;
}

.badge {
    background: rgba(54, 130, 75, 0.15);
    color: var(--primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.wishlist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Scorre dopo circa 6 voci, altrimenti la pagina si allunga troppo. */
    max-height: 390px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.wishlist-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.wishlist-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
}

.wishlist-name {
    font-weight: 600;
}

.wishlist-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.modal {
    border: none;
    border-radius: 14px;
    padding: 1.5rem;
    max-width: 420px;
    width: 90vw;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.modal-wide {
    max-width: 640px;
}

.species-table--rare th:nth-child(1),
.species-table--rare td:nth-child(1) {
    width: 30%;
}

.species-table--rare th:nth-child(2),
.species-table--rare td:nth-child(2) {
    width: 30%;
}

.species-table--rare th:nth-child(3),
.species-table--rare td:nth-child(3) {
    width: 40%;
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.modal h2 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.modal-field input {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.95rem;
    color: var(--text);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

@media (max-width: 720px) {
    .chart-row {
        grid-template-columns: 1fr;
    }
}