/* ===========================================================================
   Theme.

   Two deliberately different jobs:

   LIGHT is Django admin's own palette, with one exception: the top bar,
   which is a navy-to-teal sweep over a light breadcrumb strip. Everything
   from the breadcrumb down - page, sidebar, cards, buttons, tables - is
   left on django's own shades, so nothing further down the page has to be
   re-matched to a new palette. The rest of what this file does in light
   mode is shape: cards, pill buttons, rounded inputs, spacing, the
   changelist/filter split. Clean and plain, which is what a clinical tool
   should be in daylight.

   DARK is a proper dark theme rather than Django's grey-on-charcoal,
   modelled on csfloat.com: a near-black page (#15171c), a slightly
   lifted bar (#1a1c23), cards a shade above that (#1b1d24), hairline
   borders, muted blue-grey text, and one bright blue accent (#237bff)
   used sparingly.

   Only a handful of --md-* tokens are shared by both; every component rule
   below reads those or Django's own variables, so neither theme has a
   colour hardcoded into a component.

   Loaded from admin/base_site.html so it reaches every page including the
   login screen, and after django's base.css/dark_mode.css so it wins.
   =========================================================================== */

:root {
  --md-radius: 10px;
  --md-radius-lg: 14px;
  --md-pill: 999px;
}

/* --- Light: Django's own colours, plus the few tokens components need --- */

:root,
html[data-theme="light"] {
  /* Light mode takes django's own header, breadcrumb and page colours as
     they ship - nothing is overridden here. The only additions are the
     --md-* tokens below, which components of ours need and django has no
     equivalent for. */
  --md-surface: #ffffff;
  --md-surface-sunken: #f8f8f8;

  /* Django's own link blue, reused wherever a component needs an accent. */
  --md-accent: #417893;
  --md-accent-strong: #205067;
  --md-accent-soft: rgba(65, 120, 147, 0.12);
  --md-focus-ring: rgba(65, 120, 147, 0.28);

  /* The "Aggiungi ..." button at the top right of every list. Django's
     light theme paints it #747474 - a grey button for the one action on
     the page that creates something, sitting next to a Salva in the
     practice's own colour. Dark mode already had this pair; light mode
     was still on the default. */
  --object-tools-fg: #ffffff;
  --object-tools-bg: #417893;
  --object-tools-hover-bg: #205067;

  --md-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --md-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* --- Dark ---------------------------------------------------------------
   Repeated verbatim under the media query and under [data-theme="dark"],
   mirroring how django ships dark_mode.css, so the in-app toggle and the
   OS setting both land here. */

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #237bff;
    /* Lifted off the page colour so the sidebar's section bar reads. */
    --secondary: #23252e;
    /* Stays light: django paints #333 text on --accent in the date picker. */
    --accent: #f5dd5d;
    --primary-fg: #ffffff;

    --body-fg: #e4e7ec;
    --body-bg: #15171c;
    --body-quiet-color: #9ea7b1;
    --body-medium-color: #c3c9d1;
    --body-loud-color: #ffffff;

    --header-color: #ffffff;
    --header-branding-color: #ffffff;
    --header-bg: #1a1c23;
    --header-link-color: #ffffff;

    --breadcrumbs-fg: #9ea7b1;
    --breadcrumbs-link-fg: #6ba5ff;
    --breadcrumbs-bg: #101216;

    --link-fg: #4f93ff;
    --link-hover-color: #85b6ff;
    --link-selected-fg: #85b6ff;

    --hairline-color: #23252e;
    --border-color: #2c2f39;

    --error-fg: #ff7a8a;

    --message-success-bg: #12291f;
    --message-warning-bg: #2b2415;
    --message-error-bg: #2e1720;

    --darkened-bg: #1b1d24;
    --selected-bg: #23252e;
    --selected-row: #1d212b;

    --button-fg: #ffffff;
    --button-bg: #2b2f3a;
    --button-hover-bg: #363b48;
    --default-button-bg: #237bff;
    --default-button-hover-bg: #3d8cff;
    --close-button-bg: #2b2f3a;
    --close-button-hover-bg: #363b48;
    --delete-button-bg: #c0392f;
    --delete-button-hover-bg: #d9483c;

    --object-tools-fg: #ffffff;
    --object-tools-bg: #237bff;
    --object-tools-hover-bg: #3d8cff;

    --md-surface: #1b1d24;
    --md-surface-sunken: #16181e;
    --md-accent: #237bff;
    --md-accent-strong: #3d8cff;
    --md-accent-soft: rgba(35, 123, 255, 0.16);
    --md-focus-ring: rgba(35, 123, 255, 0.4);
    --md-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --md-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}

html[data-theme="dark"] {
  --primary: #237bff;
  /* Lifted off the page colour so the sidebar's section bar reads. */
  --secondary: #23252e;
  /* Stays light: django paints #333 text on --accent in the date picker. */
  --accent: #f5dd5d;
  --primary-fg: #ffffff;

  --body-fg: #e4e7ec;
  --body-bg: #15171c;
  --body-quiet-color: #9ea7b1;
  --body-medium-color: #c3c9d1;
  --body-loud-color: #ffffff;

  --header-color: #ffffff;
  --header-branding-color: #ffffff;
  --header-bg: #1a1c23;
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #9ea7b1;
  --breadcrumbs-link-fg: #6ba5ff;
  --breadcrumbs-bg: #101216;

  --link-fg: #4f93ff;
  --link-hover-color: #85b6ff;
  --link-selected-fg: #85b6ff;

  --hairline-color: #23252e;
  --border-color: #2c2f39;

  --error-fg: #ff7a8a;

  --message-success-bg: #12291f;
  --message-warning-bg: #2b2415;
  --message-error-bg: #2e1720;

  --darkened-bg: #1b1d24;
  --selected-bg: #23252e;
  --selected-row: #1d212b;

  --button-fg: #ffffff;
  --button-bg: #2b2f3a;
  --button-hover-bg: #363b48;
  --default-button-bg: #237bff;
  --default-button-hover-bg: #3d8cff;
  --close-button-bg: #2b2f3a;
  --close-button-hover-bg: #363b48;
  --delete-button-bg: #c0392f;
  --delete-button-hover-bg: #d9483c;

  --object-tools-fg: #ffffff;
  --object-tools-bg: #237bff;
  --object-tools-hover-bg: #3d8cff;

  --md-surface: #1b1d24;
  --md-surface-sunken: #16181e;
  --md-accent: #237bff;
  --md-accent-strong: #3d8cff;
  --md-accent-soft: rgba(35, 123, 255, 0.16);
  --md-focus-ring: rgba(35, 123, 255, 0.4);
  --md-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --md-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* ===========================================================================
   Components - shape and spacing only; every colour comes from a variable
   =========================================================================== */

/* --- Header ------------------------------------------------------------- */

#header {
  padding: 14px 40px;
  border-bottom: none;
}

#site-name a:link,
#site-name a:visited {
  color: var(--header-branding-color);
}

#user-tools {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

/* --- Breadcrumbs -------------------------------------------------------- */

div.breadcrumbs {
  font-size: 0.78rem;
  padding: 10px 40px;
}

/* --- Cards / modules ---------------------------------------------------- */

.module,
.dashboard-col,
.inline-related fieldset.module {
  background: var(--md-surface);
  border: 1px solid var(--hairline-color);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow-sm);
}

.module,
.inline-related fieldset.module {
  overflow: hidden;
}

/* Only the three tables at the foot of a patient's page scroll. Scoped
   deliberately: "overflow-x: auto" alone also turns overflow-y into auto
   (the spec won't let one axis be visible while the other is not), which
   on the odontogramma panel meant the hover card counted as overflow and
   the panel grew a scrollbar of its own. */
.dashboard-grid .dashboard-col {
  overflow-x: auto;
}

/* The odontogramma's hover card has to be free to spill out of its panel
   and over whatever is next to it. */
.chart-agenda-grid .dashboard-col {
  overflow: visible;
}

/* Five columns in a third-width panel: tightening the cells lets the last
   one ("Modifica") fit outright at normal window widths, so the scrollbar
   above stays a fallback for narrow screens rather than the usual case. */
.dashboard-col table.dash-table th,
.dashboard-col table.dash-table td {
  padding: 6px 5px;
  font-size: 0.82em;
}

.dashboard-col table.dash-table th:first-child,
.dashboard-col table.dash-table td:first-child {
  padding-left: 2px;
}

/* The app-list caption is a link, and django colours caption links white
   with a more specific selector than the caption itself - which would
   leave white text on the quiet caption bar below. */
#content-main .module caption a,
#content-main .module caption a:link,
#content-main .module caption a:visited,
.module caption a {
  color: var(--body-loud-color);
}

.module > h2,
#content-main .module caption,
.inline-related h3 {
  background: var(--md-surface-sunken);
  color: var(--body-loud-color);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hairline-color);
}

/* --- Right-hand column (Azioni recenti) ---------------------------------

   #content-related is only a column wrapper, but django fills it with
   --darkened-bg. That was invisible when the module inside it was a flat
   panel of the same colour; now the module is a white card, the wrapper's
   own fill showed as a stray grey band hanging below it. */

#content-related {
  background: none;
}

/* --- Changelist: results card and filter panel --------------------------

   Django wraps both the results and the filter sidebar in one element,
   #changelist, which also carries .module - so the card styling above put
   a single rounded box around the pair. Because the two are flex siblings,
   the box grew to whichever was taller: on a short list with a long filter
   (or the reverse) it left a large empty stretch of card with nothing in
   it, and the filter's own panel inherited a stray rounded corner where it
   met the card's edge.

   So #changelist is not a card. The results column is, and the filter is
   its own square-edged panel beside it - each ending where its own content
   ends. */

#changelist.module {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

#changelist .changelist-form-container {
  background: var(--md-surface);
  border: 1px solid var(--hairline-color);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow-sm);
  overflow: hidden;
  min-width: 0;
}

/* Narrower than django's 240px, and closer in: the width it takes comes
   straight out of the results table, which on a list with several columns
   was enough to push the last one out of sight. */
#changelist #changelist-filter {
  flex: 0 0 200px;
  margin-left: 18px;
  background: var(--md-surface);
  border: 1px solid var(--hairline-color);
  border-radius: 0;
  box-shadow: var(--md-shadow-sm);
  overflow: hidden;
  align-self: flex-start;
}

#changelist #changelist-filter h2,
#changelist #changelist-filter h3 {
  border-radius: 0;
}

/* --- Tables ------------------------------------------------------------- */

#changelist table thead th,
.results thead th {
  background: var(--md-surface-sunken);
  border-bottom: 1px solid var(--border-color);
}

/* Uppercase with generous tracking is what makes a header read as a
   header - but it also makes the header the widest thing in its column,
   so the tracking is kept modest and the size small. */
#changelist table thead th a,
.results thead th a {
  color: var(--body-quiet-color);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Django holds thead th to one line, so a two-word heading like
   "Prestazione prevista" props its whole column open - and an uppercased
   heading is wider still. Letting it wrap drops the column's minimum to
   its longest single word. (Django also sets padding: 0 on thead th and
   puts the padding on the link inside; don't override that or every
   column gets wider.) */
#changelist table thead th {
  white-space: normal;
}

#changelist tbody tr:hover > * {
  background: var(--selected-row);
}

/* Sort controls.

   Django floats them beside a block heading with 9px of top padding, so a
   sorted column's header grew taller than its neighbours and the heading
   itself could drop below the float. Sorting a column should not move the
   header row at all - so the controls come out of flow entirely, pinned to
   the right of the cell and vertically centred. Out of flow means they
   cost no height, and the small gutter reserved below is the only width
   they take from the column. */
#changelist table thead th {
  position: relative;
  vertical-align: middle;
}

#changelist table thead th .text {
  display: block;
}

#changelist table thead th.sortable .text,
#changelist table thead th.sorted .text {
  padding-right: 20px;
}

#changelist table thead th .sortoptions {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  float: none;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* The float's clearing div has nothing left to clear, and it added a stray
   line box to every header. */
#changelist table thead th .clear {
  display: none;
}

/* --- Date hierarchy ("‹ Tutte le date | Luglio 2026 | ...") ------------- */

/* Django gives #toolbar a 15px bottom margin, which made sense when the
   search box was its own free-standing block. Inside the results card it
   is just a gap between the search row and the date links, on top of this
   nav's own padding. */
#changelist #toolbar {
  margin-bottom: 0;
}

#changelist .toplinks {
  padding: 11px 16px;
  gap: 6px 18px;
  align-items: center;
}

/* The guillemet is part of the link text, so without this it sits flush
   against the card edge with a single thin space after it. */
#changelist .toplinks .date-back {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
}

/* --- Filter panel ------------------------------------------------------- */

/* Django pins the eye icon 1px from the top of a block-level link, so it
   floats above the text. Laying the link out as a flex row centres the
   text, and centring the background on the same box puts the icon on the
   same line. Both classes: the link becomes .hidelink once counts are on. */
#changelist-filter .viewlink,
#changelist-filter .hidelink {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding-left: 21px;
  background-position: 0 50%;
  background-size: 15px 15px;
}

/* --- Buttons ------------------------------------------------------------ */

.button,
a.button,
input[type="submit"],
input[type="button"],
button,
.submit-row input,
.submit-row a,
.object-tools a {
  border: none;
  border-radius: var(--md-pill);
  padding: 9px 20px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.06s ease, filter 0.15s ease;
}

.button:active,
input[type="submit"]:active,
button:active,
.object-tools a:active {
  transform: translateY(1px);
}

/* The one primary action on a page gets a little more presence - the
   colour is django's own default-button variable, not a colour of ours. */
.submit-row input[type="submit"].default,
.submit-row input[name="_save"],
#login-form .submit-row input[type="submit"] {
  padding: 11px 30px;
  box-shadow: var(--md-shadow-sm);
}

/* Written against :link/:visited on purpose. Django styles these buttons
   with ".object-tools a:link, .object-tools a:visited", which outranks a
   plain ".object-tools a" - so the sizing below was being ignored
   entirely and the buttons kept django's cramped 3px/12px box. */
.object-tools a:link,
.object-tools a:visited {
  /* Sized to sit in the same family as Salva and the other real buttons -
     django's own box here is 3px/12px at 11px type, which next to a 9px/
     20px submit button reads as a link someone made rectangular. Still a
     step below the submit row, since this one lives up in the heading. */
  display: inline-flex;
  align-items: center;
  float: none;
  padding: 8px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: var(--md-pill);
  box-shadow: var(--md-shadow-sm);
}

.object-tools a:link:hover,
.object-tools a:visited:hover {
  box-shadow: var(--md-shadow-lg);
}

/* django gives each item a fixed 1rem height, sized for its own 19px
   button; anything taller hangs out of the bottom of the li and the row
   stops lining up with the heading beside it. */
.object-tools li {
  height: auto;
  display: flex;
  align-items: center;
}

/* Django lifts this row by -48px, measured against its own 19px button.
   Ours is 31px, so the number has to be re-derived rather than nudged:
   the value below is the one that puts the middle of the buttons on the
   middle of the <h1> beside them. Kept in px, not rem, because the
   heading's own box grows with the root size at a different rate than
   the button's does - a rem value lands right at 16px and drifts by 4px
   on a 4K desktop, where a fixed one stays inside a pixel or two. */
.object-tools {
  margin-top: -50px;
}

/* The add / view-site glyphs are background images pinned to the right
   edge, so the right padding has to clear them by hand. 18 to the edge
   matches the padding on the left, 13 is the glyph, 8 is the gap after
   the label - so the label and the glyph read as one group centred in the
   pill, rather than text shoved left of a floating symbol. */
.object-tools a.addlink:link,
.object-tools a.addlink:visited,
.object-tools a.viewsitelink:link,
.object-tools a.viewsitelink:visited {
  padding-right: 39px;
  background-position: right 18px center;
  background-size: 13px 13px;
}

/* A secondary tool: a different way to look at the same records, as
   opposed to the filled pill next to it that creates a new one. Outlined
   and squarer, matching "Vista elenco" on the calendar's toolbar - the two
   directions of the same switch, so they read as the same control.
   Written against :link/:visited because django's own rule for these is,
   and that outranks a plain class. */
.object-tools a.objtool-secondary:link,
.object-tools a.objtool-secondary:visited {
  background: transparent;
  background-image: none;
  color: var(--link-fg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  /* One pixel off the filled pill's padding, top and bottom, because this
     one carries a border and the other doesn't - so the two finish the
     same height and the pair sits on one line. */
  padding: 7px 17px;
  box-shadow: none;
}

.object-tools a.objtool-secondary:link:hover,
.object-tools a.objtool-secondary:visited:hover {
  box-shadow: none;
  border-color: var(--md-accent);
}

.object-tools a.objtool-secondary:focus,
.object-tools a.objtool-secondary:hover {
  background: var(--darkened-bg);
  color: var(--link-fg);
}

.object-tools a:focus-visible,
.button:focus-visible,
input[type="submit"]:focus-visible,
button:focus-visible {
  outline: 3px solid var(--md-focus-ring);
  outline-offset: 2px;
}

/* --- Form fields -------------------------------------------------------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea,
.vTextField {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 11px;
  background: var(--md-surface);
  color: var(--body-fg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Selects get the same box as the inputs beside them - but only inside a
   form. Django pins every select to a fixed 1.875rem (30px) height, and
   with this file's field padding that left about 12px of content box for
   13px text, slicing the label off top and bottom; so here the height has
   to give rather than the padding.

   Scoped to forms deliberately. The changelist's own "Azione" select is
   already sized by django's changelist CSS (24px, its own padding), so it
   never had the clipping problem - and releasing its height made that
   whole actions bar 11px taller for nothing. */
.form-row select,
.aligned select {
  height: auto;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--md-surface);
  color: var(--body-fg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Every other select keeps django's compact sizing; only the corner is
   rounded to match the rest of the controls. */
select {
  border-radius: 6px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus,
.vTextField:focus {
  border-color: var(--md-accent);
  box-shadow: 0 0 0 3px var(--md-focus-ring);
  outline: none;
}

/* --- Messages ----------------------------------------------------------- */

ul.messagelist li {
  border-radius: var(--md-radius);
  border: 1px solid var(--hairline-color);
  font-size: 0.82rem;
  padding: 12px 16px 12px 42px;
}

/* --- Login -------------------------------------------------------------- */

.login #container {
  border: 1px solid var(--hairline-color);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-shadow-lg);
  overflow: hidden;
  width: 30rem;
  max-width: 92vw;
}

.login #header {
  padding: 18px 22px;
  border-radius: 0;
}

.login #content {
  padding: 26px 32px 30px;
}

.login .form-row {
  padding: 0;
  margin-bottom: 14px;
}

.login .form-row label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--body-quiet-color);
}

.login .form-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
}

.login .submit-row {
  padding: 6px 0 0;
  margin: 0;
  text-align: center;
}

/* Django's login submit carries no .default class, so it picks up the
   neutral button colour - which in light happens to look primary and in
   dark is plain grey. It is the only action on the page; give it the
   primary colour explicitly. */
.login .submit-row input[type="submit"] {
  width: 100%;
  padding: 12px 24px;
  font-size: 0.88rem;
  background: var(--default-button-bg);
  color: var(--button-fg);
}

.login .submit-row input[type="submit"]:hover {
  background: var(--default-button-hover-bg);
}

/* --- Sidebar ------------------------------------------------------------

   The sidebar is navigation, not content, so it is not a card. Giving it
   the card's border, radius and clipped overflow put a rounded corner on
   the section bar (which should read as full-bleed) and left a hairline
   of border showing to either side of it - the stray little lines around
   the section heading. */

#nav-sidebar .module {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

#nav-sidebar .module caption,
#nav-sidebar .current-app .section {
  border-radius: 0;
}

/* Django gives the filter box width:100%, so it ran edge to edge against
   the sidebar's sides and sat right up under the breadcrumb bar. Inset on
   all four sides so it reads as a control inside the panel. */
#nav-sidebar #nav-filter {
  width: calc(100% - 24px);
  margin: 16px 12px 12px;
  padding: 6px 10px;
  font-size: 0.8rem;
  border-radius: 8px;
}

#nav-filter:focus {
  border-color: var(--md-accent);
  box-shadow: 0 0 0 3px var(--md-focus-ring);
}

/* The "Aggiungi" links down the sidebar. Two things were off:

   - django draws the + as a background image pinned to "0 1px", which
     aligns it to the top of the line box rather than to the text on it,
     so on a 16px line the glyph sat a couple of pixels high of the word
     next to it. inline-flex with a vertically centred background lines
     the two up whatever the row height, including the rows whose model
     name wraps onto two lines.
   - the links started at the cell's 8px padding, which left them adrift
     in the middle of the sidebar rather than lining up with anything.
     Ranged right against a proper gutter, they form a single edge. */
/* The rows themselves.

   Django forces both the sidebar table and the label cell to width:100%,
   which fights ordinary table-cell sizing, so the row is laid out as a
   flex line instead: the label gets a fixed width rather than shrinking to
   its content, which is what makes "+ Aggiungi" land at the same x on
   every row however long the label beside it is. 178px fits "Dati studio
   dentistico", the longest label, on one line with room left for the
   button - widen it here if a longer one is ever added.

   All of this belongs in THIS file, and only here. It used to live in
   admin_overrides.css, which is attached by ModelAdmin.Media and by two
   templates; where that file lands in <head> depends on which page you
   are on (django puts {{ media }} in extrastyle on a changelist, which is
   before this file, and in extrahead on a change form or the agenda
   calendar, which is after it). With a "#nav-sidebar table td" rule in
   both files - same selector, same specificity - the winner changed from
   page to page, and the "+ Aggiungi" buttons visibly jumped sideways when
   you opened the calendar. Keep every sidebar declaration here: brand.css
   is linked once, from base_site.html, on every page. */
#nav-sidebar table tbody tr,
#nav-sidebar table > tr {
  display: flex;
  align-items: center;
  width: 100%;
}

#nav-sidebar table th {
  display: block;
  flex: 0 0 178px;
  width: auto !important;
  padding: 14px 8px 14px 16px;
  overflow-wrap: break-word;
  box-sizing: border-box;
  /* Match the app-name header above these rows - django's own CSS already
     uppercases that .module caption, and these model-name rows did not get
     the same treatment. */
  text-transform: uppercase;
}

/* The cell shrinks to its content, so without the auto margin it sat
   immediately after the fixed-width label column, adrift in the middle of
   the panel rather than lined up with anything. margin-left:auto is what
   ranges it right in a flex row; text-align would do nothing here. The
   14px is the same inset the filter box above it has, so the panel has one
   gutter down its right-hand side. */
#nav-sidebar table td {
  display: block;
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: auto;
  padding-right: 14px;
  box-sizing: border-box;
}

#nav-sidebar table th a {
  display: block;
}

/* Django's generic "td, th { border-bottom }" for data tables leaks onto
   these cells now that they are display:block, and rendered as short
   jagged part-width lines instead of one clean rule per row. Cancelled,
   and put on the row instead. */
#nav-sidebar table th,
#nav-sidebar table td {
  border-bottom: none !important;
}

#nav-sidebar table tr:not(:last-child) {
  border-bottom: 1px solid var(--hairline-color, rgba(0, 0, 0, 0.08));
}

#nav-sidebar td .addlink {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding-left: 20px;
  background-position: 0 50%;
  background-size: 14px 14px;
}

/* The client column on the lists (Agenda, Fatture, Acconti, Preventivi).
   It is a column the code adds, so it can carry the business type's word
   for a client ("Paziente") - and so Django no longer gives it the
   "nowrap" class it puts on a plain foreign-key column. Same effect here,
   so a name keeps to one line as it always did. */
.field-client {
  white-space: nowrap;
}