/* ===== Colonna filtri: banda gradiente + comprimi/espandi =====
   Regola unica per tutte le sezioni a colonne (task manager, scadenziario, utenze, affitti,
   vendite, foto editor, foto editor AI, strumenti PDF).

   PERCHE' UN FILE SOLO
   Le stesse due cose (titolo in gradiente, colonna che si comprime a favore della colonna
   centrale) erano da fare su 8 pagine con markup diverso. Una copia per pagina = 8 modi di
   divergere. Qui sta la resa grafica; ogni pagina dichiara SOLO quanto stretta diventa la
   propria griglia quando la colonna e' compressa (una riga di CSS, dentro le sue media query,
   cosi' il responsive della pagina continua a valere).

   COME SI USA (vedi anche js/col-filtri.js)
     <aside class="tk-rail" data-col-comprimibile="taskmanager-filtri"> ... </aside>
   e nella pagina:
     .tk-2col:has(> .tk-rail.col-compressa){grid-template-columns:56px minmax(0,1fr)}
*/

/* --- Banda gradiente sui titoli di colonna (stessa banda delle card MR) --- */
.mr .mr-nav-card > .mr-nav-h {
  background: var(--mr-grad);
  color: #fff;
  border-bottom: 0;
}
.mr .mr-nav-card > .mr-nav-h,
.mr .mr-nav-card > .mr-nav-h > span,
.mr .mr-nav-card > .mr-nav-h i { color: #fff; }
/* i bottoni dentro la banda diventano pill chiare: sul gradiente il rosso/bianco pieno stona */
.mr .mr-nav-card > .mr-nav-h .icon-btn {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
}
.mr .mr-nav-card > .mr-nav-h .icon-btn:hover {
  background: rgba(255, 255, 255, .32);
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
}
/* ECCEZIONE: azzera-filtri e' ROSSO PIENO gia' a riposo (e' un'azione distruttiva, deve vedersi
   subito); al passaggio del mouse si schiarisce, non il contrario. */
.mr .mr-nav-card > .mr-nav-h .icon-btn.nav-reset {
  background: var(--mr-danger, #dc2626) !important;
  border: 1px solid var(--mr-danger, #dc2626) !important;
  color: #fff !important;
}
.mr .mr-nav-card > .mr-nav-h .icon-btn.nav-reset:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--mr-danger, #dc2626) !important;
}
/* Filtro e comprimi stanno ATTACCATI in fondo a destra: il titolo si prende lo spazio libero,
   poi vengono i due bottoni nell'ordine [filtro][comprimi]. */
.mr .mr-nav-card > .mr-nav-h > span:first-child { margin-right: auto; }
.mr .mr-nav-card > .mr-nav-h .icon-btn.nav-reset { order: 8; margin-left: 0; }
.mr .mr-nav-card > .mr-nav-h .col-comprimi { order: 9; margin-left: .4rem; }

/* --- Bottone comprimi (stesso trattamento del bottone comprimi della home) --- */
.col-comprimi {
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .18);
  color: #fff; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  transition: background .16s, border-color .16s;
}
.col-comprimi:hover { background: rgba(255, 255, 255, .32); border-color: rgba(255, 255, 255, .85); }
.col-comprimi i { transition: transform .18s; }
[data-col-comprimibile].col-compressa .col-comprimi i { transform: rotate(180deg); }

/* --- Banda creata dal modulo (colonne senza card di testa: foto editor) --- */
.col-testa {
  background: var(--mr-grad, linear-gradient(90deg, #2563eb, #06b6d4));
  color: #fff; border-radius: 12px; margin: 0 0 12px; padding: 11px 13px;
  display: flex; align-items: center; justify-content: space-between; gap: .45rem;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
[data-col-comprimibile].col-testa-propria.col-compressa > *:not(.col-testa) { display: none; }
[data-col-comprimibile].col-testa-propria.col-compressa > .col-testa {
  flex-direction: column-reverse; align-items: center; gap: .6rem;
  min-height: 190px; padding-top: 12px; padding-bottom: 12px;
}
[data-col-comprimibile].col-testa-propria.col-compressa > .col-testa > span {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
}
@media (max-width: 900px) {
  [data-col-comprimibile].col-testa-propria.col-compressa > * { display: revert; }
  [data-col-comprimibile].col-testa-propria.col-compressa > .col-testa {
    flex-direction: row; align-items: center; min-height: 0;
  }
  [data-col-comprimibile].col-testa-propria.col-compressa > .col-testa > span {
    writing-mode: horizontal-tb; transform: none;
  }
}

/* --- Colonna compressa: resta solo la banda, col titolo in verticale --- */
[data-col-comprimibile].col-compressa > .mr-nav-card > *:not(.mr-nav-h),
[data-col-comprimibile].col-compressa > .card-main > *:not(:first-child) { display: none; }

[data-col-comprimibile].col-compressa > .mr-nav-card > .mr-nav-h,
[data-col-comprimibile].col-compressa > .card-main > :first-child {
  flex-direction: column-reverse;
  align-items: center;
  gap: .6rem;
  min-height: 190px;
  padding-top: 12px; padding-bottom: 12px;
}
/* il testo del titolo gira di 90°: la colonna stretta resta leggibile */
[data-col-comprimibile].col-compressa > .mr-nav-card > .mr-nav-h > span,
[data-col-comprimibile].col-compressa > .card-main > :first-child > span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
/* i bottoni della banda (es. azzera filtri) non servono a colonna chiusa */
[data-col-comprimibile].col-compressa .mr-nav-h .icon-btn,
[data-col-comprimibile].col-compressa .card-main > :first-child button:not(.col-comprimi) { display: none; }

/* Sotto i 900px le colonne sono impilate: comprimere non ha senso e nasconderebbe i filtri */
@media (max-width: 900px) {
  .col-comprimi { display: none; }
  [data-col-comprimibile].col-compressa > .mr-nav-card > *,
  [data-col-comprimibile].col-compressa > .card-main > * { display: revert; }
  [data-col-comprimibile].col-compressa > .mr-nav-card > .mr-nav-h,
  [data-col-comprimibile].col-compressa > .card-main > :first-child {
    flex-direction: row; align-items: center; min-height: 0;
  }
  [data-col-comprimibile].col-compressa > .mr-nav-card > .mr-nav-h > span,
  [data-col-comprimibile].col-compressa > .card-main > :first-child > span {
    writing-mode: horizontal-tb; transform: none;
  }
}