/* =========================================================
   BASE
   ========================================================= */

.tkc-wrap, .tkc-card, .tkc-year, .tkc-year-body, .tkc-filters,
.tkc-year-body .tkc-table, .tkc-year-body .tkc-table tr,
.tkc-year-body .tkc-table td, .tkc-year-body .tkc-table th{
  box-sizing:border-box;
}

.tkc-wrap *, .tkc-wrap *::before, .tkc-wrap *::after {
  box-sizing: border-box;
}

.tkc-wrap{max-width:1100px;margin:0 auto;padding:14px}
.tkc-card{background:#fff;border:1px solid #e7e7e7;border-radius:14px;padding:14px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.tkc-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.tkc-title{font-size:20px;font-weight:800;margin:0}
.tkc-sub{color:#666;font-size:13px;margin-top:2px}
.tkc-user{text-align:right}
.tkc-user-name{font-weight:700}
.tkc-logout{color:#444;text-decoration:none;font-size:13px}
.tkc-logout:hover{text-decoration:underline}

.tkc-nav{display:flex;gap:6px;margin:12px 0}
@media (max-width:768px){.tkc-nav{flex-direction:column}}
.tkc-nav-item{display:block;width:100%;padding:11px 16px;border:2px solid #e2e8f0;border-radius:10px;text-decoration:none;color:#475569;background:#f8fafc;font-size:13px;font-weight:500;transition:all .15s;text-align:center;box-sizing:border-box;}
.tkc-nav-item.is-active{border-color:#1a56db;background:#1a56db;color:#fff;font-weight:600;}.tkc-nav-item:hover:not(.is-active){border-color:#94a3b8;background:#f1f5f9;color:#1e293b;}
.tkc-content{margin-top:10px}

.tkc-h2{margin:0 0 10px 0;font-size:18px}
.tkc-h3{margin:16px 0 8px 0;font-size:15px}
.tkc-muted{color:#666;font-size:13px}

.tkc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:10px 0 16px 0}
.tkc-box{border:1px solid #ececec;border-radius:12px;padding:12px;background:#fafafa}
.tkc-box-title{color:#666;font-size:12px}
.tkc-box-value{font-size:22px;font-weight:800;margin-top:6px}

.tkc-table{width:100%;border-collapse:separate;border-spacing:0}
.tkc-table th,.tkc-table td{padding:10px;border-bottom:1px solid #eee;text-align:left;vertical-align:middle}
.tkc-table th{font-size:12px;color:#666}

.tkc-btn{display:inline-block;padding:2px 20px;border-radius:5px;border:1px solid #e7e7e7;text-decoration:none;color:#111;background:#fff;font-weight:700;font-size:12px}
.tkc-btn:hover{opacity:.9}
.tkc-btn-primary{border-color:#111}

.tkc-badge{display:inline-block;padding:2px 20px;border-radius:5px;font-size:12px;font-weight:700;border:1px solid #e7e7e7;white-space:nowrap}
.tkc-badge-ok{border-color:#2d7a2d;color:#2d7a2d}
.tkc-badge-warn{border-color:#b42318;color:#b42318}

.tkc-list{margin:0;padding-left:18px}
.tkc-list li{margin:6px 0}

/* =========================================================
   QUOTE: filtri + raggruppamento per anno
   ========================================================= */

.tkc-filters{
  margin: 0 0 16px 0;
  padding: 12px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fafafa;
}

.tkc-filters-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.tkc-filter{ display:flex; flex-direction:column; gap:6px; }
.tkc-filter label{ font-size: 12px; color:#666; }

.tkc-filter select,
.tkc-filter input{
  height: 38px;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  padding: 0 10px;
  background: #fff;
  outline: none;
}

/* solo alcuni campi possono crescere (NON l'ID Woo) */
.tkc-filter-grow{ flex: 1; min-width: 180px; }

/* BOTTONI in linea su desktop */
.tkc-filter-actions{
  display:flex;
  flex-direction:row;
  gap:8px;
  align-items:flex-end;
}

/* dimensioni uniformi */
.tkc-filter select,
.tkc-filter input{ min-width:130px; }

/* ID Woo piccolo */
.tkc-filter input[name="woo_id"]{
  width:130px !important;
  min-width:130px !important;
  flex:0 0 130px !important;
}

/* pulsanti stessa altezza dei campi */
.tkc-filter-actions .tkc-btn,
.tkc-filter-actions button,
.tkc-filter-actions a{
  height:38px;
  line-height:38px;
  padding:0 14px;
  border-radius:12px;
  white-space:nowrap;
}

/* accordion per anno */
.tkc-quote-years{ display:flex; flex-direction:column; gap:10px; margin-top: 8px; }

.tkc-year{
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fff;
  overflow: hidden; /* desktop ok */
}

.tkc-year-head{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.tkc-year-head::-webkit-details-marker{ display:none; }

.tkc-year-title{ font-weight: 800; }
.tkc-year-meta{ color:#666; font-size: 12px; align-self:center; }

.tkc-year-body{ padding: 0 12px 12px 12px; }

/* =========================================================
   NOTICE (Richieste)
   ========================================================= */
.tkc-notice{ padding:10px 12px; border-radius:12px; margin:0 0 12px 0; border:1px solid #ececec; background:#fff; }
.tkc-notice-ok{ border-color:#12b76a; color:#027a48; }
.tkc-notice-warn{ border-color:#f79009; color:#b54708; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet */
@media (max-width:1024px){
  .tkc-wrap{max-width:100%;}
}

/* Mobile */
@media (max-width:640px){
  .tkc-wrap{padding:10px}
  .tkc-header{flex-direction:column;align-items:flex-start}
  .tkc-user{text-align:left}

  /* Filtri in colonna */
  .tkc-filters-row{flex-direction:column; align-items:stretch;}
  .tkc-filter{width:100%;}
  .tkc-filter-grow{min-width:0; width:100%;}
  .tkc-filter select,
  .tkc-filter input{width:100% !important; min-width:0 !important;}

  /* Bottoni affiancati full width */
  .tkc-filter-actions{width:100%;}
  .tkc-filter-actions .tkc-btn,
  .tkc-filter-actions button,
  .tkc-filter-actions a{
    flex:1 1 0;
    text-align:center;
    padding:0 12px;
  }

  /* Header anno su due righe */
  .tkc-year-head{flex-direction:column; align-items:flex-start;}
  .tkc-year-meta{align-self:flex-start;}

  .tkc-box-value{font-size:18px;}

  /* ✅ NO CLIP su mobile */
  .tkc-year{overflow:visible !important;}

  /* =====================================================
     MOBILE: tabella quote -> CARD (NO scrollbar)
     ===================================================== */
  .tkc-year-body{overflow:visible !important;}
  .tkc-year-body .tkc-table thead{display:none;}

  .tkc-year-body .tkc-table,
  .tkc-year-body .tkc-table tbody,
  .tkc-year-body .tkc-table tr{
    display:block;
    width:100%;
    max-width:100%;
  }

  .tkc-year-body .tkc-table tr{
    border:1px solid #ececec;
    border-radius:16px;
    background:#fff;
    padding:12px;
    margin:12px 0;
  }

  .tkc-year-body .tkc-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid #f2f2f2;
    min-width:0; /* 🔥 fondamentale */
  }

  .tkc-year-body .tkc-table td:last-child{
    border-bottom:none;
    padding-bottom:0;
  }

  /* etichette */
  .tkc-year-body .tkc-table td::before{
    font-weight:600;
    color:#777;
    font-size:12px;
    min-width:92px;
    flex:0 0 92px;
  }

  /* valore a destra: può “rientrare” */
  .tkc-year-body .tkc-table td > *{
    max-width:100%;
  }

  /* ✅ NUOVA MAPPA COLONNE (6 colonne con checkbox) */
  .tkc-year-body .tkc-table td:nth-child(1)::before{content:""; display:none;} /* Sel */
  .tkc-year-body .tkc-table td:nth-child(2)::before{content:"Descrizione";}
  .tkc-year-body .tkc-table td:nth-child(3)::before{content:"Scadenza";}
  .tkc-year-body .tkc-table td:nth-child(4)::before{content:"Importo";}
  .tkc-year-body .tkc-table td:nth-child(5)::before{content:"Stato";}
  .tkc-year-body .tkc-table td:nth-child(6)::before{content:""; display:none;} /* Azione */

  /* Sel: checkbox a destra */
  .tkc-year-body .tkc-table td:nth-child(1){
    justify-content:flex-end;
    padding-top:0;
  }

  /* Stato: badge a destra e senza divider sotto (così “attacca” col bottone) */
  .tkc-year-body .tkc-table td:nth-child(5){
    border-bottom:none;
    padding-bottom:6px;
  }

  /* Azione: bottone a destra e sotto lo stato */
  .tkc-year-body .tkc-table td:nth-child(6){
    border-bottom:none;
    padding-top:0;
    justify-content:flex-end;
  }

  .tkc-badge{padding:2px 20px; font-size:12px;}

  .tkc-year-body .tkc-table td:nth-child(6) .tkc-btn,
  .tkc-year-body .tkc-table td:nth-child(6) a{
    height: 25px;
    line-height: 18px;
    padding: 2px 35px;
    border-radius: 5px;
    max-width: 100%;
  }
}

/* Portal login reCAPTCHA */
.tkc-login-recaptcha{margin:14px 0 0;}


/* =========================================================
   LOGIN PORTALE - UI (label sopra, toggle password, ordine reCAPTCHA)
   ========================================================= */
#tkc_portal_loginform{
  display:flex;
  flex-direction:column;
}

#tkc_portal_loginform .login-username{ order:1; }
#tkc_portal_loginform .login-password{ order:2; }
#tkc_portal_loginform .login-remember{ order:3; }
#tkc_portal_loginform .tkc-login-recaptcha{ order:4; margin:12px 0; padding:12px 0 6px; }
#tkc_portal_loginform .login-submit{ order:5; margin-top:12px; }

#tkc_portal_loginform .login-username label,
#tkc_portal_loginform .login-password label{
  display:block;
  margin:0 0 6px;
  font-weight:600;
}

#tkc_portal_loginform .login-username input,
#tkc_portal_loginform .login-password input{
  width:100%;
  max-width:420px;
}

#tkc_portal_loginform .tkc-pass-wrap{
  display:block;
  position:relative;
  max-width:420px;
}

#tkc_portal_loginform .tkc-pass-wrap input{
  padding-right:46px;
}

#tkc_portal_loginform .tkc-pass-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:0;
  padding:4px;
  cursor:pointer;
  line-height:1;
  font-size:18px;
  opacity:.75;
}

#tkc_portal_loginform .tkc-pass-toggle:hover{ opacity:1; }

/* Select stile portale */
.tkc-portal select,
.tkc-portal select.widefat {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 36px 10px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-size: 15px !important;
  color: #111827 !important;
  cursor: pointer !important;
  transition: border-color .15s, box-shadow .15s;
}

/* Contenitore del select: non permette overflow */
.tkc-portal p:has(select),
.tkc-portal label:has(select) {
  overflow: hidden;
  max-width: 100%;
  display: block;
}

.tkc-portal select:focus,
.tkc-portal select.widefat:focus {
  outline: none;
  border-color: #1a56db;
  box-shadow: 0 0 0 3px rgba(26,86,219,.15);
}

.tkc-portal select option[value=""] {
  color: #9ca3af;
}

/* =========================================================
   SEGNALAZIONI — tabella scrollabile con doppia barra
   ========================================================= */

/* Wrapper scroll orizzontale con barra ANCHE in cima */
.tkc-segn-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Barra di scorrimento sopra: trucco con transform */
.tkc-segn-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 12px;
  margin-bottom: 4px;
}
.tkc-segn-scroll-top-inner {
  height: 1px;
}

/* Tabella segnalazioni: non collassa su mobile */
.tkc-segn-table {
  min-width: 600px;
  width: 100%;
}

@media (max-width: 640px) {
  /* Tabella segnalazioni: scroll orizzontale */
  .tkc-segn-scroll-wrap {
    border-radius: 12px;
    border: 1px solid #ececec;
  }
  .tkc-segn-table {
    border-radius: 0;
    border: none;
  }
}


/* =========================================================
   MULTIPROPRIETA PORTALE
   ========================================================= */
.tkc-property-group{
  margin-bottom:14px;
}

.tkc-property-condo{
  padding:0 12px 10px 38px;
  color:#666;
  font-size:13px;
}

@media (max-width:640px){
  .tkc-property-condo{
    padding:0 12px 10px 12px;
  }
}