/* =========================================================
   Gare Online – Gare (Google Drive-like) — CLEAN
   ========================================================= */
:root{
  /* Brand (Gare Online) */
  --brand: #19524e;
  --brand-2: #84b090;
  --ink: #293134;
  --muted: #536167;

  /* Compat: vecchi token usati nel CSS */
  --text: var(--ink);
  --text2: var(--muted);
  --text3: rgba(83,97,103,.75);

  --accent: var(--brand);
  --accent-soft: rgba(25,82,78,.10);

  /* UI */
  --bg: #f7f8f9;
  --surface: #ffffff;
  --border: rgba(41,49,52,.12);

  --r: 14px;

  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;

  --sidebar-w:240px;
  --header-h:56px;

  --shadow: 0 10px 24px rgba(41,49,52,.10);
}


/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:14px;
  line-height:1.4;
}

/* ===== Layout (pulito) ===== */
html, body { height: 100%; }

.app{
  min-height: 100vh;
  display: flex;
  flex-direction: row;
}

/* Sidebar: colonna, footer in basso */
.sidebar{
  display: flex;
  flex-direction: column;
  height: 100vh;            /* così "Admin/Logout" resta giù */
}

/* Contenuto: colonna, footer in basso */
.content{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;        /* niente scroll su pagine vuote */
}

/* Questo è il “corpo pagina” che spinge giù il footer */
.content-body{
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  min-height: 0;
}




.sidebar{
  width:var(--sidebar-w);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
}

.content{
  flex:1;
  padding:var(--sp-3) var(--sp-4);
}

/* Brand */
.brand{
  padding:var(--sp-3);
  border-bottom:1px solid var(--border);
}
.brand-title{
  font-weight:600;
  font-size:16px;
}
.brand-sub{
  margin-top:2px;
  color:var(--text2);
  font-size:12px;
}

/* =========================================================
   NAV – Stile Google Drive (compatto, pulito)
   ========================================================= */

.nav{
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}


.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 14px;
  margin:0;              /* evita righe fantasma */
  border-radius:8px;
  text-decoration:none;
  color:var(--text);
  font-size:14px;
  line-height:1.2;       /* elimina “altezza extra” */
  transition:background .15s ease;
}

.nav-item:hover{
  background:#f1f3f4;
}

.nav-item.is-active{
  background:#e8f0fe;
  color:#1967d2;
  font-weight:500;
}

.nav-ico{
  width:22px;
  text-align:center;
}

.nav-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-item:hover{ background:#f1f3f4; }
.nav-item.is-active{ background:#e8f0fe; color:#1967d2; font-weight:500; }

/* =========================================================
   FIX: elimina "alone" / riga fantasma tra voci sidebar
   ========================================================= */
.nav-item{
  background:transparent;     /* base pulita */
  border:0;                   /* niente bordi */
  box-shadow:none;            /* niente ombre */
  outline:0;
  filter:none;
}

.nav-item::before,
.nav-item::after{
  content:none !important;    /* nel caso ci sia un separatore via pseudo-elementi */
}

/* Footer sidebar */
.sidebar-footer{
  margin-top:auto;
  padding:var(--sp-2) var(--sp-3);
  border-top:1px solid var(--border);
}
.user{
  color:var(--text2);
  font-size:12px;
  margin-bottom:8px;
}
.logout{
  color:var(--text2);
  text-decoration:none;
}
.logout:hover{ color:var(--text); }

/* Page headings */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.page-title{
  margin:0;
  font-size:22px;
  font-weight:600;
}
.page-subtitle{
  margin:6px 0 0 0;
  color:var(--text2);
}

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:var(--sp-2);
  box-shadow: var(--shadow);
}
.card + .card{ margin-top:var(--sp-3); }

.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: var(--sp-2);
}


/* Links */
.link{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}
.link:hover{ text-decoration:underline; }

/* Helpers */
.muted{ color:var(--text2); }

/* Alerts */
.alert{
  margin-bottom: var(--sp-2);
  padding: 12px 14px;
  border-radius: var(--r);
  border:1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
.alert-error{
  border-color: rgba(217,48,37,0.30);
  background: rgba(217,48,37,0.07);
  color:#a50e0e;
}

/* =========================================================
   Forms — GLOBAL (Google-like)
   ========================================================= */

.label, label{
  display:block;
  font-size:12px;
  color:var(--text2);
  margin-bottom:6px;
  font-weight:600;
}

/* card normale: NON bloccare overflow */
.card{
  background:#fff;
  border-radius:16px;
}

/* wrapper che gestisce lo scroll */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border-radius:16px;       /* così lo sfondo segue */
}

/* tabella più larga = compare scroll */
.table{
  width:100%;
  min-width:900px;
  border-collapse:separate;
  border-spacing:0;
}



input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="tel"],
textarea,
select{
  -webkit-appearance:none;
  appearance:none;
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:10px 12px;
  height:40px;
  line-height:1.2;
  font-size:14px;
  outline:none;
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

textarea{
  height:auto;
  min-height:110px;
  resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(26,115,232,.18);
}

input::placeholder,
textarea::placeholder{
  color:var(--text2);
}

input:disabled,
select:disabled,
textarea:disabled{
  background:#f1f3f4;
  color:var(--text3);
  cursor:not-allowed;
}

/* Compatibility: class .input */
.input{
  width:100%;
}

/* Forms layout helpers */
.section-title{
  margin:0 0 var(--sp-2) 0;
  font-size:15px;
  font-weight:600;
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--sp-2);
}

.radio-group{
  display:flex;
  gap:var(--sp-3);
}
.radio-group label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:500;
}

.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:var(--sp-2);
  margin-top:var(--sp-3);
}

/* Buttons (Drive-like) */
.btn{
  border-radius:10px;
  padding:9px 14px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
}
/* Hover generale solo per bottoni NON primary */
.btn:not(.btn-primary):hover{
  background:#f1f3f4;
}

/* Hover specifico per primary: resta blu */
.btn-primary:hover{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
  filter: brightness(.96);
}

.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn-primary:hover{ filter:brightness(.96); }

.btn-secondary{
  background:#fff;
  border-color:var(--border);
  color:var(--text);
}
.btn-secondary:hover{ background:#f1f3f4; }

/* Actions (single, univoca) */
.actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* Status link */
.status-link{
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.status-link:hover{
  text-decoration: underline;
  color: var(--accent);
}

/* =========================================================
   Table
   ========================================================= */

.table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.table{
  width:100%;
  min-width:720px; /* su mobile scrolla invece di schiacciare */
  border-collapse:separate;
  border-spacing:0;
}

.table thead th{
  text-align:left;
  font-size:12px;
  color:var(--text2);
  font-weight:600;
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}

.table tbody td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
}

.table tbody tr:hover{
  background:#f1f3f4;
}

.table .actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.table .actions .link{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.table td:last-child{ vertical-align: middle; }

/* Status dots */
.dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
}
.dot-active{ background:var(--accent); }
.dot-inactive{ background:var(--text3); }

/* =========================================================
   Nuova Gara – layout (solo grid, skin globale)
   ========================================================= */

.card-narrow{ max-width: 980px; }

.form-modern .grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: end;
}

.form-modern .field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.form-modern .actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* spans */
.span-4{ grid-column: span 4; }
.span-6{ grid-column: span 6; }
.span-8{ grid-column: span 8; }

/* =========================================================
   Mobile topbar + drawer (ONE definitive block)
   ========================================================= */

.topbar{ display:none; }

.mobile-menu-btn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}

.overlay{ display:none; }

@media (max-width: 900px){
  .app{ display:block; }

  .topbar{
    display:flex;
    align-items:center;
    gap:12px;
    position:sticky;
    top:0;
    z-index:60;
    height:var(--header-h);
    padding:0 16px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
  }

  .topbar-title{
    font-weight:700;
    font-size:14px;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .content{ padding:16px; }

  .sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:280px;
    background:#fff;
    border-right:1px solid var(--border);
    transform: translateX(-110%);
    transition: transform .2s ease;
    z-index: 10001;
  }

  body.sidebar-open{ overflow:hidden; }

  body.sidebar-open .sidebar{ transform: translateX(0); }

  body.sidebar-open .overlay{
    display:block;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.25);
    z-index: 10000;
  }

  /* form buttons full width */
  .form-actions{ flex-direction: column; align-items: stretch; }
  .form-actions .btn{ width:100%; }
}

/* Responsive grid fallbacks */
@media (max-width: 980px){
  .card-narrow{ max-width:none; }
  .span-4,.span-6,.span-8{ grid-column: span 12; }
  .form-modern .actions{ justify-content:stretch; }
  .form-modern .actions .btn{ flex:1; }
}

@media (max-width: 600px){
  .form-grid{ grid-template-columns: 1fr; }
}


/* =========================================================
   Search form — Google Drive style
   ========================================================= */

.search-form{
  display:flex;
  gap:12px;
  align-items:center;
}

/* Barra pill Drive */
.search-bar{
  display:flex;
  align-items:center;
  gap:10px;

  background:#f1f3f4;
  border:1px solid transparent;
  border-radius:8px;

  padding:10px 14px;
  height:48px;
  min-width:320px;

  transition: box-shadow .15s ease, border-color .15s ease;
}

/* Hover soft */
.search-bar:hover{
  box-shadow: 0 1px 2px rgba(60,64,67,.20);
}

/* Focus interno */
.search-bar:focus-within{
  background:#fff;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(26,115,232,.18);
}

/* Input interno senza bordo */
.search-bar input{
  border:none !important;
  background:transparent !important;
  height:auto !important;
  padding:0 !important;
  flex:1;
  font-size:14px;
  outline:none;
}

/* Icona */
.search-ico{
  color:var(--text2);
  font-size:16px;
}

/* Mobile */
@media (max-width:600px){
  .search-form{
    flex-direction:column;
    align-items:stretch;
  }

  .search-bar{
    width:100%;
    min-width:0;
  }

  .search-form .btn{
    width:100%;
  }
}


/* Spazio standard tra barra azioni e contenuto (tabelle/cards) */
.page-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: var(--sp-2);
}

.card-head + .table-wrap{
  margin-top: var(--sp-2);
}


.card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden; /* 🔥 questo risolve lo sfondo */
}


/* =========================================================
   Page container + spacing (Drive-like)
   ========================================================= */
.page-wrap{
  max-width:1140px;
  margin:0 auto;
}

.page-wrap--narrow{
  max-width:980px;
}


.section-gap{ margin-bottom:16px; }
.section-gap-lg{ margin-bottom:22px; }

/* =========================================================
   Accordion (Drive-like)
   ========================================================= */
.accordion{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.acc-item{
  border-top:1px solid rgba(0,0,0,.08);
}
.acc-item:first-child{ border-top:none; }

.acc-item summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:650;
  font-size:15.5px;
  line-height:1.2;
}

.acc-item summary::-webkit-details-marker{ display:none; }

.acc-item summary:hover{
  background:rgba(0,0,0,.03);
}

/* stato OPEN un filo evidenziato (più Drive-like) */
.acc-item[open] summary{
  background:rgba(0,0,0,.02);
}

/* freccia più grande e leggibile */
.acc-item summary .chev{
  width:14px;
  height:14px;
  border-right:2.5px solid rgba(0,0,0,.55);
  border-bottom:2.5px solid rgba(0,0,0,.55);
  transform:rotate(45deg);
  margin-left:12px;
  transition:transform .15s ease;
  flex:0 0 auto;
}

.acc-item[open] summary .chev{
  transform:rotate(-135deg);
}

.acc-body{
  padding:0 18px 18px 18px;
  font-size:14.5px;
}

/* =========================================================
   Placeholders (logo / map)
   ========================================================= */
.box-placeholder{
  height:150px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:rgba(0,0,0,.015);
  display:flex;
  align-items:center;
  justify-content:center;
}

.map-placeholder{
  height:300px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:rgba(0,0,0,.01);
}

/* optional: piccolo box header “logo” senza card-nella-card */
.panel{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:12px;
  background:#fff;
}


/* =========================================================
   CARD — DEFINITIVA (override finale)
   ========================================================= */
.card{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:16px !important;
  padding:var(--sp-2) !important;
  box-shadow: var(--shadow) !important;
}

.info-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:16px;
}

@media (max-width:900px){
  .info-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Accordion — Drive REAL (fix finale)
   ========================================================= */

.accordion{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  overflow:hidden;
}

.acc-item summary{
  padding:18px 18px;
  font-size:15px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;

  /* Drive row feel */
  background:#fff;
}

.acc-item summary:hover{
  background:#f1f3f4;
}

.acc-item[open] summary{
  background:var(--accent-soft);
  color:var(--accent);
}

/* elimina triangolino browser */
.acc-item summary::-webkit-details-marker{
  display:none;
}

/* freccia più grande, come Drive */
.acc-item summary .chev{
  width:16px;
  height:16px;
  border-right:2px solid var(--text2);
  border-bottom:2px solid var(--text2);
  transform:rotate(45deg);
  transition:.15s ease;
}

.acc-item[open] summary .chev{
  transform:rotate(-135deg);
}

/* corpo accordion più “file area” */
.acc-body{
  padding:18px;
  background:#fff;
  border-top:1px solid var(--border);
}


/* =========================================================
   Accordion — DRIVE LIST LOOK (override finale)
   ========================================================= */

/* reset marker cross-browser */
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-item summary::marker{ content:""; }

/* ogni item diventa “riga lista” */
.acc-item{
  border-top:none !important; /* niente righe da menu */
  margin:0;
}

/* summary = pill stile Drive */
.acc-item summary{
  margin:10px 12px;
  padding:12px 14px;

  border:1px solid var(--border);
  border-radius:8px;

  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;

  font-weight:600;
  font-size:14px;
  color:var(--text);

  cursor:pointer;
}

/* hover Drive */
.acc-item summary:hover{
  background:#f1f3f4;
}

/* open = selezione Drive */
.acc-item[open] summary{
  background:var(--accent-soft);
  border-color:rgba(26,115,232,.35);
  color:var(--accent);
}

/* chevron più “pulita” */
.acc-item summary .chev{
  width:14px;
  height:14px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .15s ease;
  opacity:.8;
}

.acc-item[open] summary .chev{
  transform:rotate(-135deg);
}

/* body = area contenuto sotto, tipo “pannello” */
.acc-body{
  margin:0 12px 12px 12px;
  padding:14px;

  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;

  font-size:14px;
  color:var(--text);
}


/* =========================================================
   File list (Drive-like)
   ========================================================= */
.file-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.file-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.file-row:hover{
  background:#f1f3f4;
}

.file-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.file-name{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.file-sub{
  font-size:12px;
  color:var(--text2);
}

.file-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.map-embed{
  width:100%;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 1px 2px rgba(60,64,67,.15), 0 1px 3px 1px rgba(60,64,67,.10);
  border:1px solid rgba(0,0,0,.08);
}

.map-embed iframe{
  width:100%;
  height:360px;         /* più “Drive” */
  border:0;
  display:block;
}

/* su mobile un filo più bassa */
@media (max-width:600px){
  .map-embed iframe{ height:280px; }
}


.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:8px;
  font-weight:700;
  font-size:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}

.badge .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

.badge-draft{
  background:#fff;
}

.badge-published{
  background: rgba(26,115,232,.08);
  border-color: rgba(26,115,232,.22);
}

.badge-closed{
  background: rgba(95,99,104,.10);
  border-color: rgba(95,99,104,.18);
}


/* Tabella con colonne controllate */
.table-fixed {
  table-layout: fixed;
  width: 100%;
}

/* Colonne principali */
.table th:nth-child(1),
.table td:nth-child(1) {
  width: 110px; /* Data */
}

.table th:nth-child(2),
.table td:nth-child(2) {
  width: 220px; /* Nome gara più stretto */
}

.table th:nth-child(3),
.table td:nth-child(3) {
  width: 180px; /* Organizzatore */
}

.table th:nth-child(4),
.table td:nth-child(4) {
  width: 220px; /* Regolamento */
}

.table th:nth-child(5),
.table td:nth-child(5) {
  width: 170px; /* Disciplina */
}

.table th:nth-child(6),
.table td:nth-child(6) {
  width: 140px; /* Stato più largo */
  white-space: nowrap;
}

.table th:nth-child(7),
.table td:nth-child(7) {
  width: 200px; /* Azioni */
}

/* Stato: pallino + testo in riga */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.dot-draft {
  background: #999;
}

.dot-published {
  background: #2563eb;
}

.dot-closed {
  background: #666;
}


/* ================================
   Logo organizzazione (stile FIN)
================================ */

.logo-box {
  background: #fff;
  padding: 20px;
  text-align: center;
}

.logo-box img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px auto;
}

.logo-upload {
  margin-top: 8px;
}

.logo-upload input[type="file"] {
  margin-bottom: 6px;
}


.public-cta {
  margin: 12px 0 18px 0;
}

.btn-cta {
  display: inline-block;
  font-size: 16px;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
}

/* Mobile: bottone pieno */
@media (max-width: 640px) {
  .btn-cta {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 14px;
  }
}

.cta-sub {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: #666;
}


/* Public regs: table desktop, cards mobile */
.pub-regs-cards { display: none; }

@media (max-width: 900px) {
  .pub-regs-table { display: none !important; }
  .pub-regs-cards { display: block !important; }
}

.reg-form .reg-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.reg-form .reg-field label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}
.reg-form .reg-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}
@media (max-width: 900px){
  .reg-form .reg-grid{ grid-template-columns: 1fr; }
  .reg-form .reg-actions .btn{ width:100%; }
}

/* Race registrations: fixed width for segreteria */
.page-regs .page-wrap {
  max-width: 1140px;
  margin: 0 auto;
}

/* Dettagli riga iscritti */
.table-regs .reg-row { cursor: default; }
.reg-details-box { padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.reg-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
}
@media (max-width: 900px){
  .reg-details-grid { grid-template-columns: 1fr; }
}

/* container pagina: 1140px centrata (solo contenuto, NON sidebar) */
.page-regs .card,
.page-regs .page-actions,
.page-regs .page-head {
  max-width: 1140px;
}

/* Lista */
.regs-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

.reg-card{
  border:1px solid #e6e6e6;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}

/* top row */
.reg-top{
  display:flex;
  align-items:stretch;
  gap:10px;
  padding:10px;
}

.reg-toggle{
  flex:1;
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px;
  border-radius:12px;
  cursor:pointer;
}

.reg-toggle:hover{
  background:#f7f7f7;
}

.reg-bib{
  min-width:56px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e6e6e6;
  border-radius:10px;
  font-weight:700;
}

.reg-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.reg-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reg-sub{ font-size:13px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.reg-pill{
  margin-left:auto;
  align-self:center;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  border:1px solid #e6e6e6;
  background:#fafafa;
}

.reg-chev{
  margin-left:6px;
  font-size:14px;
  opacity:.7;
}

/* azioni */
.reg-actions{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px 10px 0;
}

/* dettagli */
.reg-details{
  border-top:1px solid #eee;
  padding:12px;
  background:#fcfcfc;
}

.reg-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px 14px;
}

.reg-field{ min-width:0; }
.reg-label{ font-size:12px; color:#777; }
.reg-value{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* status bar */
.reg-statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed #e5e5e5;
}

.reg-status-left{ display:flex; align-items:center; gap:10px; }
.reg-label-inline{ font-size:12px; color:#777; }

.reg-status-form{
  display:flex;
  align-items:center;
  gap:8px;
}

/* responsive */
@media (max-width: 920px){
  .reg-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px){
  .reg-top{ flex-direction:column; padding:10px; }
  .reg-actions{ padding:0 10px 10px 10px; }
  .reg-toggle{ padding:10px; }
  .reg-pill{ margin-left:0; }
  .reg-grid{ grid-template-columns: 1fr; }
  .reg-statusbar{ flex-direction:column; align-items:stretch; }
  .reg-status-form{ width:100%; }
  .reg-status-form .select{ flex:1; }
}

.page-regs{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px; /* respiro laterale su schermi piccoli */
}

/* Nome rosso SOLO se confermato ma assente */
.reg-card.is-confirmed.is-absent .reg-name{
  color:#d40000;
  font-weight:700;
}

/* Nome nero in tutti gli altri casi (base) */
.reg-card .reg-name{
  color:var(--text);
}

/* Atleti cancellati */
.reg-card.name-cancelled .reg-name{
  color: #888 !important;
  text-decoration: line-through;
}
  /* Barra in basso dentro i dettagli: deve poter andare a capo */
.reg-statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;           /* <-- questo è il punto */
}

/* Il form dello stato deve stare in riga e poter andare a capo */
.reg-status-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;           /* <-- evita che il bottone scappi fuori */
}

/* Assicura che i bottoni non si “schiaccino” */
.reg-status-form .btn{
  white-space:nowrap;
}

/* NON TOCCARE — logica presenza confermati (v0.1 beta) */
/* =========================================================
   OVERRIDE FINALE — Colore nome (segreteria)
   ========================================================= */

/* Default: nome nero */
.reg-card .reg-name{
  color: var(--text) !important;
}

/* Rosso SOLO se la card ha entrambe le classi */
.reg-card.is-confirmed.is-absent .reg-name{
  color:#d40000 !important;
  font-weight:700 !important;
}

/* Cancellato */
.reg-card.is-cancelled .reg-name{
  color:#888 !important;
  text-decoration:line-through !important;
  opacity:.75 !important;
}


.flag-emoji {
  font-size: 14px;
  opacity: 0.85;
  margin-left: 4px;
}

.regs-card {
  padding: 12px 14px;
  border-radius: 10px;
}

.regs-card + .regs-card {
  margin-top: 10px;
}

.regs-card:nth-child(even) {
  background: #f8fafc;
}

.pub-regs-cards .regs-card:hover{
  background: #eef2f7;
  transition: background .15s ease;
}

.pub-regs-cards .regs-card .muted strong{
  font-weight: 700;
}


/* =========================================================
   HEADER MOBILE — Gare Online
   ========================================================= */

@media (max-width: 900px){

  .topbar{
    display:flex;
    align-items:center;
    gap:12px;
    height:56px;
    padding:0 16px;
    background: var(--surface);
    border-bottom:1px solid var(--border);
  }

  .topbar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:15px;
    color: var(--ink);
  }

  .topbar-brand img{
    width:28px;
    height:28px;
    object-fit:contain;
  }

  /* ===== Topbar mobile: scala hamburger + brand ===== */
  .topbar{
    height: 64px;              /* prima era 56 */
    padding: 0 16px;
  }

  .mobile-menu-btn{
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    font-size: 22px;           /* hamburger più grande */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .topbar-brand{
    display:flex;
    align-items:center;
    gap: 10px;
    min-width: 0;
  }

  .topbar-brand img{
    height: 40px;              /* logo più grande */
    width: auto;
    max-width: 180px;          /* evita effetto banner */
    object-fit: contain;
    display:block;
  }

  .topbar-brand span{
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }



}




/* Header brand: limita l'SVG */
.app-logo{
  display:block;
  height:32px;      /* prova 28–36px */
  width:auto;
  max-width:160px;  /* evita che diventi un banner */
  object-fit:contain;
}

/* Se il logo sta in sidebar (brand box), limita anche lì */
.sidebar .app-logo,
.brand img{
  height:44px;
  width:auto;
  max-width:180px;
}
 /* =========================================================
   BRAND sidebar — Gare Online (fix)
   ========================================================= */
.brand{
  padding: 18px !important;
}

.brand-link{
  display:block;
}

.brand-logo{
  display:block;
  width: 100%;
  max-width: 190px;   /* <-- aumenta qui se vuoi */
  height: auto;
}

.brand-sub{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

/* ===== Sidebar brand: scala logo (desktop) ===== */
.sidebar .brand{
  padding: 18px 16px !important;
}

.sidebar .brand-logo{
  display:block;
  width: 100%;
  max-width: 150px; 
  height: auto;
}

.sidebar .brand-sub{
  margin-top: 8px;
  font-size: 12px;
  color: var(--text2);
}

/* =========================================================
   FOOTER — Gare Online
   ========================================================= */

.app-footer{
  margin-top:auto;
  background:#19524e;
  color:#fff;
  padding:18px 20px;
  text-align:center;
  font-size:13px;
  line-height:1.4;
}

.app-footer strong{
  font-weight:700;
}

.app-footer__mid{
  opacity:.9;
  margin-top:4px;
}

.app-footer__bottom{
  margin-top:6px;
  font-size:12px;
  opacity:.85;
}

.app-footer__link{
  color:#fff;
  text-decoration:underline;
  font-weight:600;
}

.app-footer__link:hover{
  opacity:.75;
}


/* =========================================================
   Sticky footer (NO scroll su pagine vuote) + sidebar full height
   ========================================================= */


/* L'app (sidebar + content) occupa tutto lo spazio disponibile */
.app{
  flex: 1;
  min-height: 0;
}

/* Sidebar alta quanto la viewport (così logout torna giù) */
.sidebar{
  height: 100%;
}

/* Footer app sempre in basso */
.app-footer{
  margin-top: auto;
  background: #19524e;
  color: #fff;
  padding: 16px 20px;
  text-align: center;
}

/* Spaziature e gerarchia testo */
.app-footer__top{ font-size: 13px; font-weight: 600; }
.app-footer__mid{ font-size: 12px; opacity: .90; margin-top: 6px; }
.app-footer__bottom{ font-size: 12px; opacity: .90; margin-top: 6px; }

/* Link footer */
.app-footer__link{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.app-footer__link:hover{
  opacity: .85;
}

.app-footer{
  margin-top:auto;
}

/* =========================================================
   FIX LAYOUT: sidebar full-height + footer in basso (senza rompere scroll)
   Da mettere IN FONDO al CSS
   ========================================================= */

/* NON trasformare body in flex: crea casini con scroll e calcoli altezze */
html, body { height: 100%; }
body { min-height: 100vh; }

/* Layout base */
.app{
  min-height: 100vh;
  display: flex;
  align-items: stretch; /* forza le colonne a pari altezza */
}

/* Sidebar sempre a tutta altezza della viewport */
.sidebar{
  align-self: stretch;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Content: colonna con footer che va giù quando pagina è vuota */
.content{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Il main cresce e spinge il footer in basso */
.content > main{ flex: 1; }

/* IMPORTANTISSIMO: non bloccare lo scroll orizzontale dentro le card */
.card{ overflow: visible !important; }

/* Lo scroll orizzontale vive QUI */
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Evita qualunque "overflow-x hidden" che ammazza lo scroll laterale su mobile */
@media (max-width: 900px){
  body{ overflow-x: visible !important; }
  .page-regs{ overflow-x: visible !important; }
}


/* =========================================================
   RESET LAYOUT — versione stabile
   ========================================================= */

html, body{
  height:100%;
  margin:0;
}

/* NON flex sul body */
body{
  display:block !important;
}

/* Layout principale */
.app{
  min-height:100vh;
  display:flex;
}

/* Sidebar sempre full height */
.sidebar{
  display:flex;
  flex-direction:column;
}

/* Content colonna con footer sticky */
.content{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Main prende tutto lo spazio */
.content > main{
  flex:1;
}

/* Footer normale, sempre sotto */
.app-footer{
  margin-top:auto;
}

/* =========================================================
   LAYOUT DEFINITIVO — Desktop: sidebar fissa + content scroll + footer visibile
   ========================================================= */



/* Mobile */
@media (max-width: 900px){
  body{
    overflow: auto;                /* su mobile scroll normale */
  }

  .app{
    display: block;                /* torna layout mobile normale */
    height: auto;
  }

  .content{
    height: auto;
    overflow: visible;             /* sticky/topbar torna affidabile */
  }

  .app-footer{
    position: static;
    width: 100%;
  }
}

/* FIX FOOTER DESKTOP — deve essere visibile */
@media (min-width: 901px){
  .app-footer{
    display: block !important;
    position: relative !important;
    z-index: 5;
  }
  .overlay{
    z-index: 1;
  }
  .sidebar{
    z-index: 2;
  }
  .content{
    z-index: 3;
  }
}

/* DESKTOP: sidebar deve seguire l’altezza della pagina (non bloccata a 100vh) */
@media (min-width: 901px){
  .app{ align-items: stretch; }     /* colonne stessa altezza */
  .sidebar{ height: auto !important; min-height: 100% !important; }
}

/* Titolo pagina gara pubblica */
.page-title{
  text-transform: uppercase;
  color: #19524e;
  font-size: 28px;      /* leggermente più grande */
  font-weight: 700;     /* più deciso */
  letter-spacing: 0.5px;
}

/* Sottotitolo gara (data + stato) */
.page-subtitle{
  font-size: 16px;
  font-weight: 500;
  color: #19524e;
  margin-top: 6px;
}

/* RIEPILOGO GARE: respiro tabella (desktop/laptop) */
.table-wrap .table th,
.table-wrap .table td{
  padding: 12px 14px;
  vertical-align: middle;
  line-height: 1.25;
}

/* Riga più ariosa */
.table-wrap .table tbody tr td{
  padding-top: 14px;
  padding-bottom: 14px;
}

/* ==========================================================
   V1 STEP 3 — Nav item active/focus (stile pulito tipo Drive)
   ========================================================== */

.nav .nav-item{
  text-decoration: none;
  border-radius: 10px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Active: niente bordi strani, solo “pill” pulita */
.nav .nav-item.is-active{
  background: rgba(26,115,232,.10); /* blu Drive soft */
  font-weight: 600;
}

/* Hover: leggero */
.nav .nav-item:hover{
  background: rgba(60,64,67,.08);
}

/* Focus da tastiera: visibile ma non “alone enorme” */
.nav .nav-item:focus-visible{
  box-shadow: 0 0 0 2px rgba(26,115,232,.35);
}

/* Evita l’alone su click mouse (focus non visible) */
.nav .nav-item:focus{
  outline: none;
}

.event-hero{
  display:flex;
  gap:16px;
  align-items:stretch;
  justify-content:space-between;
  margin:0 0 16px 0;
  padding:16px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
}

.event-hero__main{ flex:1; min-width:0; }
.event-hero__side{ width:260px; display:flex; flex-direction:column; gap:10px; }

.event-hero__title{
  margin:0 0 10px 0;
  font-size:28px;
  line-height:1.15;
}

.event-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 12px 0;
}

.event-chip{
  flex:0 0 auto;
  min-width:160px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#fafafa;
}

.event-chip--status{
  background:#eef6ff;
  border-color:rgba(0,0,0,.06);
}

.event-chip__k{ font-size:12px; opacity:.65; margin:0 0 2px 0; }
.event-chip__v{ font-size:15px; font-weight:700; }

.event-hero__cta-row{ display:flex; flex-direction:column; gap:6px; margin:0 0 10px 0; }

.event-hero__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
}

.event-hero__cta-sub{ font-size:13px; opacity:.75; }

.event-hero__place{ font-size:13px; opacity:.8; }

.event-hero__logo{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
}

.event-hero__logo img{
  max-width:100%;
  max-height:140px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.event-hero__org{
  font-size:13px;
  opacity:.75;
  padding-left:4px;
}

/* Responsive */
@media (max-width: 960px){
  .event-hero{ flex-direction:column; }
  .event-hero__side{ width:auto; }
  .event-chip{ min-width:140px; flex:1 1 140px; }
}

.event-hero__cta{
  width:auto !important;
  max-width:260px;
}

.event-hero__cta{
  background:#ff6a00 !important;
  border:none !important;
  color:#fff !important;
  text-decoration:none !important;
}

.event-title-green {
  color: #0f4f46; /* verdone principale */
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Layout full height per spingere il footer in basso */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-wrap {
    flex: 1;
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-body{
  flex: 1;
}

.pub-card{
  margin-left: auto;
  margin-right: auto;
}

.pw-form .form-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-footer {
    background: #f4f6f7;
    color: #555;
}

.app-footer__link {
    color: #1f5e53; /* tuo verde brand */
}

.race-info-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:18px;
  align-items:start;
}

.race-poster-col{
  display:flex;
  justify-content:flex-end;
}

.race-poster-placeholder{
  width:100%;
  max-width:360px;
  min-height:220px;
  border-radius:12px;
  border:1px dashed rgba(0,0,0,.25);
  background:rgba(0,0,0,.02);
  display:grid;
  place-items:center;
  text-align:center;
  padding:14px;
}

@media (max-width: 820px){
  .race-info-grid{ grid-template-columns:1fr; }
  .race-poster-col{ justify-content:flex-start; }
}

/* Locandina: non deve dominare */
.race-poster-col{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

.race-poster-col .race-poster-img{
  display:block;
  width: 100%;
  max-width: 360px;      /* <-- limite desktop */
  height: auto;
  max-height: 420px;     /* <-- evita poster troppo alti */
  object-fit: contain;   /* mantiene tutto visibile */
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
}

/* La colonna destra non deve allargarsi troppo */
.race-info-grid{
  display:grid;
  grid-template-columns: 1fr 360px; /* sx fluida, dx fissa */
  gap:18px;
  align-items:start;
}

/* Mobile: sotto e più piccola */
@media (max-width: 820px){
  .race-info-grid{ grid-template-columns: 1fr; }
  .race-poster-col{ justify-content:flex-start; }
  .race-poster-col .race-poster-img{
    max-width: 100%;
    max-height: 520px;
  }
}

/* Poster clickable */
.race-poster-link{ display:inline-block; text-decoration:none; }

/* Lightbox CSS-only via :target */
.poster-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.poster-lightbox:target{ display:block; }

.poster-lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
}

.poster-lightbox__panel{
  position: relative;
  margin: 5vh auto;
  width: min(92vw, 980px);
  max-height: 90vh;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 14px;
}

.poster-lightbox__close{
  position:absolute;
  top: 8px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-size: 22px;
  font-weight: 900;
  text-decoration: none;
  color: #111;
  background: rgba(0,0,0,.06);
}

.poster-lightbox__img{
  display:block;
  width: 100%;
  max-height: 74vh;
  height: auto;
  object-fit: contain;
}

.poster-lightbox__actions{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
}


/* PUBLIC PAGES MOBILE LAYOUT FIX */
@media (max-width: 900px){

  body[data-page="races_public_list"] .content,
  body[data-page="race_public"] .content,
  body[data-page="race_register"] .content{
    padding:8px !important;
  }

  body[data-page="races_public_list"] .content-body,
  body[data-page="race_public"] .content-body,
  body[data-page="race_register"] .content-body{
    padding:8px !important;
  }

  body[data-page="races_public_list"] .page-wrap,
  body[data-page="race_public"] .page-wrap,
  body[data-page="race_register"] .page-wrap{
    padding:0 !important;
    max-width:none !important;
  }

}

.program-content {
  line-height: 1.6;
}

.program-content p:first-child {
  margin-top: 0;
}

.program-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   SIDEBAR — DEFINITIVA (chiara, pulita, moderna)
   ========================================================= */

.sidebar{
  width: 270px;
  min-height: 100vh;
  background: #ffffff;
  border-right: 1px solid #e7ebf3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  color: var(--text);
}

.main-col{
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.brand{
  padding: 22px 18px 16px 18px !important;
  border-bottom: 1px solid #eef2f7;
  background: #ffffff;
}

.brand-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo{
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
}

.brand-sub{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7b8794;
}

.nav{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  margin: 0;
}

.nav-item{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  text-decoration: none;
  color: #425066;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  line-height: 1.2;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.nav-item::before,
.nav-item::after{
  content: none !important;
}

.nav-item:hover{
  background: #f4f7fb;
  color: #111827;
}

.nav-item.is-active{
  background: linear-gradient(135deg, #eaf2ff 0%, #dceaff 100%);
  color: #0f3d91;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #cfe0ff;
}

.nav-item:focus{
  outline: none;
}

.nav-item:focus-visible{
  box-shadow:
    inset 0 0 0 1px #cfe0ff,
    0 0 0 3px rgba(15, 61, 145, 0.14);
}

.nav-ico{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.nav-ico svg,
.footer-ico svg{
  width: 18px;
  height: 18px;
  display: block;
}

.nav-label{
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-footer{
  padding: 16px;
  border-top: 1px solid #e7ebf3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
}

.user,
.logout{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
}

.user{
  color: #5f6b7a;
  background: #f6f8fc;
}

.logout{
  color: #243043;
  text-decoration: none;
  background: transparent;
  transition: background .18s ease, color .18s ease;
}

.logout:hover{
  background: #f3f6fb;
  color: #111827;
}

.footer-ico{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}