/* Gestionale pratiche – one hand-written stylesheet.
   Three colours only, one per zone: dark grey sidebar, light grey background,
   white topbar and boxes. White text on dark grey.
   Labels (pills: status, dossier name, file): light grey; a pill that is a link turns dark grey on hover. */

:root {
  --dark: #3a3a3a;
  --light: #e4e4e4;
  --white: #fff;
  --yellow: #ffd43b;  /* the "Da ..." boxes, the new activities, the notices after an action */
  --sidebar-width: 240px;
  --topbar-height: 56px;
  --radius: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--dark);
  background: var(--white);
  --surface: var(--white);  /* what is behind the buttons (hover); boxes and page background set their own */
}

a { color: inherit; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }

/* Title of a page section outside the white boxes: looks like the page title */
.page-section-title { font-size: 1.4rem; margin: 1.5rem 0 1rem; }

/* Pannello di controllo: Aggiornamenti on the left, "Da fare" on the right */
/* Two columns always (also on old browsers): with nothing to do the right column is just empty */
.dashboard.with-todo {
  display: grid;
  grid-template-columns: 2fr minmax(220px, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.dashboard-heading { font-size: 1.1rem; margin: 0 0 0.75rem; }
/* Scadenze (owner): in a row that opens the dossier, the cell with the date to change is not a link */
.table .row-link td.edit-cell { padding: 0.4rem 1.25rem; }
.form .edit-cell input[type="date"] { font: inherit; margin: 0; }
/* Each "Da ..." group: a yellow box with its title inside; the whole box is one button (opens Pratiche) */
.card.todo-item { margin-bottom: 1rem; background: var(--yellow); border-color: var(--yellow); }
a.todo-item { display: block; color: inherit; text-decoration: none; }
a.todo-item:hover { border-color: var(--dark); }
/* One dossier per line; up to 5 visible (5 labels of 1.4rem + 4 gaps of 0.4rem), the others scroll */
.todo-dossiers {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  max-height: 8.6rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* One line per dossier: the name on the left, the scadenza on the right edge of the box */
.todo-dossiers li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; }
/* Dossier name in the "Da ..." boxes: a light grey pill; a long name ends with "…", the full title on mouse over */
.todo-dossiers .todo-name { min-width: 0; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-dossiers .deadline { flex: none; font-size: 0.8rem; font-weight: 600; }  /* plain text, bold, on the right */


/* ---------- App layout: sidebar + topbar + content ---------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  min-height: 100vh;
}

.sidebar {
  grid-row: 1 / 3;
  background: var(--dark);
  color: var(--white);
  padding: 1rem;
}

.profile {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--light);
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  font-weight: 600;
  text-transform: uppercase;
}

/* Small avatar on white background (activities) */
.avatar-small {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
  border-color: var(--light);
  background: var(--light);
}

.profile-user { display: flex; align-items: center; gap: 0.75rem; }
.profile-name { font-weight: 600; }

/* Logout at the bottom of the sidebar: outline button (border only) on the dark background */
/* Logout under the user's name, as wide as the name: small outline button on the dark background.
   (.profile-text is as wide as its widest line, so 100% = the width of the name.) */
.logout { margin-top: 0.3rem; }
.logout .button {
  width: 100%;
  padding: 0.05rem 0.75rem;
  font-size: 0.8rem;
  background: transparent;
  border-color: var(--light);
  color: var(--white);
}
.logout .button:hover { background: var(--light); color: var(--dark); }

.nav { list-style: none; margin: 0; padding: 0; }

.nav a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
}

.nav a:hover,
.nav a.active {
  background: var(--light);
  color: var(--dark);
}

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

.topbar-title { font-weight: 600; }
.topbar-actions { display: flex; gap: 0.5rem; }  /* buttons of the whole page, on the right */
.topbar-actions form { margin: 0; }

.content { --surface: var(--light); padding: 1.5rem; background: var(--light); }

/* ---------- Components ---------- */

.button {
  font: inherit;
  padding: 0.4rem 1rem;
  border: 1px solid var(--dark);
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  cursor: pointer;
}

/* Hover: the button takes the colour of what is behind it (--surface: white in boxes and in the top bar, light grey
   on the page background), keeping its dark border and with dark text */
.button:hover { background: var(--surface); color: var(--dark); }

/* Links that look like buttons: no underline */
a.button { display: inline-block; text-decoration: none; }

.card {
  --surface: var(--white);
  padding: 1rem 1.25rem;
  border: 1px solid var(--light);
  border-radius: var(--radius);
  background: var(--white);
}

/* Counters above a list (Pratiche: per status; Documenti: per kind). A click filters on that value. */
/* Cerca: one minimal field above a list (Pratiche, Documenti, Clienti, Tecnici) */
.search { margin: 0 0 1rem; }
/* Pratiche, Clienti: Cerca on the left, Nuova pratica / Nuovo cliente on the same line, on the right */
.search-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.search-row .search { flex: 1; margin: 0; }
.search input[type="search"] {
  width: 100%;
  max-width: 24rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--light);
  border-radius: var(--radius);
  background: var(--white);
  font: inherit;
}
.search input[type="search"]:focus { outline: none; border-color: var(--dark); }

.section { margin-bottom: 1.5rem; }

.messages { list-style: none; margin: 0 0 1rem; padding: 0; }
/* A line above a filtered list (Pratiche from "Da aggiornare") */
.list-note { margin: 0 0 1rem; }

/* Notices after an action of the user (confirmations, warnings, errors such as a wrong login): yellow box */
.messages li {
  padding: 0.6rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--dark);
}

/* Labels (status, dossier name): light grey pills, the same for every status */
.badge {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--light);
  color: var(--dark);
  font-size: 0.85rem;
  white-space: nowrap;
}
/* Dossier names that are links (Pannello di controllo): dark grey with white text on hover, like the file pills */
a.badge:hover { background: var(--dark); color: var(--white); }

.table { width: 100%; border-collapse: collapse; }
.table th,
.table td {
  text-align: left;
  vertical-align: middle;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--light);
}
.table th { font-size: 0.85rem; background: var(--light); }
.table tbody tr:last-child td { border-bottom: none; }
/* Rows that open a page (Pratiche, Clienti, Tecnici): every cell is a link filling the cell, so a click anywhere
   on the row opens it (also "open in new tab"). No underline: the row looks like plain text; the cells after
   the title are tabindex="-1", so Tab stops once per row. */
.table .row-link td { padding: 0; }
.table .row-link td > a { display: block; padding: 0.85rem 1.25rem; text-decoration: none; }
.table .row-link:hover td { background: var(--light); }

/* Long lists scroll inside their box, so the page fits in one browser screen.
   below-search: the box has the Cerca field above it (Pratiche, Documenti, Clienti, Tecnici). */
.scroll-box { max-height: calc(100vh - 12rem); overflow-y: auto; }
.scroll-box.below-search { max-height: calc(100vh - 15.5rem); }
.scroll-box .table th { position: sticky; top: 0; z-index: 1; }  /* column titles stay visible */

.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; }
.details dt { font-weight: 600; }
.details dd { margin: 0; }
/* Dossier data box (dossier page): the names that are links (client, technicians) look like plain
   text; on hover a dark grey pill with white text. The negative margin keeps the name in place (the padding only
   shows with the pill). Only the links in the data (.details), not the buttons of the box (Modifica dati, ...). */
.dossier-data .details a {
  display: inline-block;
  padding: 0 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 999px;
  color: var(--dark);
  text-decoration: none;
}
.dossier-data .details a:hover { background: var(--dark); color: var(--white); }

/* Activities: compact (smaller text, tighter spacing) */
.activities { list-style: none; margin: 0; padding: 0; }
.activity {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--light);
}
.activity:last-child { border-bottom: none; }
/* Pannello di controllo: each activity is one button (opens the dossier at that activity) */
.activity.activity-clickable { padding: 0; }
.activity-row {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
.activity-row:hover { background: var(--light); }
/* Carica file: one button per kind of file, side by side */
.upload-choices { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Dossier page, more than 5 documents: column titles + 5 rows of about 3.1rem, the others scroll */
.scroll-box.documents-scroll { max-height: 18.5rem; }
/* New since last visit: dark grey, white text (the labels keep their own colours) */
.activity-new { background: var(--yellow); border-radius: var(--radius); }  /* new since the previous visit */
.activity .avatar-small { width: 28px; height: 28px; font-size: 0.7rem; }
/* Dossier name between author and date (Pannello di controllo): grey label */
.activity-dossier { font-size: 0.75rem; padding: 0 0.6rem; }
.activity-dossier-line { margin-top: 0.2rem; }  /* the dossier name, under the bold kind */
a.badge { text-decoration: none; }
/* The message is the main thing: bigger than the line above it */
.activity-meta { font-size: 0.8rem; }
.activity-text { margin: 0.2rem 0 0; font-size: 0.95rem; }

.filter-note { margin: 0 0 1rem; font-size: 0.9rem; }
/* Column titles you can click to sort */
.table th a.sort { text-decoration: none; }
.table th a.sort:hover { text-decoration: underline; }

/* ---------- Forms ---------- */

.form fieldset { border: none; margin: 0 0 1.25rem; padding: 0; }

.form legend { font-weight: 600; margin-bottom: 0.5rem; }

.form label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.9rem; }

/* Input fields: one per line, 25% of the box (at least 240px), full width on small screens.
   Buttons therefore always sit under the last field. */
.form input[type="text"],
.form input[type="email"],
.form input[type="file"],
.form select,
.form textarea {
  display: block;
  width: 25%;
  min-width: 240px;
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--dark);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--dark);
}
.form textarea { resize: vertical; }

/* Technician checkboxes, side by side */
/* Checkbox groups (Tipo pratica, ...): Django renders them as a fieldset; the boxes side by side */
.form fieldset legend { font-weight: normal; font-size: 0.9rem; margin-top: 0.75rem; }
.form fieldset > div { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.form fieldset label { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
/* The same checkboxes side by side in a box without fieldset (Collaboratori) */
.form .checkbox-list > div { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.5rem; }
.form .checkbox-list label { display: flex; align-items: center; gap: 0.4rem; margin: 0; }

.helptext { font-size: 0.8rem; margin-bottom: 0.25rem; }
/* Nuova pratica: existing client or immobile chosen; a notice like the others (yellow box) */
.existing-notice {
  margin: 0.75rem 0;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--dark);
}
/* Required fields: * after the label (forms with required_css_class = "required") */
.form .required::after { content: " *"; }

.errorlist {
  list-style: none;
  margin: 0.25rem 0;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--dark);
  font-size: 0.85rem;
}

.form .button { margin-top: 0.5rem; }

/* Dossier title on the left, status label next to it */
/* Title of a section with, at the top right of the box, the buttons that change only that section
   (Modifica dati, Collaboratori, Modifica scadenza, Carica file) */
.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.section-header h1, .section-header h2 { margin: 0; }
.section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }

/* Carica file: the browser's own file field, then the button under it */
.form.file-form .button { display: block; margin-top: 0.75rem; }

/* Impostazioni: current photo and username above the profile fields */
.settings-photo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.settings-photo .avatar-initials { border-color: var(--dark); }
.settings-photo h1 { margin: 0; }
.form input[type="password"] {
  display: block;
  width: 25%;
  min-width: 240px;
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--dark);
  border-radius: var(--radius);
}
.form input[type="checkbox"] { margin-right: 0.4rem; }

/* ---------- Login page (no sidebar) ---------- */

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  background: var(--light);
}

.login-box {
  --surface: var(--white);
  width: 100%;
  max-width: 360px;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--white);
}

.login-box input {
  width: 100%;
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--dark);
  border-radius: var(--radius);
}

.login-box .button { width: 100%; margin-top: 0.5rem; }

/* ---------- Small screens: sidebar on top ---------- */

@media (max-width: 700px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .sidebar { grid-row: auto; }
  .dashboard.with-todo { grid-template-columns: 1fr; }
  .scroll-box,
  .scroll-box.below-search { max-height: none; }  /* no scroll inside scroll on phones */
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="file"],
  .form select,
  .form textarea { width: 100%; min-width: 0; }
}