/* KIMI — identità visiva: Sora, ink oliva + giallo lime, terracotta/sabbia/pietra */
:root {
  --k-ink: #1C1F1A;
  --k-side: #1C1F1A;
  --k-side2: #262A23;
  --k-accent: #C6F135;
  --k-accent-dark: #B5E024;
  --k-accent-soft: #F4FBDC;
  --k-terra: #C96F4A;
  --k-sand: #EDEAE0;
  --k-stone: #8A8D82;
  --k-pos: #2F9E5B;
  --k-neg: #D64545;
  --k-bg: #EDEAE0;
  --k-muted: #8A8D82;
  --k-card-radius: 1.1rem;
}

body {
  font-family: 'Sora', system-ui, sans-serif;
  background: var(--k-bg);
  color: var(--k-ink);
}

.kimi-wrap { display: flex; min-height: 100vh; }

/* ------- sidebar ------- */
.kimi-side {
  width: 235px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--k-side) 0%, var(--k-side2) 100%);
  color: #BFC3B6;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.kimi-logo { display: flex; align-items: center; gap: .7rem; padding: 1.4rem 1.2rem 1.1rem; }
.kimi-logo-mark {
  width: 42px; height: 42px; border-radius: 14px;
  background: var(--k-accent);
  color: var(--k-ink); font-weight: 700; font-size: 1.35rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(198, 241, 53, .3);
}
.kimi-logo-name { color: #fff; font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.kimi-logo-sub { font-size: .72rem; letter-spacing: .04em; opacity: .75; }
.kimi-nav { padding: .6rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.kimi-nav a {
  color: #BFC3B6; text-decoration: none; padding: .55rem .8rem;
  border-radius: .65rem; font-weight: 600; font-size: .92rem;
  display: flex; align-items: center; gap: .6rem;
  transition: background .15s, color .15s;
}
.kimi-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.kimi-nav a.active { background: var(--k-accent); color: var(--k-ink); box-shadow: 0 3px 10px rgba(198,241,53,.25); }
.kimi-nav-tools {
  margin-top: auto; padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.kimi-nav-tools a { font-size: .85rem; }
.kimi-side-foot { padding: 1rem 1.2rem; font-size: .72rem; }
.kimi-profile {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .6rem; margin: 0 0 .8rem;
  background: rgba(255,255,255,.06); border-radius: .7rem;
}
.kimi-profile-avatar {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px;
  background: var(--k-accent); color: var(--k-ink);
  font-weight: 700; font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
}
.kimi-profile-name {
  color: #fff; font-weight: 600; font-size: .76rem; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kimi-profile-out { margin-left: auto; color: var(--k-stone); font-size: 1rem; }
.kimi-profile-out:hover { color: var(--k-accent); }
.kimi-byline { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--k-stone); }
.kimi-byline span { color: var(--k-accent); font-weight: 700; }
.kimi-foot-note { opacity: .45; margin-top: .2rem; }

/* ------- main ------- */
.kimi-main { flex: 1; min-width: 0; }
.kimi-topbar {
  padding: 1.4rem 1.8rem .4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.kimi-topbar h1 { font-size: 1.45rem; font-weight: 700; margin: 0; }

/* ------- oscura importi ------- */
/* i testi passati da euro() sono già mascherati lato server; qui si coprono
   input monetari dei form e grafici */
.kimi-oscura input[name="importo"], .kimi-oscura input[name="uscita"],
.kimi-oscura input[name="entrata"], .kimi-oscura input[name="saldo_iniziale"],
.kimi-oscura input[name="fido"], .kimi-oscura input[name="residuo"],
.kimi-oscura input[name="rata"], .kimi-oscura input[name="plafond"],
.kimi-oscura input[name="saldo_reale"], .kimi-oscura input[name="netto"],
.kimi-oscura input[name="disponibilita"], .kimi-oscura input[name="speso"],
.kimi-oscura input[name="da_contabilizzare"], .kimi-oscura input[name="budget_mese"],
.kimi-oscura canvas { filter: blur(7px); }
.kimi-oscura-placeholder {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 190px; color: var(--k-muted); font-weight: 600; font-size: .9rem;
}
.kimi-content { padding: 1rem 1.8rem 2.5rem; }

/* ------- cards & tables ------- */
.card { border: none; border-radius: var(--k-card-radius); box-shadow: 0 1px 4px rgba(28,31,26,.08); }
.card .card-header {
  background: transparent; border-bottom: 1px solid #E7E4D9;
  font-weight: 700; font-size: .95rem; padding: .9rem 1.2rem;
}
.kimi-kpi { padding: 1.1rem 1.3rem; }
.kimi-kpi .kpi-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--k-muted); }
.kimi-kpi .kpi-value { font-size: 1.55rem; font-weight: 700; margin-top: .15rem; }
.kimi-kpi .kpi-note { font-size: .78rem; color: var(--k-muted); }
.kpi-pos { color: var(--k-pos); }
.kpi-neg { color: var(--k-neg); }
.kpi-accent { color: var(--k-terra); }

.table { --bs-table-hover-bg: #F5F3EB; font-size: .9rem; }
.table thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--k-muted); border-bottom-width: 1px; font-weight: 700;
}
.table tfoot td { font-weight: 700; border-top: 2px solid #DAD7C9; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--k-pos); font-weight: 700; }
.neg { color: var(--k-neg); font-weight: 700; }

.kimi-badge-late { background: #F9E2E0; color: #A93636; }
.kimi-badge-warn { background: #fef3c7; color: #b45309; }
.kimi-badge-ok   { background: #DFF0E4; color: #23764A; }
.badge { font-weight: 700; }

.btn-kimi { background: var(--k-accent); border: none; color: var(--k-ink); font-weight: 700; border-radius: .6rem; }
.btn-kimi:hover { background: var(--k-accent-dark); color: var(--k-ink); }
.btn-outline-kimi { border: 1.5px solid var(--k-ink); color: var(--k-ink); font-weight: 700; border-radius: .6rem; background: transparent; }
.btn-outline-kimi:hover { background: var(--k-accent-soft); color: var(--k-ink); }

.form-control, .form-select { border-radius: .6rem; }
.form-control:focus, .form-select:focus { border-color: var(--k-accent-dark); box-shadow: 0 0 0 .2rem rgba(198,241,53,.25); }

.nav-pills .nav-link { font-weight: 700; color: var(--k-muted); border-radius: .6rem; }
.nav-pills .nav-link.active { background: var(--k-accent); color: var(--k-ink); }

.progress { height: 10px; border-radius: 6px; background: #E0DDD0; }
.progress-bar { background: var(--k-accent); }
/* semaforo utilizzo carte (semantici: verde ok, ambra attenzione, rosso critico) */
.progress-bar.uso-verde  { background: var(--k-pos); }
.progress-bar.uso-giallo { background: #E3A008; }
.progress-bar.uso-rosso  { background: var(--k-neg); }

/* ------- login ------- */
.kimi-login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--k-side) 0%, var(--k-side2) 70%);
  padding: 1.5rem;
}
.kimi-login-box { width: 100%; max-width: 380px; }
.kimi-login-card { width: 100%; padding: 2rem 1.8rem 1.6rem; }
.kimi-login-byline { text-align: center; margin-top: 1.1rem; }
.kimi-login-mark { width: 54px; height: 54px; border-radius: 18px; margin: 0 auto; }
.kimi-login-title { font-size: 1.6rem; font-weight: 700; margin: .6rem 0 0; }
.kimi-login-sub { font-size: .78rem; letter-spacing: .05em; color: var(--k-muted); }

/* ------- guida ------- */
.kimi-guida-indice { position: sticky; top: 1rem; }
.kimi-guida-indice .list-group-item { background: transparent; font-weight: 600; }
.kimi-guida-sezione { scroll-margin-top: 1rem; }
.kimi-guida-sezione .card-body p:last-child,
.kimi-guida-sezione .card-body ul:last-child { margin-bottom: .4rem; }
.kimi-guida-sezione pre {
  position: relative;
  background: #F5F3EB; border: 1px solid #E7E4D9; border-radius: .6rem;
  padding: .7rem 5.2rem .7rem .9rem;
  font-size: .82rem; white-space: pre; overflow-x: auto;
}
.kimi-copy {
  position: absolute; top: .4rem; right: .45rem;
  border: 1px solid #DAD7C9; background: #fff; color: var(--k-ink);
  font-size: .68rem; font-weight: 700; border-radius: .45rem;
  padding: .15rem .5rem; font-family: 'Sora', system-ui, sans-serif;
}
.kimi-copy:hover { background: var(--k-accent-soft); }

/* ------- mobile ------- */
@media (max-width: 900px) {
  .kimi-wrap { flex-direction: column; }
  .kimi-side { width: 100%; height: auto; position: static; }

  /* header compatto: logo + profilo sulla stessa riga, nav a scorrimento orizzontale */
  .kimi-logo { padding: .75rem 1rem .4rem; }
  .kimi-logo-mark { width: 34px; height: 34px; border-radius: 11px; }
  .kimi-logo-mark svg { width: 21px; height: 21px; }
  .kimi-logo-name { font-size: 1.05rem; }
  .kimi-logo-sub { font-size: .62rem; }

  .kimi-nav {
    flex-direction: row; flex-wrap: nowrap; gap: .25rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: .35rem .8rem; scrollbar-width: none;
  }
  .kimi-nav::-webkit-scrollbar { display: none; }
  .kimi-nav a { white-space: nowrap; padding: .4rem .65rem; font-size: .84rem; flex-shrink: 0; }
  .kimi-nav-tools { margin-top: 0; padding-top: 0; border-top: none; }

  .kimi-side-foot {
    display: flex; align-items: center; gap: .8rem;
    padding: .35rem 1rem .6rem;
  }
  .kimi-profile { margin: 0; flex: 1; min-width: 0; padding: .35rem .55rem; }
  .kimi-profile-avatar { width: 24px; height: 24px; border-radius: 8px; font-size: .62rem; }
  .kimi-byline { white-space: nowrap; }
  .kimi-foot-note { display: none; }

  /* contenuto */
  .kimi-topbar { padding: .9rem 1rem .3rem; }
  .kimi-topbar h1 { font-size: 1.2rem; }
  .kimi-content { padding: .7rem 1rem 2rem; }
  .kimi-kpi { padding: .8rem .95rem; }
  .kimi-kpi .kpi-label { font-size: .68rem; }
  .kimi-kpi .kpi-value { font-size: 1.15rem; }
  .kimi-kpi .kpi-note { font-size: .72rem; }
  .table { font-size: .82rem; }

  /* tabelle larghe: scroll orizzontale dentro la card */
  .card-body.p-0 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}